Remove some buttons from the preview area when in PostProcess mode

nodeEditor/src/components/preview/previewAreaComponent.tsx

@@ -4,6 +4,7 @@ import { GlobalState } from '../../globalState';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { Observer } from 'babylonjs/Misc/observable';
 import { Nullable } from 'babylonjs/types';
+import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
 
 const doubleSided: string = require("./svgs/doubleSided.svg");
 const depthPass: string = require("./svgs/depthPass.svg");
@@ -44,6 +45,19 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
         this.forceUpdate();
     }
 
+    eventNMERefresh() {
+        this.forceUpdate();
+    }
+
+    componentDidMount() {
+        this.eventNMERefresh = this.eventNMERefresh.bind(this);
+        window.addEventListener("nme_refresh", this.eventNMERefresh);
+    }
+
+    componentDidUnmount() {
+        window.removeEventListener('nme_refresh', this.eventNMERefresh);
+    }
+
     render() {
         return (
             <>
@@ -55,49 +69,51 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
                         </div>
                     }
                 </div>
-                <div id="preview-config-bar">
-                    <div
-                        title="Render without back face culling"
-                        onClick={() => this.changeBackFaceCulling(!this.props.globalState.backFaceCulling)} className={"button back-face" + (!this.props.globalState.backFaceCulling ? " selected" : "")}>
-                        <img src={doubleSided} alt=""/>
-                    </div>
-                    <div
-                        title="Render with depth pre-pass"
-                        onClick={() => this.changeDepthPrePass(!this.props.globalState.depthPrePass)} className={"button depth-pass" + (this.props.globalState.depthPrePass ? " selected" : "")}>
-                            <img src={depthPass} alt=""/>
-                    </div>
-                    <div
-                        title="Turn on/off hemispheric light"
-                        onClick={() => {
-                            this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;
-                            DataStorage.WriteBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
-                            this.props.globalState.onLightUpdated.notifyObservers();
-                            this.forceUpdate();
-                        }} className={"button hemispheric-light" + (this.props.globalState.hemisphericLight ? " selected" : "")}>
-                        <img src={omni} alt=""/>
-                    </div>
-                    <div
-                        title="Turn on/off direction light #1"
-                        onClick={() => {
-                            this.props.globalState.directionalLight1 = !this.props.globalState.directionalLight1;
-                            DataStorage.WriteBoolean("DirectionalLight1", this.props.globalState.directionalLight1);
-                            this.props.globalState.onLightUpdated.notifyObservers();
-                            this.forceUpdate();
-                        }} className={"button direction-light-1" + (this.props.globalState.directionalLight1 ? " selected" : "")}>
-                        <img src={directionalRight} alt=""/>
+                { this.props.globalState.mode !== NodeMaterialModes.PostProcess && <>
+                    <div id="preview-config-bar">
+                        <div
+                            title="Render without back face culling"
+                            onClick={() => this.changeBackFaceCulling(!this.props.globalState.backFaceCulling)} className={"button back-face" + (!this.props.globalState.backFaceCulling ? " selected" : "")}>
+                            <img src={doubleSided} alt=""/>
+                        </div>
+                        <div
+                            title="Render with depth pre-pass"
+                            onClick={() => this.changeDepthPrePass(!this.props.globalState.depthPrePass)} className={"button depth-pass" + (this.props.globalState.depthPrePass ? " selected" : "")}>
+                                <img src={depthPass} alt=""/>
+                        </div>
+                        <div
+                            title="Turn on/off hemispheric light"
+                            onClick={() => {
+                                this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;
+                                DataStorage.WriteBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
+                                this.props.globalState.onLightUpdated.notifyObservers();
+                                this.forceUpdate();
+                            }} className={"button hemispheric-light" + (this.props.globalState.hemisphericLight ? " selected" : "")}>
+                            <img src={omni} alt=""/>
+                        </div>
+                        <div
+                            title="Turn on/off direction light #1"
+                            onClick={() => {
+                                this.props.globalState.directionalLight1 = !this.props.globalState.directionalLight1;
+                                DataStorage.WriteBoolean("DirectionalLight1", this.props.globalState.directionalLight1);
+                                this.props.globalState.onLightUpdated.notifyObservers();
+                                this.forceUpdate();
+                            }} className={"button direction-light-1" + (this.props.globalState.directionalLight1 ? " selected" : "")}>
+                            <img src={directionalRight} alt=""/>
 
+                        </div>
+                        <div
+                            title="Turn on/off direction light #0"
+                            onClick={() => {
+                                this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;
+                                DataStorage.WriteBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
+                                this.props.globalState.onLightUpdated.notifyObservers();
+                                this.forceUpdate();
+                            }} className={"button direction-light-0" + (this.props.globalState.directionalLight0 ? " selected" : "")}>
+                            <img src={directionalLeft} alt=""/>
+                        </div>
                     </div>
-                    <div
-                        title="Turn on/off direction light #0"
-                        onClick={() => {
-                            this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;
-                            DataStorage.WriteBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
-                            this.props.globalState.onLightUpdated.notifyObservers();
-                            this.forceUpdate();
-                        }} className={"button direction-light-0" + (this.props.globalState.directionalLight0 ? " selected" : "")}>
-                        <img src={directionalLeft} alt=""/>
-                    </div>
-                </div>
+                </> }
             </>
         );
 

nodeEditor/src/components/preview/previewMeshControlComponent.tsx

@@ -5,6 +5,7 @@ import { Color3, Color4 } from 'babylonjs/Maths/math.color';
 import { PreviewMeshType } from './previewMeshType';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
+import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
 
 const popUpIcon: string = require("./svgs/popOut.svg");
 const colorPicker: string = require("./svgs/colorPicker.svg");
@@ -81,6 +82,19 @@ 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);
+    }
+
+    componentDidUnmount() {
+        window.removeEventListener('nme_refresh', this.eventNMERefresh);
+    }
+
     render() {
 
         var meshTypeOptions = [
@@ -100,37 +114,39 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
 
         return (
             <div id="preview-mesh-bar">
-                <OptionsLineComponent label="" options={meshTypeOptions} target={this.props.globalState}
-                            propertyName="previewMeshType"
-                            noDirectUpdate={true}
-                            onSelect={(value: any) => {
-                                if (value !== PreviewMeshType.Custom + 1) {
-                                    this.changeMeshType(value);
-                                } else {
-                                    this.filePickerRef.current?.click();
-                                }
-                            }} />
-                <div style={{
-                    display: "none"
-                }} title="Preview with a custom mesh" >
-                    <input ref={this.filePickerRef} id="file-picker" type="file" onChange={(evt) => this.useCustomMesh(evt)} accept=".gltf, .glb, .babylon, .obj"/>
-                </div>
-                <div
-                    title="Turn-table animation"
-                    onClick={() => this.changeAnimation()} className="button" id="play-button">
-                    {this.props.globalState.rotatePreview ? <img src={pauseIcon} alt=""/> : <img src={playIcon} alt=""/>}
-                </div>
-                <div
-                id="color-picker-button"
-                    title="Background color"
-                    className={"button align"}
-                    onClick={(_) => this.changeBackgroundClick()}
-                    >
-                    <img src={colorPicker} alt=""/>
-                    <label htmlFor="color-picker" id="color-picker-label">
-                    </label>
-                    <input ref={this.colorInputRef} id="color-picker" type="color" onChange={(evt) => this.changeBackground(evt.target.value)} />
-                </div>
+                { this.props.globalState.mode !== NodeMaterialModes.PostProcess && <>
+                    <OptionsLineComponent label="" options={meshTypeOptions} target={this.props.globalState}
+                                propertyName="previewMeshType"
+                                noDirectUpdate={true}
+                                onSelect={(value: any) => {
+                                    if (value !== PreviewMeshType.Custom + 1) {
+                                        this.changeMeshType(value);
+                                    } else {
+                                        this.filePickerRef.current?.click();
+                                    }
+                                }} />
+                    <div style={{
+                        display: "none"
+                    }} title="Preview with a custom mesh" >
+                        <input ref={this.filePickerRef} id="file-picker" type="file" onChange={(evt) => this.useCustomMesh(evt)} accept=".gltf, .glb, .babylon, .obj"/>
+                    </div>
+                    <div
+                        title="Turn-table animation"
+                        onClick={() => this.changeAnimation()} className="button" id="play-button">
+                        {this.props.globalState.rotatePreview ? <img src={pauseIcon} alt=""/> : <img src={playIcon} alt=""/>}
+                    </div>
+                    <div
+                    id="color-picker-button"
+                        title="Background color"
+                        className={"button align"}
+                        onClick={(_) => this.changeBackgroundClick()}
+                        >
+                        <img src={colorPicker} alt=""/>
+                        <label htmlFor="color-picker" id="color-picker-label">
+                        </label>
+                        <input ref={this.colorInputRef} id="color-picker" type="color" onChange={(evt) => this.changeBackground(evt.target.value)} />
+                    </div>
+                </> }
                 <div
                     title="Open preview in new window" id="preview-new-window"
                     onClick={() => this.onPopUp()} className="button">