reset buttons for all graphics (#230)

* reset buttons for all graphics

* resetting

* .

* build

* build

components/Graphic.jsx

@@ -2,10 +2,12 @@ var React = require("react");
 
 var baseClass = {
   render: function() {
+    var figureWidth = this.panelCount * this.defaultWidth;
+
     var cprops = {
       tabIndex: 0,
       style: {
-        width: this.panelCount * this.defaultWidth + "px",
+        width: figureWidth + "px",
         height: this.defaultHeight + "px"
       }
     };
@@ -23,10 +25,13 @@ var baseClass = {
     var sourceLink = `https://github.com/Pomax/BezierInfo-2/tree/master/components/sections/${this.props.section}/handler.js`;
 
     return (
-      <figure className={this.props.inline ? "inline": false}>
+      <figure className={this.props.inline ? "inline": false} style={`--figurewidth: ${figureWidth}px`}>
         <canvas ref="canvas" {...cprops} {...handlers} />
         <figcaption>
-          <a className="source" href={sourceLink}>view source</a>
+          <div className="help">
+            <a className="source" href={sourceLink}>view source</a>
+            <button onClick={ evt => this.resetFigure(true)}>reset</button>
+          </div>
           {this.props.title}
           {this.renderSliders()}
           {this.props.children}
@@ -39,18 +44,20 @@ var baseClass = {
   renderSliders: function() {
     if (!this.state) return;
     if (!this.state.sliders) return;
+    if (!this.props.context) return;
 
     var sliders = this.state.sliders;
-    var api = this;
     var onSlide = this.props.onSlide.bind(this.props.context);
-    return sliders.map(function(v, pos) {
-      var handle = function(evt) {
+
+    return sliders.map((v, pos) => {
+      var handle = (evt) => {
         evt.preventDefault();
         var value = parseFloat(evt.target.value);
         v.value = value;
-        onSlide(api, value, pos);
-        api.setState({ sliders: sliders });
+        onSlide(this, value, pos);
+        this.setState({ sliders: sliders });
       };
+
       return (
         <div className="slider">
           { v.label && <label>{v.label}</label> }
@@ -62,6 +69,31 @@ var baseClass = {
     });
   },
 
+  resetFigure: function(forceUpdate) {
+    if (this.props.setup) {
+      this.props.setup(this);
+    }
+
+    if (this.props.draw) {
+      this.props.draw(this, this.curve);
+    }
+
+    if (this.props.autoplay) {
+      this.play();
+    }
+
+    if (this.props.sliders) {
+      this.setState({
+        sliders: this.props.sliders
+      });
+      this.props.setSliders(this, this.props.sliders.map(v => v.value));
+    }
+
+    if (forceUpdate) {
+      this.forceUpdate();
+    }
+  },
+
   componentDidMount: function() {
     var cvs = this.refs.canvas;
     var dpr = this.getPixelRatio();
@@ -77,25 +109,7 @@ var baseClass = {
       Paper.setup(cvs);
     }
 
-    if (this.props.setup) {
-      this.props.setup(this);
-    }
-
-    if (this.props.draw) {
-      this.props.draw(this, this.curve);
-    }
-
-    if (this.props.autoplay) {
-      this.play();
-    }
-
-    if (this.props.sliders) {
-      var sliders = this.props.sliders;
-      this.setState({
-        sliders: sliders
-      });
-      this.props.setSliders(this, sliders.map(v => v.value));
-    }
+    this.resetFigure();
   }
 };
 

components/SliderSet.jsx

@@ -3,7 +3,7 @@ var React = require("react");
 class SliderSet extends React.Component {
   constructor(props) {
     super(props);
-    this.options = props.options || [];
+    this.setOptions(props.options);
   }
 
   render(props) {
@@ -35,7 +35,7 @@ class SliderSet extends React.Component {
   }
 
   setOptions(options, labels) {
-    this.options = options;
+    this.options = options || [];
     this.forceUpdate();
   }
 }

components/gfx-api.js

@@ -87,14 +87,15 @@ var API = {
           found = found || true;
         }
       });
-      this.cvs.style.cursor = found ? "pointer" : "default";
+
+      this.cvs.style.cursor = found ? !this.noDrag? "pointer" : "default": "default";
 
       this.hover = {
         x: evt.offsetX,
         y: evt.offsetY
       };
 
-      if(this.movingPoint) {
+      if(!this.noDrag && this.movingPoint) {
         this.ox = evt.offsetX - this.mx;
         this.oy = evt.offsetY - this.my;
         this.mp.x = Math.max(0, Math.min(this.defaultWidth, this.cx + this.ox));
@@ -119,7 +120,7 @@ var API = {
       this.props.onMouseMove(evt, this);
     }
 
-    if (this.dragging && this.props.onMouseDrag) {
+    if (!this.noDrag && this.dragging && this.props.onMouseDrag) {
       this.props.onMouseDrag(evt, this);
     }
 
@@ -204,6 +205,8 @@ var API = {
     cvs.style.width = this.panelCount * w + "px";
     cvs.style.height = h + "px";
 
+    cvs.parentNode.style.setProperty(`--figurewidth`, cvs.style.width);
+
     var dpr = this.getPixelRatio();
     cvs.width = this.panelCount * w * dpr;
     cvs.height = h * dpr;

components/sections/curvefitting/content.en-GB.md

@@ -253,10 +253,9 @@ So let's try it out! The following graphic lets you place points, and will start
 
 <div className="figure">
   <Graphic title="Fitting a Bézier curve" setup={this.setup} draw={this.draw} onClick={this.onClick}>
-    <button onClick={this.toggle}>toggle</button>
-    <button onClick={this.reset}>reset</button>
+    <button onClick={this.toggle} style="position:absolute; right: 0;">toggle</button>
     <SliderSet ref={ set => (this.sliders=set) } onChange={this.processTimeUpdate} />
   </Graphic>
 </div>
 
-You'll note there are also two convenient buttons: the "toggle" button lets you toggle between equidistance `t` values, and distance ratio along the polygon, and the "reset" button just clears the graphic so you can draw a new set of points. Arguably more interesting is that once you have points to abstract a curve, you also get <em>direct control</em> over the time values, because if the time values are our degree of freedom, you should be able to freely manipulate them and see what the effect on your curve is.
+You'll note there is a convenient "toggle" buttons that lets you toggle between equidistance `t` values, and distance ratio along the polygon. Arguably more interesting is that once you have points to abstract a curve, you also get <em>direct control</em> over the time values through sliders for each, because if the time values are our degree of freedom, you should be able to freely manipulate them and see what the effect on your curve is.

components/sections/curvefitting/handler.js

@@ -3,11 +3,13 @@ var fit = require('../../../lib/curve-fitter.js');
 module.exports = {
   setup: function(api) {
     this.api = api;
+    api.noDrag = true; // do not allow points to be dragged around
     this.reset();
   },
 
   reset: function() {
     this.points = [];
+    this.sliders.setOptions([]);
     this.curveset = false;
     this.mode = 0;
     if (this.api) {