@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/signature-pad/index.js

@@ -0,0 +1,330 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { d as query, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { t as getDataUrl$1 } from "../../data-url-DHUHj7UF.js";
+import { h as isModifierKey, m as isLeftClick, s as getEventTarget } from "../../event-bTItRgiw.js";
+import { t as getRelativePoint } from "../../point-C9A4dk1i.js";
+import { t as trackPointerMove } from "../../pointer-move-Tijb8Ptk.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+import getStroke from "perfect-freehand";
+//#region src/machines/signature-pad/anatomy.ts
+const anatomy = createAnatomy("signature-pad").parts("root", "control", "segment", "segmentPath", "guide", "clearTrigger", "label");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/signature-pad/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `signature-pad:${ctx.id}`;
+const getControlId = (ctx) => ctx.ids?.control ?? `signature-pad:${ctx.id}:control`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `signature-pad:${ctx.id}:label`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `signature-pad:${ctx.id}:hidden-input`;
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getSegmentEl = (ctx) => query(getControlEl(ctx), "[data-part=segment]");
+const getDataUrl = (ctx, options) => {
+	return getDataUrl$1(getSegmentEl(ctx), options);
+};
+//#endregion
+//#region src/machines/signature-pad/connect.ts
+function connect(service, normalize) {
+	const { state, send, prop, computed, context, scope } = service;
+	const drawing = state.matches("drawing");
+	const empty = computed("isEmpty");
+	const interactive = computed("isInteractive");
+	const disabled = !!prop("disabled");
+	const required = !!prop("required");
+	const translations = prop("translations");
+	return {
+		empty,
+		drawing,
+		currentPath: context.get("currentPath"),
+		paths: context.get("paths"),
+		clear() {
+			send({ type: "CLEAR" });
+		},
+		getDataUrl(type, quality) {
+			if (computed("isEmpty")) return Promise.resolve("");
+			return getDataUrl(scope, {
+				type,
+				quality
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				id: getLabelId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-required": dataAttr(required),
+				htmlFor: getHiddenInputId(scope),
+				onClick(event) {
+					if (!interactive) return;
+					if (event.defaultPrevented) return;
+					getControlEl(scope)?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				id: getRootId(scope)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				tabIndex: disabled ? void 0 : 0,
+				id: getControlId(scope),
+				role: "application",
+				"aria-roledescription": "signature pad",
+				"aria-label": translations.control,
+				"aria-disabled": disabled,
+				"data-disabled": dataAttr(disabled),
+				onPointerDown(event) {
+					if (!isLeftClick(event)) return;
+					if (isModifierKey(event)) return;
+					if (!interactive) return;
+					if (getEventTarget(event)?.closest("[data-part=clear-trigger]")) return;
+					event.currentTarget.setPointerCapture(event.pointerId);
+					const point = {
+						x: event.clientX,
+						y: event.clientY
+					};
+					const controlEl = getControlEl(scope);
+					if (!controlEl) return;
+					const { offset } = getRelativePoint(point, controlEl);
+					send({
+						type: "POINTER_DOWN",
+						point: offset,
+						pressure: event.pressure
+					});
+				},
+				onPointerUp(event) {
+					if (!interactive) return;
+					if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+				},
+				style: {
+					position: "relative",
+					touchAction: "none",
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				}
+			});
+		},
+		getSegmentProps() {
+			return normalize.svg({
+				...parts.segment.attrs,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					pointerEvents: "none",
+					fill: prop("drawing").fill
+				}
+			});
+		},
+		getSegmentPathProps(props) {
+			return normalize.path({
+				...parts.segmentPath.attrs,
+				d: props.path
+			});
+		},
+		getGuideProps() {
+			return normalize.element({
+				...parts.guide.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getClearTriggerProps() {
+			return normalize.button({
+				...parts.clearTrigger.attrs,
+				dir: prop("dir"),
+				type: "button",
+				"aria-label": translations.clearTrigger,
+				hidden: !context.get("paths").length || drawing,
+				disabled,
+				onClick() {
+					send({ type: "CLEAR" });
+				}
+			});
+		},
+		getHiddenInputProps(props) {
+			return normalize.input({
+				id: getHiddenInputId(scope),
+				type: "text",
+				hidden: true,
+				disabled,
+				required: prop("required"),
+				readOnly: true,
+				name: prop("name"),
+				value: props.value
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/signature-pad/get-svg-path.ts
+const average = (a, b) => (a + b) / 2;
+function getSvgPathFromStroke(points, closed = true) {
+	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;
+}
+//#endregion
+//#region src/machines/signature-pad/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			defaultPaths: [],
+			...props,
+			drawing: {
+				size: 2,
+				simulatePressure: false,
+				thinning: .7,
+				smoothing: .4,
+				streamline: .6,
+				...props.drawing
+			},
+			translations: {
+				control: "signature pad",
+				clearTrigger: "clear signature",
+				...props.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			paths: bindable(() => ({
+				defaultValue: prop("defaultPaths"),
+				value: prop("paths"),
+				sync: true,
+				onChange(value) {
+					prop("onDraw")?.({ paths: value });
+				}
+			})),
+			currentPoints: bindable(() => ({ defaultValue: [] })),
+			currentPath: bindable(() => ({ defaultValue: null }))
+		};
+	},
+	computed: {
+		isInteractive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
+		isEmpty: ({ context }) => context.get("paths").length === 0
+	},
+	on: { CLEAR: { actions: [
+		"clearPoints",
+		"invokeOnDrawEnd",
+		"focusCanvasEl"
+	] } },
+	states: {
+		idle: { on: { POINTER_DOWN: {
+			target: "drawing",
+			actions: ["addPoint"]
+		} } },
+		drawing: {
+			effects: ["trackPointerMove"],
+			on: {
+				POINTER_MOVE: { actions: ["addPoint", "invokeOnDraw"] },
+				POINTER_UP: {
+					target: "idle",
+					actions: ["endStroke", "invokeOnDrawEnd"]
+				}
+			}
+		}
+	},
+	implementations: {
+		effects: { trackPointerMove({ scope, send }) {
+			return trackPointerMove(scope.getDoc(), {
+				onPointerMove({ event, point }) {
+					const controlEl = getControlEl(scope);
+					if (!controlEl) return;
+					const { offset } = getRelativePoint(point, controlEl);
+					send({
+						type: "POINTER_MOVE",
+						point: offset,
+						pressure: event.pressure
+					});
+				},
+				onPointerUp() {
+					send({ type: "POINTER_UP" });
+				}
+			});
+		} },
+		actions: {
+			addPoint({ context, event, prop }) {
+				const nextPoints = [...context.get("currentPoints"), event.point];
+				context.set("currentPoints", nextPoints);
+				const stroke = getStroke(nextPoints, prop("drawing"));
+				context.set("currentPath", getSvgPathFromStroke(stroke));
+			},
+			endStroke({ context }) {
+				const nextPaths = [...context.get("paths"), context.get("currentPath")];
+				context.set("paths", nextPaths);
+				context.set("currentPoints", []);
+				context.set("currentPath", null);
+			},
+			clearPoints({ context }) {
+				context.set("currentPoints", []);
+				context.set("paths", []);
+				context.set("currentPath", null);
+			},
+			focusCanvasEl({ scope }) {
+				queueMicrotask(() => {
+					scope.getActiveElement()?.focus({ preventScroll: true });
+				});
+			},
+			invokeOnDraw({ context, prop }) {
+				prop("onDraw")?.({ paths: [...context.get("paths"), context.get("currentPath")] });
+			},
+			invokeOnDrawEnd({ context, prop, scope, computed }) {
+				prop("onDrawEnd")?.({
+					paths: [...context.get("paths")],
+					getDataUrl(type, quality = .92) {
+						if (computed("isEmpty")) return Promise.resolve("");
+						return getDataUrl(scope, {
+							type,
+							quality
+						});
+					}
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/signature-pad/props.ts
+const props = createProps()([
+	"defaultPaths",
+	"dir",
+	"disabled",
+	"drawing",
+	"getRootNode",
+	"id",
+	"ids",
+	"name",
+	"onDraw",
+	"onDrawEnd",
+	"paths",
+	"readOnly",
+	"required",
+	"translations"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };