@johnmorrisdotca/kyogijo-stadiums 0.44.0 → 0.44.2

package/CHANGELOG.md

@@ -7,6 +7,41 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.44.2] - 2026-10-29
+
+### Changed
+
+- **The district page turns faster, with nothing drawn differently where it can be said**: a step of a turn cost the page's own script and the browser's drawing in proportion to the number of planes of the 3D view, and the view had grown from about 1,200 planes (0.40.2, Seattle) to about 2,200. The faces of an opaque building that turn away from the eye are no longer written to or drawn (`Plane.cull`, set on the walls of the district's surrounding blocks and of a solid Kodokan: a closed solid hides its own far faces, and `layoutOf` takes a `cull` argument that leaves them out, off by default so that a still picture and the tests lay out every plane as before); the matrices and numbers of a step are worked out with less allocation (the layout is the same to the last digit). At the opening view of the Seattle district that is 419 of 2,174 planes left out, and the step costs the main thread 20 to 35 percent less in Chromium (Seattle 28.8 to 23.0 ms, Tokyo Dome City with the Kodokan 31.7 to 23.3 ms, on a 1280 by 800 window; 123 to 99 ms and 133 to 100 ms with the CPU slowed four times) and about a quarter less in WebKit; in the default view of the surroundings, where the hidden walls used to be painted over a neighbour here and there, a few of the edge pixels are not the same (under 2.7 percent of the pixels of a district, almost all the thin line where two walls meet).
+- **The demo's pages ask for all their modules at once**: `scripts/module-preload.mjs` writes a `modulepreload` link for every module a page imports, in its head (the district page imports 246 files, seven deep, and the browser used to learn of each only when it had read the one above it). On a connection with a 60 ms delay it opens the district page at 740 ms instead of 1,015, and at 150 ms, 10 Mbit/s and a CPU four times slower at 1,740 ms instead of 2,480.
+- **The district page carries the data of the area it shows and no other**: the surroundings of each place (downtown Vancouver's buildings and streets, its water and trees, Seattle's SoDo, Seattle Center and the city view, Tokyo Dome City's PLATEAU buildings) were 600 kilobytes of script that every district preset loaded, and Seattle's city view alone was 465 of them. Each area is one file now (`src/cityctx.<area>.data.ts`, written by `pnpm cityctx`; `osm.context.data.ts` and `plateau.data.ts` were one area already), and the page reads the files of the venues it shows with a dynamic `import()` (`loadAreasFor`, the new `areas` entry), starting the first view's area beside its modules, and the next preset's when it is chosen. Not preloaded: the head names none of them. A test follows each preset's network log and holds it to its own area's files, and another holds the import graph: no entry but `cityctx`, `osm` and `plateau` reaches an area's data. Nothing is drawn differently: the stage of every preset, in 2D and in 3D, is the same pixels as before, and the planes of each view are the same. The bytes of script a page loads, desk window, Chromium (`scripts/perf-district.mjs`; raw kilobytes, gzip in brackets):
+
+  | Preset | Before | After | Area file read |
+  |---|---|---|---|
+  | Rogers Arena alone, BC Place and Rogers Arena (both configurations) | 3,737 (1,040) | 3,246 (925) | Vancouver's buildings and streets 77 (19), its nature 19 (6) |
+  | Seattle Center | 3,737 (1,040) | 3,279 (932) | 128 (32) |
+  | SoDo | 3,737 (1,040) | 3,248 (926) | 97 (25) |
+  | Seattle, three venues | 3,737 (1,040) | 3,362 (948) | the city view 211 (48) |
+  | Tokyo Dome City, and with the Kodokan | 3,737 (1,040) | 3,208 (916) | PLATEAU's buildings 57 (15) |
+  | The Kodokan alone | 3,737 (1,040) | 3,151 (901) | none |
+
+  Planes of the 3D view before and after (unchanged): Rogers Arena alone 547, BC Place and Rogers Arena 1,309, with the soccer pitch 1,305, Seattle Center 1,088, SoDo 1,346, Seattle 2,175, Tokyo 2,049, with the Kodokan 2,286, the Kodokan alone 152. A step of a turn and the time to the first draw did not move beyond what the measuring machine's load could hide (load average about 30 while measuring: the same run twice differed by more than the change); the saving is in bytes, and in parsing the data of areas that are not shown. Still loaded by every district page and not part of this change: the venues' own data (`arenas.data`, `parks.data`, `grounds.data`, about 450 kilobytes) and the crowd's walkable mask (`walk.data`, Vancouver's, 90).
+
+### Added
+
+- **`@johnmorrisdotca/kyogijo-stadiums/areas`** (new entry): `loadAreasFor(venues)` reads the areas of context that go with some venues, each from its own file, and gives them for a district's `context` option; `loadArea(key)` reads one, `areaKeysFor(venues)` says which without reading anything, and `AREA_KEYS`, `CITYCTX_VENUES` and `TOKYO_VENUES` list them. It chooses what `contextFor` of the `cityctx` entry does (and Tokyo Dome City's, for the Tokyo venues). The `cityctx`, `osm` and `plateau` entries are unchanged and still export every area at once, so nothing that imports them breaks; `CITYCTX_VENUES` is now defined in the `areas` entry's file and exported by `cityctx` as before.
+- `pnpm exec node scripts/perf-district.mjs` measures the district page in Chromium and WebKit, on a desk and a phone window at the device pixel ratios 1, 2 and 3, with the CPU slowed or not: the time to draw, the bytes of script, the elements and planes, the cost of a step of a turn and the memory the layers would take. `e2e/perf.demo.mjs` holds the counts that decide the speed (planes, planes drawn, elements) and the modules' preload to a budget, so that a change that doubles them is found by the test. The slow server of the first-paint tests holds a page's scripts back for at least 1.5 seconds (it was 0.25 to 0.7 for each of seven levels of imports, and with the modules asked for together one pause is all there is).
+
+### Fixed
+
+- **The demo's pages no longer throw a SecurityError in Safari when the view is turned over and over.** Every choice a demo page makes is written into its address with `history.replaceState`, and WebKit refuses the hundred-and-first call in ten seconds; a held arrow key or a run of turn buttons made thirty a second, so the Kodokan's district page (and every other demo page) logged an uncaught error for each. The pages now write through `demo/address.js`, which writes at once while there is room (ninety in ten seconds), keeps only the latest address past that and writes it when the window has room, and never throws. A new end-to-end test turns the Kodokan a full turn at three tilts on every floor and in each state of its building, in Chromium and WebKit, and fails on any page error or any matrix that is not a number. (This is the one error the Kodokan's turn could be made to raise; the crash a reader reported on a phone, perhaps the memory of the large layers at a high pixel ratio, has not been reproduced.)
+- **The demo's featured arena keeps its place when the script takes over, in Safari on a Mac.** The venue list in the page's HTML is an empty select, which WebKit on macOS draws shorter than its minimum height, so filling it moved everything under it down by 21 px (the first-paint test failed there, on 0.44.0 and 0.44.1). The row now holds the height of a filled one.
+
+## [0.44.1] - 2026-10-28
+
+### Fixed
+
+- **The wheel over a focused 3D view tips it the way a drag does**: the wheel up lifts the near edge of the surface toward the viewer, like a drag up (it did the opposite, so the wheel and the hand disagreed), and the wheel down lowers it. A drag, the arrow keys and the "Tip the surface away" and "Tip the surface toward you" buttons already agreed (up lifts the near edge); a test now holds all four to one direction, and a finger that is let to turn tips it as a mouse does. Left and right are unchanged. The `pitch` of a view, in the address and in `TurnView`, keeps its meaning.
+
 ## [0.44.0] - 2026-10-22
 
 ### Added

package/dist/areas-entry.d.ts

@@ -0,0 +1,2 @@
+export { AREA_KEYS, CITYCTX_VENUES, TOKYO_VENUES, areaKeysFor, loadArea, loadAreasFor } from "./areas.ts";
+export type { ContextArea } from "./context.ts";

package/dist/areas-entry.js

@@ -0,0 +1,2 @@
+// The areas of context one file each, read when asked for: which go with a choice of venues (`areaKeysFor`) and the data of one or of those (`loadArea`, `loadAreasFor`), as data a district takes in its `context` option. The entries `osm`, `cityctx` and `plateau` export the same data all at once.
+export { AREA_KEYS, CITYCTX_VENUES, TOKYO_VENUES, areaKeysFor, loadArea, loadAreasFor } from "./areas.js";

package/dist/areas.d.ts

@@ -0,0 +1,46 @@
+import type { ContextArea } from "./context.ts";
+/** The venues each area of Vancouver and Seattle is drawn round, by their ids (the part of a district's key before the colon). */
+export declare const CITYCTX_VENUES: Readonly<{
+    vancouver: string[];
+    sodo: string[];
+    center: string[];
+}>;
+/** The venues of Tokyo Dome City, round which Project PLATEAU's buildings are drawn (the Kodokan stands a little way off, inside the area). */
+export declare const TOKYO_VENUES: readonly string[];
+/** The key of every area there is data for, in the order a district draws them: each is one file. */
+export declare const AREA_KEYS: readonly string[];
+/**
+ * The keys of the areas that go with some venues, in the order to draw them: downtown Vancouver's buildings and streets and its water, green and trees for BC Place and Rogers Arena; Seattle's SoDo for Lumen Field and
+ * T-Mobile Park, Seattle Center's for Climate Pledge Arena, and the city's own for a district that holds venues of both (they are three kilometres apart, so the detail of either would be a speck); Tokyo Dome City's for
+ * Tokyo Dome, Korakuen Hall and the Kodokan, which take it before any other. A venue of none of these has no area.
+ * @example
+ * ```ts
+ * import { areaKeysFor } from "@johnmorrisdotca/kyogijo-stadiums/areas";
+ * console.log(areaKeysFor(["bc-place:cfl", "rogers-arena"]));
+ * // [ 'vancouver', 'vancouver-nature' ]
+ * ```
+ */
+export declare function areaKeysFor(venues: readonly string[]): string[];
+/**
+ * One area by its key (`AREA_KEYS`), read from its own file the first time and kept after: asking again gives the same promise. A key that is not an area rejects, naming the keys there are.
+ * @example
+ * ```ts
+ * import { loadArea } from "@johnmorrisdotca/kyogijo-stadiums/areas";
+ * const area = await loadArea("seattle-sodo");
+ * console.log(area.key, area.radius);
+ * ```
+ */
+export declare function loadArea(key: string): Promise<ContextArea>;
+/**
+ * The areas that go with some venues, for a district's `context` option, each read from its own file and no other: what `contextFor` of the `cityctx` entry gives, and Tokyo Dome City's too, without carrying every area's data to
+ * get them.
+ * @example
+ * ```ts
+ * import { loadAreasFor } from "@johnmorrisdotca/kyogijo-stadiums/areas";
+ * import { planDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const venues = ["bc-place:cfl", "rogers-arena"];
+ * const plan = planDistrict({ venues, context: await loadAreasFor(venues) });
+ * console.log(plan.context?.attribution.en.length);
+ * ```
+ */
+export declare function loadAreasFor(venues: readonly string[]): Promise<ContextArea[]>;

package/dist/areas.js

@@ -0,0 +1,87 @@
+/** The venues each area of Vancouver and Seattle is drawn round, by their ids (the part of a district's key before the colon). */
+export const CITYCTX_VENUES = Object.freeze({
+    vancouver: ["bc-place", "rogers-arena"],
+    sodo: ["lumen-field", "t-mobile-park"],
+    center: ["climate-pledge-arena"],
+});
+/** The venues of Tokyo Dome City, round which Project PLATEAU's buildings are drawn (the Kodokan stands a little way off, inside the area). */
+export const TOKYO_VENUES = Object.freeze(["tokyo-dome", "korakuen-hall", "kodokan"]);
+/** The key of every area there is data for, in the order a district draws them: each is one file. */
+export const AREA_KEYS = Object.freeze(["vancouver", "vancouver-nature", "seattle-sodo", "seattle-center", "seattle-city", "tokyo-dome-city"]);
+/** Each area's loader: the one `import()` of the one file that holds it. */
+const LOADERS = {
+    "vancouver": async () => (await import("./osm.context.data.js")).VANCOUVER_CENTRE,
+    "vancouver-nature": async () => (await import("./cityctx.vancouver-nature.data.js")).VANCOUVER_NATURE,
+    "seattle-sodo": async () => (await import("./cityctx.seattle-sodo.data.js")).SEATTLE_SODO,
+    "seattle-center": async () => (await import("./cityctx.seattle-center.data.js")).SEATTLE_CENTER,
+    "seattle-city": async () => (await import("./cityctx.seattle-city.data.js")).SEATTLE_CITY,
+    "tokyo-dome-city": async () => (await import("./plateau.data.js")).TOKYO_DOME_CITY,
+};
+/**
+ * The keys of the areas that go with some venues, in the order to draw them: downtown Vancouver's buildings and streets and its water, green and trees for BC Place and Rogers Arena; Seattle's SoDo for Lumen Field and
+ * T-Mobile Park, Seattle Center's for Climate Pledge Arena, and the city's own for a district that holds venues of both (they are three kilometres apart, so the detail of either would be a speck); Tokyo Dome City's for
+ * Tokyo Dome, Korakuen Hall and the Kodokan, which take it before any other. A venue of none of these has no area.
+ * @example
+ * ```ts
+ * import { areaKeysFor } from "@johnmorrisdotca/kyogijo-stadiums/areas";
+ * console.log(areaKeysFor(["bc-place:cfl", "rogers-arena"]));
+ * // [ 'vancouver', 'vancouver-nature' ]
+ * ```
+ */
+export function areaKeysFor(venues) {
+    const ids = new Set(venues.map((key) => key.split(":")[0]));
+    const has = (list) => list.some((id) => ids.has(id));
+    if (has(TOKYO_VENUES))
+        return ["tokyo-dome-city"];
+    const keys = [];
+    if (has(CITYCTX_VENUES.vancouver))
+        keys.push("vancouver", "vancouver-nature");
+    const [sodo, center] = [has(CITYCTX_VENUES.sodo), has(CITYCTX_VENUES.center)];
+    if (sodo && center)
+        keys.push("seattle-city");
+    else if (sodo)
+        keys.push("seattle-sodo");
+    else if (center)
+        keys.push("seattle-center");
+    return keys;
+}
+const loaded = new Map();
+/**
+ * One area by its key (`AREA_KEYS`), read from its own file the first time and kept after: asking again gives the same promise. A key that is not an area rejects, naming the keys there are.
+ * @example
+ * ```ts
+ * import { loadArea } from "@johnmorrisdotca/kyogijo-stadiums/areas";
+ * const area = await loadArea("seattle-sodo");
+ * console.log(area.key, area.radius);
+ * ```
+ */
+export function loadArea(key) {
+    const kept = loaded.get(key);
+    if (kept !== undefined)
+        return kept;
+    const load = Object.hasOwn(LOADERS, key) ? LOADERS[key] : undefined;
+    if (load === undefined)
+        return Promise.reject(new Error(`no area of context ${JSON.stringify(key)}: the areas are ${AREA_KEYS.join(", ")}`));
+    const promise = load().catch((error) => {
+        // A file that did not come (the network) is asked for again next time, not remembered as failed.
+        loaded.delete(key);
+        throw error;
+    });
+    loaded.set(key, promise);
+    return promise;
+}
+/**
+ * The areas that go with some venues, for a district's `context` option, each read from its own file and no other: what `contextFor` of the `cityctx` entry gives, and Tokyo Dome City's too, without carrying every area's data to
+ * get them.
+ * @example
+ * ```ts
+ * import { loadAreasFor } from "@johnmorrisdotca/kyogijo-stadiums/areas";
+ * import { planDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const venues = ["bc-place:cfl", "rogers-arena"];
+ * const plan = planDistrict({ venues, context: await loadAreasFor(venues) });
+ * console.log(plan.context?.attribution.en.length);
+ * ```
+ */
+export function loadAreasFor(venues) {
+    return Promise.all(areaKeysFor(venues).map(loadArea));
+}

package/dist/cityctx.d.ts

@@ -1,14 +1,11 @@
 import type { ContextArea } from "./context.ts";
+import { CITYCTX_VENUES } from "./areas.ts";
 /** The venues each area is drawn round, by their ids (the part of a district's key before the colon). */
-export declare const CITYCTX_VENUES: Readonly<{
-    vancouver: string[];
-    sodo: string[];
-    center: string[];
-}>;
+export { CITYCTX_VENUES };
 /**
  * The areas of context that go with some venues, for a district's `context` option: downtown Vancouver's buildings and streets (`VANCOUVER_CENTRE`, of `./osm`) with its water, green and trees (`VANCOUVER_NATURE`) for BC Place and
  * Rogers Arena; Seattle's SoDo for Lumen Field and T-Mobile Park, Seattle Center's for Climate Pledge Arena, and the city's own, with streets and the buildings that matter from far, for a district that holds venues of both (they are
- * three kilometres apart, so the detail of either would be a speck). A venue of neither city has none.
+ * three kilometres apart, so the detail of either would be a speck). A venue of neither city has none. This one carries every area's data; `loadAreasFor` of the `areas` entry reads only the ones asked for.
  * @example
  * ```ts
  * import { contextFor } from "@johnmorrisdotca/kyogijo-stadiums/cityctx";

package/dist/cityctx.data.d.ts

@@ -1,11 +1,8 @@
 import type { ContextArea } from "./context.ts";
-/** Vancouver: water, green and trees round BC Place and Rogers Arena: 0 buildings, 0 street lines, 28 land cover outlines and 1370 trees within 450 metres of the middle, read 2026-10-22. */
-export declare const VANCOUVER_NATURE: ContextArea;
-/** Seattle: SoDo, Lumen Field and T-Mobile Park: 230 buildings, 1134 street lines, 8 land cover outlines and 1385 trees within 650 metres of the middle, read 2026-10-22. */
-export declare const SEATTLE_SODO: ContextArea;
-/** Seattle: Seattle Center and Climate Pledge Arena: 449 buildings, 1340 street lines, 47 land cover outlines and 1400 trees within 550 metres of the middle, read 2026-10-22. */
-export declare const SEATTLE_CENTER: ContextArea;
-/** Seattle: the city between the three venues: 1300 buildings, 2392 street lines, 49 land cover outlines and 0 trees within 3000 metres of the middle, read 2026-10-22. */
-export declare const SEATTLE_CITY: ContextArea;
+import { VANCOUVER_NATURE } from "./cityctx.vancouver-nature.data.ts";
+import { SEATTLE_SODO } from "./cityctx.seattle-sodo.data.ts";
+import { SEATTLE_CENTER } from "./cityctx.seattle-center.data.ts";
+import { SEATTLE_CITY } from "./cityctx.seattle-city.data.ts";
+export { VANCOUVER_NATURE, SEATTLE_SODO, SEATTLE_CENTER, SEATTLE_CITY };
 /** Every area, by key. */
 export declare const CITYCTX_AREAS: Readonly<Record<string, ContextArea>>;