proctolog 0.1.0

data/public/viewer.js

@@ -0,0 +1,808 @@
+// A picture looked at closely: it opens over the page at the size that fits,
+// and from there the wheel, a pinch, + and - bring it nearer and farther, a
+// drag or the arrows move it, 0 fits it again and 1 shows it at its own size.
+// A click marks a point and Shift with a drag marks a region, and the note on
+// it is written right there: the box stays on the picture, the page that
+// opened the viewer writes its form beside it, and the viewer stays as it was,
+// zoom and all, for the next. The notes the picture has are drawn on it, and
+// a click on one opens it there the same way, to be written over or
+// withdrawn. [ and ] go through the pictures it was opened with.
+//
+// A pair, the same screen before a change and after it, is looked at five
+// ways: side by side; swipe, the after picture uncovered over the before up
+// to a divider; blink, one and then the other; onion skin, the after picture
+// seen through over the before; and difference, where only what changed is
+// lit. n goes from one changed region to the next. A mark is made side by
+// side, on the half it is made on, and in blink, on the one showing.
+
+const NEAREST = 12;
+const DRAG = 4;
+// Between the halves side by side, in the pictures' own pixels.
+const GAP = 16;
+
+const VIEWS = {
+	s: ["side", "side by side"],
+	w: ["swipe", "swipe"],
+	b: ["blink", "blink"],
+	o: ["onion", "onion skin"],
+	d: ["difference", "difference"],
+};
+
+let dialog;
+let stage;
+let canvas;
+let first;
+let second;
+let divider;
+let slider;
+let outlines;
+let caption;
+let keyRow;
+let closer;
+let marking;
+// The notes drawn on the picture, and beside the one being written, its form.
+let notes;
+let beside;
+let pictures = [];
+let at = 0;
+// What the page does with a place marked, and once the viewer closes.
+let annotate;
+let whenClosed;
+// The place a note is being written on, by its half and its box, and the
+// note it is when it was written before; the notes written here since the
+// viewer opened, which the page shows once it closes; and those withdrawn here.
+let draft;
+let written = new Map();
+let withdrawn = new Set();
+// The picture's own size, and where it is drawn: its scale, and its corner on the stage.
+let view = { scale: 1, x: 0, y: 0 };
+let fitted = 1;
+// How a pair is looked at, which half blink shows, where the swipe divides
+// it, and the regions where its halves differ, with the one gone to last.
+let mode = "side";
+let showing = "after";
+let divide = 0.5;
+let changes;
+let change = -1;
+const compared = new Map();
+
+const made = (tag, className, text) =>
+	Object.assign(document.createElement(tag), {
+		className,
+		...(text === undefined ? {} : { textContent: text }),
+	});
+
+const build = () => {
+	dialog = made("dialog", "viewer");
+	dialog.dataset.desk = "";
+	dialog.tabIndex = -1;
+	dialog.setAttribute("aria-label", "Picture");
+	stage = made("div", "stage");
+	canvas = made("div", "canvas");
+	first = made("img", "first");
+	second = made("img", "second");
+	for (const image of [first, second]) image.draggable = false;
+	divider = made("span", "divider");
+	outlines = made("div", "outlines");
+	notes = made("div", "notes");
+	canvas.append(first, second, divider, outlines, notes);
+	marking = made("span", "marking");
+	marking.hidden = true;
+	beside = made("div", "beside-note");
+	beside.hidden = true;
+	stage.append(canvas, marking, beside);
+	slider = Object.assign(made("input", "swipe"), {
+		type: "range",
+		min: 0,
+		max: 100,
+		value: 50,
+	});
+	slider.setAttribute("aria-label", "Where the after picture begins");
+	slider.hidden = true;
+	caption = made("p", "caption");
+	keyRow = made("p", "keys");
+	// The way out for the pointer, where windows keep theirs; Esc is the key's.
+	closer = made("button", "close", "✕");
+	closer.type = "button";
+	closer.title = "Close (Esc)";
+	closer.setAttribute("aria-label", "Close the picture");
+	closer.addEventListener("click", () => dialog.close());
+	dialog.append(stage, slider, caption, keyRow, closer);
+	document.body.append(dialog);
+	listen();
+};
+
+const pair = () => !!pictures[at]?.pair;
+const halvesOf = (picture) => picture?.pair ?? (picture ? [picture] : []);
+
+// The pictures as laid on the canvas, in their own pixels: one alone, or a
+// pair's halves side by side or one over the other, from the top left.
+const layout = () => {
+	const size = (image) => ({
+		width: image.naturalWidth,
+		height: image.naturalHeight,
+	});
+	const one = size(first);
+	if (!pair()) return { ...one, halves: [{ image: first, x: 0 }] };
+	const other = size(second);
+	const height = Math.max(one.height, other.height);
+	if (mode === "side")
+		return {
+			width: one.width + GAP + other.width,
+			height,
+			halves: [
+				{ image: first, x: 0 },
+				{ image: second, x: one.width + GAP },
+			],
+		};
+	return {
+		width: Math.max(one.width, other.width),
+		height,
+		halves: [
+			{ image: first, x: 0 },
+			{ image: second, x: 0 },
+		],
+	};
+};
+
+const draw = () => {
+	const laid = layout();
+	canvas.dataset.view = pair() ? mode : "";
+	Object.assign(canvas.style, {
+		width: `${laid.width}px`,
+		height: `${laid.height}px`,
+		transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+	});
+	for (const { image, x } of laid.halves) image.style.left = `${x}px`;
+	second.hidden = !pair() || (mode === "blink" && showing === "before");
+	first.hidden = pair() && mode === "blink" && showing === "after";
+	second.style.clipPath =
+		pair() && mode === "swipe" ? `inset(0 0 0 ${divide * laid.width}px)` : "";
+	divider.hidden = !pair() || mode !== "swipe";
+	divider.style.left = `${divide * laid.width}px`;
+	// Lines as thin on the screen whatever the zoom.
+	canvas.style.setProperty("--line", `${1 / view.scale}px`);
+	slider.hidden = divider.hidden;
+	slider.value = String(Math.round(divide * 100));
+	// A divider put away with the focus on it gives the keys back to the viewer.
+	if (slider.hidden && document.activeElement === slider)
+		dialog.focus({ preventScroll: true });
+	outline(laid);
+	drawNotes(laid);
+	stage.dataset.zoomed = String(view.scale > fitted * 1.01);
+};
+
+// A box on a half, in fractions of it, laid in the canvas's own pixels.
+const laidOn = (element, { image, x }, [left, top, width, height]) =>
+	Object.assign(element.style, {
+		left: `${x + left * image.naturalWidth}px`,
+		top: `${top * image.naturalHeight}px`,
+		width: `${width * image.naturalWidth}px`,
+		height: `${height * image.naturalHeight}px`,
+	});
+
+// A note's box as the page draws it on a picture, in percent of it.
+const boxOf = (region) =>
+	["left", "top", "width", "height"].map(
+		(side) => (Number.parseFloat(region.style[side]) || 0) / 100,
+	);
+
+// The notes on a half, by their id and box: those the page has and those
+// written here, less those withdrawn here.
+const notesOn = (figure) =>
+	[
+		...[...(figure?.querySelectorAll(":scope > .region") ?? [])].map(
+			(region) => ({ id: region.dataset.note, box: boxOf(region) }),
+		),
+		...(written.get(figure) ?? []),
+	].filter(({ id }) => !withdrawn.has(id));
+
+// The notes on each half showing, and the place a note is being written on,
+// in place of the note it is when it was written before; a pin is a box of
+// no size.
+const drawNotes = (laid) => {
+	notes.replaceChildren();
+	const halves = halvesOf(pictures[at]);
+	laid.halves.forEach((half, index) => {
+		if (half.image.hidden) return;
+		for (const { id, box } of notesOn(halves[index]?.figure))
+			if (id !== draft?.note) notes.append(noteBox(half, box, { id, index }));
+		if (draft?.half === index)
+			notes.append(noteBox(half, draft.box, { drafted: true }));
+	});
+	placeBeside();
+};
+
+const noteBox = (half, box, { id, index, drafted = false }) => {
+	const pin = !box[2] && !box[3];
+	const element = made(
+		"span",
+		["note", ...(pin ? ["pin"] : []), ...(drafted ? ["drafted"] : [])].join(" "),
+	);
+	laidOn(element, half, box);
+	// A pin is as large on the screen at any zoom: its size is the stylesheet's.
+	if (pin) Object.assign(element.style, { width: "", height: "" });
+	// A note saved is opened by a click on it.
+	if (id) Object.assign(element.dataset, { note: id, half: index, box });
+	return element;
+};
+
+// Whether the picture showing has a note that a click opens, besides the
+// one open.
+const openable = () =>
+	markable() &&
+	halvesOf(pictures[at]).some(({ figure }) =>
+		notesOn(figure).some(({ id }) => id && id !== draft?.note),
+	);
+
+// The form stands beside the box it is about, on whichever side has room,
+// and moves with it as the picture does.
+const GUTTER = 12;
+const placeBeside = () => {
+	beside.hidden = !draft;
+	const box = notes.querySelector(".drafted");
+	if (!draft || !box) return;
+	const room = stage.getBoundingClientRect();
+	const drawn = box.getBoundingClientRect();
+	const { width, height } = beside.getBoundingClientRect();
+	const right = drawn.right - room.left + GUTTER;
+	const left = drawn.left - room.left - GUTTER - width;
+	const x =
+		right + width <= room.width
+			? right
+			: left >= 0
+				? left
+				: room.width - width - GUTTER;
+	const y = Math.min(
+		Math.max(drawn.top - room.top, GUTTER),
+		room.height - height - GUTTER,
+	);
+	Object.assign(beside.style, { left: `${x}px`, top: `${Math.max(y, 0)}px` });
+};
+
+// Each changed region outlined, on each half it shows on.
+const outline = (laid) => {
+	outlines.replaceChildren();
+	if (!pair() || !changes?.boxes.length) return;
+	const offsets = [...new Set(laid.halves.map(({ x }) => x))];
+	changes.boxes.forEach((box, index) => {
+		for (const x of offsets) {
+			const line = made("span", "change");
+			if (index === change) line.dataset.current = "";
+			Object.assign(line.style, {
+				left: `${box.left + x}px`,
+				top: `${box.top}px`,
+				width: `${box.width}px`,
+				height: `${box.height}px`,
+			});
+			outlines.append(line);
+		}
+	});
+};
+
+// At the size that shows all of it, never larger than it is, in the middle.
+const fit = () => {
+	const room = stage.getBoundingClientRect();
+	const { width, height } = layout();
+	if (!width || !room.width) return;
+	fitted = Math.min(room.width / width, room.height / height, 1);
+	view = {
+		scale: fitted,
+		x: (room.width - width * fitted) / 2,
+		y: (room.height - height * fitted) / 2,
+	};
+	draw();
+};
+
+// Nearer or farther by a factor, holding still the point of the stage given.
+const zoom = (factor, point) => {
+	const room = stage.getBoundingClientRect();
+	const hold = point ?? { x: room.width / 2, y: room.height / 2 };
+	const scale = Math.min(
+		Math.max(view.scale * factor, fitted / 2),
+		Math.max(NEAREST, fitted),
+	);
+	const by = scale / view.scale;
+	view = {
+		scale,
+		x: hold.x - (hold.x - view.x) * by,
+		y: hold.y - (hold.y - view.y) * by,
+	};
+	draw();
+};
+
+const move = (x, y) => {
+	view = { ...view, x: view.x + x, y: view.y + y };
+	draw();
+};
+
+const onStage = (event) => {
+	const room = stage.getBoundingClientRect();
+	return { x: event.clientX - room.left, y: event.clientY - room.top };
+};
+
+// Whether a mark can be made in the view the picture is looked at in: not
+// where a pair's halves are seen together, nor on a picture that takes no note.
+const markable = () =>
+	!!annotate && (!pair() || mode === "side" || mode === "blink");
+
+// The half a mark made at a point of the stage goes on: the picture alone,
+// side by side the half the point is over (across the gap, the nearer), and
+// in blink the one showing.
+const halfAt = (point) => {
+	if (!pair()) return 0;
+	if (mode === "blink") return showing === "after" ? 1 : 0;
+	const between = (layout().halves[1].x - GAP / 2) * view.scale + view.x;
+	return point.x < between ? 0 : 1;
+};
+
+// A point of the stage held within a half as it is drawn there.
+const heldIn = (point, half) => {
+	const { image, x } = layout().halves[half];
+	const left = view.x + x * view.scale;
+	return {
+		x: Math.min(
+			Math.max(point.x, left),
+			left + image.naturalWidth * view.scale,
+		),
+		y: Math.min(
+			Math.max(point.y, view.y),
+			view.y + image.naturalHeight * view.scale,
+		),
+	};
+};
+
+// A place of the stage as a fraction of the half marked, held within it.
+const within = (fraction) => Math.min(Math.max(fraction, 0), 1);
+const onPicture = (point, half) => {
+	const { image, x } = layout().halves[half];
+	return {
+		x: within(
+			(point.x - view.x - x * view.scale) / (image.naturalWidth * view.scale),
+		),
+		y: within((point.y - view.y) / (image.naturalHeight * view.scale)),
+	};
+};
+
+const plural = (count, one) => `${count} ${one}${count === 1 ? "" : "s"}`;
+
+// What the caption says of a pair: how it is looked at, and what the
+// comparison of its halves found, once it has.
+const comparing = () => {
+	const name = Object.values(VIEWS).find(([key]) => key === mode)[1];
+	const looked =
+		mode === "blink"
+			? `${name}: ${showing}`
+			: name.replace(/^./, (letter) => letter.toUpperCase());
+	if (!changes) return [looked, "Comparing…"];
+	if (!changes.compared) return [looked, "Regions need ImageMagick"];
+	const sized = new Set(changes.sizes.map((size) => size.join("x"))).size > 1;
+	const found = changes.boxes.length
+		? change >= 0
+			? `region ${change + 1} of ${changes.boxes.length}`
+			: plural(changes.boxes.length, "changed region")
+		: "Identical";
+	return [
+		looked,
+		sized ? "Different sizes: compared from the top left" : "",
+		found,
+	];
+};
+
+const say = () => {
+	const picture = pictures[at];
+	caption.textContent = [
+		pictures.length > 1 ? `${at + 1} of ${pictures.length}` : "",
+		picture.name ?? "",
+		...(pair() ? comparing() : []),
+	]
+		.filter(Boolean)
+		.join(" · ");
+	keys();
+};
+
+const keyHint = (pressed, does, current = false) => {
+	const hint = made("span", current ? "current" : "");
+	hint.append(
+		...pressed.split(" ").map((key) => made("kbd", "", key)),
+		` ${does}`,
+	);
+	return hint;
+};
+
+// The keys of what is open: a pair's views and regions, and where a mark
+// can go in the view it is looked at in.
+const keys = () => {
+	if (draft)
+		return keyRow.replaceChildren(
+			keyHint("⌘ Enter", "save the note"),
+			keyHint("Esc", "put it away"),
+			keyHint("scroll", "zoom"),
+			keyHint("drag", "move"),
+			...(draft.note
+				? openable()
+					? [keyHint("click", "another note: open it")]
+					: []
+				: [keyHint("Shift drag", "mark again")]),
+		);
+	keyRow.replaceChildren(
+		keyHint("scroll + -", "zoom"),
+		keyHint(mode === "swipe" && pair() ? "← ↑ ↓ →" : "drag ← ↑ ↓ →", "move"),
+		keyHint("0", "fit"),
+		keyHint("1", "full size"),
+		...(markable()
+			? [
+					keyHint("click", "mark a point"),
+					keyHint("Shift drag", "mark a region"),
+					...(openable() ? [keyHint("click", "a note: open it")] : []),
+				]
+			: annotate
+				? [made("span", "off", "marking is off in this view")]
+				: []),
+		...(pair()
+			? [
+					...Object.entries(VIEWS).map(([key, [name, said]]) =>
+						keyHint(key, said, mode === name),
+					),
+					...(mode === "swipe" ? [keyHint("drag", "the divider")] : []),
+					keyHint("n", "next region"),
+				]
+			: []),
+		keyHint("[ ]", "other pictures"),
+		keyHint("Esc", "close"),
+	);
+};
+
+const compare = async (picture) => {
+	const file = (src) => new URL(src, location.href).pathname.split("/").pop();
+	const address =
+		picture.compare ??
+		`/pictures/${picture.pair.map(({ src }) => file(src)).join("/against/")}`;
+	if (!compared.has(address))
+		compared.set(
+			address,
+			fetch(address, { headers: { Accept: "application/json" } }).then(
+				(response) =>
+					response.ok
+						? response.json()
+						: { compared: false, boxes: [], sizes: [] },
+				() => ({ compared: false, boxes: [], sizes: [] }),
+			),
+		);
+	const found = await compared.get(address);
+	if (pictures[at] !== picture) return;
+	changes = found;
+	draw();
+	say();
+};
+
+const show = (index) => {
+	putAway();
+	at = (index + pictures.length) % pictures.length;
+	const picture = pictures[at];
+	changes = undefined;
+	change = -1;
+	const halves = halvesOf(picture);
+	first.src = halves[0].src;
+	first.alt = halves[0].alt ?? "";
+	if (picture.pair) {
+		second.src = halves[1].src;
+		second.alt = halves[1].alt ?? "";
+		compare(picture);
+	} else second.removeAttribute("src");
+	say();
+	// Fitted once, when it is known how large it is: the late load of a
+	// picture already at hand must not undo a zoom made since.
+	const shown = picture;
+	Promise.all(
+		[first, ...(picture.pair ? [second] : [])].map((image) =>
+			image.decode().catch(() => {}),
+		),
+	).then(() => pictures[at] === shown && dialog.open && fit());
+};
+
+// Looks at a pair another way, holding the zoom when the layout stays.
+const look = (name) => {
+	if (!pair()) return;
+	const before = mode;
+	showing =
+		name === "blink" && mode === "blink" && showing === "after"
+			? "before"
+			: "after";
+	mode = name;
+	if ((before === "side") !== (name === "side")) fit();
+	else draw();
+	say();
+};
+
+// To the next region where the halves differ: near enough to see it whole.
+const nextChange = () => {
+	if (!pair() || !changes?.boxes.length) return;
+	change = (change + 1) % changes.boxes.length;
+	const box = changes.boxes[change];
+	const laid = layout();
+	const x = laid.halves.at(-1).x + box.left;
+	const room = stage.getBoundingClientRect();
+	const margin = 24;
+	const scale = Math.min(
+		room.width / (box.width + margin * 2),
+		room.height / (box.height + margin * 2),
+		Math.max(NEAREST, fitted),
+	);
+	view = {
+		scale: Math.max(scale, fitted),
+		x: room.width / 2 - (x + box.width / 2) * Math.max(scale, fitted),
+		y: room.height / 2 - (box.top + box.height / 2) * Math.max(scale, fitted),
+	};
+	draw();
+	say();
+};
+
+// Whether the form open holds words not saved: a note written before is
+// measured against what it said.
+const unsaved = () => {
+	const words = beside.querySelector("textarea");
+	return !!words && words.value !== words.defaultValue;
+};
+
+// A place marked: its box stays on the picture, and the page writes the
+// note's form beside it. Marking again while the form of a new note is open
+// moves the place, and keeps the words typed; a note written before keeps its
+// place, and its form gives way to the new one only once nothing in it
+// waits to be saved.
+const mark = (half, box) => {
+	if (draft?.note && unsaved()) return;
+	if (draft?.note) putAway();
+	write(half, box);
+};
+
+// A note drawn on the picture, opened beside it with its words; from the
+// form of another, only once nothing in that one waits to be saved.
+const open = (element) => {
+	const { note, half, box } = element.dataset;
+	if (draft?.note === note || unsaved()) return;
+	putAway();
+	write(Number(half), box.split(",").map(Number), note);
+};
+
+const write = (half, box, note) => {
+	const picture = pictures[at];
+	const marked = { ...picture, ...halvesOf(picture)[half] };
+	// Shown before the page writes in it, so that the form can take the focus.
+	beside.hidden = false;
+	if (!annotate?.(marked, box, beside, note)) {
+		beside.hidden = !draft;
+		return;
+	}
+	draft = { half, box, figure: marked.figure, note };
+	draw();
+	say();
+};
+
+// The form put away, the note saved or not: the viewer is as it was.
+const putAway = () => {
+	if (!draft) return;
+	draft = undefined;
+	beside.replaceChildren();
+	draw();
+	say();
+	dialog.focus({ preventScroll: true });
+};
+
+// A note saved stays drawn on its picture while the viewer is open, and one
+// withdrawn is no longer drawn.
+const kept = ({ detail: { id, withdrawn: gone } }) => {
+	const { figure, box, note } = draft;
+	if (gone) withdrawn.add(id);
+	else if (!note) written.set(figure, [...(written.get(figure) ?? []), { id, box }]);
+	putAway();
+};
+
+const swipeTo = (point) => {
+	const { width } = layout();
+	divide = within((point.x - view.x) / (width * view.scale));
+	draw();
+};
+
+const listen = () => {
+	// Fingers on the stage: one drags, two pinch.
+	const touching = new Map();
+	let drag;
+
+	stage.addEventListener(
+		"wheel",
+		(event) => {
+			// The note's form scrolls as a form does.
+			if (beside.contains(event.target)) return;
+			event.preventDefault();
+			// A pinch on a trackpad comes as a wheel with Ctrl, in finer steps.
+			const step = event.ctrlKey ? 0.012 : 0.0018;
+			zoom(Math.exp(-event.deltaY * step), onStage(event));
+		},
+		{ passive: false },
+	);
+
+	stage.addEventListener("pointerdown", (event) => {
+		if (event.button !== 0 || beside.contains(event.target)) return;
+		stage.setPointerCapture(event.pointerId);
+		touching.set(event.pointerId, onStage(event));
+		const from = onStage(event);
+		drag = {
+			from,
+			last: from,
+			moved: false,
+			// A note drawn on the picture that a click here opens.
+			note: markable() && event.target.closest(".note[data-note]"),
+			// The half a mark from here goes on, whichever way the drag then goes.
+			half: markable() ? halfAt(from) : undefined,
+			marking: event.shiftKey && markable(),
+			swiping: pair() && mode === "swipe",
+		};
+		if (drag.swiping) swipeTo(drag.from);
+	});
+
+	stage.addEventListener("pointermove", (event) => {
+		if (!touching.has(event.pointerId)) return;
+		const now = onStage(event);
+		if (touching.size === 2) {
+			const [one, other] = [...touching.values()];
+			const before = Math.hypot(one.x - other.x, one.y - other.y);
+			touching.set(event.pointerId, now);
+			const [firstFinger, secondFinger] = [...touching.values()];
+			const after = Math.hypot(
+				firstFinger.x - secondFinger.x,
+				firstFinger.y - secondFinger.y,
+			);
+			if (before)
+				zoom(after / before, {
+					x: (firstFinger.x + secondFinger.x) / 2,
+					y: (firstFinger.y + secondFinger.y) / 2,
+				});
+			drag.moved = true;
+			return;
+		}
+		touching.set(event.pointerId, now);
+		if (!drag) return;
+		if (Math.hypot(now.x - drag.from.x, now.y - drag.from.y) >= DRAG)
+			drag.moved = true;
+		if (drag.swiping) swipeTo(now);
+		else if (drag.marking) {
+			if (!drag.moved) return;
+			// Drawn as it will be kept: within the half it began on.
+			const one = heldIn(drag.from, drag.half);
+			const other = heldIn(now, drag.half);
+			Object.assign(marking.style, {
+				left: `${Math.min(one.x, other.x)}px`,
+				top: `${Math.min(one.y, other.y)}px`,
+				width: `${Math.abs(other.x - one.x)}px`,
+				height: `${Math.abs(other.y - one.y)}px`,
+			});
+			marking.hidden = false;
+		} else if (drag.moved) {
+			move(now.x - drag.last.x, now.y - drag.last.y);
+		}
+		drag.last = now;
+	});
+
+	const release = (event) => {
+		if (!touching.delete(event.pointerId) || !drag || touching.size) return;
+		const { from, moved, marking: drawn, swiping, half, note } = drag;
+		drag = undefined;
+		marking.hidden = true;
+		const here = onStage(event);
+		if (event.type === "pointercancel" || swiping || half === undefined) return;
+		if (!moved && note && !event.shiftKey) return open(note);
+		if (!moved) {
+			const point = onPicture(here, half);
+			return mark(half, [point.x, point.y, 0, 0]);
+		}
+		if (!drawn) return;
+		const one = onPicture(from, half);
+		const other = onPicture(here, half);
+		mark(half, [
+			Math.min(one.x, other.x),
+			Math.min(one.y, other.y),
+			Math.abs(other.x - one.x),
+			Math.abs(other.y - one.y),
+		]);
+	};
+	stage.addEventListener("pointerup", release);
+	stage.addEventListener("pointercancel", release);
+
+	slider.addEventListener("input", () => {
+		divide = Number(slider.value) / 100;
+		draw();
+	});
+
+	const STEP = 80;
+	const actions = {
+		"+": () => zoom(1.25),
+		"=": () => zoom(1.25),
+		"-": () => zoom(0.8),
+		_: () => zoom(0.8),
+		0: fit,
+		1: () => zoom(1 / view.scale),
+		ArrowLeft: () => move(STEP, 0),
+		ArrowRight: () => move(-STEP, 0),
+		ArrowUp: () => move(0, STEP),
+		ArrowDown: () => move(0, -STEP),
+		"[": () => show(at - 1),
+		"]": () => show(at + 1),
+		" ": () => dialog.close(),
+		n: nextChange,
+		...Object.fromEntries(
+			Object.entries(VIEWS).map(([key, [name]]) => [key, () => look(name)]),
+		),
+	};
+	dialog.addEventListener("keydown", (event) => {
+		if (event.metaKey || event.ctrlKey || event.altKey) return;
+		// The page under the viewer has keys of its own: none of these is for it.
+		event.stopPropagation();
+		// Escape puts the note's form away before it closes the viewer, and keeps
+		// it while it holds words not saved, as the page's form does. It is
+		// answered as a key: the browser lets a dialog refuse to close only so
+		// often.
+		if (event.key === "Escape" && draft) {
+			event.preventDefault();
+			if (!unsaved()) putAway();
+			return;
+		}
+		// What is typed into the note is words, not keys; ⌘ Enter, which saves
+		// it, went to the page's form above.
+		if (beside.contains(event.target)) return;
+		// The divider, while it has the focus, moves on the arrows itself.
+		if (event.target === slider && event.key.startsWith("Arrow")) return;
+		if (!Object.hasOwn(actions, event.key)) return;
+		event.preventDefault();
+		actions[event.key]();
+	});
+
+	beside.addEventListener("closed", putAway);
+	beside.addEventListener("noted", kept);
+
+	addEventListener("resize", () => dialog.open && fit());
+	dialog.addEventListener("close", () => {
+		draft = undefined;
+		beside.replaceChildren();
+		beside.hidden = true;
+		// The browser gives the focus back as it closes; this event comes after,
+		// when the owner may already have moved on with the keys.
+		const at = document.activeElement;
+		if (!at || at === document.body || dialog.contains(at))
+			opener?.focus({ preventScroll: true });
+		whenClosed?.();
+	});
+};
+
+let opener;
+
+// Opens on one of `shown`, each a picture by its `src`, `alt` and `name`, or
+// a pair by its `name` and its two halves in `pair`, each a picture, and the
+// address that compares them in `compare` when it is not the description's; with
+// whatever else the caller keeps on them, the page's `figure` first. Once
+// the owner marks a place, `note` is called with the picture marked (a
+// pair's half carrying what its pair does), "x, y, width, height" in
+// fractions of it, and the element beside the place to write the note's form
+// in; it answers whether it did. A note drawn there and clicked is called for
+// the same way, with its id after them; the page's own notes are the regions
+// in a figure, by their `data-note`. The form says it is done by a "noted"
+// event once the note is saved, with its `id` and whether it was `withdrawn`,
+// or "closed" when it is put away. `closed` is called once the viewer is.
+export const viewPictures = (shown, index = 0, { note, closed } = {}) => {
+	if (!shown.length) return;
+	if (!dialog) build();
+	pictures = shown;
+	annotate = note;
+	whenClosed = closed;
+	written = new Map();
+	withdrawn = new Set();
+	dialog.toggleAttribute("data-takes-notes", !!note);
+	opener = document.activeElement;
+	mode = "side";
+	showing = "after";
+	divide = 0.5;
+	dialog.showModal();
+	// Its keys are its own from the start, whatever opened it.
+	dialog.focus({ preventScroll: true });
+	show(index);
+};