cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add LFO component and add prop lists

Browse Source
This commit is contained in:
[poww10s]
2020-11-18 17:59:20 -05:00
parent 68d6471357
commit 71cfe8a16e
5 changed files with 193 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/timbre/parameters/LFO.js
+60
View File
@@ -0,0 +1,60 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
export default function LFO(props) {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div>
<SelectList
value={parameters.waveform}
list={props.waveforms}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { waveform: value },
})
)
}
/>
<SelectList
value={parameters.keySync}
list={['Off', 'Timbre', 'Voice']}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { keySync: value },
})
)
}
/>
<Checkbox
parameter={parameters.tempoSync}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { tempoSync: value },
})
)
}
/>
<Slider
parameter={parameters.frequency}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { frequency: value },
})
)
}
/>
</div>
);
}
src/features/timbre/parameters/Mixer.js
+1 -12
View File
@@ -1,18 +1,7 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
const Slider = (props) => {
return (
<input
type="range"
min="0"
max="127"
value={props.parameter}
onChange={(e) => props.onChange(e.target.value)}
/>
);
};
import { Slider } from '../../helpers/Helpers';
export default function Mixer(props) {
const parameters = useSelector((state) => selectById(state, props.id));
src/features/timbre/parameters/VCO.js
+29 -4
View File
@@ -9,6 +9,30 @@ export default function VCO(props) {
const dispatch = useDispatch();
return (
<div>
<SelectList
value={parameters.waveform}
list={props.waveforms}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { waveform: value },
})
)
}
/>
<SelectList
value={parameters.dwgsOrModType}
list={props.dwgsOrModType}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { dwgsOrModType: value },
})
)
}
/>
<Slider
min="0"
max="100"
@@ -22,14 +46,15 @@ export default function VCO(props) {
)
}
/>
<SelectList
value={parameters.waveform}
list={['Saw', 'Square', 'Triangle']}
<Slider
min="0"
max="100"
parameter={parameters.lfoMod}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { waveform: value },
changes: { lfoMod: value },
})
)
}
src/features/timbre/parameters/parameterSlice.js
+8
View File
@@ -83,9 +83,17 @@ const parametersSlice = createSlice({
},
'lfo1': {
id: 'lfo1',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
},
'lfo2': {
id: 'lfo2',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
},
},
}),