deleteing code

guiEditor/src/diagram/graphCanvas.tsx

@@ -12,7 +12,6 @@ import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { FragmentOutputBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/fragmentOutputBlock';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
-import { GraphFrame } from './graphFrame';
 import { IEditorData, IFrameData } from '../nodeLocationInfo';
 import { FrameNodePort } from './frameNodePort';
 import { Button } from 'babylonjs-gui/2D/controls/button';
@@ -28,7 +27,6 @@ export interface IGraphCanvasComponentProps {
 }
 
 export type FramePortData = {
-    frame: GraphFrame,
     port: FrameNodePort
 }
 
@@ -69,10 +67,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _candidateLink: Nullable<NodeLink> = null;
     private _candidatePort: Nullable<NodePort | FrameNodePort> = null;
     private _gridSize = 20;
-    private _selectionBox: Nullable<HTMLDivElement> = null;   
-    private _selectedFrame: Nullable<GraphFrame> = null;   
+    private _selectionBox: Nullable<HTMLDivElement> = null;    
     private _frameCandidate: Nullable<HTMLDivElement> = null;
-    private _frames: GraphFrame[] = [];
 
     private _altKeyIsPressed = false;
     private _ctrlKeyIsPressed = false;
@@ -103,10 +99,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         return this._links;
     }
 
-    public get frames() {
-        return this._frames;
-    }
-
     public get zoom() {
         return this._zoom;
     }
@@ -152,9 +144,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     public get selectedLink() {
         return this._selectedLink;
     }
-    public get selectedFrame() {
-        return this._selectedFrame;
-    }
 
     public get selectedPort() {
         return this._selectedPort;
@@ -191,22 +180,14 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 this._selectedNodes = [];
                 this._selectedGuiNodes = [];
                 this._selectedLink = null;
-                this._selectedFrame = null;
                 this._selectedPort = null;
             } else {
                 if (selection instanceof NodeLink) {
                     this._selectedNodes = [];
                     this._selectedGuiNodes = [];
-                    this._selectedFrame = null;
                     this._selectedLink = selection;
                     this._selectedPort = null;
-                } else if (selection instanceof GraphFrame) {
-                    this._selectedNodes = [];
-                    this._selectedGuiNodes = [];
-                    this._selectedFrame = selection;
-                    this._selectedLink = null;
-                    this._selectedPort = null;
-                } else if (selection instanceof GraphNode){
+                }  else if (selection instanceof GraphNode){
                     if (this._ctrlKeyIsPressed) {
                         if (this._selectedNodes.indexOf(selection) === -1) {
                             this._selectedNodes.push(selection);
@@ -219,15 +200,13 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 } else if(selection instanceof NodePort){
                     this._selectedNodes = [];
                     this._selectedGuiNodes = [];
-                    this._selectedFrame = null;
                     this._selectedLink = null;
                     this._selectedPort = selection;
                 } else {
                     this._selectedNodes = [];
                     this._selectedGuiNodes = [];
-                    this._selectedFrame = null;
                     this._selectedLink = null;
-                    this._selectedPort = selection.port;
+                    //this._selectedPort = selection.port;
                 }
             }
         });
@@ -259,9 +238,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 editorData.x = this.x;
                 editorData.y = this.y;
                 editorData.zoom = this.zoom;
-                for (var frame of this._frames) {
-                    editorData.frames.push(frame.serialize());
-                }
             }
         }
     }
@@ -311,12 +287,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             node.dispose();
         }
         
-        const frames = this._frames.splice(0);
-        for (var frame of frames) {
-            frame.dispose();
-        }
+
         this._nodes = [];
-        this._frames = [];
         this._links = [];
         this._graphCanvas.innerHTML = "";
         this._svgCanvas.innerHTML = "";
@@ -363,9 +335,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         // Build dagre graph
         this._nodes.forEach(node => {
 
-            if (this._frames.some(f => f.nodes.indexOf(node) !== -1)) {
-                return;
-            }
 
             graph.setNode(node.id.toString(), {
                 id: node.id,
@@ -375,31 +344,13 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             });
         });
 
-        this._frames.forEach(frame => {
-            graph.setNode(frame.id.toString(), {
-                id: frame.id,
-                type: "frame",
-                width: frame.element.clientWidth,
-                height: frame.element.clientHeight
-            });
-        })
-
+       
         this._nodes.forEach(node => {
             node.block.outputs.forEach(output => {
                 if (!output.hasEndpoints) {
                     return;
                 }
 
-                output.endpoints.forEach(endpoint => {
-                    let sourceFrames = this._frames.filter(f => f.nodes.indexOf(node) !== -1);
-                    let targetFrames = this._frames.filter(f => f.nodes.some(n => n.block === endpoint.ownerBlock));
-
-
-                    let sourceId = sourceFrames.length > 0 ? sourceFrames[0].id : node.id;
-                    let targetId = targetFrames.length > 0 ? targetFrames[0].id : endpoint.ownerBlock.uniqueId;
-
-                    graph.setEdge(sourceId.toString(), targetId.toString());
-                });
             });
         });
 
@@ -424,15 +375,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 return;
             }
 
-            for (var frame of this._frames) {
-                if (frame.id === dagreNode.id) {                    
-                    this._frameIsMoving = true;
-                    frame.move(dagreNode.x - dagreNode.width / 2, dagreNode.y - dagreNode.height / 2, false);
-                    frame.cleanAccumulation();
-                    this._frameIsMoving = false;
-                    return;
-                }
-            }
+            
         });        
     }
 
@@ -627,14 +570,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             } else { // is a click event on NodePort
                 if(this._candidateLink.portA instanceof FrameNodePort) { //only on Frame Node Ports
                     const port = this._candidateLink.portA;
-                    const frame = this.frames.find((frame: GraphFrame) => frame.id === port.parentFrameId);
-                    if (frame) {
-                        const data: FramePortData = {
-                            frame,
-                            port
-                        }
-                        this.props.globalState.onSelectionChangedObservable.notifyObservers(data);
-                    }
+                
                 } else if(this._candidateLink.portA instanceof NodePort){
                     this.props.globalState.onSelectionChangedObservable.notifyObservers(this._candidateLink.portA );
                 }
@@ -650,13 +586,11 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         }
 
         if (this._frameCandidate) {            
-            let newFrame = new GraphFrame(this._frameCandidate, this);
-            this._frames.push(newFrame);
+
 
             this._frameCandidate.parentElement!.removeChild(this._frameCandidate);
             this._frameCandidate = null;
 
-            this.props.globalState.onSelectionChangedObservable.notifyObservers(newFrame);
          }
     }
 
@@ -688,9 +622,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         let minX = 0;
         let minY = 0;
         this._nodes.forEach(node => {
-            if (this._frames.some(f => f.nodes.indexOf(node) !== -1)) {
-                return;
-            }
 
             if (node.x < minX) {
                 minX = node.x;
@@ -700,21 +631,9 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
             }
         });
 
-        this._frames.forEach(frame => {
-            if (frame.x < minX) {
-                minX = frame.x;
-            }
-            if (frame.y < minY) {
-                minY = frame.y;
-            }
-        });
+
 
         // Restore to 0
-        this._frames.forEach(frame => {            
-            frame.x += -minX;
-            frame.y += -minY;
-            frame.cleanAccumulation();
-        });
 
         this._nodes.forEach(node => {
             node.x += -minX;
@@ -734,31 +653,17 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
 
     processEditorData(editorData: IEditorData) {
-        const frames = this._frames.splice(0);
-        for (var frame of frames) {
-            frame.dispose();
-        }
 
-        this._frames = [];
+
         this.x = editorData.x || 0;
         this.y = editorData.y || 0;
         this.zoom = editorData.zoom || 1;
 
         // Frames
-        if (editorData.frames) {
-            for (var frameData of editorData.frames) {
-                var frame = GraphFrame.Parse(frameData, this, editorData.map);
-                this._frames.push(frame);
-            }  
-        }
-    }
 
-    addFrame(frameData: IFrameData) {
-            const frame = GraphFrame.Parse(frameData, this, this.props.globalState.nodeMaterial.editorData.map);
-            this._frames.push(frame);
-            this.globalState.onSelectionChangedObservable.notifyObservers(frame);
     }
 
+
     createGUICanvas()
     {
         // Get the canvas element from the DOM.

guiEditor/src/diagram/graphNode.ts

@@ -11,7 +11,6 @@ import { DisplayLedger } from './displayLedger';
 import { IDisplayManager } from './display/displayManager';
 import { NodeLink } from './nodeLink';
 import { NodePort } from './nodePort';
-import { GraphFrame } from './graphFrame';
 import { Vector2 } from 'babylonjs';
 
 export class GraphNode {
@@ -29,9 +28,8 @@ export class GraphNode {
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null    
     private _globalState: GlobalState;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;  
-    private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;  
-    private _onFrameCreatedObserver: Nullable<Observer<GraphFrame>>; 
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | NodePort | FramePortData>>>;  
+    private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;   
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;  
     private _ownerCanvas: GraphCanvasComponent; 
     private _isSelected: boolean;
@@ -181,35 +179,9 @@ export class GraphNode {
             this.isSelected = overlap;
         });
 
-        this._onFrameCreatedObserver = this._globalState.onFrameCreatedObservable.add(frame => {      
-            if (this._ownerCanvas.frames.some(f => f.nodes.indexOf(this) !== -1)) {
-                return;
-            }
-            
-            if (this.isOverlappingFrame(frame)) {
-                frame.nodes.push(this);
-            }
-        });
     }
 
-    public isOverlappingFrame(frame: GraphFrame) {
-        const rect2 = this._visual.getBoundingClientRect();
-        const rect1 = frame.element.getBoundingClientRect();
 
-        // Add a tiny margin
-        rect1.width -= 5;
-        rect1.height -= 5;
-
-        const isOverlappingFrame = !(rect1.right < rect2.left || 
-            rect1.left > rect2.right || 
-            rect1.bottom < rect2.top || 
-            rect1.top > rect2.bottom);
-
-        if (isOverlappingFrame) {
-            this.enclosingFrameId = frame.id;
-        }
-        return isOverlappingFrame;
-    }
     
     private _refreshFrames() {       
         if (this._ownerCanvas._frameIsMoving || this._ownerCanvas._isLoading) {
@@ -217,9 +189,7 @@ export class GraphNode {
         }
         
         // Frames
-        for (var frame of this._ownerCanvas.frames) {
-            frame.syncNode(this);
-        }
+
     }
 
     public refresh() {
@@ -236,12 +206,7 @@ export class GraphNode {
             this._header.innerHTML = this.block.name;
         }
 
-        if(this.enclosingFrameId !== -1) {   
-            let index = this._ownerCanvas.frames.findIndex(frame => frame.id === this.enclosingFrameId);
-            if(index >= 0 && this._ownerCanvas.frames[index].isCollapsed) {
-                this._ownerCanvas.frames[index].redrawFramePorts();
-            }
-        }   
+ 
         this._comments.innerHTML = this.block.comments || "";
         this._comments.title = this.block.comments || "";
 
@@ -396,9 +361,9 @@ export class GraphNode {
         // notify frame observers that this node is being deleted
         this._globalState.onGraphNodeRemovalObservable.notifyObservers(this);
 
-        if (this._onSelectionChangedObserver) {
+        /*if (this._onSelectionChangedObserver) {
             this._globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
-        }
+        }*/
 
         if (this._onUpdateRequiredObserver) {
             this._globalState.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
@@ -412,9 +377,6 @@ export class GraphNode {
             this._visual.parentElement.removeChild(this._visual);
         }
 
-        if (this._onFrameCreatedObserver) {
-            this._globalState.onFrameCreatedObservable.remove(this._onFrameCreatedObserver);
-        }
 
         this.block.dispose();
     }

guiEditor/src/graphEditor.tsx

@@ -19,7 +19,6 @@ import { PreviewAreaComponent } from './components/preview/previewAreaComponent'
 import { SerializationTools } from './serializationTools';
 import { GraphCanvasComponent } from './diagram/graphCanvas';
 import { GraphNode } from './diagram/graphNode';
-import { GraphFrame } from './diagram/graphFrame';
 import * as ReactDOM from 'react-dom';
 import { IInspectorOptions } from "babylonjs/Debug/debugLayer";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
@@ -162,7 +161,6 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
             this.props.globalState.nodeMaterial.attachedBlocks.slice(-(frameData.blocks.length)).forEach((block: NodeMaterialBlock) => {
                 this.createNodeFromObject(block);
             });
-            this._graphCanvas.addFrame(frameData);
             this.reOrganize(this.props.globalState.nodeMaterial.editorData, true);
         })
 
@@ -198,29 +196,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                     this._graphCanvas.selectedLink.dispose();
                 }
 
-                if (this._graphCanvas.selectedFrame) {
-                    var frame = this._graphCanvas.selectedFrame;
-                    
-                    if(frame.isCollapsed) {
-                        while(frame.nodes.length > 0) {
-                            let targetBlock = frame.nodes[0].block;
-                            this.props.globalState.nodeMaterial!.removeBlock(targetBlock);
-                            let blockIndex = this._blocks.indexOf(targetBlock);
-        
-                            if (blockIndex > -1) {
-                                this._blocks.splice(blockIndex, 1);
-                            }
-                            frame.nodes[0].dispose();            
-                        }
-                        frame.isCollapsed = false;
-                    }
-                    else {
-                        frame.nodes.forEach(node => {
-                            node.enclosingFrameId = -1;
-                        });
-                    }
-                    this._graphCanvas.selectedFrame.dispose();
-                }
+                
 
                 this.props.globalState.onSelectionChangedObservable.notifyObservers(null);  
                 this.props.globalState.onRebuildRequiredObservable.notifyObservers();