@adecore/diagram 0.21.1 → 0.22.0

package/dist/across.js

@@ -1,4 +1,4 @@
-import { BAND_MARGIN, bandOfCode } from './graph.js';
+import { BAND_MARGIN, bandCode, bandOfCode } from './graph.js';
 /* Rounds that pull every unit towards the units it is joined to, alternating the direction of the sweep. */
 const ROUNDS = 8;
 function clamp(value, low, high) {
@@ -165,7 +165,7 @@ export function placeAcross(layering) {
             if (shifts.length === 0) {
                 return;
             }
-            const code = -(bandIndex + 1);
+            const code = bandCode(bandIndex);
             let low = -Infinity;
             let high = Infinity;
             for (let layer = band.first; layer <= band.last; layer++) {

package/dist/layout.js

@@ -248,20 +248,12 @@ function looseRoute(source, target, loop, down) {
         { x: to.x, y: end }
     ]);
 }
-/*
- * Deterministic layered layout with integer coordinates. Barycenter sweeps order unpinned nodes;
- * pinned nodes keep their position, and skipped layers give edges explicit routing points.
- */
-export function layoutOf(document) {
-    const down = document.meta.direction === 'down';
-    const layers = layersOf(document.nodes, document.edges);
-    const sizes = document.nodes.map((node) => sizeOfNode(node));
-    const knownIds = new Set(document.nodes.map((node) => node.id));
-    // Every node that is not pinned is a unit, sized in the right-running frame.
+/* Every node that is not pinned is a unit, sized in the right-running frame. */
+function unitsOf(nodes, layers, sizes, down) {
     const units = [];
     const unitOf = new Map();
     const unitOfNode = new Map();
-    document.nodes.forEach((node, index) => {
+    nodes.forEach((node, index) => {
         if (node.pos) {
             return;
         }
@@ -280,9 +272,12 @@ export function layoutOf(document) {
             down: []
         });
     });
+    return { units, unitOf, unitOfNode };
+}
+function bandsOf(groups, units, unitOf, down) {
     const bands = [];
     const bandOfGroup = new Map();
-    document.groups.forEach((group, groupIndex) => {
+    groups.forEach((group, groupIndex) => {
         const inside = group.wraps.flatMap((id) => {
             const unit = unitOf.get(id);
             return unit === undefined || units[unit].band >= 0 ? [] : [unit];
@@ -309,12 +304,16 @@ export function layoutOf(document) {
             labelWidth: estimateTextWidth(group.label, SUB_SIZE, true)
         });
     });
+    return { bands, bandOfGroup };
+}
+/* Splits every edge between two units into hops of one layer each, adding a point to `units` for every layer it skips. */
+function edgesOf(edges, units, unitOf, knownIds) {
     const hops = [];
     const chains = [];
     const loops = [];
     const loose = [];
     const lines = [];
-    document.edges.forEach((edge, index) => {
+    edges.forEach((edge, index) => {
         if (!knownIds.has(edge.from) || !knownIds.has(edge.to)) {
             return;
         }
@@ -358,7 +357,10 @@ export function layoutOf(document) {
         }
         chains.push({ edge: index, hops: chain, reversed });
     });
-    const layerCount = units.reduce((count, unit) => Math.max(count, unit.layer + 1), 0);
+    return { hops, chains, loops, loose, lines };
+}
+/* The top-level entries of every layer, with the members of each band filled in and its height measured. */
+function itemsOf(units, bands, layerCount, down) {
     const items = Array.from({ length: layerCount }, () => []);
     units.forEach((unit, index) => {
         if (unit.band < 0) {
@@ -388,11 +390,11 @@ export function layoutOf(document) {
             band.height = Math.max(band.height, band.labelWidth + GROUP_LABEL_INSET * 2);
         }
     });
-    const layering = { units, hops, bands, lines, items };
-    orderLayers(layering);
-    const top = placeAcross(layering);
-    const centerOf = (unit) => top[unit] + units[unit].h / 2;
-    // Ports: every hop leaves its box on the side facing the flow and enters on the side facing back.
+    return items;
+}
+/* Every hop leaves its box on the side facing the flow and enters on the side facing back. */
+function portsOf(units, top, hops, loops) {
+    const middleOf = (unit) => top[unit] + units[unit].h / 2;
     const hopStart = new Array(hops.length).fill(0);
     const hopEnd = new Array(hops.length).fill(0);
     const loopStart = new Array(loops.length).fill(0);
@@ -400,11 +402,11 @@ export function layoutOf(document) {
     const exits = units.map(() => []);
     const entries = units.map(() => []);
     hops.forEach((hop, index) => {
-        exits[hop.from].push({ key: centerOf(hop.to), edge: hop.edge, order: 0, apply: (y) => (hopStart[index] = y) });
-        entries[hop.to].push({ key: centerOf(hop.from), edge: hop.edge, order: 0, apply: (y) => (hopEnd[index] = y) });
+        exits[hop.from].push({ key: middleOf(hop.to), edge: hop.edge, order: 0, apply: (y) => (hopStart[index] = y) });
+        entries[hop.to].push({ key: middleOf(hop.from), edge: hop.edge, order: 0, apply: (y) => (hopEnd[index] = y) });
     });
     loops.forEach((loop, index) => {
-        const key = centerOf(loop.unit);
+        const key = middleOf(loop.unit);
         exits[loop.unit].push({ key, edge: loop.edge, order: 0, apply: (y) => (loopStart[index] = y) }, { key, edge: loop.edge, order: 1, apply: (y) => (loopEnd[index] = y) });
     });
     const spread = (unit, ports) => {
@@ -413,7 +415,7 @@ export function layoutOf(document) {
         }
         // In the order of the other ends, so two hops leaving one box do not cross on the way out.
         ports.sort((left, right) => left.key - right.key || left.edge - right.edge || left.order - right.order);
-        const middle = centerOf(unit);
+        const middle = middleOf(unit);
         const room = Math.max(0, units[unit].h - PORT_INSET * 2);
         const step = ports.length > 1 ? Math.min(PORT_GAP, Math.floor(room / (ports.length - 1))) : 0;
         ports.forEach((port, index) => port.apply(Math.round(middle + (index - (ports.length - 1) / 2) * step)));
@@ -435,6 +437,12 @@ export function layoutOf(document) {
             hopStart[index] = hopEnd[index];
         }
     });
+    return { hopStart, hopEnd, loopStart, loopEnd };
+}
+/* Places the layers along the flow, each followed by the channel its hops and labels are routed through. */
+function placeAlong(layering, edges, ports, labelSizes, layerCount, down) {
+    const { units, bands } = layering;
+    const { hops, chains, loops } = edges;
     const byLayer = Array.from({ length: layerCount }, () => []);
     units.forEach((unit, index) => byLayer[unit.layer].push(index));
     const columnWidth = byLayer.map((column) => even(column.reduce((widest, unit) => Math.max(widest, units[unit].w), 0)));
@@ -442,7 +450,6 @@ export function layoutOf(document) {
     const unitX = new Array(units.length).fill(0);
     const hopsByLayer = Array.from({ length: layerCount }, () => []);
     hops.forEach((hop, index) => hopsByLayer[units[hop.from].layer].push(index));
-    const labelSizes = document.edges.map((edge) => (edge.label ? sizeOfEdgeLabel(edge.label) : null));
     const labelHop = new Map();
     for (const chain of chains) {
         if (labelSizes[chain.edge]) {
@@ -452,7 +459,6 @@ export function layoutOf(document) {
     const frameLabels = new Map();
     const trackX = new Map();
     const alongBefore = GROUP_PADDING + (down ? GROUP_LABEL_BAND : 0);
-    const bandAlongStart = (band) => Math.min(...band.members[0].map((unit) => unitX[unit])) - alongBefore;
     for (let layer = 0; layer < layerCount; layer++) {
         for (const unit of byLayer[layer]) {
             unitX[unit] = columnX[layer] + Math.floor((columnWidth[layer] - units[unit].w) / 2);
@@ -461,19 +467,19 @@ export function layoutOf(document) {
             break;
         }
         const start = columnX[layer] + columnWidth[layer];
-        const channelHops = hopsByLayer[layer].map((hop) => ({ hop, ya: hopStart[hop], yb: hopEnd[hop] }));
+        const channelHops = hopsByLayer[layer].map((hop) => ({ hop, ya: ports.hopStart[hop], yb: ports.hopEnd[hop] }));
         const channelLabels = [];
         for (const hop of hopsByLayer[layer]) {
             const edge = labelHop.get(hop);
             const size = edge === undefined ? null : labelSizes[edge];
             if (edge !== undefined && size) {
-                channelLabels.push({ edge, hop, y: hopStart[hop], along: down ? size.h : size.w, across: down ? size.w : size.h });
+                channelLabels.push({ edge, hop, y: ports.hopStart[hop], along: down ? size.h : size.w, across: down ? size.w : size.h });
             }
         }
         loops.forEach((loop, index) => {
             const size = labelSizes[loop.edge];
             if (size && units[loop.unit].layer === layer) {
-                channelLabels.push({ edge: loop.edge, hop: -1, y: loopEnd[index], along: down ? size.h : size.w, across: down ? size.w : size.h });
+                channelLabels.push({ edge: loop.edge, hop: -1, y: ports.loopEnd[index], along: down ? size.h : size.w, across: down ? size.w : size.h });
             }
         });
         channelLabels.sort((left, right) => left.edge - right.edge);
@@ -499,6 +505,46 @@ export function layoutOf(document) {
         channel.labels.forEach((rect, edge) => frameLabels.set(edge, rect));
         columnX[layer + 1] = start + channel.width;
     }
+    return { columnX, columnWidth, unitX, trackX, frameLabels };
+}
+/* A label that no channel placed (a loop in the last layer, an edge with a pinned end) moves down until it is clear. */
+function settleLabels(edges, unplaced, nodes, groups) {
+    const settled = edges.flatMap((edge) => (edge.label && !unplaced.has(edge.index) ? [edge.label] : []));
+    for (const edge of edges) {
+        const label = edge.label;
+        if (!label || !unplaced.has(edge.index)) {
+            continue;
+        }
+        const taken = () => [...nodes, ...groups.map((group) => group.labelBox)].some((box) => intersects(box, label)) ||
+            settled.some((other) => intersects({ x: other.x - 4, y: other.y - 4, w: other.w + 8, h: other.h + 8 }, label));
+        for (let step = 0; step < 1000 && taken(); step++) {
+            label.y += 4;
+        }
+        settled.push(label);
+    }
+}
+/*
+ * Deterministic layered layout with integer coordinates. Barycenter sweeps order unpinned nodes;
+ * pinned nodes keep their position, and skipped layers give edges explicit routing points.
+ */
+export function layoutOf(document) {
+    const down = document.meta.direction === 'down';
+    const layers = layersOf(document.nodes, document.edges);
+    const sizes = document.nodes.map((node) => sizeOfNode(node));
+    const knownIds = new Set(document.nodes.map((node) => node.id));
+    const { units, unitOf, unitOfNode } = unitsOf(document.nodes, layers, sizes, down);
+    const { bands, bandOfGroup } = bandsOf(document.groups, units, unitOf, down);
+    const graphEdges = edgesOf(document.edges, units, unitOf, knownIds);
+    const { hops, chains, loops, loose } = graphEdges;
+    const layerCount = units.reduce((count, unit) => Math.max(count, unit.layer + 1), 0);
+    const items = itemsOf(units, bands, layerCount, down);
+    const layering = { units, hops, bands, lines: graphEdges.lines, items };
+    orderLayers(layering);
+    const top = placeAcross(layering);
+    const middleOf = (unit) => top[unit] + units[unit].h / 2;
+    const ports = portsOf(units, top, hops, loops);
+    const labelSizes = document.edges.map((edge) => (edge.label ? sizeOfEdgeLabel(edge.label) : null));
+    const { columnX, columnWidth, unitX, trackX, frameLabels } = placeAlong(layering, graphEdges, ports, labelSizes, layerCount, down);
     const frameBoxOf = (unit) => ({ x: unitX[unit], y: top[unit], w: units[unit].w, h: units[unit].h });
     const shapeOf = (unit) => document.nodes[units[unit].node].shape;
     const exitX = (unit, y) => {
@@ -507,7 +553,7 @@ export function layoutOf(document) {
             return columnX[self.layer] + columnWidth[self.layer];
         }
         const box = frameBoxOf(unit);
-        return box.x + box.w - insetOf(shapeOf(unit), box, y - centerOf(unit), down);
+        return box.x + box.w - insetOf(shapeOf(unit), box, y - middleOf(unit), down);
     };
     const entryX = (unit, y) => {
         const self = units[unit];
@@ -515,7 +561,7 @@ export function layoutOf(document) {
             return columnX[self.layer];
         }
         const box = frameBoxOf(unit);
-        return box.x + insetOf(shapeOf(unit), box, y - centerOf(unit), down);
+        return box.x + insetOf(shapeOf(unit), box, y - middleOf(unit), down);
     };
     const toReal = (point) => (down ? flipPoint(point) : point);
     const labelOf = (edge, frame) => {
@@ -553,8 +599,8 @@ export function layoutOf(document) {
         const points = [];
         for (const index of chain.hops) {
             const hop = hops[index];
-            const ya = hopStart[index];
-            const yb = hopEnd[index];
+            const ya = ports.hopStart[index];
+            const yb = ports.hopEnd[index];
             points.push({ x: exitX(hop.from, ya), y: ya });
             if (ya !== yb) {
                 const x = trackX.get(index);
@@ -575,8 +621,8 @@ export function layoutOf(document) {
     loops.forEach((loop, index) => {
         const box = frameBoxOf(loop.unit);
         const reach = box.x + box.w + LOOP;
-        const startY = loopStart[index];
-        const endY = loopEnd[index];
+        const startY = ports.loopStart[index];
+        const endY = ports.loopEnd[index];
         const points = [
             { x: exitX(loop.unit, startY), y: startY },
             { x: reach, y: startY },
@@ -617,15 +663,15 @@ export function layoutOf(document) {
         routes[index] = { index, from: edge.from, to: edge.to, points, label };
     }
     const edges = routes.filter((route) => route !== undefined);
-    const alongAfter = GROUP_PADDING;
+    const alongBefore = GROUP_PADDING + (down ? GROUP_LABEL_BAND : 0);
     const groups = document.groups.flatMap((group, groupIndex) => {
         const rects = [];
         const bandIndex = bandOfGroup.get(groupIndex);
         if (bandIndex !== undefined) {
             const band = bands[bandIndex];
             const members = band.members.flat().filter((unit) => units[unit].node >= 0);
-            const alongStart = bandAlongStart(band);
-            const alongEnd = Math.max(...members.map((unit) => unitX[unit] + units[unit].w)) + alongAfter;
+            const alongStart = Math.min(...band.members[0].map((unit) => unitX[unit])) - alongBefore;
+            const alongEnd = Math.max(...members.map((unit) => unitX[unit] + units[unit].w)) + GROUP_PADDING;
             const frame = { x: alongStart, y: band.top, w: alongEnd - alongStart, h: band.height };
             rects.push(down ? flip(frame) : frame);
         }
@@ -647,20 +693,7 @@ export function layoutOf(document) {
         const labelBox = { x: rect.x + GROUP_LABEL_INSET, y: rect.y + 4, w: estimateTextWidth(group.label, SUB_SIZE, true), h: SUB_LINE };
         return [{ id: group.id, ...rect, labelBox }];
     });
-    // A label that no channel placed (a loop in the last layer, an edge with a pinned end) moves down until it is clear.
-    const settled = edges.flatMap((edge) => (edge.label && !unplaced.has(edge.index) ? [edge.label] : []));
-    for (const edge of edges) {
-        const label = edge.label;
-        if (!label || !unplaced.has(edge.index)) {
-            continue;
-        }
-        const taken = () => [...nodes, ...groups.map((group) => group.labelBox)].some((box) => intersects(box, label)) ||
-            settled.some((other) => intersects({ x: other.x - 4, y: other.y - 4, w: other.w + 8, h: other.h + 8 }, label));
-        for (let step = 0; step < 1000 && taken(); step++) {
-            label.y += 4;
-        }
-        settled.push(label);
-    }
+    settleLabels(edges, unplaced, nodes, groups);
     const corners = edges.flatMap((edge) => edge.points.map((point) => ({ ...point, w: 0, h: 0 })));
     const labels = edges.flatMap((edge) => (edge.label ? [edge.label] : []));
     const groupLabels = groups.map((group) => group.labelBox);

package/dist/route.js

@@ -86,12 +86,12 @@ export function routeChannel(input) {
     const order = vertical.map((_, i) => i).sort((left, right) => score[left] - score[right] || left - right);
     for (let pass = 0; pass < count; pass++) {
         let swapped = false;
-        for (let p = 0; p + 1 < count; p++) {
-            const left = order[p];
-            const right = order[p + 1];
+        for (let slot = 0; slot + 1 < count; slot++) {
+            const left = order[slot];
+            const right = order[slot + 1];
             if (cost[right * count + left] < cost[left * count + right]) {
-                order[p] = right;
-                order[p + 1] = left;
+                order[slot] = right;
+                order[slot + 1] = left;
                 swapped = true;
             }
         }
@@ -101,10 +101,10 @@ export function routeChannel(input) {
     }
     const track = new Array(count).fill(0);
     let tracks = 0;
-    order.forEach((index, p) => {
+    order.forEach((index, slot) => {
         let at = 0;
-        for (let q = 0; q < p; q++) {
-            const other = order[q];
+        for (let earlier = 0; earlier < slot; earlier++) {
+            const other = order[earlier];
             if (near(vertical[other], vertical[index])) {
                 at = Math.max(at, track[other] + 1);
             }

package/dist/shapes.js

@@ -6,19 +6,19 @@ const LID_RATIO = 0.18;
 const HEAD_LENGTH = 10;
 const HEAD_WIDTH = 6;
 function roundedRect(box, radius) {
-    const r = Math.round(Math.min(radius, box.w / 2, box.h / 2));
+    const corner = Math.round(Math.min(radius, box.w / 2, box.h / 2));
     const right = box.x + box.w;
     const bottom = box.y + box.h;
     return [
-        `M${box.x + r} ${box.y}`,
-        `H${right - r}`,
-        `A${r} ${r} 0 0 1 ${right} ${box.y + r}`,
-        `V${bottom - r}`,
-        `A${r} ${r} 0 0 1 ${right - r} ${bottom}`,
-        `H${box.x + r}`,
-        `A${r} ${r} 0 0 1 ${box.x} ${bottom - r}`,
-        `V${box.y + r}`,
-        `A${r} ${r} 0 0 1 ${box.x + r} ${box.y}`,
+        `M${box.x + corner} ${box.y}`,
+        `H${right - corner}`,
+        `A${corner} ${corner} 0 0 1 ${right} ${box.y + corner}`,
+        `V${bottom - corner}`,
+        `A${corner} ${corner} 0 0 1 ${right - corner} ${bottom}`,
+        `H${box.x + corner}`,
+        `A${corner} ${corner} 0 0 1 ${box.x} ${bottom - corner}`,
+        `V${box.y + corner}`,
+        `A${corner} ${corner} 0 0 1 ${box.x + corner} ${box.y}`,
         'Z'
     ].join(' ');
 }

package/dist/svg.js

@@ -13,11 +13,7 @@ const NOT_XML = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uFFFE\uFFFF]/g;
 function escapeXml(value) {
     return value.replace(NOT_XML, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
 }
-/*
- * The whole diagram as one SVG string, for an export and for what the daemon hands an agent. The
- * view in the app draws the same layout and the same paths as elements of its own, so the two only
- * differ in where the colors come from.
- */
+/* The whole diagram as one SVG string, from the same layout and paths a view draws with its own elements. */
 export function toSvg(document, options = {}) {
     const palette = options.palette ?? DEFAULT_PALETTE;
     const paper = options.paper ?? DEFAULT_PAPER;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/diagram",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "Directed graph schemas, layered layout, SVG export and reading order.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -44,7 +44,7 @@
     "typescript": "^7.0.2"
   },
   "dependencies": {
-    "@adecore/drawing": "0.21.1",
+    "@adecore/drawing": "0.22.0",
     "zod": "^4.6.5"
   }
 }

package/src/across.ts

@@ -1,4 +1,4 @@
-import { BAND_MARGIN, bandOfCode, type Layering } from './graph.ts';
+import { BAND_MARGIN, bandCode, bandOfCode, type Layering } from './graph.ts';
 
 /* Rounds that pull every unit towards the units it is joined to, alternating the direction of the sweep. */
 const ROUNDS = 8;
@@ -175,7 +175,7 @@ export function placeAcross(layering: Layering): number[] {
             if (shifts.length === 0) {
                 return;
             }
-            const code = -(bandIndex + 1);
+            const code = bandCode(bandIndex);
             let low = -Infinity;
             let high = Infinity;
             for (let layer = band.first; layer <= band.last; layer++) {

package/src/layout.ts

@@ -1,7 +1,7 @@
-import type { DiagramDocument, DiagramEdge, DiagramNode, DiagramShape } from './protocol.ts';
+import type { DiagramDocument, DiagramEdge, DiagramGroup, DiagramNode, DiagramShape } from './protocol.ts';
 import { centerOf, intersects, roundPoint, type Point, type Rect } from '@adecore/drawing';
 import { placeAcross } from './across.ts';
-import { DUMMY_MARGIN, NODE_MARGIN, bandCode, type Band, type Hop, type Unit } from './graph.ts';
+import { DUMMY_MARGIN, NODE_MARGIN, bandCode, type Band, type Hop, type Layering, type Unit } from './graph.ts';
 import { orderLayers } from './order.ts';
 import { routeChannel, type ChannelHop, type ChannelLabel } from './route.ts';
 import { LABEL_LINE, LABEL_SIZE, SUB_LINE, SUB_SIZE, estimateTextWidth, widestLine, wrapText } from './text.ts';
@@ -336,21 +336,30 @@ interface Port {
     apply: (y: number) => void;
 }
 
-/*
- * Deterministic layered layout with integer coordinates. Barycenter sweeps order unpinned nodes;
- * pinned nodes keep their position, and skipped layers give edges explicit routing points.
- */
-export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'groups' | 'edges'>): DiagramLayout {
-    const down = document.meta.direction === 'down';
-    const layers = layersOf(document.nodes, document.edges);
-    const sizes = document.nodes.map((node) => sizeOfNode(node));
-    const knownIds = new Set(document.nodes.map((node) => node.id));
+interface Edges {
+    hops: Hop[];
+    chains: Chain[];
+    loops: Loop[];
+    /* Edges with a pinned end, or with both ends in one layer: routed straight, outside the layering. */
+    loose: number[];
+    lines: number[][];
+}
 
-    // Every node that is not pinned is a unit, sized in the right-running frame.
+interface Ports {
+    hopStart: number[];
+    hopEnd: number[];
+    loopStart: number[];
+    loopEnd: number[];
+}
+
+type LabelSize = ReturnType<typeof sizeOfEdgeLabel>;
+
+/* Every node that is not pinned is a unit, sized in the right-running frame. */
+function unitsOf(nodes: readonly DiagramNode[], layers: ReadonlyMap<string, number>, sizes: readonly NodeSize[], down: boolean) {
     const units: Unit[] = [];
     const unitOf = new Map<string, number>();
     const unitOfNode = new Map<number, number>();
-    document.nodes.forEach((node, index) => {
+    nodes.forEach((node, index) => {
         if (node.pos) {
             return;
         }
@@ -369,10 +378,13 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
             down: []
         });
     });
+    return { units, unitOf, unitOfNode };
+}
 
+function bandsOf(groups: readonly DiagramGroup[], units: Unit[], unitOf: ReadonlyMap<string, number>, down: boolean) {
     const bands: Band[] = [];
     const bandOfGroup = new Map<number, number>();
-    document.groups.forEach((group, groupIndex) => {
+    groups.forEach((group, groupIndex) => {
         const inside = group.wraps.flatMap((id) => {
             const unit = unitOf.get(id);
             return unit === undefined || units[unit]!.band >= 0 ? [] : [unit];
@@ -399,13 +411,17 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
             labelWidth: estimateTextWidth(group.label, SUB_SIZE, true)
         });
     });
+    return { bands, bandOfGroup };
+}
 
+/* Splits every edge between two units into hops of one layer each, adding a point to `units` for every layer it skips. */
+function edgesOf(edges: readonly DiagramEdge[], units: Unit[], unitOf: ReadonlyMap<string, number>, knownIds: ReadonlySet<string>): Edges {
     const hops: Hop[] = [];
     const chains: Chain[] = [];
     const loops: Loop[] = [];
     const loose: number[] = [];
     const lines: number[][] = [];
-    document.edges.forEach((edge, index) => {
+    edges.forEach((edge, index) => {
         if (!knownIds.has(edge.from) || !knownIds.has(edge.to)) {
             return;
         }
@@ -449,8 +465,11 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
         }
         chains.push({ edge: index, hops: chain, reversed });
     });
+    return { hops, chains, loops, loose, lines };
+}
 
-    const layerCount = units.reduce((count, unit) => Math.max(count, unit.layer + 1), 0);
+/* The top-level entries of every layer, with the members of each band filled in and its height measured. */
+function itemsOf(units: readonly Unit[], bands: readonly Band[], layerCount: number, down: boolean): number[][] {
     const items: number[][] = Array.from({ length: layerCount }, () => []);
     units.forEach((unit, index) => {
         if (unit.band < 0) {
@@ -483,13 +502,12 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
             band.height = Math.max(band.height, band.labelWidth + GROUP_LABEL_INSET * 2);
         }
     });
+    return items;
+}
 
-    const layering = { units, hops, bands, lines, items };
-    orderLayers(layering);
-    const top = placeAcross(layering);
-    const centerOf = (unit: number): number => top[unit]! + units[unit]!.h / 2;
-
-    // Ports: every hop leaves its box on the side facing the flow and enters on the side facing back.
+/* Every hop leaves its box on the side facing the flow and enters on the side facing back. */
+function portsOf(units: readonly Unit[], top: readonly number[], hops: readonly Hop[], loops: readonly Loop[]): Ports {
+    const middleOf = (unit: number): number => top[unit]! + units[unit]!.h / 2;
     const hopStart = new Array<number>(hops.length).fill(0);
     const hopEnd = new Array<number>(hops.length).fill(0);
     const loopStart = new Array<number>(loops.length).fill(0);
@@ -497,11 +515,11 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
     const exits: Port[][] = units.map(() => []);
     const entries: Port[][] = units.map(() => []);
     hops.forEach((hop, index) => {
-        exits[hop.from]!.push({ key: centerOf(hop.to), edge: hop.edge, order: 0, apply: (y) => (hopStart[index] = y) });
-        entries[hop.to]!.push({ key: centerOf(hop.from), edge: hop.edge, order: 0, apply: (y) => (hopEnd[index] = y) });
+        exits[hop.from]!.push({ key: middleOf(hop.to), edge: hop.edge, order: 0, apply: (y) => (hopStart[index] = y) });
+        entries[hop.to]!.push({ key: middleOf(hop.from), edge: hop.edge, order: 0, apply: (y) => (hopEnd[index] = y) });
     });
     loops.forEach((loop, index) => {
-        const key = centerOf(loop.unit);
+        const key = middleOf(loop.unit);
         exits[loop.unit]!.push(
             { key, edge: loop.edge, order: 0, apply: (y) => (loopStart[index] = y) },
             { key, edge: loop.edge, order: 1, apply: (y) => (loopEnd[index] = y) }
@@ -513,7 +531,7 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
         }
         // In the order of the other ends, so two hops leaving one box do not cross on the way out.
         ports.sort((left, right) => left.key - right.key || left.edge - right.edge || left.order - right.order);
-        const middle = centerOf(unit);
+        const middle = middleOf(unit);
         const room = Math.max(0, units[unit]!.h - PORT_INSET * 2);
         const step = ports.length > 1 ? Math.min(PORT_GAP, Math.floor(room / (ports.length - 1))) : 0;
         ports.forEach((port, index) => port.apply(Math.round(middle + (index - (ports.length - 1) / 2) * step)));
@@ -535,7 +553,23 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
             hopStart[index] = hopEnd[index]!;
         }
     });
+    return { hopStart, hopEnd, loopStart, loopEnd };
+}
+
+interface Columns {
+    columnX: number[];
+    columnWidth: number[];
+    unitX: number[];
+    /* Per hop that bends, where its run across the flow sits in the channel after its layer. */
+    trackX: Map<number, number>;
+    /* Per edge, its label in the right-running frame. */
+    frameLabels: Map<number, Rect>;
+}
 
+/* Places the layers along the flow, each followed by the channel its hops and labels are routed through. */
+function placeAlong(layering: Layering, edges: Edges, ports: Ports, labelSizes: readonly (LabelSize | null)[], layerCount: number, down: boolean): Columns {
+    const { units, bands } = layering;
+    const { hops, chains, loops } = edges;
     const byLayer: number[][] = Array.from({ length: layerCount }, () => []);
     units.forEach((unit, index) => byLayer[unit.layer]!.push(index));
     const columnWidth = byLayer.map((column) => even(column.reduce((widest, unit) => Math.max(widest, units[unit]!.w), 0)));
@@ -544,7 +578,6 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
     const hopsByLayer: number[][] = Array.from({ length: layerCount }, () => []);
     hops.forEach((hop, index) => hopsByLayer[units[hop.from]!.layer]!.push(index));
 
-    const labelSizes = document.edges.map((edge) => (edge.label ? sizeOfEdgeLabel(edge.label) : null));
     const labelHop = new Map<number, number>();
     for (const chain of chains) {
         if (labelSizes[chain.edge]) {
@@ -553,9 +586,8 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
     }
     const frameLabels = new Map<number, Rect>();
     const trackX = new Map<number, number>();
-
     const alongBefore = GROUP_PADDING + (down ? GROUP_LABEL_BAND : 0);
-    const bandAlongStart = (band: Band): number => Math.min(...band.members[0]!.map((unit) => unitX[unit]!)) - alongBefore;
+
     for (let layer = 0; layer < layerCount; layer++) {
         for (const unit of byLayer[layer]!) {
             unitX[unit] = columnX[layer]! + Math.floor((columnWidth[layer]! - units[unit]!.w) / 2);
@@ -564,19 +596,19 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
             break;
         }
         const start = columnX[layer]! + columnWidth[layer]!;
-        const channelHops: ChannelHop[] = hopsByLayer[layer]!.map((hop) => ({ hop, ya: hopStart[hop]!, yb: hopEnd[hop]! }));
+        const channelHops: ChannelHop[] = hopsByLayer[layer]!.map((hop) => ({ hop, ya: ports.hopStart[hop]!, yb: ports.hopEnd[hop]! }));
         const channelLabels: ChannelLabel[] = [];
         for (const hop of hopsByLayer[layer]!) {
             const edge = labelHop.get(hop);
             const size = edge === undefined ? null : labelSizes[edge];
             if (edge !== undefined && size) {
-                channelLabels.push({ edge, hop, y: hopStart[hop]!, along: down ? size.h : size.w, across: down ? size.w : size.h });
+                channelLabels.push({ edge, hop, y: ports.hopStart[hop]!, along: down ? size.h : size.w, across: down ? size.w : size.h });
             }
         }
         loops.forEach((loop, index) => {
             const size = labelSizes[loop.edge];
             if (size && units[loop.unit]!.layer === layer) {
-                channelLabels.push({ edge: loop.edge, hop: -1, y: loopEnd[index]!, along: down ? size.h : size.w, across: down ? size.w : size.h });
+                channelLabels.push({ edge: loop.edge, hop: -1, y: ports.loopEnd[index]!, along: down ? size.h : size.w, across: down ? size.w : size.h });
             }
         });
         channelLabels.sort((left, right) => left.edge - right.edge);
@@ -602,6 +634,51 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
         channel.labels.forEach((rect, edge) => frameLabels.set(edge, rect));
         columnX[layer + 1] = start + channel.width;
     }
+    return { columnX, columnWidth, unitX, trackX, frameLabels };
+}
+
+/* A label that no channel placed (a loop in the last layer, an edge with a pinned end) moves down until it is clear. */
+function settleLabels(edges: readonly EdgeRoute[], unplaced: ReadonlySet<number>, nodes: readonly NodeBox[], groups: readonly GroupBox[]): void {
+    const settled = edges.flatMap((edge) => (edge.label && !unplaced.has(edge.index) ? [edge.label] : []));
+    for (const edge of edges) {
+        const label = edge.label;
+        if (!label || !unplaced.has(edge.index)) {
+            continue;
+        }
+        const taken = (): boolean =>
+            [...nodes, ...groups.map((group) => group.labelBox)].some((box) => intersects(box, label)) ||
+            settled.some((other) => intersects({ x: other.x - 4, y: other.y - 4, w: other.w + 8, h: other.h + 8 }, label));
+        for (let step = 0; step < 1000 && taken(); step++) {
+            label.y += 4;
+        }
+        settled.push(label);
+    }
+}
+
+/*
+ * Deterministic layered layout with integer coordinates. Barycenter sweeps order unpinned nodes;
+ * pinned nodes keep their position, and skipped layers give edges explicit routing points.
+ */
+export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'groups' | 'edges'>): DiagramLayout {
+    const down = document.meta.direction === 'down';
+    const layers = layersOf(document.nodes, document.edges);
+    const sizes = document.nodes.map((node) => sizeOfNode(node));
+    const knownIds = new Set(document.nodes.map((node) => node.id));
+
+    const { units, unitOf, unitOfNode } = unitsOf(document.nodes, layers, sizes, down);
+    const { bands, bandOfGroup } = bandsOf(document.groups, units, unitOf, down);
+    const graphEdges = edgesOf(document.edges, units, unitOf, knownIds);
+    const { hops, chains, loops, loose } = graphEdges;
+    const layerCount = units.reduce((count, unit) => Math.max(count, unit.layer + 1), 0);
+    const items = itemsOf(units, bands, layerCount, down);
+
+    const layering: Layering = { units, hops, bands, lines: graphEdges.lines, items };
+    orderLayers(layering);
+    const top = placeAcross(layering);
+    const middleOf = (unit: number): number => top[unit]! + units[unit]!.h / 2;
+    const ports = portsOf(units, top, hops, loops);
+    const labelSizes = document.edges.map((edge) => (edge.label ? sizeOfEdgeLabel(edge.label) : null));
+    const { columnX, columnWidth, unitX, trackX, frameLabels } = placeAlong(layering, graphEdges, ports, labelSizes, layerCount, down);
 
     const frameBoxOf = (unit: number): Rect => ({ x: unitX[unit]!, y: top[unit]!, w: units[unit]!.w, h: units[unit]!.h });
     const shapeOf = (unit: number): DiagramShape | undefined => document.nodes[units[unit]!.node]!.shape;
@@ -611,7 +688,7 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
             return columnX[self.layer]! + columnWidth[self.layer]!;
         }
         const box = frameBoxOf(unit);
-        return box.x + box.w - insetOf(shapeOf(unit), box, y - centerOf(unit), down);
+        return box.x + box.w - insetOf(shapeOf(unit), box, y - middleOf(unit), down);
     };
     const entryX = (unit: number, y: number): number => {
         const self = units[unit]!;
@@ -619,7 +696,7 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
             return columnX[self.layer]!;
         }
         const box = frameBoxOf(unit);
-        return box.x + insetOf(shapeOf(unit), box, y - centerOf(unit), down);
+        return box.x + insetOf(shapeOf(unit), box, y - middleOf(unit), down);
     };
     const toReal = (point: Point): Point => (down ? flipPoint(point) : point);
     const labelOf = (edge: number, frame: Rect | undefined): EdgeLabelBox | null => {
@@ -659,8 +736,8 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
         const points: Point[] = [];
         for (const index of chain.hops) {
             const hop = hops[index]!;
-            const ya = hopStart[index]!;
-            const yb = hopEnd[index]!;
+            const ya = ports.hopStart[index]!;
+            const yb = ports.hopEnd[index]!;
             points.push({ x: exitX(hop.from, ya), y: ya });
             if (ya !== yb) {
                 const x = trackX.get(index)!;
@@ -681,8 +758,8 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
     loops.forEach((loop, index) => {
         const box = frameBoxOf(loop.unit);
         const reach = box.x + box.w + LOOP;
-        const startY = loopStart[index]!;
-        const endY = loopEnd[index]!;
+        const startY = ports.loopStart[index]!;
+        const endY = ports.loopEnd[index]!;
         const points = [
             { x: exitX(loop.unit, startY), y: startY },
             { x: reach, y: startY },
@@ -725,15 +802,15 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
     }
     const edges = routes.filter((route): route is EdgeRoute => route !== undefined);
 
-    const alongAfter = GROUP_PADDING;
+    const alongBefore = GROUP_PADDING + (down ? GROUP_LABEL_BAND : 0);
     const groups: GroupBox[] = document.groups.flatMap((group, groupIndex) => {
         const rects: Rect[] = [];
         const bandIndex = bandOfGroup.get(groupIndex);
         if (bandIndex !== undefined) {
             const band = bands[bandIndex]!;
             const members = band.members.flat().filter((unit) => units[unit]!.node >= 0);
-            const alongStart = bandAlongStart(band);
-            const alongEnd = Math.max(...members.map((unit) => unitX[unit]! + units[unit]!.w)) + alongAfter;
+            const alongStart = Math.min(...band.members[0]!.map((unit) => unitX[unit]!)) - alongBefore;
+            const alongEnd = Math.max(...members.map((unit) => unitX[unit]! + units[unit]!.w)) + GROUP_PADDING;
             const frame = { x: alongStart, y: band.top, w: alongEnd - alongStart, h: band.height };
             rects.push(down ? flip(frame) : frame);
         }
@@ -756,21 +833,7 @@ export function layoutOf(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'gro
         return [{ id: group.id, ...rect, labelBox }];
     });
 
-    // A label that no channel placed (a loop in the last layer, an edge with a pinned end) moves down until it is clear.
-    const settled = edges.flatMap((edge) => (edge.label && !unplaced.has(edge.index) ? [edge.label] : []));
-    for (const edge of edges) {
-        const label = edge.label;
-        if (!label || !unplaced.has(edge.index)) {
-            continue;
-        }
-        const taken = (): boolean =>
-            [...nodes, ...groups.map((group) => group.labelBox)].some((box) => intersects(box, label)) ||
-            settled.some((other) => intersects({ x: other.x - 4, y: other.y - 4, w: other.w + 8, h: other.h + 8 }, label));
-        for (let step = 0; step < 1000 && taken(); step++) {
-            label.y += 4;
-        }
-        settled.push(label);
-    }
+    settleLabels(edges, unplaced, nodes, groups);
     const corners = edges.flatMap((edge) => edge.points.map((point) => ({ ...point, w: 0, h: 0 })));
     const labels = edges.flatMap((edge) => (edge.label ? [edge.label] : []));
     const groupLabels = groups.map((group) => group.labelBox);

package/src/route.ts

@@ -129,12 +129,12 @@ export function routeChannel(input: ChannelInput): ChannelResult {
     const order = vertical.map((_, i) => i).sort((left, right) => score[left]! - score[right]! || left - right);
     for (let pass = 0; pass < count; pass++) {
         let swapped = false;
-        for (let p = 0; p + 1 < count; p++) {
-            const left = order[p]!;
-            const right = order[p + 1]!;
+        for (let slot = 0; slot + 1 < count; slot++) {
+            const left = order[slot]!;
+            const right = order[slot + 1]!;
             if (cost[right * count + left]! < cost[left * count + right]!) {
-                order[p] = right;
-                order[p + 1] = left;
+                order[slot] = right;
+                order[slot + 1] = left;
                 swapped = true;
             }
         }
@@ -144,10 +144,10 @@ export function routeChannel(input: ChannelInput): ChannelResult {
     }
     const track = new Array<number>(count).fill(0);
     let tracks = 0;
-    order.forEach((index, p) => {
+    order.forEach((index, slot) => {
         let at = 0;
-        for (let q = 0; q < p; q++) {
-            const other = order[q]!;
+        for (let earlier = 0; earlier < slot; earlier++) {
+            const other = order[earlier]!;
             if (near(vertical[other]!, vertical[index]!)) {
                 at = Math.max(at, track[other]! + 1);
             }

package/src/shapes.ts

@@ -15,19 +15,19 @@ export interface ShapePaths {
 }
 
 function roundedRect(box: Rect, radius: number): string {
-    const r = Math.round(Math.min(radius, box.w / 2, box.h / 2));
+    const corner = Math.round(Math.min(radius, box.w / 2, box.h / 2));
     const right = box.x + box.w;
     const bottom = box.y + box.h;
     return [
-        `M${box.x + r} ${box.y}`,
-        `H${right - r}`,
-        `A${r} ${r} 0 0 1 ${right} ${box.y + r}`,
-        `V${bottom - r}`,
-        `A${r} ${r} 0 0 1 ${right - r} ${bottom}`,
-        `H${box.x + r}`,
-        `A${r} ${r} 0 0 1 ${box.x} ${bottom - r}`,
-        `V${box.y + r}`,
-        `A${r} ${r} 0 0 1 ${box.x + r} ${box.y}`,
+        `M${box.x + corner} ${box.y}`,
+        `H${right - corner}`,
+        `A${corner} ${corner} 0 0 1 ${right} ${box.y + corner}`,
+        `V${bottom - corner}`,
+        `A${corner} ${corner} 0 0 1 ${right - corner} ${bottom}`,
+        `H${box.x + corner}`,
+        `A${corner} ${corner} 0 0 1 ${box.x} ${bottom - corner}`,
+        `V${box.y + corner}`,
+        `A${corner} ${corner} 0 0 1 ${box.x + corner} ${box.y}`,
         'Z'
     ].join(' ');
 }

package/src/svg.ts

@@ -34,11 +34,7 @@ function escapeXml(value: string): string {
     return value.replace(NOT_XML, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
 }
 
-/*
- * The whole diagram as one SVG string, for an export and for what the daemon hands an agent. The
- * view in the app draws the same layout and the same paths as elements of its own, so the two only
- * differ in where the colors come from.
- */
+/* The whole diagram as one SVG string, from the same layout and paths a view draws with its own elements. */
 export function toSvg(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'groups' | 'edges'>, options: DiagramSvgOptions = {}): string {
     const palette = options.palette ?? DEFAULT_PALETTE;
     const paper = options.paper ?? DEFAULT_PAPER;