@johnmorrisdotca/kyogijo-stadiums 0.56.0 → 0.57.0

package/CHANGELOG.md

@@ -7,6 +7,13 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.57.0] - 2026-11-03
+
+### Changed
+
+- **The wheel zooms the 3D view** (KAZOKU-UI-45). The wheel over the view now zooms it, as a map does (up in, down out, about the view's middle, which is where the pinch and the buttons zoom; a notch about as much as the + key); before, the plain wheel was the page's and tipped a focused view. A trackpad's pinch (Ctrl or Command and the wheel) still zooms. Shift and the wheel, or a sideways swipe, turns the view. The wheel never tips it: a drag, the arrows and the buttons do. With the pointer anywhere else the wheel scrolls the page, and a wheel that starts while the zoom is already at its end that way scrolls the page too, so a page of views is never trapped; the steps of a turn that reaches the end part-way through stay with the view, so the page does not jump.
+
+
 ## [0.56.0] - 2026-11-03
 
 ### Added

package/catalogue.json

@@ -3,7 +3,7 @@
  "generatedAt": "2026-11-03",
  "package": {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.56.0"
+  "version": "0.57.0"
  },
  "address": "https://johnmorrisdotca.github.io/kyogijo-stadiums/catalogue.json",
  "site": "https://johnmorrisdotca.github.io/kyogijo-stadiums/",

package/dist/catalogue.data.js

@@ -3,7 +3,7 @@ export const CATALOGUE_DATA = {
     "generatedAt": "2026-11-03",
     "package": {
         "name": "@johnmorrisdotca/kyogijo-stadiums",
-        "version": "0.56.0"
+        "version": "0.57.0"
     },
     "address": "https://johnmorrisdotca.github.io/kyogijo-stadiums/catalogue.json",
     "site": "https://johnmorrisdotca.github.io/kyogijo-stadiums/",

package/dist/turn.camera.d.ts

@@ -78,11 +78,14 @@ export declare function nudge(view: TurnView, toward: TurnToward, amount: number
  * yaw falls) and a drag down tips the top toward the eye (the pitch falls).
  */
 export declare function drag(view: TurnView, dx: number, dy: number, tilt?: boolean, degreesPerPixel?: number): TurnView;
+/** Wheel steps closer together than this, in milliseconds, are one turn of the wheel or one swipe (with its glide). */
+export declare const WHEEL_GESTURE_MS = 300;
 /**
- * The view after the wheel turns by `deltaY` (positive is down, as `WheelEvent.deltaY` says) while the view has focus: the wheel up tips the surface as a drag up does (the near edge goes up, the
- * front is lifted: the pitch rises) and the wheel down as a drag down does.
+ * The view after the wheel turns by `deltaY` (positive is down, as `WheelEvent.deltaY` says; `deltaMode` 1 is lines and 2 is pages): the wheel up zooms in and the wheel down zooms out,
+ * about the view's middle, as the pinch and the buttons do (the view has no pan). A trackpad's pinch (`pinch`: it arrives as Ctrl and the wheel) comes in small steps; a plain wheel's
+ * notch is about 100 pixels and zooms about 1.2 times, as the + key does, and one step of it never zooms more than twice either way.
  */
-export declare const wheelTip: (view: TurnView, deltaY: number) => TurnView;
+export declare function wheelZoom(view: TurnView, deltaY: number, deltaMode?: number, pinch?: boolean): TurnView;
 /** A box in the scene, in pixels from the scene's middle, the floor at `z0` and the highest thing at `z1`. */
 export interface Box3 {
     x0: number;

package/dist/turn.camera.js

@@ -100,11 +100,18 @@ export function nudge(view, toward, amount) {
 export function drag(view, dx, dy, tilt = true, degreesPerPixel = 0.4) {
     return clampView({ ...view, yaw: view.yaw - dx * degreesPerPixel, pitch: tilt ? view.pitch - dy * degreesPerPixel * 0.75 : view.pitch });
 }
+/** Wheel steps closer together than this, in milliseconds, are one turn of the wheel or one swipe (with its glide). */
+export const WHEEL_GESTURE_MS = 300;
 /**
- * The view after the wheel turns by `deltaY` (positive is down, as `WheelEvent.deltaY` says) while the view has focus: the wheel up tips the surface as a drag up does (the near edge goes up, the
- * front is lifted: the pitch rises) and the wheel down as a drag down does.
+ * The view after the wheel turns by `deltaY` (positive is down, as `WheelEvent.deltaY` says; `deltaMode` 1 is lines and 2 is pages): the wheel up zooms in and the wheel down zooms out,
+ * about the view's middle, as the pinch and the buttons do (the view has no pan). A trackpad's pinch (`pinch`: it arrives as Ctrl and the wheel) comes in small steps; a plain wheel's
+ * notch is about 100 pixels and zooms about 1.2 times, as the + key does, and one step of it never zooms more than twice either way.
  */
-export const wheelTip = (view, deltaY) => clampView({ ...view, pitch: view.pitch - deltaY * 0.15 });
+export function wheelZoom(view, deltaY, deltaMode = 0, pinch = false) {
+    const pixels = deltaMode === 1 ? deltaY * (pinch ? 5 : 33) : deltaMode === 2 ? deltaY * 800 : deltaY;
+    const factor = pinch ? Math.exp(clamp(-pixels * 0.01, -10, 10)) : clamp(Math.exp(-pixels * 0.002), 0.5, 2);
+    return clampView({ ...view, zoom: view.zoom * factor });
+}
 const RAD = Math.PI / 180;
 /** Where a point of the scene falls on the screen, in pixels from the middle of the container, when the scene is placed as given and the eye is `distance` pixels away. */
 export function project(point, view, at, distance) {

package/dist/turn.dom.js

@@ -1,10 +1,10 @@
 // The 3D view in a page: `mountKyogijoTurn` writes the scene (`turn.markup.ts`) into a container and makes it turn, as the cube of kyuubu turns: a drag turns and
-// tips it, a pinch or Ctrl and the wheel zoom, the arrow keys step it, four viewpoints and a reset are a button or a number key away, a reader who prefers
+// tips it, the wheel or a pinch zooms, the arrow keys step it, four viewpoints and a reset are a button or a number key away, a reader who prefers
 // reduced motion gets jumps for glides, and where the browser cannot draw in 3D the flat drawing stays. Nothing is polled and nothing runs while the view is
 // still: the elements' `transform`s are written when the view changes, and a glide between viewpoints is a short run of animation frames.
 import { displayProbe, frameBatch } from "./turn.frames.js";
 import { drawKyogijo } from "./draw.js";
-import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step, turnDirection, viewScale, wheelTip } from "./turn.camera.js";
+import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step, turnDirection, viewScale, wheelZoom, WHEEL_GESTURE_MS, ZOOM_MAX, ZOOM_MIN } from "./turn.camera.js";
 import { buildTurn, floorOptions, openingView, turnWords } from "./turn.model.js";
 import { controlsMarkup, layoutOf, turnMarkupOf, worldMarkup } from "./turn.markup.js";
 import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
@@ -656,20 +656,33 @@ export function mountTurn(host, options, settings, build, replayable = false, le
     stage.addEventListener("pointerup", onUp);
     stage.addEventListener("pointercancel", onUp);
     stage.addEventListener("dblclick", toOpening);
-    // ---- The wheel: Ctrl and the wheel (a pinch on a trackpad) zoom; with the view focused the wheel tips and turns it; otherwise the page scrolls as ever. ----
+    // ---- The wheel over the view zooms it, as a map does; with the pointer anywhere else the page scrolls. Ctrl or Command and the wheel (a pinch on a trackpad) zoom too. Shift and the
+    // wheel, or a sideways swipe, turn it. Tipping is a drag, the keys and the buttons. A wheel that starts while the zoom is already at its end that way goes on to scroll the page, so the page is
+    // never trapped; one that reaches the end part-way through stops there rather than flinging the page. ----
+    let wheelTaken = Number.NEGATIVE_INFINITY;
     const onWheel = (event) => {
-        if (event.ctrlKey) {
+        const pinch = event.ctrlKey || event.metaKey;
+        const now = Number.isFinite(event.timeStamp) ? event.timeStamp : 0;
+        const continuing = now >= wheelTaken && now - wheelTaken < WHEEL_GESTURE_MS;
+        if (!pinch && (event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))) {
             event.preventDefault();
+            wheelTaken = now;
             grab();
-            view = clampView({ ...view, zoom: view.zoom * Math.exp(-event.deltaY * 0.01) });
+            view = clampView({ ...view, yaw: view.yaw + (event.deltaX || event.deltaY) * 0.25 });
         }
-        else if (doc.activeElement === stage) {
+        else {
+            const next = wheelZoom(view, event.deltaY, event.deltaMode, pinch);
+            const atEnd = event.deltaY <= 0 ? view.zoom >= ZOOM_MAX : view.zoom <= ZOOM_MIN;
+            // Ctrl and the wheel is always the view's, or the browser would zoom the whole page.
+            if (!pinch && atEnd && !continuing)
+                return;
             event.preventDefault();
+            wheelTaken = now;
+            if (next.zoom === view.zoom)
+                return;
             grab();
-            view = event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY) ? clampView({ ...view, yaw: view.yaw + (event.deltaX || event.deltaY) * 0.25 }) : wheelTip(view, event.deltaY);
+            view = next;
         }
-        else
-            return;
         shown = view;
         paint(shown);
         label();

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export declare const VERSION = "0.56.0";
+export declare const VERSION = "0.57.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export const VERSION = "0.56.0";
+export const VERSION = "0.57.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "description": "Kyogijo Stadiums 競技場, 40 sports' surfaces as SVG, drawn to scale from the rulebooks: NFL, CFL and IFAF football fields, an NHL rink, an NBA court, MLB ballparks, soccer pitches, curling sheets, athletics stadiums, speed skating, short track and figure skating rinks, swimming pools, water polo fields, diving wells, artistic swimming areas, and the courts and fields of tennis, volleyball (indoor, beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet, netball, lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budo of judo, karate, kendo, sumo and kyudo with a dojo of tatami laid as real units, the MMA cage, with each team's name and logo on its side and the score in the middle, stands and a crowd, a pageant of flags, and a 3D view. Light and dark, accessible, a compact badge for lists, a helper for React and a custom element. Zero dependencies.",
   "keywords": [
     "sports",