fixes for getting NME to update

inspector/src/components/actionTabs/tabs/gradientNodePropertyComponent.tsx

@@ -15,9 +15,8 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
     }
 
     forceRebuild() {
-        //this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-        //this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-
+        let gradientBlock = this.props.block as GradientBlock;
+        gradientBlock.colorStepsUpdated();
         this.forceUpdate();
     }
 
@@ -35,12 +34,9 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
 
     addNewStep() {
         let gradientBlock = this.props.block as GradientBlock;
-
-        let newStep = new GradientBlockColorStep(1.0, Color3.White());
+        let newStep = new GradientBlockColorStep(gradientBlock, 1.0, Color3.White());
         gradientBlock.colorSteps.push(newStep);
-
         this.forceRebuild();
-        this.forceUpdate();
     }
 
     checkForReOrder() {
@@ -57,7 +53,6 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
             return -1;
         });
 
-        //this.props.globalState.onUpdateRequiredObservable.notifyObservers();
         this.forceUpdate();
     }
 

inspector/src/components/actionTabs/tabs/propertyGrids/materials/nodeMaterialPropertyGridComponent.tsx

@@ -182,7 +182,7 @@ export class NodeMaterialPropertyGridComponent extends React.Component<INodeMate
                             }
                             </LineContainerComponent>
                         )
-                    })   
+                    })
                 }
           </>
         );

nodeEditor/src/diagram/properties/gradientNodePropertyComponent.tsx

@@ -8,11 +8,31 @@ import { Color3 } from 'babylonjs/Maths/math.color';
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
+import { Nullable } from 'babylonjs/types';
+import { Observer } from 'babylonjs/Misc/observable';
 
 export class GradientPropertyTabComponent extends React.Component<IPropertyComponentProps> {
 
+    private onValueChangedObserver: Nullable<Observer<GradientBlock>>;
+
     constructor(props: IPropertyComponentProps) {
-        super(props)
+        super(props);
+    }
+
+    componentDidMount() {
+        let gradientBlock = this.props.block as GradientBlock;
+        this.onValueChangedObserver = gradientBlock.onValueChangedObservable.add(() => {
+            this.forceUpdate();
+            this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+        });
+    }
+
+    componentWillUnmount() {
+        let gradientBlock = this.props.block as GradientBlock;
+        if (this.onValueChangedObserver) {
+            gradientBlock.onValueChangedObservable.remove(this.onValueChangedObserver);
+            this.onValueChangedObserver = null;
+        }
     }
 
     forceRebuild() {
@@ -27,6 +47,7 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
 
         if (index > -1) {
             gradientBlock.colorSteps.splice(index, 1);
+            gradientBlock.colorStepsUpdated();
             this.forceRebuild();
             this.forceUpdate();
         }
@@ -35,8 +56,9 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
     addNewStep() {
         let gradientBlock = this.props.block as GradientBlock;
 
-        let newStep = new GradientBlockColorStep(1.0, Color3.White());
+        let newStep = new GradientBlockColorStep(gradientBlock, 1.0, Color3.White());
         gradientBlock.colorSteps.push(newStep);
+        gradientBlock.colorStepsUpdated();
 
         this.forceRebuild();
         this.forceUpdate();
@@ -55,6 +77,7 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
 
             return -1;
         });
+        gradientBlock.colorStepsUpdated();
 
         this.props.globalState.onUpdateRequiredObservable.notifyObservers();
         this.forceUpdate();
@@ -62,7 +85,7 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
 
     render() {
         let gradientBlock = this.props.block as GradientBlock;
-      
+
         var typeOptions = [
             { label: "None", value: 0 },
             { label: "Visible in the inspector", value: 1 },
@@ -72,7 +95,7 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
             <div>
                 <GeneralPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
-                <OptionsLineComponent label="Type" options={typeOptions} target={this.props.block} 
+                <OptionsLineComponent label="Type" options={typeOptions} target={this.props.block}
                             noDirectUpdate={true}
                             getSelection={(block) => {
                                 if (block.visibleInInspector) {
@@ -97,18 +120,18 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
                                 this.forceUpdate();
                                 this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                                 this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-                            }} />                        
+                            }} />
                 </LineContainerComponent>
                 <LineContainerComponent title="STEPS">
                     <ButtonLineComponent label="Add new step" onClick={() => this.addNewStep()} />
                     {
                         gradientBlock.colorSteps.map((c, i) => {
                             return (
-                                <GradientStepComponent globalState={this.props.globalState} 
+                                <GradientStepComponent globalState={this.props.globalState}
                                 onCheckForReOrder={() => this.checkForReOrder()}
                                 onUpdateStep={() => this.forceRebuild()}
                                 key={"step-" + i} lineIndex={i} step={c} onDelete={() => this.deleteStep(c)}/>
-                            )
+                            );
                         })
                     }
                 </LineContainerComponent>

src/Materials/Node/Blocks/Input/inputBlock.ts

@@ -696,7 +696,6 @@ export class InputBlock extends NodeMaterialBlock {
         serializationObject.mode = this._mode;
         serializationObject.systemValue = this._systemValue;
         serializationObject.animationType = this._animationType;
-        serializationObject.visibleInInspector = this.visibleInInspector;
         serializationObject.min = this.min;
         serializationObject.max = this.max;
         serializationObject.isBoolean = this.isBoolean;
@@ -725,7 +724,6 @@ export class InputBlock extends NodeMaterialBlock {
 
         this._systemValue = serializationObject.systemValue || serializationObject.wellKnownValue;
         this._animationType = serializationObject.animationType;
-        this.visibleInInspector = serializationObject.visibleInInspector;
         this.min = serializationObject.min || 0;
         this.max = serializationObject.max || 0;
         this.isBoolean = !!serializationObject.isBoolean;

src/Materials/Node/Blocks/gradientBlock.ts

@@ -6,25 +6,49 @@ import { NodeMaterialBlockTargets } from '../Enums/nodeMaterialBlockTargets';
 import { _TypeStore } from '../../../Misc/typeStore';
 import { Color3 } from '../../../Maths/math.color';
 import { Scene } from '../../../scene';
+import { Observable } from '../../../Misc/observable';
 
 /**
  * Class used to store a color step for the GradientBlock
  */
 export class GradientBlockColorStep {
+    private _parent: GradientBlock;
+
+    private _step: number;
+    /**
+     * Gets or sets a value indicating which step this color is associated with (between 0 and 1)
+     */
+    public get step(): number {
+        return this._step;
+    }
+
+    public set step(val: number) {
+        this._step = val;
+        this._parent.onValueChangedObservable?.notifyObservers(this._parent);
+    }
+
+    private _color: Color3;
+    /**
+     * Gets or sets the color associated with this step
+     */
+    public get color(): Color3 {
+        return this._color;
+    }
+
+    public set color(val: Color3) {
+        this._color = val;
+        this._parent.onValueChangedObservable?.notifyObservers(this._parent);
+    }
+
     /**
      * Creates a new GradientBlockColorStep
      * @param step defines a value indicating which step this color is associated with (between 0 and 1)
      * @param color defines the color associated with this step
      */
-    public constructor(
-        /**
-         * Gets or sets a value indicating which step this color is associated with (between 0 and 1)
-         */
-        public step: number,
-        /**
-         * Gets or sets the color associated with this step
-         */
-        public color: Color3) {
+    public constructor(parent: GradientBlock, step: number, color: Color3) {
+        this._parent = parent;
+        this.step = step;
+        this.color = color;
     }
 }
 
@@ -37,10 +61,16 @@ export class GradientBlock extends NodeMaterialBlock {
      * Gets or sets the list of color steps
      */
     public colorSteps: GradientBlockColorStep[] = [
-        new GradientBlockColorStep(0, Color3.Black()),
-        new GradientBlockColorStep(1.0, Color3.White())
+        new GradientBlockColorStep(this, 0, Color3.Black()),
+        new GradientBlockColorStep(this, 1.0, Color3.White())
     ];
 
+    /** Gets an observable raised when the value is changed */
+    public onValueChangedObservable = new Observable<GradientBlock>();
+
+    public colorStepsUpdated() {
+        this.onValueChangedObservable.notifyObservers(this);
+    }
     /**
      * Creates a new GradientBlock
      * @param name defines the block name
@@ -121,7 +151,18 @@ export class GradientBlock extends NodeMaterialBlock {
     public serialize(): any {
         let serializationObject = super.serialize();
 
-        serializationObject.colorSteps = this.colorSteps;
+        serializationObject.colorSteps = [];
+
+        for (var step of this.colorSteps) {
+            serializationObject.colorSteps.push({
+                step: step.step,
+                color: {
+                    r: step.color.r,
+                    g: step.color.g,
+                    b: step.color.b
+                }
+            });
+        }
 
         return serializationObject;
     }
@@ -132,7 +173,7 @@ export class GradientBlock extends NodeMaterialBlock {
         this.colorSteps = [];
 
         for (var step of serializationObject.colorSteps) {
-            this.colorSteps.push(new GradientBlockColorStep(step.step, new Color3(step.color.r, step.color.g, step.color.b)));
+            this.colorSteps.push(new GradientBlockColorStep(this, step.step, new Color3(step.color.r, step.color.g, step.color.b)));
         }
     }
 

src/Materials/Node/nodeMaterialBlock.ts

@@ -706,6 +706,7 @@ export class NodeMaterialBlock {
         serializationObject.id = this.uniqueId;
         serializationObject.name = this.name;
         serializationObject.comments = this.comments;
+        serializationObject.visibleInInspector = this.visibleInInspector;
 
         serializationObject.inputs = [];
         serializationObject.outputs = [];
@@ -725,6 +726,7 @@ export class NodeMaterialBlock {
     public _deserialize(serializationObject: any, scene: Scene, rootUrl: string) {
         this.name = serializationObject.name;
         this.comments = serializationObject.comments;
+        this.visibleInInspector = !!serializationObject.visibleInInspector;
         this._deserializePortDisplayNamesAndExposedOnFrame(serializationObject);
     }