@heyramzi/ui 1.54.2 → 2.0.0

package/src/canvas/edges/bend-handle.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { useStore } from "@xyflow/svelte";
+
+// The grab dot on a selected elbow, one size on screen. Only the edge showing it reads the zoom; a root value restyles every card per frame.
+
+// =========================
+// CONSTANTS
+// =========================
+const MIN_ZOOM = 0.05;
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	/** The way the run moves: x slides it sideways, y up and down. */
+	axis: "x" | "y";
+	title: string;
+	onpointerdown: (event: PointerEvent) => void;
+	ondblclick: () => void;
+}
+
+// =========================
+// PROPS
+// =========================
+let { axis, title, onpointerdown, ondblclick }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+const store = useStore();
+
+// =========================
+// DERIVED
+// =========================
+let unzoom = $derived(1 / Math.max(store.viewport.zoom, MIN_ZOOM));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<button
+	type="button"
+	class="cv-bend-handle"
+	class:cv-bend-x={axis === "x"}
+	data-edge-bend
+	{title}
+	aria-label={title}
+	style:scale={unzoom}
+	{onpointerdown}
+	{ondblclick}
+></button>
+
+<!-- =========================== -->
+<!-- STYLES -->
+<!-- =========================== -->
+<style>
+.cv-bend-handle {
+	display: block;
+	box-sizing: border-box;
+	width: 12px;
+	height: 12px;
+	padding: 0;
+	border: 2px solid var(--cv-chrome-surface, var(--background, #fff));
+	border-radius: 9999px;
+	background: var(--cv-chrome-ring, var(--ring, #4a4ad8));
+	cursor: row-resize;
+	touch-action: none;
+}
+
+.cv-bend-x {
+	cursor: col-resize;
+}
+</style>

package/src/canvas/edges/edge-gradient.svelte

@@ -0,0 +1,30 @@
+<svelte:options namespace="svg" />
+
+<script lang="ts">
+interface Props {
+	id: string;
+	from: { x: number; y: number };
+	to: { x: number; y: number };
+	fromColor: string;
+	toColor: string;
+}
+
+let { id, from, to, fromColor, toColor }: Props = $props();
+
+// A zero-length gradient paints nothing, so a link drawn onto itself keeps one pixel of run.
+let flat = $derived(Math.abs(from.x - to.x) < 0.5 && Math.abs(from.y - to.y) < 0.5);
+</script>
+
+<defs>
+	<linearGradient
+		{id}
+		gradientUnits="userSpaceOnUse"
+		x1={from.x}
+		y1={from.y}
+		x2={flat ? from.x : to.x}
+		y2={flat ? from.y + 1 : to.y}
+	>
+		<stop stop-color={fromColor} />
+		<stop offset="1" stop-color={toColor} />
+	</linearGradient>
+</defs>

package/src/canvas/edges/edge-path.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vite-plus/test";
+import { Position } from "@xyflow/svelte";
+import { arrowTips, routeEdgePath } from "./edge-path.js";
+
+const geometry = {
+  sourceX: 0,
+  sourceY: 0,
+  targetX: 200,
+  targetY: 100,
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+};
+
+describe("routeEdgePath", () => {
+  it("draws a straight link as one segment", () => {
+    expect(routeEdgePath("straight", geometry, null).path).toBe("M 0,0L 200,100");
+  });
+
+  it("draws a curve with a cubic", () => {
+    expect(routeEdgePath("curved", geometry, null).path).toContain("C");
+  });
+
+  it("draws an elbow with right angles", () => {
+    const { path } = routeEdgePath("elbow", geometry, null);
+    expect(path).toContain("L");
+    expect(path).not.toContain("C");
+  });
+
+  it("detours a same-side pair past both cards", () => {
+    const anchors = {
+      source: { x: 100, y: 0, side: "right" as const },
+      target: { x: 100, y: 120, side: "right" as const },
+    };
+    const { path, labelX } = routeEdgePath(
+      "elbow",
+      { ...geometry, sourceX: 100, targetX: 100, targetY: 120 },
+      anchors,
+    );
+    expect(labelX).toBe(140);
+    expect(path.startsWith("M 100 0")).toBe(true);
+  });
+});
+
+describe("arrowTips", () => {
+  it("points a straight link's heads along the line", () => {
+    const tips = arrowTips("straight", { ...geometry, targetY: 0 }, null);
+    expect(tips.end.angle).toBeCloseTo(0);
+    expect(tips.start.angle).toBeCloseTo(Math.PI);
+  });
+
+  it("meets a box square on", () => {
+    const anchors = {
+      source: { x: 0, y: 0, side: "right" as const },
+      target: { x: 200, y: 100, side: "top" as const },
+    };
+    expect(arrowTips("elbow", geometry, anchors).end.angle).toBeCloseTo(Math.PI / 2);
+  });
+});

package/src/canvas/edges/edge-path.ts

@@ -0,0 +1,293 @@
+// The path and arrowhead placement for one link, chosen by its route. Pure, so the choice is testable.
+
+import { getBezierPath, getSmoothStepPath, getStraightPath, Position } from "@xyflow/svelte";
+import {
+  bestAnchors,
+  sideDetour,
+  sideFromHandle,
+  type Anchor,
+  type Side,
+} from "../headless/edge-anchors.js";
+import { parseBox } from "../headless/edge-memo.js";
+
+export type EdgeRoute = "elbow" | "curved" | "straight";
+
+export type EdgeGeometry = {
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  sourcePosition: Position;
+  targetPosition: Position;
+};
+
+export type Anchors = { source: Anchor; target: Anchor };
+export type Point = { x: number; y: number };
+export type ArrowTip = Point & { angle: number };
+
+/** The movable run of an elbow: it slides along `axis` from `base` within `min` and `max`; `x`, `y` is its middle. */
+export type BendHandle = Point & { axis: "x" | "y"; base: number; min: number; max: number };
+export type RoutedPath = { path: string; labelX: number; labelY: number; bend: BendHandle | null };
+
+/** The corner radius a stepped link shares with the cards it joins. */
+const CORNER = 8;
+/** How far a same-side link runs past the cards, and the least it keeps once bent. */
+const DETOUR = 40;
+const DETOUR_FLOOR = 8;
+
+const OUT: Record<Side, Point> = {
+  top: { x: 0, y: -1 },
+  right: { x: 1, y: 0 },
+  bottom: { x: 0, y: 1 },
+  left: { x: -1, y: 0 },
+};
+
+/** The bend an edge stores in its data: pixels the movable run sits off its unbent place. */
+export function readBend(data: unknown): number {
+  const raw = data && typeof data === "object" ? (data as Record<string, unknown>).bend : null;
+  return typeof raw === "number" && Number.isFinite(raw) ? raw : 0;
+}
+
+/** The bend that puts a handle's run under the pointer, kept inside the handle's limits. */
+export function bendFromPointer(handle: BendHandle, pointer: Point): number {
+  const at = handle.axis === "x" ? pointer.x : pointer.y;
+  return Math.round(Math.min(handle.max, Math.max(handle.min, at)) - handle.base);
+}
+
+function mid(a: number, b: number): number {
+  return (a + b) / 2;
+}
+
+function clamp(value: number, a: number, b: number): number {
+  return Math.min(Math.max(a, b), Math.max(Math.min(a, b), value));
+}
+
+type Elbow = { points: Point[]; handle: BendHandle | null };
+
+/** Out from `s` to the run at `at`, across it, then in to `t`. */
+function runPoints(s: Anchor, t: Anchor, horizontal: boolean, at: number): Point[] {
+  return horizontal
+    ? [s, { x: at, y: s.y }, { x: at, y: t.y }, t]
+    : [s, { x: s.x, y: at }, { x: t.x, y: at }, t];
+}
+
+/** The handle on the run at `at`, or none when the two ends line up and there is nothing to slide. */
+function runHandle(
+  { source: s, target: t }: Anchors,
+  horizontal: boolean,
+  at: number,
+  limits: { base: number; min: number; max: number },
+): BendHandle | null {
+  const span = horizontal ? t.y - s.y : t.x - s.x;
+  if (!(Math.abs(span) > 1)) return null;
+  return {
+    axis: horizontal ? "x" : "y",
+    x: horizontal ? at : mid(s.x, t.x),
+    y: horizontal ? mid(s.y, t.y) : at,
+    ...limits,
+  };
+}
+
+/** Same side: out past both cards, along, back in. The run keeps a margin outside them. */
+function sameSideElbow(anchors: Anchors, bend: number): Elbow {
+  const { source: s, target: t } = anchors;
+  const out = OUT[s.side];
+  const horizontal = out.x !== 0;
+  const base = sideDetour(anchors, DETOUR);
+  const edge = sideDetour(anchors, 0);
+  const outward = horizontal ? out.x : out.y;
+  const at = clamp(base + bend, edge + outward * DETOUR_FLOOR, outward > 0 ? Infinity : -Infinity);
+  const handle = runHandle(anchors, horizontal, at, {
+    base,
+    min: outward > 0 ? edge + DETOUR_FLOOR : -Infinity,
+    max: outward > 0 ? Infinity : edge - DETOUR_FLOOR,
+  });
+  return { points: runPoints(s, t, horizontal, at), handle };
+}
+
+/** Opposite sides: out, across at the middle, in. The across run is what a bend moves. */
+function acrossElbow(anchors: Anchors, bend: number): Elbow {
+  const { source: s, target: t } = anchors;
+  const horizontal = OUT[s.side].x !== 0;
+  const base = horizontal ? mid(s.x, t.x) : mid(s.y, t.y);
+  const lo = horizontal ? Math.min(s.x, t.x) : Math.min(s.y, t.y);
+  const hi = horizontal ? Math.max(s.x, t.x) : Math.max(s.y, t.y);
+  const at = clamp(base + bend, lo, hi);
+  const handle = runHandle(anchors, horizontal, at, { base, min: lo, max: hi });
+  return { points: runPoints(s, t, horizontal, at), handle };
+}
+
+/** Square sides: one corner, when both ends are on the way there. */
+function cornerElbow(anchors: Anchors): Elbow | null {
+  const { source: s, target: t } = anchors;
+  const inward = OUT[t.side];
+  const horizontalOut = OUT[s.side].x !== 0;
+  if (horizontalOut === (inward.x !== 0)) return null;
+  const corner = horizontalOut ? { x: t.x, y: s.y } : { x: s.x, y: t.y };
+  const arriving = horizontalOut ? Math.sign(t.y - s.y) : Math.sign(t.x - s.x);
+  const wanted = horizontalOut ? -inward.y : -inward.x;
+  return arriving === wanted ? { points: [s, corner, t], handle: null } : null;
+}
+
+/** The corners of an elbow between two anchors and the run a bend moves. Null when it must turn back, which getSmoothStepPath routes. */
+function elbowPoints(anchors: Anchors, bend: number): Elbow | null {
+  const { source: s, target: t } = anchors;
+  if (s.side === t.side) return sameSideElbow(anchors, bend);
+
+  const out = OUT[s.side];
+  const inward = OUT[t.side];
+  const ahead = out.x * (t.x - s.x) + out.y * (t.y - s.y);
+  if (ahead <= 0) return null;
+
+  if (out.x === -inward.x && out.y === -inward.y) return acrossElbow(anchors, bend);
+  return cornerElbow(anchors);
+}
+
+/** Corners drawn as the same quadratic arcs getSmoothStepPath draws, so the two routes match. */
+function roundedPath(points: Point[]): string {
+  const pts = points.filter(
+    (p, i) => i === 0 || p.x !== points[i - 1].x || p.y !== points[i - 1].y,
+  );
+  let d = `M ${pts[0].x} ${pts[0].y}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const a = pts[i - 1];
+    const b = pts[i];
+    const c = pts[i + 1];
+    const r = Math.min(
+      CORNER,
+      Math.hypot(b.x - a.x, b.y - a.y) / 2,
+      Math.hypot(c.x - b.x, c.y - b.y) / 2,
+    );
+    const collinear = (a.x === b.x && b.x === c.x) || (a.y === b.y && b.y === c.y);
+    if (collinear || !(r > 0.5)) {
+      d += ` L ${b.x} ${b.y}`;
+      continue;
+    }
+    const before = { x: b.x - Math.sign(b.x - a.x) * r, y: b.y - Math.sign(b.y - a.y) * r };
+    const after = { x: b.x + Math.sign(c.x - b.x) * r, y: b.y + Math.sign(c.y - b.y) * r };
+    d += ` L ${before.x} ${before.y} Q ${b.x} ${b.y} ${after.x} ${after.y}`;
+  }
+  const last = pts[pts.length - 1];
+  return `${d} L ${last.x} ${last.y}`;
+}
+
+/** The middle of the longest run, where a label sits when the link has no bend handle. */
+function middleOf(points: Point[]): Point {
+  let best = { length: -1, at: points[0] };
+  for (let i = 1; i < points.length; i++) {
+    const length = Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+    if (length > best.length)
+      best = {
+        length,
+        at: { x: mid(points[i].x, points[i - 1].x), y: mid(points[i].y, points[i - 1].y) },
+      };
+  }
+  return best.at;
+}
+
+/** The corners an elbow turns at, for a hand-ruled drawing to follow. Null for any other route. */
+export function elbowCorners(route: EdgeRoute, anchors: Anchors | null, bend = 0): Point[] | null {
+  if (route !== "elbow" || !anchors) return null;
+  return elbowPoints(anchors, bend)?.points ?? null;
+}
+
+export function routeEdgePath(
+  route: EdgeRoute,
+  geometry: EdgeGeometry,
+  anchors: Anchors | null,
+  bend = 0,
+): RoutedPath {
+  if (route === "straight") {
+    const [path, labelX, labelY] = getStraightPath(geometry);
+    return { path, labelX, labelY, bend: null };
+  }
+  if (route === "curved") {
+    const [path, labelX, labelY] = getBezierPath(geometry);
+    return { path, labelX, labelY, bend: null };
+  }
+  const plan = anchors ? elbowPoints(anchors, bend) : null;
+  if (plan) {
+    const label = plan.handle ?? middleOf(plan.points);
+    return { path: roundedPath(plan.points), labelX: label.x, labelY: label.y, bend: plan.handle };
+  }
+  const [path, labelX, labelY] = getSmoothStepPath({ ...geometry, borderRadius: CORNER });
+  return { path, labelX, labelY, bend: null };
+}
+
+export type LinkInput = {
+  route: EdgeRoute;
+  bend: number;
+  /** Each end's `boxKey`, "" until the card is measured. */
+  fromBox: string;
+  toBox: string;
+  /** The edge's stored handle ids. */
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
+  /** The geometry xyflow measured, used until both cards have a size. */
+  fallback: EdgeGeometry;
+};
+
+export type Link = RoutedPath & {
+  anchors: Anchors | null;
+  geometry: EdgeGeometry;
+  tips: { start: ArrowTip; end: ArrowTip };
+};
+
+/** Everything one link draws: its sides, path, bend handle and arrowheads, from where its cards sit. */
+export function planLink(input: LinkInput): Link {
+  const from = parseBox(input.fromBox);
+  const to = parseBox(input.toBox);
+  let anchors: Anchors | null = null;
+  let geometry = input.fallback;
+  if (from && to) {
+    anchors = bestAnchors(from, to, {
+      source: sideFromHandle(input.sourceHandle),
+      target: sideFromHandle(input.targetHandle),
+    });
+    geometry = {
+      sourceX: anchors.source.x,
+      sourceY: anchors.source.y,
+      sourcePosition: anchors.source.side as Position,
+      targetX: anchors.target.x,
+      targetY: anchors.target.y,
+      targetPosition: anchors.target.side as Position,
+    };
+  }
+  return {
+    ...routeEdgePath(input.route, geometry, anchors, input.bend),
+    anchors,
+    geometry,
+    tips: arrowTips(input.route, geometry, anchors),
+  };
+}
+
+/** The direction a link travels when it meets a box on `side`: straight into it. */
+function into(side: Side): number {
+  switch (side) {
+    case "left":
+      return 0;
+    case "right":
+      return Math.PI;
+    case "top":
+      return Math.PI / 2;
+    case "bottom":
+      return -Math.PI / 2;
+  }
+}
+
+/** Where an arrowhead sits and points at each end: along a straight link's line, square on to the box otherwise. */
+export function arrowTips(
+  route: EdgeRoute,
+  geometry: EdgeGeometry,
+  anchors: Anchors | null,
+): { start: ArrowTip; end: ArrowTip } {
+  const { sourceX, sourceY, targetX, targetY } = geometry;
+  const straight = Math.atan2(targetY - sourceY, targetX - sourceX);
+  const startAngle =
+    route === "straight" || !anchors ? straight + Math.PI : into(anchors.source.side);
+  const endAngle = route === "straight" || !anchors ? straight : into(anchors.target.side);
+  return {
+    start: { x: sourceX, y: sourceY, angle: startAngle },
+    end: { x: targetX, y: targetY, angle: endAngle },
+  };
+}

package/src/canvas/edges/gradient-edge.svelte

@@ -0,0 +1,43 @@
+<svelte:options namespace="svg" />
+
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { BaseEdge } from "@xyflow/svelte";
+import EdgeGradient from "./edge-gradient.svelte";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	id: string;
+	path: string;
+	from: { x: number; y: number };
+	to: { x: number; y: number };
+	fromColor: string;
+	toColor?: string;
+	markerEnd?: string;
+	/** The edge's own style. A stroke set here beats the gradient. */
+	style?: string;
+	class?: string;
+}
+
+// =========================
+// PROPS
+// =========================
+let { id, path, from, to, fromColor, toColor = fromColor, markerEnd, style = "", class: className = "" }: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let gradientId = $derived(`canvas-gradient-${id.replace(/[^\w-]/g, "_")}`);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<EdgeGradient id={gradientId} {from} {to} {fromColor} {toColor} />
+<BaseEdge {id} {path} {markerEnd} class="canvas-edge {className}" style="stroke: url(#{gradientId}); {style}" />
+<!-- Hidden until a test run crosses this link; the canvas stylesheet draws the moving dashes. -->
+<path d={path} class="canvas-edge-flow" fill="none" aria-hidden="true" />

package/src/canvas/editor/context-menu.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vite-plus/test";
+import { resolveContextMenuHit } from "./context-menu.js";
+import type { Node } from "@xyflow/svelte";
+
+function elementStub(attrs: Record<string, string> = {}, data: Record<string, string> = {}) {
+  const rect = { x: 1, y: 2, width: 3, height: 4 };
+  const el = {
+    getAttribute: (name: string) => attrs[name] ?? null,
+    getBoundingClientRect: () => rect,
+    dataset: data,
+    closest: (sel: string) => {
+      if (sel === ".svelte-flow__edge" && attrs.edge) return el;
+      if (sel === "[data-id]" && attrs["data-id"]) return el;
+      if (sel === "[data-table-row]" && data.tableRow) return el;
+      return null;
+    },
+  };
+  return el as unknown as HTMLElement;
+}
+
+function event(target: HTMLElement): MouseEvent {
+  return { target, clientX: 10, clientY: 20 } as unknown as MouseEvent;
+}
+
+describe("resolveContextMenuHit", () => {
+  it("reads an edge hit and skips the node lookup", () => {
+    const target = elementStub({ edge: "1", "data-id": "e1" });
+    const hit = resolveContextMenuHit(event(target), []);
+    expect(hit).toEqual({ kind: "edge", edgeId: "e1", position: { x: 10, y: 20 } });
+  });
+
+  it("reads a node hit with its rect and type", () => {
+    const target = elementStub({ "data-id": "n1" });
+    const nodes = [{ id: "n1", type: "note" }] as unknown as Node[];
+    const hit = resolveContextMenuHit(event(target), nodes);
+    expect(hit).toEqual({
+      kind: "canvas",
+      position: { x: 10, y: 20 },
+      anchorRect: { x: 1, y: 2, width: 3, height: 4 },
+      nodeId: "n1",
+      nodeType: "note",
+      tableCell: null,
+    });
+  });
+
+  it("reads a table cell under the pointer", () => {
+    const target = elementStub({ "data-id": "n1" }, { tableRow: "1", tableCol: "2" });
+    const nodes = [{ id: "n1", type: "table" }] as unknown as Node[];
+    const hit = resolveContextMenuHit(event(target), nodes);
+    expect(hit.kind === "canvas" && hit.tableCell).toEqual({ row: 1, col: 2 });
+  });
+
+  it("reads a bare canvas click as a null node", () => {
+    const target = elementStub({});
+    const hit = resolveContextMenuHit(event(target), []);
+    expect(hit).toEqual({
+      kind: "canvas",
+      position: { x: 10, y: 20 },
+      anchorRect: null,
+      nodeId: null,
+      nodeType: null,
+      tableCell: null,
+    });
+  });
+});

package/src/canvas/editor/context-menu.ts

@@ -0,0 +1,48 @@
+import type { Node } from "@xyflow/svelte";
+
+export type Rect = { x: number; y: number; width: number; height: number };
+export type TableCellHit = { row: number; col: number };
+
+export type ContextMenuHit =
+  | { kind: "edge"; edgeId: string; position: { x: number; y: number } }
+  | {
+      kind: "canvas";
+      position: { x: number; y: number };
+      anchorRect: Rect | null;
+      nodeId: string | null;
+      nodeType: string | null;
+      tableCell: TableCellHit | null;
+    };
+
+function rectOf(el: Element | null): Rect | null {
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  return { x: r.x, y: r.y, width: r.width, height: r.height };
+}
+
+function tableCellOf(target: HTMLElement): TableCellHit | null {
+  const cell = target.closest<HTMLElement>("[data-table-row]");
+  if (!cell) return null;
+  return { row: Number(cell.dataset.tableRow), col: Number(cell.dataset.tableCol) };
+}
+
+/** Reads a right-click into an edge hit, or a canvas/node hit with its anchor
+ *  rect and cell. The edge check runs first, because an arrow also carries
+ *  `data-id`. */
+export function resolveContextMenuHit(event: MouseEvent, nodes: Node[]): ContextMenuHit {
+  const target = event.target as HTMLElement;
+  const position = { x: event.clientX, y: event.clientY };
+  const edgeId = target.closest(".svelte-flow__edge")?.getAttribute("data-id");
+  if (edgeId) return { kind: "edge", edgeId, position };
+  const nodeElement = target.closest("[data-id]");
+  const nodeId = nodeElement?.getAttribute("data-id") ?? null;
+  const node = nodeId ? nodes.find((n) => n.id === nodeId) : undefined;
+  return {
+    kind: "canvas",
+    position,
+    anchorRect: rectOf(nodeElement),
+    nodeId,
+    nodeType: node?.type ?? null,
+    tableCell: tableCellOf(target),
+  };
+}