From f955cccbf56ec1926eeec7a9a5373f133bcfcd2b Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Thu, 18 Jul 2019 21:05:26 +0800
Subject: [PATCH] TorusKnotGeometryComponent

---
 .../geometry/TorusKnotGeometryComponent.jsx   | 95 +++++++++++++++++++
 .../src/editor2/sidebar/PropertyPanel.jsx     |  2 +
 2 files changed, 97 insertions(+)

diff --git a/ShadowEditor.Web/src/editor2/component/geometry/TorusKnotGeometryComponent.jsx b/ShadowEditor.Web/src/editor2/component/geometry/TorusKnotGeometryComponent.jsx
index e69de29b..b51264f7 100644
--- a/ShadowEditor.Web/src/editor2/component/geometry/TorusKnotGeometryComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/geometry/TorusKnotGeometryComponent.jsx
@@ -0,0 +1,95 @@
+import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty, IntegerProperty } from '../../../third_party';
+import SetGeometryCommand from '../../../command/SetGeometryCommand';
+
+/**
+ * 环面纽结组件
+ * @author tengge / https://github.com/tengge1
+ */
+class TorusKnotGeometryComponent extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.selected = null;
+
+        this.state = {
+            show: false,
+            expanded: true,
+            radius: 1,
+            tube: 1,
+            tubularSegments: 16,
+            radialSegments: 16,
+            p: 20,
+            q: 20,
+        };
+
+        this.handleExpand = this.handleExpand.bind(this);
+        this.handleUpdate = this.handleUpdate.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    render() {
+        const { show, expanded, radius, tube, tubularSegments, radialSegments, p, q } = this.state;
+
+        if (!show) {
+            return null;
+        }
+
+        return <PropertyGroup title={L_GEOMETRY_COMPONENT} show={show} expanded={expanded} onExpand={this.handleExpand}>
+            <NumberProperty name={'radius'} label={L_RADIUS} value={radius} onChange={this.handleChange}></NumberProperty>
+            <NumberProperty name={'tube'} label={L_TUBE} value={tube} onChange={this.handleChange}></NumberProperty>
+            <IntegerProperty name={'tubularSegments'} label={L_TUBULAR_SEGMENTS} value={tubularSegments} onChange={this.handleChange}></IntegerProperty>
+            <IntegerProperty name={'radialSegments'} label={L_RADIAL_SEGMENTS} value={radialSegments} onChange={this.handleChange}></IntegerProperty>
+            <NumberProperty name={'p'} label={L_TUBE_ARC} value={p} onChange={this.handleChange}></NumberProperty>
+            <NumberProperty name={'q'} label={L_DISTORTED_ARC} value={q} onChange={this.handleChange}></NumberProperty>
+        </PropertyGroup>;
+    }
+
+    componentDidMount() {
+        app.on(`objectSelected.TorusKnotGeometryComponent`, this.handleUpdate);
+        app.on(`objectChanged.TorusKnotGeometryComponent`, this.handleUpdate);
+    }
+
+    handleExpand(expanded) {
+        this.setState({
+            expanded,
+        });
+    }
+
+    handleUpdate() {
+        const editor = app.editor;
+
+        if (!editor.selected || !(editor.selected instanceof THREE.Mesh) || !(editor.selected.geometry instanceof THREE.TorusKnotBufferGeometry)) {
+            this.setState({
+                show: false,
+            });
+            return;
+        }
+
+        this.selected = editor.selected;
+
+        const state = Object.assign({}, this.selected.geometry.parameters, {
+            show: true,
+        });
+
+        this.setState(state);
+    }
+
+    handleChange(value, name, event) {
+        const state = Object.assign({}, this.state, {
+            [name]: value,
+        });
+
+        this.setState(state);
+
+        app.editor.execute(new SetGeometryCommand(this.selected, new THREE.TorusKnotBufferGeometry(
+            state.radius,
+            state.tube,
+            state.tubularSegments,
+            state.radialSegments,
+            state.p,
+            state.q,
+        )));
+    }
+}
+
+export default TorusKnotGeometryComponent;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx b/ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx
index f50a6a1d..51fe204f 100644
--- a/ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx
+++ b/ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx
@@ -17,6 +17,7 @@ import PlaneGeometryComponent from '../component/geometry/PlaneGeometryComponent
 import SphereGeometryComponent from '../component/geometry/SphereGeometryComponent.jsx';
 import TeapotGeometryComponent from '../component/geometry/TeapotGeometryComponent.jsx';
 import TorusGeometryComponent from '../component/geometry/TorusGeometryComponent.jsx';
+import TorusKnotGeometryComponent from '../component/geometry/TorusKnotGeometryComponent.jsx';
 
 /**
  * 属性面板
@@ -45,6 +46,7 @@ class PropertyPanel extends React.Component {
             <SphereGeometryComponent></SphereGeometryComponent>
             <TeapotGeometryComponent></TeapotGeometryComponent>
             <TorusGeometryComponent></TorusGeometryComponent>
+            <TorusKnotGeometryComponent></TorusKnotGeometryComponent>
         </PropertyGrid>;
     }
 }