@johnmorrisdotca/uchusen-rockets 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## [Unreleased]
 
+## [0.8.0] - 2026-11-04
+
+- **The wheel zooms the view.** The element's own hands (the ones a page without the family's view controls gets) now zoom with the wheel over the 3D view, as a pinch did; before, the wheel zoomed only once the view had focus. With the pointer anywhere else the page scrolls, and a wheel that starts with the zoom already at its end scrolls the page too, so the page is never trapped. A sideways swipe, or Shift and the wheel, is left to the page. Under the family's view controls (`drive()`) nothing changes: they already zoomed with the wheel (kazoku-ui 0.13).
+- Demo and documentation: the hint under the view, the Element page, the README and the Looks guide (English and Japanese) say that the wheel zooms, not Ctrl or Command with the wheel.
+
 ## [0.7.0] - 2026-11-03
 
 - Demo: the view controls' Auto-turn speeds are the family's speed buttons, 0.5×, 1× and 2× (kazoku-ui 0.14, `^0.14.0`), in place of Slow, Medium and Fast. The reader's choice is the controls' `pace` attribute and `?pace=2` in the address (the address key was `speed`). The base speed stays `speed="5"` degrees a second, which the buttons multiply, and Turn left and Turn right keep their way at any speed. The copied embed code turns at the same speed as the page (`spin` is the seconds a turn: 144, 72 or 36), where it said `slow` whatever the buttons said. Browser tests hold the three buttons, the speed each sets (sign kept), the address and the copied code, and that an old `?speed=fast` opens at 1×.

package/README.md

@@ -379,7 +379,7 @@ variantOf("starship", "2019").facts.diameter.value; // null
 
 - The element has an accessible name from its `label` attribute, or from the fit report's label (such as "Block 3 (V3)") when there is none. The 3D view's canvas says how to turn it.
 - A reader who asked for reduced motion gets no spin, no flames, no played flight and a cut instead of an animated move. The slider and charts still work.
-- Turning works by drag, touch and the keyboard: the arrow keys turn it, `+` and `-` zoom, Home puts it back.
+- Turning works by drag, touch and the keyboard: the arrow keys turn it, the wheel over the view, a pinch, `+` and `-` zoom, Home puts it back. With the pointer anywhere else the wheel scrolls the page, and so it does when the zoom is already at its end.
 - The demo's controls are at least 44 pixels tall and work with a keyboard.
 
 ```html

package/dist/element/scene.d.ts

@@ -154,5 +154,8 @@ export declare class RocketViewer {
     private fit;
     private orbit;
     private key;
+    /** The wheel over the view zooms it, as does a pinch (Ctrl or Command and the wheel). A wheel that starts with the zoom already at its end, or a sideways swipe, leaves the page to scroll. */
+    private onWheel;
+    private wheelTaken;
     private zoom;
 }

package/dist/element/scene.js

@@ -18,6 +18,8 @@ import { GroundKit } from "./ground.js";
 import { PartPlumes, PlumeKit } from "./plumes.js";
 const IDLE_STOP_MS = 90_000;
 const MOVE_MS = 1400;
+/** Wheel steps closer together than this belong to one turn of the wheel, so a zoom that reaches its end part-way through does not hand the rest to the page. */
+const WHEEL_GESTURE_MS = 300;
 /** Longest a draw waits for shaders to build: a browser that never says they are ready still draws. */
 const COMPILE_MS = 4000;
 const VIEW_MS = 700;
@@ -190,8 +192,7 @@ export class RocketViewer {
         this.canvas.style.touchAction = "pan-y";
         this.controls.addEventListener("start", () => this.touched());
         this.controls.addEventListener("change", () => this.wake());
-        this.canvas.addEventListener("focus", () => (this.controls.enableZoom = true));
-        this.canvas.addEventListener("blur", () => (this.controls.enableZoom = false));
+        this.canvas.addEventListener("wheel", this.onWheel, { passive: false });
         this.canvas.addEventListener("pointerdown", () => this.canvas.focus({ preventScroll: true }));
         this.canvas.addEventListener("dblclick", () => {
             if (!this.driven)
@@ -205,7 +206,7 @@ export class RocketViewer {
     }
     homeAngle = { az: 32, el: 9 };
     setLabel(label) {
-        this.canvas.setAttribute("aria-label", `3D view of ${label}. Drag or use the arrow keys to turn it; double-click or Home puts it back.`);
+        this.canvas.setAttribute("aria-label", `3D view of ${label}. Drag or use the arrow keys to turn it and the wheel to zoom; double-click or Home puts it back.`);
     }
     /** Loads a rocket and shows it. The camera's angle stays when a rocket is already showing. */
     async load(built, show, look, angle) {
@@ -954,6 +955,7 @@ export class RocketViewer {
         this.disposed = true;
         cancelAnimationFrame(this.frame);
         document.removeEventListener("visibilitychange", this.onVisibility);
+        this.canvas.removeEventListener("wheel", this.onWheel);
         this.resize.disconnect();
         this.controls.dispose();
         this.disposeParts();
@@ -1121,6 +1123,7 @@ export class RocketViewer {
             this.canvas.dataset.azimuth = angle.az.toFixed(2);
             this.canvas.dataset.elevation = angle.el.toFixed(2);
             this.canvas.dataset.moving = this.pose ? "true" : "false";
+            this.canvas.dataset.distance = this.camera.position.distanceTo(this.controls.target).toFixed(2);
             if (this.driven) {
                 this.canvas.dataset.zoom = this.driven.zoom.toFixed(2);
                 this.canvas.dataset.pan = `${Math.round(this.driven.panX)},${Math.round(this.driven.panY)}`;
@@ -1180,6 +1183,29 @@ export class RocketViewer {
         move();
         this.wake();
     }
+    /** The wheel over the view zooms it, as does a pinch (Ctrl or Command and the wheel). A wheel that starts with the zoom already at its end, or a sideways swipe, leaves the page to scroll. */
+    onWheel = (event) => {
+        if (this.driven)
+            return;
+        const pinch = event.ctrlKey || event.metaKey;
+        if (!pinch && (event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY)))
+            return;
+        const pixels = event.deltaMode === 1 ? event.deltaY * (pinch ? 5 : 33) : event.deltaMode === 2 ? event.deltaY * 800 : event.deltaY;
+        const factor = pinch ? Math.exp(-pixels * 0.01) : MathUtils.clamp(Math.exp(-pixels * 0.002), 0.5, 2);
+        const length = this.camera.position.distanceTo(this.controls.target);
+        const atEnd = factor >= 1 ? length <= this.controls.minDistance * 1.0001 : length >= this.controls.maxDistance * 0.9999;
+        const now = Number.isFinite(event.timeStamp) ? event.timeStamp : 0;
+        if (!pinch && atEnd && !(now >= this.wheelTaken && now - this.wheelTaken < WHEEL_GESTURE_MS))
+            return;
+        event.preventDefault();
+        this.wheelTaken = now;
+        if (atEnd)
+            return;
+        this.touched();
+        this.zoom(1 / factor);
+        this.wake();
+    };
+    wheelTaken = Number.NEGATIVE_INFINITY;
     zoom(factor) {
         const offset = this.camera.position.clone().sub(this.controls.target);
         const length = MathUtils.clamp(offset.length() * factor, this.controls.minDistance, this.controls.maxDistance);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/uchusen-rockets",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Uchusen Rockets 宇宙船: line drawings and 3D views of rockets, as a web component. Every variant with its own sourced sizes, a typed way to assemble a rocket from parts, stack and separate. No logos. three.js is a peer dependency.",
   "keywords": [
     "rocket",