add support to export frames

dist/preview release/what's new.md

@@ -48,6 +48,7 @@
 - Add the `FragCoord` and `ScreenSize` blocks ([Popov72](https://github.com/Popov72))
 - Particle systems: add the `ParticlePositionWorld` block ([Popov72](https://github.com/Popov72))
 - Add isExposedOnFrame property to connection points ([belfortk](https://github.com/belfortk))
+- Add support for exporting frames ([belfortk](https://github.com/belfortk))
 
 ### Inspector
 

nodeEditor/src/diagram/graphCanvas.tsx

@@ -233,14 +233,19 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         }, false);     
 
         // Store additional data to serialization object
-        this.props.globalState.storeEditorData = (editorData) => {
+        this.props.globalState.storeEditorData = (editorData, frameId) => {
             editorData.zoom = this.zoom;
             editorData.x = this.x;
             editorData.y = this.y;
 
             editorData.frames = [];
-            for (var frame of this._frames) {
-                editorData.frames.push(frame.serialize());
+            if (typeof(frameId) === "number") {
+                const frame = this._frames.find(frame =>  frame.id === frameId)
+                editorData.frames.push(frame!.serialize());
+            } else {
+                for (var frame of this._frames) {
+                    editorData.frames.push(frame.serialize());
+                }
             }
         }
     }

nodeEditor/src/diagram/graphFrame.ts

@@ -1288,6 +1288,7 @@ export class GraphFrame {
 
     public serialize(): IFrameData {
         return {
+            id: this._id,
             x: this._x,
             y: this._y,
             width: this._width,
@@ -1302,7 +1303,7 @@ export class GraphFrame {
 
     public export() {
         const state = this._ownerCanvas.globalState;
-        const json = SerializationTools.Serialize(state.nodeMaterial, state, this.nodes.map(n => n.block));
+        const json = SerializationTools.Serialize(state.nodeMaterial, state, this.nodes.map(n => n.block), this._id);
         StringTools.DownloadAsFile(state.hostDocument, json, this._name + ".json");
     }
 

nodeEditor/src/diagram/properties/framePropertyComponent.tsx

@@ -59,9 +59,9 @@ export class FramePropertyTabComponent extends React.Component<IFramePropertyTab
                                 this.props.frame!.isCollapsed = false;
                             }} />
                     }
-                    {/* <ButtonLineComponent label="Export" onClick={() => {
-                                this.state.currentFrame!.export();
-                            }} /> */}
+                    <ButtonLineComponent label="Export" onClick={() => {
+                                this.props.frame!.export();
+                            }} />
                 </LineContainerComponent>
             </div>
         </div>

nodeEditor/src/globalState.ts

@@ -56,7 +56,7 @@ export class GlobalState {
     directionalLight0: boolean;
     directionalLight1: boolean;
     controlCamera: boolean;
-    storeEditorData: (serializationObject: any) => void;
+    storeEditorData: (serializationObject: any, frameId?: number) => void;
     _mode: NodeMaterialModes;
 
     /** Gets the mode */

nodeEditor/src/nodeLocationInfo.ts

@@ -5,6 +5,7 @@ export interface INodeLocationInfo {
 }
 
 export interface IFrameData {
+    id: number;
     x: number;
     y: number;
     width: number;

nodeEditor/src/serializationTools.ts

@@ -6,13 +6,19 @@ import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 
 export class SerializationTools {
 
-    public static UpdateLocations(material: NodeMaterial, globalState: GlobalState) {
+    public static UpdateLocations(material: NodeMaterial, globalState: GlobalState, selectedBlocks?: NodeMaterialBlock[], frameId?: number) {
         material.editorData = {
             locations: []
         };
 
         // Store node locations
-        for (var block of material.attachedBlocks) {
+        let blocks: NodeMaterialBlock[];
+        if (selectedBlocks) {
+            blocks = selectedBlocks;
+        } else {
+            blocks = material.attachedBlocks;
+        }
+        for (var block of blocks) {
             let node = globalState.onGetNodeFromBlock(block);
 
             material.editorData.locations.push({
@@ -22,14 +28,14 @@ export class SerializationTools {
             });
         }
 
-        globalState.storeEditorData(material.editorData);
+        globalState.storeEditorData(material.editorData, frameId);
     }
 
-    public static Serialize(material: NodeMaterial, globalState: GlobalState, selectedBlocks?: NodeMaterialBlock[]) {
+    public static Serialize(material: NodeMaterial, globalState: GlobalState, selectedBlocks?: NodeMaterialBlock[], frameId?: number) {
         let bufferSerializationState = Texture.SerializeBuffers;
         Texture.SerializeBuffers = DataStorage.ReadBoolean("EmbedTextures", true);
 
-        this.UpdateLocations(material, globalState);
+        this.UpdateLocations(material, globalState, selectedBlocks, frameId);
 
         let serializationObject = material.serialize(selectedBlocks);