color-synth

commit e1f02c2483800784f58fd554b24f27e16207437e
parent 1431d5787eec2c5b224900f22e03f6a8be3aeb43
Author: massi <mdsiboldi@gmail.com>
Date:   Mon, 21 Aug 2023 23:55:56 -0700

update drag n drop & isolate

Diffstat:
A
src/lib/UnitDrag.svelte
 | 
39
+++++++++++++++++++++++++++++++++++++++
M
src/lib/stores.ts
 | 
1
-
M
src/routes/+page.svelte
 | 
71
++++++++++++++++++++++++-----------------------------------------------

3 files changed, 63 insertions(+), 48 deletions(-)
diff --git a/src/lib/UnitDrag.svelte b/src/lib/UnitDrag.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { unitDragging, unitStore } from '$lib/stores';
+	import { getUnit, type UnitId } from './types';
+
+	export let id: UnitId;
+
+	const handleMouseMove = (e: MouseEvent) => {
+		if (!$unitDragging) return;
+		const { id, initPos } = $unitDragging;
+		$unitDragging = {
+			id,
+			initPos,
+			pos: {
+				x: e.clientX - initPos.x,
+				y: e.clientY - initPos.y
+			}
+		};
+	};
+
+	const handleMouseUp = () => {
+		if (!$unitDragging) return;
+		const unit = getUnit(null, $unitStore, id);
+		unitStore.setUnit(id, { ...unit, pos: $unitDragging.pos });
+		$unitDragging = null;
+		document.removeEventListener('mousemove', handleMouseMove);
+		document.removeEventListener('mouseup', handleMouseUp);
+	};
+
+	const handleMouseDown = (e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const initPos = { x: e.offsetX, y: e.offsetY };
+		$unitDragging = { initPos, pos: getUnit(null, $unitStore, id).pos, id };
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+	};
+</script>
+
+<div on:mousedown={handleMouseDown}><slot /></div>
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -16,7 +16,6 @@ import {
 import { v4 as uuidv4 } from 'uuid';
 
 import { writable } from 'svelte/store';
-import UnitControl from './UnitControl.svelte';
 
 const randConst = () => {
 	const sliderVal = Math.round(rescale(Math.random(), { min: 0, max: 1 }, RANGE.slider));
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -19,6 +19,7 @@
 	import NoiseUnitComponent from '$lib/NoiseUnit.svelte';
 	import ConstUnitComponent from '$lib/ConstUnit.svelte';
 	import SmoothUnitComponent from '$lib/SmoothUnit.svelte';
+	import UnitDrag from '$lib/UnitDrag.svelte';
 
 	let cvs: HTMLCanvasElement | undefined;
 
@@ -125,35 +126,6 @@
 		return id;
 	}
 
-	let dragging: false | { initPos: Pos; id: UnitId } = false;
-
-	const handleMouseMove = (e: MouseEvent) => {
-		if (!dragging) return;
-		unitStore.setUnit(dragging.id, {
-			...getUnit(dragging.id),
-			pos: {
-				x: e.clientX - dragging.initPos.x,
-				y: e.clientY - dragging.initPos.y
-			}
-		});
-	};
-
-	const handleMouseUp = () => {
-		dragging = false;
-		document.removeEventListener('mousemove', handleMouseMove);
-		document.removeEventListener('mouseup', handleMouseUp);
-	};
-
-	const handleMouseDown = (id: UnitId, e: MouseEvent) => {
-		e.preventDefault();
-		e.stopPropagation();
-		const pos = { x: e.offsetX, y: e.offsetY };
-		console.log({ pos });
-		dragging = { initPos: pos, id };
-		document.addEventListener('mousemove', handleMouseMove);
-		document.addEventListener('mouseup', handleMouseUp);
-	};
-
 	const handleSignalStart = (o: Output) => {
 		$unitToConnect = o;
 		const h = () => {
@@ -217,24 +189,29 @@
 </div>
 <div id="units">
 	{#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'}
-				<ConstUnitComponent {id} />
-			{:else if unit.kind === 'osc'}
-				<OscUnitComponent {id} />
-			{:else if unit.kind === 'noise'}
-				<NoiseUnitComponent {id} />
-			{:else if unit.kind === 'smooth'}
-				<SmoothUnitComponent {id} />
-			{/if}
-			<div
-				class="output-dragger"
-				on:mousedown={(e) => {
-					e.preventDefault();
-					handleSignalStart({ id });
-				}}
-			/>
+		{@const pos = $unitDragging?.id === id ? $unitDragging.pos : unit.pos}
+		<div class="unit" style={`top: ${pos.y}px; left: ${pos.x}px`}>
+			<div>
+				<UnitDrag {id}>
+					<h2>{id}-{unit.kind}</h2>
+				</UnitDrag>
+				<div
+					class="output-dragger"
+					on:mousedown={(e) => {
+						e.preventDefault();
+						handleSignalStart({ id });
+					}}
+				/>
+				{#if unit.kind === 'const'}
+					<ConstUnitComponent {id} />
+				{:else if unit.kind === 'osc'}
+					<OscUnitComponent {id} />
+				{:else if unit.kind === 'noise'}
+					<NoiseUnitComponent {id} />
+				{:else if unit.kind === 'smooth'}
+					<SmoothUnitComponent {id} />
+				{/if}
+			</div>
 		</div>
 	{/each}
 </div>