@itsthecsguy/linework 0.1.2 → 0.1.4

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/lint/fixlabels.js

@@ -42,14 +42,19 @@ export function runSpots(pts, label) {
 function labelEdges(findings) {
     return [...new Set(findings.filter((f) => LABEL_RULES.has(f.rule) && f.labelEdges).flatMap((f) => f.labelEdges))];
 }
+/**
+ * Returns the fixed XML and its cells. Only label backgrounds change after the
+ * cells are read, and those don't move anything, so the cells stay valid for it.
+ */
 export async function fixLabels(b, xml, maxRounds = 6) {
     let cur = xml;
-    let score = check(await b.inspect(cur)).findings.filter((f) => LABEL_RULES.has(f.rule)).length;
+    const labelScore = (cells) => check(cells).findings.filter((f) => LABEL_RULES.has(f.rule)).length;
+    let score = labelScore(await b.inspect(cur));
     let moved = 0;
     for (let round = 0; round < maxRounds && score > 0; round++) {
+        // The cells of `cur`, kept current as labels move: a move changes only that label's box.
         const cells = await b.inspect(cur);
-        const res = check(cells);
-        const targets = labelEdges(res.findings);
+        const targets = labelEdges(check(cells).findings);
         let improved = false;
         for (const id of targets) {
             const doc = new DOMParser().parseFromString(cur, 'text/xml');
@@ -59,19 +64,21 @@ export async function fixLabels(b, xml, maxRounds = 6) {
             const base = Number(g.getAttribute('x') ?? 0);
             const cell = cells.find((c) => c.id === id);
             const spots = cell?.points && cell.textBox ? runSpots(cell.points, cell.textBox) : [];
-            const tries = [...spots, ...OFFSETS.map((off) => Math.max(-0.9, Math.min(0.9, base + off)))];
+            const tries = [...spots, ...OFFSETS.map((off) => Math.max(-0.9, Math.min(0.9, base + off)))].map((x) => Number(x.toFixed(3)));
+            const boxes = await b.labelBoxes(cur, id, tries);
             let best;
-            for (const x of tries) {
-                g.setAttribute('x', x.toFixed(3));
-                const candidate = new XMLSerializer().serializeToString(doc);
-                const s = check(await b.inspect(candidate)).findings.filter((f) => LABEL_RULES.has(f.rule)).length;
+            for (let i = 0; i < tries.length; i++) {
+                const s = labelScore(cells.map((c) => (c.id === id ? { ...c, textBox: boxes[i] } : c)));
                 if (s < (best?.score ?? score))
-                    best = { xml: candidate, score: s };
+                    best = { x: tries[i], score: s, box: boxes[i] };
                 if (s === 0)
                     break;
             }
             if (best) {
-                cur = best.xml;
+                g.setAttribute('x', best.x.toFixed(3));
+                cur = new XMLSerializer().serializeToString(doc);
+                if (cell)
+                    cell.textBox = best.box;
                 score = best.score;
                 moved++;
                 improved = true;
@@ -82,16 +89,17 @@ export async function fixLabels(b, xml, maxRounds = 6) {
         if (!improved)
             break;
     }
-    cur = await matchLabelBackgrounds(b, cur);
-    return { xml: cur, moved };
+    const cells = await b.inspect(cur);
+    cur = await matchLabelBackgrounds(b, cur, cells);
+    return { xml: cur, moved, cells };
 }
 /**
  * A label's backing has to match what it sits on: the fill of the smallest group
  * under it, or the canvas. Run after labels move, since a move can carry a label
  * from the canvas onto a group or back.
  */
-export async function matchLabelBackgrounds(b, xml) {
-    const cells = await b.inspect(xml);
+export async function matchLabelBackgrounds(b, xml, known) {
+    const cells = known ?? (await b.inspect(xml));
     const doc = new DOMParser().parseFromString(xml, 'text/xml');
     const canvas = doc.getElementsByTagName('mxGraphModel')[0]?.getAttribute('background') ?? '#FFFFFF';
     const styleOf = new Map();

package/dist/render/browser.js

@@ -5,10 +5,10 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createRequire } from 'node:module';
+import http from 'node:http';
 import { chromium } from 'playwright-core';
 import { FONT_STACK } from '../drawio/theme.js';
 import { FACES, embedFonts, fontFaceCss, fontsDir } from './fonts.js';
-const ORIGIN = 'http://aiviz.local';
 export function assetsDir() {
     // dist/render/browser.js or src/render/browser.ts -> <pkg>/assets/drawio
     let dir = path.dirname(fileURLToPath(import.meta.url));
@@ -90,6 +90,23 @@ window.aiviz = {
   hasStencil: function (name) {
     return mxStencilRegistry.getStencil(name) != null;
   },
+  // Where an edge's label lands at each of several positions along the edge
+  // (draw.io's -1..1 x). Moving a label changes nothing else in the diagram, so
+  // one decode serves every candidate instead of one full inspect per try.
+  labelBoxes: function (xml, id, xs) {
+    return withGraph(xml, function (graph) {
+      var model = graph.getModel(), cell = model.getCell(id);
+      if (!cell) return xs.map(function () { return null; });
+      return xs.map(function (x) {
+        var g = cell.geometry.clone();
+        g.x = x;
+        model.setGeometry(cell, g);
+        var st = graph.view.getState(cell);
+        var tb = st && st.text && st.text.boundingBox;
+        return tb ? { x: tb.x, y: tb.y, w: tb.width, h: tb.height } : null;
+      });
+    });
+  },
   inspect: function (xml) {
     return withGraph(xml, function (graph) {
       var model = graph.getModel(), out = [];
@@ -127,38 +144,34 @@ const TYPES = { '.js': 'text/javascript', '.css': 'text/css', '.html': 'text/htm
 export class DrawioBrowser {
     browser;
     page;
-    constructor(browser, page) {
+    server;
+    constructor(browser, page, server) {
         this.browser = browser;
         this.page = page;
+        this.server = server;
     }
     static async launch(opts = {}) {
-        const browser = await launchChromium();
-        const page = await browser.newPage({ deviceScaleFactor: opts.scale ?? 2 });
-        const dir = assetsDir();
-        const fonts = fontsDir();
-        const html = host();
-        await page.route(`${ORIGIN}/**`, async (route) => {
-            const url = new URL(route.request().url());
-            if (url.pathname === '/' || url.pathname === '/host.html')
-                return route.fulfill({ status: 200, contentType: 'text/html', body: html });
-            if (url.pathname.startsWith('/aiviz-fonts/')) {
-                const f = FACES.find((x) => `/aiviz-fonts/${x.file}` === url.pathname);
-                return f ? route.fulfill({ status: 200, contentType: 'font/woff2', body: fs.readFileSync(path.join(fonts, f.file)) }) : route.fulfill({ status: 404, body: '' });
-            }
-            const file = path.join(dir, path.normalize(url.pathname));
-            if (!file.startsWith(dir) || !fs.existsSync(file))
-                return route.fulfill({ status: 404, body: '' });
-            return route.fulfill({ status: 200, contentType: TYPES[path.extname(file)] ?? 'application/octet-stream', body: fs.readFileSync(file) });
-        });
-        // Nothing else may load: keeps rendering offline and deterministic.
-        await page.route(/^(?!http:\/\/aiviz\.local\/).*/, (route) => route.abort());
-        await page.goto(`${ORIGIN}/host.html`);
-        await page.waitForFunction(() => window.ready === true, null, { timeout: 30000 });
-        // Measuring before a font loads would size every box for the fallback font.
-        const ok = await page.evaluate((faces) => Promise.all(faces.map((f) => document.fonts.load(`${f.weight} 16px "${f.family}"`).then((r) => r.length > 0))), FACES.map(({ family, weight }) => ({ family, weight })));
-        if (ok.includes(false))
-            throw new Error('linework: bundled fonts failed to load (assets/fonts). Reinstall linework.');
-        return new DrawioBrowser(browser, page);
+        // Chromium starts while the asset server binds.
+        const [browser, server] = await Promise.all([launchChromium(), serveAssets()]);
+        const origin = `http://127.0.0.1:${server.address().port}`;
+        try {
+            const page = await browser.newPage({ deviceScaleFactor: opts.scale ?? 2 });
+            // Nothing else may load: keeps rendering offline and deterministic.
+            const own = new RegExp(`^${origin.replace(/[.]/g, '\\.')}/`);
+            await page.route((url) => !own.test(url.href), (route) => route.abort());
+            await page.goto(`${origin}/host.html`);
+            await page.waitForFunction(() => window.ready === true, null, { timeout: 30000 });
+            // Measuring before a font loads would size every box for the fallback font.
+            const ok = await page.evaluate((faces) => Promise.all(faces.map((f) => document.fonts.load(`${f.weight} 16px "${f.family}"`).then((r) => r.length > 0))), FACES.map(({ family, weight }) => ({ family, weight })));
+            if (ok.includes(false))
+                throw new Error('linework: bundled fonts failed to load (assets/fonts). Reinstall linework.');
+            return new DrawioBrowser(browser, page, server);
+        }
+        catch (e) {
+            await browser.close().catch(() => { });
+            server.close();
+            throw e;
+        }
     }
     measure(reqs) {
         return this.page.evaluate((r) => window.aiviz.measure(r), reqs);
@@ -182,12 +195,63 @@ export class DrawioBrowser {
     hasStencil(name) {
         return this.page.evaluate((n) => window.aiviz.hasStencil(n), name);
     }
+    // inspect is a pure function of the XML, and a build asks about the same XML
+    // more than once (lint, label fixing, the final check).
+    seen = new Map();
     inspect(xml) {
-        return this.page.evaluate((x) => window.aiviz.inspect(x), xml);
+        let hit = this.seen.get(xml);
+        if (!hit) {
+            hit = this.page.evaluate((x) => window.aiviz.inspect(x), xml);
+            hit.catch(() => this.seen.delete(xml));
+            if (this.seen.size >= 8)
+                this.seen.delete(this.seen.keys().next().value);
+            this.seen.set(xml, hit);
+        }
+        // Callers may change the cells; each gets its own copy.
+        return hit.then((cells) => structuredClone(cells));
     }
-    close() {
-        return this.browser.close();
+    /** Label boxes for edge `id` with its label at each draw.io position in `xs`. */
+    labelBoxes(xml, id, xs) {
+        return this.page.evaluate(([x, i, p]) => window.aiviz.labelBoxes(x, i, p), [xml, id, xs]);
     }
+    async close() {
+        await this.browser.close();
+        this.server.closeAllConnections();
+        this.server.close();
+    }
+}
+/**
+ * The draw.io runtime is 16MB of script. Served from a local port, Chromium reads
+ * it straight off the socket; through Playwright's request interception every
+ * byte would cross the DevTools protocol first.
+ */
+function serveAssets() {
+    const dir = assetsDir();
+    const fonts = fontsDir();
+    const html = host();
+    const send = (res, status, type, body) => {
+        res.writeHead(status, { 'content-type': type, 'cache-control': 'no-store' });
+        res.end(body);
+    };
+    const server = http.createServer((req, res) => {
+        const pathname = new URL(req.url ?? '/', 'http://x').pathname;
+        if (pathname === '/' || pathname === '/host.html')
+            return send(res, 200, 'text/html', html);
+        if (pathname.startsWith('/aiviz-fonts/')) {
+            const f = FACES.find((x) => `/aiviz-fonts/${x.file}` === pathname);
+            return f ? send(res, 200, 'font/woff2', fs.readFileSync(path.join(fonts, f.file))) : send(res, 404, 'text/plain', '');
+        }
+        const file = path.join(dir, path.normalize(decodeURIComponent(pathname)));
+        if (!file.startsWith(dir + path.sep) || !fs.existsSync(file) || !fs.statSync(file).isFile())
+            return send(res, 404, 'text/plain', '');
+        send(res, 200, TYPES[path.extname(file)] ?? 'application/octet-stream', fs.readFileSync(file));
+    });
+    // A server that's only waiting on a browser that already exited shouldn't keep node alive.
+    server.unref();
+    return new Promise((resolve, reject) => {
+        server.once('error', reject);
+        server.listen(0, '127.0.0.1', () => resolve(server));
+    });
 }
 /** Playwright-core's own installer, so the Chromium build always matches the version we run. */
 export function browserInstallCommand() {