Signature Pad

1<script lang="ts" module>
2	export type SignaturePoint = { x: number; y: number; w: number };
3	export type SignatureStroke = { color: string; points: SignaturePoint[] };
4
5	export type SignatureSegment = {
6		x0: number;
7		y0: number;
8		cx: number;
9		cy: number;
10		x1: number;
11		y1: number;
12		w: number;
13	};
14
15	const mid = (a: SignaturePoint, b: SignaturePoint) => ({
16		x: (a.x + b.x) / 2,
17		y: (a.y + b.y) / 2
18	});
19
20	/**
21	 * Turns a stroke into quadratic segments (control point = the sampled point,
22	 * endpoints = the midpoints of its neighbours). Shared by the canvas renderer
23	 * and the SVG exporter so both produce the exact same curve.
24	 */
25	export function strokeToSegments(stroke: SignatureStroke): SignatureSegment[] {
26		const p = stroke.points;
27		if (p.length < 2) return [];
28
29		const segments: SignatureSegment[] = [];
30		let start = { x: p[0].x, y: p[0].y };
31
32		for (let i = 1; i < p.length; i++) {
33			const end = i === p.length - 1 ? { x: p[i].x, y: p[i].y } : mid(p[i], p[i + 1]);
34			segments.push({
35				x0: start.x,
36				y0: start.y,
37				cx: p[i].x,
38				cy: p[i].y,
39				x1: end.x,
40				y1: end.y,
41				w: p[i].w
42			});
43			start = end;
44		}
45
46		return segments;
47	}
48</script>
49
50<script lang="ts">
51	import { cn } from '$UTILS$';
52	import { onMount } from 'svelte';
53
54	let {
55		strokes = $bindable([]),
56		penColor = 'currentColor',
57		backgroundColor = 'transparent',
58		minWidth = 0.7,
59		maxWidth = 2.6,
60		velocityWeight = 0.7,
61		disabled = false,
62		class: className,
63		onbegin,
64		onend,
65		onchange,
66		...rest
67	}: {
68		strokes?: SignatureStroke[];
69		penColor?: string;
70		backgroundColor?: string;
71		minWidth?: number;
72		maxWidth?: number;
73		velocityWeight?: number;
74		disabled?: boolean;
75		class?: string;
76		onbegin?: () => void;
77		onend?: (stroke: SignatureStroke) => void;
78		onchange?: (strokes: SignatureStroke[]) => void;
79		[key: string]: unknown;
80	} = $props();
81
82	let canvas = $state<HTMLCanvasElement | null>(null);
83	let ctx: CanvasRenderingContext2D | null = null;
84	let size = $state({ width: 0, height: 0 });
85
86	let drawing = false;
87	let current: SignatureStroke | null = null;
88	let lastWidth = maxWidth;
89	let lastTime = 0;
90
91	export const isEmpty = () => strokes.length === 0;
92
93	const colorCache = new Map<string, string>();
94
95	/**
96	 * Normalises any CSS color to `#rrggbb` / `rgba()`. Themes resolve to modern
97	 * color spaces such as `oklch()`, which older SVG viewers do not understand.
98	 */
99// … truncated