Fix #7313

nodeEditor/src/diagram/graphCanvas.tsx

@@ -327,13 +327,28 @@ 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,
+                type: "node",
                 width: node.width,
                 height: node.height
             });
         });
 
+        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) {
@@ -341,7 +356,14 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 }
 
                 output.endpoints.forEach(endpoint => {
-                    graph.setEdge(node.id.toString(), endpoint.ownerBlock.uniqueId.toString());
+                    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());
                 });
             });
         });
@@ -352,11 +374,22 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         // Update graph
         let dagreNodes = graph.nodes().map(node => graph.node(node));
         dagreNodes.forEach(dagreNode => {
-            for (var node of this._nodes) {
-                if (node.id === dagreNode.id) {
-                    node.x = dagreNode.x - dagreNode.width / 2;
-                    node.y = dagreNode.y - dagreNode.height / 2;
-                    node.cleanAccumulation();
+            if (dagreNode.type === "node") {
+                for (var node of this._nodes) {
+                    if (node.id === dagreNode.id) {
+                        node.x = dagreNode.x - dagreNode.width / 2;
+                        node.y = dagreNode.y - dagreNode.height / 2;
+                        node.cleanAccumulation();
+                        return;
+                    }
+                }
+                return;
+            }
+
+            for (var frame of this._frames) {
+                if (frame.id === dagreNode.id) {
+                    frame.move(dagreNode.x - dagreNode.width / 2, dagreNode.y - dagreNode.height / 2, false);
+                    frame.cleanAccumulation();
                     return;
                 }
             }
@@ -700,7 +733,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         // Frames
         if (editorData.frames) {
             for (var frameData of editorData.frames) {
-                var frame = GraphFrame.Parse(frameData, this);
+                var frame = GraphFrame.Parse(frameData, this, editorData.map);
                 this._frames.push(frame);
             }
         }

nodeEditor/src/diagram/graphFrame.ts

@@ -8,6 +8,7 @@ import { Color3 } from 'babylonjs/Maths/math.color';
 import { NodePort } from './nodePort';
 
 export class GraphFrame {
+    private static _FrameCounter = 0;
     private _name: string;
     private _color: Color3;
     private _x = 0;
@@ -33,11 +34,16 @@ export class GraphFrame {
     private _isCollapsed = false;
     private _ports: NodePort[] = [];
     private _controlledPorts: NodePort[] = [];
+    private _id: number;
 
     private readonly CloseSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M16,15l5.85,5.84-1,1L15,15.93,9.15,21.78l-1-1L14,15,8.19,9.12l1-1L15,14l5.84-5.84,1,1Z"/></g></svg>`;
     private readonly ExpandSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-6.75,6.75H11.06V14.44h3.38V11.06h1.12v3.38h3.38v1.12H15.56v3.38H14.44Z"/></g></svg>`;
     private readonly CollapseSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-2.25,6.75H11.06V14.44h7.88Z"/></g></svg>`;
 
+    public get id() {
+        return this._id;
+    }
+
     public get isCollapsed() {
         return this._isCollapsed;
     }
@@ -174,9 +180,9 @@ export class GraphFrame {
     }
 
     public set x(value: number) {
-        // if (this._x === value) {
-        //     return;
-        // }
+        if (this._x === value) {
+            return;
+        }
         this._x = value;
         
         this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
@@ -188,9 +194,9 @@ export class GraphFrame {
     }
 
     public set y(value: number) {
-        // if (this._y === value) {
-        //     return;
-        // }
+        if (this._y === value) {
+            return;
+        }
 
         this._y = value;
 
@@ -229,6 +235,8 @@ export class GraphFrame {
     }
 
     public constructor(candidate: Nullable<HTMLDivElement>, canvas: GraphCanvasComponent, doNotCaptureNodes = false) {
+        this._id = GraphFrame._FrameCounter++;
+
         this._ownerCanvas = canvas;
         const root = canvas.frameContainer;
         this.element = root.ownerDocument!.createElement("div");        
@@ -377,18 +385,24 @@ export class GraphFrame {
 
         this._ownerCanvas._frameIsMoving = true;
 
+        this.move(this._ownerCanvas.getGridPosition(this.x), this._ownerCanvas.getGridPosition(this.y))
+    }    
+
+    public move(newX: number, newY: number, align = true) {
         let oldX = this.x;
         let oldY = this.y;
 
-        this.x = this._ownerCanvas.getGridPosition(this.x);
-        this.y = this._ownerCanvas.getGridPosition(this.y); 
+        this.x = newX;
+        this.y = newY; 
 
         for (var selectedNode of this._nodes) {
             selectedNode.x += this.x - oldX;
             selectedNode.y += this.y - oldY;
-            selectedNode.cleanAccumulation(true);
+            if (align) {
+                selectedNode.cleanAccumulation(true);
+            }
         }
-    }    
+    }
 
     private _onUp(evt: PointerEvent) {
         evt.stopPropagation();
@@ -448,11 +462,12 @@ export class GraphFrame {
             height: this._height,
             color: this._color.asArray(),
             name: this.name,
-            isCollapsed: this.isCollapsed
+            isCollapsed: this.isCollapsed,
+            blocks: this.nodes.map(n => n.block.uniqueId)
         }
     }
 
-    public static Parse(serializationData: IFrameData, canvas: GraphCanvasComponent) {
+    public static Parse(serializationData: IFrameData, canvas: GraphCanvasComponent, map?: {[key: number]: number}) {
         let newFrame = new GraphFrame(null, canvas, true);
 
         newFrame.x = serializationData.x;
@@ -462,7 +477,18 @@ export class GraphFrame {
         newFrame.name = serializationData.name;
         newFrame.color = Color3.FromArray(serializationData.color);
 
-        newFrame.refresh();
+        if (serializationData.blocks && map) {
+            for (var blockId of serializationData.blocks) {
+                let actualId = map[blockId];
+                let node = canvas.nodes.filter(n => n.block.uniqueId === actualId);
+
+                if (node.length) {
+                    newFrame.nodes.push(node[0]);
+                }
+            }
+        } else {
+            newFrame.refresh();
+        }
 
         newFrame.isCollapsed = !!serializationData.isCollapsed;
 

nodeEditor/src/diagram/graphNode.ts

@@ -85,9 +85,9 @@ export class GraphNode {
     }
 
     public set x(value: number) {
-        // if (this._x === value) {
-        //     return;
-        // }
+        if (this._x === value) {
+            return;
+        }
         this._x = value;
         
         this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
@@ -102,9 +102,9 @@ export class GraphNode {
     }
 
     public set y(value: number) {
-        // if (this._y === value) {
-        //     return;
-        // }
+        if (this._y === value) {
+            return;
+        }
 
         this._y = value;
 
@@ -183,7 +183,11 @@ export class GraphNode {
             this.isSelected = overlap;
         });
 
-        this._onFrameCreatedObserver = this._globalState.onFrameCreated.add(frame => {            
+        this._onFrameCreatedObserver = this._globalState.onFrameCreated.add(frame => {      
+            if (this._ownerCanvas.frames.some(f => f.nodes.indexOf(this) !== -1)) {
+                return;
+            }
+            
             if (this.isOverlappingFrame(frame)) {
                 frame.nodes.push(this);
             }

nodeEditor/src/nodeLocationInfo.ts

@@ -11,7 +11,8 @@ export interface IFrameData {
     height: number;
     color: number[];
     name: string,
-    isCollapsed: boolean
+    isCollapsed: boolean,
+    blocks: number[]
 }
 
 export interface IEditorData {
@@ -20,4 +21,5 @@ export interface IEditorData {
     y: number;
     zoom: number;
     frames?: IFrameData[];
+    map?: {[key: number]: number};
 }

src/Materials/Node/nodeMaterial.ts

@@ -1254,6 +1254,13 @@ export class NodeMaterial extends PushMaterial {
                 this.editorData.locations = locations;
             }
 
+            let blockMap: number[] = [];
+
+            for (var key in map) {
+                blockMap[key] = map[key].uniqueId;
+            }
+
+            this.editorData.map = blockMap;
         }
     }