@statelyai/layout 0.1.0 → 0.1.2

package/README.md

@@ -73,7 +73,7 @@ Native algorithms never consume ELK JSON directly.
 
 <!-- fixed-port placement and inline center-label guarantees from src/layered/index.ts and src/layered/strategies.ts -->
 
-Fixed port sides constrain routes without collapsing fan-out targets onto each other. Port preferences cannot reintroduce cycles before layering. Inline center labels use reserved inter-rank space; dedicated label layers and route-track compaction retain their placement strategies. Inline self-loop labels reserve clearance on their assigned sides from both their owner and neighboring nodes. Hierarchy decomposition preserves native self-loop routes for ancestor-to-descendant edges. FIRST/FIRST_SEPARATE nodes may have self-loops.
+Fixed port sides constrain routes without collapsing fan-out targets onto each other. Port preferences cannot reintroduce cycles before layering. Inline center labels use reserved inter-rank space; orthogonally routed labels use distinct cross-axis lanes that avoid other labels and states. Dedicated label layers and route-track compaction retain their placement strategies. Inline self-loop labels reserve clearance on their assigned sides from both their owner and neighboring nodes. Hierarchy decomposition preserves native self-loop routes for ancestor-to-descendant edges. FIRST/FIRST_SEPARATE nodes may have self-loops.
 
 Advanced layered settings use shorter names such as
 `layering.strategy`, `spacing.edgeNode`, and `nodePlacement.strategy`.
@@ -161,6 +161,11 @@ pnpm release
 generated layered-option and demo-corpus freshness, tests,
 declarations/runtime builds, the demo bundle, and the packed package surface.
 
+<!-- exported source compatibility derived from tsconfig.json -->
+
+The source project checks indexed reads with `noUncheckedIndexedAccess` so
+published TypeScript source supports consumers using that option.
+
 ## Releases
 
 <!-- release process derived from package.json#scripts and .changeset/config.json -->

package/dist/elkjs/index.mjs

@@ -1,5 +1,5 @@
-import { o as elkLayeredOptionDefinitions, t as getLayeredLayout } from "../layered-CZs9YWVx.mjs";
-import { a as getRandomLayout, f as getFixedLayout, n as getSporeOverlapRemovalLayout, s as getRectanglePackingLayout, t as getSporeCompactionLayout, u as getBoxLayout } from "../spore-9N0W9dZn.mjs";
+import { o as elkLayeredOptionDefinitions, t as getLayeredLayout } from "../layered-COIyXvwb.mjs";
+import { a as getRandomLayout, f as getFixedLayout, n as getSporeOverlapRemovalLayout, s as getRectanglePackingLayout, t as getSporeCompactionLayout, u as getBoxLayout } from "../spore-BeKUA1Mb.mjs";
 import { createGraph } from "@statelyai/graph";
 
 //#region src/elkjs/statechart.ts

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { A as minimizeCrossingsWithBarycenter, B as LayoutError, C as breakCyclesGreedilyByModelOrder, D as breakCyclesWithModelOrderDepthFirstSearch, E as breakCyclesWithModelOrderBreadthFirstSearch, I as routeEdgesOrthogonally, L as routeEdgesWithPolylines, M as minimizeCrossingsWithModelOrder, N as placeNodesInLayers, P as placeNodesInteractively, R as routeEdgesWithSplines, S as breakCyclesGreedily, T as breakCyclesWithDepthFirstSearch, V as UnsupportedLayoutError, _ as assignLayersInteractively, a as elkLayeredEnumValues, b as breakCyclesByStronglyConnectedConnectivity, d as assignLayersWithMinWidth, f as assignLayersWithNetworkSimplex, g as assignLayersByLongestPathToSink, h as assignLayersByLongestPath, i as toElkLayeredOptions, j as minimizeCrossingsWithMedian, k as minimizeCrossingsInteractively, m as assignLayersByDepthFirstModelOrder, n as layeredAlgorithm, o as elkLayeredOptionDefinitions, p as assignLayersByBreadthFirstModelOrder, r as fromElkLayeredOptionId, t as getLayeredLayout, u as assignLayersWithStretchWidth, v as assignLayersWithCoffmanGraham, w as breakCyclesInteractively, x as breakCyclesByStronglyConnectedNodeType, y as breakCyclesByModelOrder } from "./layered-CZs9YWVx.mjs";
-import { a as getRandomLayout, c as rectanglePackingAlgorithm, d as fixedAlgorithm, f as getFixedLayout, i as sporeOverlapRemovalAlgorithm, l as boxAlgorithm, n as getSporeOverlapRemovalLayout, o as randomAlgorithm, r as sporeCompactionAlgorithm, s as getRectanglePackingLayout, t as getSporeCompactionLayout, u as getBoxLayout } from "./spore-9N0W9dZn.mjs";
+import { A as minimizeCrossingsWithBarycenter, B as LayoutError, C as breakCyclesGreedilyByModelOrder, D as breakCyclesWithModelOrderDepthFirstSearch, E as breakCyclesWithModelOrderBreadthFirstSearch, I as routeEdgesOrthogonally, L as routeEdgesWithPolylines, M as minimizeCrossingsWithModelOrder, N as placeNodesInLayers, P as placeNodesInteractively, R as routeEdgesWithSplines, S as breakCyclesGreedily, T as breakCyclesWithDepthFirstSearch, V as UnsupportedLayoutError, _ as assignLayersInteractively, a as elkLayeredEnumValues, b as breakCyclesByStronglyConnectedConnectivity, d as assignLayersWithMinWidth, f as assignLayersWithNetworkSimplex, g as assignLayersByLongestPathToSink, h as assignLayersByLongestPath, i as toElkLayeredOptions, j as minimizeCrossingsWithMedian, k as minimizeCrossingsInteractively, m as assignLayersByDepthFirstModelOrder, n as layeredAlgorithm, o as elkLayeredOptionDefinitions, p as assignLayersByBreadthFirstModelOrder, r as fromElkLayeredOptionId, t as getLayeredLayout, u as assignLayersWithStretchWidth, v as assignLayersWithCoffmanGraham, w as breakCyclesInteractively, x as breakCyclesByStronglyConnectedNodeType, y as breakCyclesByModelOrder } from "./layered-COIyXvwb.mjs";
+import { a as getRandomLayout, c as rectanglePackingAlgorithm, d as fixedAlgorithm, f as getFixedLayout, i as sporeOverlapRemovalAlgorithm, l as boxAlgorithm, n as getSporeOverlapRemovalLayout, o as randomAlgorithm, r as sporeCompactionAlgorithm, s as getRectanglePackingLayout, t as getSporeCompactionLayout, u as getBoxLayout } from "./spore-BeKUA1Mb.mjs";
 import { getGraphIssues } from "@statelyai/graph";
 
 //#region src/layout.ts

package/dist/layered/index.mjs

@@ -1,3 +1,3 @@
-import { A as minimizeCrossingsWithBarycenter, C as breakCyclesGreedilyByModelOrder, D as breakCyclesWithModelOrderDepthFirstSearch, E as breakCyclesWithModelOrderBreadthFirstSearch, I as routeEdgesOrthogonally, L as routeEdgesWithPolylines, M as minimizeCrossingsWithModelOrder, N as placeNodesInLayers, P as placeNodesInteractively, R as routeEdgesWithSplines, S as breakCyclesGreedily, T as breakCyclesWithDepthFirstSearch, _ as assignLayersInteractively, a as elkLayeredEnumValues, b as breakCyclesByStronglyConnectedConnectivity, c as placeNodesWithLinearSegments, d as assignLayersWithMinWidth, f as assignLayersWithNetworkSimplex, g as assignLayersByLongestPathToSink, h as assignLayersByLongestPath, i as toElkLayeredOptions, j as minimizeCrossingsWithMedian, k as minimizeCrossingsInteractively, l as placeNodesWithBrandesKoepf, m as assignLayersByDepthFirstModelOrder, n as layeredAlgorithm, o as elkLayeredOptionDefinitions, p as assignLayersByBreadthFirstModelOrder, r as fromElkLayeredOptionId, s as placeNodesWithNetworkSimplex, t as getLayeredLayout, u as assignLayersWithStretchWidth, v as assignLayersWithCoffmanGraham, w as breakCyclesInteractively, x as breakCyclesByStronglyConnectedNodeType, y as breakCyclesByModelOrder } from "../layered-CZs9YWVx.mjs";
+import { A as minimizeCrossingsWithBarycenter, C as breakCyclesGreedilyByModelOrder, D as breakCyclesWithModelOrderDepthFirstSearch, E as breakCyclesWithModelOrderBreadthFirstSearch, I as routeEdgesOrthogonally, L as routeEdgesWithPolylines, M as minimizeCrossingsWithModelOrder, N as placeNodesInLayers, P as placeNodesInteractively, R as routeEdgesWithSplines, S as breakCyclesGreedily, T as breakCyclesWithDepthFirstSearch, _ as assignLayersInteractively, a as elkLayeredEnumValues, b as breakCyclesByStronglyConnectedConnectivity, c as placeNodesWithLinearSegments, d as assignLayersWithMinWidth, f as assignLayersWithNetworkSimplex, g as assignLayersByLongestPathToSink, h as assignLayersByLongestPath, i as toElkLayeredOptions, j as minimizeCrossingsWithMedian, k as minimizeCrossingsInteractively, l as placeNodesWithBrandesKoepf, m as assignLayersByDepthFirstModelOrder, n as layeredAlgorithm, o as elkLayeredOptionDefinitions, p as assignLayersByBreadthFirstModelOrder, r as fromElkLayeredOptionId, s as placeNodesWithNetworkSimplex, t as getLayeredLayout, u as assignLayersWithStretchWidth, v as assignLayersWithCoffmanGraham, w as breakCyclesInteractively, x as breakCyclesByStronglyConnectedNodeType, y as breakCyclesByModelOrder } from "../layered-COIyXvwb.mjs";
 
 export { assignLayersByBreadthFirstModelOrder, assignLayersByDepthFirstModelOrder, assignLayersByLongestPath, assignLayersByLongestPathToSink, assignLayersInteractively, assignLayersWithCoffmanGraham, assignLayersWithMinWidth, assignLayersWithNetworkSimplex, assignLayersWithStretchWidth, breakCyclesByModelOrder, breakCyclesByStronglyConnectedConnectivity, breakCyclesByStronglyConnectedNodeType, breakCyclesGreedily, breakCyclesGreedilyByModelOrder, breakCyclesInteractively, breakCyclesWithDepthFirstSearch, breakCyclesWithModelOrderBreadthFirstSearch, breakCyclesWithModelOrderDepthFirstSearch, elkLayeredEnumValues, elkLayeredOptionDefinitions, fromElkLayeredOptionId, getLayeredLayout, layeredAlgorithm, minimizeCrossingsInteractively, minimizeCrossingsWithBarycenter, minimizeCrossingsWithMedian, minimizeCrossingsWithModelOrder, placeNodesInLayers, placeNodesInteractively, placeNodesWithBrandesKoepf, placeNodesWithLinearSegments, placeNodesWithNetworkSimplex, routeEdgesOrthogonally, routeEdgesWithPolylines, routeEdgesWithSplines, toElkLayeredOptions };

package/dist/{layered-CZs9YWVx.mjs → layered-COIyXvwb.mjs}

@@ -3781,7 +3781,7 @@ function getPolylineMidpoint(points) {
 
 //#endregion
 //#region src/layered/separate-exterior-labels.ts
-/** Separates movable inline labels and their exterior orthogonal route tracks. */
+/** Assigns collision-free cross-axis lanes to inline labels and their route tracks. */
 function separateExteriorLabels({ edges, nodeRects, direction, spacing, settings }) {
 	const horizontalFlow = direction === "left" || direction === "right";
 	const nodeCrossStart = Math.min(...nodeRects.map((rect) => horizontalFlow ? rect.y : rect.x));
@@ -3808,25 +3808,80 @@ function separateExteriorLabels({ edges, nodeRects, direction, spacing, settings
 			const trackCross = horizontalFlow ? point.y : point.x;
 			return isFlowSegment && (trackCross < nodeCrossStart || trackCross > nodeCrossEnd) ? [{
 				cross: trackCross,
-				length: horizontalFlow ? Math.abs(next.x - point.x) : Math.abs(next.y - point.y)
+				length: horizontalFlow ? Math.abs(next.x - point.x) : Math.abs(next.y - point.y),
+				flowStart: horizontalFlow ? Math.min(point.x, next.x) : Math.min(point.y, next.y),
+				flowEnd: horizontalFlow ? Math.max(point.x, next.x) : Math.max(point.y, next.y),
+				startIndex: index
 			}] : [];
 		}).sort((left, right) => right.length - left.length)[0];
-		if (!exteriorTrack) return [];
+		const routeTrack = exteriorTrack ?? edge.points.flatMap((point, index) => {
+			const next = edge.points[index + 1];
+			if (!next) return [];
+			if (!(horizontalFlow ? point.y === next.y && point.x !== next.x : point.x === next.x && point.y !== next.y)) return [];
+			return [{
+				cross: horizontalFlow ? point.y : point.x,
+				length: horizontalFlow ? Math.abs(next.x - point.x) : Math.abs(next.y - point.y),
+				flowStart: horizontalFlow ? Math.min(point.x, next.x) : Math.min(point.y, next.y),
+				flowEnd: horizontalFlow ? Math.max(point.x, next.x) : Math.max(point.y, next.y),
+				startIndex: index
+			}];
+		}).sort((left, right) => Math.abs(left.cross - (crossStart(labelRect) + crossEnd(labelRect)) / 2) - Math.abs(right.cross - (crossStart(labelRect) + crossEnd(labelRect)) / 2) || right.length - left.length)[0];
+		if (!routeTrack) return [];
 		return [{
 			edge,
-			exteriorTrack,
+			exteriorTrack: routeTrack,
+			preserveAnchors: exteriorTrack === void 0,
 			labelRect,
-			lowSide: exteriorTrack.cross < (nodeCrossStart + nodeCrossEnd) / 2
+			lowSide: (crossStart(labelRect) + crossEnd(labelRect)) / 2 < (nodeCrossStart + nodeCrossEnd) / 2
 		}];
 	});
 	movableLabels.sort((left, right) => {
 		if (left.lowSide !== right.lowSide) return left.lowSide ? -1 : 1;
 		return (left.lowSide ? crossStart(left.labelRect) - crossStart(right.labelRect) : crossStart(right.labelRect) - crossStart(left.labelRect)) || flowStart(left.labelRect) - flowStart(right.labelRect) || (String(left.edge.id) < String(right.edge.id) ? -1 : String(left.edge.id) > String(right.edge.id) ? 1 : 0);
 	});
-	for (const { edge, exteriorTrack, labelRect, lowSide } of movableLabels) {
+	for (const { edge, exteriorTrack, labelRect, lowSide, preserveAnchors } of movableLabels) {
 		const obstacles = [...nodeRects, ...[...labelRectByEdgeId.entries()].flatMap(([edgeId, rect]) => edgeId === String(edge.id) ? [] : [rect])];
 		let totalDelta = 0;
-		while (true) {
+		if (preserveAnchors) {
+			const labelCrossStart = crossStart(labelRect);
+			const labelCrossSize = crossEnd(labelRect) - labelCrossStart;
+			const trackOffset = exteriorTrack.cross - labelCrossStart;
+			const candidates = new Set([labelCrossStart]);
+			for (const obstacle of obstacles) {
+				candidates.add(crossStart(obstacle) - spacing - labelCrossSize);
+				candidates.add(crossEnd(obstacle) + spacing);
+				candidates.add(crossStart(obstacle) - spacing - trackOffset);
+				candidates.add(crossEnd(obstacle) + spacing - trackOffset);
+			}
+			const orderedCandidates = [...candidates].sort((left, right) => {
+				const leftPreferred = lowSide ? left <= labelCrossStart : left >= labelCrossStart;
+				const rightPreferred = lowSide ? right <= labelCrossStart : right >= labelCrossStart;
+				return Number(rightPreferred) - Number(leftPreferred) || Math.abs(left - labelCrossStart) - Math.abs(right - labelCrossStart) || left - right;
+			});
+			const lineIntersects = (rect, candidateTrackCross, connectorFlow) => {
+				const movedCrossStart = Math.min(exteriorTrack.cross, candidateTrackCross);
+				const movedCrossEnd = Math.max(exteriorTrack.cross, candidateTrackCross);
+				const trackIntersects = exteriorTrack.flowStart < flowEnd(rect) && exteriorTrack.flowEnd > flowStart(rect) && candidateTrackCross > crossStart(rect) && candidateTrackCross < crossEnd(rect);
+				const connectorIntersects = connectorFlow > flowStart(rect) && connectorFlow < flowEnd(rect) && movedCrossStart < crossEnd(rect) && movedCrossEnd > crossStart(rect);
+				return trackIntersects || connectorIntersects;
+			};
+			const candidate = orderedCandidates.find((candidateLabelCross) => {
+				const delta = candidateLabelCross - labelCrossStart;
+				const candidateLabel = horizontalFlow ? {
+					...labelRect,
+					y: labelRect.y + delta
+				} : {
+					...labelRect,
+					x: labelRect.x + delta
+				};
+				const candidateTrackCross = exteriorTrack.cross + delta;
+				return obstacles.every((obstacle) => !overlaps(candidateLabel, obstacle)) && nodeRects.every((nodeRect) => !lineIntersects(nodeRect, candidateTrackCross, exteriorTrack.flowStart) && !lineIntersects(nodeRect, candidateTrackCross, exteriorTrack.flowEnd));
+			});
+			if (candidate === void 0) continue;
+			totalDelta = candidate - labelCrossStart;
+			if (horizontalFlow) labelRect.y += totalDelta;
+			else labelRect.x += totalDelta;
+		} else while (true) {
 			const blockers = obstacles.filter((rect) => overlaps(labelRect, rect));
 			if (blockers.length === 0) break;
 			const delta = (lowSide ? Math.min(...blockers.map(crossStart)) - spacing - (horizontalFlow ? edge.height : edge.width) : Math.max(...blockers.map(crossEnd)) + spacing) - crossStart(labelRect);
@@ -3837,15 +3892,17 @@ function separateExteriorLabels({ edges, nodeRects, direction, spacing, settings
 		if (totalDelta === 0) continue;
 		if (horizontalFlow) edge.y += totalDelta;
 		else edge.x += totalDelta;
-		edge.points = edge.points.map((point) => {
-			if ((horizontalFlow ? point.y : point.x) !== exteriorTrack.cross) return point;
-			return horizontalFlow ? {
+		if (!exteriorTrack) continue;
+		edge.points = edge.points.flatMap((point, index) => {
+			if (index !== exteriorTrack.startIndex && index !== exteriorTrack.startIndex + 1) return [point];
+			const shifted = horizontalFlow ? {
 				...point,
 				y: point.y + totalDelta
 			} : {
 				...point,
 				x: point.x + totalDelta
 			};
+			return preserveAnchors && index === exteriorTrack.startIndex && index === 0 ? [point, shifted] : preserveAnchors && index === exteriorTrack.startIndex + 1 && index === edge.points.length - 1 ? [shifted, point] : [shifted];
 		});
 	}
 }

package/dist/{spore-9N0W9dZn.mjs → spore-BeKUA1Mb.mjs}

@@ -1,4 +1,4 @@
-import { F as placePorts, O as getPolylineMidpoint, z as JavaRandom } from "./layered-CZs9YWVx.mjs";
+import { F as placePorts, O as getPolylineMidpoint, z as JavaRandom } from "./layered-COIyXvwb.mjs";
 import { getNodeSize } from "@statelyai/graph/layout";
 
 //#region src/fixed.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/layout",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Extensible, graph-native layout algorithms for @statelyai/graph",
   "license": "EPL-2.0 OR GPL-3.0-or-later",
   "repository": {

package/src/elkjs/statechart.ts

@@ -98,16 +98,16 @@ export function compileStatechartLayout(
     }
     if (scope.preferredPath) {
       for (let i = 1; i < path.length; i++) {
-        if (!successors.get(path[i - 1])?.has(path[i]))
+        if (!successors.get(path[i - 1]!)?.has(path[i]!))
           throw new Error(`Disconnected preferred path in ${id}`);
       }
     } else {
       while (path.length) {
-        const next = [...successors.get(path.at(-1))!].filter(
+        const next = [...successors.get(path.at(-1)!)!].filter(
           (nodeId) => !path.includes(nodeId) && !exits.includes(nodeId),
         );
         if (next.length !== 1) break;
-        path.push(next[0]);
+        path.push(next[0]!);
       }
     }
     paths[id] = path;
@@ -214,8 +214,8 @@ export function scoreStatechartLayout(
         for (const point of points)
           if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) score.invalid++;
         for (let i = 1; i < points.length; i++) {
-          const a = { x: x + points[i - 1].x, y: y + points[i - 1].y };
-          const b = { x: x + points[i].x, y: y + points[i].y };
+          const a = { x: x + points[i - 1]!.x, y: y + points[i - 1]!.y };
+          const b = { x: x + points[i]!.x, y: y + points[i]!.y };
           score.routeLength += Math.hypot(b.x - a.x, b.y - a.y);
           segments.push({ a, b, edge });
         }
@@ -225,16 +225,16 @@ export function scoreStatechartLayout(
   visit(graph, 0, 0, [graph]);
   for (let i = 0; i < boxes.length; i++)
     for (let j = i + 1; j < boxes.length; j++) {
-      const a = boxes[i],
-        b = boxes[j];
+      const a = boxes[i]!,
+        b = boxes[j]!;
       if ((a.node && b.ancestors.includes(a.node)) || (b.node && a.ancestors.includes(b.node)))
         continue;
       if (intersects(a.rect, b.rect)) score.overlaps++;
     }
   for (let i = 0; i < segments.length; i++)
     for (let j = i + 1; j < segments.length; j++) {
-      const a = segments[i],
-        b = segments[j];
+      const a = segments[i]!,
+        b = segments[j]!;
       if (a.edge === b.edge) continue;
       if (
         cross(a.a, a.b, b.a) * cross(a.a, a.b, b.b) < 0 &&
@@ -303,7 +303,7 @@ export async function layoutStatechart<T extends ElkNode>(
         }
         for (const group of groups.values())
           for (let i = 1; i < Math.min(group.length, 3); i++) {
-            const edge = group[i];
+            const edge = group[i]!;
             if (
               option(edge, "edgeLabels.placement") === undefined &&
               edge.labels!.every((label) => option(label, "edgeLabels.placement") === undefined)

package/src/layered/separate-exterior-labels.ts

@@ -22,7 +22,7 @@ interface SeparateExteriorLabelsInput<E extends ExteriorLabelEdge> {
   settings: (edge: E) => ExteriorLabelSettings;
 }
 
-/** Separates movable inline labels and their exterior orthogonal route tracks. */
+/** Assigns collision-free cross-axis lanes to inline labels and their route tracks. */
 export function separateExteriorLabels<E extends ExteriorLabelEdge>({
   edges,
   nodeRects,
@@ -72,18 +72,50 @@ export function separateExteriorLabels<E extends ExteriorLabelEdge>({
               {
                 cross: trackCross,
                 length: horizontalFlow ? Math.abs(next.x - point.x) : Math.abs(next.y - point.y),
+                flowStart: horizontalFlow ? Math.min(point.x, next.x) : Math.min(point.y, next.y),
+                flowEnd: horizontalFlow ? Math.max(point.x, next.x) : Math.max(point.y, next.y),
+                startIndex: index,
               },
             ]
           : [];
       })
       .sort((left, right) => right.length - left.length)[0];
-    if (!exteriorTrack) return [];
+    const routeTrack =
+      exteriorTrack ??
+      edge.points
+        .flatMap((point, index) => {
+          const next = edge.points[index + 1];
+          if (!next) return [];
+          const isFlowSegment = horizontalFlow
+            ? point.y === next.y && point.x !== next.x
+            : point.x === next.x && point.y !== next.y;
+          if (!isFlowSegment) return [];
+          const cross = horizontalFlow ? point.y : point.x;
+          return [
+            {
+              cross,
+              length: horizontalFlow ? Math.abs(next.x - point.x) : Math.abs(next.y - point.y),
+              flowStart: horizontalFlow ? Math.min(point.x, next.x) : Math.min(point.y, next.y),
+              flowEnd: horizontalFlow ? Math.max(point.x, next.x) : Math.max(point.y, next.y),
+              startIndex: index,
+            },
+          ];
+        })
+        .sort(
+          (left, right) =>
+            Math.abs(left.cross - (crossStart(labelRect) + crossEnd(labelRect)) / 2) -
+              Math.abs(right.cross - (crossStart(labelRect) + crossEnd(labelRect)) / 2) ||
+            right.length - left.length,
+        )[0];
+    if (!routeTrack) return [];
     return [
       {
         edge,
-        exteriorTrack,
+        exteriorTrack: routeTrack,
+        preserveAnchors: exteriorTrack === undefined,
         labelRect,
-        lowSide: exteriorTrack.cross < (nodeCrossStart + nodeCrossEnd) / 2,
+        lowSide:
+          (crossStart(labelRect) + crossEnd(labelRect)) / 2 < (nodeCrossStart + nodeCrossEnd) / 2,
       },
     ];
   });
@@ -104,7 +136,7 @@ export function separateExteriorLabels<E extends ExteriorLabelEdge>({
     );
   });
 
-  for (const { edge, exteriorTrack, labelRect, lowSide } of movableLabels) {
+  for (const { edge, exteriorTrack, labelRect, lowSide, preserveAnchors } of movableLabels) {
     const obstacles = [
       ...nodeRects,
       ...[...labelRectByEdgeId.entries()].flatMap(([edgeId, rect]) =>
@@ -112,28 +144,97 @@ export function separateExteriorLabels<E extends ExteriorLabelEdge>({
       ),
     ];
     let totalDelta = 0;
-    while (true) {
-      const blockers = obstacles.filter((rect) => overlaps(labelRect, rect));
-      if (blockers.length === 0) break;
-      const desiredCross = lowSide
-        ? Math.min(...blockers.map(crossStart)) -
-          spacing -
-          (horizontalFlow ? edge.height : edge.width)
-        : Math.max(...blockers.map(crossEnd)) + spacing;
-      const delta = desiredCross - crossStart(labelRect);
-      totalDelta += delta;
-      if (horizontalFlow) labelRect.y += delta;
-      else labelRect.x += delta;
+    if (preserveAnchors) {
+      const labelCrossStart = crossStart(labelRect);
+      const labelCrossSize = crossEnd(labelRect) - labelCrossStart;
+      const trackOffset = exteriorTrack.cross - labelCrossStart;
+      const candidates = new Set<number>([labelCrossStart]);
+      for (const obstacle of obstacles) {
+        candidates.add(crossStart(obstacle) - spacing - labelCrossSize);
+        candidates.add(crossEnd(obstacle) + spacing);
+        candidates.add(crossStart(obstacle) - spacing - trackOffset);
+        candidates.add(crossEnd(obstacle) + spacing - trackOffset);
+      }
+      const orderedCandidates = [...candidates].sort((left, right) => {
+        const leftPreferred = lowSide ? left <= labelCrossStart : left >= labelCrossStart;
+        const rightPreferred = lowSide ? right <= labelCrossStart : right >= labelCrossStart;
+        return (
+          Number(rightPreferred) - Number(leftPreferred) ||
+          Math.abs(left - labelCrossStart) - Math.abs(right - labelCrossStart) ||
+          left - right
+        );
+      });
+      const lineIntersects = (
+        rect: EntityRect,
+        candidateTrackCross: number,
+        connectorFlow: number,
+      ): boolean => {
+        const movedCrossStart = Math.min(exteriorTrack.cross, candidateTrackCross);
+        const movedCrossEnd = Math.max(exteriorTrack.cross, candidateTrackCross);
+        const trackIntersects =
+          exteriorTrack.flowStart < flowEnd(rect) &&
+          exteriorTrack.flowEnd > flowStart(rect) &&
+          candidateTrackCross > crossStart(rect) &&
+          candidateTrackCross < crossEnd(rect);
+        const connectorIntersects =
+          connectorFlow > flowStart(rect) &&
+          connectorFlow < flowEnd(rect) &&
+          movedCrossStart < crossEnd(rect) &&
+          movedCrossEnd > crossStart(rect);
+        return trackIntersects || connectorIntersects;
+      };
+      const candidate = orderedCandidates.find((candidateLabelCross) => {
+        const delta = candidateLabelCross - labelCrossStart;
+        const candidateLabel = horizontalFlow
+          ? { ...labelRect, y: labelRect.y + delta }
+          : { ...labelRect, x: labelRect.x + delta };
+        const candidateTrackCross = exteriorTrack.cross + delta;
+        return (
+          obstacles.every((obstacle) => !overlaps(candidateLabel, obstacle)) &&
+          nodeRects.every(
+            (nodeRect) =>
+              !lineIntersects(nodeRect, candidateTrackCross, exteriorTrack.flowStart) &&
+              !lineIntersects(nodeRect, candidateTrackCross, exteriorTrack.flowEnd),
+          )
+        );
+      });
+      if (candidate === undefined) continue;
+      totalDelta = candidate - labelCrossStart;
+      if (horizontalFlow) labelRect.y += totalDelta;
+      else labelRect.x += totalDelta;
+    } else {
+      while (true) {
+        const blockers = obstacles.filter((rect) => overlaps(labelRect, rect));
+        if (blockers.length === 0) break;
+        const desiredCross = lowSide
+          ? Math.min(...blockers.map(crossStart)) -
+            spacing -
+            (horizontalFlow ? edge.height : edge.width)
+          : Math.max(...blockers.map(crossEnd)) + spacing;
+        const delta = desiredCross - crossStart(labelRect);
+        totalDelta += delta;
+        if (horizontalFlow) labelRect.y += delta;
+        else labelRect.x += delta;
+      }
     }
     if (totalDelta === 0) continue;
     if (horizontalFlow) edge.y += totalDelta;
     else edge.x += totalDelta;
-    edge.points = edge.points.map((point) => {
-      const pointCross = horizontalFlow ? point.y : point.x;
-      if (pointCross !== exteriorTrack.cross) return point;
-      return horizontalFlow
+    if (!exteriorTrack) continue;
+    edge.points = edge.points.flatMap((point, index) => {
+      if (index !== exteriorTrack.startIndex && index !== exteriorTrack.startIndex + 1)
+        return [point];
+      const shifted = horizontalFlow
         ? { ...point, y: point.y + totalDelta }
         : { ...point, x: point.x + totalDelta };
+      // Keep authored endpoint anchors attached when the chosen track ends there.
+      return preserveAnchors && index === exteriorTrack.startIndex && index === 0
+        ? [point, shifted]
+        : preserveAnchors &&
+            index === exteriorTrack.startIndex + 1 &&
+            index === edge.points.length - 1
+          ? [shifted, point]
+          : [shifted];
     });
   }
 }