Allow debug node for NPE to refresh automatically (#16776)

Co-authored-by: David Catuhe <[email protected]>

Author: deltakosh

packages/dev/core/src/Particles/Node/Blocks/particleDebugBlock.ts

@@ -5,6 +5,7 @@ import { NodeParticleBlockConnectionPointTypes } from "../Enums/nodeParticleBloc
 import { NodeParticleBlock } from "../nodeParticleBlock";
 import type { NodeParticleConnectionPoint } from "../nodeParticleBlockConnectionPoint";
 import type { NodeParticleBuildState } from "../nodeParticleBuildState";
+import { Observable } from "core/Misc/observable";
 
 /**
  * Defines a block used to debug values going through it
@@ -65,6 +66,11 @@ export class ParticleDebugBlock extends NodeParticleBlock {
         return this._outputs[0];
     }
 
+    /**
+     * Observable raised when data is collected
+     */
+    public onDataCollectedObservable = new Observable<ParticleDebugBlock>(undefined, true);
+
     public override _build(state: NodeParticleBuildState) {
         if (!this.input.isConnected) {
             this.output._storedFunction = null;
@@ -100,6 +106,8 @@ export class ParticleDebugBlock extends NodeParticleBlock {
                     break;
             }
 
+            this.onDataCollectedObservable.notifyObservers(this);
+
             return input;
         };
 
@@ -123,6 +131,11 @@ export class ParticleDebugBlock extends NodeParticleBlock {
 
         this.stackSize = serializationObject.stackSize;
     }
+
+    public override dispose(): void {
+        this.onDataCollectedObservable.clear();
+        super.dispose();
+    }
 }
 
 RegisterClass("BABYLON.ParticleDebugBlock", ParticleDebugBlock);

packages/tools/nodeParticleEditor/src/graphSystem/properties/debugNodePropertyComponent.tsx

@@ -9,6 +9,7 @@ import type { ParticleDebugBlock } from "core/Particles/Node/Blocks/particleDebu
 
 export class DebugPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     private _onUpdateRequiredObserver: Nullable<Observer<any>>;
+    private _dataCollectedObserver: Nullable<Observer<ParticleDebugBlock>>;
 
     constructor(props: IPropertyComponentProps) {
         super(props);
@@ -21,12 +22,23 @@ export class DebugPropertyTabComponent extends React.Component<IPropertyComponen
     }
 
     override componentWillUnmount() {
-        this.props.stateManager.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
+        this._onUpdateRequiredObserver?.remove();
+        this._onUpdateRequiredObserver = null;
+        this._dataCollectedObserver?.remove();
+        this._dataCollectedObserver = null;
     }
 
     override render() {
         const debugBlock = this.props.nodeData.data as ParticleDebugBlock;
 
+        if (this._dataCollectedObserver) {
+            this._dataCollectedObserver.remove();
+        }
+
+        this._dataCollectedObserver = debugBlock.onDataCollectedObservable.add((data) => {
+            this.forceUpdate();
+        });
+
         return (
             <div>
                 <GeneralPropertyTabComponent stateManager={this.props.stateManager} nodeData={this.props.nodeData} />