reladraw 0.4.0 → 0.6.0

package/dist/render.js

@@ -1,42 +1,27 @@
-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, LINE_WIDTH, PAD, SEPARATION_GAP, fontSizeFor, textExtent, textStyleFor, widestLine, } from './constants.js';
 import { describeAxis } from './ast.js';
 import { SourceError } from './errors.js';
 import { ICON_STROKE } from './icons.js';
 import { monospaceMeasurer } from './measure.js';
+import { DARK_THEME, THEMES } from './themes.js';
 import { plain } from './text.js';
-/**
- * Sampled out of `examples/reference/arch.png` rather than invented,
- * so the benchmark render and the drawing it is measured against differ by
- * geometry and typography alone. A container is a shade off the page and barely
- * outlined; a leaf is the navy that carries the diagram's weight.
- */
-export const DARK_THEME = {
-    background: '#111111',
-    boxFill: '#191728',
-    boxStroke: '#4f5367',
-    containerFill: '#191920',
-    containerStroke: '#25242f',
-    text: '#d9d9d9',
-    mutedText: '#8b8b8b',
-    edge: '#5c5c7c',
-    // Both sampled off the reference's machine glyphs. Note that the reference
-    // gives each icon its own hue — the drive is gray, the laptop periwinkle, the
-    // workstation violet — which is a drawing tool's per-shape default and not a
-    // system. One pair for the whole set is the deliberate difference: an icon
-    // should read as part of the diagram's palette, not as clip art dropped in.
-    iconInk: '#8d8d8e',
-    iconShade: '#3e3d58',
-};
 const CORNER = 8;
 /** Turn solved geometry into a standalone SVG document. */
 export function render(layout, options = {}) {
     const measurer = options.measurer ?? monospaceMeasurer();
     const fontSize = options.fontSize ?? DEFAULT_FONT_SIZE;
-    // `diagram background:` is the author overruling the theme for this one
-    // drawing, so it is folded in here and everything downstream sees one theme.
-    const base = options.theme ?? DARK_THEME;
-    const stated = layout.diagram['background'];
-    const theme = stated === undefined ? base : { ...base, background: stated };
+    // A theme passed in — the command line's `--theme` — beats the one the file
+    // names, so one source renders in either. `diagram background:` and `text:`
+    // are the author overruling a color of whichever theme that is, and a color
+    // written by hand wins over any theme, so they are folded in afterwards and
+    // everything downstream sees one theme.
+    const named = layout.diagram['theme'];
+    const base = options.theme ?? (named === undefined ? undefined : THEMES[named]) ?? DARK_THEME;
+    const theme = {
+        ...base,
+        ...(layout.diagram['background'] !== undefined && { background: layout.diagram['background'] }),
+        ...(layout.diagram['text.color'] !== undefined && { text: layout.diagram['text.color'] }),
+    };
     const body = [];
     for (const root of layout.roots) {
         body.push(drawNode(root, theme, measurer, fontSize, layout.markup));
@@ -49,9 +34,11 @@ 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);
+        const drawn = drawEdge(edge, ends.get(edge), corridors.get(edge), routes.get(edge), theme, measurer, fontSize, layout.markup);
         body.push(drawn.svg);
         ink = union(ink, grow(drawn.ink, layout.margin));
     }
@@ -268,7 +255,7 @@ function drawIcon(icon, x, y, side, theme) {
     ].join('\n');
 }
 // --- edges -------------------------------------------------------------------
-function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
+function drawEdge(edge, ends, corridor, route, theme, measurer, fontSize, markup) {
     const { start, end } = ends;
     const color = lineOf(edge.appearance, theme.edge);
     const markerEnd = ` marker-end="url(#${markerId(color)})"`;
@@ -284,7 +271,13 @@ function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
     let ink = extentOfPoints([start, end]);
     let midX;
     let midY;
-    if (corridor) {
+    if (route) {
+        parts.push(`  <path d="${roundedPath(route.points)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${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}/>`);
@@ -1018,6 +1011,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) {
+    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_LENGTH : inward / 2, index + 2 === points.length ? outward - ARROW_LENGTH : 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
@@ -1070,10 +1832,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 = [
@@ -1096,6 +1859,15 @@ 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)