@statelyai/layout 0.3.0 → 0.4.1

package/src/layered/orthogonal-segments.ts

@@ -0,0 +1,243 @@
+/*******************************************************************************
+ * Copyright (c) 2010, 2020 Kiel University and others.
+ * Adapted from ELK v0.11.0 orthogonal segment splitting and routing generation.
+ * Source commit: 54123e884b1ae743b453260f713b20c9bf5787f2
+ * SPDX-License-Identifier: EPL-2.0
+ *******************************************************************************/
+import type { JavaRandom } from "../java-random";
+import { detectOrthogonalCycles, type OrthogonalDependency } from "./orthogonal-cycle-order";
+export interface OrthogonalSegmentInput {
+  incoming: readonly number[];
+  outgoing: readonly number[];
+}
+export interface OrthogonalSegment {
+  incoming: number[];
+  outgoing: number[];
+  start: number;
+  end: number;
+  slot: number;
+  partner?: number;
+  splitBy?: number;
+}
+const extent = (s: OrthogonalSegmentInput) => {
+  const values = [...s.incoming, ...s.outgoing];
+  return {
+    start: values.length ? Math.min(...values) : NaN,
+    end: values.length ? Math.max(...values) : NaN,
+  };
+};
+const crossings = (positions: readonly number[], start: number, end: number) =>
+  positions.filter((p) => p >= start && p <= end).length;
+const orderingCrossings = (a: OrthogonalSegment, b: OrthogonalSegment) =>
+  crossings(a.outgoing, b.start, b.end) + crossings(b.incoming, a.start, a.end);
+/** Full ELK segment dependency, critical split, cycle removal and rank phases. */
+export function routeOrthogonalSegments(
+  input: readonly OrthogonalSegmentInput[],
+  conflictThreshold: number,
+  criticalThreshold: number,
+  random: JavaRandom,
+) {
+  const segments: OrthogonalSegment[] = input.map((s) => ({
+    incoming: [...s.incoming],
+    outgoing: [...s.outgoing],
+    ...extent(s),
+    slot: 0,
+  }));
+  let dependencies: OrthogonalDependency[] = [];
+  const add = (source: number, target: number, critical: boolean, weight: number) =>
+    dependencies.push({ source, target, critical, weight });
+  const conflicts = (a: readonly number[], b: readonly number[]) => {
+    if (!a.length || !b.length) return 0;
+    let i = 0,
+      j = 0,
+      count = 0;
+    while (true) {
+      const x = a[i]!,
+        y = b[j]!;
+      if (x > y - criticalThreshold && x < y + criticalThreshold) return -1;
+      if (x > y - conflictThreshold && x < y + conflictThreshold) count++;
+      if (x <= y && i < a.length - 1) i++;
+      else if (y <= x && j < b.length - 1) j++;
+      else break;
+    }
+    return count;
+  };
+  const create = (a: number, b: number) => {
+    const left = segments[a]!,
+      right = segments[b]!;
+    if (Math.abs(left.start - left.end) < 1e-3 || Math.abs(right.start - right.end) < 1e-3)
+      return 0;
+    const c1 = conflicts(left.outgoing, right.incoming),
+      c2 = conflicts(right.outgoing, left.incoming);
+    if (c1 === -1 || c2 === -1) {
+      if (c1 === -1) add(b, a, true, 1);
+      if (c2 === -1) add(a, b, true, 1);
+      return Number(c1 === -1) + Number(c2 === -1);
+    }
+    const v1 = c1 + 16 * orderingCrossings(left, right),
+      v2 = c2 + 16 * orderingCrossings(right, left);
+    if (v1 < v2) add(a, b, false, v2 - v1);
+    else if (v1 > v2) add(b, a, false, v1 - v2);
+    else if (v1 > 0) {
+      add(a, b, false, 0);
+      add(b, a, false, 0);
+    }
+    return 0;
+  };
+  let criticalCount = 0;
+  for (let a = 0; a < segments.length - 1; a++)
+    for (let b = a + 1; b < segments.length; b++) criticalCount += create(a, b);
+  if (criticalCount >= 2) {
+    const cycle = detectOrthogonalCycles(segments.length, dependencies, true, random);
+    const selected = new Set<number>();
+    for (const dependency of cycle.backwards) {
+      let { source, target } = dependency;
+      if (selected.has(source) || selected.has(target)) continue;
+      const a = segments[source]!,
+        b = segments[target]!;
+      if (a.incoming.length + a.outgoing.length > 2 && b.incoming.length + b.outgoing.length <= 2)
+        [source, target] = [target, source];
+      selected.add(source);
+      segments[source]!.splitBy = target;
+    }
+    const coords = segments.flatMap((s) => [...s.incoming, ...s.outgoing]).sort((a, b) => a - b);
+    const areas: Array<{ start: number; end: number }> = [];
+    for (let i = 1; i < coords.length; i++)
+      if (coords[i]! - coords[i - 1]! >= 2 * criticalThreshold)
+        areas.push({
+          start: coords[i - 1]! + criticalThreshold,
+          end: coords[i]! - criticalThreshold,
+        });
+    const ordered = [...selected].sort(
+      (a, b) => segments[a]!.end - segments[a]!.start - (segments[b]!.end - segments[b]!.start),
+    );
+    for (const index of ordered) {
+      const segment = segments[index]!,
+        causing = segment.splitBy!;
+      let position = (segment.start + segment.end) / 2;
+      const possible = areas.flatMap((area, i) =>
+        area.start <= segment.end && area.end >= segment.start ? [i] : [],
+      );
+      if (possible.length) {
+        const rating = (areaIndex: number) => {
+          const area = areas[areaIndex]!,
+            center = (area.start + area.end) / 2;
+          // ELK rates using the provisional halves' extents before adding the bridge.
+          const left = {
+            ...segment,
+            outgoing: [center],
+            ...extent({ incoming: segment.incoming, outgoing: [] }),
+          };
+          const right = {
+            ...segment,
+            incoming: [center],
+            ...extent({ incoming: [], outgoing: segment.outgoing }),
+          };
+          let depCount = 2,
+            cross = 0;
+          const neighbors = [
+            ...dependencies.filter((d) => d.target === index).map((d) => d.source),
+            ...dependencies.filter((d) => d.source === index).map((d) => d.target),
+          ];
+          for (const other of neighbors)
+            for (const half of [left, right]) {
+              const c1 = orderingCrossings(half, segments[other]!),
+                c2 = orderingCrossings(segments[other]!, half);
+              if (c1 === c2) {
+                if (c1 > 0) {
+                  depCount += 2;
+                  cross += c1;
+                }
+              } else {
+                depCount++;
+                cross += Math.min(c1, c2);
+              }
+            }
+          cross +=
+            orderingCrossings(left, segments[causing]!) +
+            orderingCrossings(segments[causing]!, right);
+          return { cross, depCount, size: area.end - area.start };
+        };
+        let best = possible[0]!,
+          score = rating(best);
+        for (const candidate of possible.slice(1)) {
+          const curr = rating(candidate);
+          if (
+            curr.cross < score.cross ||
+            (curr.cross === score.cross &&
+              (curr.depCount < score.depCount ||
+                (curr.depCount === score.depCount && curr.size > score.size)))
+          ) {
+            best = candidate;
+            score = curr;
+          }
+        }
+        const area = areas[best]!;
+        position = (area.start + area.end) / 2;
+        areas.splice(best, 1);
+        if ((area.end - area.start) / 2 >= criticalThreshold) {
+          const replacement = [];
+          if (area.start <= position - criticalThreshold)
+            replacement.push({ start: area.start, end: position - criticalThreshold });
+          if (position + criticalThreshold <= area.end)
+            replacement.push({ start: position + criticalThreshold, end: area.end });
+          areas.splice(best, 0, ...replacement);
+        }
+      }
+      const partner = segments.length;
+      const outgoing = segment.outgoing;
+      segment.outgoing = [position];
+      segment.partner = partner;
+      Object.assign(segment, extent(segment));
+      segments.push({
+        incoming: [position],
+        outgoing,
+        ...extent({ incoming: [position], outgoing }),
+        slot: 0,
+        partner: index,
+      });
+      dependencies = dependencies.filter((d) => d.source !== index && d.target !== index);
+      add(index, causing, true, 1);
+      add(causing, partner, true, 1);
+      for (let other = 0; other < segments.length; other++)
+        if (other !== index && other !== partner && other !== causing) {
+          create(other, index);
+          create(other, partner);
+        }
+    }
+  }
+  const regular = detectOrthogonalCycles(segments.length, dependencies, false, random);
+  // Reversal appends to both adjacency lists, just like ELK's setters.
+  for (const backwards of regular.backwards) {
+    dependencies.splice(dependencies.indexOf(backwards), 1);
+    if (backwards.weight > 0)
+      dependencies.push({ ...backwards, source: backwards.target, target: backwards.source });
+  }
+  const inCount = segments.map((_, i) => dependencies.filter((d) => d.target === i).length),
+    outCount = segments.map((_, i) => dependencies.filter((d) => d.source === i).length);
+  const sources = inCount.flatMap((n, i) => (n === 0 ? [i] : [])),
+    targets = outCount.flatMap((n, i) =>
+      n === 0 && segments[i]!.incoming.length === 0 ? [i] : [],
+    );
+  let maxRank = -1;
+  while (sources.length) {
+    const index = sources.shift()!;
+    for (const d of dependencies.filter((d) => d.source === index)) {
+      segments[d.target]!.slot = Math.max(segments[d.target]!.slot, segments[index]!.slot + 1);
+      maxRank = Math.max(maxRank, segments[d.target]!.slot);
+      if (--inCount[d.target]! === 0) sources.push(d.target);
+    }
+  }
+  if (maxRank > -1) {
+    for (const index of targets) segments[index]!.slot = maxRank;
+    while (targets.length) {
+      const index = targets.shift()!;
+      for (const d of dependencies.filter((d) => d.target === index)) {
+        if (segments[d.source]!.incoming.length) continue;
+        segments[d.source]!.slot = Math.min(segments[d.source]!.slot, segments[index]!.slot - 1);
+        if (--outCount[d.source]! === 0) targets.push(d.source);
+      }
+    }
+  }
+  return { segments, dependencies };
+}

package/src/layered/placement-orientation.ts

@@ -0,0 +1,22 @@
+import type { AcyclicOrientation, LayeredPhaseInput, LayerOrder } from "./types";
+
+const orientationByInput = new WeakMap<LayeredPhaseInput, AcyclicOrientation>();
+
+/** Retain the active acyclic topology without altering authored endpoints or public output. */
+export function setPlacementOrientation(
+  input: LayeredPhaseInput,
+  orientation: AcyclicOrientation,
+): void {
+  orientationByInput.set(input, orientation);
+}
+export function getPlacementOrientation(input: LayeredPhaseInput): AcyclicOrientation | undefined {
+  return orientationByInput.get(input);
+}
+
+const orderByInput = new WeakMap<LayeredPhaseInput, LayerOrder>();
+export function setPlacementOrder(input: LayeredPhaseInput, order: LayerOrder): void {
+  orderByInput.set(input, order);
+}
+export function getPlacementOrder(input: LayeredPhaseInput): LayerOrder | undefined {
+  return orderByInput.get(input);
+}

package/src/layered/port-distributor.ts

@@ -0,0 +1,192 @@
+/*
+ * Copyright (c) 2016, 2020 Kiel University and others.
+ * Native adaptation of ELK AbstractBarycenterPortDistributor,
+ * NodeRelativePortDistributor and LayerTotalPortDistributor.
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import type { CrossingGraph, CrossingNode, CrossingPort } from "./crossing-counter";
+
+export interface PortDistributionState {
+  ranks: Record<string, number>;
+  barycenters: Record<string, number>;
+  positions: Record<string, number>;
+}
+export interface PortDistributionOptions {
+  nodeRelative: boolean;
+  fixedOrder: ReadonlySet<string>;
+  hierarchical: ReadonlySet<string>;
+}
+
+/** Stateful clockwise port distribution across successive layer sweeps. */
+export class CanonicalPortDistributor {
+  readonly state: PortDistributionState;
+  private topologyGraph?: CrossingGraph;
+  private owner = new Map<string, CrossingNode>();
+  private layerByPort = new Map<string, number>();
+  private nodes = new Map<string, CrossingNode>();
+  private incoming = new Map<string, string[]>();
+  private outgoing = new Map<string, string[]>();
+  constructor(graph: CrossingGraph, state?: PortDistributionState) {
+    this.state = state ? structuredClone(state) : { ranks: {}, barycenters: {}, positions: {} };
+    for (const layer of graph.layers)
+      for (const [position, node] of layer.entries()) {
+        this.state.positions[node.id] ??= position;
+        for (const port of node.ports) {
+          this.state.ranks[port.id] ??= 0;
+          this.state.barycenters[port.id] ??= 0;
+        }
+      }
+  }
+
+  private prepareTopology(graph: CrossingGraph): void {
+    // Sweeps reorder nodes within their layers; connectivity stays constant.
+    // A restored graph object invalidates the topology once, not per layer.
+    if (this.topologyGraph !== graph) {
+      this.topologyGraph = graph;
+      this.owner.clear();
+      this.layerByPort.clear();
+      this.nodes.clear();
+      this.incoming.clear();
+      this.outgoing.clear();
+      for (const [layer, members] of graph.layers.entries())
+        for (const node of members) {
+          this.nodes.set(node.id, node);
+          for (const port of node.ports) {
+            this.owner.set(port.id, node);
+            this.layerByPort.set(port.id, layer);
+            this.incoming.set(port.id, []);
+            this.outgoing.set(port.id, []);
+          }
+        }
+      for (const edge of graph.edges) {
+        this.incoming.get(edge.target)!.push(edge.source);
+        this.outgoing.get(edge.source)!.push(edge.target);
+      }
+    }
+  }
+
+  calculatePortRanks(
+    graph: CrossingGraph,
+    layer: readonly CrossingNode[],
+    input: boolean,
+    nodeRelative: boolean,
+  ): void {
+    this.prepareTopology(graph);
+    let consumed = 0;
+    for (const node of layer) {
+      const ports = node.ports.filter(
+        (port) => (input ? this.incoming : this.outgoing).get(port.id)!.length > 0,
+      );
+      const increment = nodeRelative ? 1 / (ports.length + 1) : 1;
+      if (input) {
+        let north = consumed + ports.filter((port) => port.side === "NORTH").length * increment;
+        let rest = nodeRelative ? consumed + 1 - increment : consumed + ports.length;
+        for (const port of ports) {
+          this.state.ranks[port.id] = port.side === "NORTH" ? north : rest;
+          if (port.side === "NORTH") north -= increment;
+          else rest -= increment;
+        }
+      } else {
+        let position = consumed + increment;
+        for (const port of ports) {
+          this.state.ranks[port.id] = position;
+          position += increment;
+        }
+      }
+      consumed += nodeRelative ? 1 : ports.length;
+    }
+  }
+
+  distribute(
+    graph: CrossingGraph,
+    index: number,
+    forward: boolean,
+    options: PortDistributionOptions,
+  ): void {
+    this.prepareTopology(graph);
+    const { owner, layerByPort, nodes, incoming, outgoing } = this;
+    const degree = (port: string) => incoming.get(port)!.length + outgoing.get(port)!.length;
+    const ranks = (layer: CrossingNode[], input: boolean) =>
+      this.calculatePortRanks(graph, layer, input, options.nodeRelative);
+    const distributeNode = (node: CrossingNode, side: "EAST" | "WEST") => {
+      if (options.fixedOrder.has(node.id)) return;
+      const layerIndex = node.ports.length ? layerByPort.get(node.ports[0]!.id)! : index;
+      const size = graph.layers[layerIndex]!.length;
+      for (const face of [side, "SOUTH", "NORTH"] as const) {
+        let minimum = 0,
+          maximum = 0;
+        const inLayer: CrossingPort[] = [];
+        for (const port of node.ports.filter((port) => port.side === face)) {
+          let sum = 0;
+          const cross = port.side === "NORTH" || port.side === "SOUTH";
+          if (cross) {
+            if (!port.dummy) continue;
+            const dummy = nodes.get(port.dummy)!;
+            let input = false,
+              output = false;
+            for (const peer of dummy.ports) {
+              if (peer.origin !== port.id) continue;
+              if (outgoing.get(peer.id)!.length) output = true;
+              else if (incoming.get(peer.id)!.length) input = true;
+            }
+            const position = this.state.positions[dummy.id]!;
+            const large = 2 * size + 1;
+            if (input && !output) sum += port.side === "NORTH" ? -position : large - position;
+            else if (output && !input) sum += position + 1;
+            else if (input && output) sum += port.side === "NORTH" ? 0 : large / 2;
+          } else {
+            const peers = [...outgoing.get(port.id)!, ...incoming.get(port.id)!];
+            if (peers.some((peer) => layerByPort.get(peer) === layerIndex)) {
+              inLayer.push(port);
+              continue;
+            }
+            for (const peer of outgoing.get(port.id)!) sum += this.state.ranks[peer]!;
+            for (const peer of incoming.get(port.id)!) sum -= this.state.ranks[peer]!;
+          }
+          if (degree(port.id)) {
+            const value = sum / degree(port.id);
+            this.state.barycenters[port.id] = value;
+            minimum = Math.min(minimum, value);
+            maximum = Math.max(maximum, value);
+          } else if (cross) this.state.barycenters[port.id] = sum;
+        }
+        for (const port of inLayer) {
+          const peers = [...incoming.get(port.id)!, ...outgoing.get(port.id)!].filter(
+            (peer) => layerByPort.get(peer) === layerIndex,
+          );
+          const value =
+            peers.reduce((sum, peer) => sum + this.state.positions[owner.get(peer)!.id]! + 1, 0) /
+            peers.length;
+          const above = value < this.state.positions[node.id]! + 1;
+          this.state.barycenters[port.id] =
+            port.side === "EAST"
+              ? above
+                ? minimum - value
+                : maximum + (size + 1 - value)
+              : above
+                ? maximum + value
+                : minimum - (size + 1 - value);
+        }
+      }
+      const sideRank = { NORTH: 0, EAST: 1, SOUTH: 2, WEST: 3 };
+      node.ports.sort((a, b) => {
+        const side = sideRank[a.side] - sideRank[b.side];
+        if (side) return side;
+        const left = this.state.barycenters[a.id]!,
+          right = this.state.barycenters[b.id]!;
+        return left === 0 && right === 0 ? 0 : left === 0 ? -1 : right === 0 ? 1 : left - right;
+      });
+    };
+    const free = graph.layers[index]!;
+    for (const [position, node] of free.entries()) this.state.positions[node.id] = position;
+    const side = forward ? "WEST" : "EAST";
+    const fixed = graph.layers[index + (forward ? -1 : 1)];
+    if (fixed) {
+      ranks(fixed, !forward);
+      for (const node of free) distributeNode(node, side);
+      ranks(free, forward);
+      for (const node of fixed)
+        if (!options.hierarchical.has(node.id)) distributeNode(node, forward ? "EAST" : "WEST");
+    } else for (const node of free) distributeNode(node, side);
+  }
+}

package/src/layered/port-edge-order.ts

@@ -0,0 +1,20 @@
+import type { GraphEdge } from "@statelyai/graph";
+import type { LayeredPhaseInput } from "./types";
+
+/** ELK traverses connected edges through the node's port list, preserving each port's edge order. */
+export function connectedEdgesInPortOrder(input: LayeredPhaseInput, nodeId: string): GraphEdge[] {
+  const node = input.graph.nodes.find((candidate) => candidate.id === nodeId);
+  const portRank = new Map(node?.ports?.map((port, index) => [port.name, index]));
+  const explicitCount = portRank.size;
+  return input.graph.edges
+    .map((edge, index) => ({ edge, index }))
+    .filter(({ edge }) => edge.sourceId === nodeId || edge.targetId === nodeId)
+    .sort((a, b) => {
+      const rank = ({ edge, index }: { edge: GraphEdge; index: number }) => {
+        const port = edge.sourceId === nodeId ? edge.sourcePort : edge.targetPort;
+        return (port === undefined ? undefined : portRank.get(port)) ?? explicitCount + index;
+      };
+      return rank(a) - rank(b) || a.index - b.index;
+    })
+    .map(({ edge }) => edge);
+}

package/src/layered/replace-routing.ts

@@ -0,0 +1,45 @@
+import { worldGeometry } from "../authoring/coordinates";
+import { routeToPoints } from "../routing/adapters";
+import { recordRouteGeometry } from "../routing/layout-cache";
+import type { CompoundVisualGraph } from "./compound";
+import type { LayeredLayoutOptions } from "./types";
+
+/** Run a replacement on finalized geometry, with no initial route hints. */
+export function replaceLayoutRouting<N, E, G, P>(
+  graph: CompoundVisualGraph<N, E, G, P>,
+  options: LayeredLayoutOptions,
+): CompoundVisualGraph<N, E, G, P> {
+  if (!options.routing) return graph;
+  const { compoundRoutes: _routes, compoundGeometry: _geometry, ...geometry } = graph;
+  const world = worldGeometry(geometry);
+  const input = {
+    ...geometry,
+    nodes: world.nodes.map((n) => ({ ...n, ports: n.ports?.map((p) => ({ ...p })) })),
+    edges: world.edges.map(({ points: _points, routing: _routing, ...e }) => e),
+  };
+  const snapshot = options.routing.strategy.route(input, {
+    ...options.routing.settings,
+    coordinateSpace: "world",
+  });
+  if (snapshot instanceof Promise)
+    throw new TypeError(
+      "Layered route replacement must be synchronous; run async routing separately",
+    );
+  if (
+    snapshot.routes.size !== graph.edges.length ||
+    graph.edges.some((e) => !snapshot.routes.has(e.id))
+  )
+    throw new Error("Replacement router must return exactly one route for every edge");
+  const result = {
+    ...graph,
+    edgeCoordinateSpace: "world" as const,
+    edges: graph.edges.map((edge) => ({
+      ...edge,
+      points: routeToPoints(snapshot.routes.get(edge.id)!),
+      routing: "polyline" as const,
+    })),
+    compoundRoutes: snapshot.routes,
+  };
+  recordRouteGeometry(result, result.compoundRoutes);
+  return result;
+}

package/src/layered/routing-coordinates.ts

@@ -0,0 +1,32 @@
+import type { NodePlacement } from "./types";
+
+// ELK routes in the node placer's coordinate space, before graph-padding normalization.
+const coordinateSpaces = new WeakMap<
+  NodePlacement,
+  { raw: NodePlacement; normalized: NodePlacement }
+>();
+
+export function recordRoutingCoordinates(placement: NodePlacement, raw: NodePlacement): void {
+  coordinateSpaces.set(placement, {
+    raw,
+    normalized: { rectByNodeId: new Map(placement.rectByNodeId) },
+  });
+}
+
+export function routingCoordinates(placement: NodePlacement): NodePlacement {
+  const spaces = coordinateSpaces.get(placement);
+  if (!spaces) return placement;
+  return {
+    rectByNodeId: new Map(
+      [...placement.rectByNodeId].map(([id, rect]) => {
+        const original = spaces.normalized.rectByNodeId.get(id),
+          raw = spaces.raw.rectByNodeId.get(id);
+        if (!original || !raw) return [id, rect];
+        return [
+          id,
+          { ...rect, x: raw.x + (rect.x - original.x), y: raw.y + (rect.y - original.y) },
+        ];
+      }),
+    ),
+  };
+}

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

@@ -108,10 +108,31 @@ export function separateExteriorLabels<E extends ExteriorLabelEdge>({
             right.length - left.length,
         )[0];
     if (!routeTrack) return [];
+    // Long-edge joining can retain several collinear points through a label
+    // dummy. They form one track; moving only one fragment creates diagonals
+    // at the retained junctions.
+    const pointCross = (point: Point) => (horizontalFlow ? point.y : point.x);
+    const pointFlow = (point: Point) => (horizontalFlow ? point.x : point.y);
+    let startIndex = routeTrack.startIndex;
+    let endIndex = startIndex + 1;
+    while (startIndex > 0 && pointCross(edge.points[startIndex - 1]!) === routeTrack.cross)
+      startIndex--;
+    while (
+      endIndex + 1 < edge.points.length &&
+      pointCross(edge.points[endIndex + 1]!) === routeTrack.cross
+    )
+      endIndex++;
+    const trackPoints = edge.points.slice(startIndex, endIndex + 1);
     return [
       {
         edge,
-        exteriorTrack: routeTrack,
+        exteriorTrack: {
+          ...routeTrack,
+          startIndex,
+          endIndex,
+          flowStart: Math.min(...trackPoints.map(pointFlow)),
+          flowEnd: Math.max(...trackPoints.map(pointFlow)),
+        },
         preserveAnchors: exteriorTrack === undefined,
         labelRect,
         lowSide:
@@ -222,17 +243,14 @@ export function separateExteriorLabels<E extends ExteriorLabelEdge>({
     else edge.x += totalDelta;
     if (!exteriorTrack) continue;
     edge.points = edge.points.flatMap((point, index) => {
-      if (index !== exteriorTrack.startIndex && index !== exteriorTrack.startIndex + 1)
-        return [point];
+      if (index < exteriorTrack.startIndex || index > exteriorTrack.endIndex) 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
+        : preserveAnchors && index === exteriorTrack.endIndex && index === edge.points.length - 1
           ? [shifted, point]
           : [shifted];
     });

package/src/layered/spacing.ts

@@ -1,3 +1,4 @@
+import { externalPortDummyOf } from "./external-port-dummy";
 import type { LayeredPhaseInput } from "./types";
 
 export type IndividualSpacing = Readonly<Record<string, number>>;
@@ -10,20 +11,41 @@ export function nodeNodeSpacing(
 ): number {
   const firstBreakingPoint = firstId.startsWith("__layout_breaking:");
   const secondBreakingPoint = secondId.startsWith("__layout_breaking:");
-  const firstDummy = firstId.startsWith("__layout_dummy:") || firstBreakingPoint;
-  const secondDummy = secondId.startsWith("__layout_dummy:") || secondBreakingPoint;
+  const firstLabel = firstId.startsWith("__layout_dummy:label:");
+  const secondLabel = secondId.startsWith("__layout_dummy:label:");
+  const firstNode = input.graph.nodes.find((node) => node.id === firstId);
+  const secondNode = input.graph.nodes.find((node) => node.id === secondId);
+  const firstExternal = firstNode !== undefined && externalPortDummyOf(firstNode) !== undefined;
+  const secondExternal = secondNode !== undefined && externalPortDummyOf(secondNode) !== undefined;
+  const firstDummy = firstId.startsWith("__layout_dummy:") || firstBreakingPoint || firstExternal;
+  const secondDummy =
+    secondId.startsWith("__layout_dummy:") || secondBreakingPoint || secondExternal;
   const spacingName =
-    firstDummy && secondDummy && firstBreakingPoint === secondBreakingPoint
-      ? "spacing.edgeEdge"
-      : firstDummy || secondDummy
-        ? "spacing.edgeNode"
-        : "spacing.node";
+    firstExternal && secondExternal
+      ? "spacing.portPort"
+      : (firstExternal && secondLabel) || (secondExternal && firstLabel)
+        ? "spacing.labelPortVertical"
+        : firstLabel && secondLabel
+          ? "spacing.edgeEdge"
+          : (firstLabel && !secondDummy) || (secondLabel && !firstDummy)
+            ? "spacing.node"
+            : (firstLabel && secondDummy) || (secondLabel && firstDummy)
+              ? "spacing.edgeNode"
+              : firstDummy && secondDummy && firstBreakingPoint === secondBreakingPoint
+                ? "spacing.edgeEdge"
+                : firstDummy || secondDummy
+                  ? "spacing.edgeNode"
+                  : "spacing.node";
   let spacing =
-    spacingName === "spacing.edgeEdge"
-      ? Number(input.settings["spacing.edgeEdge"] ?? 10)
-      : spacingName === "spacing.edgeNode"
-        ? Number(input.settings["spacing.edgeNode"] ?? 10)
-        : input.spacing.node;
+    spacingName === "spacing.portPort"
+      ? Number(input.settings["spacing.portPort"] ?? 10)
+      : spacingName === "spacing.labelPortVertical"
+        ? Number(input.settings["spacing.labelPortVertical"] ?? 1)
+        : spacingName === "spacing.edgeEdge"
+          ? Number(input.settings["spacing.edgeEdge"] ?? 10)
+          : spacingName === "spacing.edgeNode"
+            ? Number(input.settings["spacing.edgeNode"] ?? 10)
+            : input.spacing.node;
   for (const id of [firstId, secondId]) {
     const node = input.graph.nodes.find((candidate) => candidate.id === id);
     if (!node) continue;