@statelyai/layout 0.3.0 → 0.4.1

package/src/layered/gwt-sort.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2020 Kiel University and others.
+ * Native adaptation of the sorts elkjs (ELK compiled by GWT) runs.
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+/**
+ * GWT's `Collections.sort` / `List.sort` / `Arrays.sort(Object[])` (elkjs): top-down
+ * merge sort over insertion-sorted runs shorter than 7. For a consistent comparator
+ * this equals any stable sort; stateful or non-antisymmetric comparators (ELK's
+ * model-order comparators) depend on this exact call sequence.
+ */
+export function gwtSort<T>(items: T[], compare: (left: T, right: T) => number): void {
+  const sort = (temp: T[], array: T[], low: number, high: number, ofs: number): void => {
+    if (high - low < 7) {
+      for (let i = low + 1; i < high; i++)
+        for (let j = i; j > low && compare(array[j - 1]!, array[j]!) > 0; j--)
+          [array[j - 1], array[j]] = [array[j]!, array[j - 1]!];
+      return;
+    }
+    const tempLow = low + ofs,
+      tempHigh = high + ofs,
+      tempMid = tempLow + ((tempHigh - tempLow) >> 1);
+    sort(array, temp, tempLow, tempMid, -ofs);
+    sort(array, temp, tempMid, tempHigh, -ofs);
+    if (compare(temp[tempMid - 1]!, temp[tempMid]!) <= 0) {
+      for (let i = tempLow; low < high;) array[low++] = temp[i++]!;
+      return;
+    }
+    for (let left = tempLow, right = tempMid; low < high;)
+      array[low++] =
+        right >= tempHigh || (left < tempMid && compare(temp[left]!, temp[right]!) <= 0)
+          ? temp[left++]!
+          : temp[right++]!;
+  };
+  sort(items.slice(), items, 0, items.length, 0);
+}
+
+/**
+ * ELK's own insertion sort (SortByInputModelProcessor / ModelOrderBarycenterHeuristic),
+ * which preserves comparator decisions even when model and edge priorities conflict.
+ */
+export function insertionSort<T>(items: T[], compare: (left: T, right: T) => number): void {
+  for (let i = 1; i < items.length; i++) {
+    const value = items[i]!;
+    let j = i;
+    while (j > 0 && compare(items[j - 1]!, value) > 0) {
+      items[j] = items[j - 1]!;
+      j--;
+    }
+    items[j] = value;
+  }
+}

package/src/layered/hierarchical-port-phases.ts

@@ -0,0 +1,242 @@
+/*******************************************************************************
+ * Copyright (c) 2010, 2020 Kiel University and others.
+ * Adapted from ELK HierarchicalPortConstraintProcessor and
+ * HierarchicalPortDummySizeProcessor in elkjs 0.11.1.
+ * SPDX-License-Identifier: EPL-2.0
+ *******************************************************************************/
+import { inheritCycleRandom } from "./cycle-random";
+import type { GraphEdge, GraphNode } from "@statelyai/graph";
+import { attachExternalPortDummy, externalPortDummyOf } from "./external-port-dummy";
+import type { AcyclicOrientation, LayerAssignment, LayeredPhaseInput, LayerOrder } from "./types";
+
+export interface HierarchicalPortReplacement {
+  original: GraphNode;
+  helper: GraphNode;
+  side: "NORTH" | "SOUTH";
+}
+export interface HierarchicalPortPreparation {
+  input: LayeredPhaseInput;
+  assignment: LayerAssignment & { layerCount?: number };
+  replacements: ReadonlyMap<string, HierarchicalPortReplacement>;
+  originals: ReadonlyMap<string, GraphNode>;
+}
+const sides = {
+  right: { before: "WEST", after: "EAST", north: "NORTH", south: "SOUTH" },
+  left: { before: "EAST", after: "WEST", north: "NORTH", south: "SOUTH" },
+  down: { before: "NORTH", after: "SOUTH", north: "WEST", south: "EAST" },
+  up: { before: "SOUTH", after: "NORTH", north: "WEST", south: "EAST" },
+} as const;
+
+export function hierarchicalPortSides(input: Pick<LayeredPhaseInput, "direction" | "settings">) {
+  return input.direction === "left" && input.settings.directionCongruency === "ROTATION"
+    ? { ...sides.left, north: "SOUTH" as const, south: "NORTH" as const }
+    : input.direction === "down" && input.settings.directionCongruency === "ROTATION"
+      ? { ...sides.down, north: "EAST" as const, south: "WEST" as const }
+      : sides[input.direction];
+}
+
+/** Introduce one flow-axis helper for each original port and adjacent layer. */
+export function prepareHierarchicalPortConstraints(
+  input: LayeredPhaseInput,
+  orientation: AcyclicOrientation,
+  assignment: LayerAssignment & { layerCount?: number },
+): HierarchicalPortPreparation {
+  const replacements = new Map<string, HierarchicalPortReplacement>();
+  const originals = new Map<string, GraphNode>();
+  const physical = hierarchicalPortSides(input);
+  if (
+    !["FIXED_SIDE", "FIXED_ORDER", "FIXED_RATIO", "FIXED_POS"].includes(
+      String(input.settings.portConstraints),
+    )
+  )
+    return { input, assignment, replacements, originals };
+  for (const node of input.graph.nodes) {
+    const origin = externalPortDummyOf(node);
+    if (origin?.side === physical.north || origin?.side === physical.south)
+      originals.set(node.id, node);
+  }
+  if (!originals.size) return { input, assignment, replacements, originals };
+  const byOriginalId = new Map(originals);
+  originals.clear();
+  for (const id of assignment.seedOrder ?? input.graph.nodes.map((node) => node.id)) {
+    const node = byOriginalId.get(id);
+    if (node) originals.set(id, node);
+  }
+
+  const count = assignment.layerCount ?? Math.max(-1, ...assignment.layerByNodeId.values()) + 1;
+  const layers: string[][] = Array.from({ length: count }, () => []);
+  const seed = assignment.seedOrder ?? input.graph.nodes.map((node) => node.id);
+  for (const id of seed)
+    if (!originals.has(id)) layers[assignment.layerByNodeId.get(id) ?? 0]!.push(id);
+  const nodes = new Map(input.graph.nodes.map((node) => [node.id, node]));
+  const edges = input.graph.edges.map((edge) => ({ ...edge }));
+  const additions = new Map<number, string[]>();
+  const usedIds = new Set(nodes.keys());
+  const helperFor = (original: GraphNode, layer: number): GraphNode => {
+    const key = `${original.id}:flow:${layer}`;
+    let record = replacements.get(key);
+    if (record) return record.helper;
+    let id = key;
+    while (usedIds.has(id)) id += ":helper";
+    usedIds.add(id);
+    const origin = externalPortDummyOf(original)!;
+    const helper = attachExternalPortDummy(
+      {
+        ...original,
+        id,
+        width: 0,
+        height: 0,
+        ports: [
+          {
+            name: `${id}:in`,
+            direction: "in" as const,
+            data: undefined,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+          },
+          {
+            name: `${id}:out`,
+            direction: "out" as const,
+            data: undefined,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+          },
+        ],
+      },
+      origin,
+    );
+    record = { original, helper, side: origin.side === physical.north ? "NORTH" : "SOUTH" };
+    replacements.set(key, record);
+    additions.set(layer, [...(additions.get(layer) ?? []), id]);
+    return helper;
+  };
+  const source = (edge: GraphEdge) =>
+    orientation.reversedEdgeIds.has(edge.id) ? edge.targetId : edge.sourceId;
+  const target = (edge: GraphEdge) =>
+    orientation.reversedEdgeIds.has(edge.id) ? edge.sourceId : edge.targetId;
+  for (let layer = 0; layer < layers.length; layer++)
+    for (const id of layers[layer]!) {
+      for (const edge of edges.filter((edge) => target(edge) === id)) {
+        const original = originals.get(source(edge));
+        if (!original) continue;
+        const helper = helperFor(original, layer - 1);
+        if (orientation.reversedEdgeIds.has(edge.id)) {
+          edge.targetId = helper.id;
+          edge.targetPort = helper.ports![1]!.name;
+        } else {
+          edge.sourceId = helper.id;
+          edge.sourcePort = helper.ports![1]!.name;
+        }
+      }
+      for (const edge of edges.filter((edge) => source(edge) === id)) {
+        const original = originals.get(target(edge));
+        if (!original) continue;
+        const helper = helperFor(original, layer + 1);
+        if (orientation.reversedEdgeIds.has(edge.id)) {
+          edge.sourceId = helper.id;
+          edge.sourcePort = helper.ports![0]!.name;
+        } else {
+          edge.targetId = helper.id;
+          edge.targetPort = helper.ports![0]!.name;
+        }
+      }
+    }
+  // The worker inserts the leading layer while iterating the original
+  // replacement buckets. Later bucket indices address that mutated layer list.
+  const preparedLayers = layers.map((layer) => [...layer]);
+  for (let index = -1; index <= count; index++) {
+    const added = additions.get(index);
+    if (!added?.length) continue;
+    if (index === -1) preparedLayers.unshift([...added]);
+    else if (index === count) preparedLayers.push([...added]);
+    else preparedLayers[index]!.push(...added);
+  }
+  const layerByNodeId = new Map(
+    preparedLayers.flatMap((layer, i) => layer.map((id) => [id, i] as const)),
+  );
+  const helpers = [...replacements.values()].map((record) => record.helper);
+  const helperIds = new Set(helpers.map((node) => node.id));
+  const sizes = new Map(input.sizes);
+  for (const id of originals.keys()) sizes.delete(id);
+  for (const helper of helpers) sizes.set(helper.id, { width: 0, height: 0 });
+  const prepared: LayeredPhaseInput = inheritCycleRandom(input, {
+    ...input,
+    sizes,
+    graph: {
+      ...input.graph,
+      nodes: [...input.graph.nodes.filter((node) => !originals.has(node.id)), ...helpers],
+      edges,
+    },
+    nodeSettings: (node) =>
+      helperIds.has(node.id)
+        ? { ...input.nodeSettings?.(node), portConstraints: "FIXED_POS", alignment: "CENTER" }
+        : input.nodeSettings?.(node),
+    portSettings: (port, node) =>
+      helperIds.has(node.id)
+        ? { "port.side": port.direction === "out" ? physical.after : physical.before }
+        : input.portSettings?.(port, node),
+  });
+  return {
+    input: prepared,
+    assignment: {
+      ...assignment,
+      layerCount: preparedLayers.length,
+      layerByNodeId,
+      seedOrder: preparedLayers.flat(),
+    },
+    replacements,
+    originals,
+  };
+}
+
+/** ELK assigns successive double-spacing lane widths after crossing order is known. */
+export function sizeHierarchicalPortDummies(
+  input: LayeredPhaseInput,
+  order: LayerOrder,
+  preparation: HierarchicalPortPreparation,
+): LayeredPhaseInput {
+  if (!preparation.replacements.size) return input;
+  const byId = new Map(
+    [...preparation.replacements.values()].map((record) => [record.helper.id, record]),
+  );
+  const horizontal = input.direction === "right" || input.direction === "left";
+  const delta = 2 * Number(input.settings["spacing.edgeEdgeBetweenLayers"] ?? 10);
+  const sizes = new Map(input.sizes);
+  const resized = new Map<string, GraphNode>();
+  for (const layer of order.layers)
+    for (const side of ["NORTH", "SOUTH"] as const) {
+      const ids = layer.filter((id) => byId.get(id)?.side === side);
+      for (const [index, id] of ids.entries()) {
+        const width = delta * (side === "NORTH" ? index : ids.length - 1 - index);
+        const node = input.graph.nodes.find((node) => node.id === id)!;
+        const size = horizontal ? { width, height: 0 } : { width: 0, height: width };
+        sizes.set(id, size);
+        resized.set(id, {
+          ...node,
+          ...size,
+          ports: node.ports?.map((port) => ({
+            ...port,
+            x: horizontal
+              ? input.portSettings?.(port, node)?.["port.side"] === "EAST"
+                ? width
+                : 0
+              : 0,
+            y: !horizontal
+              ? input.portSettings?.(port, node)?.["port.side"] === "SOUTH"
+                ? width
+                : 0
+              : 0,
+          })),
+        });
+      }
+    }
+  return inheritCycleRandom(input, {
+    ...input,
+    sizes,
+    graph: { ...input.graph, nodes: input.graph.nodes.map((node) => resized.get(node.id) ?? node) },
+  });
+}

package/src/layered/hierarchical-port-restoration.ts

@@ -0,0 +1,233 @@
+/*
+ * Copyright (c) 2010, 2020 Kiel University and others.
+ * Native adaptation of ELK boundary restoration and direction transforms.
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import type { EntityRect, Point } from "@statelyai/graph";
+
+import { phaseRandomByInput, crossingRandom, inheritCycleRandom } from "./cycle-random";
+import { placementCrossBounds, compactionBounds } from "./compaction-bounds";
+import { externalPortDummyOf, type ExternalPortDummy } from "./external-port-dummy";
+import {
+  hierarchicalPortSides,
+  type HierarchicalPortPreparation,
+} from "./hierarchical-port-phases";
+import { routeHierarchicalPorts } from "./hierarchical-port-routing";
+import type { LayeredPhaseInput, NodePlacement, EdgeRoutes, LayerOrder, NodeSize } from "./types";
+
+const restoredDummies = new WeakSet<ExternalPortDummy>();
+export function isPerpendicularPortRestored(node: object) {
+  const origin = externalPortDummyOf(node);
+  return !!origin && restoredDummies.has(origin);
+}
+
+/** Restore original boundary nodes and routes in the physical export frame. */
+export function restoreHierarchicalPorts(
+  input: LayeredPhaseInput,
+  order: LayerOrder,
+  prep: HierarchicalPortPreparation,
+  placement: NodePlacement,
+  routes: EdgeRoutes,
+) {
+  if (!prep.originals.size) return { input, routes };
+  const horizontal = input.direction === "right" || input.direction === "left";
+  const reversed = input.direction === "left" || input.direction === "up";
+  const crossReversed =
+    input.settings.directionCongruency === "ROTATION" &&
+    (input.direction === "left" || input.direction === "down");
+  const pad = input.padding;
+  const physical = hierarchicalPortSides(input);
+  const rects = placement.rectByNodeId as Map<string, EntityRect>;
+  const oldBounds = compactionBounds(placement),
+    crossBounds = placementCrossBounds(placement);
+  let physicalWidth = Math.max(0, ...[...rects.values()].map((r) => r.x + r.width)) - pad.left;
+  let physicalHeight = Math.max(0, ...[...rects.values()].map((r) => r.y + r.height)) - pad.top;
+  if (oldBounds) {
+    physicalWidth = Math.max(physicalWidth, oldBounds.right - pad.left);
+    physicalHeight = Math.max(physicalHeight, oldBounds.bottom - pad.top);
+  }
+  if (crossBounds?.axis === "x")
+    physicalWidth = Math.max(physicalWidth, crossBounds.maximum - pad.left);
+  if (crossBounds?.axis === "y")
+    physicalHeight = Math.max(physicalHeight, crossBounds.maximum - pad.top);
+  // Placement already includes graph padding; retain the measured phase extents.
+  const initialSize = {
+    width: horizontal ? physicalWidth : physicalHeight,
+    height: horizontal ? physicalHeight : physicalWidth,
+  };
+  const canonicalPad = horizontal
+    ? { ...pad }
+    : { left: pad.top, right: pad.bottom, top: pad.left, bottom: pad.right };
+  if (reversed) [canonicalPad.left, canonicalPad.right] = [canonicalPad.right, canonicalPad.left];
+  if (crossReversed)
+    [canonicalPad.top, canonicalPad.bottom] = [canonicalPad.bottom, canonicalPad.top];
+  const toCanonical = (point: Point): Point => {
+    let x = horizontal ? point.x - pad.left : point.y - pad.top;
+    let y = horizontal ? point.y - pad.top : point.x - pad.left;
+    if (reversed) x = initialSize.width - x;
+    if (crossReversed) y = initialSize.height - y;
+    return { x, y };
+  };
+  const toCanonicalRect = (rect: EntityRect): EntityRect => {
+    const p = toCanonical(rect),
+      width = horizontal ? rect.width : rect.height,
+      height = horizontal ? rect.height : rect.width;
+    return {
+      x: p.x - (reversed ? width : 0),
+      y: p.y - (crossReversed ? height : 0),
+      width,
+      height,
+    };
+  };
+  const records = new Map([...prep.replacements.values()].map((r) => [r.helper.id, r]));
+  const origins = [...prep.originals.values()].map((node) => {
+    const o = externalPortDummyOf(node)!;
+    const width = horizontal ? o.width : o.height,
+      height = horizontal ? o.height : o.width;
+    let x = horizontal ? o.port.x : o.port.y,
+      y = horizontal ? o.port.y : o.port.x;
+    if (reversed) x = width - x;
+    if (crossReversed) y = height - y;
+    const side = o.side === physical.north ? ("NORTH" as const) : ("SOUTH" as const);
+    return {
+      id: node.id,
+      origin: {
+        ...o,
+        width,
+        height,
+        side,
+        port: { x, y, side: side === "NORTH" ? ("SOUTH" as const) : ("NORTH" as const) },
+      },
+    };
+  });
+  const helpers = order.layers.flat().flatMap((id) => {
+    const record = records.get(id),
+      rect = rects.get(id);
+    if (!record || !rect) return [];
+    return [
+      {
+        id,
+        originalId: record.original.id,
+        rect: toCanonicalRect(rect),
+        incoming: input.graph.edges.filter((e) => e.targetId === id).map((e) => e.id),
+        outgoing: input.graph.edges.filter((e) => e.sourceId === id).map((e) => e.id),
+      },
+    ];
+  });
+  const restored = routeHierarchicalPorts(
+    {
+      constraints: input.settings.portConstraints ?? "FIXED_SIDE",
+      size: initialSize,
+      offset: { x: 0, y: 0 },
+      padding: canonicalPad,
+      spacing: {
+        node: input.spacing.node,
+        edge: Number(input.settings["spacing.edgeEdge"] ?? 10),
+        port: Number(input.settings["spacing.portPort"] ?? 10),
+      },
+      originals: origins,
+      helpers,
+      bends: new Map(
+        [...routes.pointsByEdgeId].map(([id, points]) => [
+          id,
+          points.slice(1, -1).map(toCanonical),
+        ]),
+      ),
+    },
+    phaseRandomByInput.get(input) ?? crossingRandom(input),
+  );
+  const fromCanonical = (p: Point): Point => {
+    let x = p.x + restored.offset.x,
+      y = p.y + restored.offset.y;
+    if (reversed) x = restored.size.width - x;
+    if (crossReversed) y = restored.size.height - y;
+    return horizontal ? { x: x + pad.left, y: y + pad.top } : { x: y + pad.left, y: x + pad.top };
+  };
+  const fromCanonicalRect = (rect: EntityRect): EntityRect => {
+    const p = fromCanonical(rect);
+    if (reversed) {
+      if (horizontal) p.x -= rect.width;
+      else p.y -= rect.width;
+    }
+    if (crossReversed) {
+      if (horizontal) p.y -= rect.height;
+      else p.x -= rect.height;
+    }
+    return {
+      ...p,
+      width: horizontal ? rect.width : rect.height,
+      height: horizontal ? rect.height : rect.width,
+    };
+  };
+  for (const [id, rect] of rects)
+    if (!records.has(id)) rects.set(id, fromCanonicalRect(toCanonicalRect(rect)));
+  for (const id of records.keys()) rects.delete(id);
+  for (const [id, rect] of restored.rects) {
+    rects.set(id, fromCanonicalRect(rect));
+    restoredDummies.add(externalPortDummyOf(prep.originals.get(id)!)!);
+  }
+  const originalById = new Map(origins.map((origin) => [origin.id, origin]));
+  const boundaryPoint = (helperId: string): Point => {
+    const original = records.get(helperId)!.original;
+    const o = originalById.get(original.id)!.origin,
+      rect = restored.rects.get(original.id)!;
+    return fromCanonical({ x: rect.x + o.port.x, y: rect.y + o.port.y });
+  };
+  const pointsByEdgeId = new Map(
+    [...routes.pointsByEdgeId].map(([id, points]) => [
+      id,
+      points.map((p) => fromCanonical(toCanonical(p))),
+    ]),
+  );
+  for (const edge of input.graph.edges) {
+    const source = records.get(edge.sourceId),
+      target = records.get(edge.targetId);
+    if (!source && !target) continue;
+    const old = routes.pointsByEdgeId.get(edge.id);
+    if (!old?.length) continue;
+    const first = source ? boundaryPoint(edge.sourceId) : fromCanonical(toCanonical(old[0]!));
+    const last = target ? boundaryPoint(edge.targetId) : fromCanonical(toCanonical(old.at(-1)!));
+    pointsByEdgeId.set(edge.id, [
+      first,
+      ...(restored.bends.get(edge.id) ?? []).map(fromCanonical),
+      last,
+    ]);
+  }
+  const nodes = [
+    ...input.graph.nodes.filter((n) => !records.has(n.id)),
+    ...prep.originals.values(),
+  ];
+  const edges = input.graph.edges.map((edge) => {
+    const source = records.get(edge.sourceId)?.original,
+      target = records.get(edge.targetId)?.original;
+    return {
+      ...edge,
+      sourceId: source?.id ?? edge.sourceId,
+      targetId: target?.id ?? edge.targetId,
+      sourcePort: source?.ports?.[0]?.name ?? edge.sourcePort,
+      targetPort: target?.ports?.[0]?.name ?? edge.targetPort,
+    };
+  });
+  const finalSize: NodeSize = horizontal
+    ? restored.size
+    : { width: restored.size.height, height: restored.size.width };
+  return {
+    input: inheritCycleRandom(input, { ...input, graph: { ...input.graph, nodes, edges } }),
+    routes: {
+      ...routes,
+      pointsByEdgeId,
+      junctionPointsByEdgeId: routes.junctionPointsByEdgeId
+        ? new Map(
+            [...routes.junctionPointsByEdgeId].map(([id, points]) => [
+              id,
+              points.map((p) => fromCanonical(toCanonical(p))),
+            ]),
+          )
+        : undefined,
+    },
+    bounds: {
+      width: finalSize.width + pad.left + pad.right,
+      height: finalSize.height + pad.top + pad.bottom,
+    },
+  };
+}