@a2f0/skyline 0.2.62 → 0.2.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.62",
+  "version": "0.2.63",
   "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-viewer.js

@@ -15,6 +15,21 @@ const prototypes = {
     enhanced: { src: "skyline-animated.svg", title: "Animated Chicago skyline at night" },
     webgl: { src: "skyline-webgl.html", title: "WebGL Chicago skyline prototype" },
 };
+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,16 +63,13 @@ 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;
+    // 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 frames = {};
     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;
@@ -67,7 +79,7 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
         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 +87,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 +115,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 +172,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 +207,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 +224,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;
         }
     }