@a2f0/skyline 0.2.62 → 0.2.64

package/README.md

@@ -23,7 +23,7 @@ Serve `dist/` over HTTP rather than opening files directly: WebGL and the 3D pag
 
 | Page | Shows | Docs |
 | --- | --- | --- |
-| `index.html` | The viewer, mounted as the package mounts it: opens on the 3D skyline, with the enhanced drawing, the original drawing, and a WebGL prototype one button away | [The viewer](docs/viewer.md) |
+| `index.html` | The viewer, mounted as the package mounts it: opens on the 3D skyline, with the original drawing one button away and links to the enhanced drawing and the WebGL prototype | [The viewer](docs/viewer.md) |
 | `skyline-3d.html` | The full-screen 3D skyline on its own: camera views, streets, footprints, celebratory lights, and a building menu | [Full-screen 3D skyline](docs/viewer.md#full-screen-3d-skyline) |
 | `building-detail.html?building=<id>` | One mapped building alone on its platform | [Building menu and detail](docs/viewer.md#building-menu-and-detail) |
 | `skyline-study.html` | The 3D scene over the drawing, in the geographic layout or the original drawing's fit | [3D studies](docs/studies.md#skyline-study) |

package/docs/package.md

@@ -312,8 +312,8 @@ Before 0.2, the viewer ran in an iframe. Hosts upgrading:
 - If the viewer's or scene's code fails to load, as on a dropped connection, the
   browser keeps that failure for the page: later mounts on the same page fail the same
   way until it reloads. A frame used to retry with a new document.
-- The site's own `index.html` shows two prototypes from its toolbar, the hover-scripted
-  enhanced drawing and the WebGL prototype, as pages of their own in frames; a host's
+- The site's own `index.html` links two prototypes from its toolbar, the hover-scripted
+  enhanced drawing and the WebGL prototype, which open as pages of their own; a host's
   viewer never shows them.
 
 ## Import a scene or a building

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.62",
+  "version": "0.2.64",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/skyline-3d.js

@@ -6,6 +6,41 @@ import { createGeographicRoads, geographicOrigin } from "./models/skyline-geogra
 import { celebrations } from "./models/celebrations.js";
 import { createDaylight, daylightGround, deferSkylineColour } from "./models/colour-materials.js";
 import { loadMarkup, loadStylesheet } from "./markup.js";
+/**
+ * The press's next state, and the menu to open now, if any. A mouse press holds the menu its
+ * event asks for until it is released without moving, so a right-drag still pans; a touch's
+ * long press, or an event after a release, opens at once, unless a mouse dragged first.
+ */
+export function pressTransition(press, event) {
+    const stay = { press, open: null };
+    switch (event.type) {
+        case "down":
+            return { press: { status: "down", x: event.x, y: event.y, mouse: event.mouse, moved: false, pending: null }, open: null };
+        case "move":
+            if (press.status !== "down" || press.moved || Math.hypot(event.x - press.x, event.y - press.y) <= 4)
+                return stay;
+            return { press: { ...press, moved: true }, open: null };
+        case "up":
+            if (press.status !== "down")
+                return stay;
+            return { press: { status: "released", mouse: press.mouse, moved: press.moved }, open: press.moved ? null : press.pending };
+        case "cancel":
+            if (press.status !== "down")
+                return stay;
+            return { press: { status: "released", mouse: press.mouse, moved: press.moved }, open: null };
+        case "menu":
+            if (press.status === "down" && press.mouse)
+                return { press: { ...press, pending: event.menu }, open: null };
+            return { press, open: press.status !== "idle" && press.mouse && press.moved ? null : event.menu };
+        case "dismiss":
+            return press.status === "down" && press.pending ? { press: { ...press, pending: null }, open: null } : stay;
+        default:
+            return assertNever(event);
+    }
+}
+function assertNever(value) {
+    throw new Error(`Unhandled press event: ${JSON.stringify(value)}`);
+}
 // The skyline viewer's full-screen 3D mode: every mapped building, seen through the
 // drawing's own camera and framed as the viewer frames the drawing, so each tower stands
 // where its drawn one does until the camera moves. It renders into skyline-3d.html's own
@@ -266,8 +301,13 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
     const detailLink = root.querySelector("#building-detail-link");
     const lightingMenu = root.querySelector("#building-lighting-menu");
     let menuBuilding = "";
-    let press = null;
-    let pendingMenu = null;
+    let press = { status: "idle" };
+    function sendPress(event) {
+        const next = pressTransition(press, event);
+        press = next.press;
+        if (next.open)
+            openMenu(next.open.building, next.open.x, next.open.y);
+    }
     function openMenu(building, x, y) {
         menuBuilding = building.building.userData["buildingId"];
         menuTitle.textContent = building.building.userData["geography"]?.name ?? building.building.name;
@@ -310,7 +350,7 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
         detailLink.focus({ preventScroll: true });
     }
     function closeMenu() {
-        pendingMenu = null;
+        sendPress({ type: "dismiss" });
         if (menu.hidden)
             return;
         if (menu.contains(root.activeElement))
@@ -329,35 +369,17 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
         menuPress = null;
     }, listening);
     canvas.addEventListener("pointerdown", (event) => {
-        press = { x: event.clientX, y: event.clientY, mouse: event.pointerType === "mouse", down: true, moved: false };
-    }, listening);
-    window.addEventListener("pointermove", (event) => {
-        if (press?.down && Math.hypot(event.clientX - press.x, event.clientY - press.y) > 4)
-            press.moved = true;
-    }, listening);
-    window.addEventListener("pointerup", () => {
-        if (!press?.down)
-            return;
-        press.down = false;
-        const pending = pendingMenu;
-        pendingMenu = null;
-        if (pending && !press.moved)
-            openMenu(pending.building, pending.x, pending.y);
-    }, listening);
-    window.addEventListener("pointercancel", () => {
-        if (press)
-            press.down = false;
-        pendingMenu = null;
+        sendPress({ type: "down", x: event.clientX, y: event.clientY, mouse: event.pointerType === "mouse" });
     }, listening);
+    window.addEventListener("pointermove", (event) => sendPress({ type: "move", x: event.clientX, y: event.clientY }), listening);
+    window.addEventListener("pointerup", () => sendPress({ type: "up" }), listening);
+    window.addEventListener("pointercancel", () => sendPress({ type: "cancel" }), listening);
     canvas.addEventListener("contextmenu", (event) => {
         const building = viewer.buildingAt(event.clientX, event.clientY);
         if (!building)
             return closeMenu();
         event.preventDefault();
-        if (press?.down && press.mouse)
-            pendingMenu = { building, x: event.clientX, y: event.clientY };
-        else if (!(press?.mouse && press.moved))
-            openMenu(building, event.clientX, event.clientY);
+        sendPress({ type: "menu", menu: { building, x: event.clientX, y: event.clientY } });
     }, listening);
     canvas.addEventListener("wheel", closeMenu, { passive: true, signal });
     window.addEventListener("blur", closeMenu, listening);

package/site/skyline-animated.svg

@@ -5,9 +5,6 @@
    preserveAspectRatio="xMidYMax meet"
    version="1.1"
    id="svg6766"
-   role="img"
-   aria-label="Chicago skyline at night"
-   aria-describedby="skyline-description"
    style="color-scheme:dark"
    sodipodi:docname="skyline-animated.svg"
    inkscape:version="1.1 (c4e8f9e, 2021-05-24)"
@@ -144,12 +141,22 @@
       .building-tooltip {
         pointer-events: none;
       }
+      .back-link text {
+        fill: #a8a8a8;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+        text-decoration: underline;
+      }
+      .back-link:hover text,
+      .back-link:focus-visible text {
+        fill: #ffffff;
+      }
       @media (prefers-reduced-motion: reduce) {
         .interactive-building.is-active { transition: none; }
       }
     ]]></style>
   </defs>
-  <g id="skyline-position" transform="translate(1105.5923,-87.26366)">
+  <!-- The drawing is one image; the root stays a plain document so the link back reaches assistive technology. -->
+  <g id="skyline-position" transform="translate(1105.5923,-87.26366)" role="img" aria-label="Chicago skyline at night" aria-describedby="skyline-description">
   <g
      inkscape:groupmode="layer"
      id="layer4"
@@ -18670,6 +18677,17 @@
        style="display:inline;stroke-width:1.33526" />
   </g>
   </g>
+  <!-- Opened on its own, the drawing links back to the viewer; the script keeps it in the top-left corner. -->
+  <a
+     id="back-link"
+     class="back-link"
+     href="index.html">
+    <text
+       id="back-link-text"
+       font-size="70"
+       x="40"
+       y="110">← back to skyline</text>
+  </a>
   <g
      id="building-tooltip"
      class="building-tooltip"
@@ -18788,6 +18806,21 @@
         }
       }
 
+      // The way back to the viewer: 12px text, 12px in from the window's top left, at every
+      // window size.
+      const backLink = document.querySelector("#back-link-text");
+      function placeBackLink() {
+        const matrix = svg.getScreenCTM();
+        if (!matrix) return;
+        const scale = Math.hypot(matrix.a, matrix.b) || 1;
+        const start = svgPoint(0, 0, matrix.inverse());
+        backLink.setAttribute("font-size", 12 / scale);
+        backLink.setAttribute("x", start.x + 12 / scale);
+        backLink.setAttribute("y", start.y + 24 / scale);
+      }
+      placeBackLink();
+      window.addEventListener("resize", placeBackLink, { passive: true });
+
       svg.addEventListener("pointerover", updateHover, { passive: true });
       svg.addEventListener("pointermove", updateHover, { passive: true });
       svg.addEventListener("pointerleave", deactivate);

package/site/skyline-viewer.js

@@ -1,20 +1,33 @@
 import { loadMarkup } from "./markup.js";
 import { provideThree } from "./three-engine.js";
-// What each of the site toolbar's mode buttons shows, says and announces. The viewer opens
-// on the 3D skyline; each toggle shows its mode and, pressed again, returns to it.
+// What the site toolbar's mode button shows, says and announces. The viewer opens on the 3D
+// skyline; the toggle shows the original drawing and, pressed again, returns to it.
 const home = { label: "3d skyline", title: "Return to the 3D skyline", status: "3D skyline displayed" };
 const toggles = {
     original: { id: "toggle-skyline", label: "show original", title: "Compare with the original skyline SVG", status: "Original skyline displayed" },
-    webgl: { id: "toggle-webgl", label: "show webgl", title: "Preview the WebGL skyline prototype", status: "WebGL skyline prototype displayed" },
-    enhanced: { id: "toggle-enhanced", label: "show enhanced", title: "Show the enhanced interactive skyline drawing", status: "Enhanced interactive skyline displayed" },
-};
-// The two prototypes the site's toolbar shows in place are pages of their own, as the
-// studies are: the hover-scripted drawing and the WebGL prototype. Only the site's own
-// index.html shows them, in frames; a host's viewer never does.
-const prototypes = {
-    enhanced: { src: "skyline-animated.svg", title: "Animated Chicago skyline at night" },
-    webgl: { src: "skyline-webgl.html", title: "WebGL Chicago skyline prototype" },
 };
+// The two prototypes are pages of their own, as the studies are: the hover-scripted drawing
+// and the WebGL prototype. The site's toolbar links to them, and each page keeps its own
+// scripts and a way back; a host's viewer never shows them.
+const prototypes = [
+    { id: "link-webgl", href: "skyline-webgl.html", label: "webgl prototype", title: "Open the WebGL skyline prototype", ct: "viewer.webgl" },
+    { id: "link-enhanced", href: "skyline-animated.svg", label: "enhanced drawing", title: "Open the enhanced interactive skyline drawing", ct: "viewer.enhanced" },
+];
+export function sceneTransition(status, event) {
+    switch (event) {
+        case "ready":
+            return status === "booting" ? "ready" : status;
+        case "failed":
+            return status === "booting" ? "unavailable" : status;
+        case "lost":
+            return "unavailable";
+        default:
+            return assertNever(event);
+    }
+}
+function assertNever(value) {
+    throw new Error(`Unhandled scene event: ${String(value)}`);
+}
 const SCENE_FAILURE = "The 3D preview could not load. Check that WebGL 2 is enabled, then reload. You can still compare the SVG or return to the skyline.";
 function element(document, tag, properties = {}, attributes = {}) {
     const created = Object.assign(document.createElement(tag), properties);
@@ -48,26 +61,18 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
     viewer.append(stars, scene, drawing, originalReturn, embeddedOriginal, status);
     root.append(viewer);
     let mode = "3d";
-    // Keep the drawing reachable if the scene's markup or code fails to load,
-    // or its graphics context is lost.
-    let sceneUnavailable = true;
-    // Both show original buttons wait while the scene boots, until its first frame,
-    // a failure to load, or a lost graphics context.
-    let booting = true;
-    const frames = {};
+    // Both show original buttons wait while the scene boots, until its first frame, a failure
+    // to load, or a lost graphics context; the drawing stays reachable while it is unavailable.
+    let sceneStatus = "booting";
     const toolbar = navigation ? createToolbar() : null;
     function updateView() {
-        viewer.toggleAttribute("data-booting", sceneUnavailable && mode === "3d");
+        viewer.toggleAttribute("data-booting", sceneStatus !== "ready" && mode === "3d");
         scene.hidden = mode !== "3d";
         if (mode === "original" && !drawing.getAttribute("src"))
             drawing.src = new URL("skyline-original-fit.svg", assets).href;
         drawing.hidden = mode !== "original";
-        if (mode === "enhanced" || mode === "webgl")
-            frames[mode] ??= createPrototype(mode);
-        for (const [name, frame] of Object.entries(frames))
-            frame.hidden = name !== mode;
         originalReturn.hidden = mode !== "original";
-        embeddedOriginal.hidden = navigation || mode !== "3d" || booting || !sceneUnavailable;
+        embeddedOriginal.hidden = navigation || mode !== "3d" || sceneStatus !== "unavailable";
         if (toolbar) {
             for (const [name, toggle] of Object.entries(toggles)) {
                 const button = toolbar.querySelector(`#${toggle.id}`), showing = name === mode;
@@ -75,9 +80,13 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
                 button.setAttribute("aria-pressed", String(showing));
                 button.title = showing ? home.title : toggle.title;
             }
-            toolbar.querySelector(`#${toggles.original.id}`).hidden = booting;
+            toolbar.querySelector(`#${toggles.original.id}`).hidden = sceneStatus === "booting";
         }
     }
+    function sendScene(event) {
+        sceneStatus = sceneTransition(sceneStatus, event);
+        updateView();
+    }
     function showMode(next) {
         mode = next;
         updateView();
@@ -99,7 +108,7 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
         showMode("3d");
         const star = root.querySelector("#menu-toggle");
         const focus = star?.getAttribute("aria-expanded") === "true" ? root.querySelector("#show-original") : star;
-        const target = !sceneUnavailable && focus?.matches(":enabled") ? focus : null;
+        const target = sceneStatus === "ready" && focus?.matches(":enabled") ? focus : null;
         target?.focus({ preventScroll: true });
         if (!target || root.activeElement !== target) {
             (embeddedOriginal.hidden ? toolbar?.querySelector(`#${toggles.original.id}`) : embeddedOriginal)?.focus({ preventScroll: true });
@@ -156,8 +165,7 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
                 return new Promise(() => { });
             const message = element(document, "p", { className: "loading", textContent: SCENE_FAILURE }, { role: "status" });
             scene.append(message);
-            booting = false;
-            updateView();
+            sendScene("failed");
             throw error;
         }
         if (signal.aborted)
@@ -192,15 +200,11 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
                     colour,
                     onShowOriginal: showOriginal,
                     onReady() {
-                        sceneUnavailable = false;
-                        booting = false;
-                        updateView();
+                        sendScene("ready");
                         resolve();
                     },
                     onUnavailable() {
-                        sceneUnavailable = true;
-                        booting = false;
-                        updateView();
+                        sendScene("lost");
                     },
                 });
             });
@@ -213,8 +217,7 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
             // press away.
             scene.querySelector("#loading").textContent = SCENE_FAILURE;
             scene.querySelectorAll("button, input").forEach((control) => { control.disabled = true; });
-            booting = false;
-            updateView();
+            sendScene("failed");
             throw error;
         }
     }
@@ -285,6 +288,9 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
             toggleButton.addEventListener("click", () => showMode(mode === name ? "3d" : name), listening);
             nav.append(toggleButton);
         }
+        for (const prototype of prototypes) {
+            nav.append(element(document, "a", { id: prototype.id, href: new URL(prototype.href, assets).href, title: prototype.title, textContent: prototype.label }, { "data-ct": prototype.ct }));
+        }
         nav.append(element(document, "a", { href: new URL("building-study.html", assets).href, textContent: "3d building" }, { "data-ct": "viewer.building-study" }), element(document, "a", { href: new URL("skyline-study.html", assets).href, textContent: "skyline study" }, { "data-ct": "viewer.skyline-study" }));
         const debugButton = button("debug-motion", "debug motion", { "aria-describedby": "stars-motion-status" });
         const motionStatus = element(document, "p", { className: "motion-status", id: "stars-motion-status" }, { role: "status" });
@@ -319,17 +325,4 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
         resizing.observe(scene);
         signal.addEventListener("abort", () => resizing.disconnect(), { once: true });
     }
-    // A prototype's page, in a frame of its own, shown in place the first time it is chosen.
-    // Keys pressed inside it go to its own window, so F listens there too.
-    function createPrototype(name) {
-        const frame = element(document, "iframe", { className: "scene", id: `${name}-scene`, title: prototypes[name].title, src: new URL(prototypes[name].src, assets).href });
-        frame.addEventListener("load", () => {
-            try {
-                frame.contentWindow?.addEventListener("keydown", fullscreenShortcut, listening);
-            }
-            catch { /* A frame from another origin keeps its keys. */ }
-        }, listening);
-        viewer.insertBefore(frame, originalReturn);
-        return frame;
-    }
 }

package/site/skyline-webgl.html

@@ -73,6 +73,26 @@
         white-space: nowrap;
       }
 
+      .back {
+        position: fixed;
+        z-index: 3;
+        top: max(12px, env(safe-area-inset-top));
+        left: max(12px, env(safe-area-inset-left));
+        color: #a8a8a8;
+        font-size: 12px;
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 3px;
+      }
+      .back:hover,
+      .back:focus-visible {
+        color: #fff;
+        text-decoration-thickness: 2px;
+      }
+      .back:focus-visible {
+        outline: 1px solid #fff;
+        outline-offset: 4px;
+      }
       [hidden] {
         display: none !important;
       }
@@ -80,6 +100,7 @@
     <script type="module" src="click-tracking-page.js"></script>
   </head>
   <body>
+    <a class="back" id="back-link" href="index.html">← back to skyline</a>
     <canvas id="skyline" role="img" aria-label="Interactive WebGL rendering of the Chicago skyline"></canvas>
     <p class="loading" id="loading" role="status">preparing WebGL building layers…</p>
     <div class="tooltip" id="tooltip" aria-hidden="true" hidden></div>
@@ -435,7 +456,7 @@
           }
 
           const sourceRoot = sourceDocument.documentElement;
-          sourceRoot.querySelectorAll("script, #building-tooltip").forEach((element) => element.remove());
+          sourceRoot.querySelectorAll("script, #building-tooltip, #back-link").forEach((element) => element.remove());
           sourceRoot.setAttribute("width", "850");
           sourceRoot.setAttribute("height", "278");
           const sourceHost = document.createElement("div");