Merge pull request #8298 from belfortk/export-frames-v2

add support to export frames

dist/preview release/what's new.md

@@ -49,6 +49,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,17 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
         }, false);     
 
         // Store additional data to serialization object
-        this.props.globalState.storeEditorData = (editorData) => {
-            editorData.zoom = this.zoom;
-            editorData.x = this.x;
-            editorData.y = this.y;
-
+        this.props.globalState.storeEditorData = (editorData, graphFrame) => {
             editorData.frames = [];
-            for (var frame of this._frames) {
-                editorData.frames.push(frame.serialize());
+            if (graphFrame) {
+                editorData.frames.push(graphFrame!.serialize());
+            } else {
+                editorData.x = this.x;
+                editorData.y = this.y;
+                editorData.zoom = this.zoom;
+                for (var frame of this._frames) {
+                    editorData.frames.push(frame.serialize());
+                }
             }
         }
     }

nodeEditor/src/diagram/graphFrame.ts

@@ -1302,7 +1302,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);
         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, frame?: Nullable<GraphFrame>) => void;
     _mode: NodeMaterialModes;
 
     /** Gets the mode */

nodeEditor/src/serializationTools.ts

@@ -3,16 +3,20 @@ import { GlobalState } from './globalState';
 import { Texture } from 'babylonjs/Materials/Textures/texture';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
+import { Nullable } from 'babylonjs/types';
+import { GraphFrame } from './diagram/graphFrame';
 
 export class SerializationTools {
 
-    public static UpdateLocations(material: NodeMaterial, globalState: GlobalState) {
+    public static UpdateLocations(material: NodeMaterial, globalState: GlobalState, frame?: Nullable<GraphFrame>) {
         material.editorData = {
             locations: []
         };
 
         // Store node locations
-        for (var block of material.attachedBlocks) {
+        const blocks: NodeMaterialBlock[] = frame ? frame.nodes.map(n => n.block) : material.attachedBlocks;
+
+        for (var block of blocks) {
             let node = globalState.onGetNodeFromBlock(block);
 
             material.editorData.locations.push({
@@ -22,14 +26,16 @@ export class SerializationTools {
             });
         }
 
-        globalState.storeEditorData(material.editorData);
+        globalState.storeEditorData(material.editorData, frame);
     }
 
-    public static Serialize(material: NodeMaterial, globalState: GlobalState, selectedBlocks?: NodeMaterialBlock[]) {
+    public static Serialize(material: NodeMaterial, globalState: GlobalState, frame?: Nullable<GraphFrame>) {
         let bufferSerializationState = Texture.SerializeBuffers;
         Texture.SerializeBuffers = DataStorage.ReadBoolean("EmbedTextures", true);
 
-        this.UpdateLocations(material, globalState);
+        this.UpdateLocations(material, globalState, frame);
+
+        const selectedBlocks = frame ? frame.nodes.map(n => n.block) : undefined;
 
         let serializationObject = material.serialize(selectedBlocks);