Fix link between frame and UI (NME)

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -13,10 +13,9 @@ import { DataStorage } from '../../dataStorage';
 import { GraphNode } from '../../diagram/graphNode';
 import { SliderLineComponent } from '../../sharedComponents/sliderLineComponent';
 import { GraphFrame } from '../../diagram/graphFrame';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { Color3LineComponent } from '../../sharedComponents/color3LineComponent';
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { Engine } from 'babylonjs/Engines/engine';
+import { FramePropertyTabComponent } from '../../diagram/properties/framePropertyComponent';
 require("./propertyTab.scss");
 
 interface IPropertyTabComponentProps {
@@ -24,7 +23,6 @@ interface IPropertyTabComponentProps {
 }
 
 export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, { currentNode: Nullable<GraphNode>, currentFrame: Nullable<GraphFrame> }> {
-
     constructor(props: IPropertyTabComponentProps) {
         super(props)
 
@@ -82,41 +80,10 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
 
         if (this.state.currentFrame) {
             return (
-                <div id="propertyTab">
-                    <div id="header">
-                        <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
-                        <div id="title">
-                            NODE MATERIAL EDITOR
-                        </div>
-                    </div>
-                    <div>
-                        <LineContainerComponent title="GENERAL">
-                            <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.state.currentFrame} />
-                            <Color3LineComponent label="Color" target={this.state.currentFrame} propertyName="color"></Color3LineComponent>
-                            {
-                                !this.state.currentFrame.isCollapsed &&
-                                <ButtonLineComponent label="Collapse" onClick={() => {
-                                        this.state.currentFrame!.isCollapsed = true;
-                                        this.forceUpdate();
-                                    }} />
-                            }
-                            {
-                                this.state.currentFrame.isCollapsed &&
-                                <ButtonLineComponent label="Expand" onClick={() => {
-                                        this.state.currentFrame!.isCollapsed = false;
-                                        this.forceUpdate();
-                                    }} />
-                            }
-                            {/* <ButtonLineComponent label="Export" onClick={() => {
-                                        this.state.currentFrame!.export();
-                                    }} /> */}
-                        </LineContainerComponent>
-                    </div>
-                </div>
+                <FramePropertyTabComponent globalState={this.props.globalState} frame={this.state.currentFrame}/>
             );
         }
 
-
         let gridSize = DataStorage.ReadNumber("GridSize", 20);
 
         return (

nodeEditor/src/diagram/graphFrame.ts

@@ -1,7 +1,7 @@
 import { GraphNode } from './graphNode';
 import { GraphCanvasComponent } from './graphCanvas';
 import { Nullable } from 'babylonjs/types';
-import { Observer } from 'babylonjs/Misc/observable';
+import { Observer, Observable } from 'babylonjs/Misc/observable';
 import { NodeLink } from './nodeLink';
 import { IFrameData } from '../nodeLocationInfo';
 import { Color3 } from 'babylonjs/Maths/math.color';
@@ -39,6 +39,8 @@ export class GraphFrame {
     private _controlledPorts: NodePort[] = [];
     private _id: number;
 
+    public onExpandStateChanged = new Observable<GraphFrame>();
+
     private readonly CloseSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M16,15l5.85,5.84-1,1L15,15.93,9.15,21.78l-1-1L14,15,8.19,9.12l1-1L15,14l5.84-5.84,1,1Z"/></g></svg>`;
     private readonly ExpandSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-6.75,6.75H11.06V14.44h3.38V11.06h1.12v3.38h3.38v1.12H15.56v3.38H14.44Z"/></g></svg>`;
     private readonly CollapseSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-2.25,6.75H11.06V14.44h7.88Z"/></g></svg>`;
@@ -152,6 +154,8 @@ export class GraphFrame {
             this._headerCollapseElement.innerHTML = this.CollapseSVG;
             this._headerCollapseElement.title = "Collapse";   
         }
+
+        this.onExpandStateChanged.notifyObservers(this);
     }
 
     public get nodes() {
@@ -452,9 +456,10 @@ export class GraphFrame {
         }
 
         this.element.parentElement!.removeChild(this.element);
-
         
         this._ownerCanvas.frames.splice(this._ownerCanvas.frames.indexOf(this), 1);
+
+        this.onExpandStateChanged.clear();
     }
 
     public serialize(): IFrameData {

nodeEditor/src/diagram/properties/framePropertyComponent.tsx

@@ -0,0 +1,69 @@
+
+import * as React from "react";
+import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
+import { GraphFrame } from '../graphFrame';
+import { GlobalState } from '../../globalState';
+import { Color3LineComponent } from '../../sharedComponents/color3LineComponent';
+import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
+import { ButtonLineComponent } from '../../sharedComponents/buttonLineComponent';
+import { Nullable } from 'babylonjs/types';
+import { Observer } from 'babylonjs/Misc/observable';
+
+export interface IFramePropertyTabComponentProps {
+    globalState: GlobalState
+    frame: GraphFrame;
+}
+
+export class FramePropertyTabComponent extends React.Component<IFramePropertyTabComponentProps> {
+    private onFrameExpandStateChangedObserver: Nullable<Observer<GraphFrame>>;
+
+    constructor(props: IFramePropertyTabComponentProps) {
+        super(props)
+    }
+
+
+    componentDidMount() {
+        this.onFrameExpandStateChangedObserver = this.props.frame.onExpandStateChanged.add(() => this.forceUpdate());
+    }
+
+    componentWillUnmount() {
+        if (this.onFrameExpandStateChangedObserver) {
+            this.props.frame.onExpandStateChanged.remove(this.onFrameExpandStateChangedObserver);
+            this.onFrameExpandStateChangedObserver = null;
+        }
+    }    
+
+    render() {      
+        return (
+            <div id="propertyTab">
+            <div id="header">
+                <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
+                <div id="title">
+                    NODE MATERIAL EDITOR
+                </div>
+            </div>
+            <div>
+                <LineContainerComponent title="GENERAL">
+                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.frame} />
+                    <Color3LineComponent label="Color" target={this.props.frame} propertyName="color"></Color3LineComponent>
+                    {
+                        !this.props.frame.isCollapsed &&
+                        <ButtonLineComponent label="Collapse" onClick={() => {
+                                this.props.frame!.isCollapsed = true;
+                            }} />
+                    }
+                    {
+                        this.props.frame.isCollapsed &&
+                        <ButtonLineComponent label="Expand" onClick={() => {
+                                this.props.frame!.isCollapsed = false;
+                            }} />
+                    }
+                    {/* <ButtonLineComponent label="Export" onClick={() => {
+                                this.state.currentFrame!.export();
+                            }} /> */}
+                </LineContainerComponent>
+            </div>
+        </div>
+        );
+    }
+}