add Dial to replace sliders
This commit is contained in:
Aoife
@@ -13,7 +13,7 @@ import { selectById } from './timbreSlice.js';
|
||||
export default function Timbre(props) {
|
||||
const ids = useSelector((state) => selectById(state, props.id));
|
||||
return (
|
||||
<div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 m-6'>
|
||||
<div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 p-6'>
|
||||
<VCO
|
||||
className='col-span-2'
|
||||
name='VCO 1'
|
||||
@@ -119,7 +119,7 @@ export default function Timbre(props) {
|
||||
<Amp className='col-span-2' name='Amp' id={ids.amp} />
|
||||
<EG className='col-span-2' name='EG 1' id={ids.eg1} />
|
||||
<EG className='col-span-2' name='EG 2' id={ids.eg2} />
|
||||
<LFO
|
||||
{/*<LFO
|
||||
className='col-span-2'
|
||||
name='LFO 1'
|
||||
id={ids.lfo1}
|
||||
@@ -141,7 +141,7 @@ export default function Timbre(props) {
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
/>
|
||||
<Patches className='col-span-2' name='Patches' id={ids.patches} />
|
||||
<Patches className='col-span-2' name='Patches' id={ids.patches} />*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function Card(props = { className: 'col-span-2' }) {
|
||||
props.className +
|
||||
' flex flex-col justify-start border border-gray-200 rounded-md shadow-md bg-white'
|
||||
}>
|
||||
<header className='flex items-start justify-between py-3 px-4 border-b border-solid border-gray-200'>
|
||||
<header className='flex items-start justify-between py-2 px-4 border-b border-solid border-gray-200'>
|
||||
<h3 className='text-xl font-semibold text-gray-900'>{props.header}</h3>
|
||||
</header>
|
||||
<section className='flex-grow flex flex-col justify-evenly px-6'>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { useSelector } from 'react-redux';
|
||||
export default function Editor() {
|
||||
const activeTab = useSelector((state) => state.parameters.activeTab);
|
||||
return (
|
||||
<div className='col-span-5'>
|
||||
<div className='col-span-5 overflow-y-scroll overscroll-contain'>
|
||||
{activeTab === 'Timbre1' ? <Timbre id='timbre1' /> : null}
|
||||
{activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
|
||||
{activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import React from 'react';
|
||||
import Card from '../card';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList } from '../../helpers/Helpers';
|
||||
@@ -8,83 +10,102 @@ export default function Filter(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Filter Type
|
||||
<SelectList
|
||||
value={parameters.filterType}
|
||||
list={[
|
||||
{ value: '-24db Low Pass' },
|
||||
{ value: '-12db Low Pass' },
|
||||
{ value: 'Band Pass' },
|
||||
{ value: 'High Pass' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { filterType: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Cutoff
|
||||
<Slider
|
||||
parameter={parameters.cutoff}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { cutoff: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Resonance
|
||||
<Slider
|
||||
parameter={parameters.resonance}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { resonance: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
EG Intensity
|
||||
<Slider
|
||||
parameter={parameters.egIntensity}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { egIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.keyboardTrack}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keyboardTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-4 flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Filter Type</h3>
|
||||
<Select
|
||||
className='select w-4/6'
|
||||
value={parameters.filterType}
|
||||
list={[
|
||||
{ value: '-24db Low Pass' },
|
||||
{ value: '-12db Low Pass' },
|
||||
{ value: 'Band Pass' },
|
||||
{ value: 'High Pass' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { filterType: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
|
||||
<Knob
|
||||
value={parameters.cutoff}
|
||||
maxValue={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { cutoff: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='pt-3'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
|
||||
<Knob
|
||||
value={parameters.resonance}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { resonance: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4'></div>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
EG Intensity
|
||||
</h3>
|
||||
<Knob
|
||||
value={parameters.egIntensity}
|
||||
dual={true}
|
||||
maxValue={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { egIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='pt-3'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Keyboard Tracking
|
||||
</h3>
|
||||
<Knob
|
||||
value={parameters.keyboardTrack}
|
||||
dual={true}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keyboardTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -10,53 +10,55 @@ export default function Mixer(props) {
|
||||
|
||||
return (
|
||||
<Card header={props.name}>
|
||||
<div className='-mt-2'>
|
||||
<h3 className='text-lg font-semibold'>Volume 1</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='-mt-2'>
|
||||
<h3 className='text-lg font-semibold'>Volume 2</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold'>Volume 3</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='-mt-3'>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold'>Volume 1</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold'>Volume 2</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold'>Volume 3</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -11,123 +11,147 @@ export default function Pitch(props) {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.voiceAssign}
|
||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal mt-1'>Transpose</h3>
|
||||
<Slider
|
||||
parameter={parameters.transpose}
|
||||
min={-24}
|
||||
max={24}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { transpose: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal'>Tune</h3>
|
||||
<Slider
|
||||
parameter={parameters.tune}
|
||||
min={-50}
|
||||
max={50}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='flex flex-row justify-evenly -mt-4'>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Voice Assign
|
||||
</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.voiceAssign}
|
||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Transpose</h3>
|
||||
<Slider
|
||||
parameter={parameters.transpose}
|
||||
min={-24}
|
||||
max={24}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { transpose: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
|
||||
<Slider
|
||||
parameter={parameters.tune}
|
||||
min={-50}
|
||||
max={50}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Unison Detune
|
||||
</h3>
|
||||
<Slider
|
||||
parameter={parameters.unisonDetune}
|
||||
min={0}
|
||||
max={99}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { unisonDetune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-10'></div>
|
||||
<div className='flex flex-col justify-evenly w-1/2'>
|
||||
<h3 className='font-normal mt-1'>Unison Detune</h3>
|
||||
<Slider
|
||||
parameter={parameters.unisonDetune}
|
||||
min={0}
|
||||
max={99}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { unisonDetune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal mt-1'>Portamento</h3>
|
||||
<Slider
|
||||
parameter={parameters.portamento}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { portamento: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal mt-1'>Bend Range</h3>
|
||||
<Slider
|
||||
parameter={parameters.bendRange}
|
||||
min={-12}
|
||||
max={12}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { bendRange: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal mt-1'>Vibrato Intensity</h3>
|
||||
<Slider
|
||||
parameter={parameters.vibratoIntensity}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vibratoIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='px-4'></div>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Trigger Mode
|
||||
</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Portamento</h3>
|
||||
<Slider
|
||||
parameter={parameters.portamento}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { portamento: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Bend Range</h3>
|
||||
<Slider
|
||||
parameter={parameters.bendRange}
|
||||
min={-12}
|
||||
max={12}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { bendRange: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Vibrato Intensity
|
||||
</h3>
|
||||
<Slider
|
||||
parameter={parameters.vibratoIntensity}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vibratoIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Select } from '../../utils/components';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
export default function VCO(props) {
|
||||
@@ -11,10 +11,10 @@ export default function VCO(props) {
|
||||
|
||||
return (
|
||||
<Card className='col-span-2' header={props.name}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='-mt-2 flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
|
||||
<Select
|
||||
className='select w-3/5'
|
||||
className='select w-4/6'
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
@@ -27,10 +27,10 @@ export default function VCO(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='-mt-4 flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
|
||||
<Select
|
||||
className='select w-3/5'
|
||||
className='select w-4/6'
|
||||
value={parameters.dwgsOrModType}
|
||||
list={props.dwgsOrModType}
|
||||
onChange={(value) =>
|
||||
@@ -43,37 +43,37 @@ export default function VCO(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center justify-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.waveMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center justify-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.lfoMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lfoMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='mb-2 flex flex-row'>
|
||||
<div className='w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
|
||||
<Knob
|
||||
maxValue={127}
|
||||
value={parameters.waveMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
|
||||
<Knob
|
||||
maxValue={127}
|
||||
value={parameters.lfoMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lfoMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
// TODO -- CUSTOM DROPDOWN STYLING
|
||||
|
||||
import { useMemo, useCallback, useEffect, useState } from 'react';
|
||||
|
||||
const Select = (props) => {
|
||||
return (
|
||||
<select
|
||||
@@ -7,10 +9,222 @@ const Select = (props) => {
|
||||
onChange={(e) => props.onChange(e.target.value)}
|
||||
value={props.value}>
|
||||
{props.list.map((element) => (
|
||||
<option value={element.value}>{element.value}</option>
|
||||
<option key={element.value} value={element.value}>
|
||||
{element.value}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
};
|
||||
|
||||
export { Select };
|
||||
const RAD = Math.PI / 180;
|
||||
const START_ANGLE = Math.PI * 1.5 - (RAD * 45) / 2;
|
||||
const END_ANGLE = Math.PI * -0.5 + (RAD * 45) / 2;
|
||||
|
||||
function getPointPair(r, angle, distance) {
|
||||
return [r + distance * Math.cos(angle), r - distance * Math.sin(angle)];
|
||||
}
|
||||
|
||||
function DialMask({ id, size, startAngle, endAngle }) {
|
||||
const r = size / 2;
|
||||
|
||||
const intermediatePoints = [0, 0.25, 0.5, 0.75, 1]
|
||||
.map((fraction) =>
|
||||
getPointPair(
|
||||
r,
|
||||
startAngle - (startAngle - endAngle) * fraction,
|
||||
r * 4
|
||||
).join(',')
|
||||
)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<mask id={id}>
|
||||
<polygon
|
||||
style={{ fill: '#fff' }}
|
||||
points={`${r},${r} ${intermediatePoints} ${r},${r}`}
|
||||
/>
|
||||
</mask>
|
||||
);
|
||||
}
|
||||
|
||||
function getKnobValue(dragStart, currentY, bipolar) {
|
||||
const { y, value } = dragStart;
|
||||
const deltaY = y - currentY;
|
||||
const slope = 0.01;
|
||||
let newValue = value + deltaY * slope;
|
||||
if (bipolar) {
|
||||
const zeroCrossingResistance = 0.3;
|
||||
if (value >= 0 && newValue < 0) {
|
||||
newValue += Math.min(zeroCrossingResistance, -newValue);
|
||||
} else if (value < 0 && newValue > 0) {
|
||||
newValue -= Math.min(zeroCrossingResistance, newValue);
|
||||
}
|
||||
}
|
||||
// Clamp
|
||||
return Math.max(bipolar ? -1 : 0, Math.min(1, newValue));
|
||||
}
|
||||
|
||||
let knob_id = 0;
|
||||
|
||||
function Knob({
|
||||
maxValue = 127,
|
||||
dual = false,
|
||||
size = 42,
|
||||
value = 0,
|
||||
fillWidth = 4,
|
||||
onChange,
|
||||
}) {
|
||||
value = value / maxValue;
|
||||
const uid = useMemo(() => knob_id++, []);
|
||||
const radius = size / 2;
|
||||
const dial_zero = dual ? Math.PI / 2 : START_ANGLE;
|
||||
const dial_range = dual
|
||||
? (START_ANGLE - END_ANGLE) / 2
|
||||
: START_ANGLE - END_ANGLE;
|
||||
const valueAngle = dual
|
||||
? Math.PI / 2 - value * dial_range
|
||||
: START_ANGLE - value * dial_range;
|
||||
|
||||
const [lineX1, lineY1] = getPointPair(
|
||||
size / 2,
|
||||
valueAngle,
|
||||
radius - fillWidth + 2
|
||||
);
|
||||
|
||||
const [dragStart, setDragStart] = useState(null);
|
||||
const isDragging = Boolean(dragStart);
|
||||
|
||||
const onMouseMove = useCallback(
|
||||
(e) => {
|
||||
if (!dragStart) return;
|
||||
|
||||
const newValue = getKnobValue(dragStart, e.clientY, dual);
|
||||
onChange(Math.round(newValue * maxValue));
|
||||
},
|
||||
[dragStart, onChange, dual, maxValue]
|
||||
);
|
||||
const onMouseDown = useCallback(
|
||||
(e) => {
|
||||
if (e.nativeEvent.button !== 0) return;
|
||||
e.stopPropagation();
|
||||
e.nativeEvent.stopImmediatePropagation();
|
||||
setDragStart({ value, y: e.nativeEvent.clientY });
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
},
|
||||
[setDragStart, onMouseMove, value]
|
||||
);
|
||||
const onMouseUp = useCallback(() => {
|
||||
setDragStart(null);
|
||||
}, [setDragStart]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDragging) {
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
}
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
return () => window.removeEventListener('mousemove', onMouseMove);
|
||||
}, [isDragging, onMouseMove]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('mouseup', onMouseUp);
|
||||
return () => {
|
||||
window.removeEventListener('mouseup', onMouseUp);
|
||||
};
|
||||
}, [onMouseUp]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!onMouseMove) return;
|
||||
return () => window.removeEventListener('mousemove', onMouseMove);
|
||||
}, [onMouseMove]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
height: size,
|
||||
width: size,
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onMouseDown={onMouseDown}>
|
||||
<svg className='absolute top-0 left-0' width={size} height={size}>
|
||||
<defs>
|
||||
<DialMask
|
||||
size={size}
|
||||
startAngle={START_ANGLE}
|
||||
endAngle={END_ANGLE}
|
||||
id={`value-track-mask-${uid}`}
|
||||
/>
|
||||
<DialMask
|
||||
size={size}
|
||||
startAngle={dial_zero}
|
||||
endAngle={valueAngle}
|
||||
id={`value-mask-${uid}`}
|
||||
/>
|
||||
</defs>
|
||||
{/* Track outer */}
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={size / 2}
|
||||
className='opacity-50'
|
||||
style={{ mask: `url(#value-track-mask-${uid})`, fill: 'black' }}
|
||||
/>
|
||||
{/* Value fill */}
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={size / 2}
|
||||
className='fill-current text-indigo-500'
|
||||
style={{ mask: `url(#value-mask-${uid})` }}
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}>
|
||||
{/* Knob */}
|
||||
<circle
|
||||
cx={radius}
|
||||
cy={radius}
|
||||
r={radius - fillWidth}
|
||||
style={{
|
||||
fill: 'white',
|
||||
}}
|
||||
/>
|
||||
{/* Highlight */}
|
||||
<circle
|
||||
cx={radius}
|
||||
cy={radius}
|
||||
r={radius - fillWidth}
|
||||
style={{
|
||||
fill: 'transparent',
|
||||
}}
|
||||
/>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}>
|
||||
{
|
||||
<line
|
||||
x1={lineX1}
|
||||
y1={lineY1}
|
||||
x2={size / 2}
|
||||
y2={size / 2}
|
||||
strokeLinecap='round'
|
||||
className='stroke-current text-indigo-900 stroke-2'></line>
|
||||
}
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export { Select, Knob };
|
||||
|
||||
+7
-1
@@ -18,6 +18,12 @@ code {
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
h3 {
|
||||
@apply pointer-events-none select-none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200;
|
||||
@@ -26,6 +32,6 @@ code {
|
||||
@apply opacity-60 hover:bg-gray-100 cursor-default;
|
||||
}
|
||||
.select {
|
||||
@apply block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
|
||||
@apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user