reladraw 0.5.0 → 0.7.0

package/dist/render.js

@@ -1,4 +1,4 @@
-import { ARROW_MARKER_WIDTH, ATTACH_MARGIN, ATTACH_STEP, DECK_STEP, DEFAULT_FONT_SIZE, ICON_LINES, LINE_WIDTH, PAD, fontSizeFor, textExtent, textStyleFor, widestLine, } from './constants.js';
+import { ARROW_LENGTH, ARROW_MARKER_WIDTH, ATTACH_MARGIN, ATTACH_STEP, DECK_STEP, DEFAULT_FONT_SIZE, ICON_LINES, PAD, SEPARATION_GAP, arrowLength, fontSizeFor, textExtent, textStyleFor, widestLine, } from './constants.js';
 import { describeAxis } from './ast.js';
 import { SourceError } from './errors.js';
 import { ICON_STROKE } from './icons.js';
@@ -34,11 +34,34 @@ export function render(layout, options = {}) {
     // is ordered by where its ends turned out to be.
     const ends = planEndpoints(layout.edges, measurer, fontSize);
     const corridors = planCorridors(layout.edges, ends, measurer, fontSize);
+    const routes = planRoutes(layout.edges, layout.nodes, ends, measurer, fontSize);
+    planLoops(layout.edges, layout.nodes, ends, corridors, routes, measurer, fontSize);
     aimFreeEnds(layout.edges, ends, corridors);
-    for (const edge of layout.edges) {
-        const drawn = drawEdge(edge, ends.get(edge), corridors.get(edge), theme, measurer, fontSize, layout.markup);
-        body.push(drawn.svg);
-        ink = union(ink, grow(drawn.ink, layout.margin));
+    const drawn = layout.edges.map((edge) => drawEdge(edge, ends.get(edge), corridors.get(edge), routes.get(edge), layout.nodes, theme, measurer, fontSize, layout.markup));
+    // A line with a `crossing:` style is cut where it crosses an earlier one, and
+    // the jump drawn over the cut. The cut is a mask rather than a break in the
+    // path, so it works the same on a curve as on a corner, and leaves whatever
+    // lies underneath — a container's fill — showing through the gap.
+    const crossings = findCrossings(drawn);
+    const masks = [];
+    for (const edge of drawn) {
+        const found = crossings.get(edge);
+        const parts = [edge.line, ...edge.rest];
+        if (found) {
+            const id = `cut-${masks.length + 1}`;
+            masks.push({ id, holes: found });
+            parts[0] = edge.line.replace(/\/>$/, ` mask="url(#${id})"/>`);
+            const jumps = found
+                .map((crossing) => jumpAt(crossing, edge.edge.look.crossing))
+                .filter((d) => d !== undefined)
+                .map((d) => `  <path d="${d}" fill="none"${edge.stroke}/>`);
+            parts.splice(1, 0, ...jumps);
+            for (const crossing of found) {
+                edge.ink = union(edge.ink, grow(extentOfPoints([crossing.at]), crossing.reach + edge.edge.look.thickness));
+            }
+        }
+        body.push(linked(parts.join('\n'), edge.edge.attrs['url']));
+        ink = union(ink, grow(edge.ink, layout.margin));
     }
     // An edge's geometry is measured rather than solved for, so the resolver sized
     // the canvas from the boxes alone. A curve out of a `top` side, or a text
@@ -55,6 +78,15 @@ export function render(layout, options = {}) {
         `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}" viewBox="${canvas.x} ${canvas.y} ${canvas.width} ${canvas.height}" font-family=${quote(measurer.fontFamily)} font-size="${fontSize}px">`,
         '  <defs>',
         ...[...arrowColors].map((color) => arrowMarker(color)),
+        // Each mask covers the whole page, in page units: the default region is the
+        // line's own bounding box, which a straight level line gives no height, and
+        // the line would vanish entirely.
+        ...masks.map(({ id, holes }) => [
+            `    <mask id="${id}" maskUnits="userSpaceOnUse" x="${canvas.x}" y="${canvas.y}" width="${canvas.width}" height="${canvas.height}">`,
+            `      <rect x="${canvas.x}" y="${canvas.y}" width="${canvas.width}" height="${canvas.height}" fill="white"/>`,
+            ...holes.map((hole) => `      <circle cx="${round(hole.at.x)}" cy="${round(hole.at.y)}" r="${round(hole.reach)}" fill="black"/>`),
+            '    </mask>',
+        ].join('\n')),
         '  </defs>',
         `  <rect x="${canvas.x}" y="${canvas.y}" width="${canvas.width}" height="${canvas.height}" fill="${theme.background}"/>`,
         ...body,
@@ -252,16 +284,17 @@ function drawIcon(icon, x, y, side, theme) {
         '  </g>',
     ].join('\n');
 }
-// --- edges -------------------------------------------------------------------
-function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
+function drawEdge(edge, ends, corridor, route, nodes, theme, measurer, fontSize, markup) {
     const { start, end } = ends;
     const color = lineOf(edge.appearance, theme.edge);
+    const stroke = strokeOf(color, edge.look);
     const markerEnd = ` marker-end="url(#${markerId(color)})"`;
     const markerStart = edge.both ? ` marker-start="url(#${markerId(color)}-back)"` : '';
     // A named side is a statement about how the line should leave or arrive, so
     // it is drawn as a curve that actually does leave and arrive that way. With
     // neither side named there is nothing to honor and the line stays straight.
     const curved = start.side !== undefined || end.side !== undefined;
+    const bowed = ends.bow !== undefined && (ends.bow.x !== 0 || ends.bow.y !== 0);
     const parts = [];
     // What the line actually covers, so the canvas can be sized to hold it. A
     // curve leaving a `top` side rides above every box in the drawing, and the
@@ -269,10 +302,33 @@ function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
     let ink = extentOfPoints([start, end]);
     let midX;
     let midY;
-    if (corridor) {
+    const jointed = edge.look.path !== 'curved' && (route || corridor || curved || bowed);
+    if (jointed) {
+        // `path: square` and `path: straight` are the same fixed points — the ends,
+        // which way each faces, the run a clause asked for — joined by a different
+        // rule, and both come out as straight pieces meeting at corners.
+        const textWidth = edge.lines === undefined
+            ? 0
+            : widestLine(edge.lines, measurer, fontSizeFor('edge', edge.textAttrs, fontSize, edge.line));
+        const plan = jointedLine(edge, ends, corridor, route, nodes, textWidth);
+        const d = edge.look.corners === 'rounded'
+            ? roundedPath(plan.points, arrowLength(edge.look.thickness))
+            : sharpPath(plan.points);
+        parts.push(`  <path d="${d}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
+        ink = union(ink, extentOfPoints(plan.points));
+        midX = plan.mid.x;
+        midY = plan.mid.y;
+    }
+    else if (route) {
+        parts.push(`  <path d="${roundedPath(route.points)}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
+        ink = union(ink, extentOfPoints(route.points));
+        midX = route.mid.x;
+        midY = route.mid.y;
+    }
+    else if (corridor) {
         const path = corridorPath(start, end, corridor);
         ink = union(ink, path.ink);
-        parts.push(`  <path d="${path.d}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <path d="${path.d}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
         // The text goes on the straight run rather than at the midpoint of the
         // whole path, so it sits in the gap the author asked the line to travel.
         midX = path.mid.x;
@@ -289,13 +345,13 @@ function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
         const by = (ends.bow?.y ?? 0) * lift;
         const c1 = { x: start.x + start.tx * reach + bx, y: start.y + start.ty * reach + by };
         const c2 = { x: end.x + end.tx * reach + bx, y: end.y + end.ty * reach + by };
-        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
         ink = union(ink, cubicExtent(start, c1, c2, end));
         // The point halfway along a cubic, which is where the text belongs.
         midX = (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8;
         midY = (start.y + 3 * c1.y + 3 * c2.y + end.y) / 8;
     }
-    else if (ends.bow && (ends.bow.x !== 0 || ends.bow.y !== 0)) {
+    else if (ends.bow && bowed) {
         // A straight line that could not get the room it needed at its ends, so it
         // takes it in the middle. Both control points carry the same displacement,
         // which keeps the arc symmetric; a cubic's middle moves three quarters of
@@ -310,13 +366,13 @@ function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
             x: end.x - run.x + ends.bow.x * lift,
             y: end.y - run.y + ends.bow.y * lift,
         };
-        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none"${stroke}${markerEnd}${markerStart}/>`);
         ink = union(ink, cubicExtent(start, c1, c2, end));
         midX = (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8;
         midY = (start.y + 3 * c1.y + 3 * c2.y + end.y) / 8;
     }
     else {
-        parts.push(`  <line x1="${round(start.x)}" y1="${round(start.y)}" x2="${round(end.x)}" y2="${round(end.y)}" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <line x1="${round(start.x)}" y1="${round(start.y)}" x2="${round(end.x)}" y2="${round(end.y)}"${stroke}${markerEnd}${markerStart}/>`);
         midX = (start.x + end.x) / 2;
         midY = (start.y + end.y) / 2;
     }
@@ -349,7 +405,393 @@ function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
         }), size, fontSize));
     }
     // The stroke straddles the path, so half of it lies outside the geometry.
-    return { svg: linked(parts.join('\n'), edge.attrs['url']), ink: grow(ink, LINE_WIDTH / 2) };
+    const [line, ...rest] = parts;
+    return {
+        edge,
+        line: line,
+        rest,
+        ink: grow(ink, edge.look.thickness / 2),
+        trace: traceOf(line),
+        color,
+        stroke,
+    };
+}
+/**
+ * The stroke of a line: its color, its thickness and its pattern. The dashes
+ * are measured in thicknesses, so a pattern keeps its proportions on a thick
+ * line, which covers most of what a density setting would be for. A solid line
+ * of the ordinary thickness writes exactly what every line always did.
+ */
+function strokeOf(color, look) {
+    const w = look.thickness;
+    const dashes = {
+        solid: '',
+        dashed: ` stroke-dasharray="${round(w * 4)} ${round(w * 3)}"`,
+        // A zero-length dash with a round cap is a dot as wide as the line.
+        dotted: ` stroke-dasharray="0 ${round(w * 3)}" stroke-linecap="round"`,
+        'dash-dot': ` stroke-dasharray="${round(w * 5)} ${round(w * 3)} 0 ${round(w * 3)}" stroke-linecap="round"`,
+    };
+    return ` stroke="${color}" stroke-width="${w}"${dashes[look.pattern]}`;
+}
+/**
+ * The points of a square or straight line, and where its text sits.
+ *
+ * Both start from what the file fixed. A square line leaves each side head-on
+ * and turns only at right angles; a straight one goes directly from point to
+ * point, and bends only where a clause — `below c`, `between a and b` — puts a
+ * point it has to pass through.
+ */
+function jointedLine(edge, ends, corridor, route, nodes, textWidth) {
+    const { start, end } = ends;
+    const square = edge.look.path === 'square';
+    const stub = ROUTE_RADIUS + arrowLength(edge.look.thickness);
+    const fromFace = faceOf(edge.from);
+    const toFace = faceOf(edge.to);
+    if (route) {
+        if (square)
+            return { points: route.points, mid: route.mid };
+        const points = straighten(route.points, edge, nodes);
+        return { points, mid: textSpot(points, textWidth) };
+    }
+    if (corridor) {
+        const p1 = corridorPoint(corridor, corridor.enter);
+        const p2 = corridorPoint(corridor, corridor.leave);
+        const mid = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
+        if (!square)
+            return { points: tidyRoute([start, p1, p2, end]), mid };
+        const forward = corridor.leave >= corridor.enter ? 1 : -1;
+        const run = corridor.axis === 'y' ? { x: forward, y: 0 } : { x: 0, y: forward };
+        const points = tidyRoute([
+            ...rightAngles(start, headingOf(start, fromFace), p1, { x: -run.x, y: -run.y }, stub),
+            ...rightAngles(p2, run, end, headingOf(end, toFace), stub),
+        ]);
+        return { points, mid };
+    }
+    const bow = ends.bow ?? { x: 0, y: 0 };
+    const bowed = bow.x !== 0 || bow.y !== 0;
+    if (!square) {
+        // A bowed line is one of a crowded group, and its middle is the only room
+        // left for its text, so it bends there.
+        const middle = { x: (start.x + end.x) / 2 + bow.x, y: (start.y + end.y) / 2 + bow.y };
+        const points = bowed ? [start, middle, end] : [start, end];
+        return { points, mid: bowed ? middle : textSpot(points, textWidth) };
+    }
+    const out = headingOf(start, fromFace);
+    const back = headingOf(end, toFace);
+    // A bow is room for the texts of a crowded group, taken in the middle. Between
+    // sides that face each other that middle is a run the lanes can widen along;
+    // at right angles there is none, and the text finds room on a level piece.
+    if (!bowed || (out.x !== 0) !== (back.x !== 0)) {
+        const points = tidyRoute(rightAngles(start, out, end, back, stub));
+        return { points, mid: textSpot(points, textWidth) };
+    }
+    // Out of each side, across by the bow, and joined at right angles.
+    const a = { x: start.x + out.x * stub, y: start.y + out.y * stub };
+    const b = { x: end.x + back.x * stub, y: end.y + back.y * stub };
+    const points = tidyRoute(squareUp([start, a, { x: a.x + bow.x, y: a.y + bow.y }, { x: b.x + bow.x, y: b.y + bow.y }, b, end]));
+    return { points, mid: textSpot(points, textWidth) };
+}
+/**
+ * Which way an end points, as one of the four directions. A named side says so;
+ * an end the renderer placed is on some side of its box, and that is the one.
+ */
+function headingOf(anchor, face) {
+    if (anchor.side !== undefined)
+        return { x: anchor.tx, y: anchor.ty };
+    const candidates = [
+        [Math.abs(anchor.x - face.x), { x: -1, y: 0 }],
+        [Math.abs(anchor.x - (face.x + face.width)), { x: 1, y: 0 }],
+        [Math.abs(anchor.y - face.y), { x: 0, y: -1 }],
+        [Math.abs(anchor.y - (face.y + face.height)), { x: 0, y: 1 }],
+    ];
+    candidates.sort((p, q) => p[0] - q[0]);
+    return candidates[0][1];
+}
+/**
+ * A right-angled line from `from`, leaving along `out`, to `to`, arriving
+ * against `back` — `back` points out of the far side, so the line's last piece
+ * travels the opposite way. The fewest turns that leave and arrive head-on:
+ * none when the two face each other in line, one when they are at right angles
+ * and the corner lies ahead of both, two in the middle when they face each
+ * other offset, and a way round past a stub at each end otherwise.
+ */
+function rightAngles(from, out, to, back, stub) {
+    const across = out.x !== 0;
+    const parallel = across === (back.x !== 0);
+    const ahead = (p, q, d) => (q.x - p.x) * d.x + (q.y - p.y) * d.y;
+    if (parallel) {
+        const facing = out.x * back.x + out.y * back.y < 0;
+        if (facing && ahead(from, to, out) > 0) {
+            if (Math.abs(across ? to.y - from.y : to.x - from.x) < 0.5)
+                return [from, to];
+            const m = across ? (from.x + to.x) / 2 : (from.y + to.y) / 2;
+            return across
+                ? [from, { x: m, y: from.y }, { x: m, y: to.y }, to]
+                : [from, { x: from.x, y: m }, { x: to.x, y: m }, to];
+        }
+        if (!facing) {
+            // Both sides face the same way: out past whichever is further, and back.
+            const far = across
+                ? (out.x > 0 ? Math.max(from.x, to.x) : Math.min(from.x, to.x)) + out.x * stub
+                : (out.y > 0 ? Math.max(from.y, to.y) : Math.min(from.y, to.y)) + out.y * stub;
+            return across
+                ? [from, { x: far, y: from.y }, { x: far, y: to.y }, to]
+                : [from, { x: from.x, y: far }, { x: to.x, y: far }, to];
+        }
+        // Facing, but the far end is behind: out, across the middle, and in.
+        const a = { x: from.x + out.x * stub, y: from.y + out.y * stub };
+        const b = { x: to.x + back.x * stub, y: to.y + back.y * stub };
+        const m = across ? (from.y + to.y) / 2 : (from.x + to.x) / 2;
+        return across
+            ? [from, a, { x: a.x, y: m }, { x: b.x, y: m }, b, to]
+            : [from, a, { x: m, y: a.y }, { x: m, y: b.y }, b, to];
+    }
+    const corner = across ? { x: to.x, y: from.y } : { x: from.x, y: to.y };
+    if (ahead(from, corner, out) > 0 && ahead(to, corner, back) > 0)
+        return [from, corner, to];
+    // The one corner lies behind an end: step out of both sides first and join
+    // the two stubs with whichever corner does not double back.
+    const a = { x: from.x + out.x * stub, y: from.y + out.y * stub };
+    const b = { x: to.x + back.x * stub, y: to.y + back.y * stub };
+    const options = [
+        { x: b.x, y: a.y },
+        { x: a.x, y: b.y },
+    ];
+    const turn = options.find((c) => ahead(a, c, out) >= 0 && ahead(b, c, back) >= 0) ?? options[across ? 1 : 0];
+    return [from, a, turn, b, to];
+}
+/** Put a right-angled corner between any two points that are not in line. */
+function squareUp(points) {
+    const out = [points[0]];
+    let alongX = true;
+    for (let index = 1; index < points.length; index += 1) {
+        const a = out[out.length - 1];
+        const b = points[index];
+        const dx = Math.abs(b.x - a.x) >= 0.5;
+        const dy = Math.abs(b.y - a.y) >= 0.5;
+        if (dx && dy) {
+            out.push(alongX ? { x: b.x, y: a.y } : { x: a.x, y: b.y });
+        }
+        else if (dx || dy) {
+            alongX = dx;
+        }
+        out.push(b);
+    }
+    return out;
+}
+/**
+ * A route's points with every corner dropped that a straight piece can skip.
+ * The route already keeps each clause; a straight piece may cut a corner only
+ * where it stays clear of every box the route kept clear of, which keeps the
+ * clauses too — a piece between two points below a node, touching nothing, is
+ * below it all the way.
+ */
+function straighten(points, edge, nodes) {
+    const own = [faceOf(edge.from), faceOf(edge.to)].map((box) => grow(extentOfBox(box), -1));
+    const others = nodes
+        .filter((node) => !contains(node, edge.from) && !contains(node, edge.to))
+        .map((node) => grow(extentOfBox(faceOf(node)), ATTACH_MARGIN / 2));
+    const clear = (a, b) => ![...own, ...others].some((box) => segmentHits(a, b, box));
+    const kept = [points[0]];
+    let at = 0;
+    while (at < points.length - 1) {
+        let next = at + 1;
+        for (let far = points.length - 1; far > at + 1; far -= 1) {
+            if (clear(points[at], points[far])) {
+                next = far;
+                break;
+            }
+        }
+        kept.push(points[next]);
+        at = next;
+    }
+    return kept;
+}
+function extentOfBox(box) {
+    return { minX: box.x, minY: box.y, maxX: box.x + box.width, maxY: box.y + box.height };
+}
+/** Whether the segment from `a` to `b` passes through the inside of `box`. */
+function segmentHits(a, b, box) {
+    if (box.maxX <= box.minX || box.maxY <= box.minY)
+        return false;
+    let t0 = 0;
+    let t1 = 1;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const edges = [
+        [-dx, a.x - box.minX],
+        [dx, box.maxX - a.x],
+        [-dy, a.y - box.minY],
+        [dy, box.maxY - a.y],
+    ];
+    for (const [p, q] of edges) {
+        if (p === 0) {
+            if (q <= 0)
+                return false;
+            continue;
+        }
+        const t = q / p;
+        if (p < 0)
+            t0 = Math.max(t0, t);
+        else
+            t1 = Math.min(t1, t);
+        if (t0 >= t1)
+            return false;
+    }
+    return true;
+}
+/**
+ * Where a jointed line's text rides: the middle of its longest level piece, if
+ * one is long enough to hold the text with line showing either side, and the
+ * middle of its longest piece otherwise. A level piece comes first because a
+ * text knocks a hole as wide as itself, which on an upright piece is a hole far
+ * wider than the line — and lines grouped on one side sit a text's height apart
+ * on their level pieces, never a text's width apart on their upright ones.
+ */
+function textSpot(points, textWidth) {
+    let best = { x: (points[0].x + points[points.length - 1].x) / 2, y: (points[0].y + points[points.length - 1].y) / 2 };
+    let level;
+    let longest = -1;
+    let longestLevel = -1;
+    for (let index = 1; index < points.length; index += 1) {
+        const a = points[index - 1];
+        const b = points[index];
+        const here = Math.hypot(b.x - a.x, b.y - a.y);
+        const middle = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        if (here > longest + 0.5) {
+            longest = here;
+            best = middle;
+        }
+        if (Math.abs(b.y - a.y) < 0.5 && here >= textWidth + ARROW_LENGTH * 2 && here > longestLevel + 0.5) {
+            longestLevel = here;
+            level = middle;
+        }
+    }
+    return level ?? best;
+}
+function sharpPath(points) {
+    return points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${round(point.x)} ${round(point.y)}`).join(' ');
+}
+/**
+ * A drawn line's element read back as a polyline, curves flattened. Reading
+ * the element rather than each drawing branch keeping its own record means the
+ * crossings are found on exactly what was drawn.
+ */
+function traceOf(element) {
+    const line = /<line x1="([-\d.]+)" y1="([-\d.]+)" x2="([-\d.]+)" y2="([-\d.]+)"/.exec(element);
+    if (line) {
+        return [
+            { x: Number(line[1]), y: Number(line[2]) },
+            { x: Number(line[3]), y: Number(line[4]) },
+        ];
+    }
+    const d = /d="([^"]*)"/.exec(element)?.[1] ?? '';
+    const tokens = d.match(/[MLC]|-?\d+(?:\.\d+)?(?:e-?\d+)?/g) ?? [];
+    const points = [];
+    let command = 'M';
+    for (let index = 0; index < tokens.length;) {
+        const token = tokens[index];
+        if (/[MLC]/.test(token)) {
+            command = token;
+            index += 1;
+            continue;
+        }
+        const read = () => {
+            const point = { x: Number(tokens[index]), y: Number(tokens[index + 1]) };
+            index += 2;
+            return point;
+        };
+        if (command === 'C') {
+            const from = points[points.length - 1];
+            const [c1, c2, to] = [read(), read(), read()];
+            for (let step = 1; step <= 12; step += 1) {
+                const t = step / 12;
+                const u = 1 - t;
+                points.push({
+                    x: u * u * u * from.x + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * to.x,
+                    y: u * u * u * from.y + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * to.y,
+                });
+            }
+        }
+        else {
+            points.push(read());
+        }
+    }
+    return points;
+}
+/**
+ * Where each line with a `crossing:` style crosses a line declared before it.
+ * The later line is the one that jumps, so the file's order says who goes over,
+ * and a line never jumps where it leaves or arrives — a crossing that close to
+ * an end is two lines meeting at a box, not passing each other.
+ */
+function findCrossings(drawn) {
+    const found = new Map();
+    drawn.forEach((later, index) => {
+        if (later.edge.look.crossing === 'none')
+            return;
+        const crossings = [];
+        for (const earlier of drawn.slice(0, index)) {
+            const reach = 3 + later.edge.look.thickness * 1.5 + earlier.edge.look.thickness / 2;
+            const clear = reach + arrowLength(later.edge.look.thickness);
+            const ends = [later.trace[0], later.trace[later.trace.length - 1], earlier.trace[0], earlier.trace[earlier.trace.length - 1]];
+            for (let i = 1; i < later.trace.length; i += 1) {
+                const a = later.trace[i - 1];
+                const b = later.trace[i];
+                for (let j = 1; j < earlier.trace.length; j += 1) {
+                    const at = intersect(a, b, earlier.trace[j - 1], earlier.trace[j]);
+                    if (!at)
+                        continue;
+                    if (ends.some((end) => Math.hypot(end.x - at.x, end.y - at.y) < clear))
+                        continue;
+                    if (crossings.some((c) => Math.hypot(c.at.x - at.x, c.at.y - at.y) < (c.reach + reach) * 1.2))
+                        continue;
+                    const length = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+                    crossings.push({ at, along: { x: (b.x - a.x) / length, y: (b.y - a.y) / length }, reach });
+                }
+            }
+        }
+        if (crossings.length > 0)
+            found.set(later, crossings);
+    });
+    return found;
+}
+/** Where two segments cross, if they do. Lines that only touch or run together do not. */
+function intersect(a, b, c, d) {
+    const r = { x: b.x - a.x, y: b.y - a.y };
+    const s = { x: d.x - c.x, y: d.y - c.y };
+    const denominator = r.x * s.y - r.y * s.x;
+    if (Math.abs(denominator) < 1e-9)
+        return undefined;
+    const t = ((c.x - a.x) * s.y - (c.y - a.y) * s.x) / denominator;
+    const u = ((c.x - a.x) * r.y - (c.y - a.y) * r.x) / denominator;
+    if (t <= 0 || t >= 1 || u <= 0 || u >= 1)
+        return undefined;
+    return { x: a.x + r.x * t, y: a.y + r.y * t };
+}
+/**
+ * The jump drawn over one crossing: a half circle for `arc`, three sides of a
+ * square for `square`, and nothing for `gap`, which is the cut alone. A jump
+ * rises to the same side everywhere — up, or right on a line going straight up
+ * or down — so a row of them reads as one line hopping.
+ */
+function jumpAt(crossing, style) {
+    const { at, along, reach } = crossing;
+    let normal = { x: along.y, y: -along.x };
+    if (normal.y > 1e-6 || (Math.abs(normal.y) <= 1e-6 && normal.x < 0))
+        normal = { x: -normal.x, y: -normal.y };
+    const a = { x: at.x - along.x * reach, y: at.y - along.y * reach };
+    const b = { x: at.x + along.x * reach, y: at.y + along.y * reach };
+    if (style === 'arc') {
+        // Which way round the arc sweeps depends on which side of the line is up.
+        const sweep = along.x * normal.y - along.y * normal.x < 0 ? 1 : 0;
+        return `M ${round(a.x)} ${round(a.y)} A ${round(reach)} ${round(reach)} 0 0 ${sweep} ${round(b.x)} ${round(b.y)}`;
+    }
+    if (style === 'square') {
+        const up = (p) => ({ x: p.x + normal.x * reach, y: p.y + normal.y * reach });
+        return sharpPath([a, up(a), up(b), b]);
+    }
+    return undefined;
 }
 function union(a, b) {
     return {
@@ -1003,6 +1445,775 @@ function planCorridors(edges, ends, measurer, fontSize) {
     }
     return plans;
 }
+/**
+ * Route every edge that has to go around its own two boxes.
+ *
+ * An edge leaving the left of one box for the right of another, with the second
+ * box further right, has to turn back on itself, and a single curve can only
+ * do that by crossing its own boxes. In a row it flattened into a straight line
+ * through both; stepped down, even by a `normal` gap, it still doubled back
+ * across the first box. So such an edge runs along a channel instead, turning
+ * back at each end: in the gap between its two boxes if that holds the line
+ * and its text, and otherwise over the top of everything between its ends,
+ * with its text on the top, where it cannot land on a box.
+ *
+ * Over the top, always, and round the right for a column. Nothing here weighs
+ * one way round against the other: the shorter way ties in the case that
+ * seemed to argue for it, and a default that flips on one box's height is
+ * harder to predict than one that never does. The run is placed the way a
+ * `between` channel is, measured off where the boxes landed.
+ */
+function planLoops(edges, nodes, ends, corridors, routes, measurer, fontSize) {
+    // Loops over the top, gathered so that two sharing a stretch can take a lane
+    // each rather than drawing on top of one another.
+    const tops = [];
+    for (const edge of edges) {
+        if (corridors.has(edge) || edge.passes)
+            continue;
+        const { start, end } = ends.get(edge);
+        if (start.side === undefined || end.side === undefined)
+            continue;
+        // Sides at right angles, one facing away from the other end.
+        if (start.tx * end.tx + start.ty * end.ty === 0) {
+            const inWay = nodes.filter((node) => !(contains(node, edge.from) && contains(node, edge.to)));
+            const plan = turnBack(edge, start, end, inWay, routes, measurer, fontSize);
+            if (plan)
+                tops.push(plan);
+            continue;
+        }
+        // The two ends point opposite ways along one axis, each away from the other.
+        if (start.tx !== -end.tx || start.ty !== -end.ty)
+            continue;
+        const run = start.tx !== 0 ? 'x' : 'y';
+        const across = run === 'x' ? 'y' : 'x';
+        const outward = run === 'x' ? start.tx : start.ty;
+        if (outward * (end[run] - start[run]) >= 0)
+            continue;
+        const a = faceOf(edge.from);
+        const b = faceOf(edge.to);
+        // Far enough out that the line reads as passing, and that half the text,
+        // centered on the line, still clears the box beside it.
+        const clear = Math.max(SEPARATION_GAP, laneExtent(edge, across, measurer, fontSize) / 2 + ATTACH_MARGIN);
+        const from = Math.min(lo(a, run), lo(b, run));
+        const to = Math.max(hi(a, run), hi(b, run));
+        const inWay = nodes.filter((node) => !(contains(node, edge.from) && contains(node, edge.to)));
+        const blocked = (low, high) => inWay.some((node) => {
+            const face = faceOf(node);
+            return (lo(face, run) < to && hi(face, run) > from &&
+                lo(face, across) < high && hi(face, across) > low);
+        });
+        // Boxes apart across the axis have a gap between them, and a line that
+        // fits in it turns back through that — the shortest way, and the one a
+        // single curve was reaching for.
+        const [upper, lower] = lo(a, across) <= lo(b, across) ? [a, b] : [b, a];
+        const gap = { lo: hi(upper, across), hi: lo(lower, across) };
+        const middle = (gap.lo + gap.hi) / 2;
+        if (gap.hi - gap.lo >= clear * 2 && !blocked(middle - clear, middle + clear)) {
+            corridors.set(edge, {
+                axis: across,
+                lane: middle,
+                enter: start[run],
+                leave: end[run],
+                loop: true,
+            });
+            continue;
+        }
+        // Otherwise over the top. Measured as distance outward — up for a row,
+        // right for a column — so one loop serves both.
+        const sign = across === 'y' ? -1 : 1;
+        const out = (box) => {
+            const [p, q] = [sign * lo(box, across), sign * hi(box, across)];
+            return [Math.min(p, q), Math.max(p, q)];
+        };
+        const inner = Math.min(sign * start[across], sign * end[across]);
+        // A box that shares the stretch and reaches into the band the line needs
+        // pushes the line out past it, which can bring another into the band.
+        const pushOut = (start) => {
+            let lane = start;
+            for (let moved = true; moved;) {
+                moved = false;
+                for (const node of inWay) {
+                    const face = faceOf(node);
+                    if (lo(face, run) >= to || hi(face, run) <= from)
+                        continue;
+                    const [near, far] = out(face);
+                    if (far + clear > lane && near < lane + clear && far > inner) {
+                        lane = far + clear;
+                        moved = true;
+                    }
+                }
+            }
+            return lane;
+        };
+        tops.push({
+            edge,
+            across,
+            sign,
+            lane: pushOut(Math.max(out(a)[1], out(b)[1]) + clear),
+            loop: true,
+            from,
+            to,
+            height: sign * start[across] + sign * end[across],
+            pushOut,
+            place: (lane) => corridors.set(edge, { axis: across, lane: sign * lane, enter: start[run], leave: end[run], loop: true }),
+        });
+    }
+    // Lines over one stretch nest so they do not cross. A turn-back goes inside
+    // any loop, because it comes in to a box from the side the loops pass over;
+    // otherwise the shorter goes inside, and of two the same length, the one
+    // whose ends sit further out. Each lane is as far from the one inside it as
+    // the lanes of a named gap are.
+    tops.sort((p, q) => Number(p.loop) - Number(q.loop) || p.to - p.from - (q.to - q.from) || q.height - p.height);
+    const placed = [];
+    for (const top of tops) {
+        for (let moved = true; moved;) {
+            moved = false;
+            for (const other of placed) {
+                if (other.across !== top.across || other.sign !== top.sign)
+                    continue;
+                if (other.from >= top.to || top.from >= other.to)
+                    continue;
+                const step = Math.max(ATTACH_STEP, laneExtent(top.edge, top.across, measurer, fontSize), laneExtent(other.edge, other.across, measurer, fontSize));
+                if (Math.abs(top.lane - other.lane) < step - 0.5) {
+                    top.lane = top.pushOut(other.lane + step);
+                    moved = true;
+                }
+            }
+        }
+        placed.push(top);
+        top.place(top.lane);
+    }
+}
+/**
+ * A route for an edge whose named sides are at right angles and one of which
+ * faces away from the other end: `from: left  to: top` with the far node to
+ * the right. A single curve leaving that side can only turn back across its
+ * own box. So the line steps out of the side facing away, goes out past both
+ * boxes the way the other side faces, runs along there, and comes straight in
+ * to the other side. Undefined when neither side faces away, where the curve
+ * already reads right. The route is recorded in `routes` once its lane is
+ * settled against any other line running outside the same boxes.
+ */
+function turnBack(edge, start, end, inWay, routes, measurer, fontSize) {
+    const facesAway = (from, to) => from.tx * (to.x - from.x) + from.ty * (to.y - from.y) < 0;
+    const startAway = facesAway(start, end);
+    if (!startAway && !facesAway(end, start))
+        return undefined;
+    // Planned from the end facing away, and turned round if that is the far end.
+    const [away, other] = startAway ? [start, end] : [end, start];
+    const [awayBox, otherBox] = (startAway ? [edge.from, edge.to] : [edge.to, edge.from]).map(faceOf);
+    const run = away.tx !== 0 ? 'x' : 'y';
+    const across = run === 'x' ? 'y' : 'x';
+    const make = axesAcross(across).make;
+    // The way the other side faces, which is the way the line goes out.
+    const sign = across === 'y' ? other.ty : other.tx;
+    const clear = Math.max(SEPARATION_GAP, laneExtent(edge, across, measurer, fontSize) / 2 + ATTACH_MARGIN);
+    const stub = away[run] + (run === 'x' ? away.tx : away.ty) * ROUTE_STUB;
+    const from = Math.min(stub, other[run], lo(awayBox, run), lo(otherBox, run));
+    const to = Math.max(stub, other[run], hi(awayBox, run), hi(otherBox, run));
+    // Measured as distance outward, the way the line goes.
+    const out = (box) => {
+        const [p, q] = [sign * lo(box, across), sign * hi(box, across)];
+        return [Math.min(p, q), Math.max(p, q)];
+    };
+    const inner = Math.min(sign * away[across], sign * other[across]);
+    const pushOut = (start) => {
+        let level = start;
+        for (let moved = true; moved;) {
+            moved = false;
+            for (const node of inWay) {
+                const face = faceOf(node);
+                if (lo(face, run) >= to || hi(face, run) <= from)
+                    continue;
+                const [near, far] = out(face);
+                if (far + clear > level && near < level + clear && far > inner) {
+                    level = far + clear;
+                    moved = true;
+                }
+            }
+        }
+        return level;
+    };
+    return {
+        edge,
+        across,
+        sign,
+        lane: pushOut(Math.max(out(awayBox)[1], out(otherBox)[1]) + clear),
+        loop: false,
+        from,
+        to,
+        height: sign * away[across] + sign * other[across],
+        pushOut,
+        place: (lane) => {
+            const at = sign * lane;
+            // A shallow turn steps out no further than half its depth, the half
+            // circle a loop's turn makes, so it stays inside any loop turning
+            // round the same box.
+            const outward = run === 'x' ? away.tx : away.ty;
+            const step = away[run] + outward * Math.min(ROUTE_STUB, Math.abs(at - away[across]) / 2);
+            const points = tidyRoute([away, make(step, away[across]), make(step, at), make(other[run], at), other]);
+            // The text rides on the longest piece, which is the run outside the
+            // boxes unless the two ends are nearly level.
+            let mid = make((stub + other[run]) / 2, at);
+            let best = -1;
+            for (let index = 0; index + 1 < points.length; index += 1) {
+                const [p, q] = [points[index], points[index + 1]];
+                const length = Math.hypot(q.x - p.x, q.y - p.y);
+                if (length > best) {
+                    best = length;
+                    mid = { x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 };
+                }
+            }
+            routes.set(edge, { points: startAway ? points : points.reverse(), mid });
+        },
+    };
+}
+/** The most a route's corner is rounded by. */
+const ROUTE_RADIUS = 20;
+/**
+ * How far a route leaves its side before its first turn: a full corner, and the
+ * arrowhead's length on top so the head lands on a straight piece of line.
+ */
+const ROUTE_STUB = ROUTE_RADIUS + ARROW_LENGTH;
+/** The narrowest gap a route will cross over in, between two nodes it passes on opposite sides. */
+const CROSSING_ROOM = ATTACH_MARGIN * 2;
+function axesAcross(across) {
+    return across === 'y'
+        ? { across, run: 'x', make: (along, level) => ({ x: along, y: level }) }
+        : { across, run: 'y', make: (along, level) => ({ x: level, y: along }) };
+}
+/**
+ * Route every edge that says which side of something it passes.
+ *
+ * `below resolver` means that where the line passes Resolver it is below it —
+ * not that the whole line is. So the line is a run of straight stretches along
+ * the way it travels, and each clause binds only the stretch lying alongside
+ * its nodes. A clause naming several nodes binds the stretch alongside all of
+ * them, which is how `below a and b` says "with no rising in between" and two
+ * separate clauses do not. Consecutive stretches that can share one level do;
+ * where they cannot, the line crosses over in the gap between the two sets of
+ * nodes, and if there is no gap, the file is refused rather than drawn through
+ * a box. No clause says an order: the line meets the nodes in the order they
+ * sit along its way.
+ *
+ * Above and below are passed travelling across the page, left and right
+ * travelling up or down it, so an edge naming both kinds turns between such
+ * runs, as few times as keeps every clause. Which comes first is the named
+ * side's to say, and across when no end names one.
+ *
+ * Nothing here moves a node or looks for a path. Every level is read off where
+ * the named nodes landed, as a `between` channel is, and the only other nodes
+ * consulted are ones sitting on a stretch, which push it further the way its
+ * clause already points.
+ */
+function planRoutes(edges, nodes, ends, measurer, fontSize) {
+    const routes = new Map();
+    for (const edge of edges) {
+        if (edge.passes)
+            routes.set(edge, planRoute(edge, edge.passes, nodes, ends.get(edge), measurer, fontSize));
+    }
+    return routes;
+}
+function planRoute(edge, passes, nodes, { start, end }, measurer, fontSize) {
+    const subject = `edge ${edge.from.name} -> ${edge.to.name}`;
+    const a = faceOf(edge.from);
+    const b = faceOf(edge.to);
+    const named = (anchor, face) => anchor.side === undefined ? centerOf(face) : anchor;
+    // Far enough out that the line reads as passing. The one stretch carrying
+    // the text is held further out, so that half the text, centered on the line,
+    // still clears the box beside it.
+    const clear = SEPARATION_GAP;
+    const inWay = nodes.filter((node) => !(contains(node, edge.from) && contains(node, edge.to)));
+    // Above and below are passed travelling across the page, left and right
+    // travelling up or down it. An edge naming only one kind is one section.
+    const acrossPasses = passes.filter((pass) => sideAxis(pass) === 'y');
+    const downPasses = passes.filter((pass) => sideAxis(pass) === 'x');
+    if (acrossPasses.length === 0 || downPasses.length === 0) {
+        const axes = axesAcross(sideAxis(passes[0]));
+        const travel = Math.sign(named(end, b)[axes.run] - named(start, a)[axes.run]) || 1;
+        const section = cut(axes, passes, reach(start, a, axes), reach(end, b, axes), travel);
+        const carrier = longest(section.stretches);
+        settle(section, (centerOf(a)[axes.across] + centerOf(b)[axes.across]) / 2, carrier);
+        return finish([
+            ...approach(start, a, axes, section.stretches[0].level, travel),
+            ...crossings(section),
+            ...approach(end, b, axes, section.stretches[section.stretches.length - 1].level, -travel).reverse(),
+        ], carrier, axes);
+    }
+    // Both kinds: the line turns between travelling across the page and
+    // travelling down it, as often as its clauses need. A side named at an end
+    // says which it does first; with none named, it goes across first. The
+    // fewest turns that keep every clause win, and at each count the other
+    // order is tried before adding a turn. If every attempt fails the same way,
+    // that is the error; if they fail differently, no one of them is the reason
+    // and the error names every clause.
+    const sideways = (anchor) => anchor.side === undefined ? undefined : anchor.side === 'left' || anchor.side === 'right';
+    const acrossFirst = sideways(start) ?? !(sideways(end) ?? false);
+    const refusals = [];
+    for (const count of [2, 3, 4]) {
+        for (const order of [acrossFirst, !acrossFirst]) {
+            try {
+                return turned(order, count);
+            }
+            catch (error) {
+                if (!(error instanceof SourceError))
+                    throw error;
+                refusals.push(error);
+            }
+        }
+    }
+    if (refusals.every((refusal) => refusal.message === refusals[0].message))
+        throw refusals[0];
+    const written = passes.map((pass) => `"${pass.written}"`);
+    throw new SourceError(`${subject}: no line keeps ${written.slice(0, -1).join(', ')} and ${written[written.length - 1]} ` +
+        'all at once, whichever way it turns — each way misses one of those nodes or runs into one. ' +
+        'Give the nodes more room, or drop a clause', edge.line);
+    /**
+     * A route in `count` sections, alternating across and down, joined at
+     * corners. Each section is planned as an edge naming one kind is, running
+     * from the level of the section before it to the level of the one after,
+     * and each clause binds every section of its kind that passes its node.
+     * The first and last keep as near their own ends as their clauses allow,
+     * so with nothing in the way two sections make an L through the corner
+     * level with both ends; a section between hugs its own clauses. Where the
+     * corners land depends on every section, so they are planned in turn
+     * until none moves.
+     */
+    function turned(acrossFirst, count) {
+        const axes = Array.from({ length: count }, (_, index) => axesAcross((index % 2 === 0) === acrossFirst ? 'y' : 'x'));
+        const last = count - 1;
+        const targets = axes.map(({ across }, index) => index === 0
+            ? centerOf(a)[across]
+            : index === last
+                ? centerOf(b)[across]
+                : (centerOf(a)[across] + centerOf(b)[across]) / 2);
+        // Each section's first and last level, which bound its neighbours' runs.
+        const firstLevels = [...targets];
+        const lastLevels = [...targets];
+        const startAt = reach(start, a, axes[0]);
+        const endAt = reach(end, b, axes[last]);
+        // A section starts or ends at the middle of its end's own node, which
+        // must not push it: the line leaves that node from the side facing it.
+        const obstacles = inWay.filter((node) => !contains(node, edge.from) && !contains(node, edge.to));
+        const near = new Set(passes.flatMap((pass) => pass.nodes));
+        // Which stretch carries the text: its section and index, from the last round.
+        let carries;
+        let sections = [];
+        let travels = [];
+        let bound = new Set();
+        for (let round = 0; round < 8; round += 1) {
+            let moved = false;
+            sections = [];
+            travels = [];
+            bound = new Set();
+            axes.forEach((section, index) => {
+                const from = index === 0 ? startAt : lastLevels[index - 1];
+                const to = index === last ? endAt : firstLevels[index + 1];
+                const travel = Math.sign((index === last ? named(end, b)[section.run] : to) -
+                    (index === 0 ? named(start, a)[section.run] : from)) || 1;
+                const low = Math.min(from, to);
+                const high = Math.max(from, to);
+                const mine = passes.filter((pass) => {
+                    const box = boundingBox(pass.nodes.map(faceOf));
+                    return sideAxis(pass) === section.across && hi(box, section.run) > low && lo(box, section.run) < high;
+                });
+                mine.forEach((pass) => bound.add(pass));
+                const planned = cut(section, mine, from, to, travel);
+                const carrier = carries?.[0] === index ? planned.stretches[carries[1]] : undefined;
+                settle(planned, targets[index], carrier, obstacles, index > 0 && index < last, near);
+                const first = planned.stretches[0].level;
+                const final = planned.stretches[planned.stretches.length - 1].level;
+                if (Math.abs(first - firstLevels[index]) >= 0.5 || Math.abs(final - lastLevels[index]) >= 0.5) {
+                    moved = true;
+                }
+                firstLevels[index] = first;
+                lastLevels[index] = final;
+                sections.push(planned);
+                travels.push(travel);
+            });
+            let wanted;
+            if (edge.lines !== undefined) {
+                sections.forEach((section, index) => {
+                    const best = longest(section.stretches);
+                    if (!wanted || length(best) > length(sections[wanted[0]].stretches[wanted[1]])) {
+                        wanted = [index, section.stretches.indexOf(best)];
+                    }
+                });
+            }
+            const settled = round > 0 && !moved && wanted?.[0] === carries?.[0] && wanted?.[1] === carries?.[1];
+            carries = wanted;
+            if (settled)
+                break;
+        }
+        const unpassed = passes.find((pass) => !bound.has(pass));
+        if (unpassed) {
+            throw new SourceError(`${subject}: the line never passes ${quoteNames(unpassed.nodes)}, so "${unpassed.written}" says ` +
+                'nothing about it', edge.line);
+        }
+        const points = [...approach(start, a, axes[0], firstLevels[0], travels[0])];
+        sections.forEach((section, index) => {
+            points.push(...crossings(section));
+            if (index < last)
+                points.push(section.axes.make(firstLevels[index + 1], lastLevels[index]));
+        });
+        points.push(...approach(end, b, axes[last], lastLevels[last], -travels[last]).reverse());
+        const broken = breaks(points);
+        if (broken) {
+            throw new SourceError(`${subject}: a line passing things both above or below and left or right has to turn, and ` +
+                `no way it can turn keeps "${broken.written}" — drop that clause, or one of the others`, edge.line);
+        }
+        const [which, index] = carries ?? [0, 0];
+        const carrier = edge.lines === undefined ? undefined : sections[which].stretches[index];
+        return finish(points, carrier, axes[which]);
+    }
+    /** The first clause the drawn line breaks, wherever it lies alongside that clause's nodes. */
+    function breaks(points) {
+        for (const pass of passes) {
+            const box = boundingBox(pass.nodes.map(faceOf));
+            const across = sideAxis(pass);
+            const run = across === 'y' ? 'x' : 'y';
+            const further = pass.direction === 'below' || pass.direction === 'right';
+            for (let index = 0; index + 1 < points.length; index += 1) {
+                const [p, q] = [points[index], points[index + 1]];
+                const alongside = Math.abs(p[run] - q[run]) < 0.5
+                    ? p[run] > lo(box, run) + 0.5 && p[run] < hi(box, run) - 0.5
+                    : Math.min(Math.max(p[run], q[run]), hi(box, run)) -
+                        Math.max(Math.min(p[run], q[run]), lo(box, run)) > 0.5;
+                if (!alongside)
+                    continue;
+                const kept = further
+                    ? Math.min(p[across], q[across]) >= hi(box, across) - 0.5
+                    : Math.max(p[across], q[across]) <= lo(box, across) + 0.5;
+                if (!kept)
+                    return pass;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Where the line reaches along a run at one end, before it turns onto a
+     * stretch. Enough to tell which nodes it passes.
+     */
+    function reach(anchor, face, { run }) {
+        const along = run === 'x' ? anchor.tx : anchor.ty;
+        return anchor.side !== undefined && along !== 0
+            ? anchor[run] + along * ROUTE_STUB
+            : named(anchor, face)[run];
+    }
+    function length(stretch) {
+        return Math.abs(stretch.to - stretch.from);
+    }
+    function longest(stretches) {
+        return stretches.reduce((best, stretch) => (length(stretch) > length(best) ? stretch : best));
+    }
+    /**
+     * The way from `first` to `last` along a run, cut wherever a clause starts
+     * or stops binding, with each piece given the band its clauses leave the
+     * line, and consecutive pieces grouped into stretches that can share one
+     * level. Levels are left for `settle`.
+     */
+    function cut(axes, passes, first, last, travel) {
+        const { across, run } = axes;
+        const low = Math.min(first, last);
+        const high = Math.max(first, last);
+        const clauses = passes.map((pass) => {
+            const box = boundingBox(pass.nodes.map(faceOf));
+            if (hi(box, run) <= low || lo(box, run) >= high) {
+                throw new SourceError(`${subject}: the line never passes ${quoteNames(pass.nodes)}, so "${pass.written}" says nothing ` +
+                    'about it', edge.line);
+            }
+            const further = pass.direction === 'below' || pass.direction === 'right';
+            return {
+                pass,
+                from: lo(box, run),
+                to: hi(box, run),
+                bound: further ? hi(box, across) + clear : lo(box, across) - clear,
+                further,
+            };
+        });
+        // Cut the way into pieces at every place a clause starts or stops binding,
+        // and give each piece the band its clauses leave the line.
+        const cuts = [...new Set([low, high, ...clauses.flatMap((c) => [c.from, c.to])])]
+            .filter((at) => at >= low && at <= high)
+            .sort((p, q) => (p - q) * travel);
+        const pieces = cuts.slice(0, -1).map((from, index) => {
+            const to = cuts[index + 1];
+            const middle = (from + to) / 2;
+            const binding = clauses.filter((c) => c.from < middle && c.to > middle);
+            const floor = binding.filter((c) => c.further).sort((p, q) => q.bound - p.bound)[0];
+            const ceiling = binding.filter((c) => !c.further).sort((p, q) => p.bound - q.bound)[0];
+            if (floor && ceiling && floor.bound > ceiling.bound) {
+                const grouped = [floor, ceiling].some((c) => c.pass.nodes.length > 1);
+                throw new SourceError(`${subject}: "${floor.pass.written}" and "${ceiling.pass.written}" cannot both hold — there ` +
+                    'is a stretch where the line is alongside both, and it cannot be ' +
+                    `${sideWord(floor.pass)} ${quoteNames(floor.pass.nodes)} and ${sideWord(ceiling.pass)} ` +
+                    `${quoteNames(ceiling.pass.nodes)} at the same point. Drop one` +
+                    (grouped
+                        ? ', or name the nodes in separate clauses so the line may cross over between them'
+                        : ''), edge.line);
+            }
+            return {
+                from,
+                to,
+                lo: floor?.bound ?? -Infinity,
+                hi: ceiling?.bound ?? Infinity,
+                floor,
+                ceiling,
+            };
+        });
+        // A way of no length, as the first section of a turned route can be when
+        // the corner is level with its start, is one piece binding nothing.
+        if (pieces.length === 0) {
+            pieces.push({ from: low, to: high, lo: -Infinity, hi: Infinity, floor: undefined, ceiling: undefined });
+        }
+        // Consecutive pieces share one level for as long as their bands overlap.
+        const stretches = [];
+        let current = { lo: -Infinity, hi: Infinity, first: 0, last: 0, from: 0, to: 0, level: 0 };
+        pieces.forEach((piece, index) => {
+            const lower = Math.max(current.lo, piece.lo);
+            const upper = Math.min(current.hi, piece.hi);
+            if (lower <= upper) {
+                Object.assign(current, { lo: lower, hi: upper, last: index });
+            }
+            else {
+                stretches.push(current);
+                current = { lo: piece.lo, hi: piece.hi, first: index, last: index, from: 0, to: 0, level: 0 };
+            }
+        });
+        stretches.push(current);
+        for (const stretch of stretches) {
+            stretch.from = pieces[stretch.first].from;
+            stretch.to = pieces[stretch.last].to;
+        }
+        return { axes, pieces, stretches };
+    }
+    /**
+     * Each stretch sits as near `target` as its band allows, and a node lying
+     * on it pushes it on the way its clause already points. `carrier` is the
+     * stretch held clear for the text, if this section has it.
+     */
+    function settle({ axes: { across, run }, stretches }, target, carrier, obstacles = inWay, hug = false, near = new Set()) {
+        const textClear = Math.max(clear, laneExtent(edge, across, measurer, fontSize) / 2 + ATTACH_MARGIN);
+        for (const stretch of stretches) {
+            const room = stretch === carrier && edge.lines !== undefined ? textClear : clear;
+            const extra = room - clear;
+            const lower = stretch.lo + extra;
+            const upper = stretch.hi - extra;
+            // A stretch hugging its clauses sits as close as its one bound allows.
+            const wanted = !hug
+                ? target
+                : stretch.hi === Infinity && stretch.lo !== -Infinity
+                    ? lower
+                    : stretch.lo === -Infinity && stretch.hi !== Infinity
+                        ? upper
+                        : target;
+            stretch.level = lower <= upper
+                ? Math.min(Math.max(wanted, lower), upper)
+                : (stretch.lo + stretch.hi) / 2;
+            const push = stretch.hi === Infinity ? 1 : stretch.lo === -Infinity ? -1 : 0;
+            if (push === 0)
+                continue;
+            const from = Math.min(stretch.from, stretch.to);
+            const to = Math.max(stretch.from, stretch.to);
+            for (let moved = true; moved;) {
+                moved = false;
+                for (const node of obstacles) {
+                    const face = faceOf(node);
+                    if (lo(face, run) >= to || hi(face, run) <= from)
+                        continue;
+                    // A node the edge names is one it is meant to go close by, so it
+                    // keeps the line only as far off as a crossing does.
+                    const off = near.has(node) && room === clear ? ATTACH_MARGIN : room;
+                    if (lo(face, across) >= stretch.level + off || hi(face, across) <= stretch.level - off) {
+                        continue;
+                    }
+                    stretch.level = push > 0 ? hi(face, across) + off : lo(face, across) - off;
+                    moved = true;
+                }
+            }
+        }
+    }
+    /**
+     * Between two stretches the line crosses over, in whatever run of pieces at
+     * the end of the first leaves room for both levels.
+     */
+    function crossings({ axes: { make }, pieces, stretches }) {
+        const points = [];
+        for (let index = 0; index + 1 < stretches.length; index += 1) {
+            const here = stretches[index];
+            const next = stretches[index + 1];
+            let open = here.last + 1;
+            while (open > here.first &&
+                pieces[open - 1].lo <= next.level &&
+                pieces[open - 1].hi >= next.level) {
+                open -= 1;
+            }
+            const from = open <= here.last ? pieces[open].from : pieces[here.last].to;
+            const to = pieces[here.last].to;
+            if (Math.abs(to - from) < CROSSING_ROOM) {
+                const behind = [...pieces.slice(here.first, here.last + 1)]
+                    .reverse()
+                    .map((piece) => piece.floor ?? piece.ceiling)
+                    .find((clause) => clause !== undefined);
+                const entering = pieces[next.first];
+                const ahead = (next.level > here.level ? entering.floor : entering.ceiling) ??
+                    entering.floor ?? entering.ceiling;
+                throw new SourceError(`${subject}: to pass "${behind.pass.written}" and "${ahead.pass.written}" the line has to ` +
+                    `cross over between ${quoteNames(behind.pass.nodes)} and ${quoteNames(ahead.pass.nodes)}, and there ` +
+                    'is no room between them — give the placement between them a gap, or drop one of the two', edge.line);
+            }
+            const at = (from + to) / 2;
+            points.push(make(at, here.level), make(at, next.level));
+        }
+        return points;
+    }
+    /**
+     * The route drawn through `points`, with its text at the middle of the
+     * piece that lies on the stretch held clear for it.
+     */
+    function finish(points, carrier, { across, run }) {
+        const drawn = tidyRoute(points);
+        let mid = centerOf(boundingBox([a, b]));
+        let best = -1;
+        for (let index = 0; index + 1 < drawn.length; index += 1) {
+            const [p, q] = [drawn[index], drawn[index + 1]];
+            if (!carrier)
+                break;
+            if (Math.abs(p[across] - carrier.level) > 0.5 || Math.abs(q[across] - carrier.level) > 0.5) {
+                continue;
+            }
+            const length = Math.abs(q[run] - p[run]);
+            if (length > best) {
+                best = length;
+                mid = { x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 };
+            }
+        }
+        return { points: drawn, mid };
+    }
+    /**
+     * The points from one end of the line to the level of its nearest stretch.
+     * `toward` is the way the line heads along its run from this end.
+     */
+    function approach(given, face, axes, level, toward) {
+        const { across, run, make } = axes;
+        const anchor = given.side !== undefined ? given : leaving(face, axes, level, toward);
+        const along = run === 'x' ? anchor.tx : anchor.ty;
+        const out = across === 'x' ? anchor.tx : anchor.ty;
+        if (along !== 0) {
+            // Out along the run, one way or the other, then across to the level.
+            const turn = make(anchor[run] + along * ROUTE_STUB, anchor[across]);
+            return [anchor, turn, make(turn[run], level)];
+        }
+        if ((level - anchor[across]) * out >= 0)
+            return [anchor, make(anchor[run], level)];
+        // The side faces away from the level, so the line steps round the back of
+        // its own node — the end the run is heading away from — to get there.
+        const stub = make(anchor[run], anchor[across] + out * ROUTE_STUB);
+        const back = toward > 0 ? lo(face, run) - ROUTE_STUB : hi(face, run) + ROUTE_STUB;
+        return [anchor, stub, make(back, stub[across]), make(back, level)];
+    }
+    /**
+     * An end naming no side leaves from the one facing the level it is going
+     * to, or, when the level is alongside the node, the one facing its way.
+     */
+    function leaving(face, { across, run }, level, toward) {
+        const center = centerOf(face);
+        const side = level > hi(face, across)
+            ? across === 'y' ? 'bottom' : 'right'
+            : level < lo(face, across)
+                ? across === 'y' ? 'top' : 'left'
+                : run === 'x'
+                    ? toward > 0 ? 'right' : 'left'
+                    : toward > 0 ? 'bottom' : 'top';
+        return anchorOn(face, side, side === 'top' || side === 'bottom' ? center.x : center.y);
+    }
+}
+/** Which axis a clause's side sits on: above and below are a matter of y. */
+function sideAxis(pass) {
+    return pass.direction === 'above' || pass.direction === 'below' ? 'y' : 'x';
+}
+/** "below", "left of" — the side as the author would say it. */
+function sideWord(pass) {
+    return pass.direction === 'above' || pass.direction === 'below'
+        ? pass.direction
+        : `${pass.direction} of`;
+}
+/** The box that just bounds several. */
+function boundingBox(boxes) {
+    const x = Math.min(...boxes.map((box) => box.x));
+    const y = Math.min(...boxes.map((box) => box.y));
+    return {
+        x,
+        y,
+        width: Math.max(...boxes.map((box) => box.x + box.width)) - x,
+        height: Math.max(...boxes.map((box) => box.y + box.height)) - y,
+    };
+}
+/** `"a"`, `"a" and "b"` — for error messages. */
+function quoteNames(nodes) {
+    const quoted = nodes.map((node) => `"${node.name}"`);
+    return quoted.length <= 1
+        ? (quoted[0] ?? '')
+        : `${quoted.slice(0, -1).join(', ')} and ${quoted[quoted.length - 1]}`;
+}
+/** Drop repeated points and ones partway along a straight piece, which are not corners. */
+function tidyRoute(points) {
+    const kept = [];
+    for (const point of points) {
+        const previous = kept[kept.length - 1];
+        if (previous && Math.hypot(point.x - previous.x, point.y - previous.y) < 0.5)
+            continue;
+        const before = kept[kept.length - 2];
+        if (before && previous &&
+            Math.abs((previous.x - before.x) * (point.y - previous.y) - (previous.y - before.y) * (point.x - previous.x)) < 1e-6 &&
+            (previous.x - before.x) * (point.x - previous.x) + (previous.y - before.y) * (point.y - previous.y) >= 0) {
+            kept[kept.length - 1] = point;
+            continue;
+        }
+        kept.push(point);
+    }
+    return kept;
+}
+/**
+ * A line through `points` with every corner rounded. A corner takes at most
+ * half of each piece it shares with a neighboring corner, and the whole of a
+ * piece at either end short of the arrowhead, so two corners never overlap and
+ * the head always lands on a straight piece.
+ */
+function roundedPath(points, arrow = ARROW_LENGTH) {
+    const parts = [`M ${round(points[0].x)} ${round(points[0].y)}`];
+    const kappa = 0.5523; // a cubic's handle, as a share of the radius, for a quarter circle
+    for (let index = 1; index + 1 < points.length; index += 1) {
+        const [before, corner, after] = [points[index - 1], points[index], points[index + 1]];
+        const inward = Math.hypot(corner.x - before.x, corner.y - before.y);
+        const outward = Math.hypot(after.x - corner.x, after.y - corner.y);
+        const radius = Math.max(0, Math.min(ROUTE_RADIUS, index === 1 ? inward - arrow : inward / 2, index + 2 === points.length ? outward - arrow : outward / 2));
+        const din = { x: (corner.x - before.x) / inward, y: (corner.y - before.y) / inward };
+        const dout = { x: (after.x - corner.x) / outward, y: (after.y - corner.y) / outward };
+        const enter = { x: corner.x - din.x * radius, y: corner.y - din.y * radius };
+        const leave = { x: corner.x + dout.x * radius, y: corner.y + dout.y * radius };
+        parts.push(`L ${round(enter.x)} ${round(enter.y)}`, `C ${round(enter.x + din.x * radius * kappa)} ${round(enter.y + din.y * radius * kappa)}, ` +
+            `${round(leave.x - dout.x * radius * kappa)} ${round(leave.y - dout.y * radius * kappa)}, ` +
+            `${round(leave.x)} ${round(leave.y)}`);
+    }
+    const last = points[points.length - 1];
+    parts.push(`L ${round(last.x)} ${round(last.y)}`);
+    return parts.join(' ');
+}
+function lo(box, axis) {
+    return axis === 'x' ? box.x : box.y;
+}
+function hi(box, axis) {
+    return axis === 'x' ? box.x + box.width : box.y + box.height;
+}
+/** Whether `inner` is `outer` or sits somewhere inside it. */
+function contains(outer, inner) {
+    for (let node = inner; node; node = node.parent) {
+        if (node === outer)
+            return true;
+    }
+    return false;
+}
 /**
  * An end whose side the author did not name aims at the far box's center, which
  * is the wrong thing to aim at once the line has been told to go somewhere else
@@ -1055,10 +2266,11 @@ function corridorPath(start, end, plan) {
     // Along the run the line travels one way, so that is its tangent at both ends
     // of the straight stretch — it enters the gap already going where the gap goes.
     const rt = plan.axis === 'y' ? { tx: forward, ty: 0 } : { tx: 0, ty: forward };
-    const r1 = corridorReach(start, p1, plan.axis);
+    const reach = plan.loop ? loopReach : corridorReach;
+    const r1 = reach(start, p1, plan.axis);
     const c1 = { x: start.x + start.tx * r1, y: start.y + start.ty * r1 };
     const c2 = { x: p1.x - rt.tx * r1, y: p1.y - rt.ty * r1 };
-    const r2 = corridorReach(p2, end, plan.axis);
+    const r2 = reach(p2, end, plan.axis);
     const c3 = { x: p2.x + rt.tx * r2, y: p2.y + rt.ty * r2 };
     const c4 = { x: end.x + end.tx * r2, y: end.y + end.ty * r2 };
     const d = [
@@ -1081,15 +2293,78 @@ function corridorReach(from, to, axis) {
     const distance = Math.hypot(to.x - from.x, to.y - from.y);
     return Math.min(140, Math.max(8, Math.min(distance * 0.4, run / 2)));
 }
+/**
+ * How far the handles reach on the turn at either end of a loop. The turn
+ * leaves heading one way and joins the run heading the other, over the depth
+ * between the side and the run, so it is a half circle on that depth — and a
+ * cubic comes closest to a half circle with handles two thirds of its diameter.
+ */
+function loopReach(from, to, axis) {
+    return (Math.abs(axis === 'y' ? to.y - from.y : to.x - from.x) * 2) / 3;
+}
 function sideAttr(edge, key) {
     const value = edge.attrs[key];
     if (value === undefined)
-        return undefined;
+        return impliedSide(edge, key);
     if (!ATTACH_SIDES.includes(value)) {
         throw new SourceError(`"${key}: ${value}" is not a side — use ${ATTACH_SIDES.join(', ')}`, edge.line);
     }
     return value;
 }
+/**
+ * The side a square line leaves or arrives on when its author named none.
+ *
+ * A curved or straight line with no sides aims straight at the other box, but a
+ * square one can only leave a side head-on, so it has to pick one. Boxes that
+ * share a column join top to bottom and boxes that share a row join side to
+ * side; otherwise the line goes across first and then down, the tie the mixed
+ * passes settled. An end whose partner did name a side keeps the line to one
+ * turn where it can. Everything after this treats the side as though it had
+ * been written, so the ends are spread and bundled like any named side.
+ *
+ * An edge through a `between` gap or past a named node is routed by its clauses,
+ * and one from a node to itself or to its own container has no outside to pick
+ * from, so none of those is given a side here.
+ */
+function impliedSide(edge, key) {
+    if (edge.look.path !== 'square' || edge.between || edge.passes)
+        return undefined;
+    if (contains(edge.from, edge.to) || contains(edge.to, edge.from))
+        return undefined;
+    const own = faceOf(key === 'from' ? edge.from : edge.to);
+    const other = faceOf(key === 'from' ? edge.to : edge.from);
+    const partnerKey = key === 'from' ? 'to' : 'from';
+    const partner = edge.attrs[partnerKey];
+    const overlapX = own.x < other.x + other.width && other.x < own.x + own.width;
+    const overlapY = own.y < other.y + other.height && other.y < own.y + own.height;
+    const across = centerOf(other).x >= centerOf(own).x ? 'right' : 'left';
+    const upDown = centerOf(other).y >= centerOf(own).y ? 'bottom' : 'top';
+    if (partner !== undefined && ATTACH_SIDES.includes(partner)) {
+        // The partner's side is fixed, so take whichever side of this box joins it
+        // in the fewest turns. The order breaks ties the way the rest of this does.
+        const theirs = anchorOn(other, partner, partner === 'top' || partner === 'bottom' ? centerOf(other).x : centerOf(other).y);
+        const order = overlapX && !overlapY ? [upDown, across] : [across, upDown];
+        const sides = [...order, ...ATTACH_SIDES.filter((side) => !order.includes(side))];
+        let best = sides[0];
+        let fewest = Infinity;
+        for (const side of sides) {
+            const mine = anchorOn(own, side, side === 'top' || side === 'bottom' ? centerOf(own).x : centerOf(own).y);
+            const [from, to] = key === 'from' ? [mine, theirs] : [theirs, mine];
+            const turns = tidyRoute(rightAngles(from, { x: from.tx, y: from.ty }, to, { x: to.tx, y: to.ty }, ROUTE_STUB)).length;
+            if (turns < fewest) {
+                fewest = turns;
+                best = side;
+            }
+        }
+        return best;
+    }
+    if (overlapX && !overlapY)
+        return upDown;
+    if (overlapY && !overlapX)
+        return across;
+    // Across first, then down: the start leaves across and the end is reached down.
+    return key === 'from' ? across : upDown;
+}
 function arrowMarker(color) {
     const id = markerId(color);
     return [