Fix #7665

nodeEditor/src/diagram/properties/inputNodePropertyComponent.tsx

@@ -20,12 +20,31 @@ import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
 import { Color4PropertyTabComponent } from '../../components/propertyTab/properties/color4PropertyTabComponent';
+import { Nullable } from 'babylonjs/types';
+import { Observer } from 'babylonjs/Misc/observable';
 
 export class InputPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+    
+    private onValueChangedObserver: Nullable<Observer<InputBlock>>;
+
     constructor(props: IPropertyComponentProps) {
         super(props)
     }
 
+    componentDidMount() {        
+        let inputBlock = this.props.block as InputBlock;
+        this.onValueChangedObserver = inputBlock.onValueChangedObservable.add(() => this.forceUpdate());
+    }
+
+    componentWillUnmount() {
+        
+        let inputBlock = this.props.block as InputBlock;
+        if (this.onValueChangedObserver) {
+            inputBlock.onValueChangedObservable.remove(this.onValueChangedObserver);
+            this.onValueChangedObserver = null;
+        }
+    }    
+
     renderValue(globalState: GlobalState) {
         let inputBlock = this.props.block as InputBlock;
         switch (inputBlock.type) {

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

@@ -12,6 +12,7 @@ import { NodeMaterialBlockTargets } from '../../Enums/nodeMaterialBlockTargets';
 import { _TypeStore } from '../../../../Misc/typeStore';
 import { Color3, Color4 } from '../../../../Maths/math';
 import { AnimatedInputBlockTypes } from './animatedInputBlockTypes';
+import { Observable } from '../../../../Misc/observable';
 
 /**
  * Block used to expose an input value
@@ -48,6 +49,9 @@ export class InputBlock extends NodeMaterialBlock {
     /** Gets or sets the group to use to display this block in the Inspector */
     public groupInInspector = "";
 
+    /** Gets an observable raised when the value is changed */
+    public onValueChangedObservable = new Observable<InputBlock>();
+
     /**
      * Gets or sets the connection point type (default is float)
      */
@@ -199,6 +203,8 @@ export class InputBlock extends NodeMaterialBlock {
 
         this._storedValue = value;
         this._mode = NodeMaterialBlockConnectionPointMode.Uniform;
+
+        this.onValueChangedObservable.notifyObservers(this);
     }
 
     /**
@@ -606,6 +612,12 @@ export class InputBlock extends NodeMaterialBlock {
         return "";
     }
 
+    public dispose() {
+        this.onValueChangedObservable.clear();
+
+        super.dispose();
+    }
+
     public serialize(): any {
         let serializationObject = super.serialize();