Associaterd with #6012: Drag port to default input

nodeEditor/src/components/diagram/diagram.scss

@@ -17,6 +17,10 @@
     &.connected {
         background: #CAB422;
     }
+
+    &:hover {
+        background: greenyellow !important;
+    }
 }
 
 .diagramBlock {

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -15,7 +15,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps>
         // Block types used to create the menu from
         const allBlocks = {
             Vertex: ["BonesBlock", "InstancesBlock", "MorphTargetsBlock"],
-            Fragment: ["AlphaTestBlock", "ImageProcessingBlock", "RGBAMergerBlock", "RGBASplitterBlock", "TextureBlock", "LightBlock", "FogBlock"],
+            Fragment: ["AlphaTestBlock", "ImageProcessingBlock", "RGBAMergerBlock", "RGBASplitterBlock", "RGBMergerBlock", "RGBSplitterBlock", "TextureBlock", "LightBlock", "FogBlock"],
             Outputs: ["VertexOutputBlock", "FragmentOutputBlock"],
             Math: ["AddBlock", "ClampBlock", "CrossBlock", "DotBlock", "MultiplyBlock", "TransformBlock"],
             Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "Matrix"],

nodeEditor/src/graphEditor.tsx

@@ -48,6 +48,8 @@ import { DotBlock } from 'babylonjs/Materials/Node/Blocks/dotBlock';
 import { MultiplyBlock } from 'babylonjs/Materials/Node/Blocks/multiplyBlock';
 import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
 import { MessageDialogComponent } from './sharedComponents/messageDialog';
+import { RGBMergerBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/rgbMergerBlock';
+import { RGBSplitterBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/rgbSplitterBlock';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -78,6 +80,7 @@ export class NodeCreationOptions {
 }
 
 export class GraphEditor extends React.Component<IGraphEditorProps> {
+    private readonly NodeWidth = 100;
     private _engine: DiagramEngine;
     private _model: DiagramModel;
 
@@ -212,8 +215,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         for (var nodeName in this._model.nodes) {
             let node = this._model.nodes[nodeName];
             let size = {
-                width: node.width,
-                height: node.height
+                width: node.width | 200,
+                height: node.height | 100
             };
             output.push({ id: node.id, metadata: { ...size, id: node.id } });
         }
@@ -252,13 +255,34 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         }
     }
 
+    getStringFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes) {
+        switch (type){
+            case NodeMaterialBlockConnectionPointTypes.Float:
+                return "Float";
+            case NodeMaterialBlockConnectionPointTypes.Vector2:
+                return "Vector2";
+            case NodeMaterialBlockConnectionPointTypes.Vector3:
+                return "Vector3";
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+                return "Vector4";
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+                return "Color3";
+            case NodeMaterialBlockConnectionPointTypes.Color4:
+                return "Color4";
+            case NodeMaterialBlockConnectionPointTypes.Matrix:
+                return "Matrix";
+        }
+
+        return "";
+    }
+
     build(needToWait = false) {
         // setup the diagram model
         this._model = new DiagramModel();
 
         // Listen to events
         this._model.addListener({
-            nodesUpdated: (e) => {
+            nodesUpdated: (e) => {                
                 if (!e.isCreated) {
                     // Block is deleted
                     let targetBlock = (e.node as GenericNodeModel).block;
@@ -274,16 +298,39 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                 if (!e.isCreated) {
                     // Link is deleted
                     this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-                    var link = DefaultPortModel.SortInputOutput(e.link.sourcePort as DefaultPortModel, e.link.targetPort as DefaultPortModel);
+                    let sourcePort = e.link.sourcePort as DefaultPortModel;
+
+                    var link = DefaultPortModel.SortInputOutput(sourcePort, e.link.targetPort as DefaultPortModel);
                     if (link) {
-                        if (link.input.connection) {
-                            if (link.output.connection) {
+                        if (link.input.connection && link.output.connection) {
+                            if (link.input.connection.connectedPoint && link.input.connection.connectedPoint.ownerBlock !== link.output.connection.ownerBlock) {
                                 // Disconnect standard nodes
-                                link.output.connection.disconnectFrom(link.input.connection)
-                                link.input.syncWithNodeMaterialConnectionPoint(link.input.connection)
-                                link.output.syncWithNodeMaterialConnectionPoint(link.output.connection)
+                                link.output.connection.disconnectFrom(link.input.connection);
+                                link.input.syncWithNodeMaterialConnectionPoint(link.input.connection);
+                                link.output.syncWithNodeMaterialConnectionPoint(link.output.connection);
                             }
                         }
+                    } else {
+                        if (!e.link.targetPort && e.link.sourcePort) {
+                            // Drag from input port, we are going to build an input for it                            
+                            let input = e.link.sourcePort as DefaultPortModel;
+                            let nodeModel = this.addValueNode(this.getStringFromConnectionNodeType(input.connection!.type));
+                            let link = nodeModel.ports.output.link(input);
+
+                            nodeModel.x = e.link.points[1].x - this.NodeWidth;
+                            nodeModel.y = e.link.points[1].y;
+
+                            setTimeout(() => {
+                                this._model.addLink(link);
+                                input.syncWithNodeMaterialConnectionPoint(input.connection!);
+                                nodeModel.ports.output.syncWithNodeMaterialConnectionPoint(nodeModel.ports.output.connection!);                                 
+
+                                this.forceUpdate();
+                            }, 1);
+                           
+                            nodeModel.ports.output.connection!.connectTo(input.connection!);
+                            this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                        }
                     }
                     this.forceUpdate();
                     return;
@@ -302,7 +349,9 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                                 for (var key in link.input.links) {
                                     let other = link.input.links[key];
 
-                                    if (other.getSourcePort() !== link.output) {
+                                    if ((other.getSourcePort() as DefaultPortModel).connection  !== (link.output as DefaultPortModel).connection && 
+                                        (other.getTargetPort() as DefaultPortModel).connection  !== (link.output as DefaultPortModel).connection
+                                    ) {
                                         other.remove();
                                     }
                                 }
@@ -470,6 +519,12 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                 case "RGBASplitterBlock":
                     block = new RGBASplitterBlock("RGBASplitter");
                     break;
+                case "RGBMergerBlock":
+                    block = new RGBMergerBlock("RGBMerger");
+                    break;
+                case "RGBSplitterBlock":
+                    block = new RGBSplitterBlock("RGBSplitter");
+                    break;                    
                 case "TextureBlock":
                     block = new TextureBlock("Texture");
                     break;
@@ -513,7 +568,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         if (nodeModel) {
             const zoomLevel = this._engine.diagramModel.getZoomLevel() / 100.0;
 
-            let x = (event.clientX - event.currentTarget.offsetLeft - this._engine.diagramModel.getOffsetX() - 100) / zoomLevel;
+            let x = (event.clientX - event.currentTarget.offsetLeft - this._engine.diagramModel.getOffsetX() - this.NodeWidth) / zoomLevel;
             let y = (event.clientY - event.currentTarget.offsetTop - this._engine.diagramModel.getOffsetY() - 20) / zoomLevel;
             nodeModel.setPosition(x, y);
         }
@@ -547,7 +602,9 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                             event.preventDefault();
                         }}
                     >
-                        <DiagramWidget className="diagram" deleteKeys={[46]} ref={"test"} inverseZoom={true} diagramEngine={this._engine} maxNumberPointsPerLink={0} />
+                        <DiagramWidget className="diagram" deleteKeys={[46]} ref={"test"} 
+                        allowLooseLinks={false}
+                        inverseZoom={true} diagramEngine={this._engine} maxNumberPointsPerLink={0} />
                     </div>
 
                     <div id="rightGrab"

src/Materials/Node/Blocks/Dual/fogBlock.ts

@@ -31,7 +31,7 @@ export class FogBlock extends NodeMaterialBlock {
         this.registerInput("view", NodeMaterialBlockConnectionPointTypes.Matrix, false, NodeMaterialBlockTargets.Vertex);
 
         // Fragment
-        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Color3OrColor4, false, NodeMaterialBlockTargets.Fragment);
+        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Color3, false, NodeMaterialBlockTargets.Fragment);
         this.registerInput("fogColor", NodeMaterialBlockConnectionPointTypes.Color3, false, NodeMaterialBlockTargets.Fragment);
 
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Color3, NodeMaterialBlockTargets.Fragment);
@@ -132,8 +132,8 @@ export class FogBlock extends NodeMaterialBlock {
 
             state.compilationString += `#ifdef FOG\r\n`;
             state.compilationString += `float ${tempFogVariablename} = CalcFogFactor(${this._fogDistanceName}, ${this._fogParameters});\r\n`;
-            state.compilationString += this._declareOutput(output, state) + ` = ${tempFogVariablename} * ${color.associatedVariableName}.rgb + (1.0 - ${tempFogVariablename}) * ${fogColor.associatedVariableName};\r\n`;
-            state.compilationString += `#else\r\n${this._declareOutput(output, state)} =  ${color.associatedVariableName}.rgb;\r\n`;
+            state.compilationString += this._declareOutput(output, state) + ` = ${tempFogVariablename} * ${color.associatedVariableName} + (1.0 - ${tempFogVariablename}) * ${fogColor.associatedVariableName};\r\n`;
+            state.compilationString += `#else\r\n${this._declareOutput(output, state)} =  ${color.associatedVariableName};\r\n`;
             state.compilationString += `#endif\r\n`;
         } else {
             let worldPos = this.worldPosition;

src/Materials/Node/Blocks/Fragment/rgbaSplitterBlock.ts

@@ -17,7 +17,8 @@ export class RGBASplitterBlock extends NodeMaterialBlock {
     public constructor(name: string) {
         super(name, NodeMaterialBlockTargets.Fragment);
 
-        this.registerInput("input", NodeMaterialBlockConnectionPointTypes.Vector4OrColor4);
+        this.registerInput("input", NodeMaterialBlockConnectionPointTypes.Color4);
+        this.registerOutput("rgb", NodeMaterialBlockConnectionPointTypes.Color3);
         this.registerOutput("r", NodeMaterialBlockConnectionPointTypes.Float);
         this.registerOutput("g", NodeMaterialBlockConnectionPointTypes.Float);
         this.registerOutput("b", NodeMaterialBlockConnectionPointTypes.Float);
@@ -43,11 +44,15 @@ export class RGBASplitterBlock extends NodeMaterialBlock {
         super._buildBlock(state);
 
         let input = this.input;
-        let rOutput = this._outputs[0];
-        let gOutput = this._outputs[1];
-        let bOutput = this._outputs[2];
-        let aOutput = this._outputs[3];
+        let rgbOutput = this._outputs[0];
+        let rOutput = this._outputs[1];
+        let gOutput = this._outputs[2];
+        let bOutput = this._outputs[3];
+        let aOutput = this._outputs[4];
 
+        if (rgbOutput.connectedBlocks.length > 0) {
+            state.compilationString += this._declareOutput(rgbOutput, state) + ` = ${input.associatedVariableName}.rgb;\r\n`;
+        }        
         if (rOutput.connectedBlocks.length > 0) {
             state.compilationString += this._declareOutput(rOutput, state) + ` = ${input.associatedVariableName}.r;\r\n`;
         }