Canvas

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { untrack, type Snippet } from 'svelte';
4	import {
5		clamp,
6		nodeBounds,
7		setCanvasContext,
8		type CanvasPoint,
9		type CanvasRect
10	} from './ctx.svelte';
11
12	let {
13		x = $bindable(0),
14		y = $bindable(0),
15		zoom = $bindable(1),
16		minZoom = 0.2,
17		maxZoom = 3,
18		zoomSpeed = 0.0015,
19		grid = 'dots',
20		gridSize = 24,
21		snap = 0,
22		pannable = true,
23		zoomable = true,
24		panOnMiddleClick = true,
25		class: className,
26		onpan,
27		onzoom,
28		children,
29		...rest
30	}: {
31		/** Pan offset in screen pixels. */
32		x?: number;
33		y?: number;
34		zoom?: number;
35		minZoom?: number;
36		maxZoom?: number;
37		zoomSpeed?: number;
38		grid?: 'dots' | 'lines' | 'none';
39		gridSize?: number;
40		/** Grid step nodes snap to while dragging. 0 disables snapping. */
41		snap?: number;
42		pannable?: boolean;
43		zoomable?: boolean;
44		panOnMiddleClick?: boolean;
45		class?: string;
46		onpan?: (offset: CanvasPoint) => void;
47		onzoom?: (zoom: number) => void;
48		children: Snippet;
49		[key: string]: unknown;
50	} = $props();
51
52	let viewport = $state<HTMLDivElement | null>(null);
53	let overlay = $state<HTMLDivElement | null>(null);
54	let panning = $state(false);
55	let spaceHeld = $state(false);
56	let nodes = $state<Record<string, CanvasRect>>({});
57
58	let panStart: { x: number; y: number; originX: number; originY: number } | null = null;
59
60	function toCanvas(clientX: number, clientY: number): CanvasPoint {
61		const rect = viewport?.getBoundingClientRect();
62		if (!rect) return { x: 0, y: 0 };
63		return { x: (clientX - rect.left - x) / zoom, y: (clientY - rect.top - y) / zoom };
64	}
65
66	function toScreen(point: CanvasPoint): CanvasPoint {
67		return { x: point.x * zoom + x, y: point.y * zoom + y };
68	}
69
70	function panBy(dx: number, dy: number) {
71		x += dx;
72		y += dy;
73		onpan?.({ x, y });
74	}
75
76	function panTo(nextX: number, nextY: number) {
77		x = nextX;
78		y = nextY;
79		onpan?.({ x, y });
80	}
81
82	/**
83	 * Scales around a viewport-relative origin so the point under the cursor
84	 * stays put. Defaults to the centre when no origin is given.
85	 */
86	function zoomTo(next: number, origin?: CanvasPoint) {
87		const rect = viewport?.getBoundingClientRect();
88		const target = clamp(next, minZoom, maxZoom);
89		if (target === zoom) return;
90
91		const pivot = origin ?? { x: (rect?.width ?? 0) / 2, y: (rect?.height ?? 0) / 2 };
92		const ratio = target / zoom;
93
94		x = pivot.x - (pivot.x - x) * ratio;
95// … truncated