@statelyai/layout 0.4.3 → 0.5.1

package/src/layered/index.ts

@@ -8,6 +8,7 @@ import { countAllCrossings } from "./crossing-counter";
 import { crossingGraph } from "./crossing-graph";
 import { sortInitialModelOrder, markInitialModelOrderPrepared } from "./initial-model-order";
 import { hasMovableLoopPorts } from "./loop-envelopes";
+import { hideSelfLoopPorts, restoreSelfLoopPorts } from "./self-loop-ports";
 import { fixedSelfLoopLabels, fixedSelfLoopSide } from "./fixed-self-loop";
 import { compactionBounds, placementCrossBounds } from "./compaction-bounds";
 import { setElkjs0111ResultPolicy } from "../internal/elkjs-compatibility";
@@ -82,6 +83,8 @@ import {
   placeNodesInLayers,
   placeNodesInteractively,
   placePorts,
+  recordSweptPortOrder,
+  trackLabelPortSideFeedback,
   routeEdgesOrthogonally,
   routeEdgesWithPolylines,
   routeEdgesWithSplines,
@@ -1199,53 +1202,101 @@ function runSeparatedComponents<N, E, G, P>(
           bottom: options.padding?.bottom ?? 12,
           left: options.padding?.left ?? 12,
         };
+  // Components are packed in reading order, row by row. For UP and LEFT layouts
+  // the packing is mirrored along the flow so later components follow the first
+  // one's flow instead of preceding it (e.g. an isolated state below an UP
+  // statechart's start): LEFT mirrors each row, UP mirrors the stack of rows.
+  // Compaction measures every shape in that mirrored frame.
+  const direction = options.direction ?? graph.direction ?? "right";
+  type Rect = { x: number; y: number; width: number; height: number };
+  // Everything a component draws, so compaction keeps other components off its
+  // routes and labels as well as its nodes.
+  const drawnRects = (result: VisualGraph<N, E, G, P>): Rect[] => {
+    const rects: Rect[] = [];
+    for (const node of result.nodes) {
+      const x = node.x ?? 0,
+        y = node.y ?? 0;
+      rects.push({ x, y, width: node.width ?? 0, height: node.height ?? 0 });
+      for (const port of node.ports ?? [])
+        rects.push({
+          x: x + (port.x ?? 0),
+          y: y + (port.y ?? 0),
+          width: port.width ?? 0,
+          height: port.height ?? 0,
+        });
+    }
+    for (const edge of result.edges) {
+      const points = edge.points ?? [];
+      for (let index = 1; index < points.length; index++) {
+        const from = points[index - 1]!,
+          to = points[index]!;
+        const x = Math.min(from.x, to.x),
+          y = Math.min(from.y, to.y);
+        rects.push({ x, y, width: Math.max(from.x, to.x) - x, height: Math.max(from.y, to.y) - y });
+      }
+      if ((edge.width ?? 0) > 0 || (edge.height ?? 0) > 0)
+        rects.push({
+          x: edge.x ?? 0,
+          y: edge.y ?? 0,
+          width: edge.width ?? 0,
+          height: edge.height ?? 0,
+        });
+    }
+    return rects;
+  };
+  const rows: Array<Array<{ component: (typeof components)[number]; x: number }>> = [];
   let x = 0;
+  for (const component of components) {
+    if (x > 0 && x + component.bounds.width > maxRowWidth) x = 0;
+    if (x === 0) rows.push([]);
+    rows.at(-1)!.push({ component, x });
+    x += component.bounds.width + componentSpacing;
+  }
   let y = 0;
-  let rowHeight = 0;
   const compactConnectedComponents = options.settings?.["compaction.connectedComponents"] === true;
   const placedShapes: Array<{ left: number; right: number; top: number; bottom: number }> = [];
   const nodeResults = new Map<string, VisualNode<N, P>>();
   const edgeResults = new Map<string, (typeof components)[number]["result"]["edges"][number]>();
   const placements: Array<{ component: (typeof components)[number]; x: number; y: number }> = [];
-  for (const component of components) {
-    if (x > 0 && x + component.bounds.width > maxRowWidth) {
-      x = 0;
-      y += rowHeight + componentSpacing;
-      rowHeight = 0;
-    }
-    let compactedY = y;
-    if (compactConnectedComponents && y > 0) {
-      let requiredY = 0;
-      for (const node of component.result.nodes) {
-        const localLeft = x + (node.x ?? 0) - component.bounds.left;
-        const localRight = localLeft + (node.width ?? 0);
-        const localTop = (node.y ?? 0) - component.bounds.top;
-        for (const placed of placedShapes) {
-          if (localRight <= placed.left || localLeft >= placed.right) continue;
-          requiredY = Math.max(requiredY, placed.bottom + componentSpacing - localTop);
-        }
+  for (const row of rows) {
+    const rowWidth = Math.max(...row.map((entry) => entry.x + entry.component.bounds.width));
+    let rowHeight = 0;
+    for (const { component, x: packedX } of row) {
+      const { bounds } = component;
+      const left = direction === "left" ? rowWidth - packedX - bounds.width : packedX;
+      const shapes = drawnRects(component.result).map((rect) => ({
+        left: left + rect.x - bounds.left,
+        top:
+          direction === "up"
+            ? bounds.top + bounds.height - rect.y - rect.height
+            : rect.y - bounds.top,
+        width: rect.width,
+        height: rect.height,
+      }));
+      let compactedY = y;
+      if (compactConnectedComponents && y > 0) {
+        let requiredY = 0;
+        for (const shape of shapes)
+          for (const placed of placedShapes) {
+            if (shape.left + shape.width <= placed.left || shape.left >= placed.right) continue;
+            requiredY = Math.max(requiredY, placed.bottom + componentSpacing - shape.top);
+          }
+        compactedY = Math.min(y, requiredY);
       }
-      compactedY = Math.min(y, requiredY);
+      for (const shape of shapes)
+        placedShapes.push({
+          left: shape.left,
+          right: shape.left + shape.width,
+          top: compactedY + shape.top,
+          bottom: compactedY + shape.top + shape.height,
+        });
+      placements.push({ component, x: left, y: compactedY });
+      rowHeight = Math.max(rowHeight, bounds.height);
     }
-    for (const node of component.result.nodes)
-      placedShapes.push({
-        left: x + (node.x ?? 0) - component.bounds.left,
-        right: x + (node.x ?? 0) - component.bounds.left + (node.width ?? 0),
-        top: compactedY + (node.y ?? 0) - component.bounds.top,
-        bottom: compactedY + (node.y ?? 0) - component.bounds.top + (node.height ?? 0),
-      });
-    placements.push({ component, x, y: compactedY });
-    x += component.bounds.width + componentSpacing;
-    rowHeight = Math.max(rowHeight, component.bounds.height);
+    y += rowHeight + componentSpacing;
   }
-  // Components are packed in reading order. For UP and LEFT layouts, mirror the
-  // packing along the flow so later components follow the first one's flow
-  // instead of preceding it (e.g. an isolated state below an UP statechart's start).
-  const direction = options.direction ?? graph.direction ?? "right";
-  const packedWidth = Math.max(0, ...placements.map((p) => p.x + p.component.bounds.width));
   const packedHeight = Math.max(0, ...placements.map((p) => p.y + p.component.bounds.height));
-  for (const { component, x: packedX, y: packedY } of placements) {
-    const left = direction === "left" ? packedWidth - packedX - component.bounds.width : packedX;
+  for (const { component, x: left, y: packedY } of placements) {
     const top = direction === "up" ? packedHeight - packedY - component.bounds.height : packedY;
     const dx = padding.left + left - component.bounds.left;
     const dy = padding.top + top - component.bounds.top;
@@ -1324,7 +1375,10 @@ export function* createLayeredScopePipeline<N, E, G, P>(
   graph: Graph<N, E, G, P> | VisualGraph<N, E, G, P>,
   options: LayeredLayoutOptions,
   context?: LayoutExecutionContext,
+  /** Pairs and segments that keep their former routing because the new one bent them diagonally. */
+  fallbacks: OrthogonalFallbacks = { antiparallelPairs: new Set(), feedbackSegments: new Set() },
 ): Generator<LayeredCrossingPhase, VisualGraph<N, E, G, P>, LayerOrder> {
+  const scopeOptions = options;
   if ((options.settings?.["spacing.edgeEdge"] ?? 10) < 2) {
     options = { ...options, settings: { ...options.settings, "spacing.edgeEdge": 2 } };
   }
@@ -1371,6 +1425,18 @@ export function* createLayeredScopePipeline<N, E, G, P>(
     const separated = runSeparatedComponents(graph, options, context);
     if (separated) return separated;
   }
+  const hiddenLoopPorts = hideSelfLoopPorts(graph as Graph<N, E, G, P>, options);
+  if (hiddenLoopPorts)
+    return restoreSelfLoopPorts(
+      graph as Graph<N, E, G, P>,
+      yield* createLayeredScopePipeline(
+        hiddenLoopPorts.graph,
+        hiddenLoopPorts.options,
+        context,
+        fallbacks,
+      ),
+      hiddenLoopPorts.edges,
+    );
   const direction = options.direction ?? graph.direction ?? "right";
   const padding =
     typeof options.padding === "number"
@@ -1683,7 +1749,7 @@ export function* createLayeredScopePipeline<N, E, G, P>(
       },
     };
   }
-  const northSouth = insertNorthSouthPortDummies(expanded);
+  const northSouth = insertNorthSouthPortDummies(expanded, preparedPorts);
   expanded = northSouth.expansion;
   if (prepareModelOrder) markInitialModelOrderPrepared(expanded.input, preparedPorts!);
   const associates = new Map<string, string[]>(),
@@ -1789,6 +1855,8 @@ export function* createLayeredScopePipeline<N, E, G, P>(
     minimize: minimizeScope,
     finishOrder: finishCrossingOrder,
   };
+  const crossingOrder = order;
+  recordSweptPortOrder(graph, direction, order);
   traceLayeredPhase(() => ({
     kind: "crossing-order",
     scope: graph.id,
@@ -2154,6 +2222,10 @@ export function* createLayeredScopePipeline<N, E, G, P>(
   // rather than moving or orthogonalizing its routes afterwards.
   if (options.strategies?.routeEdges)
     measure("post-compaction", () => applyPostCompaction(expanded.input, placement));
+  const labelPortSideSegments = trackLabelPortSideFeedback(
+    expanded.input,
+    fallbacks.feedbackSegments,
+  );
   let expandedRoutes = measure("edge-routing", () =>
     edgeRouter(expanded.input, expanded.orientation, placement),
   );
@@ -2218,6 +2290,7 @@ export function* createLayeredScopePipeline<N, E, G, P>(
   const outerAntiparallelLabelIds = new Set<string>();
   const parallelLabelPositions = new Map<string, Point>();
   const postCompactionNodeCrossDeltas = new Map<string, number>();
+  const flowOrderedPairs = new Map<string, readonly [string, string]>();
   const horizontalAntiparallelFlow = direction === "left" || direction === "right";
   const usesVizInteractivePlacementProfile =
     options.strategies?.routeEdges === undefined &&
@@ -2313,6 +2386,7 @@ export function* createLayeredScopePipeline<N, E, G, P>(
     const horizontal = horizontalAntiparallelFlow;
     const nodesById = new Map(graph.nodes.map((node) => [node.id, node]));
     const pairEdges = new Map<string, GraphEdge[]>();
+    const flowOrder = direction === "left" || direction === "up";
     for (const edge of graph.edges) {
       if (edge.sourceId === edge.targetId || (edge.width ?? 0) <= 0 || (edge.height ?? 0) <= 0) {
         continue;
@@ -2322,7 +2396,7 @@ export function* createLayeredScopePipeline<N, E, G, P>(
       pair.push(edge);
       pairEdges.set(key, pair);
     }
-    for (const pair of pairEdges.values()) {
+    for (const [pairKey, pair] of pairEdges) {
       if (
         pair.length !== 2 ||
         pair[0]!.sourceId !== pair[1]!.targetId ||
@@ -2363,9 +2437,13 @@ export function* createLayeredScopePipeline<N, E, G, P>(
       const hasFlexiblePairPorts = hasFlexiblePorts(firstNode) && hasFlexiblePorts(secondNode);
       if (isolatedAntiparallelPair && !hasFlexiblePairPorts) continue;
 
-      const firstBeforeSecond = horizontal
-        ? firstRect.x + firstRect.width / 2 < secondRect.x + secondRect.width / 2
-        : firstRect.y + firstRect.height / 2 < secondRect.y + secondRect.height / 2;
+      // "Before" is in flow order: UP and LEFT layouts flow toward smaller coordinates.
+      const pairFlowOrder = flowOrder && !fallbacks.antiparallelPairs.has(pairKey);
+      const firstBeforeSecond =
+        (horizontal
+          ? firstRect.x + firstRect.width / 2 < secondRect.x + secondRect.width / 2
+          : firstRect.y + firstRect.height / 2 < secondRect.y + secondRect.height / 2) !==
+        pairFlowOrder;
       const beforeRect = firstBeforeSecond ? firstRect : secondRect;
       const afterRect = firstBeforeSecond ? secondRect : firstRect;
       const forward = pair.find((edge) =>
@@ -2374,6 +2452,7 @@ export function* createLayeredScopePipeline<N, E, G, P>(
           : edge.sourceId === pair[0]!.targetId,
       );
       if (!forward?.sourcePort || !forward.targetPort) continue;
+      if (pairFlowOrder) flowOrderedPairs.set(pairKey, [firstNode.id, secondNode.id]);
 
       let cross = Math.min(
         horizontal ? firstRect.y : firstRect.x,
@@ -2554,6 +2633,7 @@ export function* createLayeredScopePipeline<N, E, G, P>(
       routes.pointsByEdgeId as Map<string, readonly Point[]>,
       placement.rectByNodeId as Map<string, EntityRect>,
       horizontal,
+      Number(options.settings?.["spacing.edgeEdge"] ?? 10),
     );
   }
   if (options.settings?.["layering.nodePromotion.strategy"] === "MODEL_ORDER_LEFT_TO_RIGHT") {
@@ -2667,8 +2747,21 @@ export function* createLayeredScopePipeline<N, E, G, P>(
     };
   }
 
+  // Stacking the pair's labels from the padding and aligning both endpoints
+  // moves the nodes without regard for their layer neighbors, so it only
+  // applies when the two nodes connect to nothing else.
+  const connectsOnlyTo = (nodeId: string, otherId: string) =>
+    graph.edges.every(
+      (edge) =>
+        edge.sourceId === edge.targetId ||
+        (edge.sourceId !== nodeId && edge.targetId !== nodeId) ||
+        edge.sourceId === otherId ||
+        edge.targetId === otherId,
+    );
   for (const pair of labeledEdgesByPair.values()) {
     if (pair.length < 2) continue;
+    const { sourceId, targetId } = pair[0]!;
+    if (!connectsOnlyTo(sourceId, targetId) || !connectsOnlyTo(targetId, sourceId)) continue;
     const sourceRect = mutableRects.get(pair[0]!.sourceId);
     const targetRect = mutableRects.get(pair[0]!.targetId);
     if (!sourceRect || !targetRect) continue;
@@ -3062,7 +3155,6 @@ export function* createLayeredScopePipeline<N, E, G, P>(
       if (
         edgeRouting !== "ORTHOGONAL" ||
         labelPlacement !== "CENTER" ||
-        inlineLabel ||
         !hasMovableLoopPorts(input, edge) ||
         !sourceRect ||
         points.length !== 4
@@ -3249,6 +3341,41 @@ export function* createLayeredScopePipeline<N, E, G, P>(
     });
   }
 
+  // Diagonals are never valid orthogonal routes. A flow-ordered antiparallel
+  // pair or a label-port-side feedback chain that came out diagonal falls back
+  // to its former routing when that has fewer diagonals.
+  if (edgeRouting === "ORTHOGONAL") {
+    const diagonalEdges = edges.filter((edge) => countDiagonals(edge.points) > 0);
+    const antiparallelPairs = [...flowOrderedPairs].flatMap(([key, nodeIds]) =>
+      diagonalEdges.some(
+        (edge) => nodeIds.includes(edge.sourceId) || nodeIds.includes(edge.targetId),
+      )
+        ? [key]
+        : [],
+    );
+    const feedbackSegments = diagonalEdges.flatMap((edge) => {
+      const segments = expanded.segmentIdsByEdgeId.get(edge.id) ?? [edge.id];
+      return segments.some((id) => labelPortSideSegments.has(id)) ? segments : [];
+    });
+    if (antiparallelPairs.length > 0 || feedbackSegments.length > 0) {
+      const retry = createLayeredScopePipeline(
+        graph,
+        scopeOptions,
+        context && { ...context, diagnostics: [] },
+        {
+          antiparallelPairs: new Set([...fallbacks.antiparallelPairs, ...antiparallelPairs]),
+          feedbackSegments: new Set([...fallbacks.feedbackSegments, ...feedbackSegments]),
+        },
+      );
+      const prepared = retry.next();
+      const resumed = prepared.done ? prepared : retry.next(crossingOrder);
+      if (!resumed.done) throw new Error("Layered scope yielded more than one crossing phase");
+      const diagonals = (routed: readonly { points?: readonly Point[] }[]) =>
+        routed.reduce((sum, edge) => sum + countDiagonals(edge.points), 0);
+      if (diagonals(resumed.value.edges) < diagonals(edges)) return resumed.value;
+    }
+  }
+
   return setElkjs0111ResultPolicy(
     { ...graph, direction, nodes, edges },
     {
@@ -3261,6 +3388,23 @@ export function* createLayeredScopePipeline<N, E, G, P>(
   );
 }
 
+interface OrthogonalFallbacks {
+  /** Antiparallel pair keys that keep coordinate order instead of flow order. */
+  antiparallelPairs: ReadonlySet<string>;
+  /** Feedback segments that keep the plain detour instead of label-dummy port sides. */
+  feedbackSegments: ReadonlySet<string>;
+}
+
+function countDiagonals(points: readonly Point[] | undefined): number {
+  let count = 0;
+  for (let index = 1; index < (points?.length ?? 0); index++) {
+    const a = points![index - 1]!;
+    const b = points![index]!;
+    if (Math.abs(a.x - b.x) > 1e-6 && Math.abs(a.y - b.y) > 1e-6) count++;
+  }
+  return count;
+}
+
 /**
  * Deterministic native layered layout for an `@statelyai/graph` graph.
  *

package/src/layered/loop-envelopes.ts

@@ -8,6 +8,86 @@ import {
   selfLoopTracks,
 } from "./fixed-self-loop";
 import { findNode } from "./node-lookup";
+import { hiddenLoopPorts } from "./self-loop-ports";
+
+type CanonicalSide = "NORTH" | "SOUTH" | "EAST" | "WEST";
+const crossSide = (side: CanonicalSide) => side === "NORTH" || side === "SOUTH";
+
+/**
+ * Extents of a movable loop's hidden ports in the canonical rightward frame:
+ * along its side, and protruding from it.
+ */
+function loopPortExtents(input: LayeredPhaseInput, edge: GraphEdge, side: CanonicalSide) {
+  const ports = hiddenLoopPorts(input.settings, edge.id);
+  const horizontal = input.direction === "right" || input.direction === "left";
+  const along = (crossSide(side) === horizontal ? "width" : "height") as "width" | "height";
+  const normal = along === "width" ? "height" : "width";
+  return {
+    along: ports ? ports.source[along] + ports.target[along] : 0,
+    normal: ports ? Math.max(ports.source[normal], ports.target[normal]) : 0,
+  };
+}
+
+/** A movable loop's label extent away from its side, in the canonical frame. */
+export function movableLoopLabelExtent(
+  input: LayeredPhaseInput,
+  edge: GraphEdge,
+  side: CanonicalSide,
+): number {
+  const horizontal = input.direction === "right" || input.direction === "left";
+  const size = (crossSide(side) === horizontal ? edge.height : edge.width) ?? 0;
+  return size > 0 ? size + Number(input.settings["spacing.edgeLabel"] ?? 2) : 0;
+}
+
+/**
+ * ELK's OrthogonalSelfLoopRouter routing slot of a movable loop, measured
+ * from its node side in the canonical frame: past the protruding ports and
+ * the self-loop spacing, then one edge spacing plus any label per inner slot.
+ */
+export function movableLoopTrack(
+  input: LayeredPhaseInput,
+  sideLoops: readonly GraphEdge[],
+  edge: GraphEdge,
+  side: CanonicalSide,
+  ordering: string,
+): number {
+  const ordered = ordering === "REVERSE_STACKED" ? [...sideLoops].reverse() : sideLoops;
+  const inner = ordering === "SEQUENCED" ? [] : ordered.slice(0, ordered.indexOf(edge));
+  const edgeSpacing = Number(input.settings["spacing.edgeEdge"] ?? 10);
+  return (
+    Math.max(0, ...sideLoops.map((loop) => loopPortExtents(input, loop, side).normal)) +
+    Number(input.settings["spacing.nodeSelfLoop"] ?? 10) +
+    inner.reduce(
+      (sum, loop) =>
+        sum + edgeSpacing + (crossSide(side) ? movableLoopLabelExtent(input, loop, side) : 0),
+      0,
+    )
+  );
+}
+
+/**
+ * Canonical position of a movable loop port along its side, given its
+ * DISTRIBUTED ratio among the side's implicit ports (ELK's port placement
+ * with equal gaps between hidden ports of their own size).
+ */
+export function movableLoopPortOffset(
+  input: LayeredPhaseInput,
+  sideLoops: readonly GraphEdge[],
+  side: CanonicalSide,
+  length: number,
+  ratio: number,
+): { along: number; normal: number } {
+  const count = sideLoops.length * 2;
+  const extents = sideLoops.map((loop) => loopPortExtents(input, loop, side));
+  const total = extents.reduce((sum, extent) => sum + extent.along, 0);
+  const size = total / count;
+  const index = Math.round(ratio * (count + 1)) - 1;
+  const gap = (length - total) / (count + 1);
+  return {
+    along: gap * (index + 1) + size * index + size / 2,
+    normal: Math.max(0, ...extents.map((extent) => extent.normal)),
+  };
+}
 
 export interface LoopEnvelope {
   before: number;
@@ -125,18 +205,10 @@ export function loopEnvelopes(input: LayeredPhaseInput): ReadonlyMap<string, Loo
       }
     }
     const loops = allLoops.filter((edge) => hasMovableLoopPorts(input, edge));
-    // Inline labels remain owned by the existing labeled-loop phase. Move
-    // the entire node together when that phase is ported, rather than mixing
-    // two different loop distributions and reservations on the same node.
-    if (
-      loops.length === 0 ||
-      loops.some((edge) => input.edgeSettings?.(edge)?.["edgeLabels.inline"] === true)
-    )
-      continue;
+    if (loops.length === 0) continue;
     const settings = input.nodeSettings?.(node);
     const distribution = settings?.["edgeRouting.selfLoopDistribution"] ?? "NORTH";
     const ordering = settings?.["edgeRouting.selfLoopOrdering"] ?? "STACKED";
-    const spacing = Number(input.settings["spacing.nodeSelfLoop"] ?? 10);
     const envelope = { before: 0, after: 0, flowBefore: 0, flowAfter: 0 };
     const sides =
       distribution === "EQUALLY"
@@ -144,25 +216,23 @@ export function loopEnvelopes(input: LayeredPhaseInput): ReadonlyMap<string, Loo
         : distribution === "NORTH_SOUTH"
           ? (["before", "after"] as const)
           : (["before"] as const);
+    const canonicalSides = {
+      before: "NORTH",
+      after: "SOUTH",
+      flowAfter: "EAST",
+      flowBefore: "WEST",
+    } as const;
     for (const side of sides) {
       const selected = loops.filter((_, index) => sides[index % sides.length] === side);
-      const horizontal = input.direction === "right" || input.direction === "left";
-      const crossSize =
-        side === "before" || side === "after"
-          ? horizontal
-            ? "height"
-            : "width"
-          : horizontal
-            ? "width"
-            : "height";
-      const labelSpacing = Number(input.settings["spacing.edgeLabel"] ?? 2);
-      envelope[side] =
-        spacing * (ordering === "SEQUENCED" ? Math.min(1, selected.length) : selected.length) +
-        selected.reduce(
-          (sum, edge) =>
-            sum + ((edge[crossSize] ?? 0) > 0 ? (edge[crossSize] ?? 0) + labelSpacing : 0),
-          0,
-        );
+      const canonical = canonicalSides[side];
+      envelope[side] = Math.max(
+        0,
+        ...selected.map(
+          (edge) =>
+            movableLoopTrack(input, selected, edge, canonical, ordering) +
+            movableLoopLabelExtent(input, edge, canonical),
+        ),
+      );
     }
     envelopes.set(node.id, envelope);
   }

package/src/layered/north-south-ports.ts

@@ -27,7 +27,11 @@ export interface NorthSouthPortExpansion {
 }
 
 /** Detach fixed cross-axis ports into same-layer units before crossing minimization. */
-export function insertNorthSouthPortDummies(expansion: LongEdgeExpansion): NorthSouthPortExpansion {
+export function insertNorthSouthPortDummies(
+  expansion: LongEdgeExpansion,
+  /** Physical port order after ELK's model-order sort, by node id. */
+  sortedPorts?: ReadonlyMap<string, readonly string[]>,
+): NorthSouthPortExpansion {
   const { input, orientation } = expansion;
   const vertical = input.direction === "down" || input.direction === "up";
   const forward =
@@ -152,14 +156,23 @@ export function insertNorthSouthPortDummies(expansion: LongEdgeExpansion): North
   const roleOrder = (origin: CrossPortOrigin) =>
     origin.input && origin.output ? 2 : origin.input ? 0 : 1;
   const negativeFlow = input.direction === "left" || input.direction === "up";
+  // With model order, ELK reverses each side's output-only ports before
+  // creating dummies (modelOrderNorthSouthInputReversing).
+  const modelOrder = (input.settings["considerModelOrder.strategy"] ?? "NONE") !== "NONE";
   const orderedOrigins = input.graph.nodes.flatMap((node) => {
     const entries = [...origins].filter(([, origin]) => origin.node.id === node.id);
     const constraints = input.nodeSettings?.(node)?.portConstraints;
+    const sorted = sortedPorts?.get(node.id);
     const coordinate = (origin: CrossPortOrigin) => {
+      const flip = modelOrder && origin.output && !origin.input ? -1 : 1;
       if (constraints === "FIXED_POS" || constraints === "FIXED_RATIO")
-        return (vertical ? (origin.port.y ?? 0) : (origin.port.x ?? 0)) * (negativeFlow ? -1 : 1);
-      const index = node.ports?.indexOf(origin.port) ?? 0;
-      return origin.beforeOwner ? index : -index;
+        return (
+          (vertical ? (origin.port.y ?? 0) : (origin.port.x ?? 0)) * (negativeFlow ? -1 : 1) * flip
+        );
+      const index = sorted
+        ? sorted.indexOf(JSON.stringify([node.id, origin.port.name]))
+        : (node.ports?.indexOf(origin.port) ?? 0);
+      return (origin.beforeOwner ? index : -index) * flip;
     };
     return entries.sort(
       ([, a], [, b]) =>