@itsthecsguy/linework 0.1.2 → 0.1.4

package/dist/drawio/write.js

@@ -1,7 +1,7 @@
 import { kindDef } from '../spec/model.js';
 import { DOMParser, XMLSerializer } from '@xmldom/xmldom';
 import { ICON_PAD, ICON_SIZE, resolveIcon } from './icons.js';
-import { ER_HEAD, ER_ROW, edgeStyle, erEdgeStyle, fieldLabel, fieldStyle, groupLabel, groupStyle, nodeLabel, nodeStyle, paintFor, palette } from './theme.js';
+import { CYL_SIZE, ER_HEAD, ER_ROW, edgeStyle, erEdgeStyle, fieldLabel, fieldStyle, groupLabel, groupStyle, nodeLabel, nodeStyle, paintFor, palette, textMiddle, typeface } from './theme.js';
 export { ER_HEAD, ER_ROW };
 export const FORMAT_VERSION = '1';
 export const xmlEsc = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '&#10;');
@@ -72,7 +72,8 @@ export function nodeChildren(d, n, box) {
                 parent: n.id,
                 attrs: { label: '', aiviz_type: 'icon' },
                 style: r.style,
-                box: { x: (ICON_PAD - ICON_SIZE) / 2 + 2, y: Math.round((box.h - ICON_SIZE) / 2), w: ICON_SIZE, h: ICON_SIZE },
+                // Level with the text, which on a cylinder sits below the lid.
+                box: { x: (ICON_PAD - ICON_SIZE) / 2 + 2, y: Math.round(textMiddle(styleFor(d, n), box.h) - ICON_SIZE / 2), w: ICON_SIZE, h: ICON_SIZE },
             });
     }
     return out;
@@ -115,12 +116,38 @@ export const groupStyleFor = (d, g) => groupStyle(d.theme, g, groupDepth(d, g));
 export function groupAttrs(g, theme = 'clean') {
     return { label: groupLabel(g.label, theme), aiviz_type: 'group', aiviz_label: g.label, ...lookAttrs(g) };
 }
+/**
+ * Layout sizes a decision's diamond from its text wrapped narrow (see nodeSizes),
+ * but draw.io wraps at the diamond's full width, so a long question runs out over
+ * the slanted sides. Inset the label to the width layout measured.
+ */
+function diamondInset(d, n, box) {
+    if (kindDef(d.type, n.kind).shape !== 'diamond')
+        return '';
+    const text = (box.w - 40) / 1.5;
+    const side = Math.max(0, Math.floor((box.w - text - 10) / 2));
+    return `spacingLeft=${side};spacingRight=${side};`;
+}
+/**
+ * Where a vertical edge at `x` meets a cylinder's curved top or base, as a
+ * fraction of its height. Off centre the curve sits inside the bounding box, and
+ * an arrow stopped at the box would float short of it.
+ */
+function rimY(p, b) {
+    const top = Math.abs(p.y - b.y) < 0.5, base = Math.abs(p.y - (b.y + b.h)) < 0.5;
+    if (!top && !base)
+        return undefined;
+    const u = Math.min(1, Math.abs(p.x - (b.x + b.w / 2)) / (b.w / 2));
+    const dip = CYL_SIZE * (1 - Math.sqrt(1 - u * u));
+    return top ? dip / b.h : (b.h - dip) / b.h;
+}
 /** Exit/entry constraints so draw.io leaves and enters nodes where ELK did. */
-export function portStyle(points, s, t) {
+export function portStyle(points, s, t, cyl = {}) {
     const start = points[0], end = points[points.length - 1];
     const c01 = (v) => Math.min(1, Math.max(0, Math.round(v * 1000) / 1000));
-    return (`exitX=${c01((start.x - s.x) / s.w)};exitY=${c01((start.y - s.y) / s.h)};exitDx=0;exitDy=0;` +
-        `entryX=${c01((end.x - t.x) / t.w)};entryY=${c01((end.y - t.y) / t.h)};entryDx=0;entryDy=0;`);
+    const sr = cyl.from ? rimY(start, s) : undefined, tr = cyl.to ? rimY(end, t) : undefined;
+    return (`exitX=${c01((start.x - s.x) / s.w)};exitY=${c01(sr ?? (start.y - s.y) / s.h)};exitDx=0;exitDy=0;${sr !== undefined ? 'exitPerimeter=0;' : ''}` +
+        `entryX=${c01((end.x - t.x) / t.w)};entryY=${c01(tr ?? (end.y - t.y) / t.h)};entryDx=0;entryDy=0;${tr !== undefined ? 'entryPerimeter=0;' : ''}`);
 }
 export function sceneFromLayout(d, l) {
     const parentOf = new Map();
@@ -139,43 +166,140 @@ export function sceneFromLayout(d, l) {
     const vertices = [];
     for (const g of d.groups) {
         const box = rel(g.id);
-        vertices.push({ id: g.id, parent: g.parent ?? '1', attrs: { ...groupAttrs(g, d.theme), aiviz_auto: autoAttr(box) }, style: groupStyleFor(d, g), box });
+        const inset = l.titleInset?.get(g.id);
+        vertices.push({ id: g.id, parent: g.parent ?? '1', attrs: { ...groupAttrs(g, d.theme), aiviz_auto: autoAttr(box) }, style: groupStyleFor(d, g) + (inset ? `spacingLeft=${inset};` : ''), box });
     }
     for (const n of d.nodes) {
         const box = rel(n.id);
-        vertices.push({ id: n.id, parent: n.parent ?? '1', attrs: { ...nodeAttrs(d, n), aiviz_auto: autoAttr(box) }, style: styleFor(d, n), box });
+        vertices.push({ id: n.id, parent: n.parent ?? '1', attrs: { ...nodeAttrs(d, n), aiviz_auto: autoAttr(box) }, style: styleFor(d, n) + diamondInset(d, n, box), box });
         vertices.push(...nodeChildren(d, n, box));
     }
+    const isCyl = (id) => { const n = d.nodes.find((x) => x.id === id); return !!n && kindDef(d.type, n.kind).shape === 'cylinder'; };
     const edges = d.edges.map((e) => {
         const le = l.edges.get(e.id);
+        const cyl = { from: isCyl(e.from), to: isCyl(e.to) };
         const base = { id: edgeCellId(e.id), parent: '1', attrs: edgeAttrs(e), style: edgeStyleFor(d, e, labelBg(d, l, le?.label)), source: e.from, target: e.to };
         if (!le)
             return base;
+        if (e.from === e.to && le.label && e.label && le.points.length === 4) {
+            // A self-loop: the label sits beside the loop's outer run, not on it.
+            const [, a, b] = le.points;
+            const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+            return {
+                ...base,
+                style: base.style + portStyle(le.points, abs(e.from), abs(e.to), cyl),
+                points: le.points.slice(1, -1),
+                labelX: 0.001,
+                labelOffset: { x: le.label.x + le.label.w / 2 - mid.x, y: le.label.y + le.label.h / 2 - mid.y },
+            };
+        }
         return {
             ...base,
-            style: base.style + portStyle(le.points, abs(e.from), abs(e.to)),
+            style: base.style + portStyle(le.points, abs(e.from), abs(e.to), cyl),
             points: le.points.slice(1, -1),
-            labelX: le.label && e.label ? (labelSpot(le.points, le.label) ?? labelFraction(le.points, { x: le.label.x + le.label.w / 2, y: le.label.y + le.label.h / 2 })) : undefined,
+            labelX: le.label && e.label ? (labelSpot(le.points, le.label, l.direction) ?? labelFraction(le.points, { x: le.label.x + le.label.w / 2, y: le.label.y + le.label.h / 2 })) : undefined,
         };
     });
+    alignLabels(d, l, edges);
     return { name: d.title ?? 'Diagram', background: palette(d.theme).canvas, meta: diagramMeta(d), vertices, edges, raw: [] };
 }
+/** The point at a draw.io label fraction (-1..1) along a route, and the run it sits on. */
+function spotAt(pts, frac) {
+    const lens = pts.slice(1).map((b, i) => Math.hypot(b.x - pts[i].x, b.y - pts[i].y));
+    let at = ((frac + 1) / 2) * lens.reduce((x, y) => x + y, 0);
+    for (let i = 0; i < lens.length; i++) {
+        const a = pts[i], b = pts[i + 1], len = lens[i];
+        if (at <= len + 1e-6 || i === lens.length - 1) {
+            const t = len ? Math.min(1, at / len) : 0;
+            return { p: { x: a.x + t * (b.x - a.x), y: a.y + t * (b.y - a.y) }, a, b };
+        }
+        at -= len;
+    }
+    return undefined;
+}
+/**
+ * Labels on neighbouring parallel runs (two edges dropping side by side) sit at
+ * whatever height each run's midpoint gives, often a few px apart. Put them on
+ * one line when each can move there and stay on its own run.
+ */
+function alignLabels(d, l, edges) {
+    const h = Math.ceil(typeface(d.theme).size.edge * 1.2) + 4;
+    const spots = edges.flatMap((se) => {
+        const e = d.edges.find((x) => edgeCellId(x.id) === se.id);
+        const le = e && l.edges.get(e.id);
+        if (!le || se.labelX === undefined || se.labelOffset || !e.label)
+            return [];
+        const s = spotAt(le.points, se.labelX);
+        if (!s)
+            return [];
+        const vertical = Math.abs(s.a.x - s.b.x) < 0.5;
+        if (!vertical && Math.abs(s.a.y - s.b.y) >= 0.5)
+            return [];
+        return [{ se, pts: le.points, ...s, vertical }];
+    });
+    for (const vertical of [true, false]) {
+        const along = (p) => (vertical ? p.y : p.x), across = (p) => (vertical ? p.x : p.y);
+        const group = spots.filter((s) => s.vertical === vertical).sort((a, b) => along(a.p) - along(b.p));
+        for (let i = 0; i < group.length;) {
+            let j = i + 1;
+            while (j < group.length && along(group[j].p) - along(group[i].p) <= 8)
+                j++;
+            const set = group.slice(i, j);
+            i = j;
+            if (set.length < 2)
+                continue;
+            // Side by side on different runs, not one run's labels stacked.
+            const xs = set.map((s) => across(s.p));
+            if (Math.max(...xs) - Math.min(...xs) < 20)
+                continue;
+            const target = Math.round(set.reduce((m, s) => m + along(s.p), 0) / set.length);
+            const fits = set.every((s) => {
+                const lo = Math.min(along(s.a), along(s.b)) + h / 2 + 4, hi = Math.max(along(s.a), along(s.b)) - h / 2 - 4;
+                return target >= lo && target <= hi;
+            });
+            if (!fits)
+                continue;
+            for (const s of set) {
+                const c = vertical ? { x: s.p.x, y: target } : { x: target, y: s.p.y };
+                s.se.labelX = labelFraction(s.pts, c);
+            }
+        }
+    }
+}
 const attrString = (attrs) => Object.entries(attrs)
     .filter(([k]) => k !== 'id')
     .map(([k, v]) => ` ${k}="${xmlEsc(v)}"`)
     .join('');
 export function serialize(scene) {
-    // Parents before children.
     const parentOf = new Map(scene.vertices.map((v) => [v.id, v.parent]));
-    const depth = (id) => {
-        const p = parentOf.get(id);
-        return p && p !== '1' ? 1 + depth(p) : 0;
-    };
-    // Containers first (outermost first), then everything else in its original order,
-    // which show() reads back and ELK uses as a placement hint.
-    const isParent = new Set(scene.vertices.map((v) => v.parent));
-    const containers = scene.vertices.filter((v) => isParent.has(v.id) || v.attrs.aiviz_type === 'group').sort((a, b) => depth(a.id) - depth(b.id));
-    const vertices = [...containers, ...scene.vertices.filter((v) => !containers.includes(v))];
+    // Every cell after its parent, otherwise in the scene's order, which is spec
+    // order: show() reads it back and ELK uses it as a placement hint. Groups go
+    // first so nodes can sit in them; a node's own children (icon, table rows)
+    // already follow it.
+    const groups = scene.vertices.filter((v) => v.attrs.aiviz_type === 'group');
+    const rest = scene.vertices.filter((v) => v.attrs.aiviz_type !== 'group');
+    const placed = new Set(['1']);
+    const vertices = [];
+    for (const list of [groups, rest]) {
+        let todo = [...list];
+        while (todo.length) {
+            const left = [];
+            for (const v of todo) {
+                if (placed.has(v.parent) || !parentOf.has(v.parent)) {
+                    vertices.push(v);
+                    placed.add(v.id);
+                }
+                else
+                    left.push(v);
+            }
+            // A cycle or a dangling parent: write the rest as they are rather than drop them.
+            if (left.length === todo.length) {
+                vertices.push(...left);
+                break;
+            }
+            todo = left;
+        }
+    }
     const cells = [];
     for (const v of vertices) {
         const b = v.box;
@@ -188,6 +312,7 @@ export function serialize(scene) {
         const geom = e.geomRaw ??
             `<mxGeometry ${e.labelX ? `x="${e.labelX.toFixed(3)}" ` : ''}relative="1" as="geometry">` +
                 (e.points?.length ? `<Array as="points">${e.points.map((p) => `<mxPoint x="${r(p.x)}" y="${r(p.y)}"/>`).join('')}</Array>` : '') +
+                (e.labelOffset ? `<mxPoint x="${r(e.labelOffset.x)}" y="${r(e.labelOffset.y)}" as="offset"/>` : '') +
                 `</mxGeometry>`;
         cells.push(`<object id="${xmlEsc(e.id)}"${attrString({ label: '', ...e.attrs })}>` +
             `<mxCell style="${xmlEsc(e.style)}" edge="1" parent="${xmlEsc(e.parent)}"` +
@@ -209,16 +334,21 @@ export function toMxfile(d, l) {
  * source node, which reads as a caption of that node. Returns draw.io's -1..1
  * fraction, or undefined when no run is long enough.
  */
-function labelSpot(pts, label) {
+function labelSpot(pts, label, dir) {
     let total = 0;
     let best;
+    // Runs along the flow belong to one edge; runs across it are often shared
+    // corridors where several edges' labels would stack up. Prefer the former.
+    const flowVertical = dir === 'TB' || dir === 'BT';
     for (let i = 0; i < pts.length - 1; i++) {
         const a = pts[i], b = pts[i + 1];
         const len = Math.hypot(b.x - a.x, b.y - a.y);
         const vertical = Math.abs(b.x - a.x) < Math.abs(b.y - a.y);
         const room = len - (vertical ? label.h : label.w) - 20;
-        if (room >= 0 && (!best || room > best.room))
-            best = { room, at: total + len / 2 };
+        const along = dir ? vertical === flowVertical : true;
+        const better = !best || (along && !best.along) || (along === best.along && room > best.room);
+        if (room >= 0 && better)
+            best = { room, at: total + len / 2, along };
         total += len;
     }
     return best && total ? (best.at / total) * 2 - 1 : undefined;

package/dist/layout/layout.js

@@ -1,9 +1,10 @@
 // Diagram -> absolute geometry, via ELK layered.
 import ElkModule from 'elkjs/lib/elk.bundled.js';
 import { kindDef } from '../spec/model.js';
-import { ER_HEAD, ER_ROW, FIELD_PAD, LINE, PAD_X, PAD_Y, typeface } from '../drawio/theme.js';
+import { ER_HEAD, ER_ROW, FIELD_PAD, GROUP_INSET, LINE, PAD_X, PAD_Y, typeface } from '../drawio/theme.js';
 import { TextMeasurer } from './text.js';
 import { ICON_PAD } from '../drawio/icons.js';
+import { polish } from './polish.js';
 /** Crude fallback when no browser is available (tests). */
 export const estimateMeasure = async (reqs) => reqs.map(([t, size, weight]) => Math.ceil(t.length * size * (weight >= 600 ? 0.6 : 0.55)));
 // elkjs is CommonJS; under NodeNext the constructor sits on .default.
@@ -44,12 +45,76 @@ export async function layout(d, measure = estimateMeasure) {
     const labels = d.edges.map((e) => (e.label ? { w: Math.ceil(tm.width(e.label, fonts.edge)) + 10, h: Math.ceil(fonts.edge.size * LINE) + 4 } : undefined));
     const groupMin = new Map(d.groups.map((g) => [g.id, Math.ceil(tm.width(groupText(g.label, d.theme), fonts.group)) + 40]));
     const groupTop = Math.round(8 + fonts.group.size * LINE + 20);
-    const go = (dir) => run(d, dir, sizes, labels, groupMin, groupTop);
+    const groupTitle = new Map(d.groups.map((g) => [g.id, { w: Math.ceil(tm.width(groupText(g.label, d.theme), fonts.group)), h: Math.ceil(fonts.group.size * LINE) }]));
+    const once = async (dir, order, pairs = 'reply') => {
+        let l = { ...(await run(d, dir, sizes, labels, groupMin, groupTop, order, undefined, pairs)), natural };
+        // ER: once the tables are placed, run again with each relationship pinned to
+        // its key rows, on the sides that face each other.
+        const keys = d.type === 'er' ? keyRows(d) : new Map();
+        if (keys.size) {
+            const pins = new Map();
+            for (const [eid, k] of keys) {
+                const e = d.edges.find((x) => x.id === eid);
+                const a = l.nodes.get(e.from), b = l.nodes.get(e.to);
+                const aLeft = a.x + a.w / 2 <= b.x + b.w / 2;
+                const pin = (node, row, east, end) => {
+                    if (row === undefined)
+                        return;
+                    const list = pins.get(node) ?? [];
+                    list.push({ edge: eid, end, row, side: east ? 'EAST' : 'WEST' });
+                    pins.set(node, list);
+                };
+                pin(e.from, k.from, aLeft, 'from');
+                pin(e.to, k.to, !aLeft, 'to');
+            }
+            // Two relationships on one key row would meet at one point and stack their
+            // markers. Spread them across the row, the one from higher up on top.
+            for (const [node, list] of pins) {
+                const rows = new Map();
+                for (const p of list)
+                    rows.set(`${p.side}:${p.row}`, [...(rows.get(`${p.side}:${p.row}`) ?? []), p]);
+                for (const same of rows.values()) {
+                    if (same.length < 2)
+                        continue;
+                    const other = (p) => {
+                        const e = d.edges.find((x) => x.id === p.edge);
+                        const b = l.nodes.get(e.from === node && p.end === 'from' ? e.to : e.from);
+                        return b.y + b.h / 2;
+                    };
+                    same.sort((a, b) => other(a) - other(b));
+                    const step = Math.min(12, Math.floor((ER_ROW - 4) / same.length));
+                    same.forEach((p, i) => (p.dy = Math.round((i - (same.length - 1) / 2) * step)));
+                }
+            }
+            l = { ...(await run(d, dir, sizes, labels, groupMin, groupTop, order, pins, pairs)), natural };
+        }
+        polish(d, l, { groupTitle, titleInset: GROUP_INSET, groupTop });
+        return toPixels(l);
+    };
+    // Spec order first: it keeps a diagram stable as the spec grows. Free ordering
+    // wins only when it crosses fewer edges.
+    const hasPairs = d.edges.some((e, i) => e.from !== e.to && d.edges.slice(0, i).some((x) => x.from === e.to && x.to === e.from));
+    const go = async (dir) => {
+        const tries = [['NODES_AND_EDGES', 'reply'], ['NONE', 'reply']];
+        if (hasPairs)
+            tries.push(['NODES_AND_EDGES', 'call'], ['NONE', 'call']);
+        const all = await Promise.all(tries.map(([o, p]) => once(dir, o, p)));
+        // Fewest crossings; then clearly shorter edges; ties go to the earlier try.
+        return all.reduce((best, l) => {
+            const [cb, cl] = [crossings(best), crossings(l)];
+            if (cl !== cb)
+                return cl < cb ? l : best;
+            return edgeLength(l) < 0.9 * edgeLength(best) ? l : best;
+        });
+    };
     if (d.direction !== 'auto')
-        return { ...(await go(d.direction)), natural };
+        return go(d.direction);
+    // Relationships attach to rows, on a table's sides, so tables read left to right.
+    if (d.type === 'er')
+        return go('LR');
     // Pick the direction whose result fits a document page best.
     const [tb, lr] = await Promise.all([go('TB'), go('LR')]);
-    return { ...(score(tb) <= score(lr) ? tb : lr), natural };
+    return score(tb) <= score(lr) ? tb : lr;
 }
 const groupText = (label, theme) => (typeface(theme).upperGroups ? label.toUpperCase() : label);
 const fieldRight = (f) => {
@@ -101,9 +166,11 @@ function nodeSizes(d, tm, fonts) {
         sizes.set(n.id, { w: snap(Math.max(minW, t.width + 2 * PAD_X + extra)), h: boxHeight(t.lines, fonts, shape) });
     }
     const natural = new Map([...sizes].map(([k, v]) => [k, { ...v }]));
-    // Boxes of nearly the same width read calmer at exactly the same width. Boxes
-    // much wider than the rest keep their own width rather than stretching every box.
-    const uniform = d.nodes.filter((n) => !['start', 'end', 'diamond', 'table'].includes(kindDef(d.type, n.kind).shape));
+    // Boxes of nearly the same width read calmer at exactly the same width: their
+    // edges line up down a column. Tables too, so their key rows' connectors start
+    // at one x. Boxes much wider than the rest keep their own width rather than
+    // stretching every box.
+    const uniform = d.nodes.filter((n) => !['start', 'end', 'diamond'].includes(kindDef(d.type, n.kind).shape));
     const sorted = [...uniform].sort((a, b) => sizes.get(a.id).w - sizes.get(b.id).w);
     let cluster = [];
     const flush = () => {
@@ -113,8 +180,10 @@ function nodeSizes(d, tm, fonts) {
             if (s.w === w)
                 continue;
             s.w = w;
-            // A wider box may fit the text on fewer lines.
+            // A wider box may fit the text on fewer lines. A table's rows don't wrap.
             const shape = kindDef(d.type, n.kind).shape;
+            if (shape === 'table')
+                continue;
             s.h = boxHeight(textOf(n, w - 2 * PAD_X - shapeExtra(shape, !!n.icon)).lines, fonts, shape);
         }
         cluster = [];
@@ -127,7 +196,7 @@ function nodeSizes(d, tm, fonts) {
     flush();
     return { sizes, natural };
 }
-async function run(d, dir, sizes, labels, groupMin, groupTop) {
+async function run(d, dir, sizes, labels, groupMin, groupTop, order, pins = new Map(), pairs = 'reply') {
     const byId = new Map();
     const root = {
         id: '__root',
@@ -138,7 +207,10 @@ async function run(d, dir, sizes, labels, groupMin, groupTop) {
             'elk.edgeRouting': 'ORTHOGONAL',
             'elk.layered.nodePlacement.strategy': 'BRANDES_KOEPF',
             'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
-            'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
+            'elk.layered.considerModelOrder.strategy': order,
+            // Walk from the sources in spec order, so the edge that closes a loop (a retry,
+            // a resume) is the one drawn backwards, not the main path.
+            'elk.layered.cycleBreaking.strategy': 'DEPTH_FIRST',
             'elk.layered.spacing.nodeNodeBetweenLayers': '32',
             'elk.spacing.nodeNode': '40',
             'elk.layered.spacing.edgeNodeBetweenLayers': '12',
@@ -176,15 +248,42 @@ async function run(d, dir, sizes, labels, groupMin, groupTop) {
         const en = { id: n.id, width: s.w, height: s.h };
         if (n.kind === 'start')
             en.layoutOptions = { 'elk.layered.layering.layerConstraint': 'FIRST' };
+        const np = pins.get(n.id);
+        if (np?.length) {
+            en.layoutOptions = { ...en.layoutOptions, 'elk.portConstraints': 'FIXED_POS' };
+            en.ports = np.map((p) => ({
+                id: portId(p),
+                width: 0,
+                height: 0,
+                x: p.side === 'EAST' ? s.w : 0,
+                y: ER_HEAD + p.row * ER_ROW + ER_ROW / 2 + (p.dy ?? 0),
+                layoutOptions: { 'elk.port.side': p.side },
+            }));
+        }
         byId.set(n.id, en);
         byId.get(n.parent ?? '__root').children.push(en);
     }
-    root.edges = d.edges.map((e, i) => ({
-        id: e.id,
-        sources: [e.from],
-        targets: [e.to],
-        labels: labels[i] ? [{ text: e.label, width: labels[i].w, height: labels[i].h }] : [],
-    }));
+    // A reply to an earlier edge (stripe -> api after api -> stripe) is laid out in
+    // the call's direction, so the pair runs side by side instead of one of them
+    // being drawn backwards around everything in between. Its points flip back below.
+    // Which of the two to flip is tried both ways by the caller: flipping the call
+    // puts the other end ahead of the caller, often outside its group.
+    const flipped = new Set();
+    d.edges.forEach((e, i) => {
+        const call = e.from !== e.to ? d.edges.slice(0, i).find((x) => x.from === e.to && x.to === e.from) : undefined;
+        if (call)
+            flipped.add(pairs === 'reply' ? e.id : call.id);
+    });
+    root.edges = d.edges.map((e, i) => {
+        const src = pinFor(pins, e.from, e.id, 'from') ?? e.from, dst = pinFor(pins, e.to, e.id, 'to') ?? e.to;
+        const flip = flipped.has(e.id);
+        return {
+            id: e.id,
+            sources: [flip ? dst : src],
+            targets: [flip ? src : dst],
+            labels: labels[i] ? [{ text: e.label, width: labels[i].w, height: labels[i].h }] : [],
+        };
+    });
     const out = await elk.layout(root);
     const nodes = new Map();
     const groups = new Map();
@@ -204,9 +303,118 @@ async function run(d, dir, sizes, labels, groupMin, groupTop) {
             continue;
         const lab = e.labels?.[0];
         edges.set(e.id, {
-            points: [s.startPoint, ...(s.bendPoints ?? []), s.endPoint].map((p) => ({ x: p.x, y: p.y })),
+            points: (flipped.has(e.id) ? (pts) => pts.reverse() : (pts) => pts)([s.startPoint, ...(s.bendPoints ?? []), s.endPoint].map((p) => ({ x: p.x, y: p.y }))),
             label: lab && lab.x != null ? { x: lab.x, y: lab.y, w: lab.width, h: lab.height } : undefined,
         });
     }
     return { direction: dir, width: out.width, height: out.height, nodes, groups, edges };
 }
+/**
+ * Whole-pixel geometry. ELK centres boxes at fractions of a pixel; draw.io then
+ * rounds the boxes but not the edges, so a straight drop gets 0.1px kinks and
+ * 1px lines blur across two pixels. Sizes are whole already, so rounding every
+ * coordinate keeps each edge end on its box.
+ */
+function toPixels(l) {
+    const rp = (p) => ({ x: Math.round(p.x), y: Math.round(p.y) });
+    const rb = (b) => ({ ...rp(b), w: Math.round(b.w), h: Math.round(b.h) });
+    for (const m of [l.nodes, l.groups])
+        for (const [k, b] of m)
+            m.set(k, rb(b));
+    for (const [k, e] of l.edges)
+        l.edges.set(k, { ...e, points: e.points.map(rp), label: e.label && rb(e.label) });
+    return { ...l, width: Math.ceil(l.width), height: Math.ceil(l.height) };
+}
+/** Proper crossings between edge segments: what a reader has to untangle. */
+export function crossings(l) {
+    const segs = [];
+    for (const [id, e] of l.edges)
+        for (let i = 0; i < e.points.length - 1; i++)
+            segs.push([e.points[i], e.points[i + 1], id]);
+    let n = 0;
+    for (let i = 0; i < segs.length; i++)
+        for (let j = i + 1; j < segs.length; j++) {
+            const [a, b, ea] = segs[i], [c, dd, eb] = segs[j];
+            if (ea === eb)
+                continue;
+            const o = (p, q, r) => Math.sign((q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x));
+            if (o(a, b, c) * o(a, b, dd) < 0 && o(c, dd, a) * o(c, dd, b) < 0)
+                n++;
+        }
+    return n;
+}
+export function edgeLength(l) {
+    let n = 0;
+    for (const e of l.edges.values())
+        for (let i = 1; i < e.points.length; i++)
+            n += Math.abs(e.points[i].x - e.points[i - 1].x) + Math.abs(e.points[i].y - e.points[i - 1].y);
+    return n;
+}
+const portId = (p) => `${p.edge}::${p.end}`;
+const pinFor = (pins, node, edge, end) => {
+    const p = pins.get(node)?.find((x) => x.edge === edge && x.end === end);
+    return p ? portId(p) : undefined;
+};
+/** "addresses" -> "address", "categories" -> "category", "orgs" -> "org". */
+export function singular(word) {
+    const w = word.toLowerCase();
+    if (w.endsWith('ies'))
+        return w.slice(0, -3) + 'y';
+    if (/(ss|x|ch|sh)es$/.test(w))
+        return w.slice(0, -2);
+    if (w.endsWith('s') && !w.endsWith('ss'))
+        return w.slice(0, -1);
+    return w;
+}
+/**
+ * For each ER relationship, the rows its ends attach to: the foreign key on one
+ * table that names the other ("customer_id" -> customers), and that table's
+ * primary key. Relationships with no matching key attach to the table as a whole.
+ */
+export function keyRows(d) {
+    const out = new Map();
+    const byId = new Map(d.nodes.map((n) => [n.id, n]));
+    const pk = (id) => {
+        const i = byId.get(id)?.fields?.findIndex((f) => f.flags.includes('pk')) ?? -1;
+        return i >= 0 ? i : undefined;
+    };
+    const fkTo = (child, parent) => {
+        const p = byId.get(parent);
+        const names = [...new Set([p.id, p.label].map((x) => singular(x.replace(/[\s-]+/g, '_'))))];
+        const fields = byId.get(child)?.fields ?? [];
+        const score = (name) => {
+            const f = name.toLowerCase();
+            for (const n of names) {
+                if (f === `${n}_id` || f === `${n}id`)
+                    return 3;
+                if (f.endsWith(`_${n}_id`) || f.startsWith(`${n}_`))
+                    return 2;
+                if (f.includes(n))
+                    return 1;
+            }
+            return 0;
+        };
+        let best;
+        fields.forEach((f, i) => {
+            if (!f.flags.includes('fk'))
+                return;
+            const s = score(f.name);
+            if (s && (!best || s > best.s))
+                best = { i, s };
+        });
+        return best?.i;
+    };
+    for (const e of d.edges) {
+        if (e.from === e.to)
+            continue;
+        const a = fkTo(e.from, e.to);
+        if (a !== undefined) {
+            out.set(e.id, { from: a, to: pk(e.to) });
+            continue;
+        }
+        const b = fkTo(e.to, e.from);
+        if (b !== undefined)
+            out.set(e.id, { from: pk(e.from), to: b });
+    }
+    return out;
+}