Add sliders and knob background

build/css-modules-plugin.js

@@ -49,7 +49,6 @@ const emoji = [
   '😒',
   '🙄',
   '😬',
-  '😮‍💨',
   '🤥',
   '😌',
   '😔',

client/src/components/module-parts/Knob.css

@@ -2,15 +2,32 @@
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  border: 7px solid var(--on-background);
-  background: var(--background);
+  padding: 7px;
+  /* background: var(--background); */
+  background: url(/assets/knob.svg);
+  background-size: contain;
   position: relative;
 }
 
-.knob-position {
+.knob::before {
+  content: ' ';
+  display: block;
   position: absolute;
   width: 14px;
-  border-bottom: 4px solid var(--background);
-  top: 5px;
-  left: -7px;
+  height: 4px;
+  background: var(--secondary);
+  top: 12px;
+  left: 2px;
+  border-radius: 2px;
+}
+
+.knob::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  box-shadow: 0 0 7px #000;
+  background: var(--background);
 }

client/src/components/module-parts/Knob.tsx

@@ -81,9 +81,7 @@ const Knob = ({ moduleId, name, min, max, initial }: Props) => {
       style={{
         transform: `rotate(${knobState.position * 300 - 60}deg)`,
       }}
-    >
-      <div className={css('knob-position')} />
-    </div>
+    ></div>
   )
 }
 

client/src/components/module-parts/Module.css

@@ -25,7 +25,7 @@
 }
 
 .module-body {
-  padding: 10px 40px;
+  padding: 0px 40px;
   display: flex;
   min-height: 60px;
   flex-direction: row;

client/src/components/module-parts/Slider.css

@@ -0,0 +1,30 @@
+.slider-track {
+  width: 100px;
+  height: 6px;
+  background: var(--background);
+  box-shadow: var(--box-shadow) inset;
+  position: relative;
+  border-radius: 1px;
+}
+
+.slider {
+  position: absolute;
+  height: 10px;
+  width: 16px;
+  top: -2px;
+  left: -8px;
+  background: var(--on-background);
+  box-shadow: 0 0 2px #000;
+  border-radius: 2px;
+}
+
+.slider::after {
+  display: block;
+  content: ' ';
+  height: 10px;
+  width: 2px;
+  background: var(--primary);
+  position: absolute;
+  top: 0px;
+  left: 7px;
+}

client/src/components/module-parts/Slider.tsx

@@ -0,0 +1,90 @@
+import { h, useState, useEffect } from 'kaiku'
+import state, { getKnobValue, setKnobValue } from '../../state'
+import { Id, Vec2 } from '../../../../common/types'
+
+import classNames from 'classnames/bind'
+import styles from './Slider.css'
+
+const css = classNames.bind(styles)
+
+type Props = {
+  moduleId: Id
+  name: string
+  min: number
+  max: number
+  initial: number
+}
+
+const Slider = ({ moduleId, name, min, max, initial }: Props) => {
+  const knobValue = getKnobValue(moduleId, name)
+  const initialValue = typeof knobValue === 'undefined' ? initial : knobValue
+
+  const knobState = useState<{
+    position: number
+    dragPosition: null | Vec2
+  }>({
+    position: (initialValue - min) / (max - min),
+    dragPosition: null,
+  })
+
+  const onDragStart = () => {
+    knobState.dragPosition = { x: state.cursor.x, y: state.cursor.y }
+  }
+
+  const onDragEnd = () => {
+    knobState.dragPosition = null
+    state.hint = null
+  }
+
+  useEffect(() => {
+    setKnobValue(moduleId, name, initialValue)
+
+    document.addEventListener('mouseup', onDragEnd)
+    document.addEventListener('blur', onDragEnd)
+
+    return () => {
+      document.removeEventListener('mouseup', onDragEnd)
+      document.removeEventListener('blur', onDragEnd)
+    }
+  })
+
+  useEffect(() => {
+    if (knobState.dragPosition) {
+      knobState.position -= (knobState.dragPosition.x - state.cursor.x) / 100
+      knobState.position = Math.max(0, Math.min(1, knobState.position))
+
+      knobState.dragPosition.x = state.cursor.x
+      knobState.dragPosition.y = state.cursor.y
+      const value = knobState.position * (max - min) + min
+      setKnobValue(moduleId, name, value)
+
+      displayHint(value)
+    }
+  })
+
+  const displayHint = (value: number) => {
+    state.hint = `${name}: ${value.toFixed(2)}`
+  }
+
+  const hideHint = () => {
+    if (!knobState.dragPosition) {
+      state.hint = null
+    }
+  }
+
+  return (
+    <div
+      className={css('slider-track')}
+      onMouseOver={() => displayHint(knobValue!)}
+      onMouseOut={hideHint}
+    >
+      <div
+        className={css('slider')}
+        onMouseDown={onDragStart}
+        style={{ transform: `translateX(${knobState.position * 100}px)` }}
+      ></div>
+    </div>
+  )
+}
+
+export default Slider

client/src/components/modules/Mixer.tsx

@@ -13,6 +13,7 @@ import styles from './Mixer.css'
 const css = classNames.bind(styles)
 
 import { ModuleInputs, ModuleOutputs } from '../module-parts/ModuleSockets'
+import Slider from '../module-parts/Slider'
 type Props = {
   id: string
 }
@@ -48,16 +49,64 @@ class Mixer extends Component<Props> implements IModule {
 
   render({ id }: Props) {
     return (
-      <Module id={id} name="Mixer" width={120} height={400}>
+      <Module id={id} name="Mixer" width={200} height={200}>
         <div className={css('mixer')}>
-          <Knob moduleId={id} name="busLevel0" min={0} max={1} initial={0.8} />
-          <Knob moduleId={id} name="busLevel1" min={0} max={1} initial={0.8} />
-          <Knob moduleId={id} name="busLevel2" min={0} max={1} initial={0.8} />
-          <Knob moduleId={id} name="busLevel3" min={0} max={1} initial={0.8} />
-          <Knob moduleId={id} name="busLevel4" min={0} max={1} initial={0.8} />
-          <Knob moduleId={id} name="busLevel5" min={0} max={1} initial={0.8} />
-          <Knob moduleId={id} name="busLevel6" min={0} max={1} initial={0.8} />
-          <Knob moduleId={id} name="busLevel7" min={0} max={1} initial={0.8} />
+          <Slider
+            moduleId={id}
+            name="busLevel0"
+            min={0}
+            max={1}
+            initial={0.8}
+          />
+          <Slider
+            moduleId={id}
+            name="busLevel1"
+            min={0}
+            max={1}
+            initial={0.8}
+          />
+          <Slider
+            moduleId={id}
+            name="busLevel2"
+            min={0}
+            max={1}
+            initial={0.8}
+          />
+          <Slider
+            moduleId={id}
+            name="busLevel3"
+            min={0}
+            max={1}
+            initial={0.8}
+          />
+          <Slider
+            moduleId={id}
+            name="busLevel4"
+            min={0}
+            max={1}
+            initial={0.8}
+          />
+          <Slider
+            moduleId={id}
+            name="busLevel5"
+            min={0}
+            max={1}
+            initial={0.8}
+          />
+          <Slider
+            moduleId={id}
+            name="busLevel6"
+            min={0}
+            max={1}
+            initial={0.8}
+          />
+          <Slider
+            moduleId={id}
+            name="busLevel7"
+            min={0}
+            max={1}
+            initial={0.8}
+          />
         </div>
         <ModuleInputs>
           <Socket