color-synth

commit 83325dc37bf001abae5e73b61ad0eb3709071ee1
parent 24dc72a73eb3248b30a95adb6deedf10a78235b3
Author: massi <mdsiboldi@gmail.com>
Date:   Mon, 24 Jul 2023 03:12:45 -0700

unit store

Diffstat:
A
src/lib/stores.ts
 | 
16
++++++++++++++++
M
src/routes/+page.svelte
 | 
35
+++++++++++++++++------------------

2 files changed, 33 insertions(+), 18 deletions(-)
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store';
+import type { Unit, UnitId, Units } from '$lib/types';
+
+const mkUnitStore = () => {
+  const { subscribe, set, update } = writable<Units>({});
+  return {
+    subscribe,
+    set,
+    setUnit(id: UnitId, unit: Unit) {
+      update(units => ({ ...units, [id]: unit }));
+    }
+  };
+
+}
+
+export const unitStore = mkUnitStore();
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { unitStore } from '$lib/stores';
 	import { onMount } from 'svelte';
 	import { debounce } from 'lodash';
 	import Sink from '$lib/Sink.svelte';
@@ -66,14 +67,14 @@
 
 	const getUnit = (id: UnitId): Unit => _getUnit($unitStore, id);
 	let uid = 0;
-	let units: Units = {};
+	$: units = $unitStore;
 	let sinks: Sinks = { l: 0, c: 0, h: 0 };
 
 	onMount(() => {
 		const doc: SerializedState = fromUrl();
 		if (doc) {
-			units = doc.units;
-			uid = units.size;
+			$unitStore = doc.units;
+			uid = Object.keys(doc.units).length;
 			sinks = doc.sinks;
 		}
 	});
@@ -104,8 +105,7 @@
 
 	function addUnit(unit: Unit): UnitId {
 		const id = String(uid++);
-		units[id] = unit;
-		units = units;
+		unitStore.setUnit(id, unit);
 		return id;
 	}
 
@@ -145,26 +145,27 @@
 		}
 	};
 
-	function updateUnit(k: UnitId, value: number) {
-		const unit = get.constUnit(k);
+	function updateUnit(id: UnitId, value: number) {
+		const unit = get.constUnit(id);
 		unit.value = value;
-		units = units;
+		unitStore.setUnit(id, unit);
 	}
 
 	function updateEntireUnit(id: UnitId, unit: Unit) {
-		units[id] = unit;
-		units = units;
+		unitStore.setUnit(id, unit);
 	}
 
 	let dragging: false | UnitId = false;
 
 	const handleMouseMove = (e: MouseEvent) => {
 		if (!dragging) return;
-		getUnit(dragging).pos = {
-			x: e.clientX,
-			y: e.clientY
-		};
-		units = units;
+		unitStore.setUnit(dragging, {
+			...getUnit(dragging),
+			pos: {
+				x: e.clientX,
+				y: e.clientY
+			}
+		});
 	};
 
 	const handleMouseUp = () => {
@@ -223,11 +224,9 @@
 	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[input] = { ...unit, [k]: inp.toggle(unit[k], { id: output }) };
+		unitStore.setUnit(input, { ...unit, [k]: inp.toggle(unit[k], { id: output }) });
 		engineWorker && engineWorker.postMessage({ kind: 'config', content: { sinks, units } });
-		console.log(sinks);
 		signalDragging = false;
-		units = units;
 	};
 </script>