@heyramzi/ui 1.54.1 → 2.0.0

package/src/canvas/headless/edge-anchors.ts

@@ -0,0 +1,143 @@
+/** Which side of each box an edge leaves from and arrives at. Sides are xyflow `Position` values. */
+
+export type Side = "top" | "right" | "bottom" | "left";
+export type Rect = { x: number; y: number; width: number; height: number };
+export type Anchor = { x: number; y: number; side: Side };
+
+function center(rect: Rect) {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
+
+function anchorOn(rect: Rect, side: Side): Anchor {
+  const c = center(rect);
+  switch (side) {
+    case "top":
+      return { x: c.x, y: rect.y, side };
+    case "bottom":
+      return { x: c.x, y: rect.y + rect.height, side };
+    case "left":
+      return { x: rect.x, y: c.y, side };
+    case "right":
+      return { x: rect.x + rect.width, y: c.y, side };
+  }
+}
+
+/** The side a stored handle id names, or null for an id that isn't one of the four. */
+export function sideFromHandle(id: string | null | undefined): Side | null {
+  return id === "top" || id === "right" || id === "bottom" || id === "left" ? id : null;
+}
+
+/** The side of `rect` that looks at `point`: the wider pull, scaled by the box's own shape, wins. */
+function sideFacing(rect: Rect, point: { x: number; y: number }): Side {
+  const c = center(rect);
+  const dx = (point.x - c.x) / rect.width;
+  const dy = (point.y - c.y) / rect.height;
+  if (Math.abs(dx) > Math.abs(dy)) return dx >= 0 ? "right" : "left";
+  return dy >= 0 ? "bottom" : "top";
+}
+
+type Pins = { source?: Side | null; target?: Side | null };
+
+/** The anchors when the author pinned an end, or null for a link with no pin. */
+function pinnedAnchors(
+  source: Rect,
+  target: Rect,
+  pins: Pins,
+): { source: Anchor; target: Anchor } | null {
+  if (pins.source && pins.target) {
+    return { source: anchorOn(source, pins.source), target: anchorOn(target, pins.target) };
+  }
+  if (pins.source) {
+    const from = anchorOn(source, pins.source);
+    return { source: from, target: anchorOn(target, sideFacing(target, from)) };
+  }
+  if (pins.target) {
+    const to = anchorOn(target, pins.target);
+    return { source: anchorOn(source, sideFacing(source, to)), target: to };
+  }
+  return null;
+}
+
+/** The sides that face each other. A pin is the dot the author dragged from: it wins, and the free end faces it. */
+export function bestAnchors(
+  source: Rect,
+  target: Rect,
+  pins: Pins = {},
+): { source: Anchor; target: Anchor } {
+  const pinned = pinnedAnchors(source, target, pins);
+  if (pinned) return pinned;
+
+  const gapX = Math.max(target.x - (source.x + source.width), source.x - (target.x + target.width));
+  const gapY = Math.max(
+    target.y - (source.y + source.height),
+    source.y - (target.y + target.height),
+  );
+
+  if (gapX <= 0 && gapY <= 0) {
+    const side = detourSide(source, target);
+    return { source: anchorOn(source, side), target: anchorOn(target, side) };
+  }
+
+  if (gapX > gapY) {
+    const targetIsRight = center(target).x >= center(source).x;
+    return {
+      source: anchorOn(source, targetIsRight ? "right" : "left"),
+      target: anchorOn(target, targetIsRight ? "left" : "right"),
+    };
+  }
+
+  const targetIsBelow = center(target).y >= center(source).y;
+  return {
+    source: anchorOn(source, targetIsBelow ? "bottom" : "top"),
+    target: anchorOn(target, targetIsBelow ? "top" : "bottom"),
+  };
+}
+
+// Which side an overlapping pair travels on: the wider overhang wins, ties go right.
+function detourSide(source: Rect, target: Rect): "right" | "left" {
+  const sL = source.x;
+  const sR = source.x + source.width;
+  const tL = target.x;
+  const tR = target.x + target.width;
+  if (sL <= tL && sR >= tR) {
+    return sR - tR >= tL - sL ? "right" : "left";
+  }
+  if (tL <= sL && tR >= sR) {
+    return tR - sR >= sL - tL ? "right" : "left";
+  }
+  return "right";
+}
+
+/** The x (left, right) or y (top, bottom) a same-side path runs along: one margin past the further box edge. */
+export function sideDetour(anchors: { source: Anchor; target: Anchor }, margin = 40): number {
+  const { source, target } = anchors;
+  switch (source.side) {
+    case "left":
+      return Math.min(source.x, target.x) - margin;
+    case "right":
+      return Math.max(source.x, target.x) + margin;
+    case "top":
+      return Math.min(source.y, target.y) - margin;
+    case "bottom":
+      return Math.max(source.y, target.y) + margin;
+  }
+}
+
+/** The outline an arrow binds to: a box, or the ellipse drawn round it at `rx`, `ry`. */
+export type Outline = { cx: number; cy: number; rx: number; ry: number; round: boolean };
+
+/** Where the line from this outline's centre toward `toward` crosses the outline, `gap` further out. */
+export function outlinePoint(o: Outline, toward: { x: number; y: number }, gap = 0) {
+  const dx = toward.x - o.cx;
+  const dy = toward.y - o.cy;
+  const len = Math.hypot(dx, dy);
+  if (len === 0) return { x: o.cx, y: o.cy };
+  const t = o.round
+    ? 1 / Math.hypot(dx / o.rx, dy / o.ry)
+    : Math.min(
+        dx === 0 ? Infinity : o.rx / Math.abs(dx),
+        dy === 0 ? Infinity : o.ry / Math.abs(dy),
+      );
+  const reach = t * len + gap;
+  return { x: o.cx + (dx / len) * reach, y: o.cy + (dy / len) * reach };
+}

package/src/canvas/headless/edge-memo.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from "vite-plus/test";
+import { boxKey, createMemo, parseBox } from "./edge-memo.js";
+
+describe("boxKey", () => {
+  it("round-trips a box, fractions and negatives included", () => {
+    const box = { x: -12.5, y: 40, width: 220, height: 96.25 };
+    expect(parseBox(boxKey(box))).toEqual(box);
+  });
+
+  it("reads a card with no size as no box", () => {
+    expect(boxKey(null)).toBe("");
+    expect(parseBox("")).toBeNull();
+  });
+
+  it("is equal for equal boxes and different when any side moves", () => {
+    const base = { x: 1, y: 2, width: 3, height: 4 };
+    expect(boxKey({ ...base })).toBe(boxKey(base));
+    for (const key of ["x", "y", "width", "height"] as const) {
+      expect(boxKey({ ...base, [key]: base[key] + 1 })).not.toBe(boxKey(base));
+    }
+  });
+});
+
+describe("createMemo", () => {
+  it("computes once per key", () => {
+    const memo = createMemo<number>(10);
+    const compute = vi.fn(() => 7);
+    expect(memo("a", compute)).toBe(7);
+    expect(memo("a", compute)).toBe(7);
+    expect(compute).toHaveBeenCalledTimes(1);
+  });
+
+  it("returns the very same object on a hit, so a derived reading it stays equal", () => {
+    const memo = createMemo<{ d: string }>(10);
+    const first = memo("a", () => ({ d: "M0 0" }));
+    expect(memo("a", () => ({ d: "other" }))).toBe(first);
+  });
+
+  it("drops the least recently read key past the limit", () => {
+    const memo = createMemo<number>(2);
+    memo("a", () => 1);
+    memo("b", () => 2);
+    memo("a", () => 99);
+    memo("c", () => 3);
+    const again = vi.fn(() => 0);
+    memo("a", again);
+    memo("b", again);
+    expect(again).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps a falsy result", () => {
+    const memo = createMemo<number>(2);
+    const compute = vi.fn(() => 0);
+    memo("zero", compute);
+    memo("zero", compute);
+    expect(compute).toHaveBeenCalledTimes(1);
+  });
+});

package/src/canvas/headless/edge-memo.ts

@@ -0,0 +1,32 @@
+// What an arrow needs to know whether to redraw. A box reduces to a string, so a derived
+// reading it stays equal when only another card moved.
+
+import type { Rect } from "./edge-anchors.js";
+
+/** A box as `x,y,width,height`, or "" for a card with no size yet. */
+export function boxKey(rect: Rect | null | undefined): string {
+  return rect ? `${rect.x},${rect.y},${rect.width},${rect.height}` : "";
+}
+
+export function parseBox(key: string): Rect | null {
+  if (!key) return null;
+  const [x, y, width, height] = key.split(",").map(Number);
+  return { x, y, width, height };
+}
+
+/** Remembers up to `limit` results by key, dropping the least recently read first. */
+export function createMemo<T>(limit: number) {
+  const seen = new Map<string, T>();
+  return (key: string, compute: () => T): T => {
+    const hit = seen.get(key);
+    if (hit !== undefined) {
+      seen.delete(key);
+      seen.set(key, hit);
+      return hit;
+    }
+    const value = compute();
+    seen.set(key, value);
+    if (seen.size > limit) seen.delete(seen.keys().next().value as string);
+    return value;
+  };
+}

package/src/canvas/headless/edge-serialization.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vite-plus/test";
+import { serializeFlowEdge } from "./edge-serialization.js";
+import type { Edge } from "@xyflow/svelte";
+
+function makeFlowEdge(overrides: Partial<Edge> = {}): Edge {
+  return {
+    id: overrides.id ?? "e1",
+    source: overrides.source ?? "a",
+    target: overrides.target ?? "b",
+    ...overrides,
+  };
+}
+
+describe("serializeFlowEdge", () => {
+  it("serializes minimal edge with id, source, target", () => {
+    const result = serializeFlowEdge(makeFlowEdge());
+    expect(result).toEqual({ id: "e1", source: "a", target: "b" });
+  });
+
+  it("includes type when present", () => {
+    const result = serializeFlowEdge(makeFlowEdge({ type: "smoothstep" }));
+    expect(result.type).toBe("smoothstep");
+  });
+
+  it("includes label when present", () => {
+    const result = serializeFlowEdge(makeFlowEdge({ label: "connects to" }));
+    expect(result.label).toBe("connects to");
+  });
+
+  it("includes animated when present", () => {
+    const result = serializeFlowEdge(makeFlowEdge({ animated: true }));
+    expect(result.animated).toBe(true);
+  });
+
+  it("includes sourceHandle and targetHandle when present", () => {
+    const result = serializeFlowEdge(makeFlowEdge({ sourceHandle: "out-1", targetHandle: "in-1" }));
+    expect(result.sourceHandle).toBe("out-1");
+    expect(result.targetHandle).toBe("in-1");
+  });
+
+  it("includes data when present", () => {
+    const result = serializeFlowEdge(makeFlowEdge({ data: { custom: true } }));
+    expect(result.data).toEqual({ custom: true });
+  });
+
+  it("omits falsy optional fields", () => {
+    const result = serializeFlowEdge(
+      makeFlowEdge({ type: undefined, label: undefined, animated: undefined }),
+    );
+    expect(result).toEqual({ id: "e1", source: "a", target: "b" });
+    expect("type" in result).toBe(false);
+    expect("label" in result).toBe(false);
+    expect("animated" in result).toBe(false);
+  });
+});

package/src/canvas/headless/edge-serialization.ts

@@ -0,0 +1,32 @@
+import type { Edge } from "@xyflow/svelte";
+import type { CanvasEdge } from "../types.js";
+
+export function serializeFlowEdge(edge: Edge): CanvasEdge {
+  return {
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    ...(edge.type && { type: edge.type }),
+    ...(edge.label && { label: edge.label }),
+    ...(edge.animated && { animated: edge.animated }),
+    ...(edge.sourceHandle && {
+      sourceHandle: edge.sourceHandle,
+    }),
+    ...(edge.targetHandle && {
+      targetHandle: edge.targetHandle,
+    }),
+    ...(edge.style && {
+      // WHY: xyflow types `Edge["style"]` as a CSS-properties object (or a
+      // string, in older shapes); the persisted `CanvasEdge` just wants the
+      // properties bag. Narrowed once here.
+      style: edge.style as unknown as Record<string, unknown>,
+    }),
+    ...(edge.data && {
+      data: edge.data,
+    }),
+  };
+}
+
+export function serializeFlowEdges(edges: Edge[]): CanvasEdge[] {
+  return edges.map(serializeFlowEdge);
+}

package/src/canvas/headless/figure-geometry.ts

@@ -0,0 +1,293 @@
+// A drawn figure as numbers: its parsed SVG tree and the box each element takes up.
+
+/** One SVG element. Text between tags is a plain string child. */
+export type FigureEl = { tag: string; attrs: Record<string, string>; children: FigureChild[] };
+export type FigureChild = FigureEl | string;
+
+export type Box = { x1: number; y1: number; x2: number; y2: number };
+export type Pt = { x: number; y: number };
+
+const FALLBACK_FONT = 16;
+const ORIGIN: Pt = { x: 0, y: 0 };
+
+export function isEl(child: FigureChild): child is FigureEl {
+  return typeof child !== "string";
+}
+
+export function num(value: string | undefined, fallback = 0): number {
+  const parsed = Number.parseFloat(value ?? "");
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+/** A paint that draws: set, and not `none`. */
+export function solid(value: string | undefined): boolean {
+  return Boolean(value) && value !== "none";
+}
+
+export function plus(a: Pt, b: Pt): Pt {
+  return { x: a.x + b.x, y: a.y + b.y };
+}
+
+/** `translate(a b)` and nothing else. Any other transform makes the geometry unreadable: null. */
+export function translateOf(el: FigureEl): Pt | null {
+  const raw = el.attrs.transform?.trim();
+  if (!raw) return { x: 0, y: 0 };
+  const match = raw.match(/^translate\(\s*(-?[\d.]+)[\s,]*(-?[\d.]+)?\s*\)$/);
+  return match ? { x: Number(match[1]), y: Number(match[2] ?? 0) } : null;
+}
+
+export function union(a: Box | null, b: Box | null): Box | null {
+  if (!a) return b;
+  if (!b) return a;
+  return {
+    x1: Math.min(a.x1, b.x1),
+    y1: Math.min(a.y1, b.y1),
+    x2: Math.max(a.x2, b.x2),
+    y2: Math.max(a.y2, b.y2),
+  };
+}
+
+export function boxOf(points: Pt[]): Box | null {
+  if (points.length === 0) return null;
+  return {
+    x1: Math.min(...points.map((p) => p.x)),
+    y1: Math.min(...points.map((p) => p.y)),
+    x2: Math.max(...points.map((p) => p.x)),
+    y2: Math.max(...points.map((p) => p.y)),
+  };
+}
+
+export function within(inner: Box, outer: Box, tolerance = 1): boolean {
+  return (
+    inner.x1 >= outer.x1 - tolerance &&
+    inner.y1 >= outer.y1 - tolerance &&
+    inner.x2 <= outer.x2 + tolerance &&
+    inner.y2 <= outer.y2 + tolerance
+  );
+}
+
+export function contains(box: Box, point: Pt, tolerance: number): boolean {
+  return (
+    point.x >= box.x1 - tolerance &&
+    point.x <= box.x2 + tolerance &&
+    point.y >= box.y1 - tolerance &&
+    point.y <= box.y2 + tolerance
+  );
+}
+
+export const areaOf = (b: Box) => (b.x2 - b.x1) * (b.y2 - b.y1);
+export const centerOf = (b: Box): Pt => ({ x: (b.x1 + b.x2) / 2, y: (b.y1 + b.y2) / 2 });
+
+export function distanceToBox(box: Box, p: Pt): number {
+  return Math.hypot(
+    Math.max(box.x1 - p.x, 0, p.x - box.x2),
+    Math.max(box.y1 - p.y, 0, p.y - box.y2),
+  );
+}
+
+export function distanceToSegment(a: Pt, b: Pt, p: Pt): number {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const len = dx * dx + dy * dy;
+  const t = len === 0 ? 0 : Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / len));
+  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+
+// Numbers per path command; the last two (or the one for H and V) are the end point.
+const PATH_ARITY: Record<string, number> = {
+  M: 2,
+  L: 2,
+  H: 1,
+  V: 1,
+  C: 6,
+  S: 4,
+  Q: 4,
+  T: 2,
+  A: 7,
+  Z: 0,
+};
+
+/** Where one command ends, given its arguments and where the pen was. */
+function pathEnd(upper: string, rel: boolean, args: number[], cur: Pt): Pt {
+  const at = (from: number, value: number) => (rel ? from + value : value);
+  if (upper === "H") return { x: at(cur.x, args[0]), y: cur.y };
+  if (upper === "V") return { x: cur.x, y: at(cur.y, args[0]) };
+  return { x: at(cur.x, args[args.length - 2]), y: at(cur.y, args[args.length - 1]) };
+}
+
+/** The vertices a path passes through. Curve control points are skipped: the ends bound it well enough. */
+export function pathPoints(d: string): Pt[] {
+  const out: Pt[] = [];
+  let cur: Pt = { x: 0, y: 0 };
+  let start: Pt = { x: 0, y: 0 };
+  for (const part of d.matchAll(/([a-zA-Z])([^a-zA-Z]*)/g)) {
+    const cmd = part[1];
+    const upper = cmd.toUpperCase();
+    const size = PATH_ARITY[upper];
+    if (size === undefined) continue;
+    const nums = (part[2].match(/-?(?:\d+\.?\d*|\.\d+)(?:e-?\d+)?/gi) ?? []).map(Number);
+    if (upper === "Z") {
+      cur = start;
+      out.push(cur);
+      continue;
+    }
+    for (let i = 0; i + size <= nums.length; i += size) {
+      cur = pathEnd(upper, cmd !== upper, nums.slice(i, i + size), cur);
+      if (upper === "M" && i === 0) start = cur;
+      out.push(cur);
+    }
+  }
+  return out;
+}
+
+export function pointList(raw: string | undefined): Pt[] {
+  const nums = (raw ?? "").match(/-?(?:\d+\.?\d*|\.\d+)/g)?.map(Number) ?? [];
+  const out: Pt[] = [];
+  for (let i = 0; i + 1 < nums.length; i += 2) out.push({ x: nums[i], y: nums[i + 1] });
+  return out;
+}
+
+export function textLines(el: FigureEl): string[] {
+  const lines: string[] = [];
+  let line = "";
+  const flush = () => {
+    const clean = line.replace(/\s+/g, " ").trim();
+    if (clean) lines.push(clean);
+    line = "";
+  };
+  for (const child of el.children) {
+    if (typeof child === "string") line += child;
+    else if (child.tag === "tspan") {
+      if ("dy" in child.attrs || "y" in child.attrs) flush();
+      line += child.children.map((c) => (typeof c === "string" ? c : "")).join("");
+    }
+  }
+  flush();
+  return lines;
+}
+
+export function isBold(el: FigureEl): boolean {
+  const weight = el.attrs["font-weight"];
+  return num(weight) >= 600 || weight === "bold";
+}
+
+export function fontSize(el: FigureEl): number {
+  return num(el.attrs["font-size"], FALLBACK_FONT);
+}
+
+function rectBox({ attrs: a }: FigureEl): Box {
+  return { x1: num(a.x), y1: num(a.y), x2: num(a.x) + num(a.width), y2: num(a.y) + num(a.height) };
+}
+
+function ellipseBox({ attrs: a }: FigureEl): Box {
+  const rx = num(a.rx, num(a.r));
+  const ry = num(a.ry, num(a.r));
+  return { x1: num(a.cx) - rx, y1: num(a.cy) - ry, x2: num(a.cx) + rx, y2: num(a.cy) + ry };
+}
+
+function lineBox({ attrs: a }: FigureEl): Box | null {
+  return boxOf([
+    { x: num(a.x1), y: num(a.y1) },
+    { x: num(a.x2), y: num(a.y2) },
+  ]);
+}
+
+function polyBox({ attrs: a }: FigureEl): Box | null {
+  return boxOf(pointList(a.points));
+}
+
+function pathBox({ attrs: a }: FigureEl): Box | null {
+  return boxOf(pathPoints(a.d ?? ""));
+}
+
+function textLeft(x: number, width: number, anchor: string | undefined): number {
+  if (anchor === "middle") return x - width / 2;
+  return anchor === "end" ? x - width : x;
+}
+
+function textBox(el: FigureEl): Box {
+  const lines = textLines(el);
+  const size = fontSize(el);
+  const width = Math.max(0, ...lines.map((l) => l.length)) * size * (isBold(el) ? 0.6 : 0.55);
+  const left = textLeft(num(el.attrs.x), width, el.attrs["text-anchor"]);
+  const y = num(el.attrs.y);
+  return {
+    x1: left,
+    y1: y - size * 0.8,
+    x2: left + width,
+    y2: y + size * 0.2 + Math.max(0, lines.length - 1) * size * 1.2,
+  };
+}
+
+function groupBox(el: FigureEl): Box | null {
+  let box: Box | null = null;
+  for (const child of el.children) {
+    if (isEl(child)) box = union(box, boxOfEl(child, ORIGIN));
+  }
+  return box;
+}
+
+const MEASURE = new Map<string, (el: FigureEl) => Box | null>([
+  ["rect", rectBox],
+  ["circle", ellipseBox],
+  ["ellipse", ellipseBox],
+  ["line", lineBox],
+  ["polyline", polyBox],
+  ["polygon", polyBox],
+  ["path", pathBox],
+  ["text", textBox],
+  ["g", groupBox],
+  ["svg", groupBox],
+]);
+
+/** The ink a shape takes, in the figure's own units. Text is estimated: no DOM here to measure it. */
+export function boxOfEl(el: FigureEl, offset: Pt): Box | null {
+  const box = MEASURE.get(el.tag)?.(el);
+  if (!box) return null;
+  const at = plus(offset, translateOf(el) ?? ORIGIN);
+  return { x1: box.x1 + at.x, y1: box.y1 + at.y, x2: box.x2 + at.x, y2: box.y2 + at.y };
+}
+
+export function visible(el: FigureEl): boolean {
+  const fill = el.attrs.fill;
+  const stroke = el.attrs.stroke;
+  return (fill !== undefined && fill !== "none") || (stroke !== undefined && stroke !== "none");
+}
+
+export function viewBoxOf(root: FigureEl): Box | null {
+  const raw = root.attrs.viewBox ?? root.attrs.viewbox;
+  if (raw) {
+    const [x, y, w, h] = raw
+      .trim()
+      .split(/[\s,]+/)
+      .map(Number);
+    if (w > 0 && h > 0) return { x1: x, y1: y, x2: x + w, y2: y + h };
+  }
+  const w = num(root.attrs.width);
+  const h = num(root.attrs.height);
+  return w > 0 && h > 0 ? { x1: 0, y1: 0, x2: w, y2: h } : null;
+}
+
+export function hasText(el: FigureEl): boolean {
+  return el.tag === "text" && textLines(el).length > 0;
+}
+
+/** Where a line, polyline or path starts and stops, on the figure. Null for one with a transform we can't read. */
+export function strokeEnds(el: FigureEl, offset: Pt): [Pt, Pt] | null {
+  const shift = translateOf(el);
+  if (!shift) return null;
+  const a = el.attrs;
+  let pts: Pt[] = [];
+  if (el.tag === "line") {
+    pts = [
+      { x: num(a.x1), y: num(a.y1) },
+      { x: num(a.x2), y: num(a.y2) },
+    ];
+  } else if (el.tag === "polyline") pts = pointList(a.points);
+  else if (el.tag === "path") pts = pathPoints(a.d ?? "");
+  if (pts.length < 2) return null;
+  const at = plus(offset, shift);
+  const first = pts[0];
+  const last = pts[pts.length - 1];
+  return [plus(first, at), plus(last, at)];
+}