Merge pull request #282 from JannikGM/conditionalBeautifyOnly

Add option to toggle GLSL beautify
BabylonJS · Aug 30, 2023 · 9c193ce · 9c193ce
2 parents bac9e97 + 085ff14
commit 9c193ce
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/src/embeddedFrontend/resultView/resultView.ts b/src/embeddedFrontend/resultView/resultView.ts
@@ -181,6 +181,12 @@ export class ResultView {
                 translatedSourceVertex: sourceCodeState.state.translatedSourceVertex,
             });
         });
+        this.sourceCodeComponent.onBeautifyChanged.add((sourceCodeState) => {
+            const state = this.mvx.getGenericState<ISourceCodeState>(this.sourceCodeComponentStateId);
+            state.beautify = (sourceCodeState.sender as HTMLInputElement).checked;
+            this.mvx.updateState(this.sourceCodeComponentStateId, state);
+        });
+
 
         this.updateViewState();
     }
@@ -286,6 +292,7 @@ export class ResultView {
             fragment,
             translated: false,
             editable: commandState.capture.DrawCall.programStatus.RECOMPILABLE,
+            beautify: true
         }, this.sourceCodeComponent);
 
         this.commandDetailStateId = this.mvx.addChildState(this.contentStateId, null, this.commandDetailComponent);

diff --git a/src/embeddedFrontend/resultView/sourceCode/sourceCodeComponent.ts b/src/embeddedFrontend/resultView/sourceCode/sourceCodeComponent.ts
@@ -7,6 +7,7 @@ export interface ISourceCodeState extends ISourceCodeChangeEvent {
     fragment: boolean;
     translated: boolean;
     editable: boolean;
+    beautify: boolean;
 }
 
 // Declare Ace types here.
@@ -41,6 +42,7 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
     public onFragmentSourceClicked: IStateEvent<ISourceCodeState>;
     public onSourceCodeCloseClicked: IStateEvent<ISourceCodeState>;
     public onSourceCodeChanged: IStateEvent<ISourceCodeState>;
+    public onBeautifyChanged: IStateEvent<ISourceCodeState>;
 
     private editor: IAceEditor;
 
@@ -52,6 +54,7 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
         this.onFragmentSourceClicked = this.createEvent("onFragmentSourceClicked");
         this.onSourceCodeCloseClicked = this.createEvent("onSourceCodeCloseClicked");
         this.onSourceCodeChanged = this.createEvent("onSourceCodeChanged");
+        this.onBeautifyChanged = this.createEvent("onBeautifyChanged");
     }
 
     public showError(errorMessage: string) {
@@ -82,15 +85,17 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
 
     public render(state: ISourceCodeState, stateId: number): Element {
         const source = state.fragment ? state.sourceFragment : state.sourceVertex;
-        let formattedShader: string;
+        let originalShader: string;
         // tslint:disable-next-line:prefer-conditional-expression
         if (state.translated) {
-            formattedShader = state.fragment ? state.translatedSourceFragment : state.translatedSourceVertex;
+            originalShader = state.fragment ? state.translatedSourceFragment : state.translatedSourceVertex;
         }
         else {
-            formattedShader = source ? this._indentIfdef(this._beautify(source)) : "";
+            originalShader = source ?? "";
         }
 
+        const displayedShader = state.beautify ? this._indentIfdef(this._beautify(originalShader)) : originalShader;
+
         const htmlString = this.htmlTemplate`
         <div class="sourceCodeComponentContainer">
             <div class="sourceCodeMenuComponentContainer">
@@ -103,8 +108,13 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
                 </ul>
             </div>
             $${
-            this.htmlTemplate`<div class="sourceCodeComponent">${formattedShader}</div>`
+            this.htmlTemplate`<div class="sourceCodeComponent">${displayedShader}</div>`
             }
+            <div class="sourceCodeMenuComponentFooter">
+                <p>
+                    <label><input type="checkbox" commandName="onBeautifyChanged" ${state.beautify ? "checked" : ""} /> Beautify</label>
+                </p>
+            </div>
         </div>`;
 
         const element = this.renderElementFromTemplate(htmlString.replace(/<br>/g, "\n"), state, stateId);

diff --git a/src/embeddedFrontend/styles/resultView.scss b/src/embeddedFrontend/styles/resultView.scss
@@ -620,9 +620,18 @@ $commandDetailComponentWidth: 40%;
   position: absolute;
   left: 0;
   top: 0;
+  bottom: 48px;
   right: $commandDetailComponentWidth;
 }
 
+.sourceCodeMenuComponentFooter {
+  position: absolute;
+  left: 0;
+  right: $commandDetailComponentWidth;
+  bottom: 0;
+  padding: 0 15px;
+}
+
 .sourceCodeMenuComponent {
   font-family: 'Montserrat', sans-serif;
   // text-transform: uppercase; 
@@ -759,7 +768,7 @@ $commandDetailComponentWidth: 40%;
   position:absolute; 
   top: $menuHeight + $border;
   left: 0;  
-  bottom: 0;
+  bottom: 48px;
   right: $commandDetailComponentWidth;
   background: $background;
   z-index: 9000;