Squashed commit of the following:
commit 1c83bf85b13a426c9b74d3e7d4ec2613b2aaff39 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 22:12:31 2020 -0500 Styling Timbre Sections commit e662f36f78e0d89a2f4ef195b768e955a0130094 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 21:08:12 2020 -0500 update styling commit f9a87e5749799406e9a00a45c0c02f1b5e8c8f2d Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 20:54:36 2020 -0500 fix initialState for dwgsOrModType commit 15b89fa96f224fec3d5df982433536951e99ba21 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 20:47:38 2020 -0500 implemented react-select commit 23dddc2d6bcd25ed01ef68e3040d9d7375761e5f Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 15:23:47 2020 -0500 add react-select 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]
Generated
+80
@@ -1191,6 +1191,16 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
|
||||
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
|
||||
},
|
||||
"@emotion/utils": {
|
||||
"version": "0.11.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
|
||||
"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
|
||||
},
|
||||
"@emotion/weak-memoize": {
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
|
||||
"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
|
||||
},
|
||||
"@eslint/eslintrc": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz",
|
||||
@@ -3378,6 +3388,23 @@
|
||||
"object.assign": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"babel-plugin-emotion": {
|
||||
"version": "10.0.33",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
|
||||
"integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@emotion/hash": "0.8.0",
|
||||
"@emotion/memoize": "0.7.4",
|
||||
"@emotion/serialize": "^0.11.16",
|
||||
"babel-plugin-macros": "^2.0.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"convert-source-map": "^1.5.0",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"find-root": "^1.1.0",
|
||||
"source-map": "^0.5.7"
|
||||
}
|
||||
},
|
||||
"babel-plugin-istanbul": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
|
||||
@@ -5252,6 +5279,15 @@
|
||||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
|
||||
"integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.8.7",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
|
||||
@@ -6653,6 +6689,11 @@
|
||||
"pkg-dir": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"find-root": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
|
||||
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
|
||||
},
|
||||
"find-up": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
|
||||
@@ -10067,6 +10108,11 @@
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
|
||||
},
|
||||
"memoize-one": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
|
||||
"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
|
||||
},
|
||||
"memory-fs": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
|
||||
@@ -12650,6 +12696,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
|
||||
"integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw=="
|
||||
},
|
||||
"react-input-autosize": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
|
||||
"integrity": "sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
@@ -12737,6 +12791,32 @@
|
||||
"workbox-webpack-plugin": "5.1.4"
|
||||
}
|
||||
},
|
||||
"react-select": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz",
|
||||
"integrity": "sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@emotion/cache": "^10.0.9",
|
||||
"@emotion/core": "^10.0.9",
|
||||
"@emotion/css": "^10.0.9",
|
||||
"memoize-one": "^5.0.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-input-autosize": "^2.2.2",
|
||||
"react-transition-group": "^4.3.0"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
"integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"react-dom": "^17.0.1",
|
||||
"react-redux": "^7.2.2",
|
||||
"react-scripts": "4.0.0",
|
||||
"react-select": "^3.1.0",
|
||||
"styled-components": "^5.2.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ function App() {
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<Timbre id="timbre1" />
|
||||
<Timbre id="timbre2" />
|
||||
{/*<Timbre id="timbre2" />*/}
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
import React from 'react';
|
||||
import RCSlider, { createSliderWithTooltip } from 'rc-slider';
|
||||
import './index.css';
|
||||
import Select from 'react-select';
|
||||
import './rcSelectTheme.css';
|
||||
|
||||
const SliderWithToolTip = createSliderWithTooltip(RCSlider);
|
||||
|
||||
const SelectStyle = {
|
||||
control: (provided) => ({
|
||||
...provided,
|
||||
width: '100%',
|
||||
}),
|
||||
};
|
||||
|
||||
const Slider = (props) => {
|
||||
return (
|
||||
<SliderWithToolTip
|
||||
@@ -17,17 +25,22 @@ const Slider = (props) => {
|
||||
};
|
||||
|
||||
const SelectList = (props) => {
|
||||
const options = props.list.map((option, index) => (
|
||||
<option value={option} key={index}>
|
||||
{option}
|
||||
</option>
|
||||
));
|
||||
return (
|
||||
<<<<<<< HEAD
|
||||
<select
|
||||
value={props.value}
|
||||
onChange={(e) => props.onChange(e.target.value)}>
|
||||
{options}
|
||||
</select>
|
||||
=======
|
||||
<Select
|
||||
value={{ value: props.value }}
|
||||
options={props.list}
|
||||
getOptionLabel={(option) => `${option.value}`}
|
||||
onChange={(e) => props.onChange(e.value)}
|
||||
styles={SelectStyle}
|
||||
/>
|
||||
>>>>>>> v2-styling-react-select
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
+116
-75
@@ -9,114 +9,155 @@ import Amp from './parameters/Amp';
|
||||
import LFO from './parameters/LFO';
|
||||
import { selectById } from './timbreSlice.js';
|
||||
|
||||
const style = {
|
||||
const timbreStyle = {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
};
|
||||
|
||||
const lineBreak = {
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
export function Timbre(props) {
|
||||
const ids = useSelector((state) => selectById(state, props.id));
|
||||
return (
|
||||
<div style={style}>
|
||||
<div style={timbreStyle}>
|
||||
<VCO
|
||||
id={ids.vco1}
|
||||
waveforms={[
|
||||
'Saw',
|
||||
'Square',
|
||||
'Triangle',
|
||||
'Sine',
|
||||
'Vox Wave',
|
||||
'DWGS',
|
||||
'Noise',
|
||||
'Audio In',
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square' },
|
||||
{ value: 'Triangle' },
|
||||
{ value: 'Sine' },
|
||||
{ value: 'Vox Wave' },
|
||||
{ value: 'DWGS' },
|
||||
{ value: 'Noise' },
|
||||
{ value: 'Audio In' },
|
||||
]}
|
||||
dwgsOrModTypeName="DWGS"
|
||||
dwgsOrModType={[
|
||||
'SynSine1',
|
||||
'SynSine2',
|
||||
'SynSine3',
|
||||
'SynSine4',
|
||||
'SynSine5',
|
||||
'SynSine6',
|
||||
'SynSine7',
|
||||
'SynBass1',
|
||||
'SynBass2',
|
||||
'SynBass3',
|
||||
'SynBass4',
|
||||
'SynBass5',
|
||||
'SynBass6',
|
||||
'SynBass7',
|
||||
'SynWave1',
|
||||
'SynWave2',
|
||||
'SynWave3',
|
||||
'SynWave4',
|
||||
'SynWave5',
|
||||
'SynWave6',
|
||||
'SynWave7',
|
||||
'SynWave8',
|
||||
'SynWave9',
|
||||
'5thWave1',
|
||||
'5thWave2',
|
||||
'5thWave3',
|
||||
'Digi1',
|
||||
'Digi2',
|
||||
'Digi3',
|
||||
'Digi4',
|
||||
'Digi5',
|
||||
'Digi6',
|
||||
'Digi7',
|
||||
'Digi8',
|
||||
'Endless',
|
||||
'E.Piano1',
|
||||
'E.Piano2',
|
||||
'E.Piano3',
|
||||
'E.Piano4',
|
||||
'Organ1',
|
||||
'Organ2',
|
||||
'Organ3',
|
||||
'Organ4',
|
||||
'Organ5',
|
||||
'Organ6',
|
||||
'Organ7',
|
||||
'Clav1',
|
||||
'Clav2',
|
||||
'Guitar1',
|
||||
'Guitar2',
|
||||
'Guitar3',
|
||||
'Bass1',
|
||||
'Bass2',
|
||||
'Bass3',
|
||||
'Bass4',
|
||||
'Bass5',
|
||||
'Bell1',
|
||||
'Bell2',
|
||||
'Bell3',
|
||||
'Bell4',
|
||||
'Voice1',
|
||||
'Voice2',
|
||||
'Voice3',
|
||||
'Voice4',
|
||||
{ value: 'SynSine1' },
|
||||
{ value: 'SynSine2' },
|
||||
{ value: 'SynSine3' },
|
||||
{ value: 'SynSine4' },
|
||||
{ value: 'SynSine5' },
|
||||
{ value: 'SynSine6' },
|
||||
{ value: 'SynSine7' },
|
||||
{ value: 'SynBass1' },
|
||||
{ value: 'SynBass2' },
|
||||
{ value: 'SynBass3' },
|
||||
{ value: 'SynBass4' },
|
||||
{ value: 'SynBass5' },
|
||||
{ value: 'SynBass6' },
|
||||
{ value: 'SynBass7' },
|
||||
{ value: 'SynWave1' },
|
||||
{ value: 'SynWave2' },
|
||||
{ value: 'SynWave3' },
|
||||
{ value: 'SynWave4' },
|
||||
{ value: 'SynWave5' },
|
||||
{ value: 'SynWave6' },
|
||||
{ value: 'SynWave7' },
|
||||
{ value: 'SynWave8' },
|
||||
{ value: 'SynWave9' },
|
||||
{ value: '5thWave1' },
|
||||
{ value: '5thWave2' },
|
||||
{ value: '5thWave3' },
|
||||
{ value: 'Digi1' },
|
||||
{ value: 'Digi2' },
|
||||
{ value: 'Digi3' },
|
||||
{ value: 'Digi4' },
|
||||
{ value: 'Digi5' },
|
||||
{ value: 'Digi6' },
|
||||
{ value: 'Digi7' },
|
||||
{ value: 'Digi8' },
|
||||
{ value: 'Endless' },
|
||||
{ value: 'E.Piano1' },
|
||||
{ value: 'E.Piano2' },
|
||||
{ value: 'E.Piano3' },
|
||||
{ value: 'E.Piano4' },
|
||||
{ value: 'Organ1' },
|
||||
{ value: 'Organ2' },
|
||||
{ value: 'Organ3' },
|
||||
{ value: 'Organ4' },
|
||||
{ value: 'Organ5' },
|
||||
{ value: 'Organ6' },
|
||||
{ value: 'Organ7' },
|
||||
{ value: 'Clav1' },
|
||||
{ value: 'Clav2' },
|
||||
{ value: 'Guitar1' },
|
||||
{ value: 'Guitar2' },
|
||||
{ value: 'Guitar3' },
|
||||
{ value: 'Bass1' },
|
||||
{ value: 'Bass2' },
|
||||
{ value: 'Bass3' },
|
||||
{ value: 'Bass4' },
|
||||
{ value: 'Bass5' },
|
||||
{ value: 'Bell1' },
|
||||
{ value: 'Bell2' },
|
||||
{ value: 'Bell3' },
|
||||
{ value: 'Bell4' },
|
||||
{ value: 'Voice1' },
|
||||
{ value: 'Voice2' },
|
||||
{ value: 'Voice3' },
|
||||
{ value: 'Voice4' },
|
||||
]}
|
||||
/>
|
||||
<VCO
|
||||
id={ids.vco2}
|
||||
<<<<<<< HEAD
|
||||
waveforms={['Saw', 'Square', 'Triangle']}
|
||||
=======
|
||||
waveforms={[
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square' },
|
||||
{ value: 'Triangle' },
|
||||
]}
|
||||
>>>>>>> v2-styling-react-select
|
||||
dwgsOrModTypeName="Mod Type"
|
||||
dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
|
||||
dwgsOrModType={[
|
||||
{ value: 'Off' },
|
||||
{ value: 'Ring' },
|
||||
{ value: 'Sync' },
|
||||
{ value: 'RingSync' },
|
||||
]}
|
||||
/>
|
||||
<Mixer id={ids.mixer} />
|
||||
<Pitch id={ids.pitch} />
|
||||
<Filter id={ids.filter} />
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<div className="linebreak" style={lineBreak} />
|
||||
>>>>>>> v2-styling-react-select
|
||||
<EG id={ids.eg1} />
|
||||
<Amp id={ids.amp} />
|
||||
<EG id={ids.eg2} />
|
||||
<LFO
|
||||
id={ids.lfo1}
|
||||
<<<<<<< HEAD
|
||||
waveforms={['Saw', 'Square 1', 'Triangle', 'Sample & Hold']}
|
||||
/>
|
||||
<LFO
|
||||
id={ids.lfo2}
|
||||
waveforms={['Saw', 'Square 2', 'Sine', 'Sample & Hold']}
|
||||
=======
|
||||
waveforms={[
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square 1' },
|
||||
{ value: 'Triangle' },
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
/>
|
||||
<LFO
|
||||
id={ids.lfo2}
|
||||
waveforms={[
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square 2' },
|
||||
{ value: 'Sine' },
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
>>>>>>> v2-styling-react-select
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function Amp(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
Amp Level
|
||||
<Slider
|
||||
parameter={parameters.ampLevel}
|
||||
min={0}
|
||||
@@ -23,6 +24,7 @@ export default function Amp(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
PanPot
|
||||
<Slider
|
||||
parameter={parameters.panpot}
|
||||
min={-63}
|
||||
@@ -36,6 +38,7 @@ export default function Amp(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Amp Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.ampTrack}
|
||||
min={-63}
|
||||
@@ -49,6 +52,7 @@ export default function Amp(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Distortion
|
||||
<Checkbox
|
||||
parameter={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function EG(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
Attack
|
||||
<Slider
|
||||
parameter={parameters.attack}
|
||||
min={0}
|
||||
@@ -23,6 +24,7 @@ export default function EG(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Decay
|
||||
<Slider
|
||||
parameter={parameters.decay}
|
||||
min={0}
|
||||
@@ -36,6 +38,7 @@ export default function EG(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Sustain
|
||||
<Slider
|
||||
parameter={parameters.sustain}
|
||||
min={0}
|
||||
@@ -49,6 +52,7 @@ export default function EG(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Release
|
||||
<Slider
|
||||
parameter={parameters.release}
|
||||
min={0}
|
||||
@@ -62,6 +66,7 @@ export default function EG(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
EG Reset
|
||||
<Checkbox
|
||||
parameter={parameters.egReset}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -10,13 +10,14 @@ export default function Filter(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
Filter Type
|
||||
<SelectList
|
||||
value={parameters.filterType}
|
||||
list={[
|
||||
'-24db Low Pass',
|
||||
'-12db Low Pass',
|
||||
'Band Pass',
|
||||
'High Pass',
|
||||
{ value: '-24db Low Pass' },
|
||||
{ value: '-12db Low Pass' },
|
||||
{ value: 'Band Pass' },
|
||||
{ value: 'High Pass' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -27,6 +28,7 @@ export default function Filter(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Cutoff
|
||||
<Slider
|
||||
parameter={parameters.cutoff}
|
||||
min={0}
|
||||
@@ -40,6 +42,7 @@ export default function Filter(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Resonance
|
||||
<Slider
|
||||
parameter={parameters.resonance}
|
||||
min={0}
|
||||
@@ -53,6 +56,7 @@ export default function Filter(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
EG Intensity
|
||||
<Slider
|
||||
parameter={parameters.egIntensity}
|
||||
min={-63}
|
||||
@@ -66,6 +70,7 @@ export default function Filter(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.keyboardTrack}
|
||||
min={-63}
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function LFO(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
LFO Waveform
|
||||
<SelectList
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
@@ -22,6 +23,7 @@ export default function LFO(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Key Sync
|
||||
<SelectList
|
||||
value={parameters.keySync}
|
||||
list={['Off', 'Timbre', 'Voice']}
|
||||
@@ -34,6 +36,7 @@ export default function LFO(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Tempo Sync
|
||||
<Checkbox
|
||||
parameter={parameters.tempoSync}
|
||||
onChange={(value) =>
|
||||
@@ -45,6 +48,7 @@ export default function LFO(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Frequency
|
||||
<Slider
|
||||
parameter={parameters.frequency}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function Mixer(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
Volume 1
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
@@ -23,6 +24,7 @@ export default function Mixer(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Volume 2
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
@@ -36,6 +38,7 @@ export default function Mixer(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Volume 3
|
||||
<Slider
|
||||
className={styles.slider}
|
||||
min={0}
|
||||
|
||||
@@ -3,12 +3,39 @@
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10pt;
|
||||
margin: 2pt;
|
||||
padding: 16pt;
|
||||
margin: 10pt;
|
||||
border: solid 1pt black;
|
||||
width: 120px;
|
||||
flex-basis: 100%;
|
||||
width: 160px;
|
||||
height: 214px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.container > * {
|
||||
margin: 2.5pt 0;
|
||||
}
|
||||
|
||||
.pitchContainer {
|
||||
font-size: small;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16pt 8pt 16pt 8pt;
|
||||
margin: 10pt;
|
||||
border: solid 1pt black;
|
||||
width: 420px;
|
||||
height: 214px;
|
||||
}
|
||||
.pitchContainer > .container {
|
||||
padding: 0 16pt;
|
||||
width: 100%;
|
||||
margin: 10pt 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 214px;
|
||||
width: 1px;
|
||||
background-color: black;
|
||||
margin: 0 4pt;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ export default function Pitch(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<<<<<<< HEAD
|
||||
<div className={styles.container}>
|
||||
<SelectList
|
||||
value={parameters.voiceAssign}
|
||||
@@ -112,6 +113,128 @@ export default function Pitch(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
=======
|
||||
<div className={styles.pitchContainer}>
|
||||
<div className={styles.container}>
|
||||
Voice Assign
|
||||
<SelectList
|
||||
value={parameters.voiceAssign}
|
||||
list={[
|
||||
{ value: 'Mono' },
|
||||
{ value: 'Poly' },
|
||||
{ value: 'Unison' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Trigger Mode
|
||||
<SelectList
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Transpose
|
||||
<Slider
|
||||
parameter={parameters.transpose}
|
||||
min={-24}
|
||||
max={24}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { transpose: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.divider} />
|
||||
<div className={styles.container}>
|
||||
Tune
|
||||
<Slider
|
||||
parameter={parameters.tune}
|
||||
min={-50}
|
||||
max={50}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Unisone Detune
|
||||
<Slider
|
||||
parameter={parameters.unisonDetune}
|
||||
min={0}
|
||||
max={99}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { unisonDetune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Portamento
|
||||
<Slider
|
||||
parameter={parameters.portamento}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { portamento: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Bend Range
|
||||
<Slider
|
||||
parameter={parameters.bendRange}
|
||||
min={-12}
|
||||
max={12}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { bendRange: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Vibrato Intensity
|
||||
<Slider
|
||||
parameter={parameters.vibratoIntensity}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vibratoIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
>>>>>>> v2-styling-react-select
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -33,28 +33,36 @@ const parametersSlice = createSlice({
|
||||
'vco1': {
|
||||
id: 'vco1',
|
||||
waveform: 'Saw',
|
||||
dwgsOrModType: 0,
|
||||
dwgsOrModType: 'SynWave1',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
'vco2': {
|
||||
id: 'vco2',
|
||||
waveform: 'Square',
|
||||
dwgsOrModType: 0,
|
||||
dwgsOrModType: 'Off',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
'vco3': {
|
||||
id: 'vco3',
|
||||
waveform: 'Sine',
|
||||
<<<<<<< HEAD
|
||||
dwgsOrModType: 0,
|
||||
=======
|
||||
dwgsOrModType: 'SynWave1',
|
||||
>>>>>>> v2-styling-react-select
|
||||
waveMod: 100,
|
||||
lfoMod: 0,
|
||||
},
|
||||
'vco4': {
|
||||
id: 'vco4',
|
||||
waveform: 'Triangle',
|
||||
<<<<<<< HEAD
|
||||
dwgsOrModType: 0,
|
||||
=======
|
||||
dwgsOrModType: 'Off',
|
||||
>>>>>>> v2-styling-react-select
|
||||
waveMod: 0,
|
||||
lfoMod: 100,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user