From 0e89ade1c620058d553e6cc90854299f6df8ac63 Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Fri, 20 Nov 2020 04:51:50 -0500
Subject: [PATCH] add Patches Component
---
src/App.js | 6 +-
src/features/timbre/Timbre.js | 2 +
.../timbre/parameters/Parameters.module.css | 4 +-
src/features/timbre/parameters/Patches.js | 128 ++++++++++++++++++
src/features/timbre/parameters/Pitch.js | 2 +-
.../timbre/parameters/parameterSlice.js | 23 ++++
6 files changed, 159 insertions(+), 6 deletions(-)
create mode 100644 src/features/timbre/parameters/Patches.js
diff --git a/src/App.js b/src/App.js
index f3a334a..f02b37c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,9 +7,9 @@ function App() {
return (
- {/*
- */}
-
+
+ {/*
+ */}
);
diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index bc8a2f6..c968b4b 100644
--- a/src/features/timbre/Timbre.js
+++ b/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' },
]}
/>
+
);
}
diff --git a/src/features/timbre/parameters/Parameters.module.css b/src/features/timbre/parameters/Parameters.module.css
index 521470b..0900284 100644
--- a/src/features/timbre/parameters/Parameters.module.css
+++ b/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;
diff --git a/src/features/timbre/parameters/Patches.js b/src/features/timbre/parameters/Patches.js
new file mode 100644
index 0000000..96c6b72
--- /dev/null
+++ b/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 (
+
+ Source
+
+ props.onChange({
+ source: value,
+ destination: props.patch.destination,
+ modIntensity: props.patch.modIntensity,
+ })
+ }
+ />
+ Destination
+
+ props.onChange({
+ source: props.patch.source,
+ destination: value,
+ modIntensity: props.patch.modIntensity,
+ })
+ }
+ />
+ Mod Intensity
+
+ props.onChange({
+ source: props.patch.source,
+ destination: props.patch.destination,
+ modIntensity: value,
+ })
+ }
+ />
+
+ );
+};
+
+export default function Patches(props) {
+ const parameters = useSelector((state) => selectById(state, props.id));
+ const dispatch = useDispatch();
+
+ return (
+
+
+ dispatch(
+ parameterUpdated({
+ id: props.id,
+ changes: {
+ patch1: value,
+ },
+ })
+ )
+ }
+ />
+
+
+ dispatch(
+ parameterUpdated({
+ id: props.id,
+ changes: {
+ patch2: value,
+ },
+ })
+ )
+ }
+ />
+
+
+ dispatch(
+ parameterUpdated({
+ id: props.id,
+ changes: { patch3: value },
+ })
+ )
+ }
+ />
+
+
+ dispatch(
+ parameterUpdated({
+ id: props.id,
+ changes: { patch4: value },
+ })
+ )
+ }
+ />
+