Popov72 5 years ago
parent
commit
b75a144c94

+ 12 - 12
nodeEditor/src/components/preview/previewAreaComponent.tsx

@@ -30,32 +30,32 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
         this.props.globalState.onIsLoadingChanged.remove(this._onIsLoadingChangedObserver);
     }
 
-    changeBackFaceCulling(value: boolean) {        
+    changeBackFaceCulling(value: boolean) {
         this.props.globalState.backFaceCulling = value;
         DataStorage.WriteBoolean("BackFaceCulling", value);
         this.props.globalState.onBackFaceCullingChanged.notifyObservers();
         this.forceUpdate();
     }
 
-    changeDepthPrePass(value: boolean) {        
+    changeDepthPrePass(value: boolean) {
         this.props.globalState.depthPrePass = value;
         DataStorage.WriteBoolean("DepthPrePass", value);
         this.props.globalState.onDepthPrePassChanged.notifyObservers();
         this.forceUpdate();
-    }    
+    }
 
     render() {
         return (
             <>
                 <div id="preview" style={{height: this.props.width + "px"}}>
                     <canvas id="preview-canvas"/>
-                    {                        
+                    {
                         <div className={"waitPanel" + (this.state.isLoading ? "" : " hidden")}>
                             Please wait, loading...
                         </div>
                     }
-                </div>                
-                <div id="preview-config-bar">              
+                </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" : "")}>
@@ -67,9 +67,9 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
                             <img src={depthPass} alt=""/>
                     </div>
                     <div
-                        title="Turn on/off hemispheric light"  
+                        title="Turn on/off hemispheric light"
                         onClick={() => {
-                            this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;                            
+                            this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;
                             DataStorage.WriteBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
                             this.props.globalState.onLightUpdated.notifyObservers();
                             this.forceUpdate();
@@ -77,9 +77,9 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
                         <img src={omni} alt=""/>
                     </div>
                     <div
-                        title="Turn on/off direction light #1"  
+                        title="Turn on/off direction light #1"
                         onClick={() => {
-                            this.props.globalState.directionalLight1 = !this.props.globalState.directionalLight1;                       
+                            this.props.globalState.directionalLight1 = !this.props.globalState.directionalLight1;
                             DataStorage.WriteBoolean("DirectionalLight1", this.props.globalState.directionalLight1);
                             this.props.globalState.onLightUpdated.notifyObservers();
                             this.forceUpdate();
@@ -88,9 +88,9 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
 
                     </div>
                     <div
-                        title="Turn on/off direction light #0"  
+                        title="Turn on/off direction light #0"
                         onClick={() => {
-                            this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;                       
+                            this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;
                             DataStorage.WriteBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
                             this.props.globalState.onLightUpdated.notifyObservers();
                             this.forceUpdate();

+ 39 - 39
nodeEditor/src/components/preview/previewManager.ts

@@ -25,7 +25,7 @@ import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialMo
 
 export class PreviewManager {
     private _nodeMaterial: NodeMaterial;
-    private _onBuildObserver: Nullable<Observer<NodeMaterial>>;    
+    private _onBuildObserver: Nullable<Observer<NodeMaterial>>;
     private _onPreviewCommandActivatedObserver: Nullable<Observer<boolean>>;
     private _onAnimationCommandActivatedObserver: Nullable<Observer<void>>;
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;
@@ -38,8 +38,8 @@ export class PreviewManager {
     private _meshes: AbstractMesh[];
     private _camera: ArcRotateCamera;
     private _material: NodeMaterial;
-    private _globalState: GlobalState;   
-    private _currentType: number; 
+    private _globalState: GlobalState;
+    private _currentType: number;
     private _lightParent: TransformNode;
     private _postprocess: Nullable<PostProcess>;
 
@@ -61,7 +61,7 @@ export class PreviewManager {
 
         this._onLightUpdatedObserver = globalState.onLightUpdated.add(() => {
             this._prepareLights();
-        });        
+        });
 
         this._onUpdateRequiredObserver = globalState.onUpdateRequiredObservable.add(() => {
             let serializationObject = this._nodeMaterial.serialize();
@@ -69,7 +69,7 @@ export class PreviewManager {
         });
 
         this._onPreviewBackgroundChangedObserver = globalState.onPreviewBackgroundChanged.add(() => {
-            this._scene.clearColor = this._globalState.backgroundColor;    
+            this._scene.clearColor = this._globalState.backgroundColor;
         });
 
         this._onAnimationCommandActivatedObserver = globalState.onAnimationCommandActivated.add(() => {
@@ -82,7 +82,7 @@ export class PreviewManager {
 
         this._onDepthPrePassChangedObserver = globalState.onDepthPrePassChanged.add(() => {
             this._material.needDepthPrePass = this._globalState.depthPrePass;
-        });        
+        });
 
         this._engine = new Engine(targetCanvas, true);
         this._scene = new Scene(this._engine);
@@ -105,11 +105,11 @@ export class PreviewManager {
         });
 
    //     let cameraLastRotation = 0;
-        let lastOffsetX:number | undefined = undefined; 
-     //   const lightRotationParallaxSpeed = 0.5;        
-        const lightRotationSpeed = 0.01;        
+        let lastOffsetX: number | undefined = undefined;
+     //   const lightRotationParallaxSpeed = 0.5;
+        const lightRotationSpeed = 0.01;
 
-        this._scene.onPointerObservable.add(evt => {
+        this._scene.onPointerObservable.add((evt) => {
             if (this._globalState.controlCamera) {
                 return;
             }
@@ -127,7 +127,7 @@ export class PreviewManager {
                 lastOffsetX = evt.event.offsetX;
             }
 
-            var rotateLighting = (lastOffsetX - evt.event.offsetX) * lightRotationSpeed; 
+            var rotateLighting = (lastOffsetX - evt.event.offsetX) * lightRotationSpeed;
             this._lightParent.rotation.y += rotateLighting;
             lastOffsetX = evt.event.offsetX;
         });
@@ -139,7 +139,7 @@ export class PreviewManager {
         //     if (!this._globalState.controlCamera) {
         //         return;
         //     }
-        //     var rotateLighting = (this._camera.alpha - cameraLastRotation) * lightRotationParallaxSpeed; 
+        //     var rotateLighting = (this._camera.alpha - cameraLastRotation) * lightRotationParallaxSpeed;
         //     this._lightParent.rotate(Vector3.Up(), rotateLighting);
         //     cameraLastRotation = this._camera.alpha;
         // });
@@ -147,7 +147,7 @@ export class PreviewManager {
 
     private _handleAnimations() {
         this._scene.stopAllAnimations();
-                        
+
         if (this._globalState.rotatePreview) {
             for (var root of this._scene.rootNodes) {
                 let transformNode = root as TransformNode;
@@ -173,14 +173,14 @@ export class PreviewManager {
 
         // Create new lights based on settings
         if (this._globalState.hemisphericLight) {
-            new HemisphericLight("Hemispheric light", new Vector3(0, 1, 0), this._scene);            
+            new HemisphericLight("Hemispheric light", new Vector3(0, 1, 0), this._scene);
         }
 
         if (this._globalState.directionalLight0) {
             let dir0 = new DirectionalLight("Directional light #0", new Vector3(0.841626576496605, -0.2193391004130599, -0.49351298337996535), this._scene);
             dir0.intensity = 0.9;
             dir0.diffuse = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);
-            dir0.specular = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);      
+            dir0.specular = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);
             dir0.parent = this._lightParent;
         }
 
@@ -188,8 +188,8 @@ export class PreviewManager {
             let dir1 = new DirectionalLight("Directional light #1", new Vector3(-0.9519937437504213, -0.24389315636999764, -0.1849974057546125), this._scene);
             dir1.intensity = 1.2;
             dir1.specular = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);
-            dir1.diffuse = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);        
-            dir1.parent = this._lightParent;                 
+            dir1.diffuse = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);
+            dir1.parent = this._lightParent;
         }
     }
 
@@ -205,16 +205,16 @@ export class PreviewManager {
             setTimeout(() => { // Let the behavior activate first
                 framingBehavior.framingTime = 0;
                 framingBehavior.elevationReturnTime = -1;
-        
+
                 if (this._scene.meshes.length) {
                     var worldExtends = this._scene.getWorldExtends();
                     this._camera.lowerRadiusLimit = null;
                     this._camera.upperRadiusLimit = null;
                     framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
                 }
-        
+
                 this._camera.pinchPrecision = 200 / this._camera.radius;
-                this._camera.upperRadiusLimit = 5 * this._camera.radius;    
+                this._camera.upperRadiusLimit = 5 * this._camera.radius;
             });
 
             this._camera.wheelDeltaPercentage = 0.01;
@@ -224,12 +224,12 @@ export class PreviewManager {
             this._handleAnimations();
         }
 
-        // Material        
+        // Material
         let serializationObject = this._nodeMaterial.serialize();
         this._updatePreview(serializationObject);
     }
 
-    private _refreshPreviewMesh() {    
+    private _refreshPreviewMesh() {
 
         if (this._currentType !== this._globalState.previewMeshType || this._currentType === PreviewMeshType.Custom) {
             this._currentType = this._globalState.previewMeshType;
@@ -254,10 +254,10 @@ export class PreviewManager {
             if (this._globalState.mode !== NodeMaterialModes.PostProcess) {
                 switch (this._globalState.previewMeshType) {
                     case PreviewMeshType.Box:
-                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCube.glb", this._scene).then(() => {     
+                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCube.glb", this._scene).then(() => {
                             this._meshes.push(...this._scene.meshes);
                             this._prepareMeshes();
-                        });     
+                        });
                         return;
                     case PreviewMeshType.Sphere:
                         this._meshes.push(Mesh.CreateSphere("dummy-sphere", 32, 2, this._scene));
@@ -266,29 +266,29 @@ export class PreviewManager {
                         this._meshes.push(Mesh.CreateTorus("dummy-torus", 2, 0.5, 32, this._scene));
                         break;
                     case PreviewMeshType.Cylinder:
-                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCylinder.glb", this._scene).then(() => {     
+                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCylinder.glb", this._scene).then(() => {
                             this._meshes.push(...this._scene.meshes);
                             this._prepareMeshes();
-                        });                    
-                        return;                   
+                        });
+                        return;
                     case PreviewMeshType.Plane:
                         let plane = Mesh.CreateGround("dummy-plane", 2, 2, 128, this._scene);
                         plane.scaling.y = -1;
                         plane.rotation.x = Math.PI;
                         this._meshes.push(plane);
-                        break;    
+                        break;
                     case PreviewMeshType.ShaderBall:
-                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "shaderBall.glb", this._scene).then(() => {     
+                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "shaderBall.glb", this._scene).then(() => {
                             this._meshes.push(...this._scene.meshes);
                             this._prepareMeshes();
                         });
-                        return;                             
+                        return;
                     case PreviewMeshType.Custom:
-                        SceneLoader.AppendAsync("file:", this._globalState.previewMeshFile, this._scene).then(() => {     
+                        SceneLoader.AppendAsync("file:", this._globalState.previewMeshFile, this._scene).then(() => {
                             this._meshes.push(...this._scene.meshes);
                             this._prepareMeshes();
                         });
-                        return;     
+                        return;
                 }
             }
 
@@ -329,7 +329,7 @@ export class PreviewManager {
                 }
                 this._material = tempMaterial;
             } else if (this._meshes.length) {
-                let tasks = this._meshes.map(m => this._forceCompilationAsync(tempMaterial, m));
+                let tasks = this._meshes.map((m) => this._forceCompilationAsync(tempMaterial, m));
 
                 Promise.all(tasks).then(() => {
                     for (var mesh of this._meshes) {
@@ -338,18 +338,18 @@ export class PreviewManager {
 
                     if (this._material) {
                         this._material.dispose();
-                    }      
-        
-                    this._material = tempMaterial;  
+                    }
+
+                    this._material = tempMaterial;
                     this._globalState.onIsLoadingChanged.notifyObservers(false);
-                }).catch(reason => {
+                }).catch((reason) => {
                     this._globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Shader compilation error:\r\n" + reason, true));
                     this._globalState.onIsLoadingChanged.notifyObservers(false);
                 });
             } else {
-                this._material = tempMaterial;    
+                this._material = tempMaterial;
             }
-        } catch(err) {
+        } catch (err) {
             // Ignore the error
             this._globalState.onIsLoadingChanged.notifyObservers(false);
         }

+ 8 - 8
nodeEditor/src/components/preview/previewMeshControlComponent.tsx

@@ -47,11 +47,11 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
             this.props.globalState.previewMeshFile = file;
             this.props.globalState.previewMeshType = PreviewMeshType.Custom;
             this.props.globalState.onPreviewCommandActivated.notifyObservers(false);
-            this.props.globalState.listOfCustomPreviewMeshFiles = [file];       
+            this.props.globalState.listOfCustomPreviewMeshFiles = [file];
             this.forceUpdate();
         }
-        if(this.filePickerRef.current){
-            this.filePickerRef.current.value = ""
+        if (this.filePickerRef.current) {
+            this.filePickerRef.current.value = "";
         }
     }
 
@@ -100,7 +100,7 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
 
         return (
             <div id="preview-mesh-bar">
-                <OptionsLineComponent label="" options={meshTypeOptions} target={this.props.globalState} 
+                <OptionsLineComponent label="" options={meshTypeOptions} target={this.props.globalState}
                             propertyName="previewMeshType"
                             noDirectUpdate={true}
                             onSelect={(value: any) => {
@@ -113,23 +113,23 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
                 <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"/>
+                    <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 
+                <div
                 id="color-picker-button"
                     title="Background color"
                     className={"button align"}
-                    onClick={_ => this.changeBackgroundClick()}
+                    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)} />
+                    <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"