@statelyai/layout 0.1.1 → 0.1.3

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`.

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-CoeH9LRO.mjs";
+import { a as getRandomLayout, f as getFixedLayout, n as getSporeOverlapRemovalLayout, s as getRectanglePackingLayout, t as getSporeCompactionLayout, u as getBoxLayout } from "../spore-BtTSZbb6.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-CoeH9LRO.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-BtTSZbb6.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-CoeH9LRO.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-CoeH9LRO.mjs}

@@ -2494,7 +2494,40 @@ function routeEdges(style) {
 			}
 			flowLayerByNodeId.set(interval.id, flowLayers.length - 1);
 		}
+		const increasing = input.direction === "right" || input.direction === "down";
+		const flowPortProtrusion = (edge, endpoint) => {
+			const node = nodeById.get(endpoint === "source" ? edge.sourceId : edge.targetId);
+			const portName = endpoint === "source" ? edge.sourcePort : edge.targetPort;
+			const port = node?.ports?.find((candidate) => candidate.name === portName);
+			if (!node || !port) return 0;
+			return input.portSettings?.(port, node)?.["port.side"] === (horizontal ? endpoint === "source" ? input.direction === "right" ? "EAST" : "WEST" : input.direction === "right" ? "WEST" : "EAST" : endpoint === "source" ? input.direction === "down" ? "SOUTH" : "NORTH" : input.direction === "down" ? "NORTH" : "SOUTH") ? horizontal ? port.width ?? 0 : port.height ?? 0 : 0;
+		};
+		const adjacentNodeIds = /* @__PURE__ */ new Map();
+		for (const edge of input.graph.edges) {
+			const sourceNeighbors = adjacentNodeIds.get(edge.sourceId) ?? /* @__PURE__ */ new Set();
+			sourceNeighbors.add(edge.targetId);
+			adjacentNodeIds.set(edge.sourceId, sourceNeighbors);
+			const targetNeighbors = adjacentNodeIds.get(edge.targetId) ?? /* @__PURE__ */ new Set();
+			targetNeighbors.add(edge.sourceId);
+			adjacentNodeIds.set(edge.targetId, targetNeighbors);
+		}
+		const feedbackComponentNodeIds = /* @__PURE__ */ new Set();
+		for (const edge of input.graph.edges) {
+			const sourceLayer = flowLayerByNodeId.get(edge.sourceId);
+			const targetLayer = flowLayerByNodeId.get(edge.targetId);
+			if (sourceLayer === void 0 || targetLayer === void 0) continue;
+			if (sourceLayer === targetLayer) continue;
+			if (increasing ? targetLayer > sourceLayer : targetLayer < sourceLayer) continue;
+			const pending = [edge.sourceId, edge.targetId];
+			while (pending.length > 0) {
+				const nodeId = pending.pop();
+				if (feedbackComponentNodeIds.has(nodeId)) continue;
+				feedbackComponentNodeIds.add(nodeId);
+				pending.push(...adjacentNodeIds.get(nodeId) ?? []);
+			}
+		}
 		const labelExtraByGap = flowLayers.slice(0, -1).map(() => 0);
+		const compactLabelCorridorGaps = /* @__PURE__ */ new Set();
 		for (const edge of input.graph.edges) {
 			const labelFlowSize = horizontal ? edge.width ?? 0 : edge.height ?? 0;
 			if (labelFlowSize <= 0) continue;
@@ -2502,8 +2535,14 @@ function routeEdges(style) {
 			const targetLayer = flowLayerByNodeId.get(edge.targetId);
 			if (sourceLayer === void 0 || targetLayer === void 0) continue;
 			if (Math.abs(sourceLayer - targetLayer) !== 1) continue;
-			const extra = (input.edgeSettings?.(edge)?.["edgeLabels.placement"] ?? "CENTER") === "CENTER" ? labelFlowSize + input.spacing.layer : labelFlowSize + Number(input.settings["spacing.edgeLabel"] ?? 2);
+			const placement$1 = input.edgeSettings?.(edge)?.["edgeLabels.placement"] ?? "CENTER";
+			const edgeNodeSpacing = Number(input.settings["spacing.edgeNodeBetweenLayers"] ?? 10);
+			const requiredGap = labelFlowSize + Math.max(input.spacing.layer, flowPortProtrusion(edge, "source") + edgeNodeSpacing) + Math.max(input.spacing.layer, flowPortProtrusion(edge, "target") + edgeNodeSpacing);
 			const gap = Math.min(sourceLayer, targetLayer);
+			const availableGap = flowLayers[gap + 1].start - flowLayers[gap].end;
+			const compactCorridor = placement$1 === "CENTER" && (increasing ? targetLayer > sourceLayer : targetLayer < sourceLayer) && !feedbackComponentNodeIds.has(edge.sourceId);
+			if (compactCorridor) compactLabelCorridorGaps.add(gap);
+			const extra = compactCorridor ? Math.max(0, requiredGap - availableGap) : placement$1 === "CENTER" ? labelFlowSize + input.spacing.layer : labelFlowSize + Number(input.settings["spacing.edgeLabel"] ?? 2);
 			labelExtraByGap[gap] = Math.max(labelExtraByGap[gap] ?? 0, extra);
 		}
 		let labelShift = 0;
@@ -2749,7 +2788,7 @@ function routeEdges(style) {
 				const slots = slotsByGap[layerNo] ?? 0;
 				const routesNearTarget = candidatesByGap[layerNo]?.some((candidate) => hasZeroFixedSideTarget(candidate.edge) && candidatesByGap[layerNo].filter(({ edge }) => edge.targetId === candidate.edge.targetId).length > candidatesByGap[layerNo].filter(({ edge }) => edge.sourceId === candidate.edge.sourceId).length);
 				const preservedGap = (existingGapByLayer[layerNo] ?? input.spacing.layer) - (routesNearTarget ? edgeEdgeSpacing : 0);
-				const gapSpacing = slots === 0 ? existingGapByLayer[layerNo] ?? input.spacing.layer : Math.max(preservesNodeFlexibilityGap || (labelExtraByGap[layerNo] ?? 0) > 0 || [...selfLoopsByNodeId].some(([id, loops]) => (flowLayerByNodeId.get(id) === layerNo || flowLayerByNodeId.get(id) === layerNo + 1) && loops.some((edge) => input.edgeSettings?.(edge)?.["edgeLabels.inline"] === true)) ? preservedGap : input.spacing.layer, 2 * edgeNodeSpacing + Math.max(0, slots - 1) * edgeEdgeSpacing);
+				const gapSpacing = slots === 0 ? existingGapByLayer[layerNo] ?? input.spacing.layer : Math.max(preservesNodeFlexibilityGap || (labelExtraByGap[layerNo] ?? 0) > 0 || compactLabelCorridorGaps.has(layerNo) || [...selfLoopsByNodeId].some(([id, loops]) => (flowLayerByNodeId.get(id) === layerNo || flowLayerByNodeId.get(id) === layerNo + 1) && loops.some((edge) => input.edgeSettings?.(edge)?.["edgeLabels.inline"] === true)) ? preservedGap : input.spacing.layer, 2 * edgeNodeSpacing + Math.max(0, slots - 1) * edgeEdgeSpacing);
 				nextStart = bounds.end + gapSpacing;
 			}
 			implicitEndpoints = implicitEdgeEndpoints(input, placement, orientation);
@@ -3781,7 +3820,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 +3847,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 +3931,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-BtTSZbb6.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-CoeH9LRO.mjs";
 import { getNodeSize } from "@statelyai/graph/layout";
 
 //#region src/fixed.ts

package/package.json

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

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];
     });
   }
 }

package/src/layered/strategies.ts

@@ -3645,7 +3645,57 @@ function routeEdges(style: "ORTHOGONAL" | "POLYLINE" | "SPLINES"): EdgeRouter {
       flowLayerByNodeId.set(interval.id, flowLayers.length - 1);
     }
 
+    const increasing = input.direction === "right" || input.direction === "down";
+    const flowPortProtrusion = (edge: GraphEdge, endpoint: "source" | "target"): number => {
+      const node = nodeById.get(endpoint === "source" ? edge.sourceId : edge.targetId);
+      const portName = endpoint === "source" ? edge.sourcePort : edge.targetPort;
+      const port = node?.ports?.find((candidate) => candidate.name === portName);
+      if (!node || !port) return 0;
+      const side = input.portSettings?.(port, node)?.["port.side"];
+      const flowSide = horizontal
+        ? endpoint === "source"
+          ? input.direction === "right"
+            ? "EAST"
+            : "WEST"
+          : input.direction === "right"
+            ? "WEST"
+            : "EAST"
+        : endpoint === "source"
+          ? input.direction === "down"
+            ? "SOUTH"
+            : "NORTH"
+          : input.direction === "down"
+            ? "NORTH"
+            : "SOUTH";
+      return side === flowSide ? (horizontal ? (port.width ?? 0) : (port.height ?? 0)) : 0;
+    };
+    const adjacentNodeIds = new Map<string, Set<string>>();
+    for (const edge of input.graph.edges) {
+      const sourceNeighbors = adjacentNodeIds.get(edge.sourceId) ?? new Set<string>();
+      sourceNeighbors.add(edge.targetId);
+      adjacentNodeIds.set(edge.sourceId, sourceNeighbors);
+      const targetNeighbors = adjacentNodeIds.get(edge.targetId) ?? new Set<string>();
+      targetNeighbors.add(edge.sourceId);
+      adjacentNodeIds.set(edge.targetId, targetNeighbors);
+    }
+    const feedbackComponentNodeIds = new Set<string>();
+    for (const edge of input.graph.edges) {
+      const sourceLayer = flowLayerByNodeId.get(edge.sourceId);
+      const targetLayer = flowLayerByNodeId.get(edge.targetId);
+      if (sourceLayer === undefined || targetLayer === undefined) continue;
+      if (sourceLayer === targetLayer) continue;
+      const forward = increasing ? targetLayer > sourceLayer : targetLayer < sourceLayer;
+      if (forward) continue;
+      const pending = [edge.sourceId, edge.targetId];
+      while (pending.length > 0) {
+        const nodeId = pending.pop()!;
+        if (feedbackComponentNodeIds.has(nodeId)) continue;
+        feedbackComponentNodeIds.add(nodeId);
+        pending.push(...(adjacentNodeIds.get(nodeId) ?? []));
+      }
+    }
     const labelExtraByGap = flowLayers.slice(0, -1).map(() => 0);
+    const compactLabelCorridorGaps = new Set<number>();
     for (const edge of input.graph.edges) {
       const labelFlowSize = horizontal ? (edge.width ?? 0) : (edge.height ?? 0);
       if (labelFlowSize <= 0) continue;
@@ -3654,11 +3704,25 @@ function routeEdges(style: "ORTHOGONAL" | "POLYLINE" | "SPLINES"): EdgeRouter {
       if (sourceLayer === undefined || targetLayer === undefined) continue;
       if (Math.abs(sourceLayer - targetLayer) !== 1) continue;
       const placement = input.edgeSettings?.(edge)?.["edgeLabels.placement"] ?? "CENTER";
-      const extra =
-        placement === "CENTER"
+      const edgeNodeSpacing = Number(input.settings["spacing.edgeNodeBetweenLayers"] ?? 10);
+      // ELK models center labels as dummy layers. For an exterior port, using node-node
+      // spacing beyond the port double-counts the corridor. Treat the label as edge
+      // geometry while retaining normal layer spacing when it is the larger clearance.
+      const requiredGap =
+        labelFlowSize +
+        Math.max(input.spacing.layer, flowPortProtrusion(edge, "source") + edgeNodeSpacing) +
+        Math.max(input.spacing.layer, flowPortProtrusion(edge, "target") + edgeNodeSpacing);
+      const gap = Math.min(sourceLayer, targetLayer);
+      const availableGap = flowLayers[gap + 1]!.start - flowLayers[gap]!.end;
+      const forward = increasing ? targetLayer > sourceLayer : targetLayer < sourceLayer;
+      const compactCorridor =
+        placement === "CENTER" && forward && !feedbackComponentNodeIds.has(edge.sourceId);
+      if (compactCorridor) compactLabelCorridorGaps.add(gap);
+      const extra = compactCorridor
+        ? Math.max(0, requiredGap - availableGap)
+        : placement === "CENTER"
           ? labelFlowSize + input.spacing.layer
           : labelFlowSize + Number(input.settings["spacing.edgeLabel"] ?? 2);
-      const gap = Math.min(sourceLayer, targetLayer);
       labelExtraByGap[gap] = Math.max(labelExtraByGap[gap] ?? 0, extra);
     }
     let labelShift = 0;
@@ -4049,6 +4113,7 @@ function routeEdges(style: "ORTHOGONAL" | "POLYLINE" | "SPLINES"): EdgeRouter {
             : Math.max(
                 preservesNodeFlexibilityGap ||
                   (labelExtraByGap[layerNo] ?? 0) > 0 ||
+                  compactLabelCorridorGaps.has(layerNo) ||
                   [...selfLoopsByNodeId].some(
                     ([id, loops]) =>
                       (flowLayerByNodeId.get(id) === layerNo ||