Fix several UI bugs

Associated with #6012

nodeEditor/src/components/diagram/defaultPortModel.ts

@@ -16,6 +16,7 @@ export class DefaultPortModel extends PortModel {
 	 */
     public connection: Nullable<NodeMaterialConnectionPoint> = null;
 
+    public defaultValue: any;
 
     static idCounter = 0;
 
@@ -41,18 +42,10 @@ export class DefaultPortModel extends PortModel {
         return link;
     }
 
-    getInputFromBlock() {
-
-    }
-
     createLinkModel(): LinkModel {
         return new DefaultLinkModel();
     }
 
-    getValue: Function = () => {
-        return null;
-    }
-
     static SortInputOutput(a: Nullable<DefaultPortModel>, b: Nullable<DefaultPortModel>) {
         if (!a || !b) {
             return null;

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

@@ -56,41 +56,46 @@ export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
             }
         }
 
-        let connection = this.props.node!.connection!;
+        let connection = this.props.node!.connection;
         let value = "";
+        let name = port!.name;
 
-        if (connection.isAttribute) {
-            value = "mesh." + connection.name;
-        } else if (connection.isWellKnownValue) {
-            switch (connection.wellKnownValue) {
-                case NodeMaterialWellKnownValues.World:
-                    value = "World";
-                    break;
-                case NodeMaterialWellKnownValues.WorldView:
-                    value = "World x View";
-                    break;
-                case NodeMaterialWellKnownValues.WorldViewProjection:
-                    value = "World x View x Projection";
-                    break;
-                case NodeMaterialWellKnownValues.View:
-                    value = "View";
-                    break;
-                case NodeMaterialWellKnownValues.ViewProjection:
-                    value = "View x Projection";
-                    break;
-                case NodeMaterialWellKnownValues.Projection:
-                    value = "Projection";
-                    break;
-                case NodeMaterialWellKnownValues.Automatic:
-                    value = "Automatic";
-                    break;
+        if (connection) {
+            if (connection.isAttribute) {
+                value = "mesh." + connection.name;
+            } else if (connection.isWellKnownValue) {
+                switch (connection.wellKnownValue) {
+                    case NodeMaterialWellKnownValues.World:
+                        value = "World";
+                        break;
+                    case NodeMaterialWellKnownValues.WorldView:
+                        value = "World x View";
+                        break;
+                    case NodeMaterialWellKnownValues.WorldViewProjection:
+                        value = "World x View x Projection";
+                        break;
+                    case NodeMaterialWellKnownValues.View:
+                        value = "View";
+                        break;
+                    case NodeMaterialWellKnownValues.ViewProjection:
+                        value = "View x Projection";
+                        break;
+                    case NodeMaterialWellKnownValues.Projection:
+                        value = "Projection";
+                        break;
+                    case NodeMaterialWellKnownValues.Automatic:
+                        value = "Automatic";
+                        break;
+                }
             }
+        } else {
+            name = "Not connected input";
         }
 
         return (
-            <div className={"diagramBlock input" + (connection.isAttribute ? " attribute" : "")}>
+            <div className={"diagramBlock input" + (connection && connection.isAttribute ? " attribute" : "")}>
                 <div className="header">
-                    {port!.name}
+                    {name}
                 </div>
                 <div className="outputs">
                     {outputPorts}

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

@@ -3,7 +3,7 @@ import { Nullable } from 'babylonjs/types';
 import { Texture } from 'babylonjs/Materials/Textures/texture';
 import { DefaultNodeModel } from '../defaultNodeModel';
 import { GlobalState } from '../../../globalState';
-import { TexturePropertyTabComponent } from '../../../components/propertyTab/properties/texturePropertyTabComponent';
+import { TexturePropertyTabComponent } from './texturePropertyTabComponent';
 import { NodeCreationOptions, GraphEditor } from '../../../graphEditor';
 import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/DiagramModel';
 import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/textureBlock';
@@ -12,10 +12,19 @@ import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/textureBl
  * Texture node model which stores information about a node editor block
  */
 export class TextureNodeModel extends DefaultNodeModel {
+    private _block: TextureBlock;
+
 	/**
 	 * Texture for the node if it exists
 	 */
-    public texture: Nullable<Texture> = null;
+    public get texture(): Nullable<Texture> {
+        return this._block.texture.value;
+    }
+
+    public set texture(value: Nullable<Texture>) {
+        this._block.texture.value = value;
+    }
+
 	/**
 	 * Constructs the node model
 	 */
@@ -30,9 +39,7 @@ export class TextureNodeModel extends DefaultNodeModel {
     }
 
     prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]) {
-        let textureBlock = options.nodeMaterialBlock as TextureBlock;
-
-        this.texture = textureBlock.texture.value;
+        this._block = options.nodeMaterialBlock as TextureBlock;
 
         super.prepare(options, nodes, model, graphEditor, filterInputs);
     }

nodeEditor/src/components/propertyTab/properties/texturePropertyTabComponent.tsx

@@ -5,7 +5,7 @@ import { Texture } from 'babylonjs/Materials/Textures/texture';
 import { FileButtonLineComponent } from '../../../sharedComponents/fileButtonLineComponent';
 import { Tools } from 'babylonjs/Misc/tools';
 import { Engine } from 'babylonjs/Engines/engine';
-import { TextureNodeModel } from '../../../components/diagram/texture/textureNodeModel';
+import { TextureNodeModel } from './textureNodeModel';
 import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
 
 interface ITexturePropertyTabComponentProps {
@@ -42,9 +42,9 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                     extension = ".env";
                 }
 
-                (texture as Texture).updateURL(url, extension, () => this.forceUpdate());
+                (texture as Texture).updateURL(url, extension, () => this.props.globalState.onUpdateRequiredObservable.notifyObservers());
             } else {
-                (texture as Texture).updateURL(url, null, () => this.forceUpdate());
+                (texture as Texture).updateURL(url, null, () => this.props.globalState.onUpdateRequiredObservable.notifyObservers());
             }
         }, undefined, true);
     }

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -40,7 +40,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps>
             Outputs: [VertexOutputBlock, FragmentOutputBlock],
             Dual: [FogBlock],
             Math: [AddBlock, ClampBlock, MatrixMultiplicationBlock, MultiplyBlock, Vector2TransformBlock, Vector3TransformBlock, Vector4TransformBlock],
-            Inputs: ["Vector2", "Vector3", "Matrix"],
+            Inputs: ["Vector2", "Vector3", "Vector4", "Color3", "Color4", "Matrix"],
         }
 
         // Create node menu
@@ -48,7 +48,10 @@ export class NodeListComponent extends React.Component<INodeListComponentProps>
         for (var key in allBlocks) {
             var blockList = (allBlocks as any)[key].map((b: any) => {
                 var label = typeof b === "string" ? b : b.prototype.getClassName().replace("Block", "")
-                var onClick = typeof b === "string" ? () => { this.props.onAddValueNode(b) } : () => { this.props.onAddNodeFromClass(b) };
+                var onClick = typeof b === "string" ? () => {
+                    this.props.onAddValueNode(b);
+                    this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                } : () => { this.props.onAddNodeFromClass(b) };
                 return <ButtonLineComponent key={label} label={label} onClick={onClick} />
             })
             blockMenu.push(

nodeEditor/src/globalState.ts

@@ -10,4 +10,5 @@ export class GlobalState {
     onSelectionChangedObservable = new Observable<Nullable<DefaultNodeModel>>();
     onRebuildRequiredObservable = new Observable<void>();
     onResetRequiredObservable = new Observable<void>();
+    onUpdateRequiredObservable = new Observable<void>();
 }

nodeEditor/src/graphEditor.tsx

@@ -23,6 +23,7 @@ import { DefaultPortModel } from './components/diagram/defaultPortModel';
 import { InputNodeFactory } from './components/diagram/input/inputNodeFactory';
 import { InputNodeModel } from './components/diagram/input/inputNodeModel';
 import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/textureBlock';
+import { Vector2, Vector3, Vector4, Matrix, Color3, Color4 } from 'babylonjs/Maths/math';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -145,6 +146,10 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             }
         });
 
+        this.props.globalState.onUpdateRequiredObservable.add(() => {
+            this.forceUpdate();
+        });
+
         this.build();
     }
 
@@ -159,7 +164,6 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     // Link is deleted
                     this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                     var link = DefaultPortModel.SortInputOutput(e.link.sourcePort as DefaultPortModel, e.link.targetPort as DefaultPortModel);
-                    console.log(link)
                     if (link) {
                         if (link.output.connection && link.input.connection) {
                             // Disconnect standard nodes
@@ -184,8 +188,13 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                             if (link.output.connection && link.input.connection) {
                                 link.output.connection.connectTo(link.input.connection)
                             } else if (link.input.connection) {
-                                link.input.connection.value = link.output.getValue();
-
+                                if (!link.output.connection) { // Input Node
+                                    let name = link.output.name;
+                                    link.output.syncWithNodeMaterialConnectionPoint(link.input.connection);
+                                    link.output.name = name;
+                                    (link.output.getNode() as InputNodeModel).connection = link.output.connection!;
+                                    link.input.connection.value = link.output.defaultValue;
+                                }
                             }
                             if (this.props.globalState.nodeMaterial) {
                                 this.props.globalState.nodeMaterial.build()
@@ -226,7 +235,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         var localNode = this.createNodeFromObject({ column: 0, nodeMaterialBlock: block })
         var widget = (this.refs["test"] as DiagramWidget);
 
-        this.forceUpdate()
+        this.forceUpdate();
 
         // This is needed to fix link offsets when created, (eg. create a fog block)
         // Todo figure out how to correct this without this
@@ -234,7 +243,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             widget.startFiringAction(new MoveCanvasAction(1, 0, this._model));
         }, 500);
 
-        return localNode
+        return localNode;
     }
 
     addValueNode(type: string, column = 0, connection?: NodeMaterialConnectionPoint) {
@@ -243,6 +252,29 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
 
         localNode.addPort(outPort);
 
+        if (!connection) {
+            switch (type) {
+                case "Vector2":
+                    outPort.defaultValue = Vector2.Zero();
+                    break;
+                case "Vector3":
+                    outPort.defaultValue = Vector3.Zero();
+                    break;
+                case "Vector4":
+                    outPort.defaultValue = Vector4.Zero();
+                    break;
+                case "Matrix":
+                    outPort.defaultValue = Matrix.Identity();
+                    break;
+                case "Color3":
+                    outPort.defaultValue = Color3.White();
+                    break;
+                case "Color4":
+                    outPort.defaultValue = new Color4(1, 1, 1, 1);
+                    break;
+            }
+        }
+
         return localNode;
     }