bsplines

components/WeightController.jsx

@@ -0,0 +1,53 @@
+var React = require('react');
+
+var WeightController = React.createClass({
+  getInitialState() {
+    return {
+      owner: false,
+      weights: [],
+      closed: false
+    };
+  },
+  bindWeights(owner, weights, closed) {
+    this.setState({owner, weights, closed});
+  },
+  render() {
+    var type = 'range';
+    var min = 0;
+    var max = this.state.weights.length;
+    var step = 1;
+
+    var overlap = this.state.closed;
+    var baselength = this.state.weights.length;
+    if (overlap !== false) {
+      baselength -= overlap;
+    }
+
+    return (
+      <section className='knot-controls'><h2>weight values</h2>{
+        this.state.weights.map((value,position) => {
+          if (overlap && position >= baselength) {
+            return null;
+          }
+          var props = {
+            type, min, max, step,
+            value,
+            onChange: e => {
+              var k = this.state.weights;
+              k[position] = e.target.value;
+              if (overlap && position < overlap) {
+                k[position+baselength] = e.target.value;
+              }
+              this.setState({ weights: k }, () => {
+                this.state.owner.redraw();
+              });
+            }
+          };
+          return <div key={'knot'+position}>{min}<input {...props}/>{max} (= {value})</div>;
+        })
+      }</section>
+    );
+  }
+});
+
+module.exports = WeightController;