@itsthecsguy/linework 0.1.1 → 0.1.3

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;
+}

package/dist/layout/polish.js

@@ -0,0 +1,281 @@
+import { kindDef } from '../spec/model.js';
+/** Map the layout so the flow runs top to bottom, do the work, map back. */
+function frame(dir) {
+    const to = (p) => (dir === 'TB' ? p : dir === 'BT' ? { x: p.x, y: -p.y } : dir === 'LR' ? { x: p.y, y: p.x } : { x: p.y, y: -p.x });
+    const from = (p) => (dir === 'TB' ? p : dir === 'BT' ? { x: p.x, y: -p.y } : dir === 'LR' ? { x: p.y, y: p.x } : { x: -p.y, y: p.x });
+    const box = (b, f) => {
+        const a = f({ x: b.x, y: b.y }), c = f({ x: b.x + b.w, y: b.y + b.h });
+        return { x: Math.min(a.x, c.x), y: Math.min(a.y, c.y), w: Math.abs(c.x - a.x), h: Math.abs(c.y - a.y) };
+    };
+    return { to, from, boxTo: (b) => box(b, to), boxFrom: (b) => box(b, from) };
+}
+const near = (a, b, tol = 0.5) => Math.abs(a - b) <= tol;
+const vert = (a, b) => near(a.x, b.x);
+const horiz = (a, b) => near(a.y, b.y);
+/** Drop repeated points and points in the middle of a straight run. */
+export function simplify(pts) {
+    const out = [];
+    for (const p of pts) {
+        const last = out[out.length - 1];
+        if (last && near(last.x, p.x) && near(last.y, p.y))
+            continue;
+        const prev = out[out.length - 2];
+        if (prev && last && ((vert(prev, last) && vert(last, p)) || (horiz(prev, last) && horiz(last, p))))
+            out[out.length - 1] = p;
+        else
+            out.push(p);
+    }
+    return out;
+}
+function segHits(a, b, r, pad = 0) {
+    const x0 = Math.min(a.x, b.x), x1 = Math.max(a.x, b.x), y0 = Math.min(a.y, b.y), y1 = Math.max(a.y, b.y);
+    return x1 > r.x - pad && x0 < r.x + r.w + pad && y1 > r.y - pad && y0 < r.y + r.h + pad;
+}
+export function polish(d, l, inp) {
+    const f = frame(l.direction);
+    const shapeOf = (id) => { const n = d.nodes.find((x) => x.id === id); return n ? kindDef(d.type, n.kind).shape : undefined; };
+    const nodes = new Map([...l.nodes].map(([k, b]) => [k, f.boxTo(b)]));
+    // Corners are rounded; an edge leaving inside the arc looks detached.
+    const R = 8;
+    const edges = [];
+    for (const e of d.edges) {
+        const le = l.edges.get(e.id);
+        if (le)
+            edges.push({ id: e.id, from: e.from, to: e.to, pts: le.points.map(f.to), label: !!le.label });
+    }
+    const others = (self) => edges.filter((x) => x !== self);
+    const usedAt = (id, x, skip, side) => others(skip).some((o) => {
+        const p = o.from === id ? o.pts[0] : o.to === id ? o.pts[o.pts.length - 1] : undefined;
+        const b = nodes.get(id);
+        return p && near(p.y, side === 'top' ? b.y : b.y + b.h, 1) && Math.abs(p.x - x) < 10;
+    });
+    // A vertical run no other edge already runs along.
+    const free = (a, b, self) => others(self).every((o) => o.pts.slice(1).every((q, i) => {
+        const p = o.pts[i];
+        // Two labelled runs side by side need room for the labels between them.
+        if (!vert(p, q) || Math.abs(p.x - a.x) > (self.label || o.label ? 44 : 8))
+            return true;
+        return Math.min(Math.max(p.y, q.y), Math.max(a.y, b.y)) - Math.max(Math.min(p.y, q.y), Math.min(a.y, b.y)) <= 0;
+    }));
+    const clear = (a, b, except) => [...nodes].every(([k, r]) => except.includes(k) || !segHits(a, b, r, 6));
+    // Edges out of a decision wait until the decision pass below has picked the
+    // point they leave from; their start stub isn't a route to straighten toward.
+    // Two passes: a jog can be blocked by another edge's stub that the first pass removes.
+    const dejog = (fromDecisions) => {
+        for (let pass = 0; pass < 2; pass++)
+            for (const e of edges) {
+                // Tables keep their edges on the key rows.
+                if (e.from === e.to || shapeOf(e.from) === 'table' || shapeOf(e.to) === 'table')
+                    continue;
+                if ((shapeOf(e.from) === 'diamond') !== fromDecisions)
+                    continue;
+                const s = nodes.get(e.from), t = nodes.get(e.to);
+                let p = simplify(e.pts);
+                // Start: p0 on the box, a short leg, a jog sideways, then the real run.
+                for (let guard = 0; guard < 2 && p.length >= 4; guard++) {
+                    const [p0, p1, p2] = [p[0], p[1], p[2]];
+                    const side = near(p0.y, s.y + s.h, 1) ? 'bottom' : near(p0.y, s.y, 1) ? 'top' : undefined;
+                    if (!side || !vert(p0, p1) || !horiz(p1, p2) || shapeOf(e.from) === 'diamond')
+                        break;
+                    const p3 = p[3], np = { x: p2.x, y: p0.y };
+                    // Only a short leg is a jog; a long one is the route itself.
+                    // The run p2-p3 is already there; only the piece added at the box is new.
+                    if (!vert(p2, p3) || !free(np, p2, e))
+                        break;
+                    if (p2.x < s.x + R || p2.x > s.x + s.w - R || usedAt(e.from, p2.x, e, side) || !clear(np, p3, [e.from, e.to]))
+                        break;
+                    p = simplify([np, ...p.slice(3)]);
+                }
+                // End: the mirror image.
+                for (let guard = 0; guard < 2 && p.length >= 4; guard++) {
+                    const n = p.length;
+                    const [q0, q1, q2] = [p[n - 1], p[n - 2], p[n - 3]];
+                    const side = near(q0.y, t.y, 1) ? 'top' : near(q0.y, t.y + t.h, 1) ? 'bottom' : undefined;
+                    if (!side || !vert(q0, q1) || !horiz(q1, q2) || shapeOf(e.to) === 'diamond')
+                        break;
+                    const q3 = p[n - 4], nq = { x: q2.x, y: q0.y };
+                    if (!vert(q3, q2) || !free(q2, nq, e))
+                        break;
+                    if (q2.x < t.x + R || q2.x > t.x + t.w - R || usedAt(e.to, q2.x, e, side) || !clear(q3, nq, [e.from, e.to]))
+                        break;
+                    p = simplify([...p.slice(0, n - 3), nq]);
+                }
+                e.pts = p;
+            }
+    };
+    dejog(false);
+    // A Z between boxes that overlap side to side (down, across, down) can be one
+    // straight drop through the overlap.
+    for (const e of edges) {
+        if (e.from === e.to || [e.from, e.to].some((id) => ['table', 'diamond'].includes(shapeOf(id) ?? '')))
+            continue;
+        const p = simplify(e.pts);
+        if (p.length !== 4)
+            continue;
+        const s = nodes.get(e.from), t = nodes.get(e.to);
+        const [a, b, c, z] = p;
+        if (!vert(a, b) || !horiz(b, c) || !vert(c, z) || !near(a.y, s.y + s.h, 1) || !near(z.y, t.y, 1))
+            continue;
+        const lo = Math.max(s.x, t.x) + R, hi = Math.min(s.x + s.w, t.x + t.w) - R;
+        if (hi < lo)
+            continue;
+        const x = Math.round(Math.min(hi, Math.max(lo, (a.x + z.x) / 2)));
+        const top = { x, y: a.y }, bot = { x, y: z.y };
+        if (usedAt(e.from, x, e, 'bottom') || usedAt(e.to, x, e, 'top') || !clear(top, bot, [e.from, e.to]) || !free(top, bot, e))
+            continue;
+        e.pts = [top, bot];
+        const le = l.edges.get(e.id);
+        if (le.label) {
+            const lb = f.boxTo(le.label);
+            le.label = f.boxFrom({ ...lb, x: x - lb.w / 2, y: (top.y + bot.y) / 2 - lb.h / 2 });
+        }
+    }
+    // Decisions: leave from the diamond's bottom or side points, enter at the top point.
+    for (const n of d.nodes) {
+        if (kindDef(d.type, n.kind).shape !== 'diamond')
+            continue;
+        const b = nodes.get(n.id);
+        const cx = b.x + b.w / 2, cy = b.y + b.h / 2;
+        const outs = edges.filter((e) => e.from === n.id && e.to !== n.id);
+        // The run each edge settles into once it is clear of the diamond.
+        const runX = (e) => {
+            const p = e.pts;
+            for (let i = 1; i < p.length - 1; i++)
+                if (vert(p[i], p[i + 1]) && p[i + 1].y > b.y + b.h + 1)
+                    return p[i].x;
+            return p[p.length - 1].x;
+        };
+        const tail = (e) => {
+            // Points from the start of that run on.
+            const p = e.pts;
+            for (let i = 1; i < p.length - 1; i++)
+                if (vert(p[i], p[i + 1]) && p[i + 1].y > b.y + b.h + 1)
+                    return p.slice(i);
+            return p.slice(-1);
+        };
+        const sorted = [...outs].sort((a, c) => runX(a) - runX(c));
+        let bottomTaken = false;
+        // The edge closest to straight down gets the bottom point.
+        const straight = sorted.reduce((m, e) => (!m || Math.abs(runX(e) - cx) < Math.abs(runX(m) - cx) ? e : m), undefined);
+        for (const e of sorted) {
+            const x = runX(e), rest = tail(e);
+            const bottom = { x: cx, y: b.y + b.h };
+            if (e === straight && Math.abs(x - cx) < 12) {
+                e.pts = simplify([bottom, { x: cx, y: rest[0].y }, ...rest.slice(1)].map((pt, i) => (i === 1 ? pt : pt)));
+                if (rest.length && !near(rest[0].x, cx))
+                    e.pts = simplify([bottom, { x: cx, y: rest[0].y }, ...rest]);
+                bottomTaken = true;
+                continue;
+            }
+            const left = x < cx;
+            const sideP = { x: left ? b.x : b.x + b.w, y: cy };
+            const corner = { x, y: cy };
+            const sideOk = (left ? x < b.x - 10 : x > b.x + b.w + 10) && clear(sideP, corner, [n.id]) && clear(corner, rest[0], [n.id, e.to]);
+            if (sideOk) {
+                e.pts = simplify([sideP, corner, ...rest]);
+                continue;
+            }
+            // Branches that both head down fork from the bottom point on a short stem.
+            const y = Math.min(rest[0].y, b.y + b.h + 16);
+            e.pts = simplify([bottom, { x: cx, y }, { x, y }, ...rest]);
+            bottomTaken = true;
+        }
+        for (const e of edges.filter((x) => x.to === n.id && x.from !== n.id)) {
+            const p = e.pts, m = p.length;
+            const last = p[m - 1], prev = p[m - 2];
+            if (!prev || !vert(prev, last) || prev.y > last.y || near(last.x, cx)) {
+                if (prev && vert(prev, last) && prev.y <= last.y)
+                    e.pts[m - 1] = { x: cx, y: b.y };
+                continue;
+            }
+            const y = Math.max(prev.y, b.y - 16);
+            e.pts = simplify([...p.slice(0, m - 1), { x: last.x, y }, { x: cx, y }, { x: cx, y: b.y }]);
+        }
+    }
+    dejog(true);
+    // Self-loops: wide enough to read as a loop, label outside it.
+    for (const e of edges) {
+        if (e.from !== e.to)
+            continue;
+        const b = nodes.get(e.from), le = l.edges.get(e.id);
+        const ys = [b.y + b.h * 0.28, b.y + b.h * 0.72];
+        const pts = e.pts;
+        const leftSide = pts.some((p) => p.x < b.x - 1);
+        const xo = leftSide ? b.x - 24 : b.x + b.w + 24;
+        const edgeX = leftSide ? b.x : b.x + b.w;
+        e.pts = [{ x: edgeX, y: ys[0] }, { x: xo, y: ys[0] }, { x: xo, y: ys[1] }, { x: edgeX, y: ys[1] }];
+        if (le.label) {
+            const lb = f.boxTo(le.label);
+            le.label = f.boxFrom({ ...lb, x: leftSide ? xo - 6 - lb.w : xo + 6, y: b.y + b.h / 2 - lb.h / 2 });
+        }
+    }
+    for (const e of edges) {
+        const le = l.edges.get(e.id);
+        le.points = e.pts.map(f.from);
+    }
+    // A one-column group is only as wide as its node, so an edge dropping into the
+    // node's middle crosses the title. ELK ignores a minimum size on groups it lays
+    // out with their children, so widen them here: evenly to both sides, when the
+    // added strips hold nothing else.
+    const owner = new Map([...d.groups.map((g) => [g.id, g.parent]), ...d.nodes.map((n) => [n.id, n.parent])]);
+    const within = (id, gid) => !!id && (id === gid || within(owner.get(id), gid));
+    const depth = (gid) => { let k = 0; for (let p = owner.get(gid); p; p = owner.get(p))
+        k++; return k; };
+    for (const gid of [...l.groups.keys()].sort((a, b) => depth(b) - depth(a))) {
+        const g = l.groups.get(gid), tt = inp.groupTitle.get(gid);
+        if (!tt)
+            continue;
+        const half = Math.ceil((2 * (tt.w + inp.titleInset + 10) - g.w) / 2);
+        if (half <= 0)
+            continue;
+        const strips = [{ x: g.x - half, y: g.y, w: half, h: g.h }, { x: g.x + g.w, y: g.y, w: half, h: g.h }];
+        const hits = (r) => strips.some((s) => r.x < s.x + s.w + 8 && r.x + r.w > s.x - 8 && r.y < s.y + s.h && r.y + r.h > s.y);
+        const parent = owner.get(gid) ? l.groups.get(owner.get(gid)) : undefined;
+        const fits = (!parent || (g.x - half >= parent.x + 8 && g.x + g.w + half <= parent.x + parent.w - 8)) &&
+            [...l.nodes].every(([id, b]) => within(id, gid) || !hits(b)) &&
+            [...l.groups].every(([id, b]) => id === gid || within(id, gid) || within(gid, id) || !hits(b)) &&
+            [...l.edges.values()].every((le) => le.points.slice(1).every((q, i) => strips.every((s) => !segHits(le.points[i], q, s))));
+        if (fits)
+            l.groups.set(gid, { ...g, x: g.x - half, w: g.w + 2 * half });
+    }
+    // Keep the drawing clear of the canvas edge after widening.
+    const left = Math.min(...[...l.groups.values(), ...l.nodes.values()].map((b) => b.x));
+    if (left < 16) {
+        const dx = 16 - left;
+        const mv = (b) => ({ ...b, x: b.x + dx });
+        for (const m of [l.nodes, l.groups])
+            for (const [k, b] of m)
+                m.set(k, mv(b));
+        for (const le of l.edges.values()) {
+            le.points = le.points.map((p) => ({ ...p, x: p.x + dx }));
+            if (le.label)
+                le.label = mv(le.label);
+        }
+    }
+    l.width = Math.max(l.width, ...[...l.groups.values(), ...l.nodes.values()].map((b) => b.x + b.w + 16));
+    // Group titles: slide a title right when an edge runs through it.
+    for (const [gid, g] of l.groups) {
+        const tt = inp.groupTitle.get(gid);
+        if (!tt)
+            continue;
+        const segs = [...l.edges.values()].flatMap((le) => le.points.slice(1).map((p, i) => [le.points[i], p]));
+        const blocked = (x) => {
+            const r = { x: g.x + x - 6, y: g.y + 4, w: tt.w + 12, h: Math.min(inp.groupTop, tt.h + 14) };
+            return segs.some(([a, b]) => segHits(a, b, r));
+        };
+        if (!blocked(inp.titleInset))
+            continue;
+        // The other top corner reads as a choice; a title halfway along reads as an accident.
+        const right = Math.floor(g.w - tt.w - inp.titleInset);
+        if (right > inp.titleInset && !blocked(right)) {
+            (l.titleInset ??= new Map()).set(gid, right);
+            continue;
+        }
+        for (let x = inp.titleInset + 8; x + tt.w + 14 <= g.w; x += 8) {
+            if (!blocked(x)) {
+                (l.titleInset ??= new Map()).set(gid, x);
+                break;
+            }
+        }
+    }
+}

package/dist/layout/sequence.js

@@ -1,6 +1,6 @@
 import { fontsFor } from './layout.js';
 import { TextMeasurer } from './text.js';
-import { LINE, PAD_X, PAD_Y, activationStyle, frameStyle, guardStyle, lifelineStyle, messageStyle, nodeLabel, noteStyle, palette, separatorStyle } from '../drawio/theme.js';
+import { FRAME_TAB_INSET, FRAME_TAB_X, FRAME_TAB_Y, LINE, PAD_X, PAD_Y, activationStyle, frameStyle, guardStyle, lifelineStyle, messageStyle, nodeLabel, noteStyle, palette, separatorStyle } from '../drawio/theme.js';
 import { autoAttr, diagramMeta, lookAttrs } from '../drawio/write.js';
 const TOP = 24, BAR_W = 10, NOTE_W = 220;
 /**
@@ -230,12 +230,15 @@ export async function sequenceScene(d, measure, opts = {}) {
         const fx2 = cx(parts[hi].id) + Math.max(80, headW[hi] / 2 + 16) - inset;
         const fy = rows[f.start].y - 4, fy2 = rows[f.end].y;
         vertices.push({ id: f.id, parent: '1', attrs: { label: f.op, aiviz_type: 'frame', aiviz_frame: f.op }, style: frameStyle(theme), box: { x: fx, y: fy, w: fx2 - fx, h: fy2 - fy } });
+        // The first guard shares a line with the operator tab beside it.
+        const tabMid = fy + FRAME_TAB_INSET + FRAME_TAB_Y + (fonts.group.size * LINE) / 2;
+        const guardH = Math.max(22, edgeLine + 6);
         const guard = (when, gy, k) => {
             if (!when)
                 return;
             // Start right of the operator label, then step past any lifeline the text would cover.
             const gw = Math.max(80, Math.ceil(tm.width(`[${when}]`, fonts.edge)) + 16);
-            let gx = fx + 10 + Math.ceil(tm.width(f.op, fonts.group)) + 8;
+            let gx = fx + FRAME_TAB_INSET + 2 * FRAME_TAB_X + Math.ceil(tm.width(f.op, fonts.group)) + 10;
             for (const c of [...parts.map((p) => cx(p.id))].sort((a, b) => a - b))
                 if (c + BAR_W / 2 + 4 > gx && c - BAR_W / 2 - 4 < gx + gw)
                     gx = c + BAR_W / 2 + 6;
@@ -244,10 +247,10 @@ export async function sequenceScene(d, measure, opts = {}) {
                 parent: '1',
                 attrs: { label: `[${when}]`, aiviz_type: 'guard', aiviz_guard: `${f.id}:${k}` },
                 style: guardStyle(theme),
-                box: { x: gx, y: gy, w: gw, h: Math.max(22, edgeLine + 6) },
+                box: { x: gx, y: gy, w: gw, h: guardH },
             });
         };
-        guard(f.whens[0], fy, 0);
+        guard(f.whens[0], Math.round(tabMid - guardH / 2), 0);
         f.seps.forEach((s, k) => {
             const sy = rows[s].y + 4;
             edges.push({

package/dist/lint/check.js

@@ -158,7 +158,12 @@ export function check(cells) {
                     if (segsCross(a[s], a[s + 1], b[t], b[t + 1]))
                         crossings++;
         }
-    const real = nodes.filter((n) => n.box.w > 30 || n.box.h > 30);
+    // A table's field rows are parts of one node, not nodes of their own.
+    const isRow = (n) => {
+        const p = n.parent ? byId.get(n.parent) : undefined;
+        return !!p && p.shape === 'swimlane';
+    };
+    const real = nodes.filter((n) => (n.box.w > 30 || n.box.h > 30) && !isRow(n));
     if (real.length > 20)
         findings.push({ level: 'warning', rule: 'too-big', message: `${real.length} nodes; consider splitting into two diagrams` });
     if (crossings > Math.max(3, edges.length / 3))

package/dist/spec/model.js

@@ -36,7 +36,9 @@ export const KINDS = {
         person: { shape: 'box', color: 'pink', description: 'a human actor' },
         client: { shape: 'box', color: 'blue', description: 'browser, mobile app, CLI' },
         function: { shape: 'box', color: 'violet', dashed: true, description: 'serverless function or job' },
-        database: { shape: 'box', color: 'green', description: 'database or cache' },
+        database: { shape: 'box', color: 'green', description: 'relational or document database' },
+        cache: { shape: 'box', color: 'green', description: 'Redis, Memcached, CDN cache' },
+        storage: { shape: 'box', color: 'green', description: 'object or file storage' },
         queue: { shape: 'box', color: 'amber', description: 'queue, topic or event stream' },
         external: { shape: 'box', color: 'gray', dashed: true, description: 'third-party system' },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itsthecsguy/linework",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Software diagrams an AI can write and a person can edit. YAML spec in, .drawio.svg out, editable in draw.io.",
   "keywords": [
     "diagram",