From c8d9e5aec1574a03f05877bd043fb0883fbf89ef Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Fri, 6 Mar 2020 21:22:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/editor/assets/LogPanel.jsx            |  27 +-
 .../src/editor/component/CameraComponent.jsx  |  40 ++-
 .../src/editor/component/FireComponent.jsx    |  57 +++--
 .../src/editor/component/LMeshComponent.jsx   |   3 +-
 .../src/editor/component/LightComponent.jsx   | 109 ++++++---
 .../src/editor/component/MMDComponent.jsx     |   5 +-
 .../component/ParticleEmitterComponent.jsx    | 230 +++++++++++++-----
 .../editor/component/ReflectorComponent.jsx   |  64 +++--
 .../src/editor/component/SceneComponent.jsx   |   5 +-
 .../src/editor/component/ScriptComponent.jsx  |  20 +-
 .../src/editor/component/ShadowComponent.jsx  | 123 +++++++---
 .../src/editor/component/SmokeComponent.jsx   |  45 ++--
 .../editor/component/TransformComponent.jsx   |  91 +++++--
 .../editor/sidebar/AnimationPropertyPanel.jsx |   6 +-
 .../src/editor/sidebar/HistoryPanel.jsx       |  25 +-
 .../src/editor/sidebar/ScriptPanel.jsx        |  20 +-
 16 files changed, 614 insertions(+), 256 deletions(-)

diff --git a/ShadowEditor.Web/src/editor/assets/LogPanel.jsx b/ShadowEditor.Web/src/editor/assets/LogPanel.jsx
index a30f8791..7de3b732 100644
--- a/ShadowEditor.Web/src/editor/assets/LogPanel.jsx
+++ b/ShadowEditor.Web/src/editor/assets/LogPanel.jsx
@@ -1,10 +1,5 @@
 import './css/LogPanel.css';
-import { classNames, PropTypes, SearchField, ImageList, Button } from '../../third_party';
-import EditWindow from './window/EditWindow.jsx';
-import ModelLoader from '../../loader/ModelLoader';
-import AddObjectCommand from '../../command/AddObjectCommand';
-import Ajax from '../../utils/Ajax';
-import UploadUtils from '../../utils/UploadUtils';
+import { classNames, PropTypes, Button } from '../../third_party';
 
 /**
  * 日志面板
@@ -15,7 +10,7 @@ class LogPanel extends React.Component {
         super(props);
 
         this.state = {
-            logs: [],
+            logs: []
         };
 
         this.handleLog = this.handleLog.bind(this);
@@ -26,11 +21,15 @@ class LogPanel extends React.Component {
         const { className, style } = this.props;
         const { logs } = this.state;
 
-        return <div className={classNames('LogPanel', className)} style={style}>
+        return <div className={classNames('LogPanel', className)}
+            style={style}
+               >
             <Button onClick={this.handleClear}>{_t('Clear')}</Button>
             <div className={'logs'}>
                 {logs.map((n, i) => {
-                    return <div className={n.type} key={i}>{n.time} {n.content}</div>
+                    return <div className={n.type}
+                        key={i}
+                           >{n.time} {n.content}</div>;
                 })}
             </div>
         </div>;
@@ -56,18 +55,18 @@ class LogPanel extends React.Component {
             logs.push({
                 time: `${hour}:${minute}:${second}`,
                 type,
-                content,
+                content
             });
 
             return {
-                logs,
+                logs
             };
         });
     }
 
     handleClear() {
         this.setState({
-            logs: [],
+            logs: []
         });
     }
 }
@@ -75,13 +74,13 @@ class LogPanel extends React.Component {
 LogPanel.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
-    show: PropTypes.bool,
+    show: PropTypes.bool
 };
 
 LogPanel.defaultProps = {
     className: null,
     style: null,
-    show: false,
+    show: false
 };
 
 export default LogPanel;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/editor/component/CameraComponent.jsx b/ShadowEditor.Web/src/editor/component/CameraComponent.jsx
index 5ead7d1f..1f015223 100644
--- a/ShadowEditor.Web/src/editor/component/CameraComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/CameraComponent.jsx
@@ -1,4 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty } from '../../third_party';
+import { PropertyGroup, NumberProperty } from '../../third_party';
 import SetValueCommand from '../../command/SetValueCommand';
 
 /**
@@ -14,7 +14,7 @@ class CameraComponent extends React.Component {
             expanded: true,
             fov: 70,
             near: 0.1,
-            far: 1000,
+            far: 1000
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -31,10 +31,26 @@ class CameraComponent extends React.Component {
             return null;
         }
 
-        return <PropertyGroup title={_t('Camera Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <NumberProperty label={_t('Fov')} name={'fov'} value={fov} onChange={this.handleChangeFov}></NumberProperty>
-            <NumberProperty label={_t('Near')} name={'near'} value={near} onChange={this.handleChangeNear}></NumberProperty>
-            <NumberProperty label={_t('Far')} name={'far'} value={far} onChange={this.handleChangeFar}></NumberProperty>
+        return <PropertyGroup title={_t('Camera Component')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               >
+            <NumberProperty label={_t('Fov')}
+                name={'fov'}
+                value={fov}
+                onChange={this.handleChangeFov}
+            />
+            <NumberProperty label={_t('Near')}
+                name={'near'}
+                value={near}
+                onChange={this.handleChangeNear}
+            />
+            <NumberProperty label={_t('Far')}
+                name={'far'}
+                value={far}
+                onChange={this.handleChangeFar}
+            />
         </PropertyGroup>;
     }
 
@@ -45,7 +61,7 @@ class CameraComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -55,7 +71,7 @@ class CameraComponent extends React.Component {
         // TODO: 应判断是否等于默认相机
         if (!editor.selected || !(editor.selected instanceof THREE.PerspectiveCamera)) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -66,14 +82,14 @@ class CameraComponent extends React.Component {
             show: true,
             fov: this.selected.fov,
             near: this.selected.near,
-            far: this.selected.far,
+            far: this.selected.far
         });
     }
 
     handleChangeFov(value) {
         if (value === null) {
             this.setState({
-                fov: value,
+                fov: value
             });
             return;
         }
@@ -84,7 +100,7 @@ class CameraComponent extends React.Component {
     handleChangeNear(value) {
         if (value === null) {
             this.setState({
-                near: value,
+                near: value
             });
             return;
         }
@@ -95,7 +111,7 @@ class CameraComponent extends React.Component {
     handleChangeFar(value) {
         if (value === null) {
             this.setState({
-                far: value,
+                far: value
             });
             return;
         }
diff --git a/ShadowEditor.Web/src/editor/component/FireComponent.jsx b/ShadowEditor.Web/src/editor/component/FireComponent.jsx
index 7bc7e90e..3c611568 100644
--- a/ShadowEditor.Web/src/editor/component/FireComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/FireComponent.jsx
@@ -1,5 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
+import { PropertyGroup, ButtonProperty, NumberProperty } from '../../third_party';
 
 /**
  * 火焰组件
@@ -19,7 +18,7 @@ class FireComponent extends React.Component {
             height: 4,
             depth: 2,
             sliceSpacing: 2,
-            previewText: _t('Preview'),
+            previewText: _t('Preview')
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -36,12 +35,34 @@ class FireComponent extends React.Component {
             return null;
         }
 
-        return <PropertyGroup title={_t('Fire Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <NumberProperty label={_t('Width')} name={'width'} value={width} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={_t('Height')} name={'height'} value={height} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={_t('Depth')} name={'depth'} value={depth} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={_t('SliceSpacing')} name={'sliceSpacing'} value={sliceSpacing} onChange={this.handleChange}></NumberProperty>
-            <ButtonProperty text={previewText} onChange={this.handlePreview}></ButtonProperty>
+        return <PropertyGroup title={_t('Fire Component')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               >
+            <NumberProperty label={_t('Width')}
+                name={'width'}
+                value={width}
+                onChange={this.handleChange}
+            />
+            <NumberProperty label={_t('Height')}
+                name={'height'}
+                value={height}
+                onChange={this.handleChange}
+            />
+            <NumberProperty label={_t('Depth')}
+                name={'depth'}
+                value={depth}
+                onChange={this.handleChange}
+            />
+            <NumberProperty label={_t('SliceSpacing')}
+                name={'sliceSpacing'}
+                value={sliceSpacing}
+                onChange={this.handleChange}
+            />
+            <ButtonProperty text={previewText}
+                onChange={this.handlePreview}
+            />
         </PropertyGroup>;
     }
 
@@ -52,7 +73,7 @@ class FireComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -61,7 +82,7 @@ class FireComponent extends React.Component {
 
         if (!editor.selected || !(editor.selected.userData.type === 'Fire')) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -74,20 +95,20 @@ class FireComponent extends React.Component {
             height: this.selected.userData.height,
             depth: this.selected.userData.depth,
             sliceSpacing: this.selected.userData.sliceSpacing,
-            previewText: this.isPlaying ? _t('Cancel') : _t('Preview'),
+            previewText: this.isPlaying ? _t('Cancel') : _t('Preview')
         });
     }
 
     handleChange(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         let { width, height, depth, sliceSpacing } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         VolumetricFire.texturePath = 'assets/textures/VolumetricFire/';
@@ -107,7 +128,7 @@ class FireComponent extends React.Component {
             width,
             height,
             depth,
-            sliceSpacing,
+            sliceSpacing
         });
 
         const index = editor.scene.children.indexOf(this.selected);
@@ -138,7 +159,7 @@ class FireComponent extends React.Component {
         this.isPlaying = true;
 
         this.setState({
-            previewText: _t('Cancel'),
+            previewText: _t('Cancel')
         });
 
         app.on(`animate.FireComponent`, this.onAnimate);
@@ -148,13 +169,13 @@ class FireComponent extends React.Component {
         this.isPlaying = false;
 
         this.setState({
-            previewText: _t('Preview'),
+            previewText: _t('Preview')
         });
 
         app.on(`animate.FireComponent`, null);
     }
 
-    onAnimate(clock, deltaTime) {
+    onAnimate(clock) {
         const elapsed = clock.getElapsedTime();
 
         const fire = this.selected.userData.fire;
diff --git a/ShadowEditor.Web/src/editor/component/LMeshComponent.jsx b/ShadowEditor.Web/src/editor/component/LMeshComponent.jsx
index 4416f1c9..81856ddf 100644
--- a/ShadowEditor.Web/src/editor/component/LMeshComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/LMeshComponent.jsx
@@ -1,5 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, SelectProperty } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
+import { PropertyGroup, ButtonProperty, SelectProperty } from '../../third_party';
 
 /**
  * LMesh组件
diff --git a/ShadowEditor.Web/src/editor/component/LightComponent.jsx b/ShadowEditor.Web/src/editor/component/LightComponent.jsx
index fc25b769..0cdb517b 100644
--- a/ShadowEditor.Web/src/editor/component/LightComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/LightComponent.jsx
@@ -1,5 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, ColorProperty } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
+import { PropertyGroup, NumberProperty, ColorProperty } from '../../third_party';
 
 /**
  * 光源组件
@@ -43,7 +42,7 @@ class LightComponent extends React.Component {
             width: 20,
 
             showHeight: false,
-            height: 10,
+            height: 10
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -72,24 +71,78 @@ class LightComponent extends React.Component {
             showSkyColor, skyColor,
             showGroundColor, groundColor,
             showWidth, width,
-            showHeight, height,
+            showHeight, height
         } = this.state;
 
         if (!show) {
             return null;
         }
 
-        return <PropertyGroup title={_t('Light Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <ColorProperty label={_t('Color')} name={'color'} value={color} show={showColor} onChange={this.handleChangeColor}></ColorProperty>
-            <NumberProperty label={_t('Intensity')} name={'intensity'} value={intensity} show={showIntensity} onChange={this.handleChangeIntensity}></NumberProperty>
-            <NumberProperty label={_t('Distance')} name={'distance'} value={distance} show={showDistance} onChange={this.handleChangeDistance}></NumberProperty>
-            <NumberProperty label={_t('Angle')} name={'angle'} value={angle} show={showAngle} onChange={this.handleChangeAngle}></NumberProperty>
-            <NumberProperty label={_t('Penumbra')} name={'penumbra'} value={penumbra} show={showPenumbra} onChange={this.handleChangePenumbra}></NumberProperty>
-            <NumberProperty label={_t('Decay')} name={'decay'} value={decay} show={showDecay} onChange={this.handleChangeDecay}></NumberProperty>
-            <ColorProperty label={_t('SkyColor')} name={'skyColor'} value={skyColor} show={showSkyColor} onChange={this.handleChangeSkyColor}></ColorProperty>
-            <ColorProperty label={_t('GroundColor')} name={'groundColor'} value={groundColor} show={showGroundColor} onChange={this.handleChangeGroundColor}></ColorProperty>
-            <NumberProperty label={_t('Width')} name={'width'} value={width} show={showWidth} onChange={this.handleChangeWidth}></NumberProperty>
-            <NumberProperty label={_t('Height')} name={'height'} value={height} show={showHeight} onChange={this.handleChangeHeight}></NumberProperty>
+        return <PropertyGroup title={_t('Light Component')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               >
+            <ColorProperty label={_t('Color')}
+                name={'color'}
+                value={color}
+                show={showColor}
+                onChange={this.handleChangeColor}
+            />
+            <NumberProperty label={_t('Intensity')}
+                name={'intensity'}
+                value={intensity}
+                show={showIntensity}
+                onChange={this.handleChangeIntensity}
+            />
+            <NumberProperty label={_t('Distance')}
+                name={'distance'}
+                value={distance}
+                show={showDistance}
+                onChange={this.handleChangeDistance}
+            />
+            <NumberProperty label={_t('Angle')}
+                name={'angle'}
+                value={angle}
+                show={showAngle}
+                onChange={this.handleChangeAngle}
+            />
+            <NumberProperty label={_t('Penumbra')}
+                name={'penumbra'}
+                value={penumbra}
+                show={showPenumbra}
+                onChange={this.handleChangePenumbra}
+            />
+            <NumberProperty label={_t('Decay')}
+                name={'decay'}
+                value={decay}
+                show={showDecay}
+                onChange={this.handleChangeDecay}
+            />
+            <ColorProperty label={_t('SkyColor')}
+                name={'skyColor'}
+                value={skyColor}
+                show={showSkyColor}
+                onChange={this.handleChangeSkyColor}
+            />
+            <ColorProperty label={_t('GroundColor')}
+                name={'groundColor'}
+                value={groundColor}
+                show={showGroundColor}
+                onChange={this.handleChangeGroundColor}
+            />
+            <NumberProperty label={_t('Width')}
+                name={'width'}
+                value={width}
+                show={showWidth}
+                onChange={this.handleChangeWidth}
+            />
+            <NumberProperty label={_t('Height')}
+                name={'height'}
+                value={height}
+                show={showHeight}
+                onChange={this.handleChangeHeight}
+            />
         </PropertyGroup>;
     }
 
@@ -100,7 +153,7 @@ class LightComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -109,7 +162,7 @@ class LightComponent extends React.Component {
 
         if (!editor.selected || !(editor.selected instanceof THREE.Light)) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -117,7 +170,7 @@ class LightComponent extends React.Component {
         this.selected = editor.selected;
 
         let state = {
-            show: true,
+            show: true
         };
 
         if (this.selected instanceof THREE.HemisphereLight) {
@@ -176,7 +229,7 @@ class LightComponent extends React.Component {
     handleChangeColor(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -195,7 +248,7 @@ class LightComponent extends React.Component {
     handleChangeIntensity(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -208,7 +261,7 @@ class LightComponent extends React.Component {
     handleChangeDistance(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -221,7 +274,7 @@ class LightComponent extends React.Component {
     handleChangeAngle(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -234,7 +287,7 @@ class LightComponent extends React.Component {
     handleChangePenumbra(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -247,7 +300,7 @@ class LightComponent extends React.Component {
     handleChangeDecay(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -260,7 +313,7 @@ class LightComponent extends React.Component {
     handleChangeSkyColor(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -279,7 +332,7 @@ class LightComponent extends React.Component {
     handleChangeGroundColor(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -298,7 +351,7 @@ class LightComponent extends React.Component {
     handleChangeWidth(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -311,7 +364,7 @@ class LightComponent extends React.Component {
     handleChangeHeight(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
diff --git a/ShadowEditor.Web/src/editor/component/MMDComponent.jsx b/ShadowEditor.Web/src/editor/component/MMDComponent.jsx
index 263a19cc..35efcc59 100644
--- a/ShadowEditor.Web/src/editor/component/MMDComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/MMDComponent.jsx
@@ -1,7 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
-import Converter from '../../utils/Converter';
-import Ajax from '../../utils/Ajax';
+import { PropertyGroup, DisplayProperty } from '../../third_party';
 
 /**
  * MMD模型组件
diff --git a/ShadowEditor.Web/src/editor/component/ParticleEmitterComponent.jsx b/ShadowEditor.Web/src/editor/component/ParticleEmitterComponent.jsx
index 11037d41..ca7e67d7 100644
--- a/ShadowEditor.Web/src/editor/component/ParticleEmitterComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/ParticleEmitterComponent.jsx
@@ -1,7 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button, IntegerProperty } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
-import Converter from '../../utils/Converter';
-import Ajax from '../../utils/Ajax';
+import { PropertyGroup, ButtonProperty, NumberProperty, ColorProperty, TextureProperty, IntegerProperty } from '../../third_party';
 
 /**
  * 粒子发射器组件
@@ -53,7 +50,7 @@ class ParticleEmitterComponent extends React.Component {
             particleCount: 1000,
             maxAge: 5,
             maxAgeSpread: 2,
-            previewText: _t('Preview'),
+            previewText: _t('Preview')
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -86,43 +83,161 @@ class ParticleEmitterComponent extends React.Component {
             return null;
         }
 
-        return <PropertyGroup title={_t('ParticleEmitter')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <NumberProperty label={`${_t('Position')}X`} name={'positionX'} value={positionX} onChange={this.handleChangePosition}></NumberProperty>
-            <NumberProperty label={`${_t('Position')}Y`} name={'positionY'} value={positionY} onChange={this.handleChangePosition}></NumberProperty>
-            <NumberProperty label={`${_t('Position')}Z`} name={'positionZ'} value={positionZ} onChange={this.handleChangePosition}></NumberProperty>
-            <NumberProperty label={`${_t('PositionSpread')}X`} name={'positionSpreadX'} value={positionSpreadX} onChange={this.handleChangePosition}></NumberProperty>
-            <NumberProperty label={`${_t('PositionSpread')}Y`} name={'positionSpreadY'} value={positionSpreadY} onChange={this.handleChangePosition}></NumberProperty>
-            <NumberProperty label={`${_t('PositionSpread')}Z`} name={'positionSpreadZ'} value={positionSpreadZ} onChange={this.handleChangePosition}></NumberProperty>
+        return <PropertyGroup title={_t('ParticleEmitter')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               >
+            <NumberProperty label={`${_t('Position')}X`}
+                name={'positionX'}
+                value={positionX}
+                onChange={this.handleChangePosition}
+            />
+            <NumberProperty label={`${_t('Position')}Y`}
+                name={'positionY'}
+                value={positionY}
+                onChange={this.handleChangePosition}
+            />
+            <NumberProperty label={`${_t('Position')}Z`}
+                name={'positionZ'}
+                value={positionZ}
+                onChange={this.handleChangePosition}
+            />
+            <NumberProperty label={`${_t('PositionSpread')}X`}
+                name={'positionSpreadX'}
+                value={positionSpreadX}
+                onChange={this.handleChangePosition}
+            />
+            <NumberProperty label={`${_t('PositionSpread')}Y`}
+                name={'positionSpreadY'}
+                value={positionSpreadY}
+                onChange={this.handleChangePosition}
+            />
+            <NumberProperty label={`${_t('PositionSpread')}Z`}
+                name={'positionSpreadZ'}
+                value={positionSpreadZ}
+                onChange={this.handleChangePosition}
+            />
 
-            <NumberProperty label={`${_t('Velocity')}X`} name={'velocityX'} value={velocityX} onChange={this.handleChangeVelocity}></NumberProperty>
-            <NumberProperty label={`${_t('Velocity')}Y`} name={'velocityY'} value={velocityY} onChange={this.handleChangeVelocity}></NumberProperty>
-            <NumberProperty label={`${_t('Velocity')}Z`} name={'velocityZ'} value={velocityZ} onChange={this.handleChangeVelocity}></NumberProperty>
-            <NumberProperty label={`${_t('VelocitySpread')}X`} name={'velocitySpreadX'} value={velocitySpreadX} onChange={this.handleChangeVelocity}></NumberProperty>
-            <NumberProperty label={`${_t('VelocitySpread')}Y`} name={'velocitySpreadY'} value={velocitySpreadY} onChange={this.handleChangeVelocity}></NumberProperty>
-            <NumberProperty label={`${_t('VelocitySpread')}Z`} name={'velocitySpreadZ'} value={velocitySpreadZ} onChange={this.handleChangeVelocity}></NumberProperty>
+            <NumberProperty label={`${_t('Velocity')}X`}
+                name={'velocityX'}
+                value={velocityX}
+                onChange={this.handleChangeVelocity}
+            />
+            <NumberProperty label={`${_t('Velocity')}Y`}
+                name={'velocityY'}
+                value={velocityY}
+                onChange={this.handleChangeVelocity}
+            />
+            <NumberProperty label={`${_t('Velocity')}Z`}
+                name={'velocityZ'}
+                value={velocityZ}
+                onChange={this.handleChangeVelocity}
+            />
+            <NumberProperty label={`${_t('VelocitySpread')}X`}
+                name={'velocitySpreadX'}
+                value={velocitySpreadX}
+                onChange={this.handleChangeVelocity}
+            />
+            <NumberProperty label={`${_t('VelocitySpread')}Y`}
+                name={'velocitySpreadY'}
+                value={velocitySpreadY}
+                onChange={this.handleChangeVelocity}
+            />
+            <NumberProperty label={`${_t('VelocitySpread')}Z`}
+                name={'velocitySpreadZ'}
+                value={velocitySpreadZ}
+                onChange={this.handleChangeVelocity}
+            />
 
-            <NumberProperty label={`${_t('Acceleration')}X`} name={'accelerationX'} value={accelerationX} onChange={this.handleChangeAcceleration}></NumberProperty>
-            <NumberProperty label={`${_t('Acceleration')}Y`} name={'accelerationY'} value={accelerationY} onChange={this.handleChangeAcceleration}></NumberProperty>
-            <NumberProperty label={`${_t('Acceleration')}Z`} name={'accelerationZ'} value={accelerationZ} onChange={this.handleChangeAcceleration}></NumberProperty>
-            <NumberProperty label={`${_t('AccelerationSpread')}X`} name={'accelerationSpreadX'} value={accelerationSpreadX} onChange={this.handleChangeAcceleration}></NumberProperty>
-            <NumberProperty label={`${_t('AccelerationSpread')}Y`} name={'accelerationSpreadY'} value={accelerationSpreadY} onChange={this.handleChangeAcceleration}></NumberProperty>
-            <NumberProperty label={`${_t('AccelerationSpread')}Z`} name={'accelerationSpreadZ'} value={accelerationSpreadZ} onChange={this.handleChangeAcceleration}></NumberProperty>
+            <NumberProperty label={`${_t('Acceleration')}X`}
+                name={'accelerationX'}
+                value={accelerationX}
+                onChange={this.handleChangeAcceleration}
+            />
+            <NumberProperty label={`${_t('Acceleration')}Y`}
+                name={'accelerationY'}
+                value={accelerationY}
+                onChange={this.handleChangeAcceleration}
+            />
+            <NumberProperty label={`${_t('Acceleration')}Z`}
+                name={'accelerationZ'}
+                value={accelerationZ}
+                onChange={this.handleChangeAcceleration}
+            />
+            <NumberProperty label={`${_t('AccelerationSpread')}X`}
+                name={'accelerationSpreadX'}
+                value={accelerationSpreadX}
+                onChange={this.handleChangeAcceleration}
+            />
+            <NumberProperty label={`${_t('AccelerationSpread')}Y`}
+                name={'accelerationSpreadY'}
+                value={accelerationSpreadY}
+                onChange={this.handleChangeAcceleration}
+            />
+            <NumberProperty label={`${_t('AccelerationSpread')}Z`}
+                name={'accelerationSpreadZ'}
+                value={accelerationSpreadZ}
+                onChange={this.handleChangeAcceleration}
+            />
 
-            <ColorProperty label={`${_t('Color')}1`} name={'color1'} value={color1} onChange={this.handleChangeColor}></ColorProperty>
-            <ColorProperty label={`${_t('Color')}2`} name={'color2'} value={color2} onChange={this.handleChangeColor}></ColorProperty>
-            <ColorProperty label={`${_t('Color')}3`} name={'color3'} value={color3} onChange={this.handleChangeColor}></ColorProperty>
-            <ColorProperty label={`${_t('Color')}4`} name={'color4'} value={color4} onChange={this.handleChangeColor}></ColorProperty>
+            <ColorProperty label={`${_t('Color')}1`}
+                name={'color1'}
+                value={color1}
+                onChange={this.handleChangeColor}
+            />
+            <ColorProperty label={`${_t('Color')}2`}
+                name={'color2'}
+                value={color2}
+                onChange={this.handleChangeColor}
+            />
+            <ColorProperty label={`${_t('Color')}3`}
+                name={'color3'}
+                value={color3}
+                onChange={this.handleChangeColor}
+            />
+            <ColorProperty label={`${_t('Color')}4`}
+                name={'color4'}
+                value={color4}
+                onChange={this.handleChangeColor}
+            />
 
-            <NumberProperty label={`${_t('Size')}`} name={'size'} value={size} onChange={this.handleChangeSize}></NumberProperty>
-            <NumberProperty label={`${_t('SizeSpread')}`} name={'sizeSpread'} value={sizeSpread} onChange={this.handleChangeSize}></NumberProperty>
+            <NumberProperty label={`${_t('Size')}`}
+                name={'size'}
+                value={size}
+                onChange={this.handleChangeSize}
+            />
+            <NumberProperty label={`${_t('SizeSpread')}`}
+                name={'sizeSpread'}
+                value={sizeSpread}
+                onChange={this.handleChangeSize}
+            />
 
-            <TextureProperty label={`${_t('Texture')}`} name={'texture'} value={texture} onChange={this.handleChangeTexture}></TextureProperty>
+            <TextureProperty label={`${_t('Texture')}`}
+                name={'texture'}
+                value={texture}
+                onChange={this.handleChangeTexture}
+            />
 
-            <IntegerProperty label={`${_t('ParticleCount')}`} name={'particleCount'} value={particleCount} onChange={this.handleChangeParticleCount}></IntegerProperty>
-            <NumberProperty label={`${_t('MaxAge')}`} name={'maxAge'} value={maxAge} onChange={this.handleChangeMaxAge}></NumberProperty>
-            <NumberProperty label={`${_t('maxAgeSpread')}`} name={'maxAgeSpread'} value={maxAgeSpread} onChange={this.maxAgeSpread}></NumberProperty>
+            <IntegerProperty label={`${_t('ParticleCount')}`}
+                name={'particleCount'}
+                value={particleCount}
+                onChange={this.handleChangeParticleCount}
+            />
+            <NumberProperty label={`${_t('MaxAge')}`}
+                name={'maxAge'}
+                value={maxAge}
+                onChange={this.handleChangeMaxAge}
+            />
+            <NumberProperty label={`${_t('maxAgeSpread')}`}
+                name={'maxAgeSpread'}
+                value={maxAgeSpread}
+                onChange={this.maxAgeSpread}
+            />
 
-            <ButtonProperty text={previewText} onChange={this.handlePreview}></ButtonProperty>
+            <ButtonProperty text={previewText}
+                onChange={this.handlePreview}
+            />
         </PropertyGroup>;
     }
 
@@ -133,7 +248,7 @@ class ParticleEmitterComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -142,7 +257,7 @@ class ParticleEmitterComponent extends React.Component {
 
         if (!editor.selected || !(editor.selected.userData.type === 'ParticleEmitter')) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -199,7 +314,7 @@ class ParticleEmitterComponent extends React.Component {
 
     handleChangePosition(value, name) {
         this.setState({
-            [name]: value,
+            [name]: value
         });
 
         if (value === null) {
@@ -207,7 +322,7 @@ class ParticleEmitterComponent extends React.Component {
         }
 
         const { positionX, positionY, positionZ, positionSpreadX, positionSpreadY, positionSpreadZ } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
@@ -228,7 +343,7 @@ class ParticleEmitterComponent extends React.Component {
 
     handleChangeVelocity(value, name) {
         this.setState({
-            [name]: value,
+            [name]: value
         });
 
         if (value === null) {
@@ -236,7 +351,7 @@ class ParticleEmitterComponent extends React.Component {
         }
 
         const { velocityX, velocityY, velocityZ, velocitySpreadX, velocitySpreadY, velocitySpreadZ } = Object.assign({}, this.selected, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
@@ -258,13 +373,13 @@ class ParticleEmitterComponent extends React.Component {
     handleChangeAcceleration(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { accelerationX, accelerationY, accelerationZ, accelerationSpreadX, accelerationSpreadY, accelerationSpreadZ } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
@@ -286,13 +401,13 @@ class ParticleEmitterComponent extends React.Component {
     handleChangeColor(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { color1, color2, color3, color4 } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
@@ -311,13 +426,13 @@ class ParticleEmitterComponent extends React.Component {
     handleChangeSize(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { size, sizeSpread } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
@@ -336,17 +451,16 @@ class ParticleEmitterComponent extends React.Component {
     handleChangeTexture(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { texture } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
-        let emitter = group.emitters[0];
 
         texture.needsUpdate = true;
 
@@ -359,13 +473,13 @@ class ParticleEmitterComponent extends React.Component {
     handleChangeParticleCount(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { particleCount } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
@@ -381,13 +495,13 @@ class ParticleEmitterComponent extends React.Component {
     handleChangeMaxAge(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { maxAge } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
@@ -403,13 +517,13 @@ class ParticleEmitterComponent extends React.Component {
     handleChangeMaxAgeSpread(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { maxAgeSpread } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let group = this.selected.userData.group;
@@ -434,7 +548,7 @@ class ParticleEmitterComponent extends React.Component {
         this.isPlaying = true;
 
         this.setState({
-            previewText: _t('Cancel'),
+            previewText: _t('Cancel')
         });
 
         app.on(`animate.ParticleEmitterComponent`, this.onAnimate);
@@ -444,7 +558,7 @@ class ParticleEmitterComponent extends React.Component {
         this.isPlaying = false;
 
         this.setState({
-            previewText: _t('Preview'),
+            previewText: _t('Preview')
         });
 
         let group = this.selected.userData.group;
diff --git a/ShadowEditor.Web/src/editor/component/ReflectorComponent.jsx b/ShadowEditor.Web/src/editor/component/ReflectorComponent.jsx
index cc696e5b..c27cbbb4 100644
--- a/ShadowEditor.Web/src/editor/component/ReflectorComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/ReflectorComponent.jsx
@@ -1,7 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
-import Converter from '../../utils/Converter';
-import Ajax from '../../utils/Ajax';
+import { PropertyGroup, CheckBoxProperty, NumberProperty, SelectProperty, ColorProperty } from '../../third_party';
 
 /**
  * 反光组件
@@ -16,7 +13,7 @@ class ReflectorComponent extends React.Component {
         this.sizes = {
             '512': '512*512',
             '1024': '1024*1024',
-            '2048': '2048*2048',
+            '2048': '2048*2048'
         };
 
         this.state = {
@@ -31,7 +28,7 @@ class ReflectorComponent extends React.Component {
             showClipBias: false,
             clipBias: 0,
             showRecursion: false,
-            recursion: false,
+            recursion: false
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -47,12 +44,41 @@ class ReflectorComponent extends React.Component {
             return null;
         }
 
-        return <PropertyGroup title={_t('Reflector Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <CheckBoxProperty label={_t('Reflect')} name={'reflect'} value={reflect} onChange={this.handleChange}></CheckBoxProperty>
-            <ColorProperty label={_t('Color')} name={'color'} value={color} show={showColor} onChange={this.handleChange}></ColorProperty>
-            <SelectProperty label={_t('TextureSize')} name={'size'} options={this.sizes} value={size} show={showSize} onChange={this.handleChange}></SelectProperty>
-            <NumberProperty label={_t('ClipBias')} name={'clipBias'} value={clipBias} show={showClipBias} onChange={this.handleChange}></NumberProperty>
-            <CheckBoxProperty label={_t('Recursion')} name={'recursion'} value={recursion} show={showRecursion} onChange={this.handleChange}></CheckBoxProperty>
+        return <PropertyGroup title={_t('Reflector Component')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               >
+            <CheckBoxProperty label={_t('Reflect')}
+                name={'reflect'}
+                value={reflect}
+                onChange={this.handleChange}
+            />
+            <ColorProperty label={_t('Color')}
+                name={'color'}
+                value={color}
+                show={showColor}
+                onChange={this.handleChange}
+            />
+            <SelectProperty label={_t('TextureSize')}
+                name={'size'}
+                options={this.sizes}
+                value={size}
+                show={showSize}
+                onChange={this.handleChange}
+            />
+            <NumberProperty label={_t('ClipBias')}
+                name={'clipBias'}
+                value={clipBias}
+                show={showClipBias}
+                onChange={this.handleChange}
+            />
+            <CheckBoxProperty label={_t('Recursion')}
+                name={'recursion'}
+                value={recursion}
+                show={showRecursion}
+                onChange={this.handleChange}
+            />
         </PropertyGroup>;
     }
 
@@ -63,7 +89,7 @@ class ReflectorComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -72,7 +98,7 @@ class ReflectorComponent extends React.Component {
 
         if (!editor.selected || !(editor.selected instanceof THREE.Mesh)) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -80,7 +106,7 @@ class ReflectorComponent extends React.Component {
         this.selected = editor.selected;
 
         let state = {
-            show: true,
+            show: true
         };
 
         if (this.selected instanceof THREE.Reflector) {
@@ -93,7 +119,7 @@ class ReflectorComponent extends React.Component {
                 showClipBias: true,
                 clipBias: this.selected.userData.clipBias,
                 showRecursion: true,
-                recursion: this.selected.userData.recursion,
+                recursion: this.selected.userData.recursion
             });
         } else {
             Object.assign(state, {
@@ -101,7 +127,7 @@ class ReflectorComponent extends React.Component {
                 showColor: false,
                 showSize: false,
                 showClipBias: false,
-                showRecursion: false,
+                showRecursion: false
             });
         }
 
@@ -111,13 +137,13 @@ class ReflectorComponent extends React.Component {
     handleChange(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { reflect, color, size, clipBias, recursion } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         let editor = app.editor;
diff --git a/ShadowEditor.Web/src/editor/component/SceneComponent.jsx b/ShadowEditor.Web/src/editor/component/SceneComponent.jsx
index b0e07f31..56f44db5 100644
--- a/ShadowEditor.Web/src/editor/component/SceneComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/SceneComponent.jsx
@@ -1,5 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
+import { PropertyGroup, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
 import Converter from '../../utils/Converter';
 import Ajax from '../../utils/Ajax';
 
@@ -81,7 +80,7 @@ class SceneComponent extends React.Component {
 
     render() {
         const { show, expanded, backgroundType, backgroundColor, backgroundColorShow, backgroundImage, backgroundImageShow,
-            backgroundPosX, backgroundNegX, backgroundPosY, backgroundNegY, backgroundPosZ, backgroundNegZ, backgroundCubeTextureShow, backgroundCubeTextureCommandShow,
+            backgroundPosX, backgroundNegX, backgroundPosY, backgroundNegY, backgroundPosZ, backgroundNegZ, backgroundCubeTextureShow,
             fogType, fogColor, fogColorShow, fogNear, fogNearShow, fogFar, fogFarShow, fogDensity, fogDensityShow } = this.state;
 
         if (!show) {
diff --git a/ShadowEditor.Web/src/editor/component/ScriptComponent.jsx b/ShadowEditor.Web/src/editor/component/ScriptComponent.jsx
index d10afe9c..79d390c7 100644
--- a/ShadowEditor.Web/src/editor/component/ScriptComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/ScriptComponent.jsx
@@ -1,7 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
-import Converter from '../../utils/Converter';
-import Ajax from '../../utils/Ajax';
+import { PropertyGroup } from '../../third_party';
 
 /**
  * 脚本组件
@@ -15,7 +12,7 @@ class ScriptComponent extends React.Component {
 
         this.state = {
             show: false,
-            expanded: true,
+            expanded: true
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -29,8 +26,11 @@ class ScriptComponent extends React.Component {
             return null;
         }
 
-        return <PropertyGroup title={_t('ScriptComponent')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-        </PropertyGroup>;
+        return <PropertyGroup title={_t('ScriptComponent')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               />;
     }
 
     componentDidMount() {
@@ -40,7 +40,7 @@ class ScriptComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -49,7 +49,7 @@ class ScriptComponent extends React.Component {
 
         if (!editor.selected || !editor.selected.userData) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -57,7 +57,7 @@ class ScriptComponent extends React.Component {
         this.selected = editor.selected;
 
         let state = {
-            show: true,
+            show: true
         };
 
         this.setState(state);
diff --git a/ShadowEditor.Web/src/editor/component/ShadowComponent.jsx b/ShadowEditor.Web/src/editor/component/ShadowComponent.jsx
index 883e5865..75dd966d 100644
--- a/ShadowEditor.Web/src/editor/component/ShadowComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/ShadowComponent.jsx
@@ -1,5 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
+import { PropertyGroup, CheckBoxProperty, NumberProperty, SelectProperty } from '../../third_party';
 
 /**
  * 阴影组件
@@ -15,7 +14,7 @@ class ShadowComponent extends React.Component {
             '512': '512*512',
             '1024': '1024*1024',
             '2048': '2048*2048',
-            '4096': '4096*4096',
+            '4096': '4096*4096'
         };
 
         this.state = {
@@ -43,7 +42,7 @@ class ShadowComponent extends React.Component {
             cameraBottom: -5,
             cameraNear: 0.5,
             cameraFar: 1000,
-            cameraShow: false,
+            cameraShow: false
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -69,18 +68,78 @@ class ShadowComponent extends React.Component {
             return null;
         }
 
-        return <PropertyGroup title={_t('Shadow Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <CheckBoxProperty label={_t('Cast')} name={'castShadow'} value={castShadow} show={castShadowShow} onChange={this.handleChangeCastShadow}></CheckBoxProperty>
-            <CheckBoxProperty label={_t('Receive')} name={'receiveShadow'} value={receiveShadow} show={receiveShadowShow} onChange={this.handleChangeReceiveShadow}></CheckBoxProperty>
-            <NumberProperty label={_t('Radius')} name={'shadowRadius'} value={shadowRadius} show={shadowRadiusShow} onChange={this.handleChangeShadowRadius}></NumberProperty>
-            <SelectProperty label={_t('MapSize')} options={this.mapSize} name={'mapSize'} value={mapSize.toString()} show={mapSizeShow} onChange={this.handleChangeMapSize}></SelectProperty>
-            <NumberProperty label={_t('Bias')} name={'bias'} value={bias} show={biasShow} onChange={this.handleChangeBias}></NumberProperty>
-            <NumberProperty label={_t('CameraLeft')} name={'cameraLeft'} value={cameraLeft} show={cameraShow} onChange={this.handleChangeCameraLeft}></NumberProperty>
-            <NumberProperty label={_t('CameraRight')} name={'cameraRight'} value={cameraRight} show={cameraShow} onChange={this.handleChangeCameraRight}></NumberProperty>
-            <NumberProperty label={_t('CameraTop')} name={'cameraTop'} value={cameraTop} show={cameraShow} onChange={this.handleChangeCameraTop}></NumberProperty>
-            <NumberProperty label={_t('CameraBottom')} name={'cameraBottom'} value={cameraBottom} show={cameraShow} onChange={this.handleChangeCameraBottom}></NumberProperty>
-            <NumberProperty label={_t('CameraNear')} name={'cameraNear'} value={cameraNear} show={cameraShow} onChange={this.handleChangeCameraNear}></NumberProperty>
-            <NumberProperty label={_t('CameraFar')} name={'cameraFar'} value={cameraFar} show={cameraShow} onChange={this.handleChangeCameraFar}></NumberProperty>
+        return <PropertyGroup title={_t('Shadow Component')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               >
+            <CheckBoxProperty label={_t('Cast')}
+                name={'castShadow'}
+                value={castShadow}
+                show={castShadowShow}
+                onChange={this.handleChangeCastShadow}
+            />
+            <CheckBoxProperty label={_t('Receive')}
+                name={'receiveShadow'}
+                value={receiveShadow}
+                show={receiveShadowShow}
+                onChange={this.handleChangeReceiveShadow}
+            />
+            <NumberProperty label={_t('Radius')}
+                name={'shadowRadius'}
+                value={shadowRadius}
+                show={shadowRadiusShow}
+                onChange={this.handleChangeShadowRadius}
+            />
+            <SelectProperty label={_t('MapSize')}
+                options={this.mapSize}
+                name={'mapSize'}
+                value={mapSize.toString()}
+                show={mapSizeShow}
+                onChange={this.handleChangeMapSize}
+            />
+            <NumberProperty label={_t('Bias')}
+                name={'bias'}
+                value={bias}
+                show={biasShow}
+                onChange={this.handleChangeBias}
+            />
+            <NumberProperty label={_t('CameraLeft')}
+                name={'cameraLeft'}
+                value={cameraLeft}
+                show={cameraShow}
+                onChange={this.handleChangeCameraLeft}
+            />
+            <NumberProperty label={_t('CameraRight')}
+                name={'cameraRight'}
+                value={cameraRight}
+                show={cameraShow}
+                onChange={this.handleChangeCameraRight}
+            />
+            <NumberProperty label={_t('CameraTop')}
+                name={'cameraTop'}
+                value={cameraTop}
+                show={cameraShow}
+                onChange={this.handleChangeCameraTop}
+            />
+            <NumberProperty label={_t('CameraBottom')}
+                name={'cameraBottom'}
+                value={cameraBottom}
+                show={cameraShow}
+                onChange={this.handleChangeCameraBottom}
+            />
+            <NumberProperty label={_t('CameraNear')}
+                name={'cameraNear'}
+                value={cameraNear}
+                show={cameraShow}
+                onChange={this.handleChangeCameraNear}
+            />
+            <NumberProperty label={_t('CameraFar')}
+                name={'cameraFar'}
+                value={cameraFar}
+                show={cameraShow}
+                onChange={this.handleChangeCameraFar}
+            />
         </PropertyGroup>;
     }
 
@@ -91,7 +150,7 @@ class ShadowComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -100,7 +159,7 @@ class ShadowComponent extends React.Component {
 
         if (!editor.selected || !(editor.selected instanceof THREE.Mesh || editor.selected instanceof THREE.DirectionalLight || editor.selected instanceof THREE.PointLight || editor.selected instanceof THREE.SpotLight)) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -110,7 +169,7 @@ class ShadowComponent extends React.Component {
         let state = {
             show: true,
             castShadow: this.selected.castShadow,
-            castShadowShow: true,
+            castShadowShow: true
         };
 
         if (this.selected instanceof THREE.Light) {
@@ -128,7 +187,7 @@ class ShadowComponent extends React.Component {
                 cameraBottom: this.selected.shadow.camera.bottom,
                 cameraNear: this.selected.shadow.camera.near,
                 cameraFar: this.selected.shadow.camera.far,
-                cameraShow: true,
+                cameraShow: true
             });
         } else {
             Object.assign(state, {
@@ -137,7 +196,7 @@ class ShadowComponent extends React.Component {
                 shadowRadiusShow: false,
                 mapSizeShow: false,
                 biasShow: false,
-                cameraShow: false,
+                cameraShow: false
             });
         }
 
@@ -147,7 +206,7 @@ class ShadowComponent extends React.Component {
     handleChangeCastShadow(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -164,7 +223,7 @@ class ShadowComponent extends React.Component {
     handleChangeReceiveShadow(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -181,7 +240,7 @@ class ShadowComponent extends React.Component {
     handleChangeShadowRadius(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -201,7 +260,7 @@ class ShadowComponent extends React.Component {
         }
     }
 
-    handleChangeMapSize(value, name) {
+    handleChangeMapSize(value) {
         this.selected.shadow.mapSize.x = this.selected.shadow.mapSize.y = parseInt(value);
 
         app.call(`objectChanged`, this, this.selected);
@@ -210,7 +269,7 @@ class ShadowComponent extends React.Component {
     handleChangeBias(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -223,7 +282,7 @@ class ShadowComponent extends React.Component {
     handleChangeCameraLeft(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -237,7 +296,7 @@ class ShadowComponent extends React.Component {
     handleChangeCameraRight(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -251,7 +310,7 @@ class ShadowComponent extends React.Component {
     handleChangeCameraTop(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -265,7 +324,7 @@ class ShadowComponent extends React.Component {
     handleChangeCameraBottom(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -279,7 +338,7 @@ class ShadowComponent extends React.Component {
     handleChangeCameraNear(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
@@ -293,7 +352,7 @@ class ShadowComponent extends React.Component {
     handleChangeCameraFar(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
diff --git a/ShadowEditor.Web/src/editor/component/SmokeComponent.jsx b/ShadowEditor.Web/src/editor/component/SmokeComponent.jsx
index 8af118f8..628ca518 100644
--- a/ShadowEditor.Web/src/editor/component/SmokeComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/SmokeComponent.jsx
@@ -1,5 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
+import { PropertyGroup, ButtonProperty, NumberProperty } from '../../third_party';
 
 /**
  * 烟组件
@@ -17,7 +16,7 @@ class SmokeComponent extends React.Component {
             expanded: true,
             size: 2,
             lifetime: 10,
-            previewText: _t('Preview'),
+            previewText: _t('Preview')
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -34,10 +33,24 @@ class SmokeComponent extends React.Component {
             return null;
         }
 
-        return <PropertyGroup title={_t('SmokeComponent')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <NumberProperty label={_t('Size')} name={'size'} value={size} onChange={this.handleChange}></NumberProperty>
-            <NumberProperty label={_t('TimeSpan')} name={'lifetime'} value={lifetime} onChange={this.handleChange}></NumberProperty>
-            <ButtonProperty text={previewText} onChange={this.handlePreview}></ButtonProperty>
+        return <PropertyGroup title={_t('SmokeComponent')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               >
+            <NumberProperty label={_t('Size')}
+                name={'size'}
+                value={size}
+                onChange={this.handleChange}
+            />
+            <NumberProperty label={_t('TimeSpan')}
+                name={'lifetime'}
+                value={lifetime}
+                onChange={this.handleChange}
+            />
+            <ButtonProperty text={previewText}
+                onChange={this.handlePreview}
+            />
         </PropertyGroup>;
     }
 
@@ -48,7 +61,7 @@ class SmokeComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -57,7 +70,7 @@ class SmokeComponent extends React.Component {
 
         if (!editor.selected || !(editor.selected.userData.type === 'Smoke')) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -68,23 +81,23 @@ class SmokeComponent extends React.Component {
             show: true,
             size: this.selected.userData.size,
             lifetime: this.selected.userData.lifetime,
-            previewText: this.isPlaying ? _t('Cancel') : _t('Preview'),
+            previewText: this.isPlaying ? _t('Cancel') : _t('Preview')
         });
     }
 
     handleChange(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { size, lifetime } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
-        this.selected.userData.size = size
+        this.selected.userData.size = size;
         this.selected.userData.lifetime = lifetime;
 
         this.selected.material.uniforms.size.value = size;
@@ -105,7 +118,7 @@ class SmokeComponent extends React.Component {
         this.isPlaying = true;
 
         this.setState({
-            previewText: _t('Cancel'),
+            previewText: _t('Cancel')
         });
 
         app.on(`animate.SmokeComponent`, this.onAnimate);
@@ -115,13 +128,13 @@ class SmokeComponent extends React.Component {
         this.isPlaying = false;
 
         this.setState({
-            previewText: _t('Preview'),
+            previewText: _t('Preview')
         });
 
         app.on(`animate.SmokeComponent`, null);
     }
 
-    onAnimate(clock, deltaTime) {
+    onAnimate(clock) {
         const elapsed = clock.getElapsedTime();
         this.selected.update(elapsed);
     }
diff --git a/ShadowEditor.Web/src/editor/component/TransformComponent.jsx b/ShadowEditor.Web/src/editor/component/TransformComponent.jsx
index fcc3d122..22426425 100644
--- a/ShadowEditor.Web/src/editor/component/TransformComponent.jsx
+++ b/ShadowEditor.Web/src/editor/component/TransformComponent.jsx
@@ -1,5 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty, SelectProperty } from '../../third_party';
-import SetValueCommand from '../../command/SetValueCommand';
+import { PropertyGroup, CheckBoxProperty, NumberProperty } from '../../third_party';
 import SetPositionCommand from '../../command/SetPositionCommand';
 import SetRotationCommand from '../../command/SetRotationCommand';
 import SetScaleCommand from '../../command/SetScaleCommand';
@@ -26,7 +25,7 @@ class TransformComponent extends React.Component {
             scaleX: 1.0,
             scaleY: 1.0,
             scaleZ: 1.0,
-            scaleLocked: true,
+            scaleLocked: true
         };
 
         this.handleExpand = this.handleExpand.bind(this);
@@ -44,17 +43,61 @@ class TransformComponent extends React.Component {
             return null;
         }
 
-        return <PropertyGroup title={_t('Transform Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <NumberProperty name={'positionX'} label={`${_t('Translate')}X`} value={positionX} onChange={this.handleChangePosition}></NumberProperty>
-            <NumberProperty name={'positionY'} label={`${_t('Translate')}Y`} value={positionY} onChange={this.handleChangePosition}></NumberProperty>
-            <NumberProperty name={'positionZ'} label={`${_t('Translate')}Z`} value={positionZ} onChange={this.handleChangePosition}></NumberProperty>
-            <NumberProperty name={'rotationX'} label={`${_t('Rotate')}X`} value={rotationX} onChange={this.handleChangeRotation}></NumberProperty>
-            <NumberProperty name={'rotationY'} label={`${_t('Rotate')}Y`} value={rotationY} onChange={this.handleChangeRotation}></NumberProperty>
-            <NumberProperty name={'rotationZ'} label={`${_t('Rotate')}Z`} value={rotationZ} onChange={this.handleChangeRotation}></NumberProperty>
-            <NumberProperty name={'scaleX'} label={`${_t('Scale')}X`} value={scaleX} onChange={this.handleChangeScale}></NumberProperty>
-            <NumberProperty name={'scaleY'} label={`${_t('Scale')}Y`} value={scaleY} onChange={this.handleChangeScale}></NumberProperty>
-            <NumberProperty name={'scaleZ'} label={`${_t('Scale')}Z`} value={scaleZ} onChange={this.handleChangeScale}></NumberProperty>
-            <CheckBoxProperty name={'scaleLocked'} label={_t('Scale Locked')} value={scaleLocked} onChange={this.handleChangeScaleLock}></CheckBoxProperty>
+        return <PropertyGroup title={_t('Transform Component')}
+            show={show}
+            expanded={expanded}
+            onExpand={this.handleExpand}
+               >
+            <NumberProperty name={'positionX'}
+                label={`${_t('Translate')}X`}
+                value={positionX}
+                onChange={this.handleChangePosition}
+            />
+            <NumberProperty name={'positionY'}
+                label={`${_t('Translate')}Y`}
+                value={positionY}
+                onChange={this.handleChangePosition}
+            />
+            <NumberProperty name={'positionZ'}
+                label={`${_t('Translate')}Z`}
+                value={positionZ}
+                onChange={this.handleChangePosition}
+            />
+            <NumberProperty name={'rotationX'}
+                label={`${_t('Rotate')}X`}
+                value={rotationX}
+                onChange={this.handleChangeRotation}
+            />
+            <NumberProperty name={'rotationY'}
+                label={`${_t('Rotate')}Y`}
+                value={rotationY}
+                onChange={this.handleChangeRotation}
+            />
+            <NumberProperty name={'rotationZ'}
+                label={`${_t('Rotate')}Z`}
+                value={rotationZ}
+                onChange={this.handleChangeRotation}
+            />
+            <NumberProperty name={'scaleX'}
+                label={`${_t('Scale')}X`}
+                value={scaleX}
+                onChange={this.handleChangeScale}
+            />
+            <NumberProperty name={'scaleY'}
+                label={`${_t('Scale')}Y`}
+                value={scaleY}
+                onChange={this.handleChangeScale}
+            />
+            <NumberProperty name={'scaleZ'}
+                label={`${_t('Scale')}Z`}
+                value={scaleZ}
+                onChange={this.handleChangeScale}
+            />
+            <CheckBoxProperty name={'scaleLocked'}
+                label={_t('Scale Locked')}
+                value={scaleLocked}
+                onChange={this.handleChangeScaleLock}
+            />
         </PropertyGroup>;
     }
 
@@ -65,7 +108,7 @@ class TransformComponent extends React.Component {
 
     handleExpand(expanded) {
         this.setState({
-            expanded,
+            expanded
         });
     }
 
@@ -74,7 +117,7 @@ class TransformComponent extends React.Component {
 
         if (!editor.selected || editor.selected === app.editor.scene || editor.selected.isGlobe) {
             this.setState({
-                show: false,
+                show: false
             });
             return;
         }
@@ -91,20 +134,20 @@ class TransformComponent extends React.Component {
             rotationZ: this.selected.rotation.z * 180 / Math.PI,
             scaleX: this.selected.scale.x,
             scaleY: this.selected.scale.y,
-            scaleZ: this.selected.scale.z,
+            scaleZ: this.selected.scale.z
         });
     }
 
     handleChangePosition(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { positionX, positionY, positionZ } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         app.editor.execute(new SetPositionCommand(this.selected, new THREE.Vector3(
@@ -119,13 +162,13 @@ class TransformComponent extends React.Component {
     handleChangeRotation(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { rotationX, rotationY, rotationZ } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         app.editor.execute(new SetRotationCommand(this.selected, new THREE.Euler(
@@ -140,13 +183,13 @@ class TransformComponent extends React.Component {
     handleChangeScale(value, name) {
         if (value === null) {
             this.setState({
-                [name]: value,
+                [name]: value
             });
             return;
         }
 
         const { scaleX, scaleY, scaleZ, scaleLocked } = Object.assign({}, this.state, {
-            [name]: value,
+            [name]: value
         });
 
         if (scaleLocked) {
@@ -160,7 +203,7 @@ class TransformComponent extends React.Component {
 
     handleChangeScaleLock(value, name) {
         this.setState({
-            scaleLocked: value,
+            scaleLocked: value
         });
     }
 }
diff --git a/ShadowEditor.Web/src/editor/sidebar/AnimationPropertyPanel.jsx b/ShadowEditor.Web/src/editor/sidebar/AnimationPropertyPanel.jsx
index 07abdf44..caa42848 100644
--- a/ShadowEditor.Web/src/editor/sidebar/AnimationPropertyPanel.jsx
+++ b/ShadowEditor.Web/src/editor/sidebar/AnimationPropertyPanel.jsx
@@ -1,5 +1,5 @@
 import './css/AnimationPropertyPanel.css';
-import { classNames, PropTypes, PropertyGrid } from '../../third_party';
+import { PropertyGrid } from '../../third_party';
 
 import BasicAnimationComponent from '../component/animation/BasicAnimationComponent.jsx';
 import TweenAnimationComponent from '../component/animation/TweenAnimationComponent.jsx';
@@ -15,8 +15,8 @@ class AnimationPropertyPanel extends React.Component {
 
     render() {
         return <PropertyGrid>
-            <BasicAnimationComponent></BasicAnimationComponent>
-            <TweenAnimationComponent></TweenAnimationComponent>
+            <BasicAnimationComponent />
+            <TweenAnimationComponent />
         </PropertyGrid>;
     }
 }
diff --git a/ShadowEditor.Web/src/editor/sidebar/HistoryPanel.jsx b/ShadowEditor.Web/src/editor/sidebar/HistoryPanel.jsx
index 300825e5..c6b7a409 100644
--- a/ShadowEditor.Web/src/editor/sidebar/HistoryPanel.jsx
+++ b/ShadowEditor.Web/src/editor/sidebar/HistoryPanel.jsx
@@ -1,5 +1,5 @@
 import './css/HistoryPanel.css';
-import { classNames, PropTypes, Button } from '../../third_party';
+import { Button } from '../../third_party';
 
 /**
  * 历史面板
@@ -11,7 +11,7 @@ class HistoryPanel extends React.Component {
 
         this.state = {
             undos: [],
-            redos: [],
+            redos: []
         };
 
         this.ref = React.createRef();
@@ -28,12 +28,23 @@ class HistoryPanel extends React.Component {
             <div className={'toolbar'}>
                 <Button onClick={this.handleClear}>{_t('Clear')}</Button>
             </div>
-            <div className={'content'} ref={this.ref} onClick={this.handleClick}>
+            <div className={'content'}
+                ref={this.ref}
+                onClick={this.handleClick}
+            >
                 {undos.map(n => {
-                    return <div className={'undo'} value={n.id} key={n.id} onClick={this.handleClick}>{n.name}</div>;
+                    return <div className={'undo'}
+                        value={n.id}
+                        key={n.id}
+                        onClick={this.handleClick}
+                           >{n.name}</div>;
                 })}
                 {redos.map(n => {
-                    return <div className={'redo'} value={n.id} key={n.id} onClick={this.handleClick}>{n.name}</div>;
+                    return <div className={'redo'}
+                        value={n.id}
+                        key={n.id}
+                        onClick={this.handleClick}
+                           >{n.name}</div>;
                 })}
             </div>
         </div>;
@@ -57,14 +68,14 @@ class HistoryPanel extends React.Component {
         history.undos.forEach(n => {
             undos.push({
                 id: n.id,
-                name: n.name,
+                name: n.name
             });
         });
 
         history.redos.forEach(n => {
             redos.push({
                 id: n.id,
-                name: n.name,
+                name: n.name
             });
         });
 
diff --git a/ShadowEditor.Web/src/editor/sidebar/ScriptPanel.jsx b/ShadowEditor.Web/src/editor/sidebar/ScriptPanel.jsx
index eaf6b455..00b549da 100644
--- a/ShadowEditor.Web/src/editor/sidebar/ScriptPanel.jsx
+++ b/ShadowEditor.Web/src/editor/sidebar/ScriptPanel.jsx
@@ -1,5 +1,5 @@
 import './css/ScriptPanel.css';
-import { classNames, PropTypes, Button, IconButton, Icon } from '../../third_party';
+import { Button, Icon } from '../../third_party';
 import ScriptWindow from './window/ScriptWindow.jsx';
 
 /**
@@ -11,7 +11,7 @@ class ScriptPanel extends React.Component {
         super(props);
 
         this.state = {
-            scripts: {},
+            scripts: {}
         };
 
         this.handleAddScript = this.handleAddScript.bind(this);
@@ -32,8 +32,16 @@ class ScriptPanel extends React.Component {
                 {Object.values(scripts).map(n => {
                     return <li key={n.uuid}>
                         <span>{`${n.name}.${this.getExtension(n.type)}`}</span>
-                        <Icon name={n.uuid} icon={'edit'} title={_t('Edit Script')} onClick={this.handleEditScript}></Icon>
-                        <Icon name={n.uuid} icon={'delete'} title={_t('Delete Script')} onClick={this.handleRemoveScript}></Icon>
+                        <Icon name={n.uuid}
+                            icon={'edit'}
+                            title={_t('Edit Script')}
+                            onClick={this.handleEditScript}
+                        />
+                        <Icon name={n.uuid}
+                            icon={'delete'}
+                            title={_t('Delete Script')}
+                            onClick={this.handleRemoveScript}
+                        />
                     </li>;
                 })}
             </ul>
@@ -67,7 +75,7 @@ class ScriptPanel extends React.Component {
 
     update() {
         this.setState({
-            scripts: app.editor.scripts,
+            scripts: app.editor.scripts
         });
     }
 
@@ -89,7 +97,7 @@ class ScriptPanel extends React.Component {
             uuid,
             name,
             type,
-            source,
+            source
         };
 
         app.call(`scriptChanged`, this);