stop text dragging

src/App.js

@@ -3,6 +3,10 @@ import Menu from './features/menu';
 import Editor from './features/editor';
 
 function App() {
+  // DUMB THING TO STOP TEXT FROM DRAGGING GRRRR
+  window.ondragstart = function () {
+    return false;
+  };
   return (
     <div className='bg-gray-100 grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
       <Menu />

src/features/editor/Timbre.js

@@ -119,7 +119,7 @@ export default function Timbre(props) {
       <Amp className='col-span-2' name='Amp' id={ids.amp} />
       <EG className='col-span-2' name='EG 1' id={ids.eg1} />
       <EG className='col-span-2' name='EG 2' id={ids.eg2} />
-      {/*<LFO
+      <LFO
         className='col-span-2'
         name='LFO 1'
         id={ids.lfo1}
@@ -141,7 +141,7 @@ export default function Timbre(props) {
           { value: 'Sample & Hold' },
         ]}
       />
-      <Patches className='col-span-2' name='Patches' id={ids.patches} />*/}
+      <Patches className='col-span-2' name='Patches' id={ids.patches} />
     </div>
   );
 }

src/features/editor/card.js

@@ -6,7 +6,9 @@ export default function Card(props = { className: 'col-span-2' }) {
         ' flex flex-col justify-start border border-gray-200 rounded-md shadow-md bg-white'
       }>
       <header className='flex items-start justify-between py-2 px-4 border-b border-solid border-gray-200'>
-        <h3 className='text-xl font-semibold text-gray-900'>{props.header}</h3>
+        <h3 className='pointer-events-none text-xl font-semibold text-gray-900'>
+          {props.header}
+        </h3>
       </header>
       <section className='flex-grow flex flex-col justify-evenly px-6'>
         {props.children}

src/features/editor/parameters/Amp.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Knob } from '../../utils/components';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, Checkbox } from '../../helpers/Helpers';
@@ -8,12 +10,10 @@ export default function Amp(props) {
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      Amp Level
-      <Slider
-        parameter={parameters.ampLevel}
-        min={0}
+    <Card className={props.className} header={props.name}>
+      <h3>Amp Level</h3>
+      <Knob
+        value={parameters.ampLevel}
         max={127}
         onChange={(value) =>
           dispatch(
@@ -24,10 +24,10 @@ export default function Amp(props) {
           )
         }
       />
-      PanPot
-      <Slider
-        parameter={parameters.panpot}
-        min={-63}
+      <h3>PanPot</h3>
+      <Knob
+        value={parameters.panpot}
+        dual={true}
         max={63}
         onChange={(value) =>
           dispatch(
@@ -38,10 +38,10 @@ export default function Amp(props) {
           )
         }
       />
-      Amp Keyboard Tracking
-      <Slider
-        parameter={parameters.ampTrack}
-        min={-63}
+      <h3>Amp Keyboard Tracking</h3>
+      <Knob
+        value={parameters.ampTrack}
+        dual={true}
         max={63}
         onChange={(value) =>
           dispatch(
@@ -53,7 +53,6 @@ export default function Amp(props) {
         }
       />
       <Checkbox
-        name='Distortion'
         parameter={parameters.distortion}
         onChange={(value) =>
           dispatch(
@@ -64,7 +63,7 @@ export default function Amp(props) {
           )
         }
       />
-    </div>
+    </Card>
   );
 }
 

src/features/utils/components.js

@@ -54,7 +54,7 @@ function getKnobValue(dragStart, currentY, bipolar) {
   const slope = 0.01;
   let newValue = value + deltaY * slope;
   if (bipolar) {
-    const zeroCrossingResistance = 0.3;
+    const zeroCrossingResistance = 0; //0.3
     if (value >= 0 && newValue < 0) {
       newValue += Math.min(zeroCrossingResistance, -newValue);
     } else if (value < 0 && newValue > 0) {
@@ -89,7 +89,7 @@ function Knob({
   const [lineX1, lineY1] = getPointPair(
     size / 2,
     valueAngle,
-    radius - fillWidth + 2
+    radius - fillWidth + 3
   );
 
   const [dragStart, setDragStart] = useState(null);
@@ -220,7 +220,8 @@ function Knob({
               x2={size / 2}
               y2={size / 2}
               strokeLinecap='round'
-              className='stroke-current text-indigo-900 stroke-2'></line>
+              strokeWidth='2'
+              className='stroke-current text-indigo-900'></line>
           }
         </svg>
       </svg>