color-synth

a synth that generates colors instead of sounds
Log | Files | Refs | README

UnitControl.svelte (1702B)

      1 <script lang="ts" generics="TKind extends UnitKind">
      2 	import { unitStore, unitToConnect } from '$lib/stores';
      3 	import {
      4 		RANGE,
      5 		getUnit,
      6 		inp,
      7 		rescale,
      8 		unitRange,
      9 		type ControlName,
     10 		type Controls,
     11 		type Input,
     12 		type UnitId,
     13 		type UnitKind
     14 	} from '$lib/types';
     15 	import Control from './Control.svelte';
     16 	import InputDragger from './InputDragger.svelte';
     17 
     18 	export let id: UnitId;
     19 	export let kind: TKind;
     20 	export let controlName: ControlName<TKind>;
     21 
     22 	const controlRange = unitRange[kind][controlName];
     23 
     24 	$: unit = getUnit(kind, $unitStore, id);
     25 
     26 	$: input = (unit.controls as Controls<TKind>)[controlName];
     27 	const updateValue = (controlValue: number) => {
     28 		const n = Math.round(rescale(controlValue, controlRange, RANGE.signal));
     29 		unitStore.setControl(kind, id, controlName, inp.setValue(input, n));
     30 	};
     31 	let connection: { connected: boolean; onConnect: () => void } | null;
     32 	$: {
     33 		if ($unitToConnect) {
     34 			connection = {
     35 				connected: inp.connected(input, $unitToConnect),
     36 				onConnect: () => {
     37 					if (!$unitToConnect) return;
     38 					unitStore.setControl(kind, id, controlName, inp.toggle(input, $unitToConnect));
     39 				}
     40 			};
     41 		} else {
     42 			connection = null;
     43 		}
     44 	}
     45 
     46 	const setInput = (i: Input) => {
     47 		unitStore.setControl(kind, id, controlName, i);
     48 	};
     49 </script>
     50 
     51 <div class="control-wrapper">
     52 	<h3>{controlName}</h3>
     53 	<InputDragger {controlName} {connection} />
     54 	<Control {input} {controlRange} {setInput} />
     55 </div>
     56 
     57 <style>
     58 	input[type='number'] {
     59 		width: 80px;
     60 	}
     61 	h3 {
     62 		margin: 0;
     63 		padding: 3px 3px 3px 24px;
     64 	}
     65 	.control-wrapper {
     66 		position: relative;
     67 		width: 100%;
     68 		height: 80px;
     69 		background: rgba(255, 255, 255, 0.3);
     70 		padding: 10px;
     71 		display: flexbox;
     72 	}
     73 </style>