reladraw 0.19.1 → 0.21.0

package/dist/constrain.js

@@ -0,0 +1,95 @@
+/** An exact distance, which is two inequalities pointing opposite ways. */
+export function fix(from, to, distance, placement) {
+    return [
+        { from, to, weight: distance, ...(placement ? { placement } : {}) },
+        { from: to, to: from, weight: -distance, ...(placement ? { placement } : {}) },
+    ];
+}
+/**
+ * Solve, or report the placements that fight.
+ *
+ * Longest path from a virtual source joined to everything at zero, which is
+ * Bellman-Ford with the comparison flipped. A distance that keeps growing after
+ * one pass per node means the constraints run in a circle that demands ever
+ * more room, and that circle is exactly the set of placements to quote back.
+ */
+export function tightest(count, constraints) {
+    const positions = new Array(count).fill(0);
+    const cameFrom = new Array(count).fill(undefined);
+    for (let pass = 0; pass < count; pass += 1) {
+        let moved = false;
+        for (const constraint of constraints) {
+            const candidate = positions[constraint.from] + constraint.weight;
+            if (candidate > positions[constraint.to] + 1e-9) {
+                positions[constraint.to] = candidate;
+                cameFrom[constraint.to] = constraint;
+                moved = true;
+            }
+        }
+        if (!moved)
+            return { positions };
+    }
+    // Still moving after a full pass per node, so some loop demands more room
+    // every time round it. Walk backwards to find it.
+    for (const constraint of constraints) {
+        if (positions[constraint.from] + constraint.weight > positions[constraint.to] + 1e-9) {
+            return { contradiction: { placements: loopFrom(constraint.to, cameFrom, count) } };
+        }
+    }
+    return { contradiction: { placements: [] } };
+}
+/**
+ * Which members can be driven apart from which, along one axis.
+ *
+ * A constraint says `pos[to] >= pos[from] + weight`, so it bounds `to` from
+ * below and leaves it free to move further away. Follow those edges and the
+ * question "may this one end up beyond that one?" becomes plain reachability:
+ * if `j` is reachable from `i` and `i` is not reachable from `j`, then the file
+ * lets the distance from `i` to `j` grow without limit and never lets it be
+ * closed from the other side. Pushing `j` past `i` is then the one separation
+ * the file allows, and no choice was made.
+ *
+ * Reachable both ways means the two are pinned at a fixed distance, so they
+ * cannot be separated along this axis at all. Reachable neither way means the
+ * file said nothing that orders them, which is the case the caller must refuse
+ * rather than guess at.
+ */
+export function reachability(count, constraints) {
+    const reach = Array.from({ length: count }, () => new Array(count).fill(false));
+    for (const constraint of constraints)
+        reach[constraint.from][constraint.to] = true;
+    for (let via = 0; via < count; via += 1) {
+        for (let from = 0; from < count; from += 1) {
+            if (!reach[from][via])
+                continue;
+            for (let to = 0; to < count; to += 1) {
+                if (reach[via][to])
+                    reach[from][to] = true;
+            }
+        }
+    }
+    return reach;
+}
+/** The placements on the loop reached by following each position back to what set it. */
+function loopFrom(start, cameFrom, count) {
+    let at = start;
+    for (let step = 0; step < count; step += 1) {
+        const previous = cameFrom[at];
+        if (previous === undefined)
+            break;
+        at = previous.from;
+    }
+    const placements = [];
+    const seen = new Set();
+    let cursor = at;
+    while (!seen.has(cursor)) {
+        seen.add(cursor);
+        const previous = cameFrom[cursor];
+        if (previous === undefined)
+            break;
+        if (previous.placement)
+            placements.push(previous.placement);
+        cursor = previous.from;
+    }
+    return placements.reverse();
+}

package/dist/grammar.js

@@ -77,6 +77,8 @@ export const RELATION_WORDS = [
     // `(inside top)`, `outside router right`, `via: inside p top`.
     'inside',
     'outside',
+    // `stays above laptop.photos`, a limit (design.org 5.6).
+    'stays',
     // Lines (design.org 6): `straight down from z3`, `each child of pool`,
     // `leg climb`, `via: through slot horizontal`.
     'straight',

package/dist/model.d.ts

@@ -1,4 +1,4 @@
-import type { Attrs, EdgeTextPlace, Kind, Mark, NodeCorners, Placement, PlacementTarget, ViaEntry, Way } from './ast.js';
+import type { Attrs, EdgeTextPlace, Kind, Limit, Mark, NodeCorners, Placement, PlacementTarget, ViaEntry, Way } from './ast.js';
 /** A rectangle on the page; a side or a point has no size on one axis or both. */
 export interface Rect {
     x: number;
@@ -30,6 +30,12 @@ export interface LayoutNode {
      * a document's are read; drawing alone depends on it, never placement.
      */
     corners: NodeCorners;
+    /**
+     * How wide the border is drawn, in pixels, from `border: (thickness: …)`;
+     * left out when it is the normal width. The stroke lies inside the outline,
+     * and the padding grows by the extra, so a thick border takes room.
+     */
+    borderWidth?: number;
     /** The text as written, before line splitting. */
     text: string;
     /** The text split into the lines that will be drawn, each as its runs. */
@@ -55,6 +61,8 @@ export interface LayoutNode {
      * (design.org 7.2).
      */
     titlePlacements?: Placement[];
+    /** `stays above laptop.photos`: what it keeps clear of (design.org 5.6). */
+    limits?: Limit[];
     x: number;
     y: number;
     width: number;
@@ -136,6 +144,8 @@ export interface LayoutMark {
     names: string[];
     appearance: Attrs;
     guide: boolean;
+    /** A region's border width in pixels, left out when normal; drawn inside its stated edge. */
+    borderWidth?: number;
     /** Its text, if it has one, and where that sits on the page (design.org 7.4). */
     text?: MarkTextBox;
     line: number;
@@ -323,6 +333,11 @@ export interface Layout {
     /** How a shown guide of each kind looks: `default guide node` and the rest. */
     guideLooks: Record<'node' | 'edge' | 'point' | 'region', Attrs>;
 }
+/**
+ * Whether a deck, which draws no outline of its own, was given one: a fill, or
+ * something about its border.
+ */
+export declare function outlineStated(appearance: Attrs): boolean;
 /**
  * Whether a node is joined to its container's text, directly or through
  * siblings joined to it: one unit with the text, placed by the text's position

package/dist/model.js

@@ -1,3 +1,10 @@
+/**
+ * Whether a deck, which draws no outline of its own, was given one: a fill, or
+ * something about its border.
+ */
+export function outlineStated(appearance) {
+    return appearance['fill'] !== undefined || appearance['border'] !== undefined || appearance['border.thickness'] !== undefined;
+}
 /**
  * Whether a node is joined to its container's text, directly or through
  * siblings joined to it: one unit with the text, placed by the text's position

package/dist/page.d.ts

@@ -0,0 +1,14 @@
+import { type Finding } from './checks.js';
+import type { DrawOptions } from './index.js';
+/**
+ * `reladraw render --page`: one diagram in one self-contained HTML page, made
+ * for looking at rather than embedding. The page is the diagram's own colors,
+ * headed with its title, and it pans, zooms, goes full screen, saves the SVG
+ * or a PNG, lists the findings, and names a box under the pointer. It needs
+ * nothing running and fetches nothing, so it can be attached, mailed or
+ * committed. `name` is the file's name, the title when the file states none.
+ */
+export declare function drawPage(source: string, name: string, options?: DrawOptions): {
+    html: string;
+    findings: Finding[];
+};

package/dist/page.js

@@ -0,0 +1,488 @@
+import { fileChecks, findings } from './checks.js';
+import { SourceError } from './errors.js';
+import { blame, parse } from './parser.js';
+import { renderTagged, themeOf } from './render.js';
+import { resolve } from './resolve.js';
+import { luminance } from './themes.js';
+/**
+ * `reladraw render --page`: one diagram in one self-contained HTML page, made
+ * for looking at rather than embedding. The page is the diagram's own colors,
+ * headed with its title, and it pans, zooms, goes full screen, saves the SVG
+ * or a PNG, lists the findings, and names a box under the pointer. It needs
+ * nothing running and fetches nothing, so it can be attached, mailed or
+ * committed. `name` is the file's name, the title when the file states none.
+ */
+export function drawPage(source, name, options = {}) {
+    const run = (text) => {
+        const layout = resolve(parse(text), options);
+        const { svg, tagged } = renderTagged(layout, options);
+        const found = options.checks === false ? [] : findings(layout, options.checks ? options.checks(fileChecks(layout)) : fileChecks(layout));
+        const title = layout.diagram['title'] ?? name;
+        return { html: page({ title, name, svg, tagged, findings: found, theme: themeOf(layout, options) }), findings: found };
+    };
+    try {
+        return run(source);
+    }
+    catch (error) {
+        throw error instanceof SourceError ? blame(source, error, run) : error;
+    }
+}
+function page({ title, name, svg, tagged, findings, theme }) {
+    const hex = (color) => /^#[0-9a-f]{6}$/i.test(color);
+    // The browser's own controls (scroll bars, focus rings) follow the page, so
+    // a dark diagram doesn't get a light one's. A color written by hand in a
+    // form that can't be measured leaves the choice to the browser.
+    const scheme = hex(theme.text) && hex(theme.background) ? (luminance(theme.text) > luminance(theme.background) ? 'dark' : 'light') : 'light dark';
+    const data = {
+        svg,
+        name,
+        findings: findings.map((finding) => ({ kind: finding.kind, message: finding.message, line: finding.line })),
+    };
+    // Replaced by functions, so a `$` in a title or a drawing is taken as written.
+    return PAGE.replace('{{scheme}}', () => scheme)
+        .replace('{{title}}', () => escapeHtml(title))
+        .replace('{{heading}}', () => escapeHtml(title))
+        .replace('{{colors}}', () => [
+        `--page: ${theme.background};`,
+        `--ink: ${theme.text};`,
+        `--muted: ${theme.mutedText};`,
+        `--rule: ${theme.boxStroke};`,
+        `--accent: ${theme.primary.color};`,
+        `--on-accent: ${theme.primary.on};`,
+    ].join(' '))
+        .replace('{{drawing}}', () => tagged)
+        .replace('{{data}}', () => scriptJson(data));
+}
+function escapeHtml(text) {
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/** JSON that can sit inside a `<script>` without ending it. */
+function scriptJson(value) {
+    return JSON.stringify(value)
+        .replace(/</g, '\\u003c');
+}
+const PAGE = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="{{scheme}}">
+<meta name="generator" content="reladraw">
+<title>{{title}}</title>
+<style>
+  :root { {{colors}} }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; }
+  body {
+    display: flex; flex-direction: column; height: 100vh; height: 100dvh;
+    background: var(--page); color: var(--ink);
+    font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  }
+  header {
+    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
+    padding: 10px 16px;
+    border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
+  }
+  h1 { flex: 1 1 16rem; margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
+  .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+  .tools .gap { width: 8px; }
+  button {
+    font: inherit; font-size: 13px; color: var(--ink); background: transparent;
+    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 6px;
+    padding: 4px 10px; cursor: pointer; white-space: nowrap;
+  }
+  button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
+  button:disabled { opacity: 0.45; cursor: default; background: transparent; }
+  button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }
+  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+  #scale { min-width: 3.5em; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
+  main { position: relative; flex: 1; display: flex; min-height: 0; }
+  #view { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
+  #view.dragging { cursor: grabbing; }
+  #stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
+  #stage svg { display: block; }
+  #view g[data-name].hover { filter: drop-shadow(0 0 3px var(--accent)); }
+  #view g[data-name].lit { filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 6px var(--accent)); animation: lit 0.6s ease-in-out 3 alternate; }
+  @keyframes lit { from { opacity: 1; } to { opacity: 0.45; } }
+  #tip {
+    position: absolute; pointer-events: none; display: none; z-index: 2;
+    padding: 2px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap;
+    background: var(--accent); color: var(--on-accent);
+  }
+  aside {
+    width: min(26rem, 38vw); display: flex; flex-direction: column; min-height: 0;
+    border-left: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
+  }
+  aside[hidden] { display: none; }
+  aside h2 { margin: 0; padding: 10px 16px 6px; font-size: 13px; font-weight: 600; }
+  aside h2 .what { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
+  aside ol { list-style: none; margin: 0; padding: 0 8px 12px; overflow: auto; }
+  aside li button {
+    display: block; width: 100%; text-align: left; white-space: normal; border-color: transparent;
+    padding: 6px 8px; margin: 2px 0;
+  }
+  aside li button.chosen { border-color: var(--accent); }
+  .where { color: var(--muted); font-variant-numeric: tabular-nums; }
+  .kind { color: var(--accent); }
+  .note { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
+  @media (max-width: 700px) {
+    main { flex-direction: column; }
+    aside { width: auto; max-height: 40%; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  }
+</style>
+</head>
+<body>
+<header>
+  <h1>{{heading}}</h1>
+  <div class="tools">
+    <button id="out" type="button" title="Zoom out (-)" aria-label="Zoom out">−</button>
+    <span id="scale" aria-live="polite">100%</span>
+    <button id="in" type="button" title="Zoom in (+)" aria-label="Zoom in">+</button>
+    <button id="fit" type="button" title="The whole diagram in view (0)">Fit</button>
+    <button id="actual" type="button" title="One pixel of the drawing to one of the screen (1)">Actual size</button>
+    <span class="gap"></span>
+    <button id="full" type="button" title="Full screen (f)">Full screen</button>
+    <button id="save-svg" type="button">Save SVG</button>
+    <button id="save-png" type="button">Save PNG</button>
+    <button id="toggle-findings" type="button" aria-controls="findings"></button>
+  </div>
+</header>
+<main>
+  <div id="view">
+    <div id="stage">
+{{drawing}}
+    </div>
+    <div id="tip"></div>
+  </div>
+  <aside id="findings" aria-label="Findings">
+    <h2>Findings <span class="what">where the picture, drawn as written, may not read as meant</span></h2>
+    <ol id="finding-list"></ol>
+  </aside>
+</main>
+<script>
+(function () {
+  var DATA = {{data}};
+  var view = document.getElementById('view');
+  var stage = document.getElementById('stage');
+  var svg = stage.querySelector('svg');
+  var tip = document.getElementById('tip');
+  var scaleLabel = document.getElementById('scale');
+  var box = svg.viewBox.baseVal;
+  var natural = { w: box.width, h: box.height };
+
+  // The drawing is resized rather than scaled with a transform, so the
+  // browser draws it afresh at every size and it stays sharp.
+  var at = { x: 0, y: 0, s: 1 };
+  // Until the reader pans or zooms, a change of window size redraws the view
+  // the way it was asked for: as it opened, or fitted.
+  var fitted = 'open';
+  var MIN = 0.05;
+  var MAX = 20;
+
+  function apply() {
+    svg.setAttribute('width', natural.w * at.s);
+    svg.setAttribute('height', natural.h * at.s);
+    stage.style.transform = 'translate(' + at.x + 'px,' + at.y + 'px)';
+    scaleLabel.textContent = Math.round(at.s * 100) + '%';
+  }
+
+  function size() {
+    return { w: view.clientWidth, h: view.clientHeight };
+  }
+
+  function center(s) {
+    var room = size();
+    at = { s: s, x: (room.w - natural.w * s) / 2, y: (room.h - natural.h * s) / 2 };
+    apply();
+  }
+
+  function fitScale() {
+    var room = size();
+    return Math.max(MIN, Math.min((room.w - 32) / natural.w, (room.h - 32) / natural.h));
+  }
+
+  function fit() {
+    fitted = 'fit';
+    center(fitScale());
+  }
+
+  // A diagram smaller than the window opens at its own size; a larger one
+  // opens fitted.
+  function open() {
+    fitted = 'open';
+    center(Math.min(1, fitScale()));
+  }
+
+  function refit() {
+    if (fitted === 'fit') fit();
+    else if (fitted === 'open') open();
+  }
+
+  // Zoom about a point of the view, which stays where it is on screen.
+  function zoomAt(factor, px, py) {
+    var s = Math.min(MAX, Math.max(MIN, at.s * factor));
+    var k = s / at.s;
+    at = { s: s, x: px - (px - at.x) * k, y: py - (py - at.y) * k };
+    fitted = false;
+    apply();
+  }
+
+  function zoomMiddle(factor) {
+    var room = size();
+    zoomAt(factor, room.w / 2, room.h / 2);
+  }
+
+  document.getElementById('in').onclick = function () { zoomMiddle(1.25); };
+  document.getElementById('out').onclick = function () { zoomMiddle(0.8); };
+  document.getElementById('fit').onclick = fit;
+  document.getElementById('actual').onclick = function () {
+    fitted = false;
+    center(1);
+  };
+
+  view.addEventListener('wheel', function (event) {
+    event.preventDefault();
+    var rect = view.getBoundingClientRect();
+    // A pinch on a trackpad arrives as a wheel with ctrl held, in small steps.
+    var step = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+    zoomAt(Math.exp(-step * (event.ctrlKey ? 0.01 : 0.0015)), event.clientX - rect.left, event.clientY - rect.top);
+  }, { passive: false });
+
+  // Dragging pans; two fingers pinch.
+  var pointers = new Map();
+  var pinch = null;
+  view.addEventListener('pointerdown', function (event) {
+    if (event.button !== 0) return;
+    if (event.target.closest('a')) return;
+    view.setPointerCapture(event.pointerId);
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.size === 2) {
+      var two = Array.from(pointers.values());
+      pinch = Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y);
+    }
+    view.classList.add('dragging');
+  });
+  view.addEventListener('pointermove', function (event) {
+    var last = pointers.get(event.pointerId);
+    if (!last) return;
+    var now = { x: event.clientX, y: event.clientY };
+    pointers.set(event.pointerId, now);
+    if (pointers.size === 2 && pinch) {
+      var two = Array.from(pointers.values());
+      var apart = Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y);
+      var rect = view.getBoundingClientRect();
+      zoomAt(apart / pinch, (two[0].x + two[1].x) / 2 - rect.left, (two[0].y + two[1].y) / 2 - rect.top);
+      pinch = apart;
+      return;
+    }
+    at.x += now.x - last.x;
+    at.y += now.y - last.y;
+    fitted = false;
+    apply();
+  });
+  function release(event) {
+    pointers.delete(event.pointerId);
+    if (pointers.size < 2) pinch = null;
+    if (pointers.size === 0) view.classList.remove('dragging');
+  }
+  view.addEventListener('pointerup', release);
+  view.addEventListener('pointercancel', release);
+  view.addEventListener('dblclick', function (event) {
+    var rect = view.getBoundingClientRect();
+    zoomAt(event.shiftKey ? 0.5 : 2, event.clientX - rect.left, event.clientY - rect.top);
+  });
+
+  window.addEventListener('resize', refit);
+
+  /* ---- full screen ---- */
+
+  var full = document.getElementById('full');
+  if (!document.fullscreenEnabled) full.hidden = true;
+  function toggleFull() {
+    if (document.fullscreenElement) document.exitFullscreen();
+    else document.documentElement.requestFullscreen();
+  }
+  full.onclick = toggleFull;
+  document.addEventListener('fullscreenchange', function () {
+    full.textContent = document.fullscreenElement ? 'Exit full screen' : 'Full screen';
+  });
+
+  /* ---- saving ---- */
+
+  function saveBlob(blob, name) {
+    var url = URL.createObjectURL(blob);
+    var link = document.createElement('a');
+    link.href = url;
+    link.download = name;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    // A tick, so the navigation has the URL before it is taken back.
+    setTimeout(function () { URL.revokeObjectURL(url); }, 0);
+  }
+
+  function flash(button, text) {
+    var was = button.textContent;
+    button.textContent = text;
+    setTimeout(function () { button.textContent = was; }, 1200);
+  }
+
+  document.getElementById('save-svg').onclick = function () {
+    saveBlob(new Blob([DATA.svg], { type: 'image/svg+xml' }), DATA.name + '.svg');
+  };
+
+  // The browser draws the SVG onto a canvas with the fonts the page shows it
+  // in, twice the size so it stays sharp on a high-density screen. A data URL
+  // rather than a blob one, which some browsers count as foreign and refuse
+  // to let the canvas be read back.
+  var savePng = document.getElementById('save-png');
+  savePng.onclick = function () {
+    var image = new Image();
+    image.onload = function () {
+      var canvas = document.createElement('canvas');
+      canvas.width = natural.w * 2;
+      canvas.height = natural.h * 2;
+      canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
+      canvas.toBlob(function (blob) {
+        blob ? saveBlob(blob, DATA.name + '.png') : flash(savePng, 'Failed');
+      }, 'image/png');
+    };
+    image.onerror = function () { flash(savePng, 'Failed'); };
+    image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(DATA.svg);
+  };
+
+  /* ---- a thing's name under the pointer ---- */
+
+  var hovered = null;
+  view.addEventListener('pointerover', function (event) {
+    var group = event.target.closest && event.target.closest('g[data-name]');
+    if (group === hovered) return;
+    if (hovered) hovered.classList.remove('hover');
+    hovered = group;
+    if (!group) {
+      tip.style.display = 'none';
+      return;
+    }
+    group.classList.add('hover');
+    tip.textContent = group.getAttribute('data-name');
+    tip.style.display = 'block';
+  });
+  view.addEventListener('pointermove', function (event) {
+    if (!hovered) return;
+    var rect = view.getBoundingClientRect();
+    var x = event.clientX - rect.left + 14;
+    var y = event.clientY - rect.top + 16;
+    // Kept inside the view, so a name near the right edge isn't cut off.
+    x = Math.min(x, rect.width - tip.offsetWidth - 4);
+    y = Math.min(y, rect.height - tip.offsetHeight - 4);
+    tip.style.left = x + 'px';
+    tip.style.top = y + 'px';
+  });
+  view.addEventListener('pointerleave', function () {
+    if (hovered) hovered.classList.remove('hover');
+    hovered = null;
+    tip.style.display = 'none';
+  });
+
+  /* ---- findings ---- */
+
+  var panel = document.getElementById('findings');
+  var list = document.getElementById('finding-list');
+  var toggle = document.getElementById('toggle-findings');
+  var count = DATA.findings.length;
+
+  function showPanel(open) {
+    panel.hidden = !open;
+    toggle.setAttribute('aria-pressed', String(open));
+    refit();
+  }
+  if (count === 0) {
+    toggle.textContent = 'No findings';
+    toggle.disabled = true;
+    panel.hidden = true;
+  } else {
+    toggle.textContent = count === 1 ? '1 finding' : count + ' findings';
+    toggle.onclick = function () { showPanel(panel.hidden); };
+    showPanel(true);
+  }
+
+  var lit = [];
+  var chosen = null;
+  function unlight() {
+    lit.forEach(function (group) { group.classList.remove('lit'); });
+    lit = [];
+    if (chosen) chosen.classList.remove('chosen');
+    chosen = null;
+  }
+
+  // A finding names the line of the statement at fault; what that statement
+  // drew lights up, and the view moves to it if it is out of sight.
+  function light(finding, button) {
+    unlight();
+    chosen = button;
+    button.classList.add('chosen');
+    lit = Array.from(svg.querySelectorAll('g[data-line="' + finding.line + '"]'));
+    lit.forEach(function (group) {
+      group.classList.remove('lit');
+      void group.getBoundingClientRect();
+      group.classList.add('lit');
+    });
+    if (lit.length === 0) return;
+    var room = view.getBoundingClientRect();
+    var r = null;
+    lit.forEach(function (group) {
+      var b = group.getBoundingClientRect();
+      r = r ? { l: Math.min(r.l, b.left), t: Math.min(r.t, b.top), r: Math.max(r.r, b.right), b: Math.max(r.b, b.bottom) }
+            : { l: b.left, t: b.top, r: b.right, b: b.bottom };
+    });
+    var inside = r.l >= room.left && r.r <= room.right && r.t >= room.top && r.b <= room.bottom;
+    if (inside) return;
+    at.x += (room.left + room.width / 2) - (r.l + r.r) / 2;
+    at.y += (room.top + room.height / 2) - (r.t + r.b) / 2;
+    fitted = false;
+    apply();
+  }
+
+  DATA.findings.forEach(function (finding) {
+    var item = document.createElement('li');
+    var button = document.createElement('button');
+    button.type = 'button';
+    var where = document.createElement('span');
+    where.className = 'where';
+    where.textContent = 'line ' + finding.line + ' ';
+    var kind = document.createElement('span');
+    kind.className = 'kind';
+    kind.textContent = finding.kind;
+    button.append(where, kind, document.createElement('br'), document.createTextNode(finding.message));
+    if (!svg.querySelector('g[data-line="' + finding.line + '"]')) {
+      var note = document.createElement('span');
+      note.className = 'note';
+      note.textContent = 'Nothing drawn comes from that line.';
+      button.append(note);
+    }
+    button.onclick = function () { light(finding, button); };
+    item.append(button);
+    list.append(item);
+  });
+
+  /* ---- keys ---- */
+
+  document.addEventListener('keydown', function (event) {
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    if (event.target.closest && event.target.closest('input, textarea')) return;
+    if (event.key === '+' || event.key === '=') zoomMiddle(1.25);
+    else if (event.key === '-' || event.key === '_') zoomMiddle(0.8);
+    else if (event.key === '0') fit();
+    else if (event.key === '1') { fitted = false; center(1); }
+    else if (event.key === 'f' && !full.hidden) toggleFull();
+    else if (event.key === 'Escape') unlight();
+    else return;
+    event.preventDefault();
+  });
+
+  open();
+})();
+</script>
+</body>
+</html>
+`;