@heyramzi/ui 1.54.2 → 2.0.1

package/src/canvas/ui/CanvasToolbar.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" module>
+import type { PenColor } from "../pen/types.js";
+import type { CanvasTool } from "./tools.js";
+
+export interface ToolbarLabels {
+	toolbar: string;
+	style: string;
+	tools: Record<CanvasTool, string> & { shapes: string; note: string };
+	colors: Record<PenColor, string>;
+	/** Small, medium, large. */
+	sizes: readonly [string, string, string];
+}
+</script>
+
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { Panel } from "@xyflow/svelte";
+import type { Snippet } from "svelte";
+import "../pen/pen.css";
+import { PEN_COLORS } from "../pen/types.js";
+import "./canvas-ui.css";
+import ToolIcon from "../components/icons/ToolIcon.svelte";
+import {
+	hasBrush,
+	hasColor,
+	isBrushTool,
+	isShapeTool,
+	keyForTool,
+	type BrushLevel,
+	type BrushTool,
+} from "./tools.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	tool: CanvasTool;
+	color: PenColor;
+	level: BrushLevel;
+	labels: ToolbarLabels;
+	/** The note button drops a note card, so the host owns what it does. Omit it to hide the button. */
+	onNote?: () => void;
+	/** Sits last on the rail, for what only the host knows, like the card palette. */
+	extra?: Snippet;
+}
+
+// =========================
+// PROPS
+// =========================
+let { tool = $bindable(), color = $bindable(), level = $bindable(), labels, onNote, extra }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+let lastShape = $state<"rectangle" | "ellipse" | "diamond">("rectangle");
+let lastBrush = $state<BrushTool>("pen");
+
+// =========================
+// DERIVED
+// =========================
+const BRUSHES = ["pen", "highlighter", "eraser"] as const;
+const SHAPES = ["rectangle", "ellipse", "diamond"] as const;
+const BRUSH_DOT = [4, 7, 11] as const;
+
+let shapeActive = $derived(isShapeTool(tool));
+let brushActive = $derived(isBrushTool(tool));
+let showStyle = $derived(brushActive || shapeActive || hasColor(tool));
+
+// =========================
+// EFFECTS
+// =========================
+$effect(() => {
+	if (isShapeTool(tool)) lastShape = tool;
+	if (isBrushTool(tool)) lastBrush = tool;
+});
+
+// =========================
+// FUNCTIONS
+// =========================
+function tip(id: CanvasTool, label = labels.tools[id]): string {
+	const key = keyForTool(id);
+	return key ? `${label}  ${key}` : label;
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Panel position="center-left" class="cv-dock">
+	<div class="cv-row">
+		<div class="cv-bar cv-rail" role="toolbar" aria-orientation="vertical" aria-label={labels.toolbar}>
+			<button type="button" class="cv-btn" aria-pressed={tool === "select"} aria-label={labels.tools.select} data-tip={tip("select")} onclick={() => (tool = "select")}>
+				<ToolIcon name="select" />
+			</button>
+			<button type="button" class="cv-btn" aria-pressed={tool === "hand"} aria-label={labels.tools.hand} data-tip={tip("hand")} onclick={() => (tool = "hand")}>
+				<ToolIcon name="hand" />
+			</button>
+			<button type="button" class="cv-btn" aria-pressed={tool === "connect"} aria-label={labels.tools.connect} data-tip={tip("connect")} onclick={() => (tool = "connect")}>
+				<ToolIcon name="connect" />
+			</button>
+			<button type="button" class="cv-btn" aria-pressed={brushActive} aria-label={labels.tools[lastBrush]} data-tip={tip(lastBrush)} onclick={() => (tool = lastBrush)}>
+				<ToolIcon name={brushActive ? (tool as BrushTool) : lastBrush} />
+			</button>
+			<button type="button" class="cv-btn" aria-pressed={tool === "text"} aria-label={labels.tools.text} data-tip={tip("text")} onclick={() => (tool = "text")}>
+				<ToolIcon name="text" />
+			</button>
+			<button type="button" class="cv-btn" aria-pressed={shapeActive} aria-label={labels.tools.shapes} data-tip={tip("rectangle", labels.tools.shapes)} onclick={() => (tool = lastShape)}>
+				<ToolIcon name={shapeActive ? (tool as typeof lastShape) : lastShape} />
+			</button>
+			<button type="button" class="cv-btn" aria-pressed={tool === "frame"} aria-label={labels.tools.frame} data-tip={tip("frame")} onclick={() => (tool = "frame")}>
+				<ToolIcon name="frame" />
+			</button>
+			{#if onNote}
+				<button type="button" class="cv-btn" aria-label={labels.tools.note} data-tip="{labels.tools.note}  N" onclick={onNote}>
+					<ToolIcon name="note" />
+				</button>
+			{/if}
+
+			{#if extra}
+				<span class="cv-gap" aria-hidden="true"></span>
+				{@render extra()}
+			{/if}
+		</div>
+
+		{#if showStyle}
+			<div class="cv-bar t-enter" role="toolbar" aria-label={labels.style}>
+				{#if brushActive}
+					{#each BRUSHES as brush (brush)}
+						<button type="button" class="cv-btn" aria-pressed={tool === brush} aria-label={labels.tools[brush]} data-tip={tip(brush)} onclick={() => (tool = brush)}>
+							<ToolIcon name={brush} />
+						</button>
+					{/each}
+				{:else if shapeActive}
+					{#each SHAPES as shape (shape)}
+						<button type="button" class="cv-btn" aria-pressed={tool === shape} aria-label={labels.tools[shape]} data-tip={tip(shape)} onclick={() => (tool = shape)}>
+							<ToolIcon name={shape} />
+						</button>
+					{/each}
+				{/if}
+
+				{#if hasColor(tool)}
+					{#if brushActive || shapeActive}<span class="cv-gap" aria-hidden="true"></span>{/if}
+					{#each PEN_COLORS as swatch (swatch)}
+						<button
+							type="button"
+							class="cv-swatch"
+							aria-pressed={color === swatch}
+							aria-label={labels.colors[swatch]}
+							data-tip={labels.colors[swatch]}
+							style:--swatch="var(--pen-{swatch})"
+							onclick={() => (color = swatch)}
+						></button>
+					{/each}
+				{/if}
+
+				{#if hasBrush(tool)}
+					<span class="cv-gap" aria-hidden="true"></span>
+					{#each BRUSH_DOT as dot, index (index)}
+						<button type="button" class="cv-btn" aria-pressed={level === index} aria-label={labels.sizes[index]} data-tip={labels.sizes[index]} onclick={() => (level = index as BrushLevel)}>
+							<span class="cv-dot" style:--dot="{dot}px"></span>
+						</button>
+					{/each}
+				{/if}
+			</div>
+		{/if}
+	</div>
+</Panel>

package/src/canvas/ui/FrameLayer.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { useStore } from "@xyflow/svelte";
+import { frameRect, type FrameRect } from "../editor/frame.js";
+import "./canvas-ui.css";
+import { forwardWheel } from "./forward-wheel.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	/** A drag ended, or a click: the box in flow units. */
+	onFrame: (rect: FrameRect) => void;
+}
+
+// =========================
+// PROPS
+// =========================
+let { onFrame }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+// The layer maps screen pixels to flow units, so it reads the live xyflow viewport.
+const store = useStore();
+let layer = $state<HTMLDivElement | null>(null);
+let start = $state<{ x: number; y: number } | null>(null);
+let end = $state<{ x: number; y: number } | null>(null);
+
+// =========================
+// DERIVED
+// =========================
+let preview = $derived(start && end ? frameRect(start, end) : null);
+
+// =========================
+// FUNCTIONS
+// =========================
+function toFlow(event: { clientX: number; clientY: number }) {
+	const box = layer?.getBoundingClientRect();
+	const { x, y, zoom } = store.viewport;
+	return {
+		x: (event.clientX - (box?.left ?? 0) - x) / zoom,
+		y: (event.clientY - (box?.top ?? 0) - y) / zoom,
+	};
+}
+
+function onpointerdown(event: PointerEvent) {
+	if (event.button !== 0 || !event.isPrimary) return;
+	layer?.setPointerCapture(event.pointerId);
+	start = end = toFlow(event);
+}
+
+function onpointermove(event: PointerEvent) {
+	if (start) end = toFlow(event);
+}
+
+function onpointerup(event: PointerEvent) {
+	if (!start) return;
+	layer?.releasePointerCapture(event.pointerId);
+	const rect = frameRect(start, toFlow(event));
+	start = end = null;
+	onFrame(rect);
+}
+
+function cancel() {
+	start = end = null;
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<svelte:window onkeydown={(event) => event.key === "Escape" && cancel()} />
+
+<div
+	bind:this={layer}
+	{@attach forwardWheel}
+	class="cv-frame-layer"
+	data-testid="frame-layer"
+	role="presentation"
+	{onpointerdown}
+	{onpointermove}
+	{onpointerup}
+	onpointercancel={cancel}
+>
+	{#if preview}
+		<div
+			class="cv-frame-preview"
+			style:left="{preview.x * store.viewport.zoom + store.viewport.x}px"
+			style:top="{preview.y * store.viewport.zoom + store.viewport.y}px"
+			style:width="{preview.width * store.viewport.zoom}px"
+			style:height="{preview.height * store.viewport.zoom}px"
+		></div>
+	{/if}
+</div>
+
+<style>
+	.cv-frame-layer {
+		position: absolute;
+		inset: 0;
+		z-index: 5;
+		cursor: crosshair;
+		touch-action: none;
+		user-select: none;
+	}
+
+	.cv-frame-preview {
+		position: absolute;
+		border: 1.5px solid var(--cv-selection);
+		border-radius: var(--cv-radius-btn);
+		background: var(--cv-selection-fill);
+		pointer-events: none;
+	}
+</style>

package/src/canvas/ui/PenLayer.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { useStore } from "@xyflow/svelte";
+import type { ErasableNode } from "../pen/eraser.js";
+import type { PenOp } from "../pen/ops.js";
+import PenOverlay from "../pen/PenOverlay.svelte";
+import type { PenColor, PenTool } from "../pen/types.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	tool: PenTool;
+	color: PenColor;
+	size?: number;
+	nodes: readonly ErasableNode[];
+	commit: (ops: PenOp[]) => void;
+	startGesture: () => () => void;
+	onTextPlaced?: (nodeId: string) => void;
+}
+
+// =========================
+// PROPS
+// =========================
+let { tool, color, size, nodes, commit, startGesture, onTextPlaced }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+// The overlay maps screen pixels to flow units, so it reads the live xyflow viewport.
+const store = useStore();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<PenOverlay {tool} {color} {size} viewport={store.viewport} {nodes} {commit} {startGesture} {onTextPlaced} />

package/src/canvas/ui/StylePanel.svelte

@@ -0,0 +1,268 @@
+<script lang="ts" module>
+import type { PenColor } from "../pen/types.js";
+
+export interface StyleLabels {
+	panel: string;
+	fill: string;
+	stroke: string;
+	/** The stroke row's name when the selection has no outline, only ink, like text. */
+	colour: string;
+	none: string;
+	width: string;
+	/** Thin, regular, thick. */
+	widths: readonly [string, string, string];
+	font: string;
+	regular: string;
+	bold: string;
+	colors: Record<PenColor, string>;
+}
+</script>
+
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { Panel, useStore } from "@xyflow/svelte";
+import type { CanvasOp } from "../ops/ops.js";
+import {
+	FONT_SIZES,
+	styleOps,
+	summarizeStyle,
+	type FontWeight,
+	type StyleNode,
+	type StyleValues,
+	type WidthLevel,
+} from "../editor/style.js";
+import { PEN_COLORS } from "../pen/types.js";
+import "../pen/pen.css";
+import { placeBeside, type Box } from "./place-panel.js";
+import "./canvas-ui.css";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	/** The selected cards. The panel hides when none of them takes a style. */
+	nodes: readonly StyleNode[];
+	/** The node type of a frame or group, whose fill and outline the panel sets. */
+	frameType?: string;
+	labels: StyleLabels;
+	/** One call per change, so each is one undo step. */
+	commit: (ops: CanvasOp[]) => void;
+}
+
+// =========================
+// PROPS
+// =========================
+let { nodes, frameType = "group", labels, commit }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+const store = useStore();
+let barWidth = $state(0);
+let barHeight = $state(0);
+
+// =========================
+// DERIVED
+// =========================
+const WEIGHTS: readonly FontWeight[] = ["regular", "bold"];
+const LEVELS: readonly WidthLevel[] = [0, 1, 2];
+
+let summary = $derived(summarizeStyle(nodes, frameType));
+let strokeLabel = $derived(summary?.controls.has("fill") || summary?.controls.has("width") ? labels.stroke : labels.colour);
+
+// The selection in screen pixels, read from the live viewport so the panel follows a pan, a zoom and a drag.
+let selection = $derived.by<Box | null>(() => {
+	const { x, y, zoom } = store.viewport;
+	let box: Box | null = null;
+	for (const node of nodes) {
+		const internal = store.nodeLookup.get(node.id);
+		if (!internal) continue;
+		const at = internal.internals.positionAbsolute;
+		const width = internal.measured.width ?? internal.width ?? 0;
+		const height = internal.measured.height ?? internal.height ?? 0;
+		const left = at.x * zoom + x;
+		const top = at.y * zoom + y;
+		const right = left + width * zoom;
+		const bottom = top + height * zoom;
+		box = box
+			? { left: Math.min(box.left, left), top: Math.min(box.top, top), right: Math.max(box.right, right), bottom: Math.max(box.bottom, bottom) }
+			: { left, top, right, bottom };
+	}
+	return box;
+});
+
+// Beside the selection on the side with room, never over its grips. Null leaves the panel docked at the right edge.
+let placed = $derived(
+	selection && barWidth > 0
+		? placeBeside(selection, { width: barWidth, height: barHeight }, { width: store.width, height: store.height })
+		: null,
+);
+
+// =========================
+// FUNCTIONS
+// =========================
+function change(next: Partial<StyleValues>) {
+	const ops = styleOps(nodes, next, frameType);
+	if (ops.length > 0) commit(ops);
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if summary}
+	<Panel
+		position="center-right"
+		class="cv-dock cv-style-dock {placed ? 'is-placed' : ''}"
+		style={placed ? `--cv-style-x:${Math.round(placed.x)}px;--cv-style-y:${Math.round(placed.y)}px` : undefined}
+		data-side={placed?.side}
+	>
+		<div
+			bind:offsetWidth={barWidth}
+			bind:offsetHeight={barHeight}
+			class="cv-bar cv-side cv-style t-enter" role="toolbar" aria-label={labels.panel} data-testid="style-panel">
+			{#if summary.controls.has("fill")}
+				<div class="cv-section" role="group" aria-label={labels.fill} data-testid="style-fill">
+					<span class="cv-label" aria-hidden="true">{labels.fill}</span>
+					<div class="cv-swatches">
+						<button
+							type="button"
+							class="cv-swatch cv-swatch-none"
+							aria-pressed={summary.values.fill === "none"}
+							aria-label="{labels.fill}: {labels.none}"
+							data-tip={labels.none}
+							onclick={() => change({ fill: "none" })}
+						></button>
+						{#each PEN_COLORS as swatch (swatch)}
+							<button
+								type="button"
+								class="cv-swatch"
+								aria-pressed={summary.values.fill === swatch}
+								aria-label="{labels.fill}: {labels.colors[swatch]}"
+								data-tip={labels.colors[swatch]}
+								style:--swatch="var(--pen-{swatch})"
+								onclick={() => change({ fill: swatch })}
+							></button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			{#if summary.controls.has("stroke")}
+				<div class="cv-section" role="group" aria-label={strokeLabel} data-testid="style-stroke">
+					<span class="cv-label" aria-hidden="true">{strokeLabel}</span>
+					<div class="cv-swatches">
+						{#each PEN_COLORS as swatch (swatch)}
+							<button
+								type="button"
+								class="cv-swatch"
+								aria-pressed={summary.values.stroke === swatch}
+								aria-label="{strokeLabel}: {labels.colors[swatch]}"
+								data-tip={labels.colors[swatch]}
+								style:--swatch="var(--pen-{swatch})"
+								onclick={() => change({ stroke: swatch })}
+							></button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			{#if summary.controls.has("width")}
+				<div class="cv-section" role="group" aria-label={labels.width} data-testid="style-width">
+					<span class="cv-label" aria-hidden="true">{labels.width}</span>
+					<div class="cv-swatches">
+						{#each LEVELS as level (level)}
+							<button
+								type="button"
+								class="cv-btn"
+								aria-pressed={summary.values.width === level}
+								aria-label="{labels.width}: {labels.widths[level]}"
+								data-tip={labels.widths[level]}
+								onclick={() => change({ width: level })}
+							>
+								<span class="cv-line" style:--line="{[1.5, 3, 5][level]}px"></span>
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			{#if summary.controls.has("fontSize")}
+				<div class="cv-section" role="group" aria-label={labels.font} data-testid="style-font">
+					<span class="cv-label" aria-hidden="true">{labels.font}</span>
+					<div class="cv-swatches">
+						{#each FONT_SIZES as size (size)}
+							<button
+								type="button"
+								class="cv-btn cv-figure"
+								aria-pressed={summary.values.fontSize === size}
+								aria-label="{labels.font}: {size}"
+								onclick={() => change({ fontSize: size })}
+							>{size}</button>
+						{/each}
+						{#each WEIGHTS as weight (weight)}
+							<button
+								type="button"
+								class="cv-btn cv-figure"
+								style:font-weight={weight === "bold" ? 700 : 400}
+								aria-pressed={summary.values.fontWeight === weight}
+								aria-label={weight === "bold" ? labels.bold : labels.regular}
+								data-tip={weight === "bold" ? labels.bold : labels.regular}
+								onclick={() => change({ fontWeight: weight })}
+							>Aa</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+	</Panel>
+{/if}
+
+<style>
+	.cv-style {
+		flex-direction: column;
+		align-items: stretch;
+		gap: 8px;
+		padding: 8px;
+	}
+
+	.cv-section {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.cv-label {
+		padding-inline: 4px;
+		color: var(--cv-ink-muted);
+		font-size: 12px;
+		line-height: 16px;
+	}
+
+	.cv-swatches {
+		display: grid;
+		grid-template-columns: repeat(3, var(--cv-btn));
+		gap: 0;
+	}
+
+	.cv-line {
+		width: 18px;
+		height: var(--line);
+		border-radius: 999px;
+		background: currentColor;
+	}
+
+	.cv-figure {
+		font-size: 12px;
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* No fill is an empty disc struck through, since a swatch can't show the absence of a colour. */
+	.cv-swatch-none::before {
+		background:
+			linear-gradient(135deg, transparent 46%, var(--cv-ink-muted) 46% 54%, transparent 54%),
+			var(--cv-surface);
+	}
+</style>