ClothComponent

ShadowEditor.Web/src/editor2/component/object/ClothComponent.jsx

@@ -0,0 +1,101 @@
+import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty } from '../../../third_party';
+import SetValueCommand from '../../../command/SetValueCommand';
+
+/**
+ * 布组件
+ * @author tengge / https://github.com/tengge1
+ */
+class ClothComponent extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.selected = null;
+        this.isPlaying = false;
+
+        this.state = {
+            show: false,
+            expanded: true,
+            previewText: L_PREVIEW,
+        };
+
+        this.handleExpand = this.handleExpand.bind(this);
+        this.handleUpdate = this.handleUpdate.bind(this);
+        this.handlePreview = this.handlePreview.bind(this);
+        this.onAnimate = this.onAnimate.bind(this);
+    }
+
+    render() {
+        const { show, expanded, previewText } = this.state;
+
+        if (!show) {
+            return null;
+        }
+
+        return <PropertyGroup title={L_CLOTH_COMPONENT} show={show} expanded={expanded} onExpand={this.handleExpand}>
+            <ButtonProperty text={previewText} onChange={this.handlePreview}></ButtonProperty>
+        </PropertyGroup>;
+    }
+
+    componentDidMount() {
+        app.on(`objectSelected.ClothComponent`, this.handleUpdate);
+        app.on(`objectChanged.ClothComponent`, this.handleUpdate);
+    }
+
+    handleExpand(expanded) {
+        this.setState({
+            expanded,
+        });
+    }
+
+    handleUpdate() {
+        const editor = app.editor;
+
+        if (!editor.selected || !(editor.selected.userData.type === 'Cloth')) {
+            this.setState({
+                show: false,
+            });
+            return;
+        }
+
+        this.selected = editor.selected;
+
+        this.setState({
+            show: true,
+            previewText: this.isPlaying ? L_CANCEL : L_PREVIEW,
+        });
+    }
+
+    handlePreview() {
+        if (this.isPlaying) {
+            this.stopPreview();
+        } else {
+            this.startPreview();
+        }
+    }
+
+    startPreview() {
+        this.isPlaying = true;
+
+        this.setState({
+            previewText: L_CANCEL,
+        });
+
+        app.on(`animate.${this.id}`, this.onAnimate);
+    }
+
+    stopPreview() {
+        this.isPlaying = false;
+
+        this.setState({
+            previewText: L_PREVIEW,
+        });
+
+        app.on(`animate.${this.id}`, null);
+    }
+
+    onAnimate(clock, deltaTime) {
+        this.selected.update();
+    }
+}
+
+export default ClothComponent;

ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx

@@ -7,6 +7,7 @@ import FireComponent from '../component/FireComponent.jsx';
 import WaterComponent from '../component/water/WaterComponent.jsx';
 import LightComponent from '../component/LightComponent.jsx';
 import LMeshComponent from '../component/LMeshComponent.jsx';
+import ClothComponent from '../component/object/ClothComponent.jsx';
 
 import BoxGeometryComponent from '../component/geometry/BoxGeometryComponent.jsx';
 import CircleGeometryComponent from '../component/geometry/CircleGeometryComponent.jsx';
@@ -65,6 +66,7 @@ class PropertyPanel extends React.Component {
             <WaterComponent></WaterComponent>
             <SmokeComponent></SmokeComponent>
             <LMeshComponent></LMeshComponent>
+            <ClothComponent></ClothComponent>
             <ParticleEmitterComponent></ParticleEmitterComponent>
             <MMDComponent></MMDComponent>