From 3f5bb3aaeb8769ff041be48fc031e71f54ee2cea Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Sat, 20 Jul 2019 21:18:08 +0800
Subject: [PATCH] ShadowComponent

---
 .../src/editor2/component/ShadowComponent.jsx | 144 +++++++++++-------
 1 file changed, 93 insertions(+), 51 deletions(-)

diff --git a/ShadowEditor.Web/src/editor2/component/ShadowComponent.jsx b/ShadowEditor.Web/src/editor2/component/ShadowComponent.jsx
index a27bb40d..9c8d91ea 100644
--- a/ShadowEditor.Web/src/editor2/component/ShadowComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/ShadowComponent.jsx
@@ -12,10 +12,10 @@ class ShadowComponent extends React.Component {
         this.selected = null;
 
         this.mapSize = {
-            512: '512*512',
-            1024: '1024*1024',
-            2048: '2048*2048',
-            4096: '4096*4096',
+            '512': '512*512',
+            '1024': '1024*1024',
+            '2048': '2048*2048',
+            '4096': '4096*4096',
         };
 
         this.state = {
@@ -48,7 +48,17 @@ class ShadowComponent extends React.Component {
 
         this.handleExpand = this.handleExpand.bind(this);
         this.handleUpdate = this.handleUpdate.bind(this);
-        this.handleChange = this.handleChange.bind(this);
+        this.handleChangeCastShadow = this.handleChangeCastShadow.bind(this);
+        this.handleChangeReceiveShadow = this.handleChangeReceiveShadow.bind(this);
+        this.handleChangeShadowRadius = this.handleChangeShadowRadius.bind(this);
+        this.handleChangeMapSize = this.handleChangeMapSize.bind(this);
+        this.handleChangeBias = this.handleChangeBias.bind(this);
+        this.handleChangeCameraLeft = this.handleChangeCameraLeft.bind(this);
+        this.handleChangeCameraRight = this.handleChangeCameraRight.bind(this);
+        this.handleChangeCameraTop = this.handleChangeCameraTop.bind(this);
+        this.handleChangeCameraBottom = this.handleChangeCameraBottom.bind(this);
+        this.handleChangeCameraNear = this.handleChangeCameraNear.bind(this);
+        this.handleChangeCameraFar = this.handleChangeCameraFar.bind(this);
     }
 
     render() {
@@ -60,17 +70,17 @@ class ShadowComponent extends React.Component {
         }
 
         return <PropertyGroup title={L_SHADOW_COMPONENT} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <CheckBoxProperty label={L_CAST} name={'castShadow'} value={castShadow} show={castShadowShow} onChange={this.handleChange}></CheckBoxProperty>
-            <CheckBoxProperty label={L_RECEIVE} name={'receiveShadow'} value={receiveShadow} show={receiveShadow} onChange={this.handleChange}></CheckBoxProperty>
-            <NumberProperty label={L_RADIUS} name={'shadowRadius'} value={shadowRadius} show={shadowRadiusShow} onChange={this.handleChange}></NumberProperty>
-            <SelectProperty label={L_MAP_SIZE} options={this.mapSize} name={'mapSize'} value={mapSize} show={mapSizeShow} onChange={this.handleChange}></SelectProperty>
-            <NumberProperty label={L_BIAS} name={'bias'} value={bias} show={biasShow} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={L_CAMERA_LEFT} name={'cameraLeft'} value={cameraLeft} show={cameraShow} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={L_CAMERA_RIGHT} name={'cameraRight'} value={cameraRight} show={cameraShow} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={L_CAMERA_TOP} name={'cameraTop'} value={cameraTop} show={cameraShow} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={L_CAMERA_BOTTOM} name={'cameraBottom'} value={cameraBottom} show={cameraShow} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={L_CAMERA_NEAR} name={'cameraNear'} value={cameraNear} show={cameraShow} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={L_CAMERA_FAR} name={'cameraFar'} value={cameraFar} show={cameraShow} onChange={this.handleChange}></NumberProperty>
+            <CheckBoxProperty label={L_CAST} name={'castShadow'} value={castShadow} show={castShadowShow} onChange={this.handleChangeCastShadow}></CheckBoxProperty>
+            <CheckBoxProperty label={L_RECEIVE} name={'receiveShadow'} value={receiveShadow} show={receiveShadowShow} onChange={this.handleChangeReceiveShadow}></CheckBoxProperty>
+            <NumberProperty label={L_RADIUS} name={'shadowRadius'} value={shadowRadius} show={shadowRadiusShow} onChange={this.handleChangeShadowRadius}></NumberProperty>
+            <SelectProperty label={L_MAP_SIZE} options={this.mapSize} name={'mapSize'} value={mapSize.toString()} show={mapSizeShow} onChange={this.handleChangeMapSize}></SelectProperty>
+            <NumberProperty label={L_BIAS} name={'bias'} value={bias} show={biasShow} onChange={this.handleChangeBias}></NumberProperty>
+            <NumberProperty label={L_CAMERA_LEFT} name={'cameraLeft'} value={cameraLeft} show={cameraShow} onChange={this.handleChangeCameraLeft}></NumberProperty>
+            <NumberProperty label={L_CAMERA_RIGHT} name={'cameraRight'} value={cameraRight} show={cameraShow} onChange={this.handleChangeCameraRight}></NumberProperty>
+            <NumberProperty label={L_CAMERA_TOP} name={'cameraTop'} value={cameraTop} show={cameraShow} onChange={this.handleChangeCameraTop}></NumberProperty>
+            <NumberProperty label={L_CAMERA_BOTTOM} name={'cameraBottom'} value={cameraBottom} show={cameraShow} onChange={this.handleChangeCameraBottom}></NumberProperty>
+            <NumberProperty label={L_CAMERA_NEAR} name={'cameraNear'} value={cameraNear} show={cameraShow} onChange={this.handleChangeCameraNear}></NumberProperty>
+            <NumberProperty label={L_CAMERA_FAR} name={'cameraFar'} value={cameraFar} show={cameraShow} onChange={this.handleChangeCameraFar}></NumberProperty>
         </PropertyGroup>;
     }
 
@@ -108,7 +118,7 @@ class ShadowComponent extends React.Component {
                 receiveShadowShow: false,
                 shadowRadius: this.selected.shadow.radius,
                 shadowRadiusShow: true,
-                mapSize: this.selected.shadow.mapSize,
+                mapSize: this.selected.shadow.mapSize.x,
                 mapSizeShow: true,
                 bias: this.selected.shadow.bias,
                 biasShow: true,
@@ -134,53 +144,85 @@ class ShadowComponent extends React.Component {
         this.setState(state);
     }
 
-    handleChange(value, name) {
-        const state = Object.assign({}, this.state, {
-            [name]: value,
-        });
+    handleChangeCastShadow(value) {
+        this.selected.castShadow = value;
 
-        const { size, lifetime } = state;
-
-        this.selected.userData.size = size
-        this.selected.userData.lifetime = lifetime;
-
-        this.selected.material.uniforms.size.value = size;
-        this.selected.material.uniforms.lifetime.value = lifetime;
+        if (this.selected instanceof THREE.Mesh) {
+            this.updateMaterial(this.selected.material);
+        }
 
         app.call(`objectChanged`, this, this.selected);
     }
 
-    handlePreview() {
-        if (this.isPlaying) {
-            this.stopPreview();
+    handleChangeReceiveShadow(value) {
+        this.selected.receiveShadow = value;
+
+        if (this.selected instanceof THREE.Mesh) {
+            this.updateMaterial(this.selected.material);
+        }
+
+        app.call(`objectChanged`, this, this.selected);
+    }
+
+    handleChangeShadowRadius(value) {
+        this.selected.shadow.radius = value;
+        app.call(`objectChanged`, this, this.selected);
+    }
+
+    updateMaterial(material) {
+        if (Array.isArray(material)) {
+            material.forEach(n => {
+                n.needsUpdate = true;
+            });
         } else {
-            this.startPreview();
+            material.needsUpdate = true;
         }
     }
 
-    startPreview() {
-        this.isPlaying = true;
-
-        this.setState({
-            previewText: L_CANCEL,
-        });
-
-        app.on(`animate.${this.id}`, this.onAnimate);
+    handleChangeMapSize(value) {
+        this.selected.shadow.mapSize.x = this.selected.shadow.mapSize.y = parseInt(value);
+        app.call(`objectChanged`, this, this.selected);
     }
 
-    stopPreview() {
-        this.isPlaying = false;
-
-        this.setState({
-            previewText: L_PREVIEW,
-        });
-
-        app.on(`animate.${this.id}`, null);
+    handleChangeBias(value) {
+        this.selected.shadow.bias = value;
+        app.call(`objectChanged`, this, this.selected);
     }
 
-    onAnimate(clock, deltaTime) {
-        let elapsed = clock.getElapsedTime();
-        this.selected.update(elapsed);
+    handleChangeCameraLeft(value) {
+        this.selected.shadow.camera.left = value;
+        this.selected.shadow.camera.updateProjectionMatrix();
+        app.call(`objectChanged`, this, this.selected);
+    }
+
+    handleChangeCameraRight(value) {
+        this.selected.shadow.camera.right = value;
+        this.selected.shadow.camera.updateProjectionMatrix();
+        app.call(`objectChanged`, this, this.selected);
+    }
+
+    handleChangeCameraTop(value) {
+        this.selected.shadow.camera.top = value;
+        this.selected.shadow.camera.updateProjectionMatrix();
+        app.call(`objectChanged`, this, this.selected);
+    }
+
+    handleChangeCameraBottom(value) {
+        this.selected.shadow.camera.bottom = value;
+        this.selected.shadow.camera.updateProjectionMatrix();
+        app.call(`objectChanged`, this, this.selected);
+    }
+
+    handleChangeCameraNear(value) {
+        this.selected.shadow.camera.near = value;
+        this.selected.shadow.camera.updateProjectionMatrix();
+        app.call(`objectChanged`, this, this.selected);
+    }
+
+    handleChangeCameraFar(value) {
+        this.selected.shadow.camera.far = value;
+        this.selected.shadow.camera.updateProjectionMatrix();
+        app.call(`objectChanged`, this, this.selected);
     }
 }