color-synth

+page.svelte (8325B)

---

 <script lang="ts">
 	import { unitDragging, unitStore, unitToConnect, sinksStore } from '$lib/stores';
 	import { onMount } from 'svelte';
 	import { debounce } from 'lodash';
 	import Sink from '$lib/Sink.svelte';
 	import {
 		COLS,
 		ROWS,
 		inp,
 		rescale,
 		RANGE,
 		is,
 		getUnit as _getUnit,
 		unitKinds,
 		UNIT_NAMES
 	} from '$lib/types';
 	import type {
 		Output,
 		Input,
 		Unit,
 		UnitId,
 		NumberUnit,
 		Units,
 		Sinks,
 		UnitKind,
 		Pos
 	} from '$lib/types';
 	import OscUnitComponent from '$lib/OscUnit.svelte';
 	import NoiseUnitComponent from '$lib/NoiseUnit.svelte';
 	import NumberUnitComponent from '$lib/NumberUnit.svelte';
 	import SmoothUnitComponent from '$lib/SmoothUnit.svelte';
 	import MathUnitComponent from '$lib/MathUnit.svelte';
 	import LagUnitComponent from '$lib/LagUnit.svelte';
 	import ImgUnitComponent from '$lib/ImgUnit.svelte';
 	import UnitDrag from '$lib/UnitDrag.svelte';
 	import Wires from '$lib/Wires.svelte';
 
 	const debug = false;
 
 	let cvs: HTMLCanvasElement | undefined;
 
 	// initialize worker
 	let engineWorker: Worker | undefined = undefined;
 	const loadWorker = async () => {
 		const EngineWorker = await import('$lib/engine.worker?worker');
 		engineWorker = new EngineWorker.default();
 		engineWorker.postMessage({ kind: 'config', content: { units, sinks: $sinksStore } });
 	};
 
 	onMount(loadWorker);
 
 	$: {
 		if (engineWorker) {
 			engineWorker.onmessage = (msg) => {
 				requestAnimationFrame(() => {
 					if (cvs) {
 						const ctx = cvs.getContext('2d');
 						if (!ctx) return;
 						ctx.imageSmoothingEnabled = false;
 
 						const offscreen = new OffscreenCanvas(COLS, ROWS);
 						const offscreenCtx = offscreen.getContext('2d');
 						if (!offscreenCtx) throw new Error('cant get 2d context for offscreen canvas');
 
 						const arr = new Uint8ClampedArray(msg.data.content);
 						const img = new ImageData(arr, COLS);
 						offscreenCtx.putImageData(img, 0, 0);
 						ctx.drawImage(offscreen, 0, 0, cvs.width, cvs.height);
 					}
 				});
 			};
 		}
 	}
 
 	onMount(() => {
 		const resizeObserver = new ResizeObserver((entries) => {
 			const entry = entries.find((entry) => entry.target === cvs);
 			if (entry && cvs) {
 				const width = entry.devicePixelContentBoxSize[0].inlineSize;
 				const height = entry.devicePixelContentBoxSize[0].blockSize;
 				cvs.width = width;
 				cvs.height = height;
 				engineWorker && engineWorker.postMessage({ kind: 'window', content: { width, height } });
 			}
 		});
 
 		if (cvs) resizeObserver.observe(cvs, { box: 'device-pixel-content-box' });
 
 		// This callback cleans up the observer
 		return () => {
 			if (cvs) resizeObserver.unobserve(cvs);
 		};
 	});
 
 	const getUnit = (id: UnitId): Unit => _getUnit(null, $unitStore, id);
 	let uid = 0;
 	$: units = $unitStore;
 
 	// let's update the engine whenever the config changes for now, even though we could ignore pos at least.
 	$: {
 		if (engineWorker) {
 			engineWorker.postMessage({
 				kind: 'config',
 				content: { units: $unitStore, sinks: $sinksStore }
 			});
 		}
 	}
 	onMount(() => {
 		const doc: SerializedState = fromUrl();
 		if (doc) {
 			$unitStore = doc.units;
 			uid = Object.keys(doc.units).length;
 			$sinksStore = doc.sinks;
 		}
 	});
 
 	type SerializedState = {
 		version: 1;
 		units: Units;
 		sinks: Sinks;
 	};
 
 	function toUrl() {
 		return btoa(JSON.stringify({ version: 1, sinks: $sinksStore, units }));
 	}
 
 	function fromUrl() {
 		const doc = atob(new URL(document.location.toString()).searchParams.get('z') || '');
 		if (doc) {
 			return JSON.parse(doc);
 		}
 	}
 
 	function _updateUrl() {
 		const url = new URL(String(location));
 		url.searchParams.set('z', toUrl());
 		history.pushState({}, '', url);
 	}
 	const updateUrl = debounce(_updateUrl, 250);
 
 	function addUnit(unit: Unit): UnitId {
 		const id = String(uid++);
 		unitStore.setUnit(id, unit);
 		return id;
 	}
 
 	const handleSignalStart = (o: Output) => {
 		$unitToConnect = o;
 		const h = () => {
 			$unitToConnect = false;
 			document.removeEventListener('mouseup', h);
 		};
 		setTimeout(() => {
 			document.addEventListener('mouseup', h);
 		}, 0);
 	};
 
 	const _onSinkConnect = (ch: 'l' | 'c' | 'h'): void => {
 		if (!$unitToConnect) {
 			throw new Error('cant connect sink to nonexistant signal');
 		}
 		$sinksStore[ch] = inp.toggle($sinksStore[ch], $unitToConnect);
 		engineWorker &&
 			engineWorker.postMessage({ kind: 'config', content: { sinks: $sinksStore, units } });
 		$unitToConnect = false;
 	};
 
 	const setSinkInput = (ch: 'l' | 'c' | 'h', input: Input) => {
 		$sinksStore[ch] = input;
 		engineWorker &&
 			engineWorker.postMessage({ kind: 'config', content: { sinks: $sinksStore, units } });
 	};
 
 	$: onSinkConnect = $unitToConnect ? _onSinkConnect : null;
 
 	type SinkEntries = [keyof Sinks, Input][];
 	// Object.entries COULD have extra stuff, so it doesn't assume keys are keyof Sinks exactly.
 	// see https://stackoverflow.com/questions/60141960/typescript-key-value-relation-preserving-object-entries-type
 	$: sinkEntries = [...Object.entries($sinksStore)] as SinkEntries;
 
 	const getConnectHandler = (sdrag: false | Output, input: UnitId) => {
 		if (!sdrag) return null;
 		if (sdrag.id === input) return null;
 		return connectHandler.bind(null, sdrag.id, input);
 	};
 
 	const connectHandler = (output: UnitId, input: UnitId, k: string) => {
 		const unit = getUnit(input);
 		// @ts-ignore unit[k] is a channel but i don't wanna prove it.
 		unitStore.setUnit(input, { ...unit, [k]: inp.toggle(unit[k], { id: output }) });
 		engineWorker &&
 			engineWorker.postMessage({ kind: 'config', content: { sinks: $sinksStore, units } });
 		$unitToConnect = false;
 	};
 </script>
 
 <canvas bind:this={cvs} />
 <Wires />
 
 <div id="buttons">
 	{#each unitKinds as kind}
 		{#if kind !== 'lag'}
 			<button on:click={() => unitStore.addUnit(kind)}>add {UNIT_NAMES[kind]}</button>
 		{/if}
 	{/each}
 	<button on:click={updateUrl}>save</button>
 </div>
 
 <div id="sinks">
 	{#each sinkEntries as [channel, input]}
 		<Sink
 			setInput={setSinkInput.bind(null, channel)}
 			{input}
 			{channel}
 			{onSinkConnect}
 			connected={$unitToConnect && input ? inp.connected(input, $unitToConnect) : false}
 		/>
 	{/each}
 </div>
 <div id="units">
 	{#each [...Object.entries(units)] as [id, unit]}
 		{@const pos = $unitDragging?.id === id ? $unitDragging.pos : unit.pos}
 		<div class="unit" style={`top: ${pos.y}px; left: ${pos.x}px`}>
 			<div data-unit-id={id}>
 				<UnitDrag {id}>
 					<h2>
 						{#if debug}{id.substring(0, 5)}-{/if}{UNIT_NAMES[unit.kind]}
 					</h2>
 				</UnitDrag>
 				<div
 					class="output-dragger"
 					on:mousedown={(e) => {
 						e.preventDefault();
 						handleSignalStart({ id });
 					}}
 				/>
 				{#if unit.kind === 'number'}
 					<NumberUnitComponent {id} />
 				{:else if unit.kind === 'osc'}
 					<OscUnitComponent {id} />
 				{:else if unit.kind === 'noise'}
 					<NoiseUnitComponent {id} />
 				{:else if unit.kind === 'smooth'}
 					<SmoothUnitComponent {id} />
 				{:else if unit.kind === 'math'}
 					<MathUnitComponent {id} />
 				{:else if unit.kind === 'lag'}
 					<LagUnitComponent {id} />
 				{:else if unit.kind === 'img'}
 					<ImgUnitComponent {id} />
 				{/if}
 			</div>
 		</div>
 	{/each}
 </div>
 
 <style>
 	.output-dragger {
 		position: absolute;
 		top: 0;
 		right: 0;
 		width: 16px;
 		height: 16px;
 		border-radius: 8px;
 		background: purple;
 		margin: 5px;
 	}
 	#sinks {
 		position: absolute;
 		top: 0;
 		right: 0;
 		display: flex;
 		flex-direction: column;
 	}
 	.unit {
 		width: 300px;
 		position: absolute;
 		z-index: 1;
 	}
 	#buttons {
 		z-index: 1;
 		position: fixed;
 		bottom: 5px;
 		right: 5px;
 	}
 	h2 {
 		margin: 0;
 		padding: 0 5px;
 		background: white;
 	}
 	canvas {
 		width: 100vw;
 		height: 100vh;
 		background: salmon;
 	}
 	#units {
 		position: absolute;
 		left: 10px;
 		top: 10px;
 		display: flex;
 	}
 	.unit {
 		--main-color: #eee;
 		--r: 6px;
 		--shadow: rgba(200, 200, 200, 255);
 		--s-g: linear-gradient(45deg, #eee, #dedede);
 		--angle: 45deg;
 		background: var(--s-g);
 		padding: 2px;
 		border-radius: var(--r);
 	}
 	.unit::before,
 	.unit::after {
 		content: '';
 		position: absolute;
 		width: 100%;
 		height: 100%;
 		background: var(--s-g);
 		border-radius: var(--r);
 		z-index: -1;
 	}
 	.unit::before {
 		top: 2px;
 		left: 2px;
 	}
 	.unit::after {
 		top: 4px;
 		left: 4px;
 	}
 	.unit > div {
 		overflow: hidden;
 		background: var(--main-color);
 		border-radius: var(--r);
 	}
 </style>