fixing render loop

guiEditor/src/diagram/workbench.tsx

@@ -48,7 +48,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _dropPointY = 0;
     private _selectionStartX = 0;
     private _selectionStartY = 0;
-    private _candidateLinkedHasMoved = false;
     private _x = 0;
     private _y = 0;
     private _zoom = 1;
@@ -65,6 +64,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     public _frameIsMoving = false;
     public _isLoading = false;
 
+    
+
     public get gridSize() {
         return this._gridSize;
     }
@@ -201,6 +202,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 editorData.zoom = this.zoom;
             }
         }
+        this.props.globalState.workbench = this;
     }
 
     public getGridPosition(position: number, useCeil = false) {
@@ -589,7 +591,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     }
 
 
-    createGUICanvas()
+    public createGUICanvas()
     {
         // Get the canvas element from the DOM.
         const canvas = document.getElementById("graph-canvas") as HTMLCanvasElement;
@@ -617,11 +619,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
     public addNewButton()
     {
-        if(!this.globalState.guiTexture)
-        {
-            this.createGUICanvas();
-        }
-
         var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
         button1.width = "150px"
         button1.height = "40px";
@@ -641,11 +638,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
     public addNewSlider()
     {
-        if(!this.globalState.guiTexture)
-        {
-            this.createGUICanvas();
-        }
-
         var slider1 = new BABYLON.GUI.Slider("Slider");
         slider1.width = "150px"
         slider1.height = "40px";
@@ -661,8 +653,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         this.globalState.guiTexture.addControl(slider1);    
     }
 
-
-    //private _advancedTexture: BABYLON.GUI.AdvancedDynamicTexture;
     updateGUIs()
     {
         this._guiNodes.forEach(element => {
@@ -672,8 +662,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     }
  
     render() {
-
-        //var canv = new HTMLCanvasElement;
+ 
         var canv = <canvas id="graph-canvas" 
         onWheel={evt => this.onWheel(evt)}
         onPointerMove={evt => this.onMove(evt)}
@@ -681,8 +670,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         onPointerUp={evt =>  this.onUp(evt)} 
         >   
         <div id="graph-container">
-            <div id="graph-canvas-container">
-                
+            <div id="graph-canvas-container">  
             </div>     
             <div id="frame-container">                        
             </div>

guiEditor/src/globalState.ts

@@ -8,7 +8,7 @@ import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { Color4 } from 'babylonjs/Maths/math.color';
 import { GraphNode } from './diagram/graphNode';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
-import { FramePortData } from './diagram/workbench';
+import { FramePortData, GraphCanvasComponent } from './diagram/workbench';
 import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
 
 export class GlobalState {
@@ -52,6 +52,7 @@ export class GlobalState {
     directionalLight0: boolean;
     directionalLight1: boolean;
     controlCamera: boolean;
+    workbench: GraphCanvasComponent;
     storeEditorData: (serializationObject: any, frame?: Nullable<null>) => void;
     _mode: NodeMaterialModes;
 

guiEditor/src/nodeEditor.ts

@@ -42,7 +42,7 @@ export class NodeEditor {
         if (!hostElement) {
             hostElement = Popup.CreatePopup("BABYLON.JS NODE EDITOR", "node-editor", 1000, 800)!;
         }
-        
+
         let globalState = new GlobalState();
         globalState.nodeMaterial = options.nodeMaterial;
         globalState.mode = options.nodeMaterial.mode;
@@ -56,6 +56,11 @@ export class NodeEditor {
         });
 
         ReactDOM.render(graphEditor, hostElement);
+        
+        // create the middle workbench canvas
+        if(!globalState.guiTexture) {
+            globalState.workbench.createGUICanvas();
+        }
 
         if (options.customLoadObservable) {
             options.customLoadObservable.add(data => {