export frame - step 1

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -107,6 +107,9 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                                         this.forceUpdate();
                                     }} />
                             }
+                            {/* <ButtonLineComponent label="Export" onClick={() => {
+                                        this.state.currentFrame!.export();
+                                    }} /> */}
                         </LineContainerComponent>
                     </div>
                 </div>
@@ -127,6 +130,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                 <div>
                     <LineContainerComponent title="GENERAL">
                         <TextLineComponent label="Version" value={Engine.Version}/>
+                        <TextLineComponent label="Help" value="doc.babylonjs.com" underline={true} onLink={() => window.open('https://doc.babylonjs.com/how_to/node_material', '_blank')}/>
                         <ButtonLineComponent label="Reset to default" onClick={() => {
                             this.props.globalState.nodeMaterial!.setToDefault();
                             this.props.globalState.onResetRequiredObservable.notifyObservers();

nodeEditor/src/diagram/graphFrame.ts

@@ -6,6 +6,8 @@ import { NodeLink } from './nodeLink';
 import { IFrameData } from '../nodeLocationInfo';
 import { Color3 } from 'babylonjs/Maths/math.color';
 import { NodePort } from './nodePort';
+import { SerializationTools } from '../serializationTools';
+import { StringTools } from '../stringTools';
 
 export class GraphFrame {
     private readonly CollapsedWidth = 200;
@@ -468,6 +470,12 @@ export class GraphFrame {
         }
     }
 
+    public export() {
+        const state = this._ownerCanvas.globalState;
+        const json = SerializationTools.Serialize(state.nodeMaterial, state, this.nodes.map(n => n.block));
+        StringTools.DownloadAsFile(state.hostDocument, json, this._name + ".json");
+    }
+
     public static Parse(serializationData: IFrameData, canvas: GraphCanvasComponent, map?: {[key: number]: number}) {
         let newFrame = new GraphFrame(null, canvas, true);
         const isCollapsed = !!serializationData.isCollapsed;

nodeEditor/src/serializationTools.ts

@@ -2,6 +2,7 @@ import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
 import { GlobalState } from './globalState';
 import { Texture } from 'babylonjs/Materials/Textures/texture';
 import { DataStorage } from './dataStorage';
+import { NodeMaterialBlock } from 'babylonjs';
 
 export class SerializationTools {
 
@@ -24,13 +25,13 @@ export class SerializationTools {
         globalState.storeEditorData(material.editorData);
     }
 
-    public static Serialize(material: NodeMaterial, globalState: GlobalState) {
+    public static Serialize(material: NodeMaterial, globalState: GlobalState, selectedBlocks?: NodeMaterialBlock[]) {
         let bufferSerializationState = Texture.SerializeBuffers;
         Texture.SerializeBuffers = DataStorage.ReadBoolean("EmbedTextures", true);
 
         this.UpdateLocations(material, globalState);
 
-        let serializationObject = material.serialize();
+        let serializationObject = material.serialize(selectedBlocks);
 
         Texture.SerializeBuffers = bufferSerializationState;
 

src/Materials/Node/nodeMaterial.ts

@@ -1130,26 +1130,30 @@ export class NodeMaterial extends PushMaterial {
      * Serializes this material in a JSON representation
      * @returns the serialized material object
      */
-    public serialize(): any {
-        var serializationObject = SerializationHelper.Serialize(this);
-        serializationObject.customType = "BABYLON.NodeMaterial";
-
-        serializationObject.outputNodes = [];
+    public serialize(selectedBlocks?:NodeMaterialBlock[]): any {
+        var serializationObject = selectedBlocks ? {} : SerializationHelper.Serialize(this);
         serializationObject.editorData = JSON.parse(JSON.stringify(this.editorData)); // Copy
 
         let blocks: NodeMaterialBlock[] = [];
 
-        // Outputs
-        for (var outputNode of this._vertexOutputNodes) {
-            this._gatherBlocks(outputNode, blocks);
-            serializationObject.outputNodes.push(outputNode.uniqueId);
-        }
+        if (selectedBlocks) {
+            blocks = selectedBlocks;
+        } else {
+            serializationObject.customType = "BABYLON.NodeMaterial";
+            serializationObject.outputNodes = [];
+    
+            // Outputs
+            for (var outputNode of this._vertexOutputNodes) {
+                this._gatherBlocks(outputNode, blocks);
+                serializationObject.outputNodes.push(outputNode.uniqueId);
+            }
 
-        for (var outputNode of this._fragmentOutputNodes) {
-            this._gatherBlocks(outputNode, blocks);
+            for (var outputNode of this._fragmentOutputNodes) {
+                this._gatherBlocks(outputNode, blocks);
 
-            if (serializationObject.outputNodes.indexOf(outputNode.uniqueId) === -1) {
-                serializationObject.outputNodes.push(outputNode.uniqueId);
+                if (serializationObject.outputNodes.indexOf(outputNode.uniqueId) === -1) {
+                    serializationObject.outputNodes.push(outputNode.uniqueId);
+                }
             }
         }
 
@@ -1160,11 +1164,13 @@ export class NodeMaterial extends PushMaterial {
             serializationObject.blocks.push(block.serialize());
         }
 
-        for (var block of this.attachedBlocks) {
-            if (blocks.indexOf(block) !== -1) {
-                continue;
+        if (!selectedBlocks) {
+            for (var block of this.attachedBlocks) {
+                if (blocks.indexOf(block) !== -1) {
+                    continue;
+                }
+                serializationObject.blocks.push(block.serialize());
             }
-            serializationObject.blocks.push(block.serialize());
         }
 
         return serializationObject;