Remove the custom events to fire component refreshes

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -4,6 +4,8 @@ import { GlobalState } from '../../globalState';
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
 import { DraggableLineComponent } from '../../sharedComponents/draggableLineComponent';
 import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
+import { Observer } from 'babylonjs/Misc/observable';
+import { Nullable } from 'babylonjs/types';
 
 require("./nodeList.scss");
 
@@ -13,6 +15,8 @@ interface INodeListComponentProps {
 
 export class NodeListComponent extends React.Component<INodeListComponentProps, {filter: string}> {
 
+    private _onResetRequiredObserver: Nullable<Observer<void>>;
+
     private static _Tooltips: {[key: string]: string} = {
         "BonesBlock": "Provides a world matrix for each vertex, based on skeletal (bone/joint) animation",
         "MorphTargetsBlock": "Provides the final positions, normals, tangents, and uvs based on morph targets in a mesh",
@@ -135,23 +139,18 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         super(props);
 
         this.state = { filter: "" };
-    }
-
-    filterContent(filter: string) {
-        this.setState({ filter: filter });
-    }
 
-    eventNMERefresh() {
-        this.forceUpdate();
+        this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable.add(() => {
+            this.forceUpdate();
+        });
     }
 
-    componentDidMount() {
-        this.eventNMERefresh = this.eventNMERefresh.bind(this);
-        window.addEventListener("nme_refresh", this.eventNMERefresh);
+    componentWillUnmount() {
+        this.props.globalState.onResetRequiredObservable.remove(this._onResetRequiredObserver);
     }
 
-    componentWillUnmount() {
-        window.removeEventListener('nme_refresh', this.eventNMERefresh);
+    filterContent(filter: string) {
+        this.setState({ filter: filter });
     }
 
     render() {

nodeEditor/src/components/preview/previewAreaComponent.tsx

@@ -19,22 +19,22 @@ interface IPreviewAreaComponentProps {
 
 export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentProps, {isLoading: boolean}> {
     private _onIsLoadingChangedObserver: Nullable<Observer<boolean>>;
+    private _onResetRequiredObserver: Nullable<Observer<void>>;
 
     constructor(props: IPreviewAreaComponentProps) {
         super(props);
         this.state = {isLoading: true};
 
         this._onIsLoadingChangedObserver = this.props.globalState.onIsLoadingChanged.add((state) => this.setState({isLoading: state}));
-    }
 
-    componentDidMount() {
-        this.eventNMERefresh = this.eventNMERefresh.bind(this);
-        window.addEventListener("nme_refresh", this.eventNMERefresh);
+        this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable.add(() => {
+            this.forceUpdate();
+        });
     }
 
     componentWillUnmount() {
-        window.removeEventListener('nme_refresh', this.eventNMERefresh);
         this.props.globalState.onIsLoadingChanged.remove(this._onIsLoadingChangedObserver);
+        this.props.globalState.onResetRequiredObservable.remove(this._onResetRequiredObserver);
     }
 
     changeBackFaceCulling(value: boolean) {
@@ -51,10 +51,6 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
         this.forceUpdate();
     }
 
-    eventNMERefresh() {
-        this.forceUpdate();
-    }
-
     render() {
         return (
             <>

nodeEditor/src/components/preview/previewMeshControlComponent.tsx

@@ -5,6 +5,8 @@ import { Color3, Color4 } from 'babylonjs/Maths/math.color';
 import { PreviewMeshType } from './previewMeshType';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
+import { Observer } from 'babylonjs/Misc/observable';
+import { Nullable } from 'babylonjs/types';
 import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
 
 const popUpIcon: string = require("./svgs/popOut.svg");
@@ -20,11 +22,20 @@ interface IPreviewMeshControlComponent {
 export class PreviewMeshControlComponent extends React.Component<IPreviewMeshControlComponent> {
     private colorInputRef: React.RefObject<HTMLInputElement>;
     private filePickerRef: React.RefObject<HTMLInputElement>;
+    private _onResetRequiredObserver: Nullable<Observer<void>>;
 
     constructor(props: IPreviewMeshControlComponent) {
         super(props);
         this.colorInputRef = React.createRef();
         this.filePickerRef = React.createRef();
+
+        this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable.add(() => {
+            this.forceUpdate();
+        });
+    }
+
+    componentWillUnmount() {
+        this.props.globalState.onResetRequiredObservable.remove(this._onResetRequiredObserver);
     }
 
     changeMeshType(newOne: PreviewMeshType) {
@@ -82,19 +93,6 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
         this.colorInputRef.current?.click();
     }
 
-    eventNMERefresh() {
-        this.forceUpdate();
-    }
-
-    componentDidMount() {
-        this.eventNMERefresh = this.eventNMERefresh.bind(this);
-        window.addEventListener("nme_refresh", this.eventNMERefresh);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('nme_refresh', this.eventNMERefresh);
-    }
-
     render() {
 
         var meshTypeOptions = [

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -268,16 +268,14 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
             switch (value) {
                 case NodeMaterialModes.Material:
                     this.props.globalState.nodeMaterial!.setToDefault();
-                    this.props.globalState.onResetRequiredObservable.notifyObservers();
                     break;
                 case NodeMaterialModes.PostProcess:
                     this.props.globalState.nodeMaterial!.setToDefaultPostProcess();
-                    this.props.globalState.onResetRequiredObservable.notifyObservers();
                     break;
             }
         }
 
-        window.dispatchEvent(new CustomEvent('nme_refresh'));
+        this.props.globalState.onResetRequiredObservable.notifyObservers();
     }
 
     render() {