Merge pull request #9034 from BabylonJS/msDestiny14/nme

Bug Fixes For Exposed Frame Ports

nodeEditor/src/diagram/graphFrame.ts

@@ -90,9 +90,10 @@ export class GraphFrame {
         port.delegatedPort = localPort;
         this._controlledPorts.push(port);
 
-        if(!port.isExposed) {
-            port.isExposed = true;
+        port.exposedPortPosition = this._exposedInPorts.findIndex(nodePort => nodePort === port);
+        if(port.exposedPortPosition < 0) {
             this._exposedInPorts.push(port);
+            port.exposedPortPosition = this._exposedInPorts.length -1;
         }
     }
 
@@ -139,82 +140,110 @@ export class GraphFrame {
             node.isVisible = false;
         }
 
-        for (var port of this._exposedOutPorts) { // Output
+        for (var i = 0; i < this._exposedOutPorts.length; ) { // Output
+            var port = this._exposedOutPorts[i];
             if(port.node === null || port.node.enclosingFrameId != this.id) {
-                let index = this._exposedOutPorts.findIndex(nodePort => nodePort === port);
-                this._exposedOutPorts.splice(index,1);
-                port.isExposed = false;
+                if(this.removePortFromExposedWithNode(port, this._exposedOutPorts))
+                    continue;
             }
             else {
-                this.createOutputPorts(port, port.node);
+                if(!this.createOutputPorts(port, port.node) && this.removePortFromExposedWithNode(port, this._exposedOutPorts)) {
+                    continue;
+                }
             }
+            ++i;
         }
 
-        for (var port of this._exposedInPorts) { // Input
+        for (var i = 0; i < this._exposedInPorts.length; ) { // Input
+            var port = this._exposedInPorts[i];
             if(port.node === null || port.node.enclosingFrameId != this.id) {
-                let index = this._exposedInPorts.findIndex(nodePort => nodePort === port);
-                this._exposedInPorts.splice(index,1);
-                port.isExposed = false;
+                if(this.removePortFromExposedWithNode(port, this._exposedInPorts)) {
+                    continue;
+                }
             }
             else {
-                this.createInputPorts(port, port.node);
+                if(!this.createInputPorts(port, port.node) && this.removePortFromExposedWithNode(port, this._exposedInPorts)) {
+                    continue;
+                }
             }
+            ++i;
         }
 
         for (var node of this._nodes) {
-            for (var port of node.outputPorts) { // Output
-                if(!port.isExposed) {
+            for (let port of node.outputPorts) { // Output
+                port.exposedPortPosition = this._exposedOutPorts.findIndex(nodePort => nodePort === port);
+                if(port.exposedPortPosition < 0) {
                     if(this.createOutputPorts(port,node)) {
+                        port.node.enclosingFrameId = this.id;
                         this._exposedOutPorts.push(port);
-                        port.isExposed = true;
+                        port.exposedPortPosition = this._exposedOutPorts.length - 1;
                     }
                 }
             }
             for (var port of node.inputPorts) { // Input
-                if(!port.isExposed){
+                port.exposedPortPosition = this._exposedInPorts.findIndex(nodePort => nodePort === port);
+                if(port.exposedPortPosition < 0){
                     this.createInputPorts(port, node);
                 }
             }
         }
     }
 
-    private removePortFromExposed(nodeLink: NodeLink, exposedPorts: NodePort[])
+    private removePortFromExposedWithNode(port: NodePort,exposedPorts: NodePort[])
+    {
+        let index = exposedPorts.findIndex(nodePort => nodePort === port);
+        if(index >= 0) {
+            exposedPorts.splice(index,1)
+            port.exposedPortPosition = -1;
+            return true;
+        }
+        return false;
+    }
+
+    private removePortFromExposedWithLink(nodeLink: NodeLink, exposedPorts: NodePort[])
     {
         let aPort = exposedPorts.findIndex(nodePort => nodePort === nodeLink.portA);
         let bPort = exposedPorts.findIndex(nodePort => nodePort === nodeLink.portB);
         if(aPort >= 0) {
             exposedPorts.splice(aPort,1);
-            nodeLink.portA.isExposed = false;
+            nodeLink.portA.exposedPortPosition = -1;
         } else if(bPort >= 0) {
             exposedPorts.splice(bPort,1);
-            if(nodeLink.portB) nodeLink.portB.isExposed = false;
+            if(nodeLink.portB){ 
+                nodeLink.portB.exposedPortPosition = -1
+            }
         }
     }
     
     private createInputPorts(port: NodePort, node: GraphNode){
         if (port.connectionPoint.isConnected) {
+            let portAdded = false;
             for (var link of node.links) {
                 if (link.portB === port && this.nodes.indexOf(link.nodeA) === -1) {
                     this._createInputPort(port, node);
                     link.isVisible = true;
+                    portAdded = true;
                     const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink: NodeLink) => {
-                        this.removePortFromExposed(nodeLink, this._exposedInPorts);
+                        this.removePortFromExposedWithLink(nodeLink, this._exposedInPorts);
                         this._redrawFramePorts();
                     });
                     this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
                 }
             }
-        } else if(port.exposedOnFrame) {
+            if(portAdded) return true;
+        } 
+        else if(port.exposedOnFrame) {
             this._createInputPort(port, node);
+            return true;
         }
+        return false;
     }
 
     private createOutputPorts(port: NodePort, node: GraphNode){
         if (port.connectionPoint.hasEndpoints) {
             let portAdded = false;
-
             for (var link of node.links) {
-                if (link.portA === port && this.nodes.indexOf(link.nodeB!) === -1 || (link.portA === port && port.exposedOnFrame)) {
+                if (link.portA === port && this.nodes.indexOf(link.nodeB!) === -1) {
                     let localPort: FrameNodePort;
 
                     if (!portAdded) {
@@ -225,7 +254,7 @@ export class GraphFrame {
                         link.isVisible = true;
 
                         const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink: NodeLink) => {
-                            this.removePortFromExposed(nodeLink, this._exposedOutPorts);
+                            this.removePortFromExposedWithLink(nodeLink, this._exposedOutPorts);
                             this._redrawFramePorts();
                         });
 
@@ -237,20 +266,29 @@ export class GraphFrame {
                     } else {
                         localPort = this.ports.filter(p => p.connectionPoint === port.connectionPoint)[0];
                     }
-
                     port.delegatedPort = localPort;
                     this._controlledPorts.push(port);
-                    return true;
+                }
+                else if(port.exposedPortPosition >= 0 && !portAdded)
+                {
+                    let localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, node, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++, this.id);
+                    this._frameOutPorts.push(localPort);
+                    port.delegatedPort = localPort;
+                    this._controlledPorts.push(port);
+                    portAdded = true;
                 }
             }
-        } else if(port.exposedOnFrame) {
+            if(portAdded)  return true;
+        } 
+        else if(port.exposedOnFrame) {
             let localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, node, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++, this.id);
             this._frameOutPorts.push(localPort);
             port.delegatedPort = localPort;
             this._controlledPorts.push(port);
             return true;
         }
-        return false
+
+        return false;
     }
 
     private _redrawFramePorts() {
@@ -1427,28 +1465,19 @@ export class GraphFrame {
             newFrame.refresh();
         }
         
-        
         for (var node of newFrame.nodes) {
             for (var port of node.outputPorts) { // Output
                 if(port.exposedOnFrame) {
-                    port.isExposed = true;
-                    if(port.exposedPortPosition) { 
+                    if(port.exposedPortPosition !== -1) {
                         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);
+                    if(port.exposedPortPosition !== -1) {
+                         newFrame._exposedInPorts[port.exposedPortPosition] = port;
                     }
                 }
             }

nodeEditor/src/diagram/nodePort.ts

@@ -20,7 +20,6 @@ export class NodePort {
     protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
     protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
     protected _exposedOnFrame: boolean;
-    public isExposed = false;
     public delegatedPort: Nullable<FrameNodePort> = null;
 
     public get element(): HTMLDivElement {

src/Materials/Node/nodeMaterialBlockConnectionPoint.ts

@@ -470,8 +470,8 @@ export class NodeMaterialConnectionPoint {
             serializationObject.exposedPortPosition = this.exposedPortPosition;
         }
 
-        if (this.isExposedOnFrame) {
-            serializationObject.isExposedOnFrame = this.isExposedOnFrame;
+        if (this.isExposedOnFrame || this.exposedPortPosition >= 0) {
+            serializationObject.isExposedOnFrame = true;
             serializationObject.exposedPortPosition = this.exposedPortPosition;
         }