@neoloopy/cld-canvas 0.1.0

package/dist/view/geometry.js

@@ -0,0 +1,408 @@
+/**
+ * Canvas geometry — node boxes, curved-edge construction, decoration anchors,
+ * loop-badge placement, and hit-testing. A faithful port of the geometry in
+ * `app/lib/painters/graph_painter.dart`: edges are TRUE CIRCULAR arcs through
+ * start → apex → end (constant curvature, so dragging an edge out bulges it into
+ * a round arc, not a pinched parabola), trimmed to the node rims. Pure module —
+ * no `obsidian`, no canvas — so the math is unit-testable.
+ */
+/**
+ * Node (x,y) is the box center, matching the Dart painter + autoLayout.
+ *
+ * The app's painter (`NodeBox.sizeFor`) sizes each box to the *measured* label
+ * width plus padding — `max(60, textWidth + (flow ? 40 : 36))`, height 40 for a
+ * stock else 34. Pass `measure` (a canvas `measureText` at the label font) to
+ * match it exactly; without one (tests/headless) fall back to the same
+ * character-count estimate `layout.boxSize`/`autoLayout` use, so positions stay
+ * deterministic.
+ */
+export function buildNodeBoxes(nodes, measure) {
+    const m = new Map();
+    for (const n of nodes) {
+        const label = n.label || n.id;
+        const h = n.type === "stock" ? 40 : 34;
+        const extra = n.type === "flow" ? 40 : 36;
+        const textW = measure ? measure(label) : label.length * 7.2;
+        const w = Math.max(60, textW + extra);
+        m.set(n.id, { id: n.id, cx: n.x, cy: n.y, w, h, type: n.type });
+    }
+    return m;
+}
+export function collectEdges(nodes) {
+    const out = [];
+    for (const n of nodes) {
+        for (const l of n.links) {
+            out.push({ id: `${n.id}__${l.to}`, source: n.id, target: l.to, link: l });
+        }
+    }
+    return out;
+}
+/**
+ * @param bowCache Per-edge frozen bow signs (keyed by edge id). Lone edges pick
+ *   a bow side from the graph centroid **once** and reuse it; without this, a
+ *   node drag moves the centroid and can flip an unrelated edge to the far side.
+ *   Pass a stable Map (cleared per model) to get app-faithful, jitter-free arcs.
+ */
+export function buildEdgeGeoms(edges, boxes, bowCache) {
+    const present = edges.filter((e) => boxes.has(e.source) && boxes.has(e.target));
+    const dirSet = new Set(present.map((e) => `${e.source}>${e.target}`));
+    const centroid = centroidOf(boxes);
+    return present.map((e) => geomFor(e, boxes, dirSet, centroid, bowCache));
+}
+function centroidOf(boxes) {
+    let sx = 0;
+    let sy = 0;
+    let n = 0;
+    for (const b of boxes.values()) {
+        sx += b.cx;
+        sy += b.cy;
+        n++;
+    }
+    return n === 0 ? { x: 0, y: 0 } : { x: sx / n, y: sy / n };
+}
+function geomFor(e, boxes, dirSet, centroid, bowCache) {
+    const a = boxes.get(e.source);
+    const b = boxes.get(e.target);
+    if (e.source === e.target)
+        return selfLoop(e, a);
+    const S = { x: a.cx, y: a.cy };
+    const E = { x: b.cx, y: b.cy };
+    const dx = E.x - S.x;
+    const dy = E.y - S.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const mx = (S.x + E.x) / 2;
+    const my = (S.y + E.y) / 2;
+    const nx = -dy / len; // perpendicular unit
+    const ny = dx / len;
+    const mag = len * 0.18 + 18;
+    let bow;
+    if (e.link.curvature !== undefined) {
+        // User-set curve: curvature is the signed apex offset from the chord
+        // midpoint along the perpendicular (set by dragging the edge).
+        bow = e.link.curvature;
+    }
+    else if (dirSet.has(`${e.target}>${e.source}`)) {
+        // Reciprocal pair — both use the same bow sign; their opposite chord
+        // directions make the two arcs split to opposite geometric sides.
+        bow = mag;
+    }
+    else {
+        // Lone edge — bow away from the graph centroid so loops read as circles,
+        // but FREEZE the chosen side per edge: a later node drag shifts the centroid
+        // and would otherwise flip an unrelated edge to the other side mid-drag.
+        let sign = bowCache?.get(e.id);
+        if (sign === undefined) {
+            const ox = mx - centroid.x;
+            const oy = my - centroid.y;
+            sign = nx * ox + ny * oy >= 0 ? 1 : -1;
+            bowCache?.set(e.id, sign);
+        }
+        bow = mag * sign;
+    }
+    // Apex = the chord midpoint pushed out by the signed bow. The visible edge is
+    // a TRUE CIRCULAR arc through start → apex → end (round, constant-curvature),
+    // matching the app's `_circleCenter` arc — so dragging an edge out bulges it
+    // into a circle, not a pinched parabola. Endpoints trim to each node's rim
+    // (aimed at the apex); falls back to a straight chord when nearly collinear.
+    const apex = { x: mx + nx * bow, y: my + ny * bow };
+    const start = rimPoint(a, apex);
+    const end = rimPoint(b, apex);
+    const center = circleCenter(start, apex, end);
+    let points;
+    if (!center) {
+        points = [start, end];
+    }
+    else {
+        const r = Math.hypot(start.x - center.x, start.y - center.y);
+        const a0 = Math.atan2(start.y - center.y, start.x - center.x);
+        const a1 = Math.atan2(end.y - center.y, end.x - center.x);
+        const am = Math.atan2(apex.y - center.y, apex.x - center.x);
+        const toEnd = norm2pi(a1 - a0);
+        const toMid = norm2pi(am - a0);
+        // sweep in the direction that passes through the apex
+        const sweep = toMid < toEnd ? toEnd : toEnd - 2 * Math.PI;
+        const N = 24;
+        points = [];
+        for (let i = 0; i <= N; i++) {
+            const ang = a0 + sweep * (i / N);
+            points.push({ x: center.x + r * Math.cos(ang), y: center.y + r * Math.sin(ang) });
+        }
+    }
+    return decorate(e, points);
+}
+/** Circumcircle center of three points; null when (nearly) collinear. */
+function circleCenter(a, b, c) {
+    const d = 2 * (a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y));
+    if (Math.abs(d) < 1e-6)
+        return null;
+    const a2 = a.x * a.x + a.y * a.y;
+    const b2 = b.x * b.x + b.y * b.y;
+    const c2 = c.x * c.x + c.y * c.y;
+    return {
+        x: (a2 * (b.y - c.y) + b2 * (c.y - a.y) + c2 * (a.y - b.y)) / d,
+        y: (a2 * (c.x - b.x) + b2 * (a.x - c.x) + c2 * (b.x - a.x)) / d,
+    };
+}
+/** March from a box center toward `toward` until just outside the rim. */
+function rimPoint(box, toward) {
+    const c0 = { x: box.cx, y: box.cy };
+    const dx = toward.x - c0.x;
+    const dy = toward.y - c0.y;
+    const dist = Math.hypot(dx, dy);
+    if (dist === 0)
+        return c0;
+    const sx = dx / dist;
+    const sy = dy / dist;
+    for (let d = 0; d < dist; d += 1.5) {
+        const p = { x: c0.x + sx * d, y: c0.y + sy * d };
+        if (!inBox(p, box, 0))
+            return p;
+    }
+    return c0;
+}
+/** Wrap an angle into [0, 2π). */
+function norm2pi(x) {
+    let v = x;
+    while (v < 0)
+        v += 2 * Math.PI;
+    while (v >= 2 * Math.PI)
+        v -= 2 * Math.PI;
+    return v;
+}
+function selfLoop(e, a) {
+    const r = Math.max(a.w, a.h) / 2 + 16;
+    const cx = a.cx;
+    const cy = a.cy - a.h / 2 - r;
+    const N = 40;
+    const points = [];
+    for (let i = 0; i <= N; i++) {
+        const ang = -Math.PI * 0.85 + Math.PI * 1.7 * (i / N);
+        points.push({ x: cx + r * Math.cos(ang), y: cy + r * Math.sin(ang) });
+    }
+    return decorate(e, points);
+}
+function decorate(e, points) {
+    const pts = points.length >= 2 ? points : [points[0] ?? { x: 0, y: 0 }, points[0] ?? { x: 0, y: 0 }];
+    const last = pts[pts.length - 1];
+    const prev = pts[pts.length - 2];
+    const mid = atFraction(pts, 0.5);
+    const delay = atFraction(pts, 0.34);
+    const nl = atFraction(pts, 0.66);
+    return {
+        ...e,
+        points: pts,
+        mid: mid.point,
+        midAngle: mid.angle,
+        delay: delay.point,
+        delayAngle: delay.angle,
+        nl: nl.point,
+        nlAngle: nl.angle,
+        arrowTip: last,
+        arrowAngle: Math.atan2(last.y - prev.y, last.x - prev.x),
+    };
+}
+/** Point + tangent angle at fraction `f` of a polyline's arc length. */
+function atFraction(pts, f) {
+    if (pts.length < 2)
+        return { point: pts[0] ?? { x: 0, y: 0 }, angle: 0 };
+    let total = 0;
+    const seg = [];
+    for (let i = 1; i < pts.length; i++) {
+        const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y);
+        seg.push(d);
+        total += d;
+    }
+    let target = f * total;
+    for (let i = 0; i < seg.length; i++) {
+        if (target <= seg[i] || i === seg.length - 1) {
+            const a = pts[i];
+            const b = pts[i + 1];
+            const r = seg[i] === 0 ? 0 : target / seg[i];
+            return {
+                point: { x: a.x + (b.x - a.x) * r, y: a.y + (b.y - a.y) * r },
+                angle: Math.atan2(b.y - a.y, b.x - a.x),
+            };
+        }
+        target -= seg[i];
+    }
+    const a = pts[pts.length - 2];
+    const b = pts[pts.length - 1];
+    return { point: b, angle: Math.atan2(b.y - a.y, b.x - a.x) };
+}
+function inBox(p, box, pad) {
+    return (Math.abs(p.x - box.cx) <= box.w / 2 + pad &&
+        Math.abs(p.y - box.cy) <= box.h / 2 + pad);
+}
+// ---- loop badges -----------------------------------------------------------
+/**
+ * Loop-badge centers — centroid of member nodes, then light overlap spread.
+ * `overrides` (loop.key → world point) pins badges the user has dragged: a pinned
+ * badge sits exactly where it was dropped and does not move during relaxation;
+ * unpinned badges relax around it. Mirrors the app's `loopBadgeOverrides`
+ * (session-only, keyed by loop key — not persisted to the vault).
+ */
+export function computeBadges(loops, boxes, overrides) {
+    const pos = new Map();
+    const pinned = new Set();
+    for (const lp of loops) {
+        const ov = overrides?.get(lp.key);
+        if (ov) {
+            pos.set(lp.key, { x: ov.x, y: ov.y });
+            pinned.add(lp.key);
+            continue;
+        }
+        let sx = 0;
+        let sy = 0;
+        let c = 0;
+        for (const id of new Set(lp.nodeIds)) {
+            const b = boxes.get(id);
+            if (b) {
+                sx += b.cx;
+                sy += b.cy;
+                c++;
+            }
+        }
+        if (c > 0)
+            pos.set(lp.key, { x: sx / c, y: sy / c });
+    }
+    const keys = [...pos.keys()];
+    const MIN = 44;
+    for (let iter = 0; iter < 50; iter++) {
+        let moved = false;
+        for (let i = 0; i < keys.length; i++) {
+            for (let j = i + 1; j < keys.length; j++) {
+                const pPin = pinned.has(keys[i]);
+                const qPin = pinned.has(keys[j]);
+                if (pPin && qPin)
+                    continue; // both dropped by hand — leave them
+                const p = pos.get(keys[i]);
+                const q = pos.get(keys[j]);
+                const dx = q.x - p.x;
+                const dy = q.y - p.y;
+                const d = Math.hypot(dx, dy);
+                if (d < MIN && d > 0.001) {
+                    const ux = dx / d;
+                    const uy = dy / d;
+                    // A pinned badge holds; its partner takes the whole push.
+                    const pushP = pPin ? 0 : qPin ? MIN - d : (MIN - d) / 2;
+                    const pushQ = qPin ? 0 : pPin ? MIN - d : (MIN - d) / 2;
+                    p.x -= ux * pushP;
+                    p.y -= uy * pushP;
+                    q.x += ux * pushQ;
+                    q.y += uy * pushQ;
+                    moved = true;
+                }
+                else if (d <= 0.001) {
+                    if (!qPin) {
+                        q.x += MIN / 2;
+                        moved = true;
+                    }
+                    else if (!pPin) {
+                        p.x -= MIN / 2;
+                        moved = true;
+                    }
+                }
+            }
+        }
+        if (!moved)
+            break;
+    }
+    return pos;
+}
+/**
+ * Directed edge ids (`source__target`, matching `collectEdges`) that close a
+ * detected loop's cycle. `nodeIds` is the open path, so the last node wraps back
+ * to the first. Used to highlight the loop when its badge is selected.
+ */
+export function loopEdgeIds(loop) {
+    const ids = loop.nodeIds;
+    const out = new Set();
+    for (let i = 0; i < ids.length; i++) {
+        out.add(`${ids[i]}__${ids[(i + 1) % ids.length]}`);
+    }
+    return out;
+}
+// ---- hit testing -----------------------------------------------------------
+export function hitNode(boxes, p) {
+    const arr = [...boxes.values()];
+    for (let i = arr.length - 1; i >= 0; i--) {
+        if (inBox(p, arr[i], 4))
+            return arr[i].id;
+    }
+    return null;
+}
+export function hitEdge(geoms, p, scale) {
+    const tol = 14 / scale;
+    let best = null;
+    let bestD = tol;
+    for (const g of geoms) {
+        for (let i = 0; i + 1 < g.points.length; i++) {
+            const d = distToSegment(p, g.points[i], g.points[i + 1]);
+            if (d < bestD) {
+                bestD = d;
+                best = g.id;
+            }
+        }
+    }
+    return best;
+}
+/**
+ * Generous grab zone for an already-selected edge, mirroring the native app's
+ * `_nearSelectedEdge`: within 26/scale of the midpoint handle, OR within
+ * 22/scale of the curve. Bowing uses this (not the tight 14/scale `hitEdge`
+ * select zone) so "select then drag to bow" is reliable instead of needing a
+ * pixel-perfect second press on the line.
+ */
+export function nearSelectedEdge(g, p, scale) {
+    if (Math.hypot(g.mid.x - p.x, g.mid.y - p.y) < 26 / scale)
+        return true;
+    let best = Infinity;
+    for (let i = 0; i + 1 < g.points.length; i++) {
+        const d = distToSegment(p, g.points[i], g.points[i + 1]);
+        if (d < best)
+            best = d;
+    }
+    return best < 22 / scale;
+}
+export function hitBadge(badges, p, scale) {
+    const tol = 22 / scale;
+    let best = null;
+    let bestD = tol;
+    for (const [key, c] of badges) {
+        const d = Math.hypot(c.x - p.x, c.y - p.y);
+        if (d < bestD) {
+            bestD = d;
+            best = key;
+        }
+    }
+    return best;
+}
+/** True if `p` is in the connect-ring band just outside a node's rim. */
+export function inConnectBand(box, p, tol, gap = 20) {
+    return inBox(p, box, gap + tol) && !inBox(p, box, 0);
+}
+export function distToSegment(p, a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const l2 = dx * dx + dy * dy;
+    if (l2 === 0)
+        return Math.hypot(p.x - a.x, p.y - a.y);
+    let t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / l2;
+    t = t < 0 ? 0 : t > 1 ? 1 : t;
+    return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+export function nodeBounds(boxes) {
+    if (boxes.size === 0)
+        return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const b of boxes.values()) {
+        minX = Math.min(minX, b.cx - b.w / 2);
+        minY = Math.min(minY, b.cy - b.h / 2);
+        maxX = Math.max(maxX, b.cx + b.w / 2);
+        maxY = Math.max(maxY, b.cy + b.h / 2);
+    }
+    return { minX, minY, maxX, maxY };
+}

package/dist/view/painter.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Canvas painter — renders a prepared scene (node boxes, curved edges, loop
+ * badges) with the app's visual language ported from
+ * `app/lib/painters/graph_painter.dart`. Pure: takes a 2D context + scene +
+ * camera + theme + interaction state and draws. Deferred flourishes (valence/CLA
+ * marks) are tracked in Status.md; the core CLD reading — node types, arc edges
+ * with polarity chips, R/B badges, the subsystem-link corner mark, and selection
+ * + live-edit highlight — is here. Per-node
+ * quantitative detail lives in the ƒx node-menu modal, not on the canvas.
+ */
+import { Camera, Point } from "./camera";
+import { Theme } from "./theme";
+import { EdgeGeom, NodeBox } from "./geometry";
+import { DetectedLoop, LoopType, VariableFile } from "../engine/types";
+export interface Scene {
+    nodes: VariableFile[];
+    boxes: Map<string, NodeBox>;
+    edges: EdgeGeom[];
+    loops: DetectedLoop[];
+    labels: Map<string, string>;
+    badges: Map<string, Point>;
+}
+/** A selected loop's members, so the painter can spotlight just that cycle. */
+export interface LoopHighlight {
+    edgeIds: Set<string>;
+    nodeIds: Set<string>;
+    type: LoopType;
+}
+export interface PaintUi {
+    cssWidth: number;
+    cssHeight: number;
+    dpr: number;
+    selectedNodeId: string | null;
+    selectedEdgeId: string | null;
+    selectedLoopKey: string | null;
+    liveNodeIds: Set<string>;
+    /** Live link being drawn: from node id to a world point. */
+    linkPreview: {
+        from: string;
+        to: Point;
+    } | null;
+    /** Node whose connect-ring is currently armed/hovered. */
+    connectNodeId: string | null;
+    /** Edges/nodes of the selected loop; non-members dim. Null = no spotlight. */
+    loopHighlight: LoopHighlight | null;
+    /** 0..1 pulse clock for the selected node's halo (0 = static). */
+    pulsePhase: number;
+    /** 0..1 marching-ants clock tracing highlighted loop edges. */
+    flowPhase: number;
+}
+/**
+ * Canvas label font. The desktop app renders its canvas text in Helvetica Neue
+ * (`ThemeData.fontFamily` in `app/lib/main.dart`) at weight 600. A
+ * `var(--font-interface)` inside a canvas `font` string is NOT resolved by the
+ * 2D context — the weight silently falls back to 400 and the family to the
+ * system UI font — so the family and weight are spelled out concretely here to
+ * match the app pixel-for-pixel. The monospace badge font mirrors Dart's
+ * generic `'monospace'`.
+ */
+export declare const LABEL_FONT = "\"Helvetica Neue\", Helvetica, Arial, sans-serif";
+/** Matches the app's `letterSpacing: -0.1` on every canvas label. */
+export declare const LABEL_TRACKING = "-0.1px";
+export declare function paint(ctx: CanvasRenderingContext2D, scene: Scene, camera: Camera, theme: Theme, ui: PaintUi): void;