Associated with #6012

nodeEditor/src/components/diagram/diagram.scss

@@ -124,14 +124,6 @@
                     }
                 }
 
-                .input-port-connection {
-                    pointer-events: none;
-                    grid-column: 1;
-                    grid-row: 1;
-                    background: #2796B2;
-                    border-radius: 10px;
-                }
-
                 .input-port-type {
                     width: 15px;
                     pointer-events: none;
@@ -202,7 +194,8 @@
                     grid-column: 1;
                     grid-row: 1;
                     background: #2796B2;
-                    border-radius: 10px;
+                    border-radius: 10px;   
+                    transform: scale(1);
                 }
 
                 .output-port-type {

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

@@ -60,25 +60,53 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
     render() {
         let inputBlock = this.props.inputNode.inputBlock;
 
-        var wellKnownOptions = [
-            { label: "World", value: NodeMaterialWellKnownValues.World },
-            { label: "WorldxView", value: NodeMaterialWellKnownValues.WorldView },
-            { label: "WorldxViewxProjection", value: NodeMaterialWellKnownValues.WorldViewProjection },
-            { label: "View", value: NodeMaterialWellKnownValues.View },
-            { label: "ViewxProjection", value: NodeMaterialWellKnownValues.ViewProjection },
-            { label: "Projection", value: NodeMaterialWellKnownValues.Projection },
-            { label: "Camera position", value: NodeMaterialWellKnownValues.CameraPosition },
-            { label: "Fog color", value: NodeMaterialWellKnownValues.FogColor },
-        ];
+        var wellKnownOptions: {label: string, value: NodeMaterialWellKnownValues}[] = [];
+        var attributeOptions: {label: string, value: string}[] = [];
 
-        var attributeOptions = [
-            { label: "position", value: "position" },
-            { label: "normal", value: "normal" },
-            { label: "tangent", value: "tangent" },
-            { label: "color", value: "color" },
-            { label: "uv", value: "uv" },
-            { label: "uv2", value: "uv2" },
-        ];
+        switch(inputBlock.type) {            
+            case NodeMaterialBlockConnectionPointTypes.Matrix:
+                wellKnownOptions = [
+                    { label: "World", value: NodeMaterialWellKnownValues.World },
+                    { label: "WorldxView", value: NodeMaterialWellKnownValues.WorldView },
+                    { label: "WorldxViewxProjection", value: NodeMaterialWellKnownValues.WorldViewProjection },
+                    { label: "View", value: NodeMaterialWellKnownValues.View },
+                    { label: "ViewxProjection", value: NodeMaterialWellKnownValues.ViewProjection },
+                    { label: "Projection", value: NodeMaterialWellKnownValues.Projection }
+                ];
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+                wellKnownOptions = [
+                    { label: "Fog color", value: NodeMaterialWellKnownValues.FogColor }
+                ];
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+                attributeOptions = [
+                    { label: "color", value: "color" }
+                ];
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Vector2:
+                attributeOptions = [
+                    { label: "uv", value: "uv" },
+                    { label: "uv2", value: "uv2" },
+                ];
+                break;                
+            case NodeMaterialBlockConnectionPointTypes.Vector3:
+                wellKnownOptions = [
+                    { label: "Camera position", value: NodeMaterialWellKnownValues.CameraPosition }
+                ];
+                attributeOptions = [
+                    { label: "position", value: "position" },
+                    { label: "normal", value: "normal" },
+                    { label: "tangent", value: "tangent" },        
+                ];
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+                    attributeOptions = [
+                        { label: "matricesIndices", value: "matricesIndices" },
+                        { label: "matricesWeights", value: "matricesWeights" }
+                    ];
+                    break;                
+        }
 
         return (
             <div>
@@ -86,16 +114,19 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
                     <TextLineComponent label="Type" value={StringTools.GetBaseType(inputBlock.type)} />
                 </LineContainerComponent>
                 <LineContainerComponent title="PROPERTIES">
-                    <CheckBoxLineComponent label="Is mesh attribute" onSelect={value => {
-                        if (!value) {
-                            inputBlock.isUniform = true;
-                            this.setDefaultValue();
-                        } else {
-                            inputBlock.isAttribute = true;
-                        }
-                        this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-                        this.forceUpdate();
-                    }} isSelected={() => inputBlock.isAttribute} />
+                    {
+                        attributeOptions.length > 0 &&
+                        <CheckBoxLineComponent label="Is mesh attribute" onSelect={value => {
+                            if (!value) {
+                                inputBlock.isUniform = true;
+                                this.setDefaultValue();
+                            } else {
+                                inputBlock.setAsAttribute(attributeOptions[0].value);
+                            }
+                            this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                            this.forceUpdate();
+                        }} isSelected={() => inputBlock.isAttribute} />
+                    }
                     {
                         inputBlock.isAttribute &&
                         <OptionsLineComponent label="Attribute" valuesAreStrings={true} options={attributeOptions} target={inputBlock} propertyName="name" onSelect={(value: any) => {
@@ -105,10 +136,10 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
                         }} />
                     }
                     {
-                        inputBlock.isUniform &&
+                        inputBlock.isUniform && wellKnownOptions.length > 0 &&
                         <CheckBoxLineComponent label="Is well known value" onSelect={value => {
                             if (value) {
-                                inputBlock.setAsWellKnownValue(NodeMaterialWellKnownValues.World);
+                                inputBlock.setAsWellKnownValue(wellKnownOptions[0].value);
                             } else {
                                 inputBlock.setAsWellKnownValue(null);
                                 this.setDefaultValue();

nodeEditor/src/components/diagram/portHelper.tsx

@@ -91,7 +91,6 @@ export class PortHelper {
                 let typeIndicator = this._GetPortTypeIndicator(port.connection!);
                 let style = this._GetPortStyle(port.connection!.type);
 
-                let isConnected = port.connection && port.connection.endpoints.length > 0;
                 if (!includeOnly || includeOnly.indexOf(port.name) !== -1) {
                     inputPorts.push(
                         <div key={key} className="input-port">
@@ -99,11 +98,6 @@ export class PortHelper {
                                 <div className="input-port-border">                                
                                 </div>
                                 <DefaultPortWidget key={key} name={port.name} node={node} style={style}/>
-                                {
-                                    !isConnected &&
-                                    <div className="output-port-connection">                             
-                                    </div>                            
-                                }                                
                                 <div className="input-port-type"> 
                                     {
                                         typeIndicator

nodeEditor/src/graphEditor.tsx

@@ -375,13 +375,17 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
 
         // Load graph of nodes from the material
         if (this.props.globalState.nodeMaterial) {
-            var material: any = this.props.globalState.nodeMaterial;
+            var material = this.props.globalState.nodeMaterial;
             material._vertexOutputNodes.forEach((n: any) => {
                 this.createNodeFromObject({ nodeMaterialBlock: n });
-            })
+            });
             material._fragmentOutputNodes.forEach((n: any) => {
                 this.createNodeFromObject({ nodeMaterialBlock: n });
-            })
+            });
+
+            material.attachedBlocks.forEach((n: any) => {
+                this.createNodeFromObject({ nodeMaterialBlock: n });
+            });
         }
 
         // load model into engine
@@ -417,7 +421,6 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         let nodeType: NodeMaterialBlockConnectionPointTypes = BlockTools.GetConnectionNodeTypeFromString(type);
 
         let newInputBlock = new InputBlock(type, undefined, nodeType);
-        newInputBlock.setDefaultValue();
         var localNode = this.createNodeFromObject({ type: type, nodeMaterialBlock: newInputBlock })
 
         return localNode;

src/Materials/Node/Blocks/Input/inputBlock.ts

@@ -32,20 +32,26 @@ export class InputBlock extends NodeMaterialBlock {
         if (this._type === NodeMaterialBlockConnectionPointTypes.AutoDetect) {
             if (this.isUniform && this.value != null) {
                 if (!isNaN(this.value)) {
-                    return NodeMaterialBlockConnectionPointTypes.Float;
+                    this._type = NodeMaterialBlockConnectionPointTypes.Float;
+                    return this._type;
                 }
 
                 switch (this.value.getClassName()) {
                     case "Vector2":
-                        return NodeMaterialBlockConnectionPointTypes.Vector2;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Vector2;
+                        return this._type;
                     case "Vector3":
-                        return NodeMaterialBlockConnectionPointTypes.Vector3;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Vector3;
+                        return this._type;
                     case "Vector4":
-                        return NodeMaterialBlockConnectionPointTypes.Vector4;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Vector4;
+                        return this._type;
                     case "Color3":
-                        return NodeMaterialBlockConnectionPointTypes.Color3;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Color3;
+                        return this._type;
                     case "Color4":
-                        return NodeMaterialBlockConnectionPointTypes.Color4;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Color4;
+                        return this._type;
                 }
             }
 
@@ -54,10 +60,12 @@ export class InputBlock extends NodeMaterialBlock {
                     case "position":
                     case "normal":
                     case "tangent":
-                        return NodeMaterialBlockConnectionPointTypes.Vector3;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Vector3;
+                        return this._type;
                     case "uv":
                     case "uv2":
-                        return NodeMaterialBlockConnectionPointTypes.Vector2;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Vector2;
+                        return this._type;
                 }
             }
 
@@ -69,9 +77,11 @@ export class InputBlock extends NodeMaterialBlock {
                     case NodeMaterialWellKnownValues.View:
                     case NodeMaterialWellKnownValues.ViewProjection:
                     case NodeMaterialWellKnownValues.Projection:
-                        return NodeMaterialBlockConnectionPointTypes.Matrix;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Matrix;
+                        return this._type;
                     case NodeMaterialWellKnownValues.CameraPosition:
-                        return NodeMaterialBlockConnectionPointTypes.Vector3;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Vector3;
+                        return this._type;
                 }
             }
         }
@@ -90,6 +100,8 @@ export class InputBlock extends NodeMaterialBlock {
 
         this._type = type;
 
+        this.setDefaultValue();
+
         this.registerOutput("output", type);
     }