Merge pull request #9002 from BabylonJS/msDestiny14/nme

Custom Frame Port Order Preserved When Exporting

nodeEditor/src/diagram/graphFrame.ts

@@ -1370,7 +1370,18 @@ export class GraphFrame {
         this.onExpandStateChanged.clear();
     }
 
+    private serializePortData(exposedPorts: NodePort[])
+    {
+        if(exposedPorts.length > 0) {
+            for(let i = 0; i < exposedPorts.length; ++i) {
+                exposedPorts[i].exposedPortPosition = i;
+            }
+        }
+    }
+
     public serialize(): IFrameData {
+        this.serializePortData(this._exposedInPorts);
+        this.serializePortData(this._exposedOutPorts);
         return {
             x: this._x,
             y: this._y,
@@ -1406,7 +1417,7 @@ export class GraphFrame {
             for (var blockId of serializationData.blocks) {
                 let actualId = map[blockId];
                 let node = canvas.nodes.filter(n => n.block.uniqueId === actualId);
-
+                
                 if (node.length) {
                     newFrame.nodes.push(node[0]);
                     node[0].enclosingFrameId = newFrame.id;
@@ -1415,9 +1426,35 @@ export class GraphFrame {
         } else {
             newFrame.refresh();
         }
+        
+        
+        for (var node of newFrame.nodes) {
+            for (var port of node.outputPorts) { // Output
+                if(port.exposedOnFrame) {
+                    port.isExposed = true;
+                    if(port.exposedPortPosition) { 
+                        newFrame._exposedOutPorts[port.exposedPortPosition] = port;
+                    }
+                    else {
+                        newFrame._exposedOutPorts.push(port);
+                    }
+                }
+            }
+
+            for (var port of node.inputPorts) { // Inports
+                if(port.exposedOnFrame) {
+                    port.isExposed = true;
+                    if(port.exposedPortPosition) { 
+                        newFrame._exposedInPorts[port.exposedPortPosition] = port;
+                    }
+                    else {
+                        newFrame._exposedInPorts.push(port);
+                    }
+                }
+            }
+        }
 
         newFrame.isCollapsed = isCollapsed;
-
         if (isCollapsed) {
             canvas._frameIsMoving = true;
             newFrame._moveFrame(-(newFrame.width - newFrame.CollapsedWidth) / 2, 0);

nodeEditor/src/diagram/nodePort.ts

@@ -79,6 +79,14 @@ export class NodePort {
         this.connectionPoint.isExposedOnFrame = value;
     }
     
+    public get exposedPortPosition()
+    {
+        return this.connectionPoint.exposedPortPosition;
+    }
+
+    public set exposedPortPosition(value: number) {
+        this.connectionPoint.exposedPortPosition = value;
+    }
     
     private _isConnectedToNodeOutsideOfFrame() {
         const link = this.node.getLinksForConnectionPoint(this.connectionPoint)

src/Materials/Node/nodeMaterialBlock.ts

@@ -741,6 +741,7 @@ export class NodeMaterialBlock {
                 }
                 if (port.isExposedOnFrame) {
                     this.inputs[i].isExposedOnFrame = port.isExposedOnFrame;
+                    this.inputs[i].exposedPortPosition = port.exposedPortPosition;
                 }
             });
         }
@@ -751,6 +752,7 @@ export class NodeMaterialBlock {
                 }
                 if (port.isExposedOnFrame) {
                     this.outputs[i].isExposedOnFrame = port.isExposedOnFrame;
+                    this.outputs[i].exposedPortPosition = port.exposedPortPosition;
                 }
             });
         }

src/Materials/Node/nodeMaterialBlockConnectionPoint.ts

@@ -152,6 +152,11 @@ export class NodeMaterialConnectionPoint {
     public isExposedOnFrame: boolean =  false;
 
     /**
+     * Gets or sets number indicating the position that the port is exposed to on a frame
+     */
+    public exposedPortPosition: number = -1;
+
+    /**
      * Gets or sets a string indicating that this uniform must be defined under a #ifdef
      */
     public define: string;
@@ -462,10 +467,12 @@ export class NodeMaterialConnectionPoint {
             serializationObject.targetBlockId = this.connectedPoint.ownerBlock.uniqueId;
             serializationObject.targetConnectionName = this.connectedPoint.name;
             serializationObject.isExposedOnFrame = true;
+            serializationObject.exposedPortPosition = this.exposedPortPosition;
         }
 
         if (this.isExposedOnFrame) {
             serializationObject.isExposedOnFrame = this.isExposedOnFrame;
+            serializationObject.exposedPortPosition = this.exposedPortPosition;
         }
 
         return serializationObject;