implement pr feedback

nodeEditor/src/diagram/graphCanvas.tsx

@@ -842,30 +842,30 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     }
 
     processEditorData(editorData: IEditorData, isImportingAFrame = false) {
-        if (!isImportingAFrame) {
-            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;
+        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) {
-            if (isImportingAFrame) {
-                const frame = GraphFrame.Parse(editorData.frames[editorData.frames.length - 1], this, editorData.map);
+            for (var frameData of editorData.frames) {
+                var frame = GraphFrame.Parse(frameData, this, editorData.map);
                 this._frames.push(frame);
-                this.globalState.onSelectionChangedObservable.notifyObservers(frame);
-            } else {
-                for (var frameData of editorData.frames) {
-                    var frame = GraphFrame.Parse(frameData, this, editorData.map);
-                    this._frames.push(frame);
-                }
-            }
+            }  
+        }
+    }
+
+    addFrame(editorData: IEditorData) {
+        if (editorData.frames) {
+            const frame = GraphFrame.Parse(editorData.frames[editorData.frames.length - 1], this, editorData.map);
+            this._frames.push(frame);
+            this.globalState.onSelectionChangedObservable.notifyObservers(frame);
         }
     }
  

nodeEditor/src/globalState.ts

@@ -40,7 +40,7 @@ export class GlobalState {
     onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();
     onFrameCreatedObservable = new Observable<GraphFrame>();
     onCandidatePortSelectedObservable = new Observable<Nullable<NodePort | FrameNodePort>>();
-    onImportFrameObservable = new Observable<void>();
+    onImportFrameObservable = new Observable<any>();
     onGraphNodeRemovalObservable = new Observable<GraphNode>();
     onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
     onGridSizeChanged = new Observable<void>();

nodeEditor/src/graphEditor.tsx

@@ -22,6 +22,7 @@ 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';
 
 
 require("./main.scss");
@@ -157,8 +158,15 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
             }
         });
 
-        this.props.globalState.onImportFrameObservable.add(() => {
-            this.loadGraph();
+        this.props.globalState.onImportFrameObservable.add((source: any) => {
+            let editorData = this.props.globalState.nodeMaterial.editorData;        
+    
+            if (editorData instanceof Array) {
+                editorData = {
+                    locations: editorData
+                }
+            }
+            this.addFrameFromSerialization(editorData, source, "");
             this.reOrganize(this.props.globalState.nodeMaterial.editorData, true);
         })
 
@@ -472,8 +480,11 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                         }
                     }
                 }
-
-                this._graphCanvas.processEditorData(editorData, isImportingAFrame);
+                if (isImportingAFrame) {
+                    this._graphCanvas.addFrame(editorData);
+                } else {
+                    this._graphCanvas.processEditorData(editorData);
+                }
             }
 
             this._graphCanvas._isLoading = false;
@@ -484,6 +495,47 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         });
     }
 
+    addFrameFromSerialization(editorData: IEditorData , source: any, rootUrl: string = "") {
+        let map: {[key: number]: NodeMaterialBlock} = {};
+
+        // Create blocks
+        for (var parsedBlock of source.blocks) {
+            let blockType = _TypeStore.GetClass(parsedBlock.customType);
+            if (blockType) {
+                let block: NodeMaterialBlock = new blockType();
+                block._deserialize(parsedBlock, this.props.globalState.nodeMaterial.getScene(), rootUrl);
+                map[parsedBlock.id] = block;
+
+                this.createNodeFromObject(block);
+            }
+        }
+
+        if (source.locations || source.editorData && source.editorData.locations) {
+            let locations: {
+                blockId: number;
+                x: number;
+                y: number;
+            }[] = source.locations || source.editorData.locations;
+
+            for (var location of locations) {
+                if (map[location.blockId]) {
+                    location.blockId = map[location.blockId].uniqueId;
+                }
+            }
+
+            editorData.locations = editorData.locations.concat(locations);
+            editorData.frames = editorData.frames ? editorData.frames.concat(source.editorData.frames) : source.editorData.frames;
+
+            let blockMap: number[] = [];
+
+            for (var key in map) {
+                blockMap[key] = map[key].uniqueId;
+            }
+
+            editorData.map = blockMap;
+        }
+    }
+
     onPointerDown(evt: React.PointerEvent<HTMLDivElement>) {
         this._startX = evt.clientX;
         this._moveInProgress = true;

nodeEditor/src/serializationTools.ts

@@ -52,7 +52,6 @@ export class SerializationTools {
     public static AddFrameToMaterial(serializationObject: any, globalState: GlobalState, currentMaterial: NodeMaterial) {
         globalState.onIsLoadingChanged.notifyObservers(true);
         this.UpdateLocations(currentMaterial, globalState);
-        globalState.nodeMaterial!.addFrameNodesFromeSerialization(serializationObject, "");
-        globalState.onImportFrameObservable.notifyObservers();
+        globalState.onImportFrameObservable.notifyObservers(serializationObject);
     }
 }

src/Materials/Node/nodeMaterial.ts

@@ -1678,53 +1678,6 @@ export class NodeMaterial extends PushMaterial {
     }
 
     /**
-     * Load new blocks and frame from a frame serialization object
-     * @param source defines the JSON representation of the frame
-     * @param rootUrl defines the root URL to use to load textures and relative dependencies
-     */
-    public addFrameNodesFromeSerialization(source: any, rootUrl: string = "") {
-        let map: {[key: number]: NodeMaterialBlock} = {};
-
-        // Create blocks
-        for (var parsedBlock of source.blocks) {
-            let blockType = _TypeStore.GetClass(parsedBlock.customType);
-            if (blockType) {
-                let block: NodeMaterialBlock = new blockType();
-                block._deserialize(parsedBlock, this.getScene(), rootUrl);
-                map[parsedBlock.id] = block;
-
-                this.attachedBlocks.push(block);
-            }
-        }
-
-        if (source.locations || source.editorData && source.editorData.locations) {
-            let locations: {
-                blockId: number;
-                x: number;
-                y: number;
-            }[] = source.locations || source.editorData.locations;
-
-            for (var location of locations) {
-                if (map[location.blockId]) {
-                    location.blockId = map[location.blockId].uniqueId;
-                }
-            }
-
-            this.editorData.locations = this.editorData.locations.concat(locations);
-            this.editorData.frames = this.editorData.frames.concat(source.editorData.frames);
-
-            let blockMap: number[] = [];
-
-            for (var key in map) {
-                blockMap[key] = map[key].uniqueId;
-            }
-
-            this.editorData.map = blockMap;
-
-        }
-    }
-
-    /**
      * Makes a duplicate of the current material.
      * @param name - name to use for the new material.
      */