proctolog 0.1.0 → 0.2.0

data/public/viewer.js

@@ -6,27 +6,66 @@
 // 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.
+// withdrawn. [ and ] go through the pictures it was opened with. Once the
+// stage no longer shows the whole of what is looked at, a map in its corner
+// says where it is, and a press there goes to that place.
 //
-// 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.
+// A pair, the same screen before a change and after it, has a panel beside
+// the stage, quiet unless asked: the five ways a pair is looked at, each a
+// button with its key, the one it is looked at in saying what it shows. A
+// view's key again goes back to side by side; blink's shows the other half,
+// and Shift B sets it blinking by itself, or stops it. Under them, the
+// regions where the halves differ, outlined dashed on the picture as a note
+// is drawn solid. n and p focus on the next and the one before, which the
+// panel shows as each half has it, a press on either, or Enter, writing a
+// note there. Focusing keeps the zoom the owner chose: seen whole, the
+// region is only outlined; zoomed in, the stage goes near enough to see it
+// whole, as z does. A mark is made side by side, on the half it is made on,
+// and in blink on the one showing, which then holds still.
+
+import { keyOf } from "./keys.js";
 
 const NEAREST = 12;
 const DRAG = 4;
 // Between the halves side by side, in the pictures' own pixels.
 const GAP = 16;
+// How long blink shows each half, when it blinks by itself, in milliseconds.
+const BLINK = 700;
+// The largest the corner's map is drawn, in the stage's pixels.
+const MAP = { width: 180, height: 120 };
+// The least a region is drawn on the map, in the stage's pixels, so that a
+// speck of change still shows.
+const SPECK = 2;
+// How much of the picture around a region its crops in the panel show, in
+// the picture's pixels, and the most room they take there.
+const AROUND = 16;
+const CROP = { width: 200, height: 150 };
+// Beyond so many regions the panel numbers no more of them: n and p reach the rest.
+const NUMBERED = 60;
+// How much stage is left around a region it is brought near to, in the
+// stage's pixels.
+const MARGIN = 24;
 
-const VIEWS = {
-	s: ["side", "side by side"],
-	w: ["swipe", "swipe"],
-	b: ["blink", "blink"],
-	o: ["onion", "onion skin"],
-	d: ["difference", "difference"],
-};
+// The ways a pair is looked at: the key that asks for each, the mode it sets,
+// its name in the panel, and the line under that name while it is the one
+// looked at. Blink has no line here: what it shows changes as it blinks.
+const VIEWS = [
+	{ key: "s", mode: "side", name: "Side by side", shows: "before, then after" },
+	{ key: "w", mode: "swipe", name: "Swipe", shows: "drag the line across" },
+	{ key: "b", mode: "blink", name: "Blink" },
+	{
+		key: "o",
+		mode: "onion",
+		name: "Onion skin",
+		shows: "the after, seen through",
+	},
+	{
+		key: "d",
+		mode: "difference",
+		name: "Difference",
+		shows: "only what changed is lit",
+	},
+];
 
 let dialog;
 let stage;
@@ -40,6 +79,8 @@ let caption;
 let keyRow;
 let closer;
 let marking;
+let panel;
+let map;
 // The notes drawn on the picture, and beside the one being written, its form.
 let notes;
 let beside;
@@ -57,20 +98,28 @@ 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.
+// Whether the owner is pressing on the stage, which holds blink still.
+let pressing = false;
+// How a pair is looked at, which half blink shows and what turns it when it
+// blinks by itself, where the swipe divides it, and the regions where its
+// halves differ, with the one focused on.
 let mode = "side";
 let showing = "after";
+let blinker;
 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 }),
-	});
+// Puts content in an element: text, elements, and lists of them. What is
+// false, empty or missing is left out, so that a part can say `when && it`.
+const fill = (element, ...content) => {
+	element.replaceChildren(...content.flat().filter(Boolean));
+	return element;
+};
+
+const made = (tag, className, ...content) =>
+	fill(Object.assign(document.createElement(tag), { className }), ...content);
 
 const build = () => {
 	dialog = made("dialog", "viewer");
@@ -90,7 +139,11 @@ const build = () => {
 	marking.hidden = true;
 	beside = made("div", "beside-note");
 	beside.hidden = true;
-	stage.append(canvas, marking, beside);
+	map = buildMap();
+	stage.append(canvas, marking, map, beside);
+	panel = made("aside", "compare");
+	panel.setAttribute("aria-label", "Comparing the pair");
+	panel.hidden = true;
 	slider = Object.assign(made("input", "swipe"), {
 		type: "range",
 		min: 0,
@@ -107,13 +160,19 @@ const build = () => {
 	closer.title = "Close (Esc)";
 	closer.setAttribute("aria-label", "Close the picture");
 	closer.addEventListener("click", () => dialog.close());
-	dialog.append(stage, slider, caption, keyRow, closer);
+	dialog.append(stage, panel, slider, caption, keyRow, closer);
 	document.body.append(dialog);
 	listen();
 };
 
 const pair = () => !!pictures[at]?.pair;
 const halvesOf = (picture) => picture?.pair ?? (picture ? [picture] : []);
+// Whether one of the regions where a pair's halves differ is focused on.
+const focused = () => change >= 0;
+
+// Only side by side lays the halves apart: every other view lays one over
+// the other.
+const sideBySide = (way) => way === "side";
 
 // 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.
@@ -126,7 +185,7 @@ const layout = () => {
 	if (!pair()) return { ...one, halves: [{ image: first, x: 0 }] };
 	const other = size(second);
 	const height = Math.max(one.height, other.height);
-	if (mode === "side")
+	if (sideBySide(mode))
 		return {
 			width: one.width + GAP + other.width,
 			height,
@@ -169,18 +228,105 @@ const draw = () => {
 		dialog.focus({ preventScroll: true });
 	outline(laid);
 	drawNotes(laid);
-	stage.dataset.zoomed = String(view.scale > fitted * 1.01);
+	drawMap(laid);
+	stage.dataset.zoomed = String(zoomedIn());
 };
 
-// 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]) =>
+// Whether the owner has come nearer than the size that shows it all.
+const zoomedIn = () => view.scale > fitted * 1.01;
+
+// Two kinds of box. One is in pixels, the pictures' or the stage's, from the
+// top left: { left, top, width, height }, as a changed region is. A note's is
+// four fractions of its half, [left, top, width, height], as the page draws
+// it in percent.
+
+// An element laid over a box of pixels: the box moved by (x, y), then drawn
+// `scale` times as large, no side less than `least`.
+const cover = (
+	element,
+	{ left, top, width, height },
+	{ scale = 1, x = 0, y = 0, least = 0 } = {},
+) =>
 	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`,
+		left: `${(left + x) * scale}px`,
+		top: `${(top + y) * scale}px`,
+		width: `${Math.max(width * scale, least)}px`,
+		height: `${Math.max(height * scale, least)}px`,
 	});
 
+// A picture as a box of its own pixels.
+const bounds = ({ naturalWidth: width, naturalHeight: height }) => ({
+	left: 0,
+	top: 0,
+	width,
+	height,
+});
+
+// A box with `by` more of the picture all around it.
+const grown = ({ left, top, width, height }, by) => ({
+	left: left - by,
+	top: top - by,
+	width: width + by * 2,
+	height: height + by * 2,
+});
+
+// The part of a box that lies within a frame, which begins at the top left.
+const clipped = (box, frame) => {
+	const left = Math.max(box.left, 0);
+	const top = Math.max(box.top, 0);
+	return {
+		left,
+		top,
+		width: Math.max(Math.min(box.left + box.width, frame.width) - left, 0),
+		height: Math.max(Math.min(box.top + box.height, frame.height) - top, 0),
+	};
+};
+
+// A box of the pictures' pixels as it lies on one half: held within that
+// half's picture, or nothing when the half is smaller and does not reach it.
+const lyingOn = (box, image) =>
+	box.left < image.naturalWidth && box.top < image.naturalHeight
+		? clipped(box, bounds(image))
+		: undefined;
+
+// The box two points are opposite corners of.
+const boxBetween = (one, other) => ({
+	left: Math.min(one.x, other.x),
+	top: Math.min(one.y, other.y),
+	width: Math.abs(other.x - one.x),
+	height: Math.abs(other.y - one.y),
+});
+
+// A note's box, which is in fractions of a half, as the pixels of its picture,
+// and back.
+const pixelsOf = (
+	[left, top, width, height],
+	{ naturalWidth, naturalHeight },
+) => ({
+	left: left * naturalWidth,
+	top: top * naturalHeight,
+	width: width * naturalWidth,
+	height: height * naturalHeight,
+});
+
+const fractionsOf = (
+	{ left, top, width, height },
+	{ naturalWidth, naturalHeight },
+) => [
+	left / naturalWidth,
+	top / naturalHeight,
+	width / naturalWidth,
+	height / naturalHeight,
+];
+
+// A note's box on a half, laid in the canvas's own pixels.
+const laidOn = (element, { image, x }, box) =>
+	cover(element, pixelsOf(box, image), { x });
+
+// Where the pictures begin on the canvas: at two places side by side, at one
+// when they lie over each other. A changed region lies at each.
+const offsetsOf = (laid) => [...new Set(laid.halves.map(({ x }) => x))];
+
 // A note's box as the page draws it on a picture, in percent of it.
 const boxOf = (region) =>
 	["left", "top", "width", "height"].map(
@@ -217,7 +363,9 @@ const noteBox = (half, box, { id, index, drafted = false }) => {
 	const pin = !box[2] && !box[3];
 	const element = made(
 		"span",
-		["note", ...(pin ? ["pin"] : []), ...(drafted ? ["drafted"] : [])].join(" "),
+		["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.
@@ -260,37 +408,170 @@ const placeBeside = () => {
 	Object.assign(beside.style, { left: `${x}px`, top: `${Math.max(y, 0)}px` });
 };
 
-// Each changed region outlined, on each half it shows on.
+// What the region focused on is called where it is outlined: its number, and
+// the half it is on, or both when they lie one over the other.
+const tagOf = (place, halves) =>
+	`${change + 1} · ${
+		halves > 1
+			? place
+				? "after"
+				: "before"
+			: mode === "blink"
+				? showing
+				: "before and after"
+	}`;
+
+// Each changed region outlined, on each half it shows on; the one focused on
+// says which it is.
 const outline = (laid) => {
 	outlines.replaceChildren();
 	if (!pair() || !changes?.boxes.length) return;
-	const offsets = [...new Set(laid.halves.map(({ x }) => x))];
+	const offsets = offsetsOf(laid);
 	changes.boxes.forEach((box, index) => {
-		for (const x of offsets) {
+		offsets.forEach((x, place) => {
 			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`,
-			});
+			if (index === change) {
+				line.dataset.current = "";
+				line.append(made("span", "tag", tagOf(place, offsets.length)));
+			}
+			cover(line, box, { x });
 			outlines.append(line);
-		}
+		});
+	});
+};
+
+// The map in the stage's corner: what is looked at, small, with its regions
+// and the part the stage shows. It shows only while the stage does not show
+// all of it.
+let mapCanvas;
+let mapImages;
+let mapRegions;
+let mapShown;
+const buildMap = () => {
+	const holder = made("div", "minimap");
+	holder.hidden = true;
+	holder.setAttribute("aria-hidden", "true");
+	mapCanvas = made("div", "map-canvas");
+	mapImages = [made("img", ""), made("img", "")];
+	for (const image of mapImages)
+		Object.assign(image, { alt: "", draggable: false });
+	mapRegions = made("div", "map-regions");
+	mapShown = made("span", "map-shown");
+	mapCanvas.append(...mapImages, mapRegions, mapShown);
+	holder.append(mapCanvas);
+	return holder;
+};
+
+const mapScale = (laid) =>
+	Math.min(MAP.width / laid.width, MAP.height / laid.height);
+
+const drawMap = (laid) => {
+	const room = stage.getBoundingClientRect();
+	map.hidden =
+		!laid.width ||
+		onStageWhole({ left: 0, top: 0, width: laid.width, height: laid.height });
+	if (map.hidden) return;
+	const scale = mapScale(laid);
+	Object.assign(mapCanvas.style, {
+		width: `${laid.width * scale}px`,
+		height: `${laid.height * scale}px`,
 	});
+	drawMapImages(laid, scale);
+	drawMapRegions(laid, scale);
+	drawMapShown(laid, room, scale);
+};
+
+// Each half, small, where the canvas has it; one the layout has no half for
+// is not shown.
+const drawMapImages = (laid, scale) => {
+	mapImages.forEach((mini, index) => {
+		const half = laid.halves[index];
+		mini.hidden = !half || half.image.hidden;
+		if (!half) return;
+		// Only when it changes: a wheel tick draws again.
+		if (mini.src !== half.image.src) mini.src = half.image.src;
+		cover(mini, bounds(half.image), { scale, x: half.x });
+	});
+};
+
+// Each region where the halves differ, at each place a half lies.
+const drawMapRegions = (laid, scale) => {
+	const boxes = pair() ? (changes?.boxes ?? []) : [];
+	const offsets = offsetsOf(laid);
+	mapRegions.replaceChildren(
+		...boxes.flatMap((box, index) =>
+			offsets.map((x) => {
+				const spot = made("span", "map-region");
+				if (index === change) spot.dataset.current = "";
+				cover(spot, box, { scale, x, least: SPECK });
+				return spot;
+			}),
+		),
+	);
+};
+
+// The part of the pictures the stage shows, framed.
+const drawMapShown = (laid, room, scale) => {
+	const visible = {
+		left: -view.x / view.scale,
+		top: -view.y / view.scale,
+		width: room.width / view.scale,
+		height: room.height / view.scale,
+	};
+	cover(mapShown, clipped(visible, laid), { scale });
+};
+
+// The stage centred on the place of the map pressed on, at the zoom there is.
+const centreOnMapPoint = (event) => {
+	const scale = mapScale(layout());
+	const corner = mapCanvas.getBoundingClientRect();
+	const left = (event.clientX - corner.left) / scale;
+	const top = (event.clientY - corner.top) / scale;
+	view = centredOn({ left, top }, view.scale);
+	draw();
+};
+
+// The view that has the middle of a box of the canvas in the middle of the
+// stage, at a scale. A box of no size is a point, as a pin is.
+const centredOn = ({ left, top, width = 0, height = 0 }, scale) => {
+	const room = stage.getBoundingClientRect();
+	return {
+		scale,
+		x: room.width / 2 - (left + width / 2) * scale,
+		y: room.height / 2 - (top + height / 2) * scale,
+	};
+};
+
+// Whether a box of the canvas lies wholly on the stage as the view stands,
+// give or take a pixel: the sums that fit a picture are never quite exact.
+const onStageWhole = ({ left, top, width, height }) => {
+	const room = stage.getBoundingClientRect();
+	const x = view.x + left * view.scale;
+	const y = view.y + top * view.scale;
+	return (
+		x >= -1 &&
+		y >= -1 &&
+		x + width * view.scale <= room.width + 1 &&
+		y + height * view.scale <= room.height + 1
+	);
 };
 
-// At the size that shows all of it, never larger than it is, in the middle.
+// The scale that shows all of it, never larger than it is.
+const fittedScale = () => {
+	const room = stage.getBoundingClientRect();
+	const { width, height } = layout();
+	return width && room.width
+		? Math.min(room.width / width, room.height / height, 1)
+		: fitted;
+};
+
+// At the size that shows all of it, 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,
-	};
+	fitted = fittedScale();
+	view = centredOn({ left: 0, top: 0, width, height }, fitted);
 	draw();
 };
 
@@ -364,93 +645,255 @@ const onPicture = (point, half) => {
 	};
 };
 
-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];
+// The caption names the picture, and its place among those opened; how a
+// pair is looked at, and what its comparison found, are the panel's to say.
+const sayCaption = () => {
 	caption.textContent = [
 		pictures.length > 1 ? `${at + 1} of ${pictures.length}` : "",
-		picture.name ?? "",
-		...(pair() ? comparing() : []),
+		pictures[at].name ?? "",
 	]
 		.filter(Boolean)
 		.join(" · ");
+};
+
+const say = () => {
+	sayCaption();
 	keys();
+	describe();
 };
 
-const keyHint = (pressed, does, current = false) => {
-	const hint = made("span", current ? "current" : "");
-	hint.append(
-		...pressed.split(" ").map((key) => made("kbd", "", key)),
+const keyHint = (keycaps, does) =>
+	made(
+		"span",
+		"",
+		keycaps.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")]),
+
+// The keys at the foot: while a note is written, those that end it; otherwise
+// those of the picture itself, and where a mark can go in the view it is
+// looked at in. A pair's views and regions are the panel's; + - and the arrows
+// go on working unsaid, as they do everywhere.
+const keys = () => fill(keyRow, draft ? writingKeys() : lookingKeys());
+
+const writingKeys = () => [
+	keyHint("⌘ Enter", "save the note"),
+	keyHint("Esc", "put it away"),
+	keyHint("scroll", "zoom"),
+	dragHint(),
+	// A new note's place can be marked again; a note written before can give
+	// way to another.
+	draft.note
+		? openable() && keyHint("click", "another note: open it")
+		: keyHint("⇧drag", "mark again"),
+];
+
+const lookingKeys = () => [
+	keyHint("scroll", "zoom"),
+	dragHint(),
+	keyHint("0", "fit"),
+	keyHint("1", "full size"),
+	markable()
+		? keyHint("click ⇧drag", "note")
+		: annotate && made("span", "off", "no marking in this view"),
+	pictures.length > 1 && keyHint("[ ]", "other pictures"),
+	keyHint("Esc", "close"),
+];
+
+// In swipe a drag moves the divider, a note being written or not.
+const dragHint = () =>
+	keyHint("drag", pair() && mode === "swipe" ? "the divider" : "move");
+
+// A button of the panel. `pressed` says whether what it turns on is on,
+// `current` marks the one the panel is at, and `label` is what is read out for
+// a face that does not say it, a number.
+const control = (
+	className,
+	content,
+	action,
+	{ pressed, current, label } = {},
+) => {
+	const button = made("button", `quiet ${className}`, content);
+	button.type = "button";
+	if (pressed !== undefined)
+		button.setAttribute("aria-pressed", String(pressed));
+	if (label) button.setAttribute("aria-label", label);
+	if (current) button.setAttribute("aria-current", "true");
+	button.addEventListener("click", action);
+	return button;
+};
+
+// The panel beside a pair: the ways to look at it, then where its halves differ.
+const describe = () => {
+	panel.hidden = !pair();
+	fill(panel, pair() && [viewsPart(), regionsPart()]);
+	scrollToHeld();
+};
+
+// Only the panel scrolls: far enough down to show all of the region focused
+// on, or, when it is taller than the panel, to its top.
+const scrollToHeld = () => {
+	const held = panel.querySelector(".held");
+	if (!held) return;
+	const room = panel.getBoundingClientRect();
+	const box = held.getBoundingClientRect();
+	const below = box.bottom - room.bottom;
+	if (below > 0) panel.scrollTop += Math.min(below, box.top - room.top);
+};
+
+// Each way of looking by its key and name; the one it is looked at in says
+// what it shows.
+const viewsPart = () =>
+	made("section", "ways", made("h2", "", "Compare"), VIEWS.map(wayButton));
+
+const wayButton = (way) => {
+	const looking = mode === way.mode;
+	return control(
+		"way",
+		[
+			made("kbd", "", way.key),
+			made("span", "name", way.name),
+			looking && whatItShows(way),
+		],
+		() => look(way.mode),
+		{ pressed: looking },
+	);
+};
+
+const whatItShows = (way) =>
+	made("span", "shows", way.mode === "blink" ? blinkLine() : way.shows);
+
+// Blink shows one half at a time: which, and the keys that go on from there.
+const blinkLine = () => [
+	made("span", "showing", showing),
+	keyHint("b", "switch"),
+	keyHint("⇧B", blinker ? "stop" : "blink"),
+];
+
+// Why the panel lists no regions, when it lists none: the comparison is not
+// in, could not be made, or found the pictures alike.
+const whyNoRegions = () => {
+	if (!changes) return "Comparing…";
+	if (!changes.compared) return "Finding them needs ImageMagick.";
+	if (!changes.boxes.length) return "Nothing: the same pixels.";
+};
+
+const sizesDiffer = () =>
+	new Set(changes.sizes.map((size) => size.join("x"))).size > 1;
+
+// Where the halves differ: how many, each by its number, the keys that go
+// through them, and the one focused on as each half has it.
+const regionsPart = () => {
+	const why = whyNoRegions();
+	if (why)
+		return made(
+			"section",
+			"differences",
+			made("h2", "", "Changed"),
+			made("p", "", why),
 		);
-	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 count = changes.boxes.length;
+	return made(
+		"section",
+		"differences",
+		made("h2", "", "Changed ", made("span", "count", String(count))),
+		sizesDiffer() && made("p", "", "Sizes differ: laid from the top left."),
+		places(),
+		going(),
+		focused() && heldRegion(),
+	);
+};
+
+// The regions by number, as many as the panel numbers.
+const places = () =>
+	made(
+		"ol",
+		"places",
+		changes.boxes.slice(0, NUMBERED).map((_, index) => placeItem(index)),
+	);
+
+const placeItem = (index) =>
+	made(
+		"li",
+		"",
+		control("place", String(index + 1), () => focusChange(index), {
+			label: `Region ${index + 1}`,
+			current: index === change,
+		}),
+	);
+
+// The keys that go through the regions, and, once one is focused on, those
+// that act on it.
+const going = () =>
+	made(
+		"p",
+		"going",
+		keyHint("n p", "next, previous"),
+		focused() && keyHint("z", "zoom in"),
+		focused() && annotate && keyHint("Enter", "note"),
+	);
+
+// The region focused on, as the before has it and as the after does.
+const heldRegion = () => {
+	const box = changes.boxes[change];
+	return made("div", "held", crop(0, box), crop(1, box));
+};
+
+// A little of a half's picture around a region, as large as the panel has
+// room for, with the region outlined in it.
+const framed = (image, region) => {
+	const around = clipped(grown(region, AROUND), bounds(image));
+	const scale = Math.min(
+		CROP.width / around.width,
+		CROP.height / around.height,
+		4,
 	);
+	// All in the frame is laid from the corner of what it shows.
+	const inFrame = { scale, x: -around.left, y: -around.top };
+	const frame = made("span", "frame");
+	cover(frame, around, inFrame);
+	const shown = Object.assign(made("img", ""), {
+		src: image.src,
+		alt: "",
+		draggable: false,
+	});
+	cover(shown, bounds(image), inFrame);
+	const line = made("span", "change");
+	cover(line, region, inFrame);
+	frame.append(shown, line);
+	return frame;
+};
+
+// One half's crop of a region: a button that writes a note on it there, when
+// the picture takes notes, or what the half lacks, when it is smaller.
+const crop = (half, box) => {
+	const image = [first, second][half];
+	const name = half ? "after" : "before";
+	const holder = annotate
+		? control("crop", [], () => noteOnChange(half))
+		: made("div", "crop");
+	const reached = lyingOn(box, image);
+	if (!reached) {
+		holder.append(made("span", "label", `${name}: smaller, not here`));
+		holder.disabled = true;
+		return holder;
+	}
+	holder.append(framed(image, reached), made("span", "label", name));
+	if (annotate)
+		holder.setAttribute(
+			"aria-label",
+			`Note on region ${change + 1} in the ${name}`,
+		);
+	return holder;
+};
+
+// A note on the region focused on, in the half given: its box, in fractions
+// of that half, as far as the half reaches.
+const noteOnChange = (half = 1) => {
+	if (!annotate || !pair() || !focused()) return;
+	const image = [first, second][half];
+	const reached = lyingOn(changes.boxes[change], image);
+	if (reached) mark(half, fractionsOf(reached, image));
 };
 
 const compare = async (picture) => {
@@ -490,6 +933,7 @@ const show = (index) => {
 		second.alt = halves[1].alt ?? "";
 		compare(picture);
 	} else second.removeAttribute("src");
+	stopBlinking();
 	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.
@@ -501,42 +945,99 @@ const show = (index) => {
 	).then(() => pictures[at] === shown && dialog.open && fit());
 };
 
-// Looks at a pair another way, holding the zoom when the layout stays.
-const look = (name) => {
+// Blink shows the other half at the owner's word, or, set going, by itself.
+// The panel is not drawn again for it, only its saying which half is shown:
+// drawn every turn, its buttons would be replaced under the pointer, and a
+// click that began on one would be lost.
+const switchHalf = () => {
+	showing = showing === "after" ? "before" : "after";
+	draw();
+	panel.querySelector(".showing")?.replaceChildren(showing);
+};
+
+// A turn is skipped while the owner presses on the stage or writes a note: a
+// mark goes on the half showing, which holds still until it is done.
+const startBlinking = () => {
+	if (mode !== "blink") look("blink");
+	blinker = setInterval(() => {
+		if (!pressing && !draft) switchHalf();
+	}, BLINK);
+};
+
+const stopBlinking = () => {
+	clearInterval(blinker);
+	blinker = undefined;
+};
+
+const blinkByItself = () => {
+	if (!pair()) return;
+	if (blinker) stopBlinking();
+	else startBlinking();
+	describe();
+};
+
+// The layout has changed, so what shows all of it has too. A region focused
+// on is kept in view at the owner's zoom, judged against the new fit and not
+// the old; with none, all of it is fitted again.
+const reframe = () => {
+	if (!focused()) return fit();
+	fitted = fittedScale();
+	focusChange(change);
+};
+
+// Looks at a pair another way, holding the zoom when the layout stays, and
+// the region focused on when it does not. The way it is looked at already,
+// asked for again, goes back to side by side; blink, asked again, shows the
+// other half.
+const look = (asked) => {
 	if (!pair()) return;
+	const again = asked === mode;
+	if (again && mode === "blink") return switchHalf();
 	const before = mode;
-	showing =
-		name === "blink" && mode === "blink" && showing === "after"
-			? "before"
-			: "after";
-	mode = name;
-	if ((before === "side") !== (name === "side")) fit();
-	else draw();
+	mode = again ? "side" : asked;
+	showing = "after";
+	stopBlinking();
+	if (sideBySide(before) === sideBySide(mode)) draw();
+	else reframe();
 	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;
+// A region as it lies on the canvas, on the half a focus goes to: the last,
+// the after.
+const onCanvas = (box) => ({
+	...box,
+	left: box.left + layout().halves.at(-1).x,
+});
+
+// The scale at which the stage shows a box whole with MARGIN around it, no
+// farther than all of the picture is shown and no nearer than the viewer goes.
+const scaleNear = ({ width, height }) => {
 	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),
+	const toSeeWhole = Math.min(
+		room.width / (width + MARGIN * 2),
+		room.height / (height + MARGIN * 2),
 	);
-	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),
-	};
+	const nearest = Math.max(NEAREST, fitted);
+	return Math.max(Math.min(toSeeWhole, nearest), fitted);
+};
+
+// Focuses on a region where the halves differ, by its place among them, at
+// the zoom the owner chose: seen whole, it is outlined where it stands, and
+// brought into view only if it is out of it; zoomed in, or asked to come
+// `near`, the stage goes near enough to see it whole.
+const focusChange = (index, { near = zoomedIn() } = {}) => {
+	if (!pair() || !changes?.boxes.length) return;
+	const count = changes.boxes.length;
+	change = (index + count) % count;
+	const region = onCanvas(changes.boxes[change]);
+	if (near) view = centredOn(region, scaleNear(region));
+	else if (!onStageWhole(region)) view = centredOn(region, view.scale);
 	draw();
 	say();
 };
+const nextChange = () => focusChange(change + 1);
+const previousChange = () => focusChange(change < 0 ? -1 : change - 1);
+const nearChange = () => focusChange(Math.max(change, 0), { near: true });
 
 // Whether the form open holds words not saved: a note written before is
 // measured against what it said.
@@ -575,6 +1076,8 @@ const write = (half, box, note) => {
 		return;
 	}
 	draft = { half, box, figure: marked.figure, note };
+	// Blink holds on the half the note is written on.
+	if (pair() && mode === "blink") showing = half ? "after" : "before";
 	draw();
 	say();
 };
@@ -594,7 +1097,8 @@ const putAway = () => {
 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 }]);
+	else if (!note)
+		written.set(figure, [...(written.get(figure) ?? []), { id, box }]);
 	putAway();
 };
 
@@ -622,9 +1126,22 @@ const listen = () => {
 		{ passive: false },
 	);
 
+	// The map goes where it is pressed, and follows a drag on it.
+	map.addEventListener("pointerdown", (event) => {
+		if (event.button !== 0) return;
+		event.stopPropagation();
+		map.setPointerCapture(event.pointerId);
+		centreOnMapPoint(event);
+	});
+	map.addEventListener("pointermove", (event) => {
+		if (map.hasPointerCapture(event.pointerId)) centreOnMapPoint(event);
+	});
+
 	stage.addEventListener("pointerdown", (event) => {
 		if (event.button !== 0 || beside.contains(event.target)) return;
+		if (map.contains(event.target)) return;
 		stage.setPointerCapture(event.pointerId);
+		pressing = true;
 		touching.set(event.pointerId, onStage(event));
 		const from = onStage(event);
 		drag = {
@@ -669,14 +1186,10 @@ const listen = () => {
 		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`,
-			});
+			cover(
+				marking,
+				boxBetween(heldIn(drag.from, drag.half), heldIn(now, drag.half)),
+			);
 			marking.hidden = false;
 		} else if (drag.moved) {
 			move(now.x - drag.last.x, now.y - drag.last.y);
@@ -688,6 +1201,7 @@ const listen = () => {
 		if (!touching.delete(event.pointerId) || !drag || touching.size) return;
 		const { from, moved, marking: drawn, swiping, half, note } = drag;
 		drag = undefined;
+		pressing = false;
 		marking.hidden = true;
 		const here = onStage(event);
 		if (event.type === "pointercancel" || swiping || half === undefined) return;
@@ -697,14 +1211,11 @@ const listen = () => {
 			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),
-		]);
+		const { left, top, width, height } = boxBetween(
+			onPicture(from, half),
+			onPicture(here, half),
+		);
+		mark(half, [left, top, width, height]);
 	};
 	stage.addEventListener("pointerup", release);
 	stage.addEventListener("pointercancel", release);
@@ -714,6 +1225,11 @@ const listen = () => {
 		draw();
 	});
 
+	// A press on the panel leaves the keys with the viewer.
+	panel.addEventListener("mousedown", (event) => {
+		if (event.target.closest("button")) event.preventDefault();
+	});
+
 	const STEP = 80;
 	const actions = {
 		"+": () => zoom(1.25),
@@ -730,9 +1246,11 @@ const listen = () => {
 		"]": () => show(at + 1),
 		" ": () => dialog.close(),
 		n: nextChange,
-		...Object.fromEntries(
-			Object.entries(VIEWS).map(([key, [name]]) => [key, () => look(name)]),
-		),
+		p: previousChange,
+		z: nearChange,
+		Enter: () => noteOnChange(1),
+		B: blinkByItself,
+		...Object.fromEntries(VIEWS.map((way) => [way.key, () => look(way.mode)])),
 	};
 	dialog.addEventListener("keydown", (event) => {
 		if (event.metaKey || event.ctrlKey || event.altKey) return;
@@ -752,9 +1270,16 @@ const listen = () => {
 		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;
+		// A button of the panel reached by Tab is pressed as a button is.
+		if (
+			event.target.closest?.(".compare") &&
+			["Enter", " "].includes(event.key)
+		)
+			return;
+		const key = keyOf(event);
+		if (!Object.hasOwn(actions, key)) return;
 		event.preventDefault();
-		actions[event.key]();
+		actions[key]();
 	});
 
 	beside.addEventListener("closed", putAway);
@@ -762,7 +1287,9 @@ const listen = () => {
 
 	addEventListener("resize", () => dialog.open && fit());
 	dialog.addEventListener("close", () => {
+		stopBlinking();
 		draft = undefined;
+		pressing = false;
 		beside.replaceChildren();
 		beside.hidden = true;
 		// The browser gives the focus back as it closes; this event comes after,