synthing

commit be87106b3f6f029f98484b120b9914fd873ef9df
parent 0cbf31747d0242279fed5679ae53b1d334ed0205
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Wed,  7 Feb 2018 23:52:44 -0800

Break off Knob

Diffstat:
M
src/App/index.js
 | 
28
+---------------------------
A
src/Knob/index.js
 | 
34
++++++++++++++++++++++++++++++++++

2 files changed, 35 insertions(+), 27 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -3,6 +3,7 @@ import WaveEditor from '../WaveEditor/';
 import WaveManager from '../WaveManager/';
 import Synth from '../Synth/';
 import CircleButton from '../CircleButton/';
+import Knob from '../Knob/';
 import './App.css';
 import consts from '../consts.js';
 import helpers from '../helpers.js';
@@ -46,33 +47,6 @@ const boolArray = {
     }
 }
 
-class Knob extends Component {
-    componentDidMount() {
-        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);
-        }
-        this.knobRef.addEventListener('mousedown', (ev) => {
-            ev.preventDefault();
-            document.addEventListener('mousemove', handleMove);
-            helpers.oneTime(document, 'mouseup', (ev) => {
-                document.removeEventListener('mousemove', handleMove);
-            });
-        })
-    }
-    render() {
-        return (
-            <div ref={(knob) => {this.knobRef = knob}}>{this.props.val}</div>
-        )
-    }
-}
-
 
 const Adsr = (props) => (
     <div>
diff --git a/src/Knob/index.js b/src/Knob/index.js
@@ -0,0 +1,34 @@
+import { h, Component} from 'preact';
+import helpers from '../helpers.js';
+
+export default class Knob extends Component {
+    componentDidMount() {
+        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);
+        }
+        this.knobRef.addEventListener('dblclick', (ev) => {
+            console.log('double');
+            this.knobRef.setAttribute('contenteditable', true);
+        });
+        this.knobRef.addEventListener('mousedown', (ev) => {
+            ev.preventDefault();
+            document.addEventListener('mousemove', handleMove);
+            helpers.oneTime(document, 'mouseup', (ev) => {
+                document.removeEventListener('mousemove', handleMove);
+            });
+        });
+    }
+    render() {
+        return (
+            <div ref={(knob) => {this.knobRef = knob}}>{this.props.val}</div>
+        )
+    }
+}
+