bsplines

components/KnotController.jsx

@@ -0,0 +1,39 @@
+var React = require('react');
+
+var KnotController = React.createClass({
+  getInitialState() {
+    return {
+      owner: false,
+      knots: []
+    };
+  },
+  bindKnots(owner, knots) {
+    this.setState({owner, knots});
+  },
+  render() {
+    var type = 'range';
+    var min = 0;
+    var max = this.state.knots.length;
+    var step = 1;
+    return (
+      <section className='knot-controls'><h2>knot values</h2>{
+        this.state.knots.map((value,position) => {
+          var props = {
+            type, min, max, step,
+            value,
+            onChange: e => {
+              var k = this.state.knots;
+              k[position] = e.target.value;
+              this.setState({ knots: k }, () => {
+                this.state.owner.redraw();
+              });
+            }
+          };
+          return <div key={'knot'+position}>{min}<input {...props}/>{max} (= {value})</div>;
+        })
+      }</section>
+    );
+  }
+});
+
+module.exports = KnotController;