@dryui/ui 0.5.2 → 1.0.0

package/dist/diagram/edge-routing.js

@@ -1,11 +1,25 @@
 const EDGE_GAP = 14;
 const BUS_OFFSET_MIN = 28;
 const BUS_OFFSET_MAX = 48;
-export function computeEdgePaths(edges, positions, nodeDims, direction) {
+const DEFAULT_CORNER_RADIUS = 6;
+const BACK_EDGE_LANE_GAP = 32;
+const BACK_EDGE_LANE_STEP = 22;
+/** Minimum distance (in path units, measured along the polyline) between a
+ *  forward edge label and a directed-cluster boundary. Cross-boundary edges
+ *  whose natural midpoint sits closer than this to the cluster are slid along
+ *  the polyline toward the outside endpoint. */
+export const LABEL_BORDER_AVOID_PX = 28;
+function edgeKey(edge) {
+    return `${edge.from}->${edge.to}`;
+}
+export function computeEdgePaths(edges, positions, nodeDims, direction, opts = {}) {
+    const { cornerRadius = DEFAULT_CORNER_RADIUS, reversedEdges = new Set(), bounds, backEdgeLaneGap = BACK_EDGE_LANE_GAP, superNodeIds, backEdgeAnchorOverrides } = opts;
     const horizontal = direction === 'LR' || direction === 'RL';
     const bySource = new Map();
     const byTarget = new Map();
     for (const edge of edges) {
+        if (reversedEdges.has(edgeKey(edge)))
+            continue;
         const sourceList = bySource.get(edge.from) || [];
         sourceList.push(edge);
         bySource.set(edge.from, sourceList);
@@ -15,10 +29,53 @@ export function computeEdgePaths(edges, positions, nodeDims, direction) {
     }
     const sourceBusCache = new Map();
     const targetBusCache = new Map();
-    return edges.map((edge) => {
+    const laneCounters = {
+        over: 0,
+        under: 0,
+        left: 0,
+        right: 0
+    };
+    const out = [];
+    const collapsedOut = [];
+    edges.forEach((edge) => {
+        const isBack = reversedEdges.has(edgeKey(edge));
+        if (isBack && bounds) {
+            const side = pickBackEdgeSide(edge.loop, direction);
+            const overrides = backEdgeAnchorOverrides?.get(edgeKey(edge));
+            const sourceId = overrides?.source ?? edge.from;
+            const targetId = overrides?.target ?? edge.to;
+            const endpoints = getBackEdgeEndpoints(sourceId, targetId, positions, nodeDims, side);
+            if (!endpoints) {
+                out.push(emptyEdge(edge));
+                collapsedOut.push(null);
+                return;
+            }
+            const laneIndex = laneCounters[side]++;
+            const points = buildBackEdgePoints(endpoints, side, bounds, laneIndex, backEdgeLaneGap);
+            const collapsed = collapsePoints(points);
+            const path = buildPathFromCollapsed(collapsed, cornerRadius);
+            const midpoint = getMidpointFromCollapsed(collapsed);
+            const labelOffset = side === 'over' ? -10 : side === 'under' ? 14 : 0;
+            out.push({
+                from: edge.from,
+                to: edge.to,
+                path,
+                label: edge.label,
+                labelX: midpoint.x,
+                labelY: midpoint.y + labelOffset,
+                arrow: edge.arrow || 'end',
+                dashed: edge.dashed || false,
+                color: edge.color || 'neutral',
+                bounds: boundsFromPoints(collapsed)
+            });
+            collapsedOut.push(collapsed);
+            return;
+        }
         const endpoints = getEndpoints(edge, positions, nodeDims, horizontal);
         if (!endpoints) {
-            return emptyEdge(edge);
+            out.push(emptyEdge(edge));
+            collapsedOut.push(null);
+            return;
         }
         const sourceSiblings = bySource.get(edge.from) || [];
         const targetSiblings = byTarget.get(edge.to) || [];
@@ -64,20 +121,114 @@ export function computeEdgePaths(edges, positions, nodeDims, direction) {
             points = buildVerticalPoints(endpoints);
         }
         const collapsed = collapsePoints(points);
-        const path = buildPathFromCollapsed(collapsed);
-        const midpoint = getMidpointFromCollapsed(collapsed);
-        return {
+        const path = buildPathFromCollapsed(collapsed, cornerRadius);
+        const labelPoint = computeLabelAnchor(edge, collapsed, superNodeIds);
+        out.push({
             from: edge.from,
             to: edge.to,
             path,
             label: edge.label,
-            labelX: midpoint.x,
-            labelY: midpoint.y - (horizontal ? 12 : 0),
+            labelX: labelPoint.x,
+            labelY: labelPoint.y - (horizontal ? 12 : 0),
             arrow: edge.arrow || 'end',
             dashed: edge.dashed || false,
-            color: edge.color || 'neutral'
-        };
+            color: edge.color || 'neutral',
+            bounds: boundsFromPoints(collapsed)
+        });
+        collapsedOut.push(collapsed);
     });
+    return { edges: out, collapsed: collapsedOut };
+}
+function pickBackEdgeSide(override, direction) {
+    if (override)
+        return override;
+    return direction === 'LR' || direction === 'RL' ? 'over' : 'right';
+}
+function getBackEdgeEndpoints(fromId, toId, positions, nodeDims, side) {
+    const fromPos = positions.get(fromId);
+    const toPos = positions.get(toId);
+    const fromDims = nodeDims.get(fromId);
+    const toDims = nodeDims.get(toId);
+    if (!fromPos || !toPos || !fromDims || !toDims)
+        return undefined;
+    const fromCenter = {
+        x: fromPos.x + fromDims.w / 2,
+        y: fromPos.y + fromDims.h / 2
+    };
+    const toCenter = {
+        x: toPos.x + toDims.w / 2,
+        y: toPos.y + toDims.h / 2
+    };
+    switch (side) {
+        case 'over':
+            return {
+                fx: fromCenter.x,
+                fy: fromPos.y - EDGE_GAP,
+                tx: toCenter.x,
+                ty: toPos.y - EDGE_GAP
+            };
+        case 'under':
+            return {
+                fx: fromCenter.x,
+                fy: fromPos.y + fromDims.h + EDGE_GAP,
+                tx: toCenter.x,
+                ty: toPos.y + toDims.h + EDGE_GAP
+            };
+        case 'right':
+            return {
+                fx: fromPos.x + fromDims.w + EDGE_GAP,
+                fy: fromCenter.y,
+                tx: toPos.x + toDims.w + EDGE_GAP,
+                ty: toCenter.y
+            };
+        case 'left':
+            return {
+                fx: fromPos.x - EDGE_GAP,
+                fy: fromCenter.y,
+                tx: toPos.x - EDGE_GAP,
+                ty: toCenter.y
+            };
+    }
+}
+function buildBackEdgePoints(endpoints, side, bounds, laneIndex, laneGap) {
+    switch (side) {
+        case 'over': {
+            const outerY = bounds.minY - laneGap - laneIndex * BACK_EDGE_LANE_STEP;
+            return [
+                { x: endpoints.fx, y: endpoints.fy },
+                { x: endpoints.fx, y: outerY },
+                { x: endpoints.tx, y: outerY },
+                { x: endpoints.tx, y: endpoints.ty }
+            ];
+        }
+        case 'under': {
+            const outerY = bounds.maxY + laneGap + laneIndex * BACK_EDGE_LANE_STEP;
+            return [
+                { x: endpoints.fx, y: endpoints.fy },
+                { x: endpoints.fx, y: outerY },
+                { x: endpoints.tx, y: outerY },
+                { x: endpoints.tx, y: endpoints.ty }
+            ];
+        }
+        case 'right': {
+            const outerX = bounds.maxX + laneGap + laneIndex * BACK_EDGE_LANE_STEP;
+            return [
+                { x: endpoints.fx, y: endpoints.fy },
+                { x: outerX, y: endpoints.fy },
+                { x: outerX, y: endpoints.ty },
+                { x: endpoints.tx, y: endpoints.ty }
+            ];
+        }
+        case 'left': {
+            const outerX = bounds.minX - laneGap - laneIndex * BACK_EDGE_LANE_STEP;
+            return [
+                { x: endpoints.fx, y: endpoints.fy },
+                { x: outerX, y: endpoints.fy },
+                { x: outerX, y: endpoints.ty },
+                { x: endpoints.tx, y: endpoints.ty }
+            ];
+        }
+    }
 }
 function getEndpoints(edge, positions, nodeDims, horizontal) {
     const fromPos = positions.get(edge.from);
@@ -199,16 +350,61 @@ function buildVerticalBusPoints(endpoints, busY) {
     points.push({ x: endpoints.tx, y: endpoints.ty });
     return points;
 }
-function buildPathFromCollapsed(collapsed) {
+function buildPathFromCollapsed(collapsed, cornerRadius = 0) {
     if (collapsed.length === 0)
         return '';
     if (collapsed.length === 1) {
         const p = collapsed[0];
         return `M ${p.x} ${p.y}`;
     }
-    return collapsed
-        .map((point, index) => (index === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`))
-        .join(' ');
+    if (cornerRadius <= 0 || collapsed.length < 3) {
+        return collapsed
+            .map((point, index) => (index === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`))
+            .join(' ');
+    }
+    const first = collapsed[0];
+    const segments = [`M ${first.x} ${first.y}`];
+    for (let i = 1; i < collapsed.length - 1; i++) {
+        const prev = collapsed[i - 1];
+        const corner = collapsed[i];
+        const next = collapsed[i + 1];
+        const inDX = corner.x - prev.x;
+        const inDY = corner.y - prev.y;
+        const inLen = Math.hypot(inDX, inDY);
+        const outDX = next.x - corner.x;
+        const outDY = next.y - corner.y;
+        const outLen = Math.hypot(outDX, outDY);
+        if (inLen < 0.01 || outLen < 0.01) {
+            segments.push(`L ${corner.x} ${corner.y}`);
+            continue;
+        }
+        const r = Math.min(cornerRadius, inLen / 2, outLen / 2);
+        const startX = corner.x - (inDX / inLen) * r;
+        const startY = corner.y - (inDY / inLen) * r;
+        const endX = corner.x + (outDX / outLen) * r;
+        const endY = corner.y + (outDY / outLen) * r;
+        segments.push(`L ${startX} ${startY}`);
+        segments.push(`Q ${corner.x} ${corner.y} ${endX} ${endY}`);
+    }
+    const last = collapsed[collapsed.length - 1];
+    segments.push(`L ${last.x} ${last.y}`);
+    return segments.join(' ');
+}
+function boundsFromPoints(points) {
+    if (points.length === 0)
+        return undefined;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of points) {
+        if (p.x < minX)
+            minX = p.x;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    return { minX, minY, maxX, maxY };
 }
 function collapsePoints(points) {
     const collapsed = [];
@@ -233,7 +429,14 @@ function snapPoint(point) {
 function snapCoordinate(value) {
     return Math.round(value) + 0.5;
 }
-function getMidpointFromCollapsed(collapsed) {
+export function getPointAtFraction(collapsed, t) {
+    const fallback = {
+        point: collapsed[0] ?? { x: 0, y: 0 },
+        segmentIndex: 0,
+        axis: 'h'
+    };
+    if (collapsed.length < 2)
+        return fallback;
     let totalLength = 0;
     const segments = [];
     for (let index = 1; index < collapsed.length; index += 1) {
@@ -242,32 +445,119 @@ function getMidpointFromCollapsed(collapsed) {
         const length = Math.abs(to.x - from.x) + Math.abs(to.y - from.y);
         if (length === 0)
             continue;
-        segments.push({ from, to, length });
+        const axis = from.x !== to.x ? 'h' : 'v';
+        segments.push({ from, to, length, index, axis });
         totalLength += length;
     }
-    if (totalLength === 0) {
-        return collapsed[0] ?? { x: 0, y: 0 };
-    }
-    let remaining = totalLength / 2;
+    if (totalLength === 0)
+        return fallback;
+    const clamped = Math.max(0, Math.min(1, t));
+    let remaining = totalLength * clamped;
     for (const segment of segments) {
         if (remaining <= segment.length) {
-            if (segment.from.x !== segment.to.x) {
+            if (segment.axis === 'h') {
                 const direction = Math.sign(segment.to.x - segment.from.x);
                 return {
-                    x: segment.from.x + direction * remaining,
-                    y: segment.from.y
+                    point: { x: segment.from.x + direction * remaining, y: segment.from.y },
+                    segmentIndex: segment.index,
+                    axis: 'h'
                 };
             }
             const direction = Math.sign(segment.to.y - segment.from.y);
             return {
-                x: segment.from.x,
-                y: segment.from.y + direction * remaining
+                point: { x: segment.from.x, y: segment.from.y + direction * remaining },
+                segmentIndex: segment.index,
+                axis: 'v'
             };
         }
         remaining -= segment.length;
     }
-    return collapsed[collapsed.length - 1] ?? { x: 0, y: 0 };
+    const lastIndex = collapsed.length - 1;
+    const last = collapsed[lastIndex] ?? { x: 0, y: 0 };
+    return { point: last, segmentIndex: lastIndex, axis: 'h' };
+}
+function getMidpointFromCollapsed(collapsed) {
+    return getPointAtFraction(collapsed, 0.5).point;
+}
+function getPolylineLength(collapsed) {
+    let total = 0;
+    for (let i = 1; i < collapsed.length; i += 1) {
+        const a = collapsed[i - 1];
+        const b = collapsed[i];
+        total += Math.abs(b.x - a.x) + Math.abs(b.y - a.y);
+    }
+    return total;
+}
+/** Compute the on-polyline anchor point for an edge label. Defaults to the
+ *  geometric midpoint, but biases away from a directed-cluster boundary when
+ *  the natural midpoint would land within LABEL_BORDER_AVOID_PX of it. */
+function computeLabelAnchor(edge, collapsed, superNodeIds) {
+    if (collapsed.length < 2 || !superNodeIds) {
+        return getMidpointFromCollapsed(collapsed);
+    }
+    const fromIsCluster = superNodeIds.has(edge.from);
+    const toIsCluster = superNodeIds.has(edge.to);
+    if (fromIsCluster === toIsCluster) {
+        // Either both ends are clusters (not yet a real case) or neither —
+        // no directional bias to apply.
+        return getMidpointFromCollapsed(collapsed);
+    }
+    const length = getPolylineLength(collapsed);
+    if (length <= 0)
+        return getMidpointFromCollapsed(collapsed);
+    let labelT = 0.5;
+    if (toIsCluster) {
+        // Cluster is at t=1. Pull label toward t=0 so it stays AVOID_PX from
+        // the boundary. Cap above 0.1 so it never collides with the source.
+        const maxT = 1 - LABEL_BORDER_AVOID_PX / length;
+        labelT = Math.max(0.1, Math.min(0.5, maxT));
+    }
+    else {
+        // Cluster is at t=0. Push label toward t=1.
+        const minT = LABEL_BORDER_AVOID_PX / length;
+        labelT = Math.min(0.9, Math.max(0.5, minT));
+    }
+    if (labelT === 0.5)
+        return getMidpointFromCollapsed(collapsed);
+    return getPointAtFraction(collapsed, labelT).point;
+}
+/** Split a collapsed polyline at the entry/exit intersections with a box centered on a point.
+ * The box is placed perpendicular to the segment containing the split point, so the polyline
+ * enters one side of the box and exits the opposite side. Returns null if the split is degenerate.
+ */
+export function splitCollapsedAtBox(collapsed, segmentIndex, box, axis) {
+    if (collapsed.length < 2 || segmentIndex < 1 || segmentIndex >= collapsed.length)
+        return null;
+    const segFrom = collapsed[segmentIndex - 1];
+    const segTo = collapsed[segmentIndex];
+    let entryPoint;
+    let exitPoint;
+    if (axis === 'h') {
+        // Horizontal segment — polyline enters left side of box, exits right
+        const goingRight = segTo.x > segFrom.x;
+        const leftEdge = box.x;
+        const rightEdge = box.x + box.width;
+        entryPoint = { x: goingRight ? leftEdge : rightEdge, y: segFrom.y };
+        exitPoint = { x: goingRight ? rightEdge : leftEdge, y: segFrom.y };
+    }
+    else {
+        // Vertical segment — polyline enters top, exits bottom (or vice versa)
+        const goingDown = segTo.y > segFrom.y;
+        const topEdge = box.y;
+        const bottomEdge = box.y + box.height;
+        entryPoint = { x: segFrom.x, y: goingDown ? topEdge : bottomEdge };
+        exitPoint = { x: segFrom.x, y: goingDown ? bottomEdge : topEdge };
+    }
+    // Box edges are already in the snapped frame (derived from box coords which
+    // came from collapsed/snapped points). Re-snapping would drift them by 1px.
+    const entry = collapsed.slice(0, segmentIndex);
+    entry.push(entryPoint);
+    const exit = [exitPoint, ...collapsed.slice(segmentIndex)];
+    if (entry.length < 2 || exit.length < 2)
+        return null;
+    return { entry, exit };
 }
+export { collapsePoints, buildPathFromCollapsed };
 export function emptyEdge(edge) {
     return {
         from: edge.from,