ASsociate with #6012

nodeEditor/src/components/diagram/generic/genericNodeModel.tsx

@@ -6,6 +6,7 @@ import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/Diagra
 import { GraphEditor, NodeCreationOptions } from '../../../graphEditor';
 import { GlobalState } from '../../../globalState';
 import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
+import { LineContainerComponent } from '../../../sharedComponents/lineContainerComponent';
 
 /**
  * Generic node model which stores information about a node editor block
@@ -50,9 +51,9 @@ export class GenericNodeModel extends DefaultNodeModel {
     renderProperties(globalState: GlobalState) {
 
         return (
-            <div>
+            <LineContainerComponent title="GENERAL">
                 <TextLineComponent label="Type" value={this.block!.getClassName()} />
-            </div>
+            </LineContainerComponent>
         );
     }
 }

nodeEditor/src/components/diagram/input/inputNodePropertyComponent.tsx

@@ -12,6 +12,7 @@ import { Vector2, Vector3, Matrix } from 'babylonjs/Maths/math';
 import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
 import { Color3PropertyTabComponent } from '../../propertyTab/properties/color3PropertyTabComponent';
 import { FloatPropertyTabComponent } from '../../propertyTab/properties/floatPropertyTabComponent';
+import { LineContainerComponent } from '../../../sharedComponents/lineContainerComponent';
 
 interface IInputPropertyTabComponentProps {
     globalState: GlobalState;
@@ -116,49 +117,53 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
 
         return (
             <div>
-                <TextLineComponent label="Type" value={getBaseType(connection.type)} />
-                <CheckBoxLineComponent label="Is mesh attribute" onSelect={value => {
-                    if (!value) {
-                        connection.isUniform = true;
-                    } else {
-                        connection.isAttribute = true;
-                    }
-                    this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-                    this.forceUpdate();
-                }} isSelected={() => connection!.isAttribute} />
-                {
-                    connection.isAttribute &&
-                    <OptionsLineComponent label="Attribute" valuesAreStrings={true} options={attributeOptions} target={connection} propertyName="name" onSelect={(value: any) => {
-                        connection.setAsAttribute(value);
-                        this.forceUpdate();
-                        this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-                    }} />
-                }
-                {
-                    connection.isUniform &&
-                    <CheckBoxLineComponent label="Is well known value" onSelect={value => {
-                        if (value) {
-                            connection!.setAsWellKnownValue(NodeMaterialWellKnownValues.World);
+                <LineContainerComponent title="GENERAL">
+                    <TextLineComponent label="Type" value={getBaseType(connection.type)} />
+                </LineContainerComponent>
+                <LineContainerComponent title="PROPERTIES">
+                    <CheckBoxLineComponent label="Is mesh attribute" onSelect={value => {
+                        if (!value) {
+                            connection.isUniform = true;
                         } else {
-                            connection!.setAsWellKnownValue(null);
-                            this.setDefaultValue();
+                            connection.isAttribute = true;
                         }
                         this.props.globalState.onRebuildRequiredObservable.notifyObservers();
                         this.forceUpdate();
-                    }} isSelected={() => connection!.isWellKnownValue} />
-                }
-                {
-                    connection.isUniform && !connection.isWellKnownValue &&
-                    this.renderValue(this.props.globalState)
-                }
-                {
-                    connection.isUniform && connection.isWellKnownValue &&
-                    <OptionsLineComponent label="Well known value" options={wellKnownOptions} target={connection} propertyName="wellKnownValue" onSelect={(value: any) => {
-                        connection.setAsWellKnownValue(value);
-                        this.forceUpdate();
-                        this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-                    }} />
-                }
+                    }} isSelected={() => connection!.isAttribute} />
+                    {
+                        connection.isAttribute &&
+                        <OptionsLineComponent label="Attribute" valuesAreStrings={true} options={attributeOptions} target={connection} propertyName="name" onSelect={(value: any) => {
+                            connection.setAsAttribute(value);
+                            this.forceUpdate();
+                            this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                        }} />
+                    }
+                    {
+                        connection.isUniform &&
+                        <CheckBoxLineComponent label="Is well known value" onSelect={value => {
+                            if (value) {
+                                connection!.setAsWellKnownValue(NodeMaterialWellKnownValues.World);
+                            } else {
+                                connection!.setAsWellKnownValue(null);
+                                this.setDefaultValue();
+                            }
+                            this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                            this.forceUpdate();
+                        }} isSelected={() => connection!.isWellKnownValue} />
+                    }
+                    {
+                        connection.isUniform && !connection.isWellKnownValue &&
+                        this.renderValue(this.props.globalState)
+                    }
+                    {
+                        connection.isUniform && connection.isWellKnownValue &&
+                        <OptionsLineComponent label="Well known value" options={wellKnownOptions} target={connection} propertyName="wellKnownValue" onSelect={(value: any) => {
+                            connection.setAsWellKnownValue(value);
+                            this.forceUpdate();
+                            this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                        }} />
+                    }
+                </LineContainerComponent>
             </div>
         );
     }

nodeEditor/src/components/diagram/texture/texturePropertyTabComponent.tsx

@@ -7,6 +7,7 @@ import { Tools } from 'babylonjs/Misc/tools';
 import { Engine } from 'babylonjs/Engines/engine';
 import { TextureNodeModel } from './textureNodeModel';
 import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
+import { LineContainerComponent } from '../../../sharedComponents/lineContainerComponent';
 
 interface ITexturePropertyTabComponentProps {
     globalState: GlobalState;
@@ -46,14 +47,21 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
             } else {
                 (texture as Texture).updateURL(url, null, () => this.props.globalState.onUpdateRequiredObservable.notifyObservers());
             }
+
+            this.props.globalState.onUpdateRequiredObservable.notifyObservers();
         }, undefined, true);
     }
 
     render() {
         return (
             <div>
-                <TextLineComponent label="Type" value="Texture" />
-                <FileButtonLineComponent label="Replace texture" onClick={(file) => this.replaceTexture(file)} accept=".jpg, .png, .tga, .dds, .env" />
+                <LineContainerComponent title="GENERAL">
+                    <TextLineComponent label="Type" value="Texture" />
+                </LineContainerComponent>
+
+                <LineContainerComponent title="PROPERTIES">
+                    <FileButtonLineComponent label="Replace texture" onClick={(file) => this.replaceTexture(file)} accept=".jpg, .png, .tga, .dds, .env" />
+                </LineContainerComponent>
             </div>
         );
     }

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -57,6 +57,11 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                             this.props.globalState.onResetRequiredObservable.notifyObservers();
                         }} />
                     </LineContainerComponent>
+                    <LineContainerComponent title="UI">
+                        <ButtonLineComponent label="Zoom to fit" onClick={() => {
+                            this.props.globalState.onZoomToFitRequiredObservable.notifyObservers();
+                        }} />
+                    </LineContainerComponent>
                 </div>
             </div>
         );

nodeEditor/src/globalState.ts

@@ -11,4 +11,5 @@ export class GlobalState {
     onRebuildRequiredObservable = new Observable<void>();
     onResetRequiredObservable = new Observable<void>();
     onUpdateRequiredObservable = new Observable<void>();
+    onZoomToFitRequiredObservable = new Observable<void>();
 }

nodeEditor/src/graphEditor.tsx

@@ -150,6 +150,10 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             this.forceUpdate();
         });
 
+        this.props.globalState.onZoomToFitRequiredObservable.add(() => {
+            this._engine.zoomToFit();
+        });
+
         this.build();
     }
 
@@ -157,7 +161,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         // setup the diagram model
         this._model = new DiagramModel();
 
-        // Listen to events to connect/disconnect blocks or
+        // Listen to events
         this._model.addListener({
             linksUpdated: (e) => {
                 if (!e.isCreated) {
@@ -216,9 +220,6 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             })
         }
 
-        // Zoom out a bit at the start
-        this._model.setZoomLevel(80)
-
         // load model into engine
         setTimeout(() => {
             if (this._toAdd) {
@@ -227,7 +228,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             this._toAdd = null;
             this._engine.setDiagramModel(this._model);
             this.forceUpdate();
-        }, 250);
+        }, 550);
     }
 
     addNodeFromClass(ObjectClass: typeof NodeMaterialBlock) {

nodeEditor/src/sharedComponents/textureLineComponent.tsx

@@ -12,7 +12,7 @@ interface ITextureLineComponentProps {
     width: number;
     height: number;
     globalState?: any;
-    hideChannelSelect?:boolean;
+    hideChannelSelect?: boolean;
 }
 
 export class TextureLineComponent extends React.Component<ITextureLineComponentProps, { displayRed: boolean, displayGreen: boolean, displayBlue: boolean, displayAlpha: boolean, face: number }> {
@@ -29,7 +29,7 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
     }
 
     shouldComponentUpdate(nextProps: ITextureLineComponentProps, nextState: { displayRed: boolean, displayGreen: boolean, displayBlue: boolean, displayAlpha: boolean, face: number }): boolean {
-        return (nextProps.texture !== this.props.texture || nextState.displayRed !== this.state.displayRed || nextState.displayGreen !== this.state.displayGreen || nextState.displayBlue !== this.state.displayBlue || nextState.displayAlpha !== this.state.displayAlpha || nextState.face !== this.state.face);
+        return true;
     }
 
     componentDidMount() {
@@ -42,8 +42,8 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
 
     updatePreview() {
         var texture = this.props.texture;
-        if(!texture.isReady() && texture._texture){
-            texture._texture.onLoadedObservable.addOnce(()=>{
+        if (!texture.isReady() && texture._texture) {
+            texture._texture.onLoadedObservable.addOnce(() => {
                 this.updatePreview();
             })
         }
@@ -76,10 +76,10 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
 
         const previewCanvas = this.refs.canvas as HTMLCanvasElement;
 
-        if(this.props.globalState){
+        if (this.props.globalState) {
             this.props.globalState.blockMutationUpdates = true;
         }
-        
+
         let rtt = new RenderTargetTexture(
             "temp",
             { width: width, height: height },
@@ -163,10 +163,10 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
         passPostProcess.dispose();
 
         previewCanvas.style.height = height + "px";
-        if(this.props.globalState){
+        if (this.props.globalState) {
             this.props.globalState.blockMutationUpdates = false;
         }
-        
+
     }
 
     render() {