synthing

commit f11006da1b87dc9da76bc1f0913ba8e32c155f24
parent 5fb01ce83db4ab3f7cd033f49bda2fd40da40251
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Wed, 28 Feb 2018 14:45:11 -0800

clickndrag helper

Diffstat:
M
src/Param/index.js
 | 
9
+--------
M
src/WaveEditor/index.js
 | 
21
+++++++++------------
M
src/helpers.js
 | 
31
++++++++++++++++++++++++-------

3 files changed, 34 insertions(+), 27 deletions(-)
diff --git a/src/Param/index.js b/src/Param/index.js
@@ -14,13 +14,7 @@ export default class Param extends Component {
             }
             this.props.update(newVal);
         }
-        this.paramRef.addEventListener('mousedown', (ev) => {
-            ev.preventDefault();
-            document.addEventListener('mousemove', handleMove);
-            helpers.oneTime(document, 'mouseup', (ev) => {
-                document.removeEventListener('mousemove', handleMove);
-            });
-        });
+        helpers.clickNDrag(this.paramRef, null, handleMove, null);
     }
     handleChange(e) {
         this.props.update(e.target.value);
@@ -46,4 +40,3 @@ export default class Param extends Component {
         )
     }
 }
-
diff --git a/src/WaveEditor/index.js b/src/WaveEditor/index.js
@@ -24,17 +24,14 @@ export default class waveEditor extends Component {
                 x: ev.x + window.scrollX,
                 y: ev.y + window.scrollY
             }, this.props.waveform);
-        }
-        this.divRef.addEventListener('mousedown', (ev) => {
-            document.addEventListener('mousemove', handleMove);
-            helpers.oneTime(document, 'mouseup', (ev) => {
-                handleMove(ev);
-                document.removeEventListener('mousemove', handleMove);
-                this.setState({
-                    prevZone: null
-                });
-            });
-        });
+        };
+        const handleUp = (ev) => {
+            handleMove(ev);
+            this.setState({
+                prevZone: null
+            })
+        };
+        helpers.clickNDrag(this.divRef, null, handleMove, handleUp);
     }
     componentWillUpdate() {
         return false;
@@ -69,7 +66,7 @@ export default class waveEditor extends Component {
             prevZone: zone
         });
         this.props.updateWaveform(newWaveform);
-        
+
     }
     render() {
         return (
diff --git a/src/helpers.js b/src/helpers.js
@@ -1,17 +1,19 @@
 const partial = (f, ...args) => (...moreArgs) => f(...args, ...moreArgs);
+const oneTime = (target, type, handler) => {
+    const doOnce = (ev) => {
+        target.removeEventListener(type, doOnce);
+        handler(ev);
+    }
+    target.addEventListener(type, doOnce);
+}
+
 export default {
     partial,
+    oneTime,
     linear: (m, x, b) => (m * x) + b,
     bounded: (val, min, max) => val < min ? min : (val > max ? max : val),
     scale: (buf, amt) => buf.map(val => val * amt),
     add: (arr1, arr2) => arr1.map((v, i) => v + arr2[i]),
-    oneTime: (target, type, handler) => {
-        const doOnce = (ev) => {
-            target.removeEventListener(type, doOnce);
-            handler(ev);
-        }
-        target.addEventListener(type, doOnce);
-    },
     soon: (fn, ms=0) => {
         return (...args) =>
         window.setTimeout(partial(fn, ...args), ms);
@@ -25,5 +27,20 @@ export default {
                 time = now;
             }
         }
+    },
+    clickNDrag: (el, onDown, onMove, onUp, moveEl=document) => {
+        el.addEventListener('mousedown', (downEv) => {
+            downEv.preventDefault();
+            if (onMove) {
+                moveEl.addEventListener('mousemove', onMove);
+            }
+            onDown && onDown(downEv);
+            oneTime(moveEl, 'mouseup', (upEv) => {
+                onUp && onUp(upEv);
+                if (onMove) {
+                    moveEl.removeEventListener('mousemove', onMove)
+                }
+            });
+        })
     }
 };