Signature Pad Form Input (#178)

Author: maxfriedmann

package-lock.json

@@ -127,6 +127,7 @@
 		"i18next": "^24.2.0",
 		"i18next-browser-languagedetector": "^8.0.0",
 		"jsdom": "^26.0.0",
+		"perfect-freehand": "^1.2.2",
 		"pulltorefreshjs": "^0.1.22",
 		"svelte": "^5.16.2",
 		"svelte-i18next": "^2.2.2"

package.json

@@ -2,3 +2,11 @@ import * as matchers from "@testing-library/jest-dom/matchers";
 import { expect } from "vitest";
 
 expect.extend(matchers);
+
+class ResizeObserver {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
+
+window.ResizeObserver = ResizeObserver;

setupTest.js

@@ -8,7 +8,7 @@
 		label: string;
 		placeholder: string;
 		value: string;
-		error: string;
+		error?: string;
 	} = $props();
 </script>
 

src/lib/modules/forms/form-inputs/StringInput.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { t } from "$lib/stores/i18n.store";
+	import { onMount } from "svelte";
+	import { SignaturePadAction } from "./signature-pad-action";
+
+	let { signature = $bindable(), disabled }: { signature: string; disabled?: boolean } = $props();
+	let layers: { path: string; width: number; height: number }[] = $state([]);
+	let width: number = $state(undefined);
+	let height: number = $state(undefined);
+	let preview: string = $state(undefined);
+
+	onMount(() => {
+		if (signature) {
+			const parser = new DOMParser();
+			const svg = parser.parseFromString(atob(signature.split(",")[1]), "image/svg+xml");
+			layers = Array.from(svg.querySelectorAll("path")).map((path) => ({
+				path: path.getAttribute("d"),
+				width,
+				height
+			}));
+		}
+	});
+
+	const ondraw = (path: string) => {
+		if (disabled) return;
+		preview = path;
+	};
+	const oncomplete = (path: string) => {
+		if (disabled) return;
+		preview = "";
+		layers = [...layers, { width, height, path }];
+		signature =
+			"data:image/svg+xml;base64," +
+			btoa(
+				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${layers.map((l) => `<path d="${l.path}" />`)}</svg>`
+			);
+	};
+
+	const clear = () => {
+		layers = [];
+		signature = undefined;
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="input input-bordered relative h-[360px] w-full px-0">
+	<div class="absolute bottom-24 left-4 right-4 border-t border-dotted border-gray-300"></div>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class="h-full w-full"
+		use:SignaturePadAction={{ ondraw, oncomplete }}
+		bind:clientWidth={width}
+		bind:clientHeight={height}
+		on:click|preventDefault|self={() => false}
+		on:touchmove|preventDefault|self={() => false}
+	>
+		<svg
+			class="pointer-events-none absolute h-full w-full fill-black"
+			viewBox="0 0 {width} {height}"
+		>
+			{#each layers as layer}
+				<path d={layer.path} />
+			{/each}
+		</svg>
+
+		{#if preview}
+			<svg
+				class="pointer-events-none absolute h-full w-full fill-gray-900"
+				viewBox="0 0 {width} {height}"
+			>
+				<path d={preview} />
+			</svg>
+		{/if}
+	</div>
+	{#if !disabled}
+		<button class="btn btn-outline btn-primary btn-sm absolute right-2 top-2" on:click={clear}
+			>{$t("actions.clear")}</button
+		>
+	{/if}
+</div>

src/lib/modules/forms/form-inputs/signature-pad/SignaturePadInput.svelte

@@ -0,0 +1,21 @@
+import { describe, test, expect } from "vitest";
+import { SignaturePadInput } from "../..";
+import { render } from "@testing-library/svelte";
+import { ticTacToeBase64 } from "./snapshots/tic-tac-toe";
+
+describe("SignaturePadInput", () => {
+	test("should render", async () => {
+		const { container } = render(SignaturePadInput);
+		await expect(container).toMatchFileSnapshot("snapshots/SignaturePadInput-1.html");
+	});
+
+	test("should render with signature", async () => {
+		const { container } = render(SignaturePadInput, {
+			props: {
+				signature: ticTacToeBase64
+			}
+		});
+
+		await expect(container).toMatchFileSnapshot("snapshots/SignaturePadInput-2.html");
+	});
+});

src/lib/modules/forms/form-inputs/signature-pad/SignaturePadInput.test.ts

@@ -0,0 +1,114 @@
+import { getStroke, type StrokeOptions } from "perfect-freehand";
+import { cubicInOut } from "svelte/easing";
+
+const linear = (t: number) => t;
+const average = (a: number, b: number) => (a + b) / 2;
+
+function getSvgPathFromStroke(points: number[][], closed = true): string {
+	const len = points.length;
+
+	if (len < 4) {
+		return "";
+	}
+
+	let a = points[0];
+	let b = points[1];
+	const c = points[2];
+
+	let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(
+		b[1],
+		c[1]
+	).toFixed(2)} T`;
+
+	for (let i = 2, max = len - 1; i < max; i++) {
+		a = points[i];
+		b = points[i + 1];
+		result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
+	}
+
+	if (closed) {
+		result += "Z";
+	}
+
+	return result;
+}
+
+const strokeOptions: StrokeOptions = {
+	size: 8,
+	thinning: 0.7,
+	smoothing: 0.4,
+	streamline: 0.6,
+	easing: linear,
+	start: {
+		taper: 0,
+		easing: cubicInOut,
+		cap: true
+	},
+	end: {
+		taper: 0,
+		easing: cubicInOut,
+		cap: true
+	}
+};
+
+interface Options {
+	ondraw: (path: string) => void;
+	oncomplete: (path: string) => void;
+	strokeOptions?: StrokeOptions;
+}
+
+export function SignaturePadAction(node: HTMLElement, options: Options) {
+	const points: number[][] = [];
+
+	if (!options.strokeOptions) options.strokeOptions = {};
+	options.strokeOptions = { ...strokeOptions, ...options.strokeOptions };
+
+	function render(complete: boolean) {
+		const stroke = getStroke(points, strokeOptions);
+		const path = getSvgPathFromStroke(stroke);
+		if (complete) {
+			options.oncomplete(path);
+		} else {
+			options.ondraw(path);
+		}
+	}
+
+	let down = false;
+
+	function pointerDown(e: PointerEvent) {
+		node.setPointerCapture(e.pointerId);
+		points.push([e.offsetX, e.offsetY, e.pressure]);
+		render(false);
+		down = true;
+	}
+
+	function pointerMove(e: PointerEvent) {
+		if (down && e.isPrimary) {
+			points.push([e.offsetX, e.offsetY, e.pressure]);
+			render(false);
+		}
+	}
+
+	function pointerUp(e: PointerEvent) {
+		node.releasePointerCapture(e.pointerId);
+
+		render(true);
+
+		down = false;
+		points.length = 0;
+	}
+
+	node.addEventListener("pointerdown", pointerDown, { passive: true });
+	node.addEventListener("pointermove", pointerMove, { passive: true });
+	node.addEventListener("pointerup", pointerUp, { passive: true });
+	node.addEventListener("pointercancel", pointerUp, { passive: true });
+
+	return {
+		destroy() {
+			node.removeEventListener("pointerdown", pointerDown);
+			node.removeEventListener("pointermove", pointerMove);
+			node.removeEventListener("pointerup", pointerUp);
+			node.removeEventListener("pointercancel", pointerUp);
+		}
+	};
+}

src/lib/modules/forms/form-inputs/signature-pad/signature-pad-action.ts

@@ -0,0 +1,30 @@
+<div>
+  <div
+    class="input input-bordered relative h-[360px] w-full px-0"
+  >
+    <div
+      class="absolute bottom-24 left-4 right-4 border-t border-dotted border-gray-300"
+    />
+     
+    <div
+      class="h-full w-full"
+    >
+      <svg
+        class="pointer-events-none absolute h-full w-full fill-black"
+        viewBox="0 0 0 0"
+      >
+        
+      </svg>
+       
+      <!---->
+    </div>
+     
+    <button
+      class="btn btn-outline btn-primary btn-sm absolute right-2 top-2"
+    >
+      
+    </button>
+    <!---->
+  </div>
+  
+</div>