@diagrammo/dgmo 0.6.1 → 0.6.2

package/src/infra/renderer.ts

@@ -129,10 +129,352 @@ const REJECT_COUNT_MAX = 3;
 // Edge path generator
 // ============================================================
 
-const lineGenerator = d3Shape.line<{ x: number; y: number }>()
-  .x((d) => d.x)
-  .y((d) => d.y)
-  .curve(d3Shape.curveBasis);
+type Pt = { x: number; y: number };
+
+/** Produce an SVG path string for a sequence of waypoints.
+ *  2-point paths use curveBumpX/Y (nice S-curve).
+ *  Multi-point obstacle-avoiding paths use CatmullRom for a smooth fit. */
+function buildPathD(pts: Pt[], direction: 'LR' | 'TB'): string {
+  const gen = d3Shape.line<Pt>().x((d) => d.x).y((d) => d.y);
+  if (pts.length <= 2) {
+    gen.curve(direction === 'TB' ? d3Shape.curveBumpY : d3Shape.curveBumpX);
+  } else {
+    gen.curve(d3Shape.curveCatmullRom.alpha(0.5));
+  }
+  return gen(pts) ?? '';
+}
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+/** Port-order exit and enter points for edges to eliminate fan-out crossings.
+ *
+ *  For each node with ≥2 outgoing edges: sort edges by target perpendicular coord
+ *  and assign source-border exit positions in the same order.
+ *  For each node with ≥2 incoming edges: sort edges by source perpendicular coord
+ *  and assign target-border enter positions in the same order.
+ *
+ *  Returns two maps keyed by "sourceId:targetId":
+ *  - srcPts: port-ordered exit point on the source border
+ *  - tgtPts: port-ordered enter point on the target border */
+function computePortPts(
+  edges: InfraLayoutEdge[],
+  nodeMap: Map<string, InfraLayoutNode>,
+  direction: 'LR' | 'TB',
+): { srcPts: Map<string, Pt>; tgtPts: Map<string, Pt> } {
+  const srcPts = new Map<string, Pt>();
+  const tgtPts = new Map<string, Pt>();
+  const PAD = 0.1; // keep ports 10% in from node edges
+
+  const activeEdges = edges.filter((e) => e.points.length > 0);
+
+  // ── Source (exit) port ordering ──────────────────────────────────────────
+  const bySource = new Map<string, InfraLayoutEdge[]>();
+  for (const e of activeEdges) {
+    if (!bySource.has(e.sourceId)) bySource.set(e.sourceId, []);
+    bySource.get(e.sourceId)!.push(e);
+  }
+  for (const [sourceId, es] of bySource) {
+    if (es.length < 2) continue;
+    const source = nodeMap.get(sourceId);
+    if (!source) continue;
+    const sorted = es
+      .map((e) => ({ e, t: nodeMap.get(e.targetId) }))
+      .filter((x): x is { e: InfraLayoutEdge; t: InfraLayoutNode } => x.t != null)
+      .sort((a, b) => (direction === 'LR' ? a.t.y - b.t.y : a.t.x - b.t.x));
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, t } = sorted[i];
+      const isBackward = direction === 'LR' ? t.x < source.x : t.y < source.y;
+      if (direction === 'LR') {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? source.x - source.width / 2 : source.x + source.width / 2,
+          y: source.y - source.height / 2 + frac * source.height,
+        });
+      } else {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: source.x - source.width / 2 + frac * source.width,
+          y: isBackward ? source.y - source.height / 2 : source.y + source.height / 2,
+        });
+      }
+    }
+  }
+
+  // ── Target (enter) port ordering ─────────────────────────────────────────
+  const byTarget = new Map<string, InfraLayoutEdge[]>();
+  for (const e of activeEdges) {
+    if (!byTarget.has(e.targetId)) byTarget.set(e.targetId, []);
+    byTarget.get(e.targetId)!.push(e);
+  }
+  for (const [targetId, es] of byTarget) {
+    if (es.length < 2) continue;
+    const target = nodeMap.get(targetId);
+    if (!target) continue;
+    const sorted = es
+      .map((e) => ({ e, s: nodeMap.get(e.sourceId) }))
+      .filter((x): x is { e: InfraLayoutEdge; s: InfraLayoutNode } => x.s != null)
+      .sort((a, b) => (direction === 'LR' ? a.s.y - b.s.y : a.s.x - b.s.x));
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, s } = sorted[i];
+      const isBackward = direction === 'LR' ? target.x < s.x : target.y < s.y;
+      if (direction === 'LR') {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? target.x + target.width / 2 : target.x - target.width / 2,
+          y: target.y - target.height / 2 + frac * target.height,
+        });
+      } else {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: target.x - target.width / 2 + frac * target.width,
+          y: isBackward ? target.y + target.height / 2 : target.y - target.height / 2,
+        });
+      }
+    }
+  }
+
+  return { srcPts, tgtPts };
+}
+
+/** Find the Y lane for routing around blocking obstacles.
+ *  Prefers threading through Y gaps between blocking rects over routing above/below all.
+ *  Picks the candidate closest to targetY to minimise arc size.
+ *
+ *  Uses a tight merge expansion (MERGE_SLOP) so narrow inter-group gaps are preserved
+ *  and can be threaded, rather than being swallowed into one large merged interval. */
+function findRoutingLane(
+  blocking: Rect[],
+  targetY: number,
+  margin: number,
+): number {
+  // Use a small slop for merging so closely-spaced (but distinct) groups
+  // stay as separate intervals and the gap between them can be threaded.
+  const MERGE_SLOP = 4;
+  const sorted = [...blocking].sort((a, b) => (a.y + a.height / 2) - (b.y + b.height / 2));
+  const merged: [number, number][] = [];
+  for (const r of sorted) {
+    const lo = r.y - MERGE_SLOP;
+    const hi = r.y + r.height + MERGE_SLOP;
+    if (merged.length && lo <= merged[merged.length - 1][1]) {
+      merged[merged.length - 1][1] = Math.max(merged[merged.length - 1][1], hi);
+    } else {
+      merged.push([lo, hi]);
+    }
+  }
+  if (merged.length === 0) return targetY;
+
+  // Candidate lanes: above all, below all, mid-points of gaps wide enough to thread.
+  // MIN_GAP: allow narrow gaps (edge is ~1.5px, so even 10px clearance is fine).
+  const MIN_GAP = 10;
+  const candidates: number[] = [
+    merged[0][0] - margin,                      // above all blocking rects
+    merged[merged.length - 1][1] + margin,      // below all blocking rects
+  ];
+  for (let i = 0; i < merged.length - 1; i++) {
+    const gapLo = merged[i][1];
+    const gapHi = merged[i + 1][0];
+    if (gapHi - gapLo >= MIN_GAP) {
+      candidates.push((gapLo + gapHi) / 2);    // thread through the gap
+    }
+  }
+
+  // Return the candidate closest to targetY (tightest arc)
+  return candidates.reduce((best, c) =>
+    Math.abs(c - targetY) < Math.abs(best - targetY) ? c : best,
+    candidates[0]);
+}
+
+/** Check whether segment p1→p2 passes through (or has an endpoint inside) the rectangle. */
+function segmentIntersectsRect(p1: Pt, p2: Pt, rect: { x: number; y: number; width: number; height: number }): boolean {
+  const { x: rx, y: ry, width: rw, height: rh } = rect;
+  const rr = rx + rw;
+  const rb = ry + rh;
+  // Point-in-rect check
+  const inRect = (p: Pt) => p.x >= rx && p.x <= rr && p.y >= ry && p.y <= rb;
+  if (inRect(p1) || inRect(p2)) return true;
+  // Segment bounding box vs rect
+  if (Math.max(p1.x, p2.x) < rx || Math.min(p1.x, p2.x) > rr) return false;
+  if (Math.max(p1.y, p2.y) < ry || Math.min(p1.y, p2.y) > rb) return false;
+  // Cross product sign helper (z-component of cross product)
+  const cross = (o: Pt, a: Pt, b: Pt) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+  // Does segment p1p2 cross segment a→b?
+  const crosses = (a: Pt, b: Pt) => {
+    const d1 = cross(a, b, p1);
+    const d2 = cross(a, b, p2);
+    const d3 = cross(p1, p2, a);
+    const d4 = cross(p1, p2, b);
+    return ((d1 > 0 && d2 < 0) || (d1 < 0 && d2 > 0)) &&
+           ((d3 > 0 && d4 < 0) || (d3 < 0 && d4 > 0));
+  };
+  const tl: Pt = { x: rx, y: ry };
+  const tr: Pt = { x: rr, y: ry };
+  const br: Pt = { x: rr, y: rb };
+  const bl: Pt = { x: rx, y: rb };
+  return crosses(tl, tr) || crosses(tr, br) || crosses(br, bl) || crosses(bl, tl);
+}
+
+/** Check whether the curveBumpX/Y S-curve from sc to tc intersects rect.
+ *
+ *  curveBumpX (LR) stays near sc.y for the left half of the edge, transitions
+ *  vertically at the midpoint, then stays near tc.y for the right half.
+ *  Approximated as three Manhattan segments:
+ *    sc → (midX, sc.y) → (midX, tc.y) → tc
+ *
+ *  curveBumpY (TB) mirrors this on the other axis. */
+function curveIntersectsRect(sc: Pt, tc: Pt, rect: Rect, direction: 'LR' | 'TB'): boolean {
+  if (direction === 'LR') {
+    const midX = (sc.x + tc.x) / 2;
+    const m1: Pt = { x: midX, y: sc.y };
+    const m2: Pt = { x: midX, y: tc.y };
+    return segmentIntersectsRect(sc, m1, rect)
+        || segmentIntersectsRect(m1, m2, rect)
+        || segmentIntersectsRect(m2, tc, rect);
+  } else {
+    const midY = (sc.y + tc.y) / 2;
+    const m1: Pt = { x: sc.x, y: midY };
+    const m2: Pt = { x: tc.x, y: midY };
+    return segmentIntersectsRect(sc, m1, rect)
+        || segmentIntersectsRect(m1, m2, rect)
+        || segmentIntersectsRect(m2, tc, rect);
+  }
+}
+
+/** Compute waypoints for an edge.
+ *
+ *  - Backward edges (going against the primary layout direction) arc above/left
+ *    of all layout content to avoid crossing everything.
+ *  - Forward edges that cross a group bounding box or an unrelated node arc
+ *    above or below the collective blocking region (gap-aware Y routing).
+ *  - Clear forward edges use a direct 2-point path (curveBumpX/Y S-curve). */
+function edgeWaypoints(
+  source: InfraLayoutNode,
+  target: InfraLayoutNode,
+  groups: InfraLayoutGroup[],
+  nodes: InfraLayoutNode[],
+  direction: 'LR' | 'TB',
+  margin = 30,
+  srcExitPt?: Pt, // port-ordered exit point on source border
+  tgtEnterPt?: Pt, // port-ordered enter point on target border
+): Pt[] {
+  const sc: Pt = { x: source.x, y: source.y };
+  const tc: Pt = { x: target.x, y: target.y };
+
+  // ── Backward edge handling ───────────────────────────────────────────────
+  // curveBumpX/Y on a backward edge creates a loop. Route around obstacles
+  // in the backward path's axis band for a tight arc (not global min/max).
+  const isBackward = direction === 'LR' ? tc.x < sc.x : tc.y < sc.y;
+  if (isBackward) {
+    if (direction === 'LR') {
+      // Collect group/node rects that overlap the X band [tc.x, sc.x]
+      const xBandObs: Rect[] = [];
+      for (const g of groups) {
+        if (g.x + g.width < tc.x - margin || g.x > sc.x + margin) continue;
+        xBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nLeft = n.x - n.width / 2;
+        const nRight = n.x + n.width / 2;
+        if (nRight < tc.x - margin || nLeft > sc.x + margin) continue;
+        xBandObs.push({ x: nLeft, y: n.y - n.height / 2, width: n.width, height: n.height });
+      }
+      const midY   = (sc.y + tc.y) / 2;
+      const routeY = xBandObs.length > 0 ? findRoutingLane(xBandObs, midY, margin) : midY;
+      const exitBorder: Pt = srcExitPt ?? nodeBorderPoint(source, { x: sc.x, y: routeY });
+      const exitPt   : Pt = { x: exitBorder.x, y: routeY };
+      const enterPt  : Pt = { x: tc.x, y: routeY };
+      const tp = tgtEnterPt ?? nodeBorderPoint(target, enterPt);
+      return srcExitPt
+        ? [srcExitPt, exitPt, enterPt, tp]
+        : [exitBorder, exitPt, enterPt, tp];
+    } else {
+      // TB backward: collect obstacles in Y band [tc.y, sc.y]; find X lane
+      const yBandObs: Rect[] = [];
+      for (const g of groups) {
+        if (g.y + g.height < tc.y - margin || g.y > sc.y + margin) continue;
+        yBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nTop = n.y - n.height / 2;
+        const nBot = n.y + n.height / 2;
+        if (nBot < tc.y - margin || nTop > sc.y + margin) continue;
+        yBandObs.push({ x: n.x - n.width / 2, y: nTop, width: n.width, height: n.height });
+      }
+      // Rotate axes so findRoutingLane (which works in Y) resolves an X lane
+      const rotated = yBandObs.map((r) => ({ x: r.y, y: r.x, width: r.height, height: r.width }));
+      const midX    = (sc.x + tc.x) / 2;
+      const routeX  = rotated.length > 0 ? findRoutingLane(rotated, midX, margin) : midX;
+      const exitPt  : Pt = srcExitPt ?? { x: routeX, y: sc.y };
+      const enterPt : Pt = { x: routeX, y: tc.y };
+      return [
+        srcExitPt ?? nodeBorderPoint(source, exitPt),
+        exitPt,
+        enterPt,
+        tgtEnterPt ?? nodeBorderPoint(target, enterPt),
+      ];
+    }
+  }
+
+  // ── Forward edge: obstacle avoidance (groups + individual nodes) ─────────
+  const blocking: { x: number; y: number; width: number; height: number }[] = [];
+  const blockingGroupIds = new Set<string>();
+
+  // Use actual path endpoints (port-ordered) for more accurate blocking detection.
+  // Node centers underestimate midX/midY, causing nearby obstacles to go undetected.
+  const pathSrc: Pt = srcExitPt ?? sc;
+  const pathTgt: Pt = tgtEnterPt ?? tc;
+
+  // Groups (excluding source/target groups)
+  for (const g of groups) {
+    if (g.id === source.groupId || g.id === target.groupId) continue;
+    const gRect: Rect = { x: g.x, y: g.y, width: g.width, height: g.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, gRect, direction)) {
+      blocking.push(gRect);
+      blockingGroupIds.add(g.id);
+    }
+  }
+
+  // Individual nodes not already covered by a blocking group rect
+  for (const n of nodes) {
+    if (n.id === source.id || n.id === target.id) continue;
+    // Skip nodes in source/target groups (routing around the group handles them)
+    if (n.groupId && (n.groupId === source.groupId || n.groupId === target.groupId)) continue;
+    // Skip nodes inside a group whose bounding box is already blocking
+    if (n.groupId && blockingGroupIds.has(n.groupId)) continue;
+    const nodeRect: Rect = { x: n.x - n.width / 2, y: n.y - n.height / 2, width: n.width, height: n.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, nodeRect, direction)) {
+      blocking.push(nodeRect);
+    }
+  }
+
+  if (blocking.length === 0) {
+    // Direct 2-point path — use port-ordered entry/exit points when provided.
+    const sp = srcExitPt ?? nodeBorderPoint(source, tc);
+    const tp = tgtEnterPt ?? nodeBorderPoint(target, sp);
+    return [sp, tp];
+  }
+
+  const obsLeft  = Math.min(...blocking.map((o) => o.x));
+  const obsRight = Math.max(...blocking.map((o) => o.x + o.width));
+
+  const routeY = findRoutingLane(blocking, tc.y, margin);
+
+  // Clamp exit/enter X to [sc.x, tc.x] for LR so the path never reverses
+  // direction when an obstacle's bounding box extends past source or target.
+  const exitX  = direction === 'LR' ? Math.max(sc.x, obsLeft  - margin) : obsLeft  - margin;
+  const enterX = direction === 'LR' ? Math.min(tc.x, obsRight + margin) : obsRight + margin;
+  const exitPt  : Pt = { x: exitX,  y: routeY };
+  const enterPt : Pt = { x: enterX, y: routeY };
+
+  const tp = tgtEnterPt ?? nodeBorderPoint(target, enterPt);
+
+  if (srcExitPt) {
+    return [srcExitPt, exitPt, enterPt, tp];
+  }
+
+  return [nodeBorderPoint(source, exitPt), exitPt, enterPt, tp];
+}
 
 /** Compute the point on a node's border closest to an external target point. */
 function nodeBorderPoint(
@@ -597,12 +939,15 @@ function renderEdgePaths(
   svg: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   edges: InfraLayoutEdge[],
   nodes: InfraLayoutNode[],
+  groups: InfraLayoutGroup[],
   palette: PaletteColors,
   isDark: boolean,
   animate: boolean,
+  direction: 'LR' | 'TB',
 ) {
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   const maxRps = Math.max(...edges.map((e) => e.computedRps), 1);
+  const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
 
   for (const edge of edges) {
     if (edge.points.length === 0) continue;
@@ -612,29 +957,13 @@ function renderEdgePaths(
     const color = edgeColor(edge, palette);
     const strokeW = edgeWidth();
 
-    // Ensure dagre waypoints are ordered source→target (not guaranteed by dagre)
-    let pts = edge.points;
-    if (sourceNode && targetNode && pts.length >= 2) {
-      const first = pts[0];
-      const distFirstToSource = (first.x - sourceNode.x) ** 2 + (first.y - sourceNode.y) ** 2;
-      const distFirstToTarget = (first.x - targetNode.x) ** 2 + (first.y - targetNode.y) ** 2;
-      if (distFirstToTarget < distFirstToSource) {
-        pts = [...pts].reverse();
-      }
-    }
-
-    // Prepend source border point and append target border point so edges
-    // visually connect to node boundaries (dagre waypoints float between nodes)
-    if (sourceNode && pts.length > 0) {
-      const bp = nodeBorderPoint(sourceNode, pts[0]);
-      pts = [bp, ...pts];
-    }
-    if (targetNode && pts.length > 0) {
-      const bp = nodeBorderPoint(targetNode, pts[pts.length - 1]);
-      pts = [...pts, bp];
-    }
-
-    const pathD = lineGenerator(pts) ?? '';
+    if (!sourceNode || !targetNode) continue;
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const pts = edgeWaypoints(
+      sourceNode, targetNode, groups, nodes, direction, 30,
+      srcPts.get(key), tgtPts.get(key),
+    );
+    const pathD = buildPathD(pts, direction);
     const edgeG = svg.append('g')
       .attr('class', 'infra-edge')
       .attr('data-line-number', edge.lineNumber);
@@ -674,16 +1003,30 @@ function renderEdgePaths(
 function renderEdgeLabels(
   svg: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   edges: InfraLayoutEdge[],
+  nodes: InfraLayoutNode[],
+  groups: InfraLayoutGroup[],
   palette: PaletteColors,
   isDark: boolean,
   animate: boolean,
+  direction: 'LR' | 'TB',
 ) {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
   for (const edge of edges) {
     if (edge.points.length === 0) continue;
     if (!edge.label) continue;
 
-    const midIdx = Math.floor(edge.points.length / 2);
-    const midPt = edge.points[midIdx];
+    const sourceNode = nodeMap.get(edge.sourceId);
+    const targetNode = nodeMap.get(edge.targetId);
+    if (!sourceNode || !targetNode) continue;
+
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const wps = edgeWaypoints(
+      sourceNode, targetNode, groups, nodes, direction, 30,
+      srcPts.get(key), tgtPts.get(key),
+    );
+    // Label midpoint: middle waypoint of the routed path
+    const midPt = wps[Math.floor(wps.length / 2)];
     const labelText = edge.label;
 
     const g = svg.append('g')
@@ -711,7 +1054,7 @@ function renderEdgeLabels(
 
     // When animated, add a wider invisible hover zone so labels appear on hover
     if (animate) {
-      const pathD = lineGenerator(edge.points) ?? '';
+      const pathD = buildPathD(wps, direction);
       g.insert('path', ':first-child')
         .attr('d', pathD)
         .attr('fill', 'none')
@@ -1541,7 +1884,7 @@ export function renderInfra(
 
   // Render layers: groups (back), edge paths, nodes, reject particles, edge labels (front)
   renderGroups(svg, layout.groups, palette, isDark);
-  renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
+  renderEdgePaths(svg, layout.edges, layout.nodes, layout.groups, palette, isDark, shouldAnimate, layout.direction);
   const fanoutSourceIds = collectFanoutSourceIds(layout.edges);
   const scaledGroupIds = new Set<string>(
     layout.groups
@@ -1556,7 +1899,7 @@ export function renderInfra(
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }
-  renderEdgeLabels(svg, layout.edges, palette, isDark, shouldAnimate);
+  renderEdgeLabels(svg, layout.edges, layout.nodes, layout.groups, palette, isDark, shouldAnimate, layout.direction);
 
   // Legend at bottom
   if (hasLegend) {

package/src/initiative-status/layout.ts

@@ -28,8 +28,8 @@ export interface ISLayoutEdge {
   status: import('./types').InitiativeStatus;
   lineNumber: number;
   // Layout contract for points[]:
-  //   Back-edges:       3 points — [src.bottom/top_center, arc_control, tgt.bottom/top_center]
-  //   Y-displaced:      3 points — [src.bottom/top_center, diagonal_mid, tgt.left_center]
+  //   Back-edges:       5 points — [src.top/bottom_center, depart_ctrl, arc_control, approach_ctrl, tgt.top/bottom_center]
+  //   Top/bottom-exit:  4 points — [src.top/bottom_center, depart_ctrl, tgt_approach, tgt.left_center]
   //   4-point elbow:    points[0] and points[last] pinned at node center Y; interior fans via yOffset
   //   fixedDagrePoints: points[0]=src.right, points[last]=tgt.left; interior from dagre
   points: { x: number; y: number }[];
@@ -81,6 +81,7 @@ const PARALLEL_EDGE_MARGIN = 12; // total vertical margin reserved at top+bottom
 const MAX_PARALLEL_EDGES = 5; // at most this many edges rendered between any directed source→target pair
 const BACK_EDGE_MARGIN = 40; // clearance below/above nodes for back-edge arcs (~half NODESEP)
 const BACK_EDGE_MIN_SPREAD = Math.round(NODE_WIDTH * 0.75); // minimum horizontal arc spread for near-same-X back-edges
+const TOP_EXIT_STEP = 10; // px: control-point offset giving near-vertical departure tangent for top/bottom-exit elbows
 const CHAR_WIDTH_RATIO = 0.6;
 const NODE_FONT_SIZE = 13;
 const NODE_TEXT_PADDING = 12;
@@ -221,15 +222,14 @@ export function layoutInitiativeStatus(
     const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
     const dagrePoints: { x: number; y: number }[] = dagreEdge?.points ?? [];
     const hasIntermediateRank = allNodeX.some((x) => x > src.x + 20 && x < tgt.x - 20);
-    const step = Math.min((enterX - exitX) * 0.15, 20);
+    const step = Math.max(0, Math.min((enterX - exitX) * 0.15, 20)); // clamped ≥0: guards overlapping nodes
 
-    // 4-branch routing: isBackEdge → isYDisplaced → 4-point elbow → fixedDagrePoints
-    const isBackEdge = tgt.x < src.x - 5; // 5px epsilon: same-rank same-X nodes must not false-match
-    const isYDisplaced = !isBackEdge
-      && Math.abs(tgt.y - src.y) > NODESEP;
-    // Note: hasIntermediateRank guard intentionally omitted from isYDisplaced — the > NODESEP threshold
-    // already filters normal adjacent-rank fans (which spread by ~NODESEP); the guard would block the
-    // original use case (fan targets far below source in the same adjacent rank).
+    // 5-branch routing: isBackEdge → isTopExit → isBottomExit → 4-point elbow → fixedDagrePoints
+    const isBackEdge   = tgt.x < src.x - 5; // 5px epsilon: same-rank same-X nodes must not false-match
+    // Guards: tgt.x > src.x (strict) keeps step positive; !hasIntermediateRank defers multi-rank
+    // displaced edges to fixedDagrePoints so dagre can route around intermediate nodes.
+    const isTopExit    = !isBackEdge && tgt.x > src.x && !hasIntermediateRank && tgt.y < src.y - NODESEP;
+    const isBottomExit = !isBackEdge && tgt.x > src.x && !hasIntermediateRank && tgt.y > src.y + NODESEP;
 
     let points: { x: number; y: number }[];
 
@@ -248,36 +248,52 @@ export function layoutInitiativeStatus(
         ? rawMidX + spreadDir * BACK_EDGE_MIN_SPREAD
         : rawMidX;
       const midX = Math.min(src.x, Math.max(tgt.x, unclamped));
+      // Clamped departure/approach control points give near-orthogonal tangents at node edges.
+      // For narrow back-edges (|src.x - tgt.x| < 2*TOP_EXIT_STEP), clamps degrade to midX±1 — valid.
+      const srcDepart   = Math.max(midX + 1, src.x - TOP_EXIT_STEP);
+      const tgtApproach = Math.min(midX - 1, tgt.x + TOP_EXIT_STEP);
       if (routeAbove) {
         const arcY = Math.min(src.y - srcHalfH, tgt.y - tgtHalfH) - BACK_EDGE_MARGIN;
         points = [
-          { x: src.x, y: src.y - srcHalfH },
-          { x: midX,  y: arcY },
-          { x: tgt.x, y: tgt.y - tgtHalfH },
+          { x: src.x,       y: src.y - srcHalfH },
+          { x: srcDepart,   y: src.y - srcHalfH - TOP_EXIT_STEP },
+          { x: midX,        y: arcY },
+          { x: tgtApproach, y: tgt.y - tgtHalfH - TOP_EXIT_STEP },
+          { x: tgt.x,       y: tgt.y - tgtHalfH },
         ];
       } else {
         const arcY = Math.max(src.y + srcHalfH, tgt.y + tgtHalfH) + BACK_EDGE_MARGIN;
         points = [
-          { x: src.x, y: src.y + srcHalfH },
-          { x: midX,  y: arcY },
-          { x: tgt.x, y: tgt.y + tgtHalfH },
+          { x: src.x,       y: src.y + srcHalfH },
+          { x: srcDepart,   y: src.y + srcHalfH + TOP_EXIT_STEP },
+          { x: midX,        y: arcY },
+          { x: tgtApproach, y: tgt.y + tgtHalfH + TOP_EXIT_STEP },
+          { x: tgt.x,       y: tgt.y + tgtHalfH },
         ];
       }
-    } else if (isYDisplaced) {
-      // 3-point diagonal: exit bottom/top-center of source, enter left-center of target.
-      // yOffset applied as X-spread at exit AND Y-spread at entry so parallel edges maintain
-      // a consistent visual gap along their entire length (not just at one end).
-      const exitY = tgt.y > src.y + NODESEP
-        ? src.y + src.height / 2   // target is below — exit bottom
-        : src.y - src.height / 2;  // target is above — exit top
-      const spreadExitX = src.x + yOffset;
-      const spreadEntryY = tgt.y + yOffset;
-      const midX = (spreadExitX + enterX) / 2; // always monotone ✓ (yOffset << node gap)
-      const midY = (exitY + spreadEntryY) / 2;
+    } else if (isTopExit) {
+      // 4-point top-exit elbow: exits top of source ~vertically, arrives left of target horizontally.
+      // Top exit keeps this edge ABOVE the horizontal right-exit bundle → avoids crossings.
+      // yOffset repurposed as X-spread for top/bottom-exit branches (same magnitude, different axis).
+      // p1x: floor at src.x prevents negative-yOffset edges from going left of origin (breaks monotone X);
+      // ceiling at midpoint-1 prevents overshooting for large positive yOffset (±32px for 5 parallel edges).
+      const exitY = src.y - src.height / 2;
+      const p1x = Math.min(Math.max(src.x, src.x + yOffset + TOP_EXIT_STEP), (src.x + enterX) / 2 - 1);
       points = [
-        { x: spreadExitX, y: exitY },
-        { x: midX,        y: midY },
-        { x: enterX,      y: spreadEntryY },
+        { x: src.x,         y: exitY },
+        { x: p1x,           y: exitY - TOP_EXIT_STEP },
+        { x: enterX - step, y: tgt.y + yOffset },
+        { x: enterX,        y: tgt.y },
+      ];
+    } else if (isBottomExit) {
+      // 4-point bottom-exit elbow: mirror of top-exit. Keeps edge BELOW the horizontal bundle.
+      const exitY = src.y + src.height / 2;
+      const p1x = Math.min(Math.max(src.x, src.x + yOffset + TOP_EXIT_STEP), (src.x + enterX) / 2 - 1);
+      points = [
+        { x: src.x,         y: exitY },
+        { x: p1x,           y: exitY + TOP_EXIT_STEP },
+        { x: enterX - step, y: tgt.y + yOffset },
+        { x: enterX,        y: tgt.y },
       ];
     } else if (tgt.x > src.x && !hasIntermediateRank) {
       // 4-point elbow: adjacent-rank forward edges (unchanged)