working on guiNode

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -15,7 +15,6 @@ import { SliderLineComponent } from '../../sharedComponents/sliderLineComponent'
 
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { Engine } from 'babylonjs/Engines/engine';
-import { FramePropertyTabComponent } from '../../diagram/properties/framePropertyComponent';
 
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';

guiEditor/src/diagram/graphNode.ts

@@ -66,7 +66,6 @@ export class GUINode {
         
         this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
         this._visual.style.left = `${this._gridAlignedX}px`;
-        this._refreshFrames();
     }
 
     public get y() {
@@ -83,7 +82,6 @@ export class GUINode {
         this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
         this._visual.style.top = `${this._gridAlignedY}px`;
 
-        this._refreshFrames();
     }
 
     public get width() {
@@ -95,11 +93,11 @@ export class GUINode {
     }
 
     public get id() {
-        return this.block.uniqueId;
+        return this.guiNode.uniqueId;
     }
 
     public get name() {
-        return this.block.name;
+        return this.guiNode.name;
     }
 
     public get isSelected() {
@@ -133,7 +131,7 @@ export class GUINode {
         }
     }
 
-    public constructor(public block: NodeMaterialBlock, globalState: GlobalState, public guiNode: BABYLON.GUI.Container | BABYLON.GUI.Control | null | undefined) {
+    public constructor(globalState: GlobalState, public guiNode: BABYLON.GUI.Container | BABYLON.GUI.Control) {
         this._globalState = globalState;
 
         guiNode?.onPointerUpObservable.add(evt => {
@@ -149,15 +147,7 @@ export class GUINode {
 
 
         this._onSelectionChangedObserver = this._globalState.onSelectionChangedObservable.add(node => {
-            /*if (node === this) {
-                this._visual.classList.add("selected");
-            } else {
-                setTimeout(() => {
-                    if (this._ownerCanvas.selectedNodes.indexOf(this) === -1) {
-                        this._visual.classList.remove("selected");
-                    }
-                })
-            }*/
+
         });
 
         this._onUpdateRequiredObserver = this._globalState.onUpdateRequiredObservable.add(() => {
@@ -175,35 +165,9 @@ export class GUINode {
         });
 
     }
-
-
     
-    private _refreshFrames() {       
-        if (this._ownerCanvas._frameIsMoving || this._ownerCanvas._isLoading) {
-            return;
-        }
-        
-        // Frames
-
-    }
-
     public refresh() {
-        if (this._displayManager) {
-            this._header.innerHTML = this._displayManager.getHeaderText(this.block);
-            this._displayManager.updatePreviewContent(this.block, this._content);
-            this._visual.style.background = this._displayManager.getBackgroundColor(this.block);
-            let additionalClass = this._displayManager.getHeaderClass(this.block);
-            this._header.classList.value = "header";
-            if (additionalClass) {
-                this._header.classList.add(additionalClass);
-            }
-        } else {
-            this._header.innerHTML = this.block.name;
-        }
 
- 
-        this._comments.innerHTML = this.block.comments || "";
-        this._comments.title = this.block.comments || "";
 
     }
 
@@ -275,17 +239,13 @@ export class GUINode {
             control = GenericPropertyComponent;
         }
 
-        if(this.guiNode) {
-            return React.createElement(control, {
-            globalState: this._globalState,
-            block: this.block,
-            guiBlock: this.guiNode
-            });
-        }
+        
         return React.createElement(control, {
-            globalState: this._globalState,
-            block: this.block
+        globalState: this._globalState,
+        guiBlock: this.guiNode
         });
+        
+
     }
 
     public updateVisual()
@@ -301,12 +261,6 @@ export class GUINode {
         this._ownerCanvas = owner;
 
         // Display manager
-        let displayManagerClass = DisplayLedger.RegisteredControls[this.block.getClassName()];
-        
-
-        if (displayManagerClass) {
-            this._displayManager = new displayManagerClass();
-        }
 
         // DOM
         this._visual = root.ownerDocument!.createElement("div");
@@ -372,8 +326,7 @@ export class GUINode {
             this._visual.parentElement.removeChild(this._visual);
         }
 
-        this.guiNode?.dispose();
-        
-        this.block.dispose();
+        this.guiNode.dispose();   
+
     }
 }

guiEditor/src/diagram/properties/genericNodePropertyComponent.tsx

@@ -9,7 +9,6 @@ import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
 import { SliderLineComponent } from '../../sharedComponents/sliderLineComponent';
 import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponent';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
-import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { PropertyTypeForEdition, IPropertyDescriptionForEdition, IEditablePropertyListOption } from 'babylonjs/Materials/Node/nodeMaterialDecorator';
 
 export class GenericPropertyComponent extends React.Component<IPropertyComponentProps> {
@@ -20,8 +19,8 @@ export class GenericPropertyComponent extends React.Component<IPropertyComponent
     render() {
         return (
             <>
-                <GeneralPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
-                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
+                <GeneralPropertyTabComponent globalState={this.props.globalState} guiBlock={this.props.guiBlock}/>
+                <GenericPropertyTabComponent globalState={this.props.globalState} guiBlock={this.props.guiBlock}/>
             </>
         );
     }
@@ -36,21 +35,6 @@ export class GeneralPropertyTabComponent extends React.Component<IPropertyCompon
         return (
             <>
                 <LineContainerComponent title="GENERAL">
-                    {
-                        (!this.props.block.isInput || !(this.props.block as InputBlock).isAttribute) &&
-                        <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.block}
-                            onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()}
-                            validator={ newName => 
-                            {if(!this.props.block.validateBlockName(newName)){ 
-                                this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers(`"${newName}" is a reserved name, please choose another`);
-                                return false;
-                            }
-                            return true;
-                            }} />
-                    }
-                    <TextLineComponent label="Type" value={this.props.block.getClassName()} />
-                    <TextInputLineComponent globalState={this.props.globalState} label="Comments" propertyName="comments" target={this.props.block}
-                            onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
                 </LineContainerComponent>
             </>
         );
@@ -73,7 +57,7 @@ export class GenericPropertyTabComponent extends React.Component<IPropertyCompon
     }
 
     render() {
-        const block = this.props.block,
+        const block = this.props.guiBlock,
               propStore: IPropertyDescriptionForEdition[] = (block as any)._propStore;
 
         if (!propStore) {
@@ -98,7 +82,7 @@ export class GenericPropertyTabComponent extends React.Component<IPropertyCompon
             switch (type) {
                 case PropertyTypeForEdition.Boolean: {
                     components.push(
-                        <CheckBoxLineComponent label={displayName} target={this.props.block} propertyName={propertyName} onValueChanged={() => this.forceRebuild(options.notifiers)} />
+                        <CheckBoxLineComponent label={displayName} target={this.props.guiBlock} propertyName={propertyName} onValueChanged={() => this.forceRebuild(options.notifiers)} />
                     );
                     break;
                 }
@@ -106,24 +90,24 @@ export class GenericPropertyTabComponent extends React.Component<IPropertyCompon
                     let cantDisplaySlider = (isNaN(options.min as number) || isNaN(options.max as number) || options.min === options.max);
                     if (cantDisplaySlider) {
                         components.push(
-                            <FloatLineComponent globalState={this.props.globalState} label={displayName} propertyName={propertyName} target={this.props.block} onChange={() => this.forceRebuild(options.notifiers)} />
+                            <FloatLineComponent globalState={this.props.globalState} label={displayName} propertyName={propertyName} target={this.props.guiBlock} onChange={() => this.forceRebuild(options.notifiers)} />
                         );
                     } else {
                         components.push(
-                            <SliderLineComponent label={displayName} target={this.props.block} globalState={this.props.globalState} propertyName={propertyName} step={Math.abs((options.max as number) - (options.min as number)) / 100.0} minimum={Math.min(options.min as number, options.max as number)} maximum={options.max as number} onChange={() => this.forceRebuild(options.notifiers)}/>
+                            <SliderLineComponent label={displayName} target={this.props.guiBlock} globalState={this.props.globalState} propertyName={propertyName} step={Math.abs((options.max as number) - (options.min as number)) / 100.0} minimum={Math.min(options.min as number, options.max as number)} maximum={options.max as number} onChange={() => this.forceRebuild(options.notifiers)}/>
                         );
                     }
                     break;
                 }
                 case PropertyTypeForEdition.Vector2: {
                     components.push(
-                        <Vector2LineComponent globalState={this.props.globalState} label={displayName} propertyName={propertyName} target={this.props.block} onChange={() => this.forceRebuild(options.notifiers)} />
+                        <Vector2LineComponent globalState={this.props.globalState} label={displayName} propertyName={propertyName} target={this.props.guiBlock} onChange={() => this.forceRebuild(options.notifiers)} />
                     );
                     break;
                 }
                 case PropertyTypeForEdition.List: {
                     components.push(
-                        <OptionsLineComponent label={displayName} options={options.options as IEditablePropertyListOption[]} target={this.props.block} propertyName={propertyName} onSelect={() => this.forceRebuild(options.notifiers)} />
+                        <OptionsLineComponent label={displayName} options={options.options as IEditablePropertyListOption[]} target={this.props.guiBlock} propertyName={propertyName} onSelect={() => this.forceRebuild(options.notifiers)} />
                     );
                     break;
                 }

guiEditor/src/diagram/properties/propertyComponentProps.ts

@@ -1,9 +1,6 @@
 import { GlobalState } from "../../globalState";
-import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
-import { BabylonFileLoaderConfiguration } from 'babylonjs';
 
 export interface IPropertyComponentProps {
     globalState: GlobalState;
-    block: NodeMaterialBlock;
-    guiBlock?: BABYLON.GUI.Container | BABYLON.GUI.Control;
+    guiBlock: BABYLON.GUI.Container | BABYLON.GUI.Control;
 }

guiEditor/src/diagram/workbench.tsx

@@ -40,7 +40,6 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
     private _frameContainer: HTMLDivElement;
     private _svgCanvas: HTMLElement;
     private _rootContainer: HTMLDivElement;
-    private _nodes: GUINode[] = [];
     private _guiNodes: GUINode[] = [];
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null
@@ -81,7 +80,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
     }
 
     public get nodes() {
-        return this._nodes;
+        return this._guiNodes;
     }
 
     public get zoom() {
@@ -242,30 +241,30 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
     }
 
     findNodeFromBlock(block: NodeMaterialBlock) {
-        return this.nodes.filter(n => n.block === block)[0];
+       // return this._guiNodes.filter(n => n.block === block)[0];
     }
 
     reset() {
-        for (var node of this._nodes) {
+        for (var node of this._guiNodes) {
             node.dispose();
         }
         
 
-        this._nodes = [];
+        this._guiNodes = [];
         this._graphCanvas.innerHTML = "";
         this._svgCanvas.innerHTML = "";
     }
 
 
 
-    appendBlock(block: NodeMaterialBlock) {
-        let newNode = new GUINode(block, this.props.globalState, null);
+    appendBlock(block: BABYLON.GUI.Container | BABYLON.GUI.Control) {
+        /*let newNode = new GUINode(block, this.props.globalState, null);
 
         newNode.appendVisual(this._graphCanvas, this);
 
         this._nodes.push(newNode);
 
-        return newNode;
+        return newNode;*/
     }
 
     distributeGraph() {
@@ -279,7 +278,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         graph.graph().rankdir = "LR";
 
         // Build dagre graph
-        this._nodes.forEach(node => {
+        this._guiNodes.forEach(node => {
 
 
             graph.setNode(node.id.toString(), {
@@ -290,16 +289,6 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
             });
         });
 
-       
-        this._nodes.forEach(node => {
-            node.block.outputs.forEach(output => {
-                if (!output.hasEndpoints) {
-                    return;
-                }
-
-            });
-        });
-
         // Distribute
         dagre.layout(graph);
 
@@ -310,7 +299,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
                 return;
             }
             if (dagreNode.type === "node") {
-                for (var node of this._nodes) {
+                for (var node of this._guiNodes) {
                     if (node.id === dagreNode.id) {
                         node.x = dagreNode.x - dagreNode.width / 2;
                         node.y = dagreNode.y - dagreNode.height / 2;
@@ -518,7 +507,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
             this._frameCandidate.parentElement!.removeChild(this._frameCandidate);
             this._frameCandidate = null;
 
-         }
+        }
     }
 
     onWheel(evt: React.WheelEvent) {
@@ -548,7 +537,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         // Get negative offset
         let minX = 0;
         let minY = 0;
-        this._nodes.forEach(node => {
+        this._guiNodes.forEach(node => {
 
             if (node.x < minX) {
                 minX = node.x;
@@ -559,7 +548,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         });
         // Restore to 0
 
-        this._nodes.forEach(node => {
+        this._guiNodes.forEach(node => {
             node.x += -minX;
             node.y += -minY;            
             node.cleanAccumulation();
@@ -618,8 +607,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         button1.onPointerUpObservable.add(function() {
         });
 
-        var fakeNodeMaterialBlock = new NodeMaterialBlock("Button");
-        var newGuiNode = new GUINode(fakeNodeMaterialBlock, this.globalState, button1);
+        var newGuiNode = new GUINode(this.globalState, button1);
         newGuiNode.appendVisual(this._graphCanvas, this);
         this._guiNodes.push(newGuiNode);
 
@@ -634,9 +622,8 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         slider1.color = "#FFFFFFFF";
         slider1.background = "#138016FF";
         slider1.onPointerUpObservable.add(function() {
-        });
-        var fakeNodeMaterialBlock = new NodeMaterialBlock("Slider");
-        var newGuiNode = new GUINode(fakeNodeMaterialBlock, this.globalState, slider1);
+        });;
+        var newGuiNode = new GUINode(this.globalState, slider1);
         newGuiNode.appendVisual(this._graphCanvas, this);
         this._guiNodes.push(newGuiNode);
 

guiEditor/src/graphEditor.tsx

@@ -51,7 +51,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
     private _leftWidth = DataStorage.ReadNumber("LeftWidth", 200);
     private _rightWidth = DataStorage.ReadNumber("RightWidth", 300);
 
-    private _blocks = new Array<NodeMaterialBlock>();
+    private _blocks = new Array<BABYLON.GUI.Container | BABYLON.GUI.Control>();
 
     private _previewManager: PreviewManager;
     private _mouseLocationX = 0;
@@ -65,30 +65,13 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
      * Creates a node and recursivly creates its parent nodes from it's input
      * @param nodeMaterialBlock 
      */
-    public createNodeFromObject(block: NodeMaterialBlock, recursion = true) {
+    public createNodeFromObject(block: BABYLON.GUI.Container | BABYLON.GUI.Control, recursion = true) {
         if (this._blocks.indexOf(block) !== -1) {        
-            return this._graphCanvas.nodes.filter(n => n.block === block)[0];
+            return this._graphCanvas.nodes.filter(n => n.guiNode === block)[0];
         }
 
         this._blocks.push(block);
 
-        if (this.props.globalState.nodeMaterial!.attachedBlocks.indexOf(block) === -1) {
-            this.props.globalState.nodeMaterial!.attachedBlocks.push(block);
-        }
-
-        if (block.isFinalMerger) {
-            this.props.globalState.nodeMaterial!.addOutputNode(block);
-        }
-
-        // Connections
-        if (block.inputs.length) {
-            for (var input of block.inputs) {
-                if (input.isConnected && recursion) {
-                    this.createNodeFromObject(input.sourceBlock!);
-                }
-            }
-        }
-
         // Graph
         const node = this._graphCanvas.appendBlock(block);
 
@@ -99,8 +82,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
     addValueNode(type: string) {
         let nodeType: NodeMaterialBlockConnectionPointTypes = BlockTools.GetConnectionNodeTypeFromString(type);
 
-        let newInputBlock = new InputBlock(type, undefined, nodeType);
-        return this.createNodeFromObject(newInputBlock);
+        //let newInputBlock = new InputBlock(type, undefined, nodeType);
+        //return this.createNodeFromObject(newInputBlock);
     }
 
     componentDidMount() {
@@ -147,13 +130,13 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         });
 
         this.props.globalState.onImportFrameObservable.add((source: any) => {
-            const frameData = source.editorData.frames[0];
+            /*const frameData = source.editorData.frames[0];
 
             // create new graph nodes for only blocks from frame (last blocks added)
             this.props.globalState.nodeMaterial.attachedBlocks.slice(-(frameData.blocks.length)).forEach((block: NodeMaterialBlock) => {
-                this.createNodeFromObject(block);
+                this.createNodeFromObject();
             });
-            this.reOrganize(this.props.globalState.nodeMaterial.editorData, true);
+            this.reOrganize(this.props.globalState.nodeMaterial.editorData, true);*/
         })
 
         this.props.globalState.onZoomToFitRequiredObservable.add(() => {
@@ -164,9 +147,9 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
             this.reOrganize();
         });
 
-        this.props.globalState.onGetNodeFromBlock = (block) => {
+        /*this.props.globalState.onGetNodeFromBlock = (block) => {
              return this._graphCanvas.findNodeFromBlock(block);
-        }
+        }*/
 
         this.props.globalState.hostDocument!.addEventListener("keydown", evt => {
             if ((evt.keyCode === 46 || evt.keyCode === 8) && !this.props.globalState.blockKeyboardEvents) { // Delete                
@@ -202,7 +185,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
     
                 let selectedItem = selectedItems[0] as GUINode;
     
-                if (!selectedItem.block) {
+                if (!selectedItem.guiNode) {
                     return;
                 }
 
@@ -222,36 +205,9 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         }
 
         const currentNode = newNodes[nodeIndex];
-        const block = currentNode.block;
+        const block = currentNode.guiNode;
         const sourceNode = sourceNodes[nodeIndex];
 
-        for (var inputIndex = 0; inputIndex < sourceNode.block.inputs.length; inputIndex++) {
-            let sourceInput = sourceNode.block.inputs[inputIndex];
-            const currentInput = block.inputs[inputIndex];
-            if (!sourceInput.isConnected) {
-                continue;
-            }
-            const sourceBlock = sourceInput.connectedPoint!.ownerBlock;
-            const activeNodes = sourceNodes.filter(s => s.block === sourceBlock);
-
-            if (activeNodes.length > 0) {
-                const activeNode = activeNodes[0];
-                let indexInList = sourceNodes.indexOf(activeNode);
-
-                // First make sure to connect the other one
-                this.reconnectNewNodes(indexInList, newNodes, sourceNodes, done);
-
-                // Then reconnect
-                const outputIndex = sourceBlock.outputs.indexOf(sourceInput.connectedPoint!);
-                const newOutput = newNodes[indexInList].block.outputs[outputIndex];
-
-                newOutput.connectTo(currentInput);
-            } else {
-                // Connect with outside blocks
-                sourceInput._connectedPoint!.connectTo(currentInput);
-            }
-
-        }
 
         currentNode.refresh();
 
@@ -272,13 +228,13 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
 
         // Create new nodes
         for (var node of copiedNodes) {
-            let block = node.block;
+            let block = node.guiNode;
 
             if (!block) {
                 continue;
             }
 
-            let clone = block.clone(this.props.globalState.nodeMaterial.getScene());
+            let clone = null;//block.clone(this.props.globalState.nodeMaterial.getScene());
 
             if (!clone) {
                 return;
@@ -297,7 +253,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                 y = currentY;
             }
 
-            newNode.x = x;
+            /*newNode.x = x;
             newNode.y = y;
             newNode.cleanAccumulation();
 
@@ -305,7 +261,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
 
             if (selectNew) {
                 this.props.globalState.onSelectionChangedObservable.notifyObservers(newNode);
-            }
+            }*/
         }
 
         // Relink
@@ -396,7 +352,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                 // Locations
                 for (var location of editorData.locations) {
                     for (var node of this._graphCanvas.nodes) {
-                        if (node.block && node.block.uniqueId === location.blockId) {
+                        if (node.guiNode && node.guiNode.uniqueId === location.blockId) {
                             node.x = location.x;
                             node.y = location.y;
                             node.cleanAccumulation();
@@ -469,7 +425,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         else {
             this._graphCanvas.addNewButton();
         }
-        if (data.indexOf("Block") === -1) {
+       
+        /*if (data.indexOf("Block") === -1) {
             newNode = this.addValueNode(data);
         } 
         else {
@@ -513,7 +470,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                     y += 80;
                 }
             }
-        });
+        });*/
 
         this.forceUpdate();
     }