working on selection

gui/src/2D/advancedDynamicTexture.ts

@@ -879,13 +879,14 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     }
     private _attachToOnPointerOut(scene: Scene): void {
         this._canvasPointerOutObserver = scene.getEngine().onCanvasPointerOutObservable.add((pointerEvent) => {
+            console.log("canvas out");
             if (this._lastControlOver[pointerEvent.pointerId]) {
                 this._lastControlOver[pointerEvent.pointerId]._onPointerOut(this._lastControlOver[pointerEvent.pointerId], null);
             }
             delete this._lastControlOver[pointerEvent.pointerId];
             if (this._lastControlDown[pointerEvent.pointerId] && this._lastControlDown[pointerEvent.pointerId] !== this._capturingControl[pointerEvent.pointerId]) {
-              // this._lastControlDown[pointerEvent.pointerId]._forcePointerUp();
-              // delete this._lastControlDown[pointerEvent.pointerId];
+              this._lastControlDown[pointerEvent.pointerId]._forcePointerUp();
+              delete this._lastControlDown[pointerEvent.pointerId];
               //needs to be uncommented.
             }
         });

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -10,7 +10,7 @@ import { Tools } from 'babylonjs/Misc/tools';
 import { SerializationTools } from '../../serializationTools';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
-import { GUINode } from '../../diagram/graphNode';
+import { GUINode } from '../../diagram/guiNode';
 import { SliderLineComponent } from '../../sharedComponents/sliderLineComponent';
 
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';

guiEditor/src/diagram/graphNode.ts

@@ -1,334 +0,0 @@
-import { GlobalState } from '../globalState';
-import { Nullable } from 'babylonjs/types';
-import { Observer } from 'babylonjs/Misc/observable';
-import { WorkbenchComponent, FramePortData } from './workbench';
-import { PropertyGuiLedger } from './propertyLedger';
-import * as React from 'react';
-import { GenericPropertyComponent } from './properties/genericNodePropertyComponent';
-
-export class GUINode {
-    private _visual: HTMLDivElement;
-    private _header: HTMLDivElement;
-    private _connections: HTMLDivElement;
-    private _inputsContainer: HTMLDivElement;
-    private _outputsContainer: HTMLDivElement;
-    private _content: HTMLDivElement;    
-    private _comments: HTMLDivElement;
-    private _x = 0;
-    private _y = 0;
-    private _gridAlignedX = 0;
-    private _gridAlignedY = 0;    
-    //private _mouseStartPointX: Nullable<number> = null;
-    //private _mouseStartPointY: Nullable<number> = null    
-    private _globalState: GlobalState;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GUINode | FramePortData>>>;  
-    private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;   
-    private _onUpdateRequiredObserver: Nullable<Observer<void>>;  
-    private _ownerCanvas: WorkbenchComponent; 
-    private _isSelected: boolean;
-    //private _displayManager: Nullable<IDisplayManager> = null;
-    private _isVisible = true;
-    private _enclosingFrameId = -1;
-
-    public get isVisible() {
-        return this._isVisible;
-    }
-
-    public set isVisible(value: boolean) {
-        this._isVisible = value;
-
-        if (!value) {
-            this._visual.classList.add("hidden");
-        } else {
-            this._visual.classList.remove("hidden");
-        }
-    }
-
-    public get gridAlignedX() {
-        return this._gridAlignedX;
-    }
-
-    public get gridAlignedY() {
-        return this._gridAlignedY;
-    }
-
-    public get x() {
-        return this._x;
-    }
-
-    public set x(value: number) {
-        if (this._x === value) {
-            return;
-        }
-        this._x = value;
-        
-        this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
-        this._visual.style.left = `${this._gridAlignedX}px`;
-    }
-
-    public get y() {
-        return this._y;
-    }
-
-    public set y(value: number) {
-        if (this._y === value) {
-            return;
-        }
-
-        this._y = value;
-
-        this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
-        this._visual.style.top = `${this._gridAlignedY}px`;
-
-    }
-
-    public get width() {
-        return this._visual.clientWidth;
-    }
-
-    public get height() {
-        return this._visual.clientHeight;
-    }
-
-    public get id() {
-        return this.guiNode.uniqueId;
-    }
-
-    public get name() {
-        return this.guiNode.name;
-    }
-
-    public get isSelected() {
-        return this._isSelected;
-    }
-
-    public get enclosingFrameId() {
-        return this._enclosingFrameId;
-    }
-
-    public set enclosingFrameId(value: number) {
-        this._enclosingFrameId = value;
-    }
-
-    public set isSelected(value: boolean) {
-        if (this._isSelected === value) {
-            return;            
-        }
-
-        this._isSelected = value;
-
-        if (!value) {
-            /*this._visual.classList.remove("selected");    
-            let indexInSelection = this._ownerCanvas.selectedNodes.indexOf(this);
-
-            if (indexInSelection > -1) {
-                this._ownerCanvas.selectedNodes.splice(indexInSelection, 1);
-            }*/
-        } else {
-            this._globalState.onSelectionChangedObservable.notifyObservers(this);  
-        }
-    }
-
-    public constructor(globalState: GlobalState, public guiNode: BABYLON.GUI.Control) {
-        this._globalState = globalState;
-
-        guiNode.onPointerUpObservable.add(evt => {
-            this.isSelected = true;
-            this.clicked = false;
-        });
-
-        guiNode.onPointerDownObservable.add( evt => {this.clicked = true; 
-            //this._onDown(evt);
-        }
-        );
-
-        //guiNode?.onPointerMoveObservable.add( evt => {this._onMove(evt);} );
-
-
-
-        this._onSelectionChangedObserver = this._globalState.onSelectionChangedObservable.add(node => {
-
-        });
-
-        this._onUpdateRequiredObserver = this._globalState.onUpdateRequiredObservable.add(() => {
-            this.refresh();
-        });
-
-        this._onSelectionBoxMovedObserver = this._globalState.onSelectionBoxMoved.add(rect1 => {
-            const rect2 = this._visual.getBoundingClientRect();
-            var overlap = !(rect1.right < rect2.left || 
-                rect1.left > rect2.right || 
-                rect1.bottom < rect2.top || 
-                rect1.top > rect2.bottom);
-
-            this.isSelected = overlap;
-        });
-
-    }
-    
-    public refresh() {
-
-
-    }
-
-    //private _onDown(evt: BABYLON.GUI.Vector2WithInfo) {
-        // Check if this is coming from the port
-        /*if (evt.srcElement && (evt.srcElement as HTMLElement).nodeName === "IMG") {
-            return;
-        }
-
-        const indexInSelection = this._ownerCanvas.selectedNodes.indexOf(this) ;
-        if (indexInSelection === -1) {
-            this._globalState.onSelectionChangedObservable.notifyObservers(this);
-        } else if (evt.ctrlKey) {
-            this.isSelected = false;
-        }
-
-        evt.stopPropagation();
-
-        for (var selectedNode of this._ownerCanvas.selectedNodes) {
-            selectedNode.cleanAccumulation();
-        }*/
-
-        //this._mouseStartPointX = evt.x;
-        //this._mouseStartPointY = evt.y;        
-        
-        //this._visual.setPointerCapture(evt.buttonIndex);
-    //}
-
-    public cleanAccumulation(useCeil = false) {
-        this.x = this._ownerCanvas.getGridPosition(this.x, useCeil);
-        this.y = this._ownerCanvas.getGridPosition(this.y, useCeil);
-    }
-
-    /*private _onUp(evt: BABYLON.Vector2) {
-        //evt.stopPropagation();
-
-       //for (var selectedNode of this._ownerCanvas.selectedNodes) {
-        //this.cleanAccumulation();
-        //}
-
-        //this.clicked = false;
-        
-        //this._mouseStartPointX = null;
-        //this._mouseStartPointY = null;
-        //this._visual.releasePointerCapture(evt.pointerId);
-    }*/
-    public clicked: boolean;
-    public _onMove(evt: BABYLON.Vector2, startPos: BABYLON.Vector2) {
-       
-        if(!this.clicked) return false;
-
-        let newX = (evt.x - startPos.x) ;// / this._ownerCanvas.zoom;
-        let newY = (evt.y - startPos.y) ;// / this._ownerCanvas.zoom;
-
-        //for (var selectedNode of this._ownerCanvas.selectedNodes) {
-        this.x += newX;
-        this.y += newY;
-        //}
-
-        //this._mouseStartPointX = evt.x;
-        //this._mouseStartPointY = evt.y;   
-
-        return true;
-        //evt.stopPropagation();
-    }
-
-    public renderProperties(): Nullable<JSX.Element> {
-        let className = this.guiNode.getClassName();
-        let control = PropertyGuiLedger.RegisteredControls[className];
-        
-        if (!control) {
-            control = GenericPropertyComponent;
-        }
-
-        return React.createElement(control, {
-        globalState: this._globalState,
-        guiBlock: this.guiNode
-        });
-        
-
-    }
-
-    public updateVisual()
-    {
-        if(this.guiNode)
-        {
-            this.guiNode.leftInPixels = this.x;
-            this.guiNode.topInPixels = this.y;
-        }
-    }
-
-    public appendVisual(root: HTMLDivElement, owner: WorkbenchComponent) {
-        this._ownerCanvas = owner;
-
-        // Display manager
-
-        // DOM
-        this._visual = root.ownerDocument!.createElement("div");
-        this._visual.classList.add("visual");
-
-        //this._visual.addEventListener("pointerdown", evt => this._onDown(evt));
-        //this._visual.addEventListener("pointerup", evt => this._onUp(new BABYLON.Vector2(evt.x, evt.y)));
-        //this._visual.addEventListener("pointermove", evt => this._onMove(evt));
-
-        this._header = root.ownerDocument!.createElement("div");
-        this._header.classList.add("header");
-
-        this._visual.appendChild(this._header);      
-
-        this._connections = root.ownerDocument!.createElement("div");
-        this._connections.classList.add("connections");
-        this._visual.appendChild(this._connections);        
-        
-        this._inputsContainer = root.ownerDocument!.createElement("div");
-        this._inputsContainer.classList.add("inputsContainer");
-        this._connections.appendChild(this._inputsContainer);      
-
-        this._outputsContainer = root.ownerDocument!.createElement("div");
-        this._outputsContainer.classList.add("outputsContainer");
-        this._connections.appendChild(this._outputsContainer);      
-
-        this._content = root.ownerDocument!.createElement("div");
-        this._content.classList.add("content");        
-        this._visual.appendChild(this._content);     
-
-        var selectionBorder = root.ownerDocument!.createElement("div");
-        selectionBorder.classList.add("selection-border");
-        this._visual.appendChild(selectionBorder);     
-
-        root.appendChild(this._visual);
-
-        // Comments
-        this._comments = root.ownerDocument!.createElement("div");
-        this._comments.classList.add("comments");
-            
-        this._visual.appendChild(this._comments);    
-
-        this.refresh();
-    }
-
-    public dispose() {
-        // notify frame observers that this node is being deleted
-        this._globalState.onGraphNodeRemovalObservable.notifyObservers(this);
-
-        if (this._onSelectionChangedObserver) {
-            this._globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
-        }
-
-        if (this._onUpdateRequiredObserver) {
-            this._globalState.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
-        }
-
-        if (this._onSelectionBoxMovedObserver) {
-            this._globalState.onSelectionBoxMoved.remove(this._onSelectionBoxMovedObserver);
-        }
-
-        if (this._visual.parentElement) {
-            this._visual.parentElement.removeChild(this._visual);
-        }
-
-        this.guiNode.dispose();   
-
-    }
-}

guiEditor/src/diagram/guiNode.ts

@@ -0,0 +1,206 @@
+import { GlobalState } from '../globalState';
+import { Nullable } from 'babylonjs/types';
+import { Observer } from 'babylonjs/Misc/observable';
+import { WorkbenchComponent, FramePortData } from './workbench';
+import { PropertyGuiLedger } from './propertyLedger';
+import * as React from 'react';
+import { GenericPropertyComponent } from './properties/genericNodePropertyComponent';
+
+export class GUINode {
+    private _x = 0;
+    private _y = 0;
+    private _gridAlignedX = 0;
+    private _gridAlignedY = 0;    
+    private _globalState: GlobalState;
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GUINode | FramePortData>>>;  
+    private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;   
+    private _onUpdateRequiredObserver: Nullable<Observer<void>>;  
+    private _ownerCanvas: WorkbenchComponent; 
+    private _isSelected: boolean;
+    private _isVisible = true;
+    private _enclosingFrameId = -1;
+
+    public get isVisible() {
+        return this._isVisible;
+    }
+
+    public set isVisible(value: boolean) {
+        this._isVisible = value;
+    }
+
+    public get gridAlignedX() {
+        return this._gridAlignedX;
+    }
+
+    public get gridAlignedY() {
+        return this._gridAlignedY;
+    }
+
+    public get x() {
+        return this._x;
+    }
+
+    public set x(value: number) {
+        if (this._x === value) {
+            return;
+        }
+        this._x = value;
+        
+        this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
+    }
+
+    public get y() {
+        return this._y;
+    }
+
+    public set y(value: number) {
+        if (this._y === value) {
+            return;
+        }
+
+        this._y = value;
+
+        this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
+    }
+
+    public get width() {
+        return 0;
+    }
+
+    public get height() {
+        return 0;
+    }
+
+    public get id() {
+        return this.guiNode.uniqueId;
+    }
+
+    public get name() {
+        return this.guiNode.name;
+    }
+
+    public get isSelected() {
+        return this._isSelected;
+    }
+
+    public get enclosingFrameId() {
+        return this._enclosingFrameId;
+    }
+
+    public set enclosingFrameId(value: number) {
+        this._enclosingFrameId = value;
+    }
+
+    public set isSelected(value: boolean) {
+        if (this._isSelected === value) {
+            return;            
+        }
+
+        this._isSelected = value;
+
+        if (value) {
+            this._globalState.onSelectionChangedObservable.notifyObservers(this);  
+        }
+    }
+
+    public constructor(globalState: GlobalState, public guiNode: BABYLON.GUI.Control) {
+        this._globalState = globalState;
+        this._ownerCanvas = this._globalState.workbench;
+        
+        guiNode.onPointerUpObservable.add(evt => {
+            this.clicked = false;
+            console.log("up");
+        });
+
+        guiNode.onPointerDownObservable.add( evt => {
+            this.clicked = true;
+            this.isSelected = true;
+            console.log("down");
+        }
+        );
+
+        guiNode.onPointerEnterObservable.add( evt => {
+            this._ownerCanvas.isOverGUINode = true;
+            console.log("in");
+        }
+        );
+
+        guiNode.onPointerOutObservable.add( evt => {
+            this._ownerCanvas.isOverGUINode = false;
+            console.log("out");
+        }
+        );
+
+        this._onSelectionBoxMovedObserver = this._globalState.onSelectionBoxMoved.add(rect1 => {
+        });
+
+    }
+
+    public cleanAccumulation(useCeil = false) {
+        this.x = this._ownerCanvas.getGridPosition(this.x, useCeil);
+        this.y = this._ownerCanvas.getGridPosition(this.y, useCeil);
+    }
+
+    public clicked: boolean;
+    public _onMove(evt: BABYLON.Vector2, startPos: BABYLON.Vector2) {
+       
+        if(!this.clicked) return false;
+
+        let newX = (evt.x - startPos.x) ;// / this._ownerCanvas.zoom;
+        let newY = (evt.y - startPos.y) ;// / this._ownerCanvas.zoom;
+
+
+        this.x += newX;
+        this.y += newY;  
+
+        return true;
+        //evt.stopPropagation();
+    }
+
+    public renderProperties(): Nullable<JSX.Element> {
+        let className = this.guiNode.getClassName();
+        let control = PropertyGuiLedger.RegisteredControls[className];
+        
+        if (!control) {
+            control = GenericPropertyComponent;
+        }
+
+        return React.createElement(control, {
+        globalState: this._globalState,
+        guiBlock: this.guiNode
+        });
+    }
+
+    public updateVisual()
+    {
+        if(this.guiNode)
+        {
+            this.guiNode.leftInPixels = this.x;
+            this.guiNode.topInPixels = this.y;
+        }
+    }
+
+    public appendVisual(root: HTMLDivElement, owner: WorkbenchComponent) {
+        this._ownerCanvas = owner;
+    }
+
+    public dispose() {
+        // notify frame observers that this node is being deleted
+        this._globalState.onGraphNodeRemovalObservable.notifyObservers(this);
+
+        if (this._onSelectionChangedObserver) {
+            this._globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+        }
+
+        if (this._onUpdateRequiredObserver) {
+            this._globalState.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
+        }
+
+        if (this._onSelectionBoxMovedObserver) {
+            this._globalState.onSelectionBoxMoved.remove(this._onSelectionBoxMovedObserver);
+        }
+
+        this.guiNode.dispose();   
+
+    }
+}

guiEditor/src/diagram/workbench.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { GlobalState } from '../globalState';
-import { GUINode } from './graphNode';
+import { GUINode } from './guiNode';
 import * as dagre from 'dagre';
 import { Nullable } from 'babylonjs/types';
 
@@ -38,14 +38,11 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
     private _guiNodes: GUINode[] = [];
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null
-    //private _dropPointX = 0;
-    //private _dropPointY = 0;
     private _selectionStartX = 0;
     private _selectionStartY = 0;
     private _x = 0;
     private _y = 0;
     private _zoom = 1;
-    private _selectedNodes: GUINode[] = [];
     private _selectedGuiNodes: GUINode[] = [];
     private _gridSize = 20;
     private _selectionBox: Nullable<HTMLDivElement> = null;    
@@ -57,7 +54,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
 
     public _frameIsMoving = false;
     public _isLoading = false;
-
+    public isOverGUINode = false;
     
 
     public get gridSize() {
@@ -112,10 +109,6 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         this.updateTransform();
     }
 
-    public get selectedNodes() {
-        return this._selectedNodes;
-    }
-
     public get selectedGuiNodes() {
         return this._selectedGuiNodes;
     }
@@ -145,25 +138,25 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
 
         props.globalState.onSelectionChangedObservable.add(selection => {  
             if (!selection) {
+                
                 this.selectedGuiNodes.forEach(element => {
                     element.isSelected = false;
                 }); 
-                this._selectedNodes = [];
                 this._selectedGuiNodes = [];
-            } else {
+            } 
+            else {
                 if (selection instanceof GUINode){
                     if (this._ctrlKeyIsPressed) {
-                        if (this._selectedNodes.indexOf(selection) === -1) {
-                            this._selectedNodes.push(selection);
+                        if (this._selectedGuiNodes.indexOf(selection) === -1) {
                             this._selectedGuiNodes.push(selection);
                         }
-                    } else {                    
-                        this._selectedNodes = [selection];
+                    } 
+                    else {                    
                         this._selectedGuiNodes = [selection];
                     }
                 
-                } else {
-                    this._selectedNodes = [];
+                } 
+                else {
                     this._selectedGuiNodes = [];
                 }
             }
@@ -297,8 +290,6 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
                 }
                 return;
             }
-
-            
         });        
     }
 
@@ -375,7 +366,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
             var x = this._mouseStartPointX;
             var y = this._mouseStartPointY;
             let selected = false;
-            this._guiNodes.forEach(element => {
+            this.selectedGuiNodes.forEach(element => {
                 selected = element._onMove(new BABYLON.Vector2(evt.clientX, evt.clientY), 
                 new BABYLON.Vector2( x, y)) || selected;
             });
@@ -394,7 +385,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         this._rootContainer.setPointerCapture(evt.pointerId);
 
         // Selection?
-        if (evt.currentTarget === this._hostCanvas && evt.ctrlKey) {
+        /*if (evt.currentTarget === this._hostCanvas && evt.ctrlKey) {
             this._selectionBox = this.props.globalState.hostDocument.createElement("div");
             this._selectionBox.classList.add("selection-box");
             this._selectionContainer.appendChild(this._selectionBox);
@@ -407,9 +398,13 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
             this._selectionBox.style.width = "0px";
             this._selectionBox.style.height = "0px";
             return;
+        }*/
+        console.log('workbench click');
+        if(!this.isOverGUINode) {
+            console.log('unclicked');
+            this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
         }
-
-        this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
+        
         this._mouseStartPointX = evt.clientX;
         this._mouseStartPointY = evt.clientY;        
     }
@@ -516,11 +511,11 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         camera.setTarget(BABYLON.Vector3.Zero());
         
         // This attaches the camera to the canvas
-        camera.attachControl(true);
+        //camera.attachControl(true);
         
         // GUI
         this.globalState.guiTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
-        
+        scene.getEngine().onCanvasPointerOutObservable.clear();
         // Watch for browser/canvas resize events
         window.addEventListener("resize", function () {
         engine.resize();

guiEditor/src/globalState.ts

@@ -6,7 +6,7 @@ import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 import { PreviewType } from './components/preview/previewType';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { Color4 } from 'babylonjs/Maths/math.color';
-import { GUINode } from './diagram/graphNode';
+import { GUINode } from './diagram/guiNode';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { FramePortData, WorkbenchComponent } from './diagram/workbench';
 import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';

guiEditor/src/main.scss

@@ -1,4 +1,4 @@
-#node-editor-graph-root {
+#gui-editor-workbench-root {
     display: grid;
     grid-template-rows: calc(100% - 120px) 120px;
     height: 100%;

guiEditor/src/serializationTools.ts

@@ -2,7 +2,6 @@ import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
 import { GlobalState } from './globalState';
 import { Texture } from 'babylonjs/Materials/Textures/texture';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
-import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 
 
 export class SerializationTools {
@@ -11,19 +10,7 @@ export class SerializationTools {
         material.editorData = {
             locations: []
         };
-
-        // Store node locations
-        const blocks: NodeMaterialBlock[] =material.attachedBlocks;
-
-        for (var block of blocks) {
-            let node = globalState.onGetNodeFromBlock(block);
-
-            material.editorData.locations.push({
-                blockId: block.uniqueId,
-                x: node ? node.x : 0,
-                y: node ? node.y : 0
-            });
-        }
+        
 
         globalState.storeEditorData(material.editorData);
     }

guiEditor/src/workbenchEditor.tsx

@@ -14,7 +14,7 @@ import { PreviewMeshControlComponent } from './components/preview/previewMeshCon
 import { PreviewAreaComponent } from './components/preview/previewAreaComponent';
 import { SerializationTools } from './serializationTools';
 import { WorkbenchComponent } from './diagram/workbench';
-import { GUINode } from './diagram/graphNode';
+import { GUINode } from './diagram/guiNode';
 import * as ReactDOM from 'react-dom';
 import { IInspectorOptions } from "babylonjs/Debug/debugLayer";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
@@ -49,8 +49,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
     private _blocks = new Array<BABYLON.GUI.Container | BABYLON.GUI.Control>();
 
     private _previewManager: PreviewManager;
-    //private _mouseLocationX = 0;
-    //private _mouseLocationY = 0;
     private _onWidgetKeyUpPointer: any;
 
     private _previewHost: Nullable<HTMLElement>;
@@ -58,7 +56,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
 
     /**
      * Creates a node and recursivly creates its parent nodes from it's input
-     * @param nodeMaterialBlock 
+     * @param block 
      */
     public createNodeFromObject(block: BABYLON.GUI.Control, recursion = true) {
         if (this._blocks.indexOf(block) !== -1) {        
@@ -73,13 +71,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
 
         return node;
     }
-    
-    addValueNode(type: string) {
-        //let nodeType: NodeMaterialBlockConnectionPointTypes = BlockTools.GetConnectionNodeTypeFromString(type);
-
-        //let newInputBlock = new InputBlock(type, undefined, nodeType);
-        //return this.createNodeFromObject(newInputBlock);
-    }
 
     componentDidMount() {
         if (this.props.globalState.hostDocument) {
@@ -142,9 +133,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
             this.reOrganize();
         });
 
-        /*this.props.globalState.onGetNodeFromBlock = (block) => {
-             return this._workbenchCanvas.findNodeFromBlock(block);
-        }*/
+
 
         this.props.globalState.hostDocument!.addEventListener("keydown", evt => {
             if ((evt.keyCode === 46 || evt.keyCode === 8) && !this.props.globalState.blockKeyboardEvents) { // Delete                
@@ -173,7 +162,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
 
             if (evt.key === "c") { // Copy
               
-                let selectedItems = this._workbenchCanvas.selectedNodes;
+                let selectedItems = this._workbenchCanvas.selectedGuiNodes;
                 if (!selectedItems.length) {
                     return;
                 }
@@ -447,7 +436,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
         const popUpWindow = this.createPopupWindow("PREVIEW AREA", "_PreviewHostWindow");
         if (popUpWindow) {
             popUpWindow.addEventListener('beforeunload',  this.handleClosingPopUp);
-            const parentControl = popUpWindow.document.getElementById('node-editor-graph-root');
+            const parentControl = popUpWindow.document.getElementById('gui-editor-workbench-root');
             this.createPreviewMeshControlHost(options, parentControl);
             this.createPreviewHost(options, parentControl);
             if (parentControl) {
@@ -604,7 +593,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
     render() {
         return (
             <Portal globalState={this.props.globalState}>
-                <div id="node-editor-graph-root" style={
+                <div id="gui-editor-workbench-root" style={
                     {
                         gridTemplateColumns: this.buildColumnLayout()
                     }}
@@ -628,7 +617,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
                         onPointerMove={evt => this.resizeColumns(evt)}
                     ></div>
 
-                    {/* The node graph diagram */}
+                    {/* The gui workbench diagram */}
                     <div className="diagram-container"
                         onDrop={event => {
                             this.emitNewBlock(event);