Merge pull request #9241 from BabylonJS/preview

Preview

nodeEditor/src/diagram/graphCanvas.tsx

@@ -19,7 +19,8 @@ import { FrameNodePort } from './frameNodePort';
 require("./graphCanvas.scss");
 
 export interface IGraphCanvasComponentProps {
-    globalState: GlobalState
+    globalState: GlobalState,
+    onEmitNewBlock: (block: NodeMaterialBlock) => GraphNode
 }
 
 export type FramePortData = {
@@ -743,19 +744,40 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             }
 
             // No destination so let's spin a new input block
-            let pointName = "output", inputBlock;
+            let pointName = "output", emittedBlock;
             let customInputBlock = this._candidateLink!.portA.connectionPoint.createCustomInputBlock();
             if (!customInputBlock) {
-                inputBlock = new InputBlock(NodeMaterialBlockConnectionPointTypes[this._candidateLink!.portA.connectionPoint.type], undefined, this._candidateLink!.portA.connectionPoint.type);
+                emittedBlock = new InputBlock(NodeMaterialBlockConnectionPointTypes[this._candidateLink!.portA.connectionPoint.type], undefined, this._candidateLink!.portA.connectionPoint.type);
             } else {
-                [inputBlock, pointName] = customInputBlock;
+                [emittedBlock, pointName] = customInputBlock;
             }
-            this.props.globalState.nodeMaterial.attachedBlocks.push(inputBlock);
-            pointA = (inputBlock as any)[pointName];
-            nodeA = this.appendBlock(inputBlock);
-            
+            this.props.globalState.nodeMaterial.attachedBlocks.push(emittedBlock);
+            pointA = (emittedBlock as any)[pointName];
+            if (!emittedBlock.isInput) {
+                emittedBlock.autoConfigure(this.props.globalState.nodeMaterial); 
+                nodeA = this.props.onEmitNewBlock(emittedBlock);
+            } else {
+                nodeA = this.appendBlock(emittedBlock);
+            }        
             nodeA.x = this._dropPointX - 200;
             nodeA.y = this._dropPointY - 50;    
+
+            let x = nodeA.x - 250;
+            let y = nodeA.y;
+
+            emittedBlock.inputs.forEach((connection) => {       
+                if (connection.connectedPoint) {
+                    var existingNodes = this.nodes.filter((n) => { return n.block === (connection as any).connectedPoint.ownerBlock });
+                    let connectedNode = existingNodes[0];
+
+                    if (connectedNode.x === 0 && connectedNode.y === 0) {
+                        connectedNode.x = x; 
+                        connectedNode.y = y;
+                        connectedNode.cleanAccumulation();
+                        y += 80;
+                    }
+                }
+            });
         }
 
         if (pointA.direction === NodeMaterialConnectionPointDirection.Input) {

nodeEditor/src/graphEditor.tsx

@@ -869,7 +869,12 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                             event.preventDefault();
                         }}
                     >                        
-                        <GraphCanvasComponent ref={"graphCanvas"} globalState={this.props.globalState}/>
+                        <GraphCanvasComponent ref={"graphCanvas"} 
+                            globalState={this.props.globalState}
+                            onEmitNewBlock={ block => {
+                                return this.createNodeFromObject(block);
+                            }
+                            }/>
                     </div>
 
                     <div id="rightGrab"