@heyramzi/ui 1.54.1 → 2.0.0

package/src/canvas/editor/style.ts

@@ -0,0 +1,184 @@
+// The style panel model: what a selection takes, and the ops that restyle it.
+// A change is one patchNode per card, so it is one undo step.
+
+import type { CanvasOp } from "../ops/ops.js";
+import { PEN_COLORS, SHAPE_NODE, STROKE_NODE, TEXT_NODE, type PenColor } from "../pen/types.js";
+
+export type FillValue = PenColor | "none";
+export type FontWeight = "regular" | "bold";
+/** Thin, regular, thick. A level maps to a different width on a stroke, a shape and a frame. */
+export type WidthLevel = 0 | 1 | 2;
+
+export interface StyleValues {
+  fill: FillValue;
+  stroke: PenColor;
+  width: WidthLevel;
+  fontSize: number;
+  fontWeight: FontWeight;
+}
+
+export type StyleControl = keyof StyleValues;
+
+export const FONT_SIZES = [16, 20, 28, 40] as const;
+
+export interface StyleNode {
+  id: string;
+  type?: string;
+  data: Record<string, unknown>;
+}
+
+const SHAPE_WIDTHS = [2, 3, 5] as const;
+const PEN_WIDTHS = [2, 4, 8] as const;
+const HIGHLIGHTER_WIDTHS = [12, 20, 32] as const;
+const FRAME_WIDTHS = [1, 2, 4] as const;
+
+type Kind = "shape" | "text" | "stroke" | "frame";
+
+const CONTROLS: Record<Kind, readonly StyleControl[]> = {
+  shape: ["fill", "stroke", "width"],
+  text: ["stroke", "fontSize", "fontWeight"],
+  stroke: ["stroke", "width"],
+  frame: ["fill", "stroke", "width"],
+};
+
+function kindOf(node: StyleNode, frameType: string): Kind | null {
+  if (node.type === SHAPE_NODE) return "shape";
+  if (node.type === TEXT_NODE) return "text";
+  if (node.type === STROKE_NODE) return "stroke";
+  // Only a frame from the F tool wears a fill and a line; a group draws its own colour.
+  return node.type === frameType && node.data.frame === true ? "frame" : null;
+}
+
+function widthsOf(kind: Kind, node: StyleNode): readonly number[] {
+  if (kind === "shape") return SHAPE_WIDTHS;
+  if (kind === "frame") return FRAME_WIDTHS;
+  return node.data.tool === "highlighter" ? HIGHLIGHTER_WIDTHS : PEN_WIDTHS;
+}
+
+function widthKey(kind: Kind): string {
+  if (kind === "stroke") return "size";
+  return "strokeWidth";
+}
+
+function colorOf(value: unknown): PenColor | undefined {
+  return PEN_COLORS.find((color) => color === value);
+}
+
+function levelOf(kind: Kind, node: StyleNode): WidthLevel {
+  const widths = widthsOf(kind, node);
+  // A frame nobody styled draws the thinnest line, and a pen mark its middle one.
+  const stored = Number(node.data[widthKey(kind)]);
+  if (!Number.isFinite(stored)) return kind === "frame" ? 0 : 1;
+  let nearest = 0;
+  for (let at = 1; at < widths.length; at += 1) {
+    if (Math.abs(widths[at] - stored) < Math.abs(widths[nearest] - stored)) nearest = at;
+  }
+  return nearest as WidthLevel;
+}
+
+/** What a card of each kind shows, given the colour it draws in. */
+const VALUES: Record<Kind, (node: StyleNode, color: PenColor) => Partial<StyleValues>> = {
+  shape: (node, color) => ({
+    fill: node.data.filled ? (colorOf(node.data.fill) ?? color) : "none",
+    stroke: color,
+    width: levelOf("shape", node),
+  }),
+  text: (node, color) => ({
+    stroke: color,
+    fontSize: Number(node.data.fontSize) || 20,
+    fontWeight: node.data.fontWeight === "bold" ? "bold" : "regular",
+  }),
+  stroke: (node, color) => ({ stroke: color, width: levelOf("stroke", node) }),
+  frame: (node) => ({
+    fill: colorOf(node.data.fill) ?? "none",
+    stroke: colorOf(node.data.stroke) ?? "ink",
+    width: levelOf("frame", node),
+  }),
+};
+
+function valuesOf(kind: Kind, node: StyleNode): Partial<StyleValues> {
+  return VALUES[kind](node, colorOf(node.data.color) ?? "ink");
+}
+
+export interface StyleSummary {
+  /** Every control some selected card answers to. */
+  controls: ReadonlySet<StyleControl>;
+  /** A value every card that has the control agrees on. Missing where they differ. */
+  values: Partial<StyleValues>;
+  /** The widths a control shows, in px, for the first card that has one. */
+  widths: readonly number[];
+}
+
+/** What the panel shows for a selection, or null when nothing in it takes a style. */
+export function summarizeStyle(
+  nodes: readonly StyleNode[],
+  frameType: string,
+): StyleSummary | null {
+  const controls = new Set<StyleControl>();
+  const seen = new Map<StyleControl, Set<unknown>>();
+  let widths: readonly number[] = [];
+  for (const node of nodes) {
+    const kind = kindOf(node, frameType);
+    if (!kind) continue;
+    const values = valuesOf(kind, node);
+    for (const control of CONTROLS[kind]) {
+      controls.add(control);
+      const set = seen.get(control) ?? new Set();
+      set.add(values[control]);
+      seen.set(control, set);
+    }
+    if (widths.length === 0 && CONTROLS[kind].includes("width")) widths = widthsOf(kind, node);
+  }
+  if (controls.size === 0) return null;
+  const values: Partial<StyleValues> = {};
+  for (const [control, set] of seen) {
+    if (set.size === 1) Object.assign(values, { [control]: [...set][0] });
+  }
+  return { controls, values, widths };
+}
+
+/** A frame keeps its fill as is; a shape's fill also says whether it is filled. */
+function fillData(kind: Kind, fill: FillValue): Record<string, unknown> {
+  if (kind === "frame") return { fill };
+  return fill === "none" ? { filled: false } : { filled: true, fill };
+}
+
+function textData(change: Partial<StyleValues>): Record<string, unknown> {
+  const data: Record<string, unknown> = {};
+  if (change.fontSize !== undefined) data.fontSize = change.fontSize;
+  if (change.fontWeight !== undefined) data.fontWeight = change.fontWeight;
+  return data;
+}
+
+function dataFor(
+  kind: Kind,
+  node: StyleNode,
+  change: Partial<StyleValues>,
+): Record<string, unknown> {
+  const data: Record<string, unknown> = {};
+  if (change.stroke) data[kind === "frame" ? "stroke" : "color"] = change.stroke;
+  if (change.fill !== undefined && (kind === "shape" || kind === "frame")) {
+    Object.assign(data, fillData(kind, change.fill));
+  }
+  if (change.width !== undefined && kind !== "text") {
+    data[widthKey(kind)] = widthsOf(kind, node)[change.width];
+  }
+  if (kind === "text") Object.assign(data, textData(change));
+  return data;
+}
+
+/** One patch per card the change applies to. All of them are one undo step when dispatched together. */
+export function styleOps(
+  nodes: readonly StyleNode[],
+  change: Partial<StyleValues>,
+  frameType: string,
+): CanvasOp[] {
+  const ops: CanvasOp[] = [];
+  for (const node of nodes) {
+    const kind = kindOf(node, frameType);
+    if (!kind) continue;
+    const data = dataFor(kind, node, change);
+    if (Object.keys(data).length > 0) ops.push({ kind: "patchNode", nodeId: node.id, data });
+  }
+  return ops;
+}

package/src/canvas/editor/text-field-context.ts

@@ -0,0 +1,41 @@
+// The text field a host hands the pen. A plain textarea keeps the canvas MIT-clean; a host that
+// formats text provides a component, set once with the page skin.
+
+import { getContext, setContext, type Component } from "svelte";
+
+/** What the pen asks of a text field. A host component takes these and may take more. */
+export type TextFieldProps = {
+  value: string;
+  placeholder?: string;
+  ariaLabel?: string;
+  class?: string;
+  style?: string;
+  /** `live` is true while typing, so a run of keystrokes folds into one undo step. */
+  onCommit: (next: string, live: boolean) => void;
+  /** A click on the text opens it. A pen text that opens on double-click turns this off. */
+  clickToEdit?: boolean;
+  /** The field closed: focus left it or Escape. */
+  onExit?: () => void;
+  /** Shown, never opened: a locked card. */
+  readonly?: boolean;
+};
+
+/** What the pen calls on a field it holds a reference to. */
+export type TextFieldHandle = {
+  edit: (point?: { x: number; y: number }) => void | Promise<void>;
+};
+
+export type TextFieldComponent = Component<TextFieldProps, TextFieldHandle>;
+
+/** For a host that mounts a pen node with `mount(..., { context })`, as a test does. */
+export const TEXT_FIELD_KEY = Symbol("canvas-text-field");
+
+/** Call during component init. */
+export function setTextField(component: TextFieldComponent): void {
+  setContext(TEXT_FIELD_KEY, component);
+}
+
+/** The host's field, or null: the pen then draws its own textarea. */
+export function useTextField(): TextFieldComponent | null {
+  return getContext<TextFieldComponent | undefined>(TEXT_FIELD_KEY) ?? null;
+}

package/src/canvas/editor/z-order.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vite-plus/test";
+import type { Node } from "@xyflow/svelte";
+import { reorderStack, topLayer } from "./z-order.js";
+
+function card(id: string, extra: Partial<Node> = {}): Node {
+  return { id, type: "note", position: { x: 0, y: 0 }, data: {}, ...extra };
+}
+
+/** Ids bottom to top, as the canvas paints them. */
+function stack(nodes: Node[], parentId?: string): string[] {
+  return nodes
+    .map((node, index) => ({ node, index }))
+    .filter(({ node }) => (node.parentId ?? "") === (parentId ?? ""))
+    .sort((a, b) => (a.node.zIndex ?? 0) - (b.node.zIndex ?? 0) || a.index - b.index)
+    .map(({ node }) => node.id);
+}
+
+describe("reorderStack", () => {
+  const board = [card("a"), card("b"), card("c"), card("d")];
+
+  it("brings one card to the front and sends one to the back", () => {
+    expect(stack(reorderStack(board, new Set(["a"]), "front") ?? board)).toEqual([
+      "b",
+      "c",
+      "d",
+      "a",
+    ]);
+    expect(stack(reorderStack(board, new Set(["d"]), "back") ?? board)).toEqual([
+      "d",
+      "a",
+      "b",
+      "c",
+    ]);
+  });
+
+  it("moves one step and keeps picked cards in their order", () => {
+    const up = reorderStack(board, new Set(["a", "c"]), "forward") ?? board;
+    expect(stack(up)).toEqual(["b", "a", "d", "c"]);
+    const down = reorderStack(board, new Set(["b", "d"]), "backward") ?? board;
+    expect(stack(down)).toEqual(["b", "a", "d", "c"]);
+  });
+
+  it("returns null when nothing would change", () => {
+    expect(reorderStack(board, new Set(["d"]), "front")).toBeNull();
+    expect(reorderStack(board, new Set(["a"]), "back")).toBeNull();
+    expect(reorderStack(board, new Set(["d"]), "forward")).toBeNull();
+  });
+
+  it("writes only the layers that changed", () => {
+    const next = reorderStack(board, new Set(["a"]), "front") ?? board;
+    expect(next.find((n) => n.id === "b")?.zIndex).toBeUndefined();
+    expect(next.find((n) => n.id === "a")?.zIndex).toBe(3);
+  });
+
+  it("stacks children inside their own group and leaves ink out", () => {
+    const nodes = [
+      card("g", { type: "wrapper" }),
+      card("x", { parentId: "g" }),
+      card("y", { parentId: "g" }),
+      card("ink", { type: "stroke" }),
+    ];
+    const next = reorderStack(nodes, new Set(["x"]), "front") ?? nodes;
+    expect(stack(next, "g")).toEqual(["y", "x"]);
+    expect(next.find((n) => n.id === "g")?.zIndex).toBeUndefined();
+    expect(reorderStack(nodes, new Set(["ink"]), "front")).toBeNull();
+  });
+});
+
+describe("topLayer", () => {
+  it("is undefined until a card has been raised, then one above the top", () => {
+    expect(topLayer([card("a"), card("b")])).toBeUndefined();
+    expect(topLayer([card("a", { zIndex: 4 }), card("b")])).toBe(5);
+    expect(topLayer([card("g"), card("x", { parentId: "g", zIndex: 9 })])).toBeUndefined();
+  });
+});

package/src/canvas/editor/z-order.ts

@@ -0,0 +1,87 @@
+// Stacking order for cards: pure functions over nodes. A card's place is its `zIndex` (missing
+// is 0), and array order breaks a tie, as xyflow paints equal layers.
+
+import type { Node } from "@xyflow/svelte";
+
+export type StackMove = "forward" | "backward" | "front" | "back";
+
+/** Ink is an annotation layer pinned above every card by pen.css, so it has no place in a stack. */
+export const INK_TYPES: ReadonlySet<string> = new Set(["stroke", "text", "shape"]);
+
+type Slot = { node: Node; index: number };
+
+function layerOf(node: Node): number {
+  return typeof node.zIndex === "number" ? node.zIndex : 0;
+}
+
+/** Cards stack among their siblings: a child never leaves its group's own stack. */
+function stacks(nodes: readonly Node[]): Map<string, Slot[]> {
+  const byParent = new Map<string, Slot[]>();
+  nodes.forEach((node, index) => {
+    if (INK_TYPES.has(node.type ?? "")) return;
+    const key = node.parentId ?? "";
+    const stack = byParent.get(key) ?? [];
+    stack.push({ node, index });
+    byParent.set(key, stack);
+  });
+  for (const stack of byParent.values()) {
+    stack.sort((a, b) => layerOf(a.node) - layerOf(b.node) || a.index - b.index);
+  }
+  return byParent;
+}
+
+/** One stack after a move, bottom first. Selected cards keep their order among themselves. */
+function moved(stack: Slot[], picked: ReadonlySet<string>, move: StackMove): Slot[] {
+  const isPicked = (slot: Slot) => picked.has(slot.node.id);
+  if (move === "front") return [...stack.filter((s) => !isPicked(s)), ...stack.filter(isPicked)];
+  if (move === "back") return [...stack.filter(isPicked), ...stack.filter((s) => !isPicked(s))];
+  const next = [...stack];
+  // One step: each picked card trades places with the unpicked card beside it.
+  if (move === "forward") {
+    for (let i = next.length - 2; i >= 0; i--) {
+      if (isPicked(next[i]) && !isPicked(next[i + 1]))
+        [next[i], next[i + 1]] = [next[i + 1], next[i]];
+    }
+  } else {
+    for (let i = 1; i < next.length; i++) {
+      if (isPicked(next[i]) && !isPicked(next[i - 1]))
+        [next[i], next[i - 1]] = [next[i - 1], next[i]];
+    }
+  }
+  return next;
+}
+
+/**
+ * The board after a stacking move, or null when nothing changes. Only a stack holding a
+ * picked card is touched, and only cards whose layer changed are rewritten.
+ */
+export function reorderStack(
+  nodes: readonly Node[],
+  picked: ReadonlySet<string>,
+  move: StackMove,
+): Node[] | null {
+  const layers = new Map<string, number>();
+  for (const stack of stacks(nodes).values()) {
+    if (!stack.some((slot) => picked.has(slot.node.id))) continue;
+    const next = moved(stack, picked, move);
+    if (next.every((slot, i) => slot === stack[i])) continue;
+    next.forEach((slot, rank) => {
+      if (layerOf(slot.node) !== rank) layers.set(slot.node.id, rank);
+    });
+  }
+  if (layers.size === 0) return null;
+  return nodes.map((node) => {
+    const layer = layers.get(node.id);
+    return layer === undefined ? node : { ...node, zIndex: layer };
+  });
+}
+
+/** The layer a new card needs to land on top of its siblings, or undefined while no card has been raised. */
+export function topLayer(nodes: readonly Node[], parentId?: string): number | undefined {
+  let top = 0;
+  for (const node of nodes) {
+    if (INK_TYPES.has(node.type ?? "") || (node.parentId ?? "") !== (parentId ?? "")) continue;
+    top = Math.max(top, layerOf(node));
+  }
+  return top > 0 ? top + 1 : undefined;
+}

package/src/canvas/headless/alignment.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vite-plus/test";
+import { alignNodesHorizontally, alignNodesVertically } from "./alignment.js";
+import { makeNode } from "../test-utils.js";
+
+describe("alignNodesHorizontally", () => {
+  it("sets all nodes to the topmost Y", () => {
+    const nodes = [
+      makeNode({ id: "a", position: { x: 0, y: 100 } }),
+      makeNode({ id: "b", position: { x: 50, y: 50 } }),
+      makeNode({ id: "c", position: { x: 100, y: 200 } }),
+    ];
+    alignNodesHorizontally(nodes);
+    expect(nodes.map((n) => n.position.y)).toEqual([50, 50, 50]);
+  });
+
+  it("preserves X positions", () => {
+    const nodes = [
+      makeNode({ id: "a", position: { x: 10, y: 100 } }),
+      makeNode({ id: "b", position: { x: 200, y: 50 } }),
+    ];
+    alignNodesHorizontally(nodes);
+    expect(nodes[0].position.x).toBe(10);
+    expect(nodes[1].position.x).toBe(200);
+  });
+
+  it("does nothing for fewer than 2 nodes", () => {
+    const single = [makeNode({ id: "a", position: { x: 5, y: 99 } })];
+    alignNodesHorizontally(single);
+    expect(single[0].position.y).toBe(99);
+  });
+});
+
+describe("alignNodesVertically", () => {
+  it("sets all nodes to the leftmost X", () => {
+    const nodes = [
+      makeNode({ id: "a", position: { x: 100, y: 0 } }),
+      makeNode({ id: "b", position: { x: 50, y: 50 } }),
+      makeNode({ id: "c", position: { x: 200, y: 100 } }),
+    ];
+    alignNodesVertically(nodes);
+    expect(nodes.map((n) => n.position.x)).toEqual([50, 50, 50]);
+  });
+
+  it("preserves Y positions", () => {
+    const nodes = [
+      makeNode({ id: "a", position: { x: 100, y: 10 } }),
+      makeNode({ id: "b", position: { x: 50, y: 200 } }),
+    ];
+    alignNodesVertically(nodes);
+    expect(nodes[0].position.y).toBe(10);
+    expect(nodes[1].position.y).toBe(200);
+  });
+
+  it("does nothing for fewer than 2 nodes", () => {
+    const single = [makeNode({ id: "a", position: { x: 99, y: 5 } })];
+    alignNodesVertically(single);
+    expect(single[0].position.x).toBe(99);
+  });
+});

package/src/canvas/headless/alignment.ts

@@ -0,0 +1,23 @@
+import type { CanvasNode } from "../types.js";
+
+/**
+ * Align nodes horizontally (same row): set all to the topmost Y.
+ */
+export function alignNodesHorizontally(nodes: CanvasNode[]): void {
+  if (nodes.length < 2) return;
+  const targetY = Math.min(...nodes.map((n) => n.position.y));
+  for (const node of nodes) {
+    node.position = { ...node.position, y: targetY };
+  }
+}
+
+/**
+ * Align nodes vertically (same column): set all to the leftmost X.
+ */
+export function alignNodesVertically(nodes: CanvasNode[]): void {
+  if (nodes.length < 2) return;
+  const targetX = Math.min(...nodes.map((n) => n.position.x));
+  for (const node of nodes) {
+    node.position = { ...node.position, x: targetX };
+  }
+}