synthing

commit 89b543b02a6b9e85003b4ed3d35566d53b5ec765
parent 44efe36343de0937fb5d4bf667f0ce50b53c2efe
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Fri, 16 Mar 2018 21:29:52 -0700

Add smoother Param setting

Diffstat:
M
src/App/index.js
 | 
5
+----
M
src/Param/index.js
 | 
33
+++++++++++++++++++++------------
M
src/helpers.js
 | 
11
++++++++++-

3 files changed, 32 insertions(+), 17 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -22,7 +22,6 @@ const Adsr = (props) => (
                 name={aspect.name}
                 minVal={0}
                 maxVal={aspect.maxVal}
-                step={0.1}
                 update={(newVal) => {props.update(aspect.name, newVal)}}
                 >
                 <Wheel percent={props.adsr[aspect.name] / aspect.maxVal} />
@@ -123,7 +122,7 @@ class App extends Component {
         })
         return (
             <div
-                className="App"
+                class="App"
                 onKeyDown={this.keyHandler}
             >
                 <div>
@@ -156,7 +155,6 @@ class App extends Component {
                         name="bpm"
                         minVal={20}
                         maxVal={600}
-                        step={1}
                         val={this.props.bpm}
                         update={this.props.setBpm}
                     />
@@ -164,7 +162,6 @@ class App extends Component {
                         name="beats"
                         minVal={3}
                         maxVal={16}
-                        step="1"
                         val={this.props.numBeats}
                         update={this.props.setNumBeats}
                     />
diff --git a/src/Param/index.js b/src/Param/index.js
@@ -4,25 +4,34 @@ import './style.css';
 
 export default class Param extends Component {
     componentDidMount() {
+        const setUpMove = () => {
+            this.internalVal = this.props.val;
+        }
         const handleMove = (ev) => {
-            let step = this.props.step || 0.5;
-            let newVal = this.props.val - (ev.movementY * step);
-            if (typeof(this.props.minVal) === 'number' && (newVal < this.props.minVal)) {
-                newVal = this.props.minVal;
-            } else if (typeof(this.props.maxVal) === 'number' && (newVal > this.props.maxVal)) {
-                newVal = this.props.maxVal;
-            }
-            this.props.update(newVal);
+            // calculate how much to adjust the value given the
+            // min and max values of the param, the speed of the mouse movement,
+            // and the precision of the param.
+            const maxMov = 300 / (this.props.precision ? this.props.precision + 1 : 1);
+            const ratioMov = ev.movementY / maxMov;
+            const expRatioMov = -Math.sign(ratioMov) * Math.pow(Math.abs(ratioMov), 1.3);
+            const newVal = (expRatioMov * (this.props.maxVal - this.props.minVal)) + this.internalVal;
+            this.internalVal = helpers.bounded(
+                newVal,
+                this.props.minVal,
+                this.props.maxVal
+            );
+            this.props.update(Number(this.internalVal.toFixed(this.props.precision)));
         }
-        helpers.clickNDrag(this.paramRef, null, handleMove, null);
+        helpers.clickNDrag(this.paramRef, setUpMove, handleMove, null);
     }
     handleChange(e) {
         this.props.update(e.target.value);
     }
     getNumString() {
-        return (this.props.precision ?
-            this.props.val.toFixed(this.props.precision) :
-                this.props.val) + (this.props.suffix || '');
+        return (this.props.precision !== undefined && this.props.val.toFixed
+              ? this.props.val.toFixed(this.props.precision)
+              : this.props.val)
+             + (this.props.suffix || '');
     }
     render() {
         const inputId = `param-${this.props.name}`;
diff --git a/src/helpers.js b/src/helpers.js
@@ -11,7 +11,16 @@ export default {
     partial,
     oneTime,
     linear: (m, x, b) => (m * x) + b,
-    bounded: (val, min, max) => val < min ? min : (val > max ? max : val),
+    bounded: (val, min, max) => {
+        if (min !== undefined && min !== null && val < min) {
+            return min;
+        }
+        else if (max !== undefined && max !== null && val > max) {
+            return max;
+        }
+        else
+            return val;
+    },
     scale: (buf, amt) => buf.map(val => val * amt),
     add: (arr1, arr2) => arr1.map((v, i) => v + arr2[i]),
     soon: (fn, ms=0) => {