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

Squashed commit of the following:

Browse Source 
commit 822f2d6527d161a29ed9d2603ae73c416ec04c37
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 15:33:17 2020 -0500

    Squashed commit of the following:

    commit 8853f3122e77188a987b5a2585fc61aa137fddab
    Author: [poww10s] <[theironminer@gmail.com]>
    Date:   Thu Nov 19 15:24:23 2020 -0500

        Squashed commit of the following:

        commit 47b74abadfd125b90c883d43786149a51bb7cdba
        Author: [poww10s] <[theironminer@gmail.com]>
        Date:   Thu Nov 19 14:15:03 2020 -0500

            custom rc-slider style and include

        commit b2d1161cbc7eabb6a2c512606b66104084c25754
        Author: [poww10s] <[theironminer@gmail.com]>
        Date:   Thu Nov 19 14:14:45 2020 -0500

            include rc-slider package

    commit fca611edc959935b09dcd70cfaa737680f22d559
    Author: [poww10s] <[theironminer@gmail.com]>
    Date:   Thu Nov 19 03:09:47 2020 -0500

        add styled-components

commit 86bec44f1ea5f631107aad0c561a5788728946c8
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:13:09 2020 -0500

    added timbre2 to App

commit d1c275b9915861fde8ca9225e5dcb591c707949d
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:13:00 2020 -0500

    updated parameterSlice with correct ID's

commit 3e694c135722c4c63c489e6c2691b18fea4f977a
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:12:30 2020 -0500

    added timbre reducer to store

commit 251693a3fd35aca039de51dda79a17e4154afb89
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:12:11 2020 -0500

    added support for seperate timbres

commit a2b24c1e6f7cf1b95bfeffb828418319932658ec
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:11:54 2020 -0500

    added timbreSlice
This commit is contained in:
[poww10s]
2020-11-19 15:33:42 -05:00
parent fcf45a690c
commit 0f8991695f
17 changed files with 881 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/helpers/Helpers.js
+7 -6
View File
@@ -1,15 +1,17 @@
import React from 'react';
import styles from './Helpers.module.css';
import RCSlider, { createSliderWithTooltip } from 'rc-slider';
import './index.css';
const SliderWithToolTip = createSliderWithTooltip(RCSlider);
const Slider = (props) => {
return (
<input
className={styles.slider}
type="range"
<SliderWithToolTip
tipFormatter={(v) => `${v}`}
min={props.min}
max={props.max}
value={props.parameter}
onChange={(e) => props.onChange(e.target.value)}
onChange={(v) => props.onChange(v)}
/>
);
};
@@ -22,7 +24,6 @@ const SelectList = (props) => {
));
return (
<select
className={styles.dropdown}
value={props.value}
onChange={(e) => props.onChange(e.target.value)}>
{options}
src/features/helpers/Helpers.module.css
+249 -16
View File
@@ -1,21 +1,254 @@
.slider {
-webkit-appearance: none;
appearance: none;
outline: none;
height: 5px;
background-color: lightgray;
border-radius: 10px;
.rc-slider {
position: relative;
height: 14px;
padding: 5px 0;
width: 100%;
border-radius: 6px;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: slategray;
height: 15px;
width: 15px;
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
position: absolute;
width: 100%;
background-color: #e9e9e9;
height: 4px;
border-radius: 6px;
}
.rc-slider-track {
position: absolute;
left: 0;
height: 4px;
border-radius: 6px;
background-color: #abe2fb;
}
.rc-slider-handle {
position: absolute;
width: 14px;
height: 14px;
cursor: pointer;
cursor: -webkit-grab;
margin-top: -5px;
cursor: grab;
border-radius: 50%;
transition: background 0.15s ease-in-out;
border: solid 2px #96dbfa;
background-color: #fff;
touch-action: pan-x;
}
.slider::-webkit-slider-thumb:hover {
background: slateblue;
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
border-color: #57c5f7;
box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle:focus {
outline: none;
}
.rc-slider-handle-click-focused:focus {
border-color: #96dbfa;
box-shadow: unset;
}
.rc-slider-handle:hover {
border-color: #57c5f7;
}
.rc-slider-handle:active {
border-color: #57c5f7;
box-shadow: 0 0 5px #57c5f7;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.rc-slider-mark {
position: absolute;
top: 18px;
left: 0;
width: 100%;
font-size: 12px;
}
.rc-slider-mark-text {
position: absolute;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
color: #999;
}
.rc-slider-mark-text-active {
color: #666;
}
.rc-slider-step {
position: absolute;
width: 100%;
height: 4px;
background: transparent;
}
.rc-slider-dot {
position: absolute;
bottom: -2px;
margin-left: -4px;
width: 8px;
height: 8px;
border: 2px solid #e9e9e9;
background-color: #fff;
cursor: pointer;
border-radius: 50%;
vertical-align: middle;
}
.rc-slider-dot-active {
border-color: #96dbfa;
}
.rc-slider-dot-reverse {
margin-right: -4px;
}
.rc-slider-disabled {
background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
border-color: #ccc;
box-shadow: none;
background-color: #fff;
cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important;
}
.rc-slider-vertical {
width: 14px;
height: 100%;
padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-track {
left: 5px;
bottom: 0;
width: 4px;
}
.rc-slider-vertical .rc-slider-handle {
margin-left: -5px;
touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
top: 0;
left: 18px;
height: 100%;
}
.rc-slider-vertical .rc-slider-step {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-dot {
left: 2px;
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:first-child {
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:last-child {
margin-bottom: -4px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
animation-name: rcSliderTooltipZoomDownIn;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
animation-name: rcSliderTooltipZoomDownOut;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
transform: scale(0, 0);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes rcSliderTooltipZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}
.rc-slider-tooltip {
position: absolute;
left: -9999px;
top: -9999px;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
display: none;
}
.rc-slider-tooltip-placement-top {
padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
padding: 6px 2px;
min-width: 24px;
height: 24px;
font-size: 12px;
line-height: 1;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
bottom: 4px;
left: 50%;
margin-left: -4px;
border-width: 4px 4px 0;
border-top-color: #6c6c6c;
}
src/features/helpers/index.css
+251
View File
@@ -0,0 +1,251 @@
.rc-slider {
position: relative;
height: 14px;
padding: 5px 0;
width: 100%;
border-radius: 6px;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
margin: 5px 0;
}
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
position: absolute;
width: 100%;
background-color: lightgray;
height: 4px;
border-radius: 6px;
}
.rc-slider-track {
position: absolute;
left: 0;
height: 4px;
border-radius: 6px;
background-color: lightgrey;
}
.rc-slider-handle {
position: absolute;
width: 14px;
height: 14px;
cursor: pointer;
cursor: -webkit-grab;
margin-top: -5px;
cursor: grab;
border-radius: 50%;
background-color: slategrey;
touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
background-color: slateblue;
}
.rc-slider-handle:focus {
outline: none;
}
.rc-slider-handle-click-focused:focus {
background-color: slateblue;
}
.rc-slider-handle:hover {
background-color: slateblue;
}
.rc-slider-handle:active {
background-color: slateblue;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.rc-slider-mark {
position: absolute;
top: 18px;
left: 0;
width: 100%;
font-size: 12px;
}
.rc-slider-mark-text {
position: absolute;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
color: #999;
}
.rc-slider-mark-text-active {
color: #666;
}
.rc-slider-step {
position: absolute;
width: 100%;
height: 4px;
background: transparent;
}
.rc-slider-dot {
position: absolute;
bottom: -2px;
margin-left: -4px;
width: 8px;
height: 8px;
border: 2px solid #e9e9e9;
background-color: #fff;
cursor: pointer;
border-radius: 50%;
vertical-align: middle;
}
.rc-slider-dot-active {
border-color: #96dbfa;
}
.rc-slider-dot-reverse {
margin-right: -4px;
}
.rc-slider-disabled {
background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
border-color: #ccc;
box-shadow: none;
background-color: #fff;
cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important;
}
.rc-slider-vertical {
width: 14px;
height: 100%;
padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-track {
left: 5px;
bottom: 0;
width: 4px;
}
.rc-slider-vertical .rc-slider-handle {
margin-left: -5px;
touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
top: 0;
left: 18px;
height: 100%;
}
.rc-slider-vertical .rc-slider-step {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-dot {
left: 2px;
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:first-child {
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:last-child {
margin-bottom: -4px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
animation-name: rcSliderTooltipZoomDownIn;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
animation-name: rcSliderTooltipZoomDownOut;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
transform: scale(0, 0);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes rcSliderTooltipZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}
.rc-slider-tooltip {
position: absolute;
left: -9999px;
top: -9999px;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
display: none;
}
.rc-slider-tooltip-placement-top {
padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
padding: 6px 2px;
min-width: 24px;
height: 24px;
font-size: 12px;
line-height: 1;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
bottom: 4px;
left: 50%;
margin-left: -4px;
border-width: 4px 4px 0;
border-top-color: #6c6c6c;
}
src/features/timbre/Timbre.js
+13 -10
View File
@@ -1,4 +1,5 @@
import React from 'react';
import { useSelector } from 'react-redux';
import VCO from './parameters/VCO';
import Mixer from './parameters/Mixer';
import Pitch from './parameters/Pitch';
@@ -6,6 +7,7 @@ import Filter from './parameters/Filter';
import EG from './parameters/EG';
import Amp from './parameters/Amp';
import LFO from './parameters/LFO';
import { selectById } from './timbreSlice.js';
const style = {
display: 'flex',
@@ -13,10 +15,11 @@ const style = {
};
export function Timbre(props) {
const ids = useSelector((state) => selectById(state, props.id));
return (
<div style={style}>
<VCO
id="vco1"
id={ids.vco1}
waveforms={[
'Saw',
'Square',
@@ -96,23 +99,23 @@ export function Timbre(props) {
]}
/>
<VCO
id="vco2"
id={ids.vco2}
waveforms={['Saw', 'Square', 'Triangle']}
dwgsOrModTypeName="Mod Type"
dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
/>
<Mixer id="mixer1" />
<Pitch id="pitch1" />
<Filter id="filter1" />
<EG id="eg1" />
<Amp id="amp1" />
<EG id="eg2" />
<Mixer id={ids.mixer} />
<Pitch id={ids.pitch} />
<Filter id={ids.filter} />
<EG id={ids.eg1} />
<Amp id={ids.amp} />
<EG id={ids.eg2} />
<LFO
id="lfo1"
id={ids.lfo1}
waveforms={['Saw', 'Square 1', 'Triangle', 'Sample & Hold']}
/>
<LFO
id="lfo2"
id={ids.lfo2}
waveforms={['Saw', 'Square 2', 'Sine', 'Sample & Hold']}
/>
</div>
src/features/timbre/parameters/Amp.js
+6 -6
View File
@@ -12,8 +12,8 @@ export default function Amp(props) {
<div className={styles.container}>
<Slider
parameter={parameters.ampLevel}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -25,8 +25,8 @@ export default function Amp(props) {
/>
<Slider
parameter={parameters.panpot}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -38,8 +38,8 @@ export default function Amp(props) {
/>
<Slider
parameter={parameters.ampTrack}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
src/features/timbre/parameters/EG.js
+8 -8
View File
@@ -12,8 +12,8 @@ export default function EG(props) {
<div className={styles.container}>
<Slider
parameter={parameters.attack}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -25,8 +25,8 @@ export default function EG(props) {
/>
<Slider
parameter={parameters.decay}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -38,8 +38,8 @@ export default function EG(props) {
/>
<Slider
parameter={parameters.sustain}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -51,8 +51,8 @@ export default function EG(props) {
/>
<Slider
parameter={parameters.release}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
src/features/timbre/parameters/Filter.js
+8 -8
View File
@@ -29,8 +29,8 @@ export default function Filter(props) {
/>
<Slider
parameter={parameters.cutoff}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -42,8 +42,8 @@ export default function Filter(props) {
/>
<Slider
parameter={parameters.resonance}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -55,8 +55,8 @@ export default function Filter(props) {
/>
<Slider
parameter={parameters.egIntensity}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -68,8 +68,8 @@ export default function Filter(props) {
/>
<Slider
parameter={parameters.keyboardTrack}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
src/features/timbre/parameters/Mixer.js
+7
View File
@@ -11,6 +11,8 @@ export default function Mixer(props) {
return (
<div className={styles.container}>
<Slider
min={0}
max={127}
parameter={parameters.vol1}
onChange={(value) =>
dispatch(
@@ -22,6 +24,8 @@ export default function Mixer(props) {
}
/>
<Slider
min={0}
max={127}
parameter={parameters.vol2}
onChange={(value) =>
dispatch(
@@ -33,6 +37,9 @@ export default function Mixer(props) {
}
/>
<Slider
className={styles.slider}
min={0}
max={127}
parameter={parameters.vol3}
onChange={(value) =>
dispatch(
src/features/timbre/parameters/Parameters.module.css
+3 -4
View File
@@ -6,10 +6,9 @@
padding: 10pt;
margin: 2pt;
border: solid 1pt black;
width: 120px;
flex-basis: 100%;
}
.container > input {
margin: 7pt 0;
}
.container > select {
.container > * {
margin: 2.5pt 0;
}
src/features/timbre/parameters/Pitch.js
+12 -12
View File
@@ -36,8 +36,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.transpose}
min="-24"
max="24"
min={-24}
max={24}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -49,8 +49,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.tune}
min="-50"
max="50"
min={-50}
max={50}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -62,8 +62,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.unisonDetune}
min="0"
max="99"
min={0}
max={99}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -75,8 +75,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.portamento}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -88,8 +88,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.bendRange}
min="-12"
max="12"
min={-12}
max={12}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -101,8 +101,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.vibratoIntensity}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
src/features/timbre/parameters/VCO.js
+4 -4
View File
@@ -38,8 +38,8 @@ export default function VCO(props) {
/>
Waveform Mod
<Slider
min="0"
max="100"
min={0}
max={100}
parameter={parameters.waveMod}
onChange={(value) =>
dispatch(
@@ -52,8 +52,8 @@ export default function VCO(props) {
/>
LFO Mod
<Slider
min="0"
max="100"
min={0}
max={100}
parameter={parameters.lfoMod}
onChange={(value) =>
dispatch(
src/features/timbre/parameters/parameterSlice.js
+88 -1
View File
@@ -9,7 +9,7 @@ const parametersSlice = createSlice({
'vco1',
'vco2',
'mixer1',
'timbre1',
'pitch1',
'filter1',
'eg1',
'amp1',
@@ -17,6 +17,17 @@ const parametersSlice = createSlice({
'lfo1',
'lfo2',
'patches1',
'vco3',
'vco4',
'mixer2',
'pitch2',
'filter2',
'eg3',
'amp2',
'eg4',
'lfo3',
'lfo4',
'patches2',
],
entities: {
'vco1': {
@@ -33,12 +44,32 @@ const parametersSlice = createSlice({
waveMod: 0,
lfoMod: 0,
},
'vco3': {
id: 'vco3',
waveform: 'Sine',
dwgsOrModType: 0,
waveMod: 100,
lfoMod: 0,
},
'vco4': {
id: 'vco4',
waveform: 'Triangle',
dwgsOrModType: 0,
waveMod: 0,
lfoMod: 100,
},
'mixer1': {
id: 'mixer1',
vol1: 127,
vol2: 0,
vol3: 0,
},
'mixer2': {
id: 'mixer2',
vol1: 127,
vol2: 0,
vol3: 0,
},
'pitch1': {
id: 'pitch1',
voiceAssign: 'Mono',
@@ -50,6 +81,17 @@ const parametersSlice = createSlice({
bendRange: 0,
vibratoIntensity: 0,
},
'pitch2': {
id: 'pitch2',
voiceAssign: 'Mono',
triggerMode: 'Single',
transpose: 0,
tune: 0,
unisonDetune: 0,
portamento: 0,
bendRange: 0,
vibratoIntensity: 0,
},
'filter1': {
id: 'filter1',
filterType: '-24db Low Pass',
@@ -58,6 +100,14 @@ const parametersSlice = createSlice({
egIntensity: 0,
keyboardTrack: 0,
},
'filter2': {
id: 'filter2',
filterType: '-24db Low Pass',
cutoff: 0,
resonance: 0,
egIntensity: 0,
keyboardTrack: 0,
},
'eg1': {
id: 'eg1',
attack: 0,
@@ -81,6 +131,29 @@ const parametersSlice = createSlice({
release: 0,
egReset: true,
},
'eg3': {
id: 'eg3',
attack: 0,
decay: 0,
sustain: 127,
release: 0,
egReset: false,
},
'amp2': {
id: 'amp2',
ampLevel: 127,
panpot: 0,
ampTrack: 0,
distortion: false,
},
'eg4': {
id: 'eg4',
attack: 0,
decay: 0,
sustain: 127,
release: 0,
egReset: true,
},
'lfo1': {
id: 'lfo1',
waveform: 'Saw',
@@ -95,6 +168,20 @@ const parametersSlice = createSlice({
tempoSync: false,
frequency: 0,
},
'lfo3': {
id: 'lfo3',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
},
'lfo4': {
id: 'lfo4',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
},
},
}),
reducers: {
src/features/timbre/timbreSlice.js
+55
View File
@@ -0,0 +1,55 @@
import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
const timbreAdapter = createEntityAdapter({});
const timbreSlice = createSlice({
name: 'timbre',
initialState: timbreAdapter.getInitialState({
ids: ['timbre1', 'timbre2', 'vocoder', 'effects', 'arpeggiator'],
entities: {
'timbre1': {
id: 'timbre1',
vco1: 'vco1',
vco2: 'vco2',
mixer: 'mixer1',
pitch: 'pitch1',
filter: 'filter1',
eg1: 'eg1',
amp: 'amp1',
eg2: 'eg2',
lfo1: 'lfo1',
lfo2: 'lfo2',
patches: 'patches1',
},
'timbre2': {
id: 'timbre2',
vco1: 'vco3',
vco2: 'vco4',
mixer: 'mixer2',
pitch: 'pitch2',
filter: 'filter2',
eg1: 'eg3',
amp: 'amp2',
eg2: 'eg4',
lfo1: 'lfo3',
lfo2: 'lfo4',
patches: 'patches2',
},
},
}),
reducers: {
timbreAdded: timbreAdapter.addOne,
timbreUpdated: timbreAdapter.updateOne,
},
});
export const {
selectById,
selectAll,
selectEntities,
selectIds,
} = timbreAdapter.getSelectors((state) => state.timbres);
export const { timbreAdded, timbreUpdated } = timbreSlice.actions;
export default timbreSlice.reducer;