fix formatting; add to pitch section

src/components/TimbreComponent.js

@@ -4,20 +4,24 @@ import { Text, Stack, Heading, RangeInput, Select, Box, Grid } from "grommet";
 const reducer = (state, action) => action;
 
 const LabeledSlider = (props) => (
-    <Box
+    <Grid
-        align="center"
+        columns={["xsmall", "small"]}
-        justify="start"
+        rows={["xxxsmall"]}
-        direction="row"
+        areas={[
-        fill="horizontal"
+            { "name": "text", "start": [0, 0], "end": [0, 0] },
-        wrap={false}
+            { "name": "sliders", "start": [1, 0], "end": [1, 0] },
-        gap={props.gap}>
+        ]}>
-        <Text
+        <Box align="center" justify="stretch" direction="row" gridArea="text">
-            weight="bold"
+            <Text size="small" textAlign="start" weight="bold" truncate={false}>
-            truncate={false}
-            style={{ "whiteSpace": "nowrap" }}
-            margin="xsmall">
                 {props.label}
             </Text>
+        </Box>
+        <Box
+            align="center"
+            justify="center"
+            direction="row"
+            fill="horizontal"
+            gridArea="sliders">
             <RangeInput
                 max={props.max}
                 min={props.min}
@@ -26,6 +30,7 @@ const LabeledSlider = (props) => (
                 onChange={(e) => props.onChange(e.target.value)}
             />
         </Box>
+    </Grid>
 );
 
 function VCO1(props) {
@@ -87,24 +92,20 @@ function VCO1(props) {
                         direction="column"
                         gap="medium"
                         fill="horizontal"
-                        margin={{ "top": "medium" }}
+                        margin={{ "top": "medium" }}>
-                        pad="xsmall">
                         <Box
                             align="center"
                             justify="start"
                             fill="horizontal"
                             direction="row"
                             gap="small">
-                            <Text weight="bold">Waveform</Text>
+                            <LabeledSlider
-                            <RangeInput
+                                label="Waveform"
-                                style={{ "spacing": 16 }}
                                 max={127}
                                 min={0}
                                 step={1}
                                 value={waveform}
-                                onChange={(e) => {
+                                onChange={wfDispatch}
-                                    wfDispatch(e.target.value);
-                                }}
                             />
                         </Box>
                         <Box
@@ -112,23 +113,14 @@ function VCO1(props) {
                             justify="start"
                             direction="row"
                             fill="horizontal"
-                            wrap={false}
+                            gap="small">
-                            gap="medium">
+                            <LabeledSlider
-                            <Text
+                                label="LFO Mod"
-                                textAlign="start"
-                                weight="bold"
-                                truncate={false}
-                                style={{ "whiteSpace": "nowrap" }}>
-                                LFO Mod
-                            </Text>
-                            <RangeInput
                                 max={127}
                                 min={0}
                                 step={1}
                                 value={mod}
-                                onChange={(e) => {
+                                onChange={modDispatch}
-                                    modDispatch(e.target.value);
-                                }}
                             />
                         </Box>
                     </Box>
@@ -185,9 +177,16 @@ function VCO2(props) {
                     <Box
                         align="center"
                         justify="center"
-                        gap="small"
+                        direction="column"
+                        gap="medium"
                         fill="horizontal"
-                        flex>
+                        margin={{ "top": "medium" }}>
+                        <Box
+                            align="center"
+                            justify="start"
+                            fill="horizontal"
+                            direction="row"
+                            gap="small">
                             <LabeledSlider
                                 label="Waveform"
                                 max={127}
@@ -196,6 +195,13 @@ function VCO2(props) {
                                 value={waveform}
                                 onChange={wfDispatch}
                             />
+                        </Box>
+                        <Box
+                            align="center"
+                            justify="start"
+                            fill="horizontal"
+                            direction="row"
+                            gap="small">
                             <LabeledSlider
                                 label="LFO Mod"
                                 gap="small"
@@ -208,6 +214,7 @@ function VCO2(props) {
                         </Box>
                     </Box>
                 </Box>
+            </Box>
             <Heading
                 level="2"
                 size="small"
@@ -232,16 +239,14 @@ function Mixer(props) {
                 align="center"
                 justify="center"
                 background={{ "color": "background" }}
-                pad="medium"
-                gap="medium"
                 direction="column"
                 elevation="small"
-                round="small">
+                round="small"
+                pad={{ "top": "large", "bottom": "medium" }}>
                 <Box
                     align="center"
                     justify="center"
-                    pad={{ "horizontal": "medium" }}
+                    pad={{ "top": "small", "horizontal": "medium" }}
-                    margin={{ "top": "medium", "horizontal": "medium" }}
                     fill="horizontal"
                     gap="small">
                     <LabeledSlider
@@ -284,23 +289,100 @@ function Mixer(props) {
 }
 
 function Pitch(props) {
+    const [uniTune, setUniTune] = useReducer(reducer, 0);
+    const [tune, setTune] = useReducer(reducer, 0);
+    const [transpose, setTranspose] = useReducer(reducer, 0);
+    const [portamento, setPortamento] = useReducer(reducer, 0);
+    const [bend, setBend] = useReducer(reducer, 0);
+    const [vInt, setVInt] = useReducer(reducer, 0);
+
     return (
         <Stack fill anchor="top-left" guidingChild="first">
             <Box
                 align="center"
                 justify="center"
+                background={{ "color": "background" }}
+                gridArea="VCO2"
+                pad="large"
+                gap="medium"
+                direction="column"
                 elevation="small"
                 round="small"
                 fill>
-                <Box align="center" justify="center" gap="medium">
+                <Box
+                    align="center"
+                    justify="center"
+                    fill="horizontal"
+                    gap="small">
                     <Select
                         options={["Mono", "Poly", "Unison"]}
+                        plain={false}
+                        multiple={false}
+                        name="voice-assign"
                         placeholder="Voice Assign"
                     />
                     <Select
                         options={["Single", "Multi"]}
-                        placeholder="Trigger Assign"
+                        plain={false}
+                        multiple={false}
+                        name="trigger-mode"
+                        placeholder="Trigger Mode"
                     />
+                    <Box
+                        align="center"
+                        justify="start"
+                        direction="column"
+                        fill="horizontal"
+                        gap="small">
+                        <LabeledSlider
+                            label="Transpose"
+                            max={24}
+                            min={-24}
+                            step={1}
+                            value={transpose}
+                            onChange={setTranspose}
+                        />
+                        <LabeledSlider
+                            label="Tune"
+                            max={50}
+                            min={-50}
+                            step={1}
+                            value={tune}
+                            onChange={setTune}
+                        />
+                        <LabeledSlider
+                            label="Unison Detune"
+                            max={99}
+                            min={0}
+                            step={1}
+                            value={uniTune}
+                            onChange={setUniTune}
+                        />
+                        <LabeledSlider
+                            label="Portamento"
+                            max={127}
+                            min={0}
+                            step={1}
+                            value={portamento}
+                            onChange={setPortamento}
+                        />
+                        <LabeledSlider
+                            label="Bend Range"
+                            max={12}
+                            min={-12}
+                            step={1}
+                            value={bend}
+                            onChange={setBend}
+                        />
+                        <LabeledSlider
+                            label="Vibrato Int"
+                            max={63}
+                            min={-63}
+                            step={1}
+                            value={vInt}
+                            onChange={setVInt}
+                        />
+                    </Box>
                 </Box>
             </Box>
             <Heading