@graview/layout 0.1.28 → 0.1.29

package/dist/city.js

@@ -1,252 +1,367 @@
 import {} from "@graview/core";
-import { cityExtent, cityMap, toIso } from "@graview/core/scene";
+import { cityMap, PITCH, toIso } from "@graview/core/city";
+/*
+ * THE NAME UNDER A DISTRICT from altitude, as the scene draws it: its
+ * plural in 12-pixel capitals, its count, its problems when it has any,
+ * and under them the bar of its states when its kind has a status — on a
+ * solid backing, a fixed size on the screen whatever the zoom. Said short,
+ * it is those three without the bar. In the reader's unit.
+ */
+export function nameplateSize(name, count, problems, states, unit = 1) {
+    const digits = (n) => String(n).length * 7.4;
+    const line = name.length * 8.6 + 6 + digits(count) + 14 + (problems > 0 ? 8 + 14 + digits(problems) : 0);
+    return {
+        width: Math.max(line, states ? 168 + 16 : 0) * unit,
+        height: (states ? 38 : 22) * unit,
+        short: { width: line * unit, height: 22 * unit },
+    };
+}
 /** Two drawn boxes sharing ground, with a little air required between them. */
 export function collides(a, b, air = 6) {
-    return (a.x < b.x + b.width + air &&
-        b.x < a.x + a.width + air &&
-        a.y < b.y + b.height + air &&
-        b.y < a.y + a.height + air);
+    return a.x < b.x + b.width + air && b.x < a.x + a.width + air && a.y < b.y + b.height + air && b.y < a.y + a.height + air;
 }
-/** The center of a plot's diamond, in lattice pixels at `cell`. */
-const centerOf = (plot, cell) => toIso(plot.col + plot.side / 2, plot.row + plot.side / 2, cell);
-export function placeCity(cards, schema, base, canvas, inset = {}, options = {}) {
+/** Whether a box reaches into a plot's diamond: the nearest point of the box to its center, inside the diamond. */
+const onDiamond = (box, center, halfW, halfH) => {
+    const px = Math.max(box.x, Math.min(center.x, box.x + box.width));
+    const py = Math.max(box.y, Math.min(center.y, box.y + box.height));
+    return Math.abs(px - center.x) / halfW + Math.abs(py - center.y) / halfH < 0.92;
+};
+/** The gap between a plot's front corner and the top of the name under it. */
+const UNDER = 4;
+/** How far the tallest block on a plot stands over its back corner, in cells: a name over the plot stands clear of it. */
+const RISE = 0.45;
+export function placeCity(cards, schema, canvas, inset = {}, options = {}) {
     const counts = {};
     for (const card of cards)
         counts[card.kind] = card.count;
-    const map = cityMap(schema, {
-        ...(options.order ? { order: options.order } : {}),
-        counts,
-        ...(options.plots ? { plots: options.plots } : {}),
+    const room = {
+        x: (inset.left ?? 0) + 8,
+        y: (inset.top ?? 0) + 8,
+        width: canvas.width - (inset.left ?? 0) - (inset.right ?? 0) - 16,
+        height: canvas.height - (inset.top ?? 0) - (inset.bottom ?? 0) - 16,
+    };
+    const avoid = options.avoid ?? [];
+    const tilt = options.tilt ?? 0.5;
+    const plate = (card) => card.nameplate ?? { width: 120, height: 34, short: { width: 90, height: 20 } };
+    /** Every plot's center in lattice pixels at one pixel a cell, and its side. */
+    const shapeOf = (map) => cards.map((card) => {
+        const plot = map.get(card.kind);
+        return { card, plot, center: toIso(plot.col + plot.side / 2, plot.row + plot.side / 2, 1, tilt) };
     });
-    const left = inset.left ?? 0;
-    const span = canvas.width - left - (inset.right ?? 0);
-    const cx = left + span / 2;
-    const cy = canvas.height * 0.53;
+    /** The extent of the drawn city at `cell`, names and all, about the lattice's origin. */
+    const extentAt = (shape, cell) => {
+        let minX = Infinity;
+        let maxX = -Infinity;
+        let minY = Infinity;
+        let maxY = -Infinity;
+        for (const { card, plot, center } of shape) {
+            const x = center.x * cell;
+            const y = center.y * cell;
+            const half = (plot.side * cell) / 2;
+            const name = card.opened > 0 ? plate(card).width : plate(card).short.width;
+            // A district too full for its rows says `+n` off its left edge: room for it, so the count is never cut by the window.
+            minX = Math.min(minX, x - Math.max(half + (card.count > 12 ? 30 : 0), name / 2));
+            maxX = Math.max(maxX, x + Math.max(half, name / 2));
+            // The tallest block stands about a cell above the plot's far corner; a name is always under its plot.
+            minY = Math.min(minY, y - half * tilt - cell * RISE);
+            maxY = Math.max(maxY, y + half * tilt + UNDER + plate(card).short.height);
+        }
+        return { minX, maxX, minY, maxY };
+    };
+    /** The largest cell at which the city fits the room. */
+    const fit = (shape) => {
+        let lo = 4;
+        let hi = 160;
+        for (let i = 0; i < 24; i++) {
+            const mid = (lo + hi) / 2;
+            const e = extentAt(shape, mid);
+            if (e.maxX - e.minX <= room.width && e.maxY - e.minY <= room.height)
+                lo = mid;
+            else
+                hi = mid;
+        }
+        return lo;
+    };
     /*
-     * ONE SCALE. The map's bounding diamond, at one pixel per cell, is
-     * fitted into the room the canvas has once a card's own size is taken
-     * off each edge — a card is centered on its plot and must not leave the
-     * canvas. The cell is then the same on both axes, which is the whole
-     * point: a city that was squashed to fit a wide window and stretched to
-     * fit a tall one had no shape of its own.
+     * WHICH WAY UP. The map runs up and to the right in a wide window and
+     * down in a tall one: whichever stands the city larger, wide when the
+     * two are equal — the way a thumbnail, with no window, draws it.
      */
-    const extent = cityExtent(map);
-    const corners = [
-        toIso(extent.minCol, extent.minRow, 1),
-        toIso(extent.maxCol, extent.minRow, 1),
-        toIso(extent.minCol, extent.maxRow, 1),
-        toIso(extent.maxCol, extent.maxRow, 1),
-    ];
-    const minX = Math.min(...corners.map((c) => c.x));
-    const maxX = Math.max(...corners.map((c) => c.x));
-    const minY = Math.min(...corners.map((c) => c.y));
-    const maxY = Math.max(...corners.map((c) => c.y));
-    const spread = { x: Math.max(1, maxX - minX), y: Math.max(0.5, maxY - minY) };
-    const roomX = Math.max(40, span - base.width * 1.1);
-    const roomY = Math.max(24, canvas.height * 0.62 - base.height * 1.1);
-    const fitted = Math.max(18, Math.min(160, roomX / spread.x, roomY / spread.y));
-    const scale = options.scale ?? 1;
-    const minHeight = options.minHeight ?? 0;
-    const avoid = options.avoid ?? [];
-    /** Where the whole city is slid to stand beside the rails rather than under them (see below). */
-    let nudge = 0;
-    const at = (cell, asked, openedShare = 1, shift = { x: 0, y: 0 }) => {
-        const originX = cx - ((minX + maxX) / 2) * cell + shift.x + nudge;
-        const originY = cy - ((minY + maxY) / 2) * cell + shift.y;
-        const size = { width: base.width * asked, height: base.height * asked };
-        const rows = cards.map((card) => centerOf(map.get(card.kind), cell).y);
+    const mapsAt = (pitch) => {
+        const hints = { ...(options.order ? { order: options.order } : {}), counts, ...(options.plots ? { plots: options.plots } : {}), pitch };
+        const wideMap = cityMap(schema, hints);
+        const tallMap = cityMap(schema, { ...hints, upright: true });
+        const wide = fit(shapeOf(wideMap));
+        const tall = fit(shapeOf(tallMap));
+        const map = canvas.height > canvas.width && tall >= wide ? tallMap : wideMap;
+        return { map, fitted: map === tallMap ? tall : wide };
+    };
+    let shape = [];
+    let map = new Map();
+    let fitted = 0;
+    /** The city at `cell`, its middle at the room's middle shifted by `shift`; each district's box is its plot's. */
+    const at = (cell, shift = { x: 0, y: 0 }) => {
+        const e = extentAt(shape, cell);
+        const originX = room.x + room.width / 2 - (e.minX + e.maxX) / 2 + shift.x;
+        const originY = room.y + room.height / 2 - (e.minY + e.maxY) / 2 + shift.y;
+        return { originX, originY, cell };
+    };
+    const draw = (where) => {
+        const { originX, originY, cell } = where;
+        const rows = shape.map(({ center }) => center.y);
         const lowest = Math.max(...rows);
         const highest = Math.min(...rows);
-        return cards.map((card) => {
-            const plot = map.get(card.kind);
-            const center = centerOf(plot, cell);
-            /*
-             * NEARNESS FROM THE ROW. Lower on the ground is nearer the viewer,
-             * exactly as the bottom of the ring was: 1 there, 0 at the top, and
-             * the depth number everything else reads (`1 − near·0.65`) is
-             * unchanged so the plane styles and the altitude opacity are too.
-             */
+        return shape.map(({ card, plot, center }) => {
+            const x = originX + center.x * cell;
+            const y = originY + center.y * cell;
+            const halfW = (plot.side * cell) / 2;
+            const halfH = halfW * tilt;
             const near = lowest === highest ? 0.5 : (center.y - highest) / (lowest - highest);
-            const grow = 0.85 + near * 0.45;
-            const width = size.width * grow;
-            const base = Math.max(minHeight, size.height * grow);
-            const height = base + (card.marquee ?? 0) + (card.opened > 0 ? Math.max(card.openedMin ?? 0, card.opened * openedShare) : 0);
-            /*
-             * NOT HELD INSIDE THE CANVAS. The ring pushed its near card back in
-             * from the edge; a city has a shape, and a district pushed off its
-             * corner to fit a phone is a district on the wrong corner. A city
-             * wider than the window is reached by panning, which the camera
-             * bounds to the map's extent for exactly this reason.
-             */
-            /*
-             * The NAMEPLATE is centered on the plot; what hangs under it — a
-             * marquee, an opened listing — grows DOWNWARD, so the top of the card
-             * stays where the plot's far half is, and a screen standing at the
-             * far edge is never covered by its own district's growth.
-             */
-            return {
-                id: card.id,
-                x: originX + center.x - width / 2,
-                y: originY + center.y - base / 2,
-                width,
-                height,
-                depth: 1 - near * 0.65,
-                plot,
-            };
+            return { card, plot, x, y, halfW, halfH, depth: 1 - near * 0.65 };
         });
     };
-    const crowded = (placed) => placed.some((one, index) => placed.some((other, index2) => index2 !== index && collides(one, other))) ||
-        placed.some((one) => avoid.some((box) => collides(one, box)));
-    /*
-     * The reader's unit is given back first, down to the size a card has
-     * always been; and when the cards still stand in each other at that
-     * size, the CITY grows — the cell widens until every district has its
-     * own ground — rather than the cards shrinking below what their names
-     * need. A district's legibility is not the window's to take.
-     */
     /*
-     * THE CITY SLIDES ASIDE for the picture in the middle, when there is one.
-     * A district on the map's own center stands exactly where the live view
-     * stands, and no amount of growing moves it — scaling about the center
-     * keeps the center where it is. So the map is tried in place first, and
-     * then shifted: by the width of what it must clear, right, left, down,
-     * up, and the diagonals — the first shift with every district on ground
-     * of its own is the one kept. No picture in the middle means no shift.
+     * A NAME STANDS UNDER ITS OWN DISTRICT, never beside a neighbor or over
+     * one, where it would read as the neighbor's. Where the names under
+     * their districts would meet one another or another district's ground,
+     * the districts stand further apart — a wider street, on the same
+     * lattice — rather than any name moving: the narrowest spacing at which
+     * every name fits under its own district, whole or short.
      */
-    const shifts = (cell) => {
-        if (avoid.length === 0)
-            return [{ x: 0, y: 0 }];
-        const dx = Math.max(...avoid.map((box) => box.width)) / 2 + cell;
-        const dy = Math.max(...avoid.map((box) => box.height)) / 2 + cell / 2;
-        const out = [{ x: 0, y: 0 }];
-        for (const share of [0.5, 0.75, 1, 1.25]) {
-            const sx = dx * share;
-            const sy = dy * share;
-            out.push({ x: sx, y: 0 }, { x: -sx, y: 0 }, { x: 0, y: sy }, { x: 0, y: -sy }, { x: sx, y: sy }, { x: -sx, y: sy }, { x: sx, y: -sy }, { x: -sx, y: -sy });
-        }
-        return out;
+    const fitsUnder = (drawn, window = true) => {
+        const said = [];
+        // In the order the names are said below, most pressing first, and clear of the chrome as they must be.
+        const pressing = [...drawn].sort((a, b) => (b.card.weight ?? b.card.count) - (a.card.weight ?? a.card.count) || cards.indexOf(a.card) - cards.indexOf(b.card));
+        return pressing.filter((one) => [plate(one.card), plate(one.card).short].some((size) => {
+            const box = plateBox(one, size);
+            const clear = (!window || (box.x >= 0 && box.y >= 0 && box.x + box.width <= canvas.width && box.y + box.height <= canvas.height)) &&
+                !said.some((other) => collides(box, other, 4)) &&
+                !drawn.some((other) => other !== one && onDiamond(box, other, other.halfW, other.halfH)) &&
+                !avoid.some((other) => collides(box, other, 0));
+            if (clear)
+                said.push(box);
+            return clear;
+        })).length;
     };
-    /** How much of the city is off the canvas: the shift that shows the most is the one kept. */
-    const right = canvas.width - (inset.right ?? 0);
-    const outside = (placed) => placed.reduce((sum, card) => {
-        const visibleW = Math.max(0, Math.min(card.x + card.width, canvas.width) - Math.max(card.x, 0));
-        const visibleH = Math.max(0, Math.min(card.y + card.height, canvas.height) - Math.max(card.y, 0));
-        return sum + card.width * card.height - visibleW * visibleH;
-    }, 0);
-    const settle = (cell, asked, openedShare) => {
-        let best;
-        let fallback;
-        for (const shift of shifts(cell)) {
-            const placed = at(cell, asked, openedShare, shift);
-            if (crowded(placed)) {
-                fallback ??= { placed, shift };
-                continue;
-            }
-            const off = outside(placed);
-            if (!best || off < best.off - 0.5)
-                best = { placed, shift, off };
-        }
-        return best ?? fallback;
-    };
-    let cell = fitted;
-    let asked = scale;
-    let openedShare = 1;
-    let settled = settle(cell, asked, openedShare);
-    while (crowded(settled.placed) && asked > 1.001) {
-        asked = Math.max(1, asked - 0.05);
-        settled = settle(cell, asked, openedShare);
-    }
+    /** The showings hanging under a district's name, as wide as they are drawn and as tall, from under its whole name. */
+    const marqueeBox = (one) => one.card.marquee ? { x: one.x - one.card.marquee.width / 2, y: one.y + one.halfH + UNDER + plate(one.card).height, width: one.card.marquee.width, height: one.card.marquee.height } : null;
+    /** Whether a name would stand on another district's showings. */
+    const onShowings = (box, one, drawn) => drawn.some((other) => {
+        if (other === one)
+            return false;
+        const hung = marqueeBox(other);
+        return hung !== null && collides(box, hung, 4);
+    });
+    /** Where a name stands: under the plot's front corner, over its back corner and the blocks on it, or beside its right corner. */
+    const plateBox = (one, size, at = "under") => at === "aside"
+        ? { x: one.x + one.halfW + UNDER, y: one.y - size.height / 2, width: size.width, height: size.height }
+        : at === "above"
+            ? { x: one.x - size.width / 2, y: one.y - one.halfH - UNDER - RISE * where.cell - size.height, width: size.width, height: size.height }
+            : { x: one.x - size.width / 2, y: one.y + one.halfH + UNDER, width: size.width, height: size.height };
+    /** Whether a district — its ground and the least of its name — stands on something it may not. */
+    const blocked = (drawn) => drawn.some((one) => avoid.some((box) => onDiamond(box, one, one.halfW, one.halfH) || collides(box, plateBox(one, plate(one.card).short), 0)));
     /*
-     * An opened district's listing is the luxury and the city is the picture:
-     * in a short canvas the listing gives up its room before the city has to
-     * grow past the window, exactly as the ring's listing gave up its room
-     * before the ring gave up being a ring.
+     * THE CITY STEPS ASIDE for what stands in the middle, when something
+     * does: tried in place, then shifted by the width of what it must clear,
+     * right, left, down, up and the diagonals, then drawn smaller — the
+     * first that leaves every district its own ground, and keeps every one
+     * of them and its name inside the window, is kept. A city pushed off the
+     * edge to clear the picture is a city cropped; smaller is better.
      */
-    while (crowded(settled.placed) && openedShare > 0.3) {
-        openedShare = Math.max(0.3, openedShare - 0.1);
-        settled = settle(cell, asked, openedShare);
-    }
+    const inWindow = (drawn) => drawn.every((one) => {
+        const name = plateBox(one, plate(one.card).short);
+        return one.x - one.halfW >= 0 && one.x + one.halfW <= canvas.width && one.y - one.halfH >= 0 && name.x >= 0 && name.x + name.width <= canvas.width && name.y + name.height <= canvas.height;
+    });
     /*
-     * A SMALLER CITY BEFORE A CITY OFF THE EDGE. With a picture standing in
-     * the middle, the map fitted to the room may not stand beside it and
-     * stay on the canvas; a tighter lattice usually can, and the districts
-     * keep their size — only the streets between them shorten. So the cell
-     * is tried smaller, down to where the districts would touch, and the
-     * largest cell whose every district is on the canvas is the one kept.
-     * Only when no cell will do does the city grow past the window.
+     * Where no spacing lets every name stand under its district — a phone,
+     * with names as wide as the city — the spacing that says the most of
+     * them, the narrowest of those: a wider street that says no more names
+     * only draws the city smaller.
      */
-    if (crowded(settled.placed) || outside(settled.placed) > 0) {
-        let best = crowded(settled.placed) ? undefined : { cell, settled, off: outside(settled.placed) };
-        for (let share = 0.9; share >= 0.3; share -= 0.1) {
-            const tighter = fitted * share;
-            const trial = settle(tighter, asked, openedShare);
-            if (crowded(trial.placed))
-                continue;
-            const off = outside(trial.placed);
-            if (!best || off < best.off - 0.5)
-                best = { cell: tighter, settled: trial, off };
-            if (off === 0)
-                break;
-        }
-        if (best) {
-            cell = best.cell;
-            settled = best.settled;
-        }
+    let best = { pitch: PITCH, said: -1 };
+    for (const pitch of [PITCH, PITCH + 1, PITCH + 2, PITCH + 3, PITCH + 5, PITCH + 7]) {
+        ({ map, fitted } = mapsAt(pitch));
+        shape = shapeOf(map);
+        const said = fitsUnder(draw(at(fitted)));
+        if (said > best.said)
+            best = { pitch, said };
+        if (said === cards.length)
+            break;
     }
-    for (let grown = 0; crowded(settled.placed) && grown < 80; grown++) {
-        cell *= 1.06;
-        settled = settle(cell, asked, openedShare);
+    if (best.pitch !== PITCH + 7 || best.said !== cards.length) {
+        ({ map, fitted } = mapsAt(best.pitch));
+        shape = shapeOf(map);
+    }
+    let where = at(fitted);
+    if (avoid.length > 0 && blocked(draw(where))) {
+        let found;
+        for (let share = 1; share >= 0.3 && !found; share -= 0.05) {
+            const cell = fitted * share;
+            const dx = Math.max(...avoid.map((box) => box.width)) / 2 + cell;
+            const dy = Math.max(...avoid.map((box) => box.height)) / 2 + cell / 2;
+            for (const s of [0, 0.5, 0.75, 1, 1.25]) {
+                for (const [ux, uy] of [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [-1, 1], [1, -1], [-1, -1]]) {
+                    const trial = at(cell, { x: ux * dx * s, y: uy * dy * s });
+                    const drawn = draw(trial);
+                    if (!blocked(drawn) && inWindow(drawn)) {
+                        found = trial;
+                        break;
+                    }
+                    if (s === 0)
+                        break;
+                }
+                if (found)
+                    break;
+            }
+        }
+        if (found)
+            where = found;
     }
     /*
-     * BESIDE THE RAILS, NOT UNDER THEM. The map is centered on its lattice's
-     * bounding diamond, and the districts are not: a card is centered on its
-     * plot and the plots do not fill the diamond, so a city grown just wide
-     * enough for its names stood twenty-five pixels left of the room it
-     * fitted — and the leftmost district under the inspector. When the
-     * districts fit between the rails, the city slides the least distance
-     * that puts every one of them there; when they do not, the camera pans
-     * to them, as before.
+     * CLOSE ENOUGH TO READ. Where no spacing says every name inside the
+     * window — a phone, whose names are as wide as its city — the camera
+     * starts closer, by the least that lets every name stand under its own
+     * district: the city runs past the window's edges, the signs on those
+     * edges say what is there, and a finger pans to it. A city drawn whole
+     * but too small to name is a city nobody can press.
      */
-    // With a picture standing in the middle the city has already stepped aside for it, and that placement stands.
-    if (avoid.length === 0) {
-        const lowX = Math.min(...settled.placed.map((card) => card.x));
-        const highX = Math.max(...settled.placed.map((card) => card.x + card.width));
-        const slide = highX - lowX > right - left ? 0 : lowX < left ? left - lowX : highX > right ? right - highX : 0;
-        if (slide !== 0) {
-            nudge = slide;
-            const slid = at(cell, asked, openedShare, settled.shift);
-            if (crowded(slid))
-                nudge = 0;
-            else
-                settled = { placed: slid, shift: settled.shift };
+    const closerBy = (where, by) => {
+        const mid = { x: canvas.width / 2, y: canvas.height / 2 };
+        return { cell: where.cell * by, originX: mid.x + (where.originX - mid.x) * by, originY: mid.y + (where.originY - mid.y) * by };
+    };
+    let closer = 1;
+    if (fitsUnder(draw(where)) < cards.length) {
+        /*
+         * Each spacing at the least closer camera that names every district,
+         * and of those the one whose city stands smallest on the screen: a
+         * wider street can say them all from further out. Where none does
+         * within three times closer, the one that says the most.
+         */
+        let chosen = { said: fitsUnder(draw(where), false), area: Infinity, pitch: -1, by: 1 };
+        const before = { map, shape, fitted, where };
+        for (const pitch of [PITCH, PITCH + 1, PITCH + 2, PITCH + 3, PITCH + 5, PITCH + 7]) {
+            ({ map, fitted } = mapsAt(pitch));
+            shape = shapeOf(map);
+            const from = at(fitted);
+            for (let by = 1; by <= 3.001; by += 0.1) {
+                const said = fitsUnder(draw(closerBy(from, by)), false);
+                const e = extentAt(shape, fitted * by);
+                const area = (e.maxX - e.minX) * (e.maxY - e.minY);
+                if (said > chosen.said || (said === chosen.said && area < chosen.area))
+                    chosen = { said, area, pitch, by };
+                if (said === cards.length)
+                    break;
+            }
+        }
+        if (chosen.pitch < 0)
+            ({ map, shape, fitted, where } = before);
+        else {
+            ({ map, fitted } = mapsAt(chosen.pitch));
+            shape = shapeOf(map);
+            closer = chosen.by;
+            where = closerBy(at(fitted), closer);
+        }
+        /*
+         * WHAT IS CHOSEN STAYS IN SIGHT: a city drawn past the window moves,
+         * the least it can, to keep the chosen district and its name inside —
+         * the sheet it opened takes the foot of a phone, and a district past
+         * the edge could not be pressed again or asked for its acts.
+         */
+        const kept = draw(where).filter((one) => options.keep?.includes(one.card.kind));
+        if (kept.length > 0) {
+            const boxes = kept.flatMap((one) => [{ x: one.x - one.halfW, y: one.y - one.halfH, width: one.halfW * 2, height: one.halfH * 2 }, plateBox(one, plate(one.card))]);
+            const left = Math.min(...boxes.map((b) => b.x));
+            const right = Math.max(...boxes.map((b) => b.x + b.width));
+            const top = Math.min(...boxes.map((b) => b.y));
+            const bottom = Math.max(...boxes.map((b) => b.y + b.height));
+            const by = (low, high, span) => (high - low > span - 16 ? span / 2 - (low + high) / 2 : low < 8 ? 8 - low : high > span - 8 ? span - 8 - high : 0);
+            where = { ...where, originX: where.originX + by(left, right, canvas.width), originY: where.originY + by(top, bottom, canvas.height) };
         }
     }
     /*
      * FLYING CLOSER. The fit above is the whole map in the window; a zoom is
-     * the camera brought in afterwards, so the map keeps its shape and only
-     * the cell grows — the city may run past the window, and the camera
-     * pans to reach it.
+     * the camera brought in afterwards, about the canvas's middle, so the map
+     * keeps its shape and only the cell grows — the city may run past the
+     * window, and the camera pans to reach it. The names stay their size.
+     */
+    const zoom = options.zoom && options.zoom !== 1 ? options.zoom : 1;
+    if (zoom !== 1)
+        where = closerBy(where, zoom);
+    const drawn = draw(where);
+    /*
+     * THE NAMES, MOST PRESSING FIRST. Each is tried whole under its plot,
+     * then over it, then short under and over, then beside it; one that would
+     * stand on a name already placed, on another district's ground, on the
+     * chrome or past the window's edge says nothing until the camera comes
+     * closer.
+     * Its district is still there, and still says its name to the keyboard.
      */
-    if (options.zoom && options.zoom !== 1) {
-        cell *= options.zoom;
-        nudge *= options.zoom;
-        settled = settle(cell, asked, openedShare);
+    const said = [];
+    const sayOf = new Map();
+    const order = [...drawn].sort((a, b) => (b.card.weight ?? b.card.count) - (a.card.weight ?? a.card.count) || cards.indexOf(a.card) - cards.indexOf(b.card));
+    for (const one of order) {
+        // Under its own district, whole or short: never over it or beside it, where it would read as a neighbor's.
+        const sizes = [
+            ["full", plate(one.card), "under"],
+            ["short", plate(one.card).short, "under"],
+        ];
+        let chosen = "none";
+        /*
+         * THE MOST PRESSING NAME IS ALWAYS SAID. Where its district is hemmed in
+         * on every side — a phone, a column of kinds a cell apart — it may stand
+         * over the edge of a neighbor's ground, on its solid backing, rather
+         * than leave the district the page is about unnamed or without its bar.
+         * Every other name keeps off every other district's ground.
+         */
+        const first = one === order[0];
+        const as = (over, kind) => sizes.filter(([name]) => name.startsWith(kind)).map(([n, size, at]) => [n, size, at, over]);
+        // On clear ground first, whole and then short; only then over a neighbor's, whole and then short.
+        const tries = first ? [...as(false, "full"), ...as(false, "short"), ...as(true, "full"), ...as(true, "short")] : sizes.map(([n, size, at]) => [n, size, at, false]);
+        for (const [name, size, at, over] of tries) {
+            const box = plateBox(one, size, at);
+            // Past the window's edge only counts for the whole map; flown closer, the camera pans to it.
+            const inside = zoom !== 1 || closer !== 1 || (box.x >= 0 && box.y >= 0 && box.x + box.width <= canvas.width && box.y + box.height <= canvas.height);
+            const clear = inside &&
+                !said.some((other) => collides(box, other, 4)) &&
+                (over || !drawn.some((other) => other !== one && onDiamond(box, other, other.halfW, other.halfH))) &&
+                // Nor on another district's showings, where it would cover a picture's name somebody is reading.
+                !onShowings(box, one, drawn) &&
+                !avoid.some((other) => collides(box, other, 0));
+            if (clear) {
+                chosen = name;
+                said.push(box);
+                break;
+            }
+        }
+        sayOf.set(one.card.id, chosen);
     }
-    const placed = settled.placed;
-    const originX = cx - ((minX + maxX) / 2) * cell + settled.shift.x + nudge;
-    const originY = cy - ((minY + maxY) / 2) * cell + settled.shift.y;
+    const placed = drawn.map((one) => ({
+        id: one.card.id,
+        x: one.x - one.halfW,
+        y: one.y - one.halfH,
+        width: one.halfW * 2,
+        height: one.halfH * 2 + (one.card.opened > 0 ? Math.max(one.card.openedMin ?? 0, one.card.opened) : 0),
+        depth: one.depth,
+        plot: one.plot,
+        nameplate: sayOf.get(one.card.id) ?? "none",
+    }));
+    const e = extentAt(shape, where.cell);
     const frame = {
-        cell,
-        originX,
-        originY,
+        cell: where.cell,
+        originX: where.originX,
+        originY: where.originY,
         pan: options.pan ?? { x: 0, y: 0 },
-        extent: {
-            x: originX + minX * cell,
-            y: originY + minY * cell,
-            width: spread.x * cell,
-            height: spread.y * cell,
-        },
-        openedShare,
+        extent: { x: where.originX + e.minX, y: where.originY + e.minY, width: e.maxX - e.minX, height: e.maxY - e.minY },
+        openedShare: 1,
+        ...(tilt !== 0.5 ? { tilt } : {}),
+        ...(drawn.some((one) => one.card.marquee)
+            ? {
+                showings: drawn.flatMap((one) => {
+                    const hung = marqueeBox(one);
+                    return hung ? [{ id: one.card.id, x: hung.x - (one.x - one.halfW), y: hung.y - (one.y - one.halfH), width: hung.width, height: hung.height }] : [];
+                }),
+            }
+            : {}),
     };
     return { placed, frame, map };
 }
@@ -259,14 +374,16 @@ export function placeCity(cards, schema, base, canvas, inset = {}, options = {})
  * and by the tests alike, so "reachable" means one thing.
  */
 export function cameraLimit(result) {
-    const slack = { x: result.width * 0.45, y: result.height * 0.45 };
+    // The reader's window is what a panel over the scene leaves, not the whole painted ground.
+    const { width, height } = result.visible ?? result;
+    const slack = { x: width * 0.45, y: height * 0.45 };
     if (!result.city)
         return slack;
     const { extent } = result.city;
     const margin = 24;
     return {
-        x: Math.max(slack.x, extent.x + extent.width - result.width + margin, -extent.x + margin),
-        y: Math.max(slack.y, extent.y + extent.height - result.height + margin, -extent.y + margin),
+        x: Math.max(slack.x, extent.x + extent.width - width + margin, -extent.x + margin),
+        y: Math.max(slack.y, extent.y + extent.height - height + margin, -extent.y + margin),
     };
 }
 /** How far in from an edge a district brought into the window stands, at the least: room for its nameplate's height. */
@@ -283,7 +400,7 @@ const EDGE_CLEAR = 48;
 export function districtsPastTheEdge(result) {
     if (!result.city)
         return [];
-    const { width, height } = result;
+    const { width, height } = result.visible ?? result;
     const out = [];
     for (const node of result.nodes) {
         if (!node.id.startsWith("kind:") || Math.round(node.plane) !== 2)