add Patches Component

src/App.js

@@ -7,9 +7,9 @@ function App() {
     return (
         <div className="App">
             <header className="App-header">
-                {/*<Timbre id="timbre1" />
+                <Timbre id="timbre1" />
-                <Timbre id="timbre2" />*/}
+                {/*<Timbre id="timbre2" />
-                <Vocoder id="vocoder" />
+                <Vocoder id="vocoder" />*/}
             </header>
         </div>
     );

src/features/timbre/Timbre.js

@@ -7,6 +7,7 @@ import Filter from './parameters/Filter';
 import EG from './parameters/EG';
 import Amp from './parameters/Amp';
 import LFO from './parameters/LFO';
+import Patches from './parameters/Patches';
 import { selectById } from './timbreSlice.js';
 
 const timbreStyle = {
@@ -144,6 +145,7 @@ export default function Timbre(props) {
                     { value: 'Sample & Hold' },
                 ]}
             />
+            <Patches id={ids.patches} />
         </div>
     );
 }

src/features/timbre/parameters/Parameters.module.css

@@ -14,7 +14,7 @@
     margin: 2.5pt 0;
 }
 
-.pitchContainer {
+.horizontalContainer {
     font-size: small;
     display: inline-flex;
     flex-direction: row;
@@ -26,7 +26,7 @@
     width: 420px;
     height: 214px;
 }
-.pitchContainer > .container {
+.horizontalContainer > .container {
     padding: 0 16pt;
     width: 100%;
     margin: 10pt 0;

src/features/timbre/parameters/Patches.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+import { Slider, SelectList } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
+
+const Patch = (props) => {
+    return (
+        <div>
+            Source
+            <SelectList
+                value={props.patch.source}
+                list={[
+                    { value: 'Filter EG' },
+                    { value: 'Amp Eg' },
+                    { value: 'LFO 1' },
+                    { value: 'LFO 2' },
+                    { value: 'Velocity' },
+                    { value: 'Keyboard Track' },
+                    { value: 'Pitch Bend' },
+                    { value: 'Mod Wheel' },
+                ]}
+                onChange={(value) =>
+                    props.onChange({
+                        source: value,
+                        destination: props.patch.destination,
+                        modIntensity: props.patch.modIntensity,
+                    })
+                }
+            />
+            Destination
+            <SelectList
+                value={props.patch.destination}
+                list={[
+                    { value: 'Pitch' },
+                    { value: 'OSC 2 Tune' },
+                    { value: 'OSC 1 Control 1' },
+                    { value: 'Noise Level' },
+                    { value: 'Cutoff' },
+                    { value: 'Amp' },
+                    { value: 'Pan' },
+                    { value: 'LFO 2 Frequency' },
+                ]}
+                onChange={(value) =>
+                    props.onChange({
+                        source: props.patch.source,
+                        destination: value,
+                        modIntensity: props.patch.modIntensity,
+                    })
+                }
+            />
+            Mod Intensity
+            <Slider
+                min={0}
+                max={127}
+                parameter={props.patch.modIntensity}
+                onChange={(value) =>
+                    props.onChange({
+                        source: props.patch.source,
+                        destination: props.patch.destination,
+                        modIntensity: value,
+                    })
+                }
+            />
+        </div>
+    );
+};
+
+export default function Patches(props) {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div className={styles.horizontalContainer}>
+            <Patch
+                patch={parameters.patch1}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: {
+                                patch1: value,
+                            },
+                        })
+                    )
+                }
+            />
+            <div className={styles.divider} />
+            <Patch
+                patch={parameters.patch2}
+                onChange={(value, parameter) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: {
+                                patch2: value,
+                            },
+                        })
+                    )
+                }
+            />
+            <div className={styles.divider} />
+            <Patch
+                patch={parameters.patch3}
+                onChange={(value, parameter) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { patch3: value },
+                        })
+                    )
+                }
+            />
+            <div className={styles.divider} />
+            <Patch
+                patch={parameters.patch4}
+                onChange={(value, parameter) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { patch4: value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+}

src/features/timbre/parameters/Pitch.js

@@ -9,7 +9,7 @@ export default function Pitch(props) {
     const dispatch = useDispatch();
 
     return (
-        <div className={styles.pitchContainer}>
+        <div className={styles.horizontalContainer}>
             <div className={styles.container}>
                 Voice Assign
                 <SelectList

src/features/timbre/parameters/parameterSlice.js

@@ -265,6 +265,29 @@ const parametersSlice = createSlice({
                 tempoSync: false,
                 frequency: 0,
             },
+            'patches1': {
+                id: 'patches1',
+                patch1: {
+                    source: 'Filter EG',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch2: {
+                    source: 'Amp EG',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch3: {
+                    source: 'LFO 1',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch4: {
+                    source: 'LFO 2',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+            },
         },
     }),
     reducers: {