PR cleanup

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -1,15 +1,14 @@
-
 import * as React from "react";
-import { GlobalState } from '../../globalState';
-import { Nullable } from 'babylonjs/types';
-import { ButtonLineComponent } from '../../sharedUiComponents/lines/buttonLineComponent';
-import { LineContainerComponent } from '../../sharedUiComponents/lines/lineContainerComponent';
-import { FileButtonLineComponent } from '../../sharedUiComponents/lines/fileButtonLineComponent';
-import { Tools } from 'babylonjs/Misc/tools';
-import { CheckBoxLineComponent } from '../../sharedUiComponents/lines/checkBoxLineComponent';
-import { DataStorage } from 'babylonjs/Misc/dataStorage';
-import { GUINode } from '../../diagram/guiNode';
-import { Observer } from 'babylonjs/Misc/observable';
+import { GlobalState } from "../../globalState";
+import { Nullable } from "babylonjs/types";
+import { ButtonLineComponent } from "../../sharedUiComponents/lines/buttonLineComponent";
+import { LineContainerComponent } from "../../sharedUiComponents/lines/lineContainerComponent";
+import { FileButtonLineComponent } from "../../sharedUiComponents/lines/fileButtonLineComponent";
+import { Tools } from "babylonjs/Misc/tools";
+import { CheckBoxLineComponent } from "../../sharedUiComponents/lines/checkBoxLineComponent";
+import { DataStorage } from "babylonjs/Misc/dataStorage";
+import { GUINode } from "../../diagram/guiNode";
+import { Observer } from "babylonjs/Misc/observable";
 import { TextLineComponent } from "../../sharedUiComponents/lines/textLineComponent";
 import { StringTools } from "../../sharedUiComponents/stringTools";
 import { Engine } from "babylonjs/Engines/engine";
@@ -55,7 +54,7 @@ interface IPropertyTabComponentProps {
 
 interface IPropertyTabComponentState {
     currentNode: Nullable<GUINode>;
- }
+}
 
 export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
     private _onBuiltObserver: Nullable<Observer<void>>;
@@ -64,7 +63,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
     constructor(props: IPropertyTabComponentProps) {
         super(props);
 
-        this.state = { currentNode: null};
+        this.state = { currentNode: null };
     }
 
     timerRefresh() {
@@ -77,7 +76,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         this._timerIntervalId = window.setInterval(() => this.timerRefresh(), 500);
         this.props.globalState.onSelectionChangedObservable.add((selection) => {
             if (selection instanceof GUINode) {
-                this.setState({ currentNode: selection});
+                this.setState({ currentNode: selection });
             } else {
                 this.setState({ currentNode: null });
             }
@@ -93,30 +92,34 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         this.props.globalState.onBuiltObservable.remove(this._onBuiltObserver);
     }
 
-
     load(file: File) {
-        Tools.ReadFile(file, (data) => {
-            let decoder = new TextDecoder("utf-8");
-            this.props.globalState.workbench.loadFromJson(JSON.parse(decoder.decode(data)));
+        Tools.ReadFile(
+            file,
+            (data) => {
+                const decoder = new TextDecoder("utf-8");
+                this.props.globalState.workbench.loadFromJson(JSON.parse(decoder.decode(data)));
 
-            this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-        }, undefined, true);
+                this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
+            },
+            undefined,
+            true
+        );
     }
 
     save() {
-        let json = JSON.stringify(this.props.globalState.guiTexture.serializeContent());
+        const json = JSON.stringify(this.props.globalState.guiTexture.serializeContent());
         StringTools.DownloadAsFile(this.props.globalState.hostDocument, json, "guiTexture.json");
     }
 
     saveToSnippetServer() {
-        let adt = this.props.globalState.guiTexture;
-        let content = JSON.stringify(adt.serializeContent());
+        const adt = this.props.globalState.guiTexture;
+        const content = JSON.stringify(adt.serializeContent());
 
-        let xmlHttp = new XMLHttpRequest();
+        const xmlHttp = new XMLHttpRequest();
         xmlHttp.onreadystatechange = () => {
             if (xmlHttp.readyState == 4) {
                 if (xmlHttp.status == 200) {
-                    let snippet = JSON.parse(xmlHttp.responseText);
+                    const snippet = JSON.parse(xmlHttp.responseText);
                     const oldId = adt.snippetId;
                     adt.snippetId = snippet.id;
                     if (snippet.version && snippet.version != "0") {
@@ -127,41 +130,39 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                         navigator.clipboard.writeText(adt.snippetId);
                     }
 
-                    let windowAsAny = window as any;
+                    const windowAsAny = window as any;
 
                     if (windowAsAny.Playground && oldId) {
                         windowAsAny.Playground.onRequestCodeChangeObservable.notifyObservers({
-                            regex: new RegExp(`parseFromSnippetAsync\\("${oldId}`, "g"),
-                            replace: `parseFromSnippetAsync("${adt.snippetId}`
+                            regex: new RegExp(oldId, "g"),
+                            replace: `parseFromSnippetAsync("${adt.snippetId}`,
                         });
                     }
 
                     alert("GUI saved with ID: " + adt.snippetId + " (please note that the id was also saved to your clipboard)");
-                }
-                else {
+                } else {
                     alert("Unable to save your GUI");
                 }
             }
-        }
+        };
 
         xmlHttp.open("POST", AdvancedDynamicTexture.SnippetUrl + (adt.snippetId ? "/" + adt.snippetId : ""), true);
         xmlHttp.setRequestHeader("Content-Type", "application/json");
 
-        let dataToSend = {
-            payload : JSON.stringify({
-                gui: content
+        const dataToSend = {
+            payload: JSON.stringify({
+                gui: content,
             }),
             name: "",
             description: "",
-            tags: ""
+            tags: "",
         };
 
         xmlHttp.send(JSON.stringify(dataToSend));
     }
 
     loadFromSnippet() {
-
-        let snippedID = window.prompt("Please enter the snippet ID to use");
+        const snippedID = window.prompt("Please enter the snippet ID to use");
 
         if (!snippedID) {
             return;
@@ -169,115 +170,81 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         this.props.globalState.workbench.loadFromSnippet(snippedID);
     }
 
-    renderProperties()
-    {
-        let className = this.state.currentNode?.guiControl.getClassName();
+    renderProperties() {
+        const className = this.state.currentNode?.guiControl.getClassName();
         switch (className) {
             case "TextBlock": {
                 const textBlock = this.state.currentNode?.guiControl as TextBlock;
-                return (<TextBlockPropertyGridComponent textBlock={textBlock}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <TextBlockPropertyGridComponent textBlock={textBlock} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "InputText": {
                 const inputText = this.state.currentNode?.guiControl as InputText;
-                return (<InputTextPropertyGridComponent inputText={inputText}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <InputTextPropertyGridComponent inputText={inputText} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "ColorPicker": {
                 const colorPicker = this.state.currentNode?.guiControl as ColorPicker;
-                return (<ColorPickerPropertyGridComponent colorPicker={colorPicker}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <ColorPickerPropertyGridComponent colorPicker={colorPicker} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "Image": {
                 const image = this.state.currentNode?.guiControl as Image;
-                return (<ImagePropertyGridComponent image={image}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <ImagePropertyGridComponent image={image} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "Slider": {
                 const slider = this.state.currentNode?.guiControl as Slider;
-                return (<SliderPropertyGridComponent slider={slider}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <SliderPropertyGridComponent slider={slider} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "ImageBasedSlider": {
                 const imageBasedSlider = this.state.currentNode?.guiControl as ImageBasedSlider;
-                return (<ImageBasedSliderPropertyGridComponent imageBasedSlider={imageBasedSlider}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <ImageBasedSliderPropertyGridComponent imageBasedSlider={imageBasedSlider} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "Rectangle": {
                 const rectangle = this.state.currentNode?.guiControl as Rectangle;
-                return (<RectanglePropertyGridComponent rectangle={rectangle}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <RectanglePropertyGridComponent rectangle={rectangle} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "StackPanel": {
                 const stackPanel = this.state.currentNode?.guiControl as StackPanel;
-                return (<StackPanelPropertyGridComponent stackPanel={stackPanel}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <StackPanelPropertyGridComponent stackPanel={stackPanel} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "Grid": {
                 const grid = this.state.currentNode?.guiControl as Grid;
-                return (<GridPropertyGridComponent grid={grid}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <GridPropertyGridComponent grid={grid} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "ScrollViewer": {
                 const scrollViewer = this.state.currentNode?.guiControl as ScrollViewer;
-                return (<ScrollViewerPropertyGridComponent scrollViewer={scrollViewer}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <ScrollViewerPropertyGridComponent scrollViewer={scrollViewer} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "Ellipse": {
                 const ellipse = this.state.currentNode?.guiControl as Ellipse;
-                return (<EllipsePropertyGridComponent ellipse={ellipse}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <EllipsePropertyGridComponent ellipse={ellipse} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "Checkbox": {
                 const checkbox = this.state.currentNode?.guiControl as Checkbox;
-                return (<CheckboxPropertyGridComponent checkbox={checkbox}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <CheckboxPropertyGridComponent checkbox={checkbox} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "RadioButton": {
                 const radioButton = this.state.currentNode?.guiControl as RadioButton;
-                return (<RadioButtonPropertyGridComponent radioButton={radioButton}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <RadioButtonPropertyGridComponent radioButton={radioButton} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
             case "Line": {
                 const line = this.state.currentNode?.guiControl as Line;
-                return (<LinePropertyGridComponent line={line}
-                    lockObject={this._lockObject}
-                    onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+                return <LinePropertyGridComponent line={line} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
             }
         }
 
         if (className !== "") {
             const control = this.state.currentNode?.guiControl as Control;
-            return (<ControlPropertyGridComponent control={control}
-                lockObject={this._lockObject}
-                onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />);
+            return <ControlPropertyGridComponent control={control} lockObject={this._lockObject} onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />;
         }
         return null;
     }
 
     render() {
-
         if (this.state.currentNode) {
             return (
                 <div id="propertyTab">
                     <div id="header">
                         <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
-                        <div id="title">
-                            GUI EDITOR
-                        </div>
+                        <div id="title">GUI EDITOR</div>
                     </div>
                     {this.renderProperties()}
                 </div>
@@ -288,20 +255,22 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
             <div id="propertyTab">
                 <div id="header">
                     <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
-                    <div id="title">
-                        GUI EDITOR
-                    </div>
+                    <div id="title">GUI EDITOR</div>
                 </div>
                 <div>
                     <LineContainerComponent title="GENERAL">
-                        <TextLineComponent label="Version" value={Engine.Version}/>
-                        <TextLineComponent label="Help" value="doc.babylonjs.com" underline={true} onLink={() => window.open('https://doc.babylonjs.com', '_blank')}/>
-                        <ButtonLineComponent label="Reset to default" onClick={() => {
-                            this.props.globalState.onResetRequiredObservable.notifyObservers();
-                        }} />
+                        <TextLineComponent label="Version" value={Engine.Version} />
+                        <TextLineComponent label="Help" value="doc.babylonjs.com" underline={true} onLink={() => window.open("https://doc.babylonjs.com", "_blank")} />
+                        <ButtonLineComponent
+                            label="Reset to default"
+                            onClick={() => {
+                                this.props.globalState.onResetRequiredObservable.notifyObservers();
+                            }}
+                        />
                     </LineContainerComponent>
                     <LineContainerComponent title="OPTIONS">
-                        <CheckBoxLineComponent label="Show grid"
+                        <CheckBoxLineComponent
+                            label="Show grid"
                             isSelected={() => DataStorage.ReadBoolean("ShowGrid", true)}
                             onSelect={(value: boolean) => {
                                 DataStorage.WriteBoolean("ShowGrid", value);
@@ -310,21 +279,26 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                     </LineContainerComponent>
                     <LineContainerComponent title="FILE">
                         <FileButtonLineComponent label="Load" onClick={(file) => this.load(file)} accept=".json" />
-                        <ButtonLineComponent label="Save" onClick={() => {
-                            this.save();
-                        }} />
+                        <ButtonLineComponent
+                            label="Save"
+                            onClick={() => {
+                                this.save();
+                            }}
+                        />
                     </LineContainerComponent>
                     {
-                        
                         <LineContainerComponent title="SNIPPET">
                             <ButtonLineComponent label="Load from snippet server" onClick={() => this.loadFromSnippet()} />
-                            <ButtonLineComponent label="Save to snippet server" onClick={() => {
-                                this.saveToSnippetServer();
-                            }} />
+                            <ButtonLineComponent
+                                label="Save to snippet server"
+                                onClick={() => {
+                                    this.saveToSnippetServer();
+                                }}
+                            />
                         </LineContainerComponent>
                     }
                 </div>
             </div>
         );
     }
-}
+}

guiEditor/src/diagram/guiNode.ts

@@ -1,26 +1,25 @@
-import { GlobalState } from '../globalState';
-import { Nullable } from 'babylonjs/types';
-import { Observer } from 'babylonjs/Misc/observable';
-import { WorkbenchComponent, FramePortData } from './workbench';
-import { Control } from 'babylonjs-gui/2D/controls/control';
-import { Vector2 } from 'babylonjs/Maths/math.vector';
-import { Container } from 'babylonjs-gui/2D/controls/container';
+import { GlobalState } from "../globalState";
+import { Nullable } from "babylonjs/types";
+import { Observer } from "babylonjs/Misc/observable";
+import { WorkbenchComponent, FramePortData } from "./workbench";
+import { Control } from "babylonjs-gui/2D/controls/control";
+import { Vector2 } from "babylonjs/Maths/math.vector";
+import { Container } from "babylonjs-gui/2D/controls/container";
 
 export class GUINode {
-
     private _x = 0;
     private _y = 0;
     private _gridAlignedX = 0;
-    private _gridAlignedY = 0;    
+    private _gridAlignedY = 0;
     private _globalState: GlobalState;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GUINode | FramePortData>>>;  
-    private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;   
-    private _onUpdateRequiredObserver: Nullable<Observer<void>>;  
-    private _ownerCanvas: WorkbenchComponent; 
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GUINode | FramePortData>>>;
+    private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;
+    private _onUpdateRequiredObserver: Nullable<Observer<void>>;
+    private _ownerCanvas: WorkbenchComponent;
     private _isSelected: boolean;
     private _isVisible = true;
     private _enclosingFrameId = -1;
-    
+
     public children: GUINode[] = [];
 
     public get isVisible() {
@@ -48,7 +47,7 @@ export class GUINode {
             return;
         }
         this._x = value;
-        
+
         this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
     }
 
@@ -98,7 +97,7 @@ export class GUINode {
         this._isSelected = value;
 
         if (value) {
-            this._globalState.onSelectionChangedObservable.notifyObservers(this);  
+            this._globalState.onSelectionChangedObservable.notifyObservers(this);
         }
     }
 
@@ -107,36 +106,31 @@ export class GUINode {
         this._ownerCanvas = this._globalState.workbench;
         this.x = guiControl.leftInPixels;
         this.y = guiControl.topInPixels;
-        guiControl.onPointerUpObservable.add(evt => {
+        guiControl.onPointerUpObservable.add((evt) => {
             this.clicked = false;
             console.log("up");
         });
 
-        guiControl.onPointerDownObservable.add( evt => {
-            if(!this._ownerCanvas.isUp) return;
+        guiControl.onPointerDownObservable.add((evt) => {
+            if (!this._ownerCanvas.isUp) return;
             this.clicked = true;
             this.isSelected = true;
             console.log("down");
             this._ownerCanvas.isUp = false;
-        }
-        );
-        
-        guiControl.onPointerEnterObservable.add( evt => {
+        });
+
+        guiControl.onPointerEnterObservable.add((evt) => {
             this._ownerCanvas.isOverGUINode = true;
             console.log("in");
-        }
-        );
+        });
 
-        guiControl.onPointerOutObservable.add( evt => {
+        guiControl.onPointerOutObservable.add((evt) => {
             this._ownerCanvas.isOverGUINode = false;
             console.log("out");
-        }
-        );
-
-        //TODO: Implement
-        this._onSelectionBoxMovedObserver = this._globalState.onSelectionBoxMoved.add(rect1 => {
         });
 
+        //TODO: Implement
+        this._onSelectionBoxMovedObserver = this._globalState.onSelectionBoxMoved.add((rect1) => {});
     }
 
     public cleanAccumulation(useCeil = false) {
@@ -146,27 +140,25 @@ export class GUINode {
 
     public clicked: boolean;
     public _onMove(evt: Vector2, startPos: Vector2, ignorClick: boolean = false) {
-       
-        if(!this.clicked && !ignorClick) return false;
+        if (!this.clicked && !ignorClick) return false;
         console.log("moving");
 
         //TODO: Implement move with zoom factor.
-        let newX = (evt.x - startPos.x) ;// / this._ownerCanvas.zoom;
-        let newY = (evt.y - startPos.y) ;// / this._ownerCanvas.zoom;
+        let newX = evt.x - startPos.x; // / this._ownerCanvas.zoom;
+        let newY = evt.y - startPos.y; // / this._ownerCanvas.zoom;
 
         this.x += newX;
-        this.y += newY;  
+        this.y += newY;
 
-        this.children.forEach(child => {
-           child._onMove(evt, startPos, true);
+        this.children.forEach((child) => {
+            child._onMove(evt, startPos, true);
         });
 
         return true;
         //evt.stopPropagation();
     }
 
-    public updateVisual()
-    {
+    public updateVisual() {
         this.guiControl.leftInPixels = this.x;
         this.guiControl.topInPixels = this.y;
     }
@@ -183,12 +175,11 @@ export class GUINode {
         }
     }
 
-    public addGui(childNode: GUINode)
-    {
-        if(!this._isContainer) return;
+    public addGui(childNode: GUINode) {
+        if (!this._isContainer) return;
         this.children.push(childNode);
         (this.guiControl as Container).addControl(childNode.guiControl);
-        
+
         //adjust the position to be relative
         //childNode.x = this.x - childNode.x;
         //childNode.y = this.y - childNode.y;
@@ -210,6 +201,6 @@ export class GUINode {
             this._globalState.onSelectionBoxMoved.remove(this._onSelectionBoxMovedObserver);
         }
 
-        this.guiControl.dispose();   
+        this.guiControl.dispose();
     }
-}
+}

nodeEditor/src/diagram/display/inputDisplayManager.ts

@@ -45,16 +45,16 @@ export class InputDisplayManager implements IDisplayManager {
 
     public getHeaderText(block: NodeMaterialBlock): string {
         let inputBlock = block as InputBlock;
-        let name = `${inputBlock.name} (${this.GetBaseType(inputBlock.output.type)})`;
+        let name = `${inputBlock.name} (${InputDisplayManager.GetBaseType(inputBlock.output.type)})`;
 
         if (inputBlock.isAttribute) {
-            name = this.GetBaseType(inputBlock.output.type);
+            name = InputDisplayManager.GetBaseType(inputBlock.output.type);
         }
 
         return name;
     }
 
-    public GetBaseType(type: NodeMaterialBlockConnectionPointTypes): string {
+    public static GetBaseType(type: NodeMaterialBlockConnectionPointTypes): string {
         return NodeMaterialBlockConnectionPointTypes[type];
     }