color-synth

commit 24dc72a73eb3248b30a95adb6deedf10a78235b3
parent 4d097c501e82996ed24e00fc51b96d49afd6b9e5
Author: massi <mdsiboldi@gmail.com>
Date:   Mon, 24 Jul 2023 02:52:41 -0700

units is an object now

Diffstat:
M
src/lib/Slider.svelte
 | 
4
++--
M
src/lib/engine.worker.ts
 | 
2
+-
M
src/lib/types.ts
 | 
7
++++---
M
src/routes/+page.svelte
 | 
20
++++++++++----------

4 files changed, 17 insertions(+), 16 deletions(-)
diff --git a/src/lib/Slider.svelte b/src/lib/Slider.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { WithTarget, UnitId, UnitMap } from '$lib/types';
+	import type { WithTarget, UnitId, Units } from '$lib/types';
 	import { rescale, range, getUnit as _getUnit } from '$lib/types';
 	import NumberSelector from '$lib/NumberSelector.svelte';
 
 	export let id: UnitId;
-	export let units: UnitMap;
+	export let units: Units;
 	export let handleInput: (id: string, value: number) => void;
 	export let handleChange: () => void;
 
diff --git a/src/lib/engine.worker.ts b/src/lib/engine.worker.ts
@@ -130,7 +130,7 @@ function update() {
   if (!config) {
     throw new Error("no config, can't update unit state.")
   }
-  const ids = config.units.keys();
+  const ids = Object.keys(config.units);
   for (let id of ids) {
     const unit = getUnit(config.units, id);
     switch (unit.kind) {
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -14,7 +14,7 @@ export type Color = {
 
 export type SynthConfig = {
   sinks: Sinks;
-  units: UnitMap;
+  units: Units;
 };
 export type EngineMessage = {
   kind: "config";
@@ -85,6 +85,7 @@ export type ConstUnit = WithPos & {
   value: number;
 };
 
+export type Units = { [u: UnitId]: Unit };
 export type UnitMap = Map<UnitId, Unit>;
 export type UnitStateMap = Map<UnitId, UnitState>;
 export type UnitState = any;
@@ -201,8 +202,8 @@ export function wrangle(n: number, origin: Range, dest: Range) {
   return rescale(clamp(n, origin), origin, dest);
 }
 
-export function getUnit(units: UnitMap, id: UnitId): Unit {
-  const result = units.get(id);
+export function getUnit(units: Units, id: UnitId): Unit {
+  const result = units[id];
   if (!result) throw new Error("invalid id for unit: " + id);
   return result;
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -6,7 +6,7 @@
 	import Noise from '$lib/Noise.svelte';
 	import Slider from '$lib/Slider.svelte';
 	import { COLS, ROWS, inp, rescale, range, is, getUnit as _getUnit } from '$lib/types';
-	import type { Output, Input, Unit, UnitId, ConstUnit, UnitMap, Sinks } from '$lib/types';
+	import type { Output, Input, Unit, UnitId, ConstUnit, Units, Sinks } from '$lib/types';
 
 	let cvs: HTMLCanvasElement | undefined;
 
@@ -64,15 +64,15 @@
 		};
 	});
 
-	$: getUnit = _getUnit.bind(null, units);
+	const getUnit = (id: UnitId): Unit => _getUnit($unitStore, id);
 	let uid = 0;
-	let units: UnitMap = new Map();
+	let units: Units = {};
 	let sinks: Sinks = { l: 0, c: 0, h: 0 };
 
 	onMount(() => {
 		const doc: SerializedState = fromUrl();
 		if (doc) {
-			units = new Map(Object.entries(doc.units));
+			units = doc.units;
 			uid = units.size;
 			sinks = doc.sinks;
 		}
@@ -80,12 +80,12 @@
 
 	type SerializedState = {
 		version: 1;
-		units: { [id: UnitId]: Unit };
+		units: Units;
 		sinks: Sinks;
 	};
 
 	function toUrl() {
-		return btoa(JSON.stringify({ version: 1, sinks, units: Object.fromEntries(units.entries()) }));
+		return btoa(JSON.stringify({ version: 1, sinks, units }));
 	}
 
 	function fromUrl() {
@@ -104,7 +104,7 @@
 
 	function addUnit(unit: Unit): UnitId {
 		const id = String(uid++);
-		units.set(id, unit);
+		units[id] = unit;
 		units = units;
 		return id;
 	}
@@ -152,7 +152,7 @@
 	}
 
 	function updateEntireUnit(id: UnitId, unit: Unit) {
-		units.set(id, unit);
+		units[id] = unit;
 		units = units;
 	}
 
@@ -223,7 +223,7 @@
 	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.
-		units.set(input, { ...unit, [k]: inp.toggle(unit[k], { id: output }) });
+		units[input] = { ...unit, [k]: inp.toggle(unit[k], { id: output }) };
 		engineWorker && engineWorker.postMessage({ kind: 'config', content: { sinks, units } });
 		console.log(sinks);
 		signalDragging = false;
@@ -250,7 +250,7 @@
 	{/each}
 </div>
 <div id="units">
-	{#each [...units.entries()] as [id, unit]}
+	{#each [...Object.entries(units)] as [id, unit]}
 		<div class="unit" style={`top: ${unit.pos.y}px; left: ${unit.pos.x}px`}>
 			<h2 on:mousedown={handleMouseDown.bind(null, id)}>{id} {unit.kind}</h2>
 			{#if unit.kind === 'const'}