fixes to update UI state when frames and ports are connected

nodeEditor/src/diagram/graphFrame.ts

@@ -134,7 +134,7 @@ export class GraphFrame {
                     let portAdded = false;
 
                     for (var link of node.links) {
-                        if (link.portA === port && this.nodes.indexOf(link.nodeB!) === -1) {
+                        if (link.portA === port && this.nodes.indexOf(link.nodeB!) === -1 || (link.portA === port && port.exposedOnFrame)) {
                             let localPort: FrameNodePort;
 
                             if (!portAdded) {
@@ -150,6 +150,9 @@ export class GraphFrame {
 
                                 this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver); 
 
+                            } else if (this.nodes.indexOf(link.nodeB!) === -1) {
+                                link.isVisible = true;
+                                localPort = this.ports.filter(p => p.connectionPoint === port.connectionPoint)[0];
                             } else {
                                 localPort = this.ports.filter(p => p.connectionPoint === port.connectionPoint)[0];
                             }
@@ -191,12 +194,9 @@ export class GraphFrame {
         if(!this.isCollapsed) {
             return;
         }
-        this.ports.forEach((framePort:FrameNodePort) => {
-            framePort.dispose()
-        });
-
-        this._createFramePorts();
-        this.ports.forEach((framePort: FrameNodePort) => framePort.node._refreshLinks());
+        this.isCollapsed = !this.isCollapsed
+        this.isCollapsed = !this.isCollapsed
+        this._moveFrame(25, 0);
     }
 
     public set isCollapsed(value: boolean) {

nodeEditor/src/diagram/nodePort.ts

@@ -46,28 +46,52 @@ export class NodePort {
         }
     }
 
+    public get disabled() {
+        if (!this.connectionPoint.isConnected) {
+            return false;
+        } else if (this._isConnectedToNodeOutsideOfFrame()) { //connected to outside node
+            return true;
+        } else {
+            const link = this.node.getLinksForConnectionPoint(this.connectionPoint)
+            if (link.length){
+                if (link[0].nodeB === this.node) { // check if this node is the receiving
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
     public hasLabel(){
         return !!this._portLabelElement;
     }
 
     public get exposedOnFrame() {
-        return (this.connectionPoint.isConnected || !!this._exposedOnFrame) && !this._isConnectedToNodeInsideSameFrame() ;
+        if(!!this._exposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
+            return true
+        } return false;
     }
 
-    private _isConnectedToNodeInsideSameFrame(){
+    public set exposedOnFrame(value: boolean) {
+        if(this.disabled){
+            return;
+        }
+        this._exposedOnFrame = value;
+    }
+    
+    
+    private _isConnectedToNodeOutsideOfFrame() {
         const link = this.node.getLinksForConnectionPoint(this.connectionPoint)
         if (link.length){
-            if (link[0].nodeA.enclosingFrameId == link[0].nodeB!.enclosingFrameId) {
-                return true;
+            for(let i = 0; i < link.length; i++){
+                if (link[i].nodeA.enclosingFrameId !== link[i].nodeB!.enclosingFrameId) {
+                    return true;
+                }
             }
         }
         return false;
     }
 
-    public set exposedOnFrame(value: boolean) {
-        this._exposedOnFrame = value;
-    }
-
     public refresh() {
         this._element.style.background = BlockTools.GetColorFromConnectionNodeType(this.connectionPoint.type);
         switch (this.connectionPoint.type) {
@@ -95,7 +119,7 @@ export class NodePort {
         }
     }
 
-    public constructor(private portContainer: HTMLElement, public connectionPoint: NodeMaterialConnectionPoint, public node: GraphNode, globalState: GlobalState) {
+    public constructor(portContainer: HTMLElement, public connectionPoint: NodeMaterialConnectionPoint, public node: GraphNode, globalState: GlobalState) {
         this._element = portContainer.ownerDocument!.createElement("div");
         this._element.classList.add("port");
         portContainer.appendChild(this._element);
@@ -143,8 +167,6 @@ export class NodePort {
         if (this._onSelectionChangedObserver) {
             this._globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
         }
-
-        this.portContainer.remove();
     }
 
     public static CreatePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, 

nodeEditor/src/diagram/properties/nodePortPropertyComponent.tsx

@@ -45,7 +45,7 @@ export class NodePortPropertyTabComponent extends React.Component<IFrameNodePort
                 <div>
                     <LineContainerComponent title="GENERAL">
                         {this.props.nodePort.hasLabel() && <TextInputLineComponent globalState={this.props.globalState} label="Port Label" propertyName="portName" target={this.props.nodePort} />}
-                        {this.props.nodePort.node.enclosingFrameId !== undefined && <CheckBoxLineComponent label= "Expose Port on Frame" target={this.props.nodePort} isSelected={() => this.props.nodePort.exposedOnFrame} onSelect={(value: boolean) => this.toggleExposeOnFrame(value)}  propertyName="exposedOnFrame" disabled={this.props.nodePort.connectionPoint.isConnected} />}
+                        {this.props.nodePort.node.enclosingFrameId !== undefined && <CheckBoxLineComponent label= "Expose Port on Frame" target={this.props.nodePort} isSelected={() => this.props.nodePort.exposedOnFrame} onSelect={(value: boolean) => this.toggleExposeOnFrame(value)}  propertyName="exposedOnFrame" disabled={this.props.nodePort.disabled} />}
                     </LineContainerComponent>
                 </div>
             </div>

nodeEditor/src/sharedComponents/checkBoxLineComponent.tsx

@@ -13,7 +13,7 @@ export interface ICheckBoxLineComponentProps {
     disabled?: boolean;
 }
 
-export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean }> {
+export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean, isDisabled?: boolean }> {
     private static _UniqueIdSeed = 0;
     private _uniqueId: number;
     private _localChange = false;
@@ -27,9 +27,13 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
         } else {
             this.state = { isSelected: this.props.target[this.props.propertyName!] == true };
         }
+
+        if (this.props.disabled) {
+            this.state = { ...this.state, isDisabled: this.props.disabled };
+        }
     }
 
-    shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean }) {
+    shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean, isDisabled: boolean }) {
         var currentState: boolean;
 
         if (nextProps.isSelected) {
@@ -43,6 +47,11 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
             this._localChange = false;
             return true;
         }
+
+        if(nextProps.disabled !== !!nextState.isDisabled){
+            return true;
+        }
+        
         return nextProps.label !== this.props.label || nextProps.target !== this.props.target;
     }