@statelyai/layout 0.3.0 → 0.4.1

package/src/layered/center-labels.ts

@@ -0,0 +1,398 @@
+/*
+ * Copyright (c) 2012, 2017, 2020 Kiel University and others.
+ * Native adaptation of ELK LabelDummyInserter, LabelSideSelector and LabelDummyRemover (v0.11.0).
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import type { GraphNode, GraphEdge, Point, EntityRect } from "@statelyai/graph";
+import type { LayeredPhaseInput, AcyclicOrientation, LayerOrder, EdgeRoutes } from "./types";
+import type { LongEdgeExpansion } from "./long-edges";
+import { inheritCycleRandom } from "./cycle-random";
+
+type LabelSide = "ABOVE" | "BELOW" | "INLINE";
+interface LabelDummy {
+  edge: GraphEdge;
+  thickness: number;
+  spacing: number;
+  inline: boolean;
+  reversed: boolean;
+}
+export interface CenterLabelExpansion {
+  input: LayeredPhaseInput;
+  orientation: AcyclicOrientation;
+  segmentIdsByEdgeId: ReadonlyMap<string, readonly string[]>;
+  labelDummyIdByEdgeId: ReadonlyMap<string, string>;
+  dummyById: ReadonlyMap<string, LabelDummy>;
+}
+
+/** Before layering: reserve raw label dimensions, then select sides after crossing minimization. */
+export function insertCenterLabelDummies(
+  input: LayeredPhaseInput,
+  orientation: AcyclicOrientation,
+): CenterLabelExpansion {
+  const nodes: GraphNode[] = [...input.graph.nodes],
+    edges: GraphEdge[] = [];
+  const sizes = new Map(input.sizes),
+    ids = new Set(nodes.map((n) => n.id)),
+    edgeIds = new Set(input.graph.edges.map((e) => e.id));
+  const dummyById = new Map<string, LabelDummy>(),
+    originals = new Map<string, GraphEdge>();
+  const reversed = new Set<string>(),
+    segments = new Map<string, string[]>(),
+    labels = new Map<string, string>();
+  const horizontal = input.direction === "right" || input.direction === "left";
+  const forward =
+    input.direction === "right"
+      ? "EAST"
+      : input.direction === "left"
+        ? "WEST"
+        : input.direction === "down"
+          ? "SOUTH"
+          : "NORTH";
+  const negativeFlow = input.direction === "left" || input.direction === "up";
+  const backward = ({ EAST: "WEST", WEST: "EAST", SOUTH: "NORTH", NORTH: "SOUTH" } as const)[
+    forward
+  ];
+  for (const edge of input.graph.edges) {
+    const settings = input.edgeSettings?.(edge);
+    if (
+      edge.sourceId === edge.targetId ||
+      !((edge.width ?? 0) > 0 || (edge.height ?? 0) > 0) ||
+      (settings?.["edgeLabels.placement"] ?? "CENTER") !== "CENTER"
+    ) {
+      edges.push(edge);
+      segments.set(edge.id, [edge.id]);
+      if (orientation.reversedEdgeIds.has(edge.id)) reversed.add(edge.id);
+      continue;
+    }
+    let id = `__layout_dummy:label:${edge.id}`;
+    while (ids.has(id)) id += ":";
+    ids.add(id);
+    const inline = settings?.["edgeLabels.inline"] === true;
+    const thickness = Math.max(0, Number(settings?.["edge.thickness"] ?? 1));
+    const spacing = Number(input.settings["spacing.edgeLabel"] ?? 2);
+    // ELK stacks horizontal label heights on the initial edge thickness,
+    // but takes the maximum for vertical labels before adding edge spacing.
+    const width = horizontal
+      ? (edge.width ?? 0)
+      : Math.max(edge.width ?? 0, thickness) + spacing + thickness;
+    const height = (edge.height ?? 0) + (horizontal ? spacing + 2 * thickness : 0);
+    const anchor = Math.floor(thickness / 2);
+    const rect = { width, height };
+    const node: GraphNode = {
+      type: "node",
+      id,
+      data: undefined,
+      ...rect,
+      ports: [
+        {
+          name: "input",
+          direction: "in",
+          x: horizontal ? (negativeFlow ? width : 0) : anchor,
+          y: horizontal ? anchor : negativeFlow ? height : 0,
+          width: 0,
+          height: 0,
+          data: undefined,
+        },
+        {
+          name: "output",
+          direction: "out",
+          x: horizontal ? (negativeFlow ? 0 : width) : anchor,
+          y: horizontal ? anchor : negativeFlow ? 0 : height,
+          width: 0,
+          height: 0,
+          data: undefined,
+        },
+      ],
+    };
+    nodes.push(node);
+    sizes.set(id, rect);
+    labels.set(edge.id, id);
+    dummyById.set(id, {
+      edge,
+      thickness,
+      spacing,
+      inline,
+      reversed: orientation.reversedEdgeIds.has(edge.id),
+    });
+    const chain = [edge.sourceId, id, edge.targetId],
+      partIds: string[] = [];
+    const rev = orientation.reversedEdgeIds.has(edge.id);
+    for (let i = 0; i < 2; i++) {
+      let partId = `${edge.id}::label:${i}`;
+      while (edgeIds.has(partId)) partId += ":";
+      edgeIds.add(partId);
+      partIds.push(partId);
+      const part: GraphEdge = {
+        ...edge,
+        id: partId,
+        sourceId: chain[i]!,
+        targetId: chain[i + 1]!,
+        sourcePort: i === 0 ? edge.sourcePort : rev ? "input" : "output",
+        targetPort: i === 1 ? edge.targetPort : rev ? "output" : "input",
+        width: 0,
+        height: 0,
+        points: undefined,
+      };
+      edges.push(part);
+      originals.set(partId, edge);
+      if (rev) reversed.add(partId);
+    }
+    segments.set(edge.id, partIds);
+  }
+  const prepared = labels.size
+    ? inheritCycleRandom(input, {
+        ...input,
+        modelOrderByEdgeId: new Map(
+          edges.map((edge) => {
+            const original = originals.get(edge.id) ?? edge;
+            return [
+              edge.id,
+              input.modelOrderByEdgeId?.get(original.id) ?? input.graph.edges.indexOf(original),
+            ];
+          }),
+        ),
+        graph: { ...input.graph, nodes, edges },
+        sizes,
+        nodeSettings: (n: GraphNode) =>
+          dummyById.has(n.id) ? { portConstraints: "FIXED_POS" as const } : input.nodeSettings?.(n),
+        portSettings: (p: NonNullable<GraphNode["ports"]>[number], n: GraphNode) =>
+          dummyById.has(n.id)
+            ? { "port.side": p.name === "input" ? backward : forward }
+            : input.portSettings?.(p, n),
+        edgeSettings: (e: GraphEdge) => input.edgeSettings?.(originals.get(e.id) ?? e),
+      })
+    : input;
+  return {
+    input: prepared,
+    orientation: labels.size ? { reversedEdgeIds: reversed } : orientation,
+    segmentIdsByEdgeId: segments,
+    labelDummyIdByEdgeId: labels,
+    dummyById,
+  };
+}
+
+/** Before node placement: reproduce direction and consecutive-dummy label-side rules. */
+export function selectCenterLabelSides(
+  expansion: LongEdgeExpansion,
+  labels: CenterLabelExpansion,
+  order: LayerOrder,
+): { expansion: LongEdgeExpansion; sides: ReadonlyMap<string, LabelSide> } {
+  const input = expansion.input;
+  const mode = String(input.settings["edgeLabels.sideSelection"] ?? "SMART_DOWN");
+  const horizontal = input.direction === "right" || input.direction === "left";
+  // ELK transposes the default side before vertical layout. Smart run choices
+  // already refer to the canonical cross axis and must not be transposed again.
+  const defaultSide: LabelSide = mode.endsWith("_UP") === horizontal ? "ABOVE" : "BELOW";
+  const sides = new Map<string, LabelSide>();
+  const set = (id: string, side: LabelSide) => {
+    const info = labels.dummyById.get(id);
+    if (info) sides.set(id, info.inline ? "INLINE" : side);
+  };
+  // ELK pairs consecutive dummies of any kind whose long edges connect the
+  // same nodes (LONG_EDGE_SOURCE/TARGET), in their cycle-broken direction.
+  const edgeById = new Map(input.graph.edges.map((edge) => [edge.id, edge]));
+  const endpointsByDummy = new Map<string, string>();
+  for (const [original, ids] of expansion.segmentIdsByEdgeId) {
+    const chain = ids.flatMap((id) => edgeById.get(id) ?? []);
+    if (chain.length < 2) continue;
+    const reversed =
+      expansion.orientation.reversedEdgeIds.has(original) ||
+      expansion.orientation.reversedEdgeIds.has(chain[0]!.id);
+    const [source, target] = [chain[0]!.sourceId, chain.at(-1)!.targetId];
+    const key = reversed ? `${target}\0${source}` : `${source}\0${target}`;
+    for (const edge of chain)
+      for (const id of [edge.sourceId, edge.targetId])
+        if (id.startsWith("__layout_dummy:")) endpointsByDummy.set(id, key);
+  }
+  const endpoints = (id: string) => {
+    const info = labels.dummyById.get(id);
+    if (!info) return endpointsByDummy.get(id);
+    return info.reversed
+      ? `${info.edge.targetId}\0${info.edge.sourceId}`
+      : `${info.edge.sourceId}\0${info.edge.targetId}`;
+  };
+  const sameEndpoints = (first: string, second: string) => {
+    const a = endpoints(first);
+    return a !== undefined && a === endpoints(second);
+  };
+  for (const layer of order.layers) {
+    if (!mode.startsWith("SMART_")) {
+      for (const id of layer) {
+        const info = labels.dummyById.get(id);
+        if (info)
+          set(
+            id,
+            mode.startsWith("DIRECTION_") && info.reversed
+              ? defaultSide === "ABOVE"
+                ? "BELOW"
+                : "ABOVE"
+              : defaultSide,
+          );
+      }
+      continue;
+    }
+    const applyRun = (run: string[], top: boolean, bottom: boolean) => {
+      const labelIds = run.filter((id) => labels.dummyById.has(id));
+      if (
+        top &&
+        (!bottom || run.length > 1) &&
+        labelIds.length === 1 &&
+        labels.dummyById.has(run[0]!)
+      )
+        set(run[0]!, "ABOVE");
+      else if (
+        bottom &&
+        (!top || run.length > 1) &&
+        labelIds.length === 1 &&
+        labels.dummyById.has(run.at(-1)!)
+      )
+        set(run.at(-1)!, "BELOW");
+      else if (run.length === 2) {
+        set(run[0]!, "ABOVE");
+        set(run[1]!, "BELOW");
+      } else {
+        let group: string[] = [];
+        const flush = () => {
+          if (group.length === 2) {
+            set(group[0]!, "ABOVE");
+            set(group[1]!, "BELOW");
+          } else for (const id of group) set(id, defaultSide);
+          group = [];
+        };
+        for (const id of run) {
+          if (group.length && !sameEndpoints(group.at(-1)!, id)) flush();
+          group.push(id);
+        }
+        flush();
+      }
+    };
+    let run: string[] = [],
+      top = true;
+    for (const id of layer) {
+      if (id.startsWith("__layout_dummy:")) run.push(id);
+      else {
+        if (run.length) applyRun(run, top, false);
+        run = [];
+        top = false;
+      }
+    }
+    if (run.length) applyRun(run, top, true);
+  }
+  const sizes = new Map(input.sizes);
+  const nodes = input.graph.nodes.map((node) => {
+    const info = labels.dummyById.get(node.id),
+      side = sides.get(node.id);
+    if (!info || !side) return node;
+    const original = sizes.get(node.id)!;
+    const cross =
+      (horizontal ? original.height : original.width) -
+      (side === "INLINE" ? info.spacing + info.thickness : 0);
+    const anchor =
+      side === "INLINE"
+        ? Math.ceil(cross) / 2
+        : side === "ABOVE"
+          ? cross - Math.ceil(info.thickness / 2)
+          : Math.floor(info.thickness / 2);
+    const rect = horizontal ? { ...original, height: cross } : { ...original, width: cross };
+    sizes.set(node.id, rect);
+    return {
+      ...node,
+      ...rect,
+      ports: node.ports?.map((port) => ({
+        ...port,
+        x: horizontal ? port.x : anchor,
+        y: horizontal ? anchor : port.y,
+      })),
+    };
+  });
+  return {
+    expansion: {
+      ...expansion,
+      input: inheritCycleRandom(input, { ...input, graph: { ...input.graph, nodes }, sizes }),
+    },
+    // Label restoration consumes sides in the original layout direction.
+    sides: horizontal
+      ? sides
+      : new Map(
+          [...sides].map(([id, side]) => [
+            id,
+            side === "INLINE" ? side : side === "ABOVE" ? "BELOW" : "ABOVE",
+          ]),
+        ),
+  };
+}
+
+export function composeCenterLabelExpansion(
+  labels: CenterLabelExpansion,
+  expanded: LongEdgeExpansion,
+): LongEdgeExpansion {
+  return {
+    ...expanded,
+    segmentIdsByEdgeId: new Map(
+      [...labels.segmentIdsByEdgeId].map(([id, parts]) => [
+        id,
+        parts.flatMap((p) => expanded.segmentIdsByEdgeId.get(p) ?? [p]),
+      ]),
+    ),
+    labelDummyIdByEdgeId: new Map([
+      ...expanded.labelDummyIdByEdgeId,
+      ...labels.labelDummyIdByEdgeId,
+    ]),
+  };
+}
+
+/** LABEL junctions do not introduce auxiliary orthogonal bend points. */
+export function removeCenterLabelJunctions(
+  routes: EdgeRoutes,
+  expansion: LongEdgeExpansion,
+  labels: ReadonlyMap<string, string>,
+  routing: string,
+): EdgeRoutes {
+  if (routing !== "ORTHOGONAL" || !labels.size) return routes;
+  const horizontal = expansion.input.direction === "right" || expansion.input.direction === "left";
+  const cross = (point: Point) => (horizontal ? point.y : point.x);
+  const ids = new Set<string>();
+  for (const id of labels.values()) {
+    const neighbors: Point[] = [];
+    for (const edge of expansion.input.graph.edges) {
+      const route = routes.pointsByEdgeId.get(edge.id);
+      if (!route || route.length < 2) continue;
+      if (edge.sourceId === id) neighbors.push(route[1]!);
+      if (edge.targetId === id) neighbors.push(route.at(-2)!);
+    }
+    // Remove straight synthetic junctions only. A compacted track can still
+    // turn at a label port; deleting that corner would create a diagonal.
+    if (neighbors.length === 2 && cross(neighbors[0]!) === cross(neighbors[1]!)) ids.add(id);
+  }
+  const points = new Map(routes.pointsByEdgeId);
+  for (const edge of expansion.input.graph.edges) {
+    const route = points.get(edge.id);
+    if (!route) continue;
+    const first = ids.has(edge.sourceId) ? 1 : 0;
+    const last = route.length - (ids.has(edge.targetId) ? 1 : 0);
+    if (first || last !== route.length) points.set(edge.id, route.slice(first, last));
+  }
+  return { ...routes, pointsByEdgeId: points };
+}
+
+export function centerLabelPosition(
+  rect: EntityRect,
+  info: LabelDummy,
+  side: LabelSide | undefined,
+  direction: string,
+): Point {
+  const horizontal = direction === "right" || direction === "left";
+  const crossOffset = side === "BELOW" ? info.thickness + info.spacing : 0;
+  return horizontal
+    ? { x: rect.x + (rect.width - (info.edge.width ?? 0)) / 2, y: rect.y + crossOffset }
+    : {
+        x:
+          rect.x +
+          (side === "INLINE"
+            ? (rect.width - (info.edge.width ?? 0)) / 2
+            : side === "ABOVE"
+              ? info.thickness + info.spacing
+              : 0),
+        y: rect.y + (info.inline ? (rect.height - (info.edge.height ?? 0)) / 2 : 0),
+      };
+}

package/src/layered/compaction-bounds.ts

@@ -0,0 +1,26 @@
+import type { NodePlacement } from "./types";
+
+export interface CompactionBounds {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+const boundsByPlacement = new WeakMap<NodePlacement, CompactionBounds>();
+export function recordCompactionBounds(placement: NodePlacement, bounds: CompactionBounds): void {
+  boundsByPlacement.set(placement, bounds);
+}
+export function compactionBounds(placement: NodePlacement): CompactionBounds | undefined {
+  return boundsByPlacement.get(placement);
+}
+
+const crossBoundsByPlacement = new WeakMap<NodePlacement, { axis: "x" | "y"; maximum: number }>();
+export function recordPlacementCrossBounds(
+  placement: NodePlacement,
+  bounds: { axis: "x" | "y"; maximum: number },
+): void {
+  crossBoundsByPlacement.set(placement, bounds);
+}
+export function placementCrossBounds(placement: NodePlacement) {
+  return crossBoundsByPlacement.get(placement);
+}

package/src/layered/compaction-errors.ts

@@ -0,0 +1,2 @@
+/** A constraint relation that cannot produce finite compacted geometry. */
+export class InfeasibleCompactionError extends Error {}

package/src/layered/compaction-scanline.ts

@@ -0,0 +1,63 @@
+/*******************************************************************************
+ * Copyright (c) 2017 Kiel University and others.
+ * Adapted from ELK v0.11.0 ScanlineConstraintCalculator.java.
+ * Source commit: 54123e884b1ae743b453260f713b20c9bf5787f2
+ * SPDX-License-Identifier: EPL-2.0
+ *******************************************************************************/
+import type { EntityRect } from "@statelyai/graph";
+import { InfeasibleCompactionError } from "./compaction-errors";
+
+export interface ScanlineItem extends EntityRect {
+  group: string;
+}
+
+/** Visibility constraints, rather than all pairs of overlapping intervals. */
+export function scanlineConstraints<T extends ScanlineItem>(
+  items: readonly T[],
+  includeDegenerate = false,
+): [T, T][] {
+  const events = items.flatMap((item) => [
+    { item, low: true, y: item.y },
+    { item, low: false, y: item.y + item.height },
+  ]);
+  events.sort((a, b) => a.y - b.y || Number(a.low) - Number(b.low));
+  const active: T[] = [];
+  const candidates = new Map<T, T | undefined>();
+  const constraints: [T, T][] = [];
+  const center = (item: T) => item.x + item.width / 2;
+  for (const event of events) {
+    const { item } = event;
+    // Geometric callers omit empty intervals. ELK's compactor retains them
+    // because grouped hitbox restoration can invert an endpoint lead.
+    if (!includeDegenerate && item.height <= 0) continue;
+    if (event.low) {
+      const index = active.findIndex((other) => center(other) >= center(item));
+      const position = index < 0 ? active.length : index;
+      if (active[position] && center(active[position]!) === center(item))
+        throw new InfeasibleCompactionError(
+          "Invalid hitboxes for scanline constraint calculation.",
+          {
+            cause: { first: active[position], second: item },
+          },
+        );
+      active.splice(position, 0, item);
+      candidates.set(item, active[position - 1]);
+      const right = active[position + 1];
+      if (right) candidates.set(right, item);
+    } else {
+      // ELK queries the tree by center even when an end event precedes its
+      // start (zero or negative hitbox height after grouped restoration).
+      const position = active.indexOf(item);
+      const insertion = active.findIndex((other) => center(other) >= center(item));
+      const boundary = insertion < 0 ? active.length : insertion;
+      const left = active[boundary - 1],
+        right = active[boundary + (position >= 0 ? 1 : 0)];
+      if (left && candidates.get(item) === left && left.group !== item.group)
+        constraints.push([left, item]);
+      if (right && candidates.get(right) === item && right.group !== item.group)
+        constraints.push([item, right]);
+      if (position >= 0) active.splice(position, 1);
+    }
+  }
+  return constraints;
+}

package/src/layered/compound-boundaries.ts

@@ -0,0 +1,99 @@
+/*
+ * Copyright (c) 2011, 2020 Kiel University and others.
+ * Native adaptations of ELK getExternalPortPosition and CompoundGraphPostprocessor.
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import type { Point } from "@statelyai/graph";
+import type { ExternalPortSide } from "./external-port-dummy";
+import type { LayoutPadding, NodeSize } from "./types";
+
+export interface ExternalPortTransfer {
+  contentSize: NodeSize;
+  padding: LayoutPadding;
+  offset: Point;
+  dummy: Point & NodeSize;
+  side: ExternalPortSide;
+  borderOffset: number;
+  portSize: NodeSize;
+}
+/** Return both effects of ELK's transfer: parent port and corrected content-space dummy. */
+export function transferExternalPort(input: ExternalPortTransfer): { port: Point; dummy: Point } {
+  const { contentSize: size, padding: p, offset: o, borderOffset: b, portSize } = input;
+  const dummy = { x: input.dummy.x, y: input.dummy.y };
+  const port = { x: dummy.x + input.dummy.width / 2, y: dummy.y + input.dummy.height / 2 };
+  switch (input.side) {
+    case "NORTH":
+      port.x += p.left + o.x - portSize.width / 2;
+      port.y = -portSize.height - b;
+      dummy.y = -(p.top + b + o.y);
+      break;
+    case "EAST":
+      port.x = size.width + p.left + p.right + b;
+      port.y += p.top + o.y - portSize.height / 2;
+      dummy.x = size.width + p.right + b - o.x;
+      break;
+    case "SOUTH":
+      port.x += p.left + o.x - portSize.width / 2;
+      port.y = size.height + p.top + p.bottom + b;
+      dummy.y = size.height + p.bottom + b - o.y;
+      break;
+    case "WEST":
+      port.x = -portSize.width - b;
+      port.y += p.top + o.y - portSize.height / 2;
+      dummy.x = -(p.left + b + o.x);
+      break;
+  }
+  return { port, dummy };
+}
+
+export interface CompoundRouteSegment {
+  points: readonly Point[];
+  offset: Point;
+}
+/** Segments are directed source-to-target and translated to one reference graph. */
+export function joinCompoundRouteSegments(
+  segments: readonly CompoundRouteSegment[],
+  unnecessaryBendpoints = false,
+): Point[] {
+  const bends: Point[] = [];
+  let start: Point | undefined, end: Point | undefined, last: Point | undefined;
+  for (const segment of segments) {
+    if (segment.points.length < 2) throw new Error("Compound route segment needs two anchors");
+    const points = segment.points.map((p) => ({
+      x: p.x + segment.offset.x,
+      y: p.y + segment.offset.y,
+    }));
+    const source = points[0]!,
+      target = points.at(-1)!;
+    const inner = points.slice(1, -1);
+    if (!start) start = source;
+    if (last) {
+      const next = inner[0] ?? target;
+      const dx = Math.abs(last.x - next.x) > 1e-6;
+      const dy = Math.abs(last.y - next.y) > 1e-6;
+      if (unnecessaryBendpoints ? dx || dy : dx && dy) bends.push(source);
+    }
+    bends.push(...inner);
+    last = inner.at(-1) ?? source;
+    end = target;
+  }
+  if (!start || !end) return [];
+  // Child and parent boundary anchors can disagree on both axes. Join them
+  // with an elbow collinear with a neighboring segment instead of a diagonal.
+  const route = [start, ...bends, end];
+  const straight = (a: Point, b: Point) =>
+    Math.abs(a.x - b.x) <= 1e-6 || Math.abs(a.y - b.y) <= 1e-6;
+  for (let index = 0; index + 1 < route.length; index++) {
+    const a = route[index]!,
+      b = route[index + 1]!;
+    if (straight(a, b)) continue;
+    const next = route[index + 2],
+      previous = route[index - 1];
+    const verticalFirst =
+      next !== undefined
+        ? Math.abs(b.y - next.y) <= 1e-6
+        : previous !== undefined && Math.abs(previous.x - a.x) <= 1e-6;
+    route.splice(index + 1, 0, verticalFirst ? { x: a.x, y: b.y } : { x: b.x, y: a.y });
+  }
+  return route;
+}

package/src/layered/compound.ts

@@ -1,4 +1,4 @@
-import { orthogonalRouting, routeToPolylines } from "../routing";
+import { orthogonalRouting, routeToPoints } from "../routing";
 import { recordRouteGeometry } from "../routing/layout-cache";
 import type { EdgeRoutingSettings, Route } from "../routing/types";
 import type {
@@ -10,6 +10,7 @@ import type {
   VisualNode,
 } from "@statelyai/graph";
 import type { CompoundLayoutGeometry, LayeredLayoutOptions, LayoutPadding } from "./types";
+import { placePorts } from "./strategies";
 
 export type CompoundVisualGraph<N = unknown, E = unknown, G = unknown, P = unknown> = VisualGraph<
   N,
@@ -213,7 +214,20 @@ export function layoutCompounds<N, E, G, P>(
     );
     for (const placed of result.nodes) {
       const node = byId.get(placed.id);
-      if (node) Object.assign(node, { x: placed.x, y: placed.y, ports: placed.ports });
+      if (node)
+        Object.assign(node, {
+          x: placed.x,
+          y: placed.y,
+          // Placement reserves an envelope for boundary labels. Ports belong to
+          // the actual node rectangle, never that larger occupied envelope.
+          ports: placePorts(
+            node.ports,
+            { ...placed, width: node.width, height: node.height },
+            direction,
+            (port) => options.portSettings?.(port, node),
+            { ...options.settings, ...options.nodeSettings?.(node) },
+          ),
+        });
     }
     for (const edge of projected) {
       const labelId = labelIds.get(edge.id);
@@ -365,8 +379,23 @@ export function layoutCompounds<N, E, G, P>(
             },
           }
         : {}),
-      ...(targetGeometry && intent?.target === "content"
-        ? { targetAttachment: { bounds: targetGeometry.content, facing: "inward" } }
+      ...(targetGeometry &&
+      edge.sourceId !== edge.targetId &&
+      (intent?.target === "content" || ancestry(edge.sourceId).includes(edge.targetId))
+        ? {
+            targetAttachment: {
+              bounds:
+                intent?.target === "outer"
+                  ? {
+                      x: 0,
+                      y: 0,
+                      width: targetGeometry.bounds.width,
+                      height: targetGeometry.bounds.height,
+                    }
+                  : targetGeometry.content,
+              facing: intent?.target === "outer" ? "outward" : "inward",
+            },
+          }
         : {}),
     };
   }
@@ -392,12 +421,11 @@ export function layoutCompounds<N, E, G, P>(
   });
   const snapshot = orthogonalRouting.route(
     { ...graph, nodes: [...worldNodes, ...headers], edges: [...edges.values()] },
-    { coordinateSpace: "world", edges: attachmentSettings },
+    { coordinateSpace: "world", edges: attachmentSettings, maxSearchNodes: 40000 },
   );
   for (const [id, route] of snapshot.routes) {
-    const polylines = routeToPolylines(route);
     Object.assign(edges.get(id)!, {
-      points: polylines.flatMap((p) => p.map((point) => ({ ...point }))),
+      points: routeToPoints(route),
       routing: "orthogonal",
     });
   }