@heyramzi/ui 2.0.1 → 2.2.0

package/src/canvas/pen/PenField.svelte

@@ -1,90 +1,95 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { useTextField, type TextFieldHandle } from "../editor/text-field-context.js";
-import { useHandDrawn } from "../editor/hand-context.js";
-import "./pen.css";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { useTextField, type TextFieldHandle } from "../editor/text-field-context.js";
+	import { useHandDrawn } from "../editor/hand-context.js";
+	import "./pen.css";
 
-// The words of a pen text or a shape label: the host's field when it gave one (formatted text,
-// its own bar and undo), else a plain textarea.
+	// The words of a pen text or a shape label: the host's field when it gave one (formatted text,
+	// its own bar and undo), else a plain textarea.
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	value: string;
-	/** Which pen element it sits in. Sets the size and the box it keeps. */
-	variant: "text" | "label";
-	onCommit: (next: string, live: boolean) => void;
-	ariaLabel: string;
-	/** Typing needs the canvas editor; without one the words are shown, not changed. */
-	readonly?: boolean;
-	selected?: boolean;
-	color?: string;
-	fontSize?: number;
-	fontWeight?: number;
-	center?: boolean;
-	column?: boolean;
-	/** Called when the field closes. */
-	onExit?: () => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		value: string;
+		/** Which pen element it sits in. Sets the size and the box it keeps. */
+		variant: "text" | "label";
+		onCommit: (next: string, live: boolean) => void;
+		ariaLabel: string;
+		/** Typing needs the canvas editor; without one the words are shown, not changed. */
+		readonly?: boolean;
+		selected?: boolean;
+		color?: string;
+		fontSize?: number;
+		fontWeight?: number;
+		center?: boolean;
+		column?: boolean;
+		/** Called when the field closes. */
+		onExit?: () => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	value,
-	variant,
-	onCommit,
-	ariaLabel,
-	readonly = false,
-	selected = false,
-	color,
-	fontSize,
-	fontWeight,
-	center = false,
-	column = false,
-	onExit,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		value,
+		variant,
+		onCommit,
+		ariaLabel,
+		readonly = false,
+		selected = false,
+		color,
+		fontSize,
+		fontWeight,
+		center = false,
+		column = false,
+		onExit,
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-const Field = useTextField();
-const handDrawn = useHandDrawn();
-let textarea = $state<HTMLTextAreaElement>();
-let field = $state<TextFieldHandle>();
-let editing = $state(false);
+	// =========================
+	// STATE
+	// =========================
+	const Field = useTextField();
+	const handDrawn = useHandDrawn();
+	let textarea = $state<HTMLTextAreaElement>();
+	let field = $state<TextFieldHandle>();
+	let editing = $state(false);
 
-// =========================
-// DERIVED
-// =========================
-let style = $derived(
-	[color && `color: ${color}`, fontSize && `font-size: ${fontSize}px`, fontWeight && `font-weight: ${fontWeight}`, center && "text-align: center"]
-		.filter(Boolean)
-		.join("; "),
-);
+	// =========================
+	// DERIVED
+	// =========================
+	let style = $derived(
+		[
+			color && `color: ${color}`,
+			fontSize && `font-size: ${fontSize}px`,
+			fontWeight && `font-weight: ${fontWeight}`,
+			center && "text-align: center",
+		]
+			.filter(Boolean)
+			.join("; "),
+	);
 
-// =========================
-// FUNCTIONS
-// =========================
-/** Open the field for typing. A host field opens where `point` landed, else at the end. */
-export function edit(point?: { x: number; y: number }) {
-	if (readonly) return;
-	if (field) return field.edit(point);
-	textarea?.focus();
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	/** Open the field for typing. A host field opens where `point` landed, else at the end. */
+	export function edit(point?: { x: number; y: number }) {
+		if (readonly) return;
+		if (field) return field.edit(point);
+		textarea?.focus();
+	}
 
-function close() {
-	editing = false;
-	onExit?.();
-}
+	function close() {
+		editing = false;
+		onExit?.();
+	}
 
-// A text you aren't typing in drags like any card, so a first press must not focus it.
-function press(event: MouseEvent) {
-	if (variant === "text" && !editing) event.preventDefault();
-}
+	// A text you aren't typing in drags like any card, so a first press must not focus it.
+	function press(event: MouseEvent) {
+		if (variant === "text" && !editing) event.preventDefault();
+	}
 </script>
 
 <!-- =========================== -->
@@ -98,7 +103,9 @@ function press(event: MouseEvent) {
 		{ariaLabel}
 		{readonly}
 		{style}
-		class="pen-field is-{variant} is-rich {handDrawn() ? 'hand' : ''} {selected ? 'selected' : ''} {column ? 'column' : ''}"
+		class="pen-field is-{variant} is-rich {handDrawn() ? 'hand' : ''} {selected
+			? 'selected'
+			: ''} {column ? 'column' : ''}"
 		clickToEdit={variant === "label"}
 		onExit={close}
 	/>
@@ -123,6 +130,5 @@ function press(event: MouseEvent) {
 			// Typing must never reach the canvas shortcuts, where Delete would remove the node.
 			event.stopPropagation();
 			if (event.key === "Escape") event.currentTarget.blur();
-		}}
-	></textarea>
+		}}></textarea>
 {/if}

package/src/canvas/pen/PenOverlay.svelte

@@ -1,145 +1,145 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import "./pen.css";
-import PreviewSvg from "../components/shared/svg/PreviewSvg.svelte";
-import type { ErasableNode } from "./eraser.js";
-import type { PenOp } from "./ops.js";
-import { createPenSession, type PenPreview } from "./pen-session.js";
-import type { PenColor, PenTool } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./pen.css";
+	import PreviewSvg from "../components/shared/svg/PreviewSvg.svelte";
+	import type { ErasableNode } from "./eraser.js";
+	import type { PenOp } from "./ops.js";
+	import { createPenSession, type PenPreview } from "./pen-session.js";
+	import type { PenColor, PenTool } from "./types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	tool: PenTool;
-	color?: PenColor;
-	/** Brush width in flow units. Unset takes the tool's default. */
-	size?: number;
-	/** The xyflow viewport, so screen pixels map to flow units. */
-	viewport: { x: number; y: number; zoom: number };
-	nodes: readonly ErasableNode[];
-	commit: (ops: PenOp[]) => void;
-	startGesture: () => () => void;
-	onTextPlaced?: (nodeId: string) => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		tool: PenTool;
+		color?: PenColor;
+		/** Brush width in flow units. Unset takes the tool's default. */
+		size?: number;
+		/** The xyflow viewport, so screen pixels map to flow units. */
+		viewport: { x: number; y: number; zoom: number };
+		nodes: readonly ErasableNode[];
+		commit: (ops: PenOp[]) => void;
+		startGesture: () => () => void;
+		onTextPlaced?: (nodeId: string) => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	tool,
-	color = "ink",
-	size,
-	viewport,
-	nodes,
-	commit,
-	startGesture,
-	onTextPlaced,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		tool,
+		color = "ink",
+		size,
+		viewport,
+		nodes,
+		commit,
+		startGesture,
+		onTextPlaced,
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-let layer = $state<HTMLDivElement | null>(null);
-let preview = $state<PenPreview | null>(null);
-const session = createPenSession(
-	{
-		getNodes: () => nodes,
-		commit: (ops) => commit(ops),
-		startGesture: () => startGesture(),
-		onTextPlaced: (id) => onTextPlaced?.(id),
-		onPreview: (next) => {
-			preview = next;
+	// =========================
+	// STATE
+	// =========================
+	let layer = $state<HTMLDivElement | null>(null);
+	let preview = $state<PenPreview | null>(null);
+	const session = createPenSession(
+		{
+			getNodes: () => nodes,
+			commit: (ops) => commit(ops),
+			startGesture: () => startGesture(),
+			onTextPlaced: (id) => onTextPlaced?.(id),
+			onPreview: (next) => {
+				preview = next;
+			},
 		},
-	},
-	() => ({ tool, color, size, zoom: viewport.zoom }),
-);
+		() => ({ tool, color, size, zoom: viewport.zoom }),
+	);
 
-// =========================
-// EFFECTS
-// =========================
-// Switching tool mid-stroke unmounts the overlay, and an open gesture would block undo for good.
-$effect(() => () => session.cancel());
+	// =========================
+	// EFFECTS
+	// =========================
+	// Switching tool mid-stroke unmounts the overlay, and an open gesture would block undo for good.
+	$effect(() => () => session.cancel());
 
-// =========================
-// FUNCTIONS
-// =========================
-function toFlow(event: { clientX: number; clientY: number }) {
-	const rect = layer?.getBoundingClientRect();
-	const left = rect?.left ?? 0;
-	const top = rect?.top ?? 0;
-	return {
-		x: (event.clientX - left - viewport.x) / viewport.zoom,
-		y: (event.clientY - top - viewport.y) / viewport.zoom,
-	};
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function toFlow(event: { clientX: number; clientY: number }) {
+		const rect = layer?.getBoundingClientRect();
+		const left = rect?.left ?? 0;
+		const top = rect?.top ?? 0;
+		return {
+			x: (event.clientX - left - viewport.x) / viewport.zoom,
+			y: (event.clientY - top - viewport.y) / viewport.zoom,
+		};
+	}
 
-function pressureOf(event: PointerEvent): number | undefined {
-	return event.pointerType === "pen" ? event.pressure : undefined;
-}
+	function pressureOf(event: PointerEvent): number | undefined {
+		return event.pointerType === "pen" ? event.pressure : undefined;
+	}
 
-function onpointerdown(event: PointerEvent) {
-	// A second finger or a right click mustn't start a stroke.
-	if (event.button !== 0 || !event.isPrimary) return;
-	layer?.setPointerCapture(event.pointerId);
-	session.down(toFlow(event), pressureOf(event));
-}
+	function onpointerdown(event: PointerEvent) {
+		// A second finger or a right click mustn't start a stroke.
+		if (event.button !== 0 || !event.isPrimary) return;
+		layer?.setPointerCapture(event.pointerId);
+		session.down(toFlow(event), pressureOf(event));
+	}
 
-function onpointermove(event: PointerEvent) {
-	if (!session.active) return;
-	// Coalesced events keep a fast pen stroke smooth between animation frames.
-	const batch = event.getCoalescedEvents?.() ?? [];
-	for (const sample of batch.length > 0 ? batch : [event]) {
-		session.move(toFlow(sample), pressureOf(sample));
+	function onpointermove(event: PointerEvent) {
+		if (!session.active) return;
+		// Coalesced events keep a fast pen stroke smooth between animation frames.
+		const batch = event.getCoalescedEvents?.() ?? [];
+		for (const sample of batch.length > 0 ? batch : [event]) {
+			session.move(toFlow(sample), pressureOf(sample));
+		}
 	}
-}
 
-function onpointerup(event: PointerEvent) {
-	if (!session.active) return;
-	layer?.releasePointerCapture(event.pointerId);
-	session.up(toFlow(event), { square: event.shiftKey });
-}
+	function onpointerup(event: PointerEvent) {
+		if (!session.active) return;
+		layer?.releasePointerCapture(event.pointerId);
+		session.up(toFlow(event), { square: event.shiftKey });
+	}
 
-function onkeydown(event: KeyboardEvent) {
-	if (event.key === "Escape") session.cancel();
-}
+	function onkeydown(event: KeyboardEvent) {
+		if (event.key === "Escape") session.cancel();
+	}
 
-// The overlay sits above xyflow's zoom pane, so a wheel or a trackpad pinch would
-// never reach it. Hand those to the pane so you can zoom and pan mid-drawing.
-function forwardWheel(node: HTMLElement) {
-	const handler = (event: WheelEvent) => {
-		const zoomPane = node.closest(".svelte-flow")?.querySelector(".svelte-flow__zoom");
-		if (!zoomPane) return;
-		event.preventDefault();
-		zoomPane.dispatchEvent(
-			new WheelEvent("wheel", {
-				deltaX: event.deltaX,
-				deltaY: event.deltaY,
-				deltaZ: event.deltaZ,
-				deltaMode: event.deltaMode,
-				clientX: event.clientX,
-				clientY: event.clientY,
-				screenX: event.screenX,
-				screenY: event.screenY,
-				ctrlKey: event.ctrlKey,
-				shiftKey: event.shiftKey,
-				altKey: event.altKey,
-				metaKey: event.metaKey,
-				bubbles: true,
-				cancelable: true,
-			}),
-		);
-	};
-	node.addEventListener("wheel", handler, { passive: false });
-	return () => node.removeEventListener("wheel", handler);
-}
+	// The overlay sits above xyflow's zoom pane, so a wheel or a trackpad pinch would
+	// never reach it. Hand those to the pane so you can zoom and pan mid-drawing.
+	function forwardWheel(node: HTMLElement) {
+		const handler = (event: WheelEvent) => {
+			const zoomPane = node.closest(".svelte-flow")?.querySelector(".svelte-flow__zoom");
+			if (!zoomPane) return;
+			event.preventDefault();
+			zoomPane.dispatchEvent(
+				new WheelEvent("wheel", {
+					deltaX: event.deltaX,
+					deltaY: event.deltaY,
+					deltaZ: event.deltaZ,
+					deltaMode: event.deltaMode,
+					clientX: event.clientX,
+					clientY: event.clientY,
+					screenX: event.screenX,
+					screenY: event.screenY,
+					ctrlKey: event.ctrlKey,
+					shiftKey: event.shiftKey,
+					altKey: event.altKey,
+					metaKey: event.metaKey,
+					bubbles: true,
+					cancelable: true,
+				}),
+			);
+		};
+		node.addEventListener("wheel", handler, { passive: false });
+		return () => node.removeEventListener("wheel", handler);
+	}
 
-function cursorFor(current: PenTool): string {
-	if (current === "text") return "text";
-	return "crosshair";
-}
+	function cursorFor(current: PenTool): string {
+		if (current === "text") return "text";
+		return "crosshair";
+	}
 </script>
 
 <!-- =========================== -->

package/src/canvas/pen/ShapeNode.svelte

@@ -1,38 +1,36 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { NodeResizer, type NodeProps } from "@xyflow/svelte";
-import ShapeOutline from "../components/shared/svg/ShapeOutline.svelte";
-import PenField from "./PenField.svelte";
-import { getDiagramEditorContext } from "../editor/editor-context.js";
-import { useHandDrawn } from "../editor/hand-context.js";
-import { isLocked } from "../editor/lock.js";
-import "./pen.css";
-import { penColorVar } from "./colors.js";
-import { shapeOutline } from "./shapes.js";
-import type { ShapeData } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { NodeResizer, type NodeProps } from "@xyflow/svelte";
+	import ShapeOutline from "../components/shared/svg/ShapeOutline.svelte";
+	import PenField from "./PenField.svelte";
+	import { getDiagramEditorContext } from "../editor/editor-context.js";
+	import { useHandDrawn } from "../editor/hand-context.js";
+	import { isLocked } from "../editor/lock.js";
+	import "./pen.css";
+	import { penColorVar } from "./colors.js";
+	import { shapeOutline } from "./shapes.js";
+	import type { ShapeData } from "./types.js";
 
-// =========================
-// PROPS
-// =========================
-let { id, data, selected, width, height }: NodeProps = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { id, data, selected, width, height }: NodeProps = $props();
 
-// =========================
-// STATE
-// =========================
-const editor = getDiagramEditorContext();
-const handDrawn = useHandDrawn();
-let endResize: (() => void) | null = null;
+	// =========================
+	// STATE
+	// =========================
+	const editor = getDiagramEditorContext();
+	const handDrawn = useHandDrawn();
+	let endResize: (() => void) | null = null;
 
-// =========================
-// DERIVED
-// =========================
-let shape = $derived(data as ShapeData);
-let outline = $derived(
-	shapeOutline(shape.shape, width ?? 0, height ?? 0, shape.strokeWidth / 2),
-);
-let ink = $derived(penColorVar(shape.color));
+	// =========================
+	// DERIVED
+	// =========================
+	let shape = $derived(data as ShapeData);
+	let outline = $derived(shapeOutline(shape.shape, width ?? 0, height ?? 0, shape.strokeWidth / 2));
+	let ink = $derived(penColorVar(shape.color));
 </script>
 
 <!-- =========================== -->
@@ -58,7 +56,8 @@ let ink = $derived(penColorVar(shape.color));
 		readonly={!editor || isLocked({ data })}
 		ariaLabel="Shape label"
 		color={ink}
-		onCommit={(next, live) => editor?.patchNodeData(id, { label: next }, live ? { coalesce: true } : undefined)}
+		onCommit={(next, live) =>
+			editor?.patchNodeData(id, { label: next }, live ? { coalesce: true } : undefined)}
 		onExit={() => editor?.endTextEdit()}
 	/>
 {/if}