implement pr feedback

nodeEditor/src/diagram/graphCanvas.tsx

@@ -13,7 +13,7 @@ import { FragmentOutputBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/fr
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { GraphFrame } from './graphFrame';
-import { IEditorData } from '../nodeLocationInfo';
+import { IEditorData, IFrameData } from '../nodeLocationInfo';
 import { FrameNodePort } from './frameNodePort';
 
 require("./graphCanvas.scss");
@@ -841,7 +841,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         this.props.globalState.onRebuildRequiredObservable.notifyObservers();
     }
 
-    processEditorData(editorData: IEditorData, isImportingAFrame = false) {
+    processEditorData(editorData: IEditorData) {
         const frames = this._frames.splice(0);
         for (var frame of frames) {
             frame.dispose();
@@ -861,12 +861,10 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         }
     }
 
-    addFrame(editorData: IEditorData) {
-        if (editorData.frames) {
-            const frame = GraphFrame.Parse(editorData.frames[editorData.frames.length - 1], this, editorData.map);
+    addFrame(frameData: IFrameData) {
+            const frame = GraphFrame.Parse(frameData, this, this.props.globalState.nodeMaterial.editorData.map);
             this._frames.push(frame);
             this.globalState.onSelectionChangedObservable.notifyObservers(frame);
-        }
     }
  
     render() {

nodeEditor/src/graphEditor.tsx

@@ -159,14 +159,13 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         });
 
         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, "");
+            const frameData = source.editorData.frames[0];
+
+            // create new graph nodes for only blocks from frame (last blocks added)
+            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);
         })
 
@@ -480,9 +479,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                         }
                     }
                 }
-                if (isImportingAFrame) {
-                    this._graphCanvas.addFrame(editorData);
-                } else {
+                
+                if (!isImportingAFrame){
                     this._graphCanvas.processEditorData(editorData);
                 }
             }
@@ -495,47 +493,6 @@ 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,6 +52,7 @@ export class SerializationTools {
     public static AddFrameToMaterial(serializationObject: any, globalState: GlobalState, currentMaterial: NodeMaterial) {
         globalState.onIsLoadingChanged.notifyObservers(true);
         this.UpdateLocations(currentMaterial, globalState);
+        globalState.nodeMaterial!.loadFromSerialization(serializationObject, "", true);
         globalState.onImportFrameObservable.notifyObservers(serializationObject);
     }
 }

src/Materials/Node/nodeMaterial.ts

@@ -1607,8 +1607,10 @@ export class NodeMaterial extends PushMaterial {
      * @param source defines the JSON representation of the material
      * @param rootUrl defines the root URL to use to load textures and relative dependencies
      */
-    public loadFromSerialization(source: any, rootUrl: string = "") {
-        this.clear();
+    public loadFromSerialization(source: any, rootUrl: string = "", isImportingAFrame = false) {
+        if (!isImportingAFrame) {
+            this.clear();
+        }
 
         let map: {[key: number]: NodeMaterialBlock} = {};
 
@@ -1625,21 +1627,22 @@ export class NodeMaterial extends PushMaterial {
         }
 
         // Connections
+        if (!isImportingAFrame) {
+            // Starts with input blocks only
+            for (var blockIndex = 0; blockIndex < source.blocks.length; blockIndex++) {
+                let parsedBlock = source.blocks[blockIndex];
+                let block = map[parsedBlock.id];
 
-        // Starts with input blocks only
-        for (var blockIndex = 0; blockIndex < source.blocks.length; blockIndex++) {
-            let parsedBlock = source.blocks[blockIndex];
-            let block = map[parsedBlock.id];
-
-            if (block.inputs.length) {
-                continue;
+                if (block.inputs.length) {
+                    continue;
+                }
+                this._restoreConnections(block, source, map);
             }
-            this._restoreConnections(block, source, map);
-        }
 
-        // Outputs
-        for (var outputNodeId of source.outputNodes) {
-            this.addOutputNode(map[outputNodeId]);
+            // Outputs
+            for (var outputNodeId of source.outputNodes) {
+                this.addOutputNode(map[outputNodeId]);
+            }
         }
 
         // UI related info
@@ -1674,7 +1677,9 @@ export class NodeMaterial extends PushMaterial {
             this.editorData.map = blockMap;
         }
 
-        this._mode = source.mode ?? NodeMaterialModes.Material;
+        if (!isImportingAFrame) {
+            this._mode = source.mode ?? NodeMaterialModes.Material;
+        }
     }
 
     /**