@grafloria/element 0.3.18 → 0.3.20

package/src/libs/renderer/src/svg/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerNotationShapes = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./svg-renderer"), exports);
+tslib_1.__exportStar(require("./ArrowRenderer"), exports); // Phase 1.1
+tslib_1.__exportStar(require("./LabelRenderer"), exports); // Phase 1.2
+tslib_1.__exportStar(require("./JumpPointDetector"), exports); // Phase 1.3
+tslib_1.__exportStar(require("./JumpPointRenderer"), exports); // Phase 1.3
+tslib_1.__exportStar(require("./port-positioning"), exports); // Phase 3.2 - Shape-aware port positioning
+// Wave 6 (Ports & connections)
+tslib_1.__exportStar(require("./port-layout"), exports); // Card 4 - pluggable port-layout strategies
+tslib_1.__exportStar(require("./port-glyph"), exports); // Card 0 - non-circle port glyphs
+tslib_1.__exportStar(require("./port-label"), exports); // Card 1 - port labels with layout
+tslib_1.__exportStar(require("./port-spots"), exports); // Card 5 - attachment spots + multi-link spreading
+tslib_1.__exportStar(require("./link-hit-test"), exports); // Wave 1 - Part-aware link hit-testing
+tslib_1.__exportStar(require("./shape-registry"), exports);
+var notation_shapes_1 = require("./notation-shapes"); // Nodes & shapes - unified shape registry + registerShape API
+Object.defineProperty(exports, "registerNotationShapes", { enumerable: true, get: function () { return notation_shapes_1.registerNotationShapes; } });
+tslib_1.__exportStar(require("./path-outline"), exports); // Wave 5 Card 2 - arbitrary SVG-path outline sampling
+tslib_1.__exportStar(require("./node-sizing"), exports); // Wave 5 Card 6/7 - per-node sizing constraints
+tslib_1.__exportStar(require("./node-toolbar"), exports); // Wave 5 Card 6 - per-node toolbar config seam
+tslib_1.__exportStar(require("./auto-size"), exports); // Wave 5 Card 7 - content-aware auto-sizing
+tslib_1.__exportStar(require("./panel"), exports); // Wave 5 Card 5 - composite / panel node model
+tslib_1.__exportStar(require("./html-node"), exports); // Wave 5 Card 4 - HTML / foreignObject rich-content nodes
+tslib_1.__exportStar(require("./text-block"), exports); // Node/link label engine - wrap / multi-line / ellipsis / shape-fit
+tslib_1.__exportStar(require("./link-fanout"), exports); // Wave 4 Card 4 - parallel-link separation + self-loop routing
+tslib_1.__exportStar(require("./edge-optimizer"), exports); // Wave 4 Card 7 - diagram-wide incremental label/jump/bundle pass
+tslib_1.__exportStar(require("./edge-templates"), exports); // Wave 4 Card 5 - link/label templates + custom markers
+tslib_1.__exportStar(require("./route-memo"), exports); // Wave 8 Card 6 - incremental routing: re-route only what changed
+tslib_1.__exportStar(require("./route-solver-bridge"), exports); // Wave 8 Card 6 - the render loop driving the off-thread global solver
+//# sourceMappingURL=index.js.map

package/src/libs/renderer/src/svg/link-fanout.d.ts

@@ -0,0 +1,127 @@
+/**
+ * link-fanout.ts — Wave 4 (Edges & links), Card 4
+ *
+ * Parallel-link auto-separation and self-loop routing. PURE GEOMETRY: no engine
+ * models, no DOM, no framework — points in, points out — so every rule below is
+ * unit-testable on its own and the SVG renderer only has to decide WHEN to call
+ * it, not HOW the shape is built.
+ *
+ * Why this is the biggest structural edge gap Grafloria had:
+ *   • Two links between the same pair of nodes were drawn on the same centre
+ *     line, one exactly on top of the other. ERD (two FKs between the same
+ *     tables), BPMN (a flow and its compensation) and state machines (a→b and
+ *     b→a) all produce that shape constantly.
+ *   • A link whose source node IS its target node was handed to the router as an
+ *     ordinary A→B route. The router excludes the link's own nodes from its
+ *     obstacle set, so the "route" was a degenerate stub inside the node body.
+ *
+ * The output of both routines is a POLYLINE, not a path string. That is
+ * deliberate: the renderer's existing path emitters already turn a polyline into
+ * the right shape per path type (rounded corners for `orthogonal`, a Catmull-Rom
+ * spline for `smooth`/`bezier`, straight segments for `direct`), and hit
+ * testing, jump-point detection, label placement and the edge toolbar all read
+ * the same polyline. One geometry, every consumer.
+ */
+export interface FanoutPoint {
+    x: number;
+    y: number;
+}
+export interface FanoutRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type FanoutSide = 'left' | 'right' | 'top' | 'bottom';
+/** Default gap between adjacent links of a parallel bundle. */
+export declare const DEFAULT_PARALLEL_SPACING = 16;
+/** Default self-loop bulge / lateral span / per-loop growth. */
+export declare const DEFAULT_SELF_LOOP_SIZE = 40;
+export declare const DEFAULT_SELF_LOOP_SPACING = 18;
+/**
+ * The signed lane offsets for a bundle of `count` parallel links, spaced
+ * `spacing` apart and centred on the un-separated route.
+ *
+ *   count 1 → [0]                     (a lone link NEVER moves — this is what
+ *                                      keeps every existing diagram pixel-identical)
+ *   count 2 → [-s/2, +s/2]
+ *   count 3 → [-s, 0, +s]
+ *
+ * Centred rather than one-sided so a bundle stays visually anchored on the line
+ * the single link used to occupy: adding a second relationship between two
+ * entities nudges both apart instead of shunting the diagram sideways.
+ */
+export declare function parallelOffsets(count: number, spacing?: number): number[];
+/**
+ * The unit LEFT normal of a → b, i.e. the axis a parallel bundle fans along.
+ *
+ * The caller must derive `a`/`b` from the bundle's CANONICAL node order (e.g.
+ * lower node id first), not from each link's own source → target. Otherwise the
+ * two halves of a bidirectional pair compute opposite normals, their opposite
+ * lane offsets cancel out, and both links land back on top of each other — the
+ * exact bug the card exists to fix.
+ *
+ * Degenerate input (coincident points) falls back to "up", so a bundle between
+ * two concentric nodes still fans instead of collapsing to NaN.
+ */
+export declare function bundleNormal(a: FanoutPoint, b: FanoutPoint): FanoutPoint;
+/**
+ * Push a routed polyline onto its lane in a parallel bundle.
+ *
+ * The two ENDPOINTS never move: they are the ports, and a fan that pulled the
+ * line off its port would be worse than the overlap it fixes. Only the interior
+ * of the route is displaced.
+ *
+ *   • `orthogonal` — every INTERIOR segment is slid along its own normal. A
+ *     segment's neighbours run perpendicular to it, so sliding it only makes
+ *     them longer or shorter: the route stays exactly orthogonal (no diagonal
+ *     ever appears). A route with no interior segment (a straight 2-point
+ *     orthogonal run between aligned ports) gets an S-jog inserted instead,
+ *     because there is otherwise nothing to displace.
+ *   • `direct` / `smooth` / `bezier` — the interior points are displaced along
+ *     the bundle normal; a bare 2-point route gets an offset midpoint, which the
+ *     path emitters turn into a bow (a spline for smooth, a shallow V for
+ *     direct). This is the "curviness" fan GoJS and React Flow draw.
+ *
+ * `offset === 0` returns the input untouched (same array contents), so a link
+ * that is not part of a bundle is byte-identical to the pre-Wave-4 renderer.
+ */
+export declare function separateParallelRoute(points: FanoutPoint[], offset: number, normal: FanoutPoint, pathType: string): FanoutPoint[];
+export interface SelfLoopSpec {
+    /** World rect of the node both ends live on. */
+    rect: FanoutRect;
+    /** Source attachment point (world, on the node outline). */
+    start: FanoutPoint;
+    /** Target attachment point (world, on the node outline). */
+    end: FanoutPoint;
+    sourceSide: FanoutSide;
+    targetSide: FanoutSide;
+    /** How far the loop bulges away from the node body (px). */
+    size: number;
+    /** Lateral span used when the two ends coincide (or nearly do). */
+    width: number;
+}
+/** Outward unit normal of a node side. */
+export declare function sideNormal(side: FanoutSide): FanoutPoint;
+/**
+ * Route a self-loop as a polyline: out of the source port, around, back into the
+ * target port. EVERY segment is axis-aligned, which is what lets the three path
+ * emitters each do the right thing with the same points — rounded rectangle for
+ * `orthogonal`, a smooth closed-looking curve for `smooth`/`bezier`, a hard
+ * polygon for `direct`.
+ *
+ * Three cases, and they cover every port pairing:
+ *
+ *  A. SAME side (incl. the same port twice — the common case). The loop bulges
+ *     straight out and spans laterally. When the two attachment points coincide
+ *     (or sit closer together than `width`) they are SPREAD apart along the side
+ *     by `width`, clamped to the node's own span: a loop whose feet are the same
+ *     point has zero area and cannot be drawn at all.
+ *
+ *  B. PERPENDICULAR sides (right → top, …). Out of the source, one corner, into
+ *     the target. An L that wraps the node's corner.
+ *
+ *  C. OPPOSITE sides (left → right, …). Out of the source, over/around the node
+ *     body in a lane `size` clear of it, and back in the far side.
+ */
+export declare function buildSelfLoopPoints(spec: SelfLoopSpec): FanoutPoint[];

package/src/libs/renderer/src/svg/link-fanout.js

@@ -0,0 +1,333 @@
+"use strict";
+/**
+ * link-fanout.ts — Wave 4 (Edges & links), Card 4
+ *
+ * Parallel-link auto-separation and self-loop routing. PURE GEOMETRY: no engine
+ * models, no DOM, no framework — points in, points out — so every rule below is
+ * unit-testable on its own and the SVG renderer only has to decide WHEN to call
+ * it, not HOW the shape is built.
+ *
+ * Why this is the biggest structural edge gap Grafloria had:
+ *   • Two links between the same pair of nodes were drawn on the same centre
+ *     line, one exactly on top of the other. ERD (two FKs between the same
+ *     tables), BPMN (a flow and its compensation) and state machines (a→b and
+ *     b→a) all produce that shape constantly.
+ *   • A link whose source node IS its target node was handed to the router as an
+ *     ordinary A→B route. The router excludes the link's own nodes from its
+ *     obstacle set, so the "route" was a degenerate stub inside the node body.
+ *
+ * The output of both routines is a POLYLINE, not a path string. That is
+ * deliberate: the renderer's existing path emitters already turn a polyline into
+ * the right shape per path type (rounded corners for `orthogonal`, a Catmull-Rom
+ * spline for `smooth`/`bezier`, straight segments for `direct`), and hit
+ * testing, jump-point detection, label placement and the edge toolbar all read
+ * the same polyline. One geometry, every consumer.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SELF_LOOP_SPACING = exports.DEFAULT_SELF_LOOP_SIZE = exports.DEFAULT_PARALLEL_SPACING = void 0;
+exports.parallelOffsets = parallelOffsets;
+exports.bundleNormal = bundleNormal;
+exports.separateParallelRoute = separateParallelRoute;
+exports.sideNormal = sideNormal;
+exports.buildSelfLoopPoints = buildSelfLoopPoints;
+/** Below this, an offset is "no offset" and the route is returned untouched. */
+const EPSILON = 1e-6;
+/** Default gap between adjacent links of a parallel bundle. */
+exports.DEFAULT_PARALLEL_SPACING = 16;
+/** Default self-loop bulge / lateral span / per-loop growth. */
+exports.DEFAULT_SELF_LOOP_SIZE = 40;
+exports.DEFAULT_SELF_LOOP_SPACING = 18;
+// ===========================================================================
+// Parallel links
+// ===========================================================================
+/**
+ * The signed lane offsets for a bundle of `count` parallel links, spaced
+ * `spacing` apart and centred on the un-separated route.
+ *
+ *   count 1 → [0]                     (a lone link NEVER moves — this is what
+ *                                      keeps every existing diagram pixel-identical)
+ *   count 2 → [-s/2, +s/2]
+ *   count 3 → [-s, 0, +s]
+ *
+ * Centred rather than one-sided so a bundle stays visually anchored on the line
+ * the single link used to occupy: adding a second relationship between two
+ * entities nudges both apart instead of shunting the diagram sideways.
+ */
+function parallelOffsets(count, spacing = exports.DEFAULT_PARALLEL_SPACING) {
+    if (count <= 1)
+        return count === 1 ? [0] : [];
+    const offsets = [];
+    for (let i = 0; i < count; i++) {
+        offsets.push((i - (count - 1) / 2) * spacing);
+    }
+    return offsets;
+}
+/**
+ * The unit LEFT normal of a → b, i.e. the axis a parallel bundle fans along.
+ *
+ * The caller must derive `a`/`b` from the bundle's CANONICAL node order (e.g.
+ * lower node id first), not from each link's own source → target. Otherwise the
+ * two halves of a bidirectional pair compute opposite normals, their opposite
+ * lane offsets cancel out, and both links land back on top of each other — the
+ * exact bug the card exists to fix.
+ *
+ * Degenerate input (coincident points) falls back to "up", so a bundle between
+ * two concentric nodes still fans instead of collapsing to NaN.
+ */
+function bundleNormal(a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const len = Math.hypot(dx, dy);
+    if (len < EPSILON)
+        return { x: 0, y: -1 };
+    return { x: -dy / len, y: dx / len };
+}
+/**
+ * Push a routed polyline onto its lane in a parallel bundle.
+ *
+ * The two ENDPOINTS never move: they are the ports, and a fan that pulled the
+ * line off its port would be worse than the overlap it fixes. Only the interior
+ * of the route is displaced.
+ *
+ *   • `orthogonal` — every INTERIOR segment is slid along its own normal. A
+ *     segment's neighbours run perpendicular to it, so sliding it only makes
+ *     them longer or shorter: the route stays exactly orthogonal (no diagonal
+ *     ever appears). A route with no interior segment (a straight 2-point
+ *     orthogonal run between aligned ports) gets an S-jog inserted instead,
+ *     because there is otherwise nothing to displace.
+ *   • `direct` / `smooth` / `bezier` — the interior points are displaced along
+ *     the bundle normal; a bare 2-point route gets an offset midpoint, which the
+ *     path emitters turn into a bow (a spline for smooth, a shallow V for
+ *     direct). This is the "curviness" fan GoJS and React Flow draw.
+ *
+ * `offset === 0` returns the input untouched (same array contents), so a link
+ * that is not part of a bundle is byte-identical to the pre-Wave-4 renderer.
+ */
+function separateParallelRoute(points, offset, normal, pathType) {
+    if (!points || points.length < 2 || Math.abs(offset) < EPSILON) {
+        return points;
+    }
+    return pathType === 'orthogonal'
+        ? separateOrthogonal(points, offset, normal)
+        : separateFreeform(points, offset, normal);
+}
+/** direct / smooth / bezier: bow the interior out along the bundle normal. */
+function separateFreeform(points, offset, normal) {
+    const dx = normal.x * offset;
+    const dy = normal.y * offset;
+    if (points.length === 2) {
+        // Nothing interior to move — mint a midpoint and displace THAT. The path
+        // emitters read >2 points as "curve through these", so this becomes a bow.
+        const a = points[0];
+        const b = points[1];
+        return [
+            Object.assign({}, a),
+            { x: (a.x + b.x) / 2 + dx, y: (a.y + b.y) / 2 + dy },
+            Object.assign({}, b),
+        ];
+    }
+    return points.map((p, i) => i === 0 || i === points.length - 1 ? Object.assign({}, p) : { x: p.x + dx, y: p.y + dy });
+}
+/**
+ * orthogonal: slide interior segments along their own normals.
+ *
+ * Segments s0..s(k-1) for points p0..pk. Interior = s1..s(k-2): the segments
+ * that touch neither endpoint. Sliding s_i moves p_i and p_{i+1} together, and
+ * because s_{i-1} and s_{i+1} are perpendicular to s_i, they simply grow or
+ * shrink — orthogonality is preserved exactly.
+ *
+ * The slide DIRECTION of each interior segment is chosen so it agrees with the
+ * bundle normal (positive dot product), which keeps the whole route on one side.
+ */
+function separateOrthogonal(points, offset, normal) {
+    const out = points.map(p => ({ x: p.x, y: p.y }));
+    const segCount = out.length - 1;
+    // Fewer than 4 points ⇒ no interior segment ⇒ nothing to slide.
+    if (segCount < 3) {
+        return orthogonalJog(points, offset, normal);
+    }
+    for (let i = 1; i <= segCount - 2; i++) {
+        const a = out[i];
+        const b = out[i + 1];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const len = Math.hypot(dx, dy);
+        if (len < EPSILON)
+            continue;
+        // The segment's own left normal, flipped to agree with the bundle normal so
+        // every interior segment of the route slides to the SAME side of the bundle.
+        let nx = -dy / len;
+        let ny = dx / len;
+        if (nx * normal.x + ny * normal.y < 0) {
+            nx = -nx;
+            ny = -ny;
+        }
+        // `offset` carries the lane's sign, so a negative lane slides the other way.
+        a.x += nx * offset;
+        a.y += ny * offset;
+        b.x += nx * offset;
+        b.y += ny * offset;
+    }
+    return out;
+}
+/**
+ * An orthogonal route with no interior segment (straight run between aligned
+ * ports) has nothing to displace, so give it one: an S-jog that leaves the
+ * endpoints alone, steps sideways by `offset` for the middle third, and steps
+ * back. Every segment stays axis-aligned because the jog axis is the axis the
+ * run is NOT on.
+ */
+function orthogonalJog(points, offset, normal) {
+    const a = points[0];
+    const b = points[points.length - 1];
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    // Axis of travel (the dominant one — a 2-point orthogonal run is axis-aligned
+    // anyway, and if it somehow is not, we still emit an orthogonal jog).
+    const horizontal = Math.abs(dx) >= Math.abs(dy);
+    // Jog along the OTHER axis. Sign comes from the bundle normal so a bundle's
+    // lanes stay ordered.
+    const jog = horizontal
+        ? offset * (normal.y >= 0 ? 1 : -1)
+        : offset * (normal.x >= 0 ? 1 : -1);
+    if (horizontal) {
+        const x1 = a.x + dx / 3;
+        const x2 = a.x + (2 * dx) / 3;
+        return [
+            Object.assign({}, a),
+            { x: x1, y: a.y },
+            { x: x1, y: a.y + jog },
+            { x: x2, y: b.y + jog },
+            { x: x2, y: b.y },
+            Object.assign({}, b),
+        ];
+    }
+    const y1 = a.y + dy / 3;
+    const y2 = a.y + (2 * dy) / 3;
+    return [
+        Object.assign({}, a),
+        { x: a.x, y: y1 },
+        { x: a.x + jog, y: y1 },
+        { x: b.x + jog, y: y2 },
+        { x: b.x, y: y2 },
+        Object.assign({}, b),
+    ];
+}
+/** Outward unit normal of a node side. */
+function sideNormal(side) {
+    switch (side) {
+        case 'left':
+            return { x: -1, y: 0 };
+        case 'right':
+            return { x: 1, y: 0 };
+        case 'top':
+            return { x: 0, y: -1 };
+        case 'bottom':
+            return { x: 0, y: 1 };
+    }
+}
+/** True when the side runs along the x axis (its normal is vertical). */
+function isHorizontalSide(side) {
+    return side === 'top' || side === 'bottom';
+}
+/**
+ * Route a self-loop as a polyline: out of the source port, around, back into the
+ * target port. EVERY segment is axis-aligned, which is what lets the three path
+ * emitters each do the right thing with the same points — rounded rectangle for
+ * `orthogonal`, a smooth closed-looking curve for `smooth`/`bezier`, a hard
+ * polygon for `direct`.
+ *
+ * Three cases, and they cover every port pairing:
+ *
+ *  A. SAME side (incl. the same port twice — the common case). The loop bulges
+ *     straight out and spans laterally. When the two attachment points coincide
+ *     (or sit closer together than `width`) they are SPREAD apart along the side
+ *     by `width`, clamped to the node's own span: a loop whose feet are the same
+ *     point has zero area and cannot be drawn at all.
+ *
+ *  B. PERPENDICULAR sides (right → top, …). Out of the source, one corner, into
+ *     the target. An L that wraps the node's corner.
+ *
+ *  C. OPPOSITE sides (left → right, …). Out of the source, over/around the node
+ *     body in a lane `size` clear of it, and back in the far side.
+ */
+function buildSelfLoopPoints(spec) {
+    const { rect, sourceSide, targetSide } = spec;
+    const size = Math.max(1, spec.size);
+    const width = Math.max(1, spec.width);
+    const nS = sideNormal(sourceSide);
+    const nT = sideNormal(targetSide);
+    // ---- A. same side -------------------------------------------------------
+    if (sourceSide === targetSide) {
+        // Lateral axis of that side: x for top/bottom, y for left/right.
+        const lateral = isHorizontalSide(sourceSide) ? 'x' : 'y';
+        const normalAxis = lateral === 'x' ? 'y' : 'x';
+        const spanLo = lateral === 'x' ? rect.x : rect.y;
+        const spanHi = lateral === 'x' ? rect.x + rect.width : rect.y + rect.height;
+        const a = Object.assign({}, spec.start);
+        const b = Object.assign({}, spec.end);
+        // Both feet must sit on the SAME line for the loop's out-and-back segments
+        // to be axis-aligned. They normally do — two ports on one side share that
+        // side's coordinate. They do NOT when `selfLoop.side` FORCES a side the
+        // ports are not actually on, and the loop then came out diagonal (which is
+        // wrong for `orthogonal` links and just ugly for the rest). Project them
+        // onto the forced side's edge.
+        if (Math.abs(a[normalAxis] - b[normalAxis]) > EPSILON) {
+            const edge = sourceSide === 'left' ? rect.x
+                : sourceSide === 'right' ? rect.x + rect.width
+                    : sourceSide === 'top' ? rect.y
+                        : rect.y + rect.height;
+            a[normalAxis] = edge;
+            b[normalAxis] = edge;
+        }
+        if (Math.abs(a[lateral] - b[lateral]) < width) {
+            // Spread the feet apart so the loop has a body. Centre the spread on the
+            // midpoint of the two ends, then clamp it inside the node's own side.
+            const mid = (a[lateral] + b[lateral]) / 2;
+            const half = Math.min(width / 2, Math.max(1, (spanHi - spanLo) / 2 - 1));
+            const lo = Math.max(spanLo + 1, Math.min(mid - half, spanHi - 1 - 2 * half));
+            a[lateral] = lo;
+            b[lateral] = lo + 2 * half;
+        }
+        const aOut = { x: a.x + nS.x * size, y: a.y + nS.y * size };
+        const bOut = { x: b.x + nS.x * size, y: b.y + nS.y * size };
+        return [a, aOut, bOut, b];
+    }
+    const a = Object.assign({}, spec.start);
+    const b = Object.assign({}, spec.end);
+    const aOut = { x: a.x + nS.x * size, y: a.y + nS.y * size };
+    const bOut = { x: b.x + nT.x * size, y: b.y + nT.y * size };
+    // ---- C. opposite sides --------------------------------------------------
+    if (nS.x === -nT.x && nS.y === -nT.y) {
+        if (isHorizontalSide(sourceSide)) {
+            // top ↔ bottom: run around the node in a vertical lane to its LEFT.
+            const laneX = rect.x - size;
+            return [
+                a,
+                aOut,
+                { x: laneX, y: aOut.y },
+                { x: laneX, y: bOut.y },
+                bOut,
+                b,
+            ];
+        }
+        // left ↔ right: run over the node in a horizontal lane ABOVE it.
+        const laneY = rect.y - size;
+        return [
+            a,
+            aOut,
+            { x: aOut.x, y: laneY },
+            { x: bOut.x, y: laneY },
+            bOut,
+            b,
+        ];
+    }
+    // ---- B. perpendicular sides --------------------------------------------
+    // One normal is horizontal and the other vertical, so the corner is simply
+    // "source's out-x, target's out-y" (or the mirror).
+    const corner = isHorizontalSide(sourceSide)
+        ? { x: bOut.x, y: aOut.y } // source normal vertical, target normal horizontal
+        : { x: aOut.x, y: bOut.y }; // source normal horizontal, target normal vertical
+    return [a, aOut, corner, bOut, b];
+}
+//# sourceMappingURL=link-fanout.js.map

package/src/libs/renderer/src/svg/link-hit-test.d.ts

@@ -0,0 +1,142 @@
+import type { Point } from '@grafloria/engine';
+/**
+ * Part-aware link hit-testing (Wave 1 — Edges & links foundation).
+ *
+ * Classic link hit-testing only answers "was the link hit?". Every downstream
+ * edge feature — inline label editing, endpoint reconnection, edge-toolbar
+ * placement — needs to know WHICH sub-part of the link was hit. This module is
+ * a pure, framework-agnostic geometry primitive that reports the sub-part plus
+ * useful local info (which label, or the 0-1 position along the path).
+ *
+ * It is deliberately side-effect free and model-free: callers pass the already
+ * routed points, label placements, endpoint/arrow anchor points and a query
+ * point, so the same logic can back both the SVG hit-area path and the
+ * interaction-handler's geometric distance checks.
+ */
+/** The sub-part of a link that a query point resolved to. */
+export type LinkPart = 'body' | 'label' | 'source-endpoint' | 'target-endpoint' | 'source-arrow' | 'target-arrow';
+/** Result of a part-aware link hit-test. */
+export interface LinkHitResult {
+    /** Which sub-part of the link was hit. */
+    part: LinkPart;
+    /** Index into the supplied labels array — present only for `part === 'label'`. */
+    labelIndex?: number;
+    /**
+     * Position along the whole path in [0, 1] where the body was hit — present
+     * only for `part === 'body'`. Useful for inserting waypoints / positioning
+     * an edge toolbar on the segment under the cursor.
+     */
+    t?: number;
+    /**
+     * Distance from the query to the winning part's own metric (handle centre,
+     * body path; 0 for inside a label box). For ranking hits ACROSS links.
+     */
+    distance?: number;
+    /**
+     * Distance from the query to this link's BODY path, present whenever the
+     * link has >= 2 points — even when a handle or label won the part. This is
+     * the cross-link tiebreaker: at a shared fan-out anchor every sibling's
+     * endpoint handle is equidistant, but only the link actually under the
+     * cursor has body distance ~0.
+     */
+    bodyDistance?: number;
+}
+/** A label placement, expressed independently of the model. */
+export interface LinkHitLabel {
+    /** Position along the path in [0, 1] (the label's on-path anchor). */
+    position: number;
+    /** Offset of the label box centre from its on-path anchor. */
+    offset?: Point;
+    /** Label box width in world units (falls back to {@link DEFAULT_LABEL_WIDTH}). */
+    width?: number;
+    /** Label box height in world units (falls back to {@link DEFAULT_LABEL_HEIGHT}). */
+    height?: number;
+}
+/** Inputs describing a single link's geometry for hit-testing. */
+export interface LinkHitTestOptions {
+    /** Routed points of the link, in world coordinates (>= 2 for a body). */
+    points: Point[];
+    /** Label placements, in render order (later entries drawn on top). */
+    labels?: LinkHitLabel[];
+    /** Source endpoint anchor (defaults to `points[0]`). Pass `null` to disable. */
+    sourceEndpoint?: Point | null;
+    /** Target endpoint anchor (defaults to last point). Pass `null` to disable. */
+    targetEndpoint?: Point | null;
+    /** Source arrowhead anchor. Omit / `null` when there is no source arrow. */
+    sourceArrow?: Point | null;
+    /** Target arrowhead anchor. Omit / `null` when there is no target arrow. */
+    targetArrow?: Point | null;
+    /** Grab radius around endpoint anchors (default {@link DEFAULT_ENDPOINT_RADIUS}). */
+    endpointRadius?: number;
+    /** Grab radius around arrowhead anchors (default {@link DEFAULT_ARROW_RADIUS}). */
+    arrowRadius?: number;
+    /** Fallback label box width when a label omits one. */
+    defaultLabelWidth?: number;
+    /** Fallback label box height when a label omits one. */
+    defaultLabelHeight?: number;
+}
+export declare const DEFAULT_ENDPOINT_RADIUS = 8;
+export declare const DEFAULT_ARROW_RADIUS = 10;
+export declare const DEFAULT_LABEL_WIDTH = 40;
+export declare const DEFAULT_LABEL_HEIGHT = 18;
+/**
+ * Grab distance (WORLD units) for a link body — "how close to the line counts
+ * as clicking it".
+ *
+ * Exported because it is now a CROSS-BACKEND contract, not an implementation
+ * detail of one hit path: `InteractionController` applies it to resolve a link
+ * in SVG mode, and the Canvas backend strokes each link's pick region with
+ * exactly `2 x` this width on the colour-keyed hit canvas. If the two ever
+ * disagreed, switching backend would change which link is under the cursor.
+ * (It was previously a bare `5` inlined in the controller.)
+ *
+ * This is the FLOOR, not the whole contract — see {@link linkBodyHitTolerance}.
+ */
+export declare const DEFAULT_LINK_HIT_TOLERANCE = 5;
+/** Default width of the SVG renderer's transparent interaction stroke. */
+export declare const DEFAULT_LINK_HIT_AREA_WIDTH = 12;
+/**
+ * Width of the invisible "interaction stroke" painted along a link.
+ *
+ * Sized from the LITERAL stroke width, never a `var(--…)` expression — the
+ * renderer resolves its literals before calling this. The `+ 8` keeps a grab
+ * margin around fat strokes (a 10px casing would otherwise be pixel-hunting).
+ */
+export declare function linkHitAreaWidth(literalStrokeWidth: number, configWidth?: number): number;
+/**
+ * The grab distance for a link BODY — the one number the painted invitation
+ * and the accepted press must both derive from.
+ *
+ * The SVG renderer paints a transparent hit-area stroke `linkHitAreaWidth`
+ * wide, but the interaction layer used to accept only the flat 5px floor: the
+ * ring between them was DEAD — the DOM caught the pointer (cursor, native
+ * focus — the "rectangle around the line" report) while the press selected
+ * nothing. Every consumer of "how close is close enough to a link" now calls
+ * this: the interaction controller (SVG mode), the canvas pick-buffer stroke,
+ * and the hit-area painter (at exactly `2 x` this, minus slop).
+ *
+ * `literalStrokeWidth` must be the resolved numeric width (fall back to 2 for
+ * theme-bound `var(--…)` widths, matching the renderer's own literal
+ * fallback).
+ */
+export declare function linkBodyHitTolerance(literalStrokeWidth: number, configWidth?: number): number;
+/**
+ * Arc-length interpolation of a point at position `t` (0-1) along a polyline.
+ * Mirrors {@link LinkModel.getPointAtPosition}'s polyline fallback so label
+ * anchors line up with what the renderer draws. Returns `null` for < 2 points.
+ */
+export declare function pointAtPositionOnPolyline(points: Point[], t: number): Point | null;
+/**
+ * Part-aware link hit-test.
+ *
+ * Precedence (highest first): endpoint / arrow handles (small grab radius) >
+ * labels (bounding box) > body (near the path). Within the handle tier the
+ * nearest handle wins, tie-broken by declaration order
+ * (source-endpoint, target-endpoint, source-arrow, target-arrow).
+ *
+ * @param options  the link geometry to test against
+ * @param query    the world-space point to test
+ * @param tolerance grab distance for the body (and label box padding)
+ * @returns the hit part with local info, or `null` when nothing is within reach
+ */
+export declare function hitTestLink(options: LinkHitTestOptions, query: Point, tolerance: number): LinkHitResult | null;