@johnmorrisdotca/kazoku-ui 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.3.0] - 2026-11-01
+
+- Zoom about a point of your own: the `anchor` attribute (`x,y`), the `element.anchor` setter and the controller's `anchor` member and option take a point in CSS pixels from the view's middle at Fit. The + and - buttons, the 2x button and the + and - keys zoom about it, and it stays fixed on screen within a pixel; wheel, pinch and double tap still zoom about the pointer. With no anchor they zoom about the middle, as before. `zoomAt` and `zoomBy` with no point use it.
+- Arrow Up the way a wheel goes: `key-tilt="wheel"` (option `keyTilt: "wheel"`) makes Arrow Up tip the way a wheel turned up does. The default, `drag`, still tips like a drag up.
+- `stop-turn` (option `stopTurn`) stops the automatic turn on a press, the wheel or a key on the view, with a `pause` event. Off by default; buttons and sliders never stop it.
+- `tilt-step` (option `tiltStep`) rounds the tilt of a drag to a multiple of this many degrees; `1` gives whole degrees. `dragTurn` takes it as a seventh argument. 0 by default.
+- The demo switches them on in its address: `?anchor=pin`, `?key-tilt=wheel`, `?stop-turn`, `?tilt-step=1`.
+
 ## [0.2.1] - 2026-11-01
 
 - `ignore` now sees through shadow DOM: it tests the elements on the event's `composedPath()`, from the innermost up to the view, so a button inside a web component's open shadow root is left alone. Before, only the event's target (the host) was tested. A closed shadow root stays a limit: mark its host with `data-kazoku-ignore`.

package/README.md

@@ -98,7 +98,7 @@ myPlayButton.onclick = () => view.toggle();
 myZoomIn.onclick = () => view.zoomBy(1.4);
 ```
 
-Options of `createViewController` that match: `zoom` (`"fit"` or a number), `fitScale`, `ignore`. The controller also has `ignore` (changeable), `fitScale`, `startZoom` (the `zoom` the view opens at) and `setFitScale(n)`, `setStartZoom(zoom)`; `DEFAULT_IGNORE` is the default selector.
+Options of `createViewController` that match: `zoom` (`"fit"` or a number), `fitScale`, `ignore`, `anchor`, `keyTilt`, `stopTurn`, `tiltStep`. `anchor`, `keyTilt`, `stopTurn` and `tiltStep` are also members you can change at any time. The controller also has `ignore` (changeable), `fitScale`, `startZoom` (the `zoom` the view opens at) and `setFitScale(n)`, `setStartZoom(zoom)`; `DEFAULT_IGNORE` is the default selector.
 
 ### Buttons and links inside the view
 
@@ -106,6 +106,20 @@ The hands capture the pointer on the `for` element, so a press on a button or li
 
 `ignore` also sees through shadow DOM: it tests every element on the event's path from the innermost one up to the view, so a button inside a web component's open shadow root (a card's own Animate button, say) is left alone even though the event's target is the component. A closed shadow root hides its inside from the page, so only the component itself can be matched: mark the host with `data-kazoku-ignore`, or add its tag name to `ignore`.
 
+### Zooming about a point of your own
+
+The zoom buttons and keys have no pointer, so they zoom about the view's middle. If your scene's middle is not the view's (a piece standing to one side, say), tell the controls where it is:
+
+```js
+controls.anchor = { x: 60, y: -30 }; // pixels from the view's middle when it is at Fit
+```
+
+Zoom is about that point of the picture, so it stays put on screen however far in the reader is and wherever the view has been moved to: `+` then `-` leaves it where it was within a pixel. Without the element, set `view.anchor` on the controller, or pass `anchor` to `createViewController`; `view.zoomBy(f)` and `view.zoomAt(z)` with no point use it.
+
+### Keys, the wheel and the turn
+
+Arrow Up tips like a drag up (`tilt` gets larger). A page whose wheel and keys should agree sets `key-tilt="wheel"`: Arrow Up then tips the way a wheel turned up does (`tilt` gets smaller), and Arrow Down the other way. `stop-turn` stops the automatic turn when the reader takes hold of the view with a press, the wheel or a key (a `pause` event is sent first); the defaults keep it turning, and a button or slider never stops it. `tilt-step="1"` makes a drag give whole degrees of tilt.
+
 ### Opening at the scene's natural size
 
 Zoom 1 is Fit, whatever size that is on the page. A page that draws its scene at `fitScale` (for example 0.4 of natural size when it fits the view) and wants to open at natural size sets `zoom="1"` and tells the controls the scale:
@@ -146,6 +160,10 @@ An `init` event is sent once, a moment after the element connects, with the star
 | `zoom` | The starting zoom: `fit` (the default) or a number, a scale where 1 is the scene's natural size. It opens at that number divided by `fit-scale`; with `fit-scale` left at 1 it is the `zoom` of the event. |
 | `fit-scale` | The scale your page draws the scene at when it is at Fit (event `zoom` 1): what zoom 1 means. 1 by default. Or call `element.setFitScale(n)` once the scene is measured. |
 | `ignore` | A CSS selector for what inside the view a pointer press leaves alone, so its click goes through: `button, a, input, select, textarea, label, [data-kazoku-ignore]` by default. A bare `ignore=""` leaves nothing alone. |
+| `anchor` | `x,y`: the point the + and - buttons, the 2x button and the + and - keys zoom about, in CSS pixels from the middle of the view when it is at Fit (zoom 1, no pan). It is a point on the picture, so it moves with it and stays fixed on screen while the buttons zoom. Left out, they zoom about the view's middle, as before. The wheel, a pinch and a double tap still zoom about the pointer. Or set `element.anchor = { x, y }` (`undefined` clears it). |
+| `key-tilt` | Which way Arrow Up tips the view: `drag` (the default: like a drag up) or `wheel` (the way a wheel turned up tips it, the other way). Arrow Down goes the other way from Up. |
+| `stop-turn` | A press on the view, the wheel over it or a key it handles stops the automatic turn. Off by default, so the turn carries on. Buttons and sliders never stop it. |
+| `tilt-step` | Round the tilt of a drag to a multiple of this many degrees (`1` gives whole degrees). 0 by default: not rounded. |
 | `autoplay` | Turn by itself from the start, unless the reader prefers reduced motion. |
 | `speed` | Degrees a second (30). |
 | `flat` | The view cannot turn: no angle, tilt, Auto-turn or Front, and a drag moves it. |
@@ -168,11 +186,11 @@ Only what a reader chose is kept: angle, tilt, zoom and the drag choice. The pan
 
 ## Size
 
-Gzipped, unbundled: the element and its definition about 5.0 KB, the controller 3.9 KB, the maths 1.4 KB, the address 1.2 KB, the labels 0.7 KB and the styles 1.6 KB (`pnpm test:package` prints them). Nothing is loaded from the network.
+Gzipped, unbundled: the element and its definition about 5.0 KB, the controller 4.3 KB, the maths 1.4 KB, the address 1.2 KB, the labels 0.7 KB and the styles 1.6 KB (`pnpm test:package` prints them). Nothing is loaded from the network.
 
 ## Checks
 
-`pnpm check` (lint, types, 29 unit tests of the maths, the address, the controller and the package, the build and the packed package), and `pnpm test:demo` (the demo in Chromium and WebKit at a phone's width and a desk's: the controls in the first screen, a toggle during Auto-turn leaves the angle advancing, a button or link inside the view still clicks while a drag turns it, the opening zoom and fit scale, zoom about the pointer, pan when zoomed, touch, the address, the labels, reduced motion).
+`pnpm check` (lint, types, 36 unit tests of the maths, the address, the controller and the package, the build and the packed package), and `pnpm test:demo` (the demo in Chromium and WebKit at a phone's width and a desk's: the controls in the first screen, a toggle during Auto-turn leaves the angle advancing, a button or link inside the view still clicks while a drag turns it, the opening zoom and fit scale, zoom about the pointer, zoom about an anchor (`?anchor=pin`), Arrow Up either way (`?key-tilt=wheel`), `?stop-turn`, `?tilt-step=1`, pan when zoomed, touch, the address, the labels, reduced motion).
 
 ## Not yet
 

package/dist/view-controls/controller.d.ts

@@ -14,6 +14,8 @@ export interface ChangeInfo {
 }
 /** What `bind` leaves alone by default: the page's own controls inside the view. */
 export declare const DEFAULT_IGNORE = "button, a, input, select, textarea, label, [data-kazoku-ignore]";
+/** Which way Arrow Up tips the view: like a drag up (`"drag"`, the default) or the way the wheel turned up does (`"wheel"`, the other way). */
+export type KeyTilt = "drag" | "wheel";
 export interface Clock {
     request(callback: (now: number) => void): number;
     cancel(id: number): void;
@@ -31,6 +33,14 @@ export interface ViewControllerOptions {
     fitScale?: number;
     /** A CSS selector for what inside the view `bind` leaves alone: a press on a match is not captured, so its click goes through. An empty string leaves nothing alone. */
     ignore?: string;
+    /** The point the zoom buttons and keys zoom about, in content coordinates: CSS pixels from the view's middle when it is at Fit (zoom 1, no pan). It moves with the picture, so the point stays where it is on screen while the view zooms. Left out, they zoom about the view's middle. */
+    anchor?: Point;
+    /** Which way Arrow Up tips the view: `"drag"` (the default, as a drag up) or `"wheel"` (as a wheel turned up). */
+    keyTilt?: KeyTilt;
+    /** True to stop the automatic turn when the reader presses the view, uses the wheel on it or presses a key it handles. False (the default) lets it carry on. Buttons and sliders never stop it. */
+    stopTurn?: boolean;
+    /** Round the tilt of a drag to a multiple of this many degrees; 0 (the default) leaves it unrounded, 1 gives whole degrees. */
+    tiltStep?: number;
     /** The view's size in CSS pixels, for holding the pan; `bind` gives it from the element when this is left out. */
     size?: () => Size | undefined;
     onChange?: (state: ViewState, info: ChangeInfo) => void;
@@ -44,6 +54,11 @@ export interface ViewController {
     readonly limits: Limits;
     /** What a pointer press leaves alone inside the view (see `ViewControllerOptions.ignore`). Can be changed at any time. */
     ignore: string;
+    /** The point the buttons and keys zoom about (see `ViewControllerOptions.anchor`); `undefined` for the view's middle. Can be changed at any time. */
+    anchor: Point | undefined;
+    keyTilt: KeyTilt;
+    stopTurn: boolean;
+    tiltStep: number;
     /** What zoom 1 means to the page (see `ViewControllerOptions.fitScale`). */
     readonly fitScale: number;
     /** The `state.zoom` the view opens at: 1 for "fit", else the starting scale divided by `fitScale`. The address leaves a zoom at this value out. */
@@ -61,7 +76,7 @@ export interface ViewController {
     releaseTurn(): void;
     front(): void;
     fit(): void;
-    /** Zoom to `next` about the point `at` (client pixels; the view's middle when left out). */
+    /** Zoom to `next` about the point `at` (client pixels); left out, about the `anchor`, else the view's middle. */
     zoomAt(next: number, at?: Point, final?: boolean): void;
     zoomBy(factor: number, at?: Point): void;
     /** Move the view by whole fractions of its size: `panBy(1, 0)` is a quarter of its width to the right. */

package/dist/view-controls/controller.js

@@ -1,6 +1,7 @@
 import { clamp, clampPan, DEFAULT_LIMITS, dragTurn, PAN_STEP, pinchTo, wheelZoomFactor, wrapYaw, ZOOMED, zoomAbout } from "./math.js";
 /** What `bind` leaves alone by default: the page's own controls inside the view. */
 export const DEFAULT_IGNORE = "button, a, input, select, textarea, label, [data-kazoku-ignore]";
+const HANDLED_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "+", "=", "-", "_", "0", "Home"];
 const positive = (value) => (typeof value === "number" && Number.isFinite(value) && value > 0 ? value : undefined);
 const browserClock = () => ({ request: (callback) => globalThis.requestAnimationFrame(callback), cancel: (id) => globalThis.cancelAnimationFrame(id) });
 export function createViewController(options = {}) {
@@ -51,10 +52,12 @@ export function createViewController(options = {}) {
         const r = bound.getBoundingClientRect();
         return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
     };
-    /** Client pixels to pixels from the view's middle. */
+    /** Client pixels to pixels from the view's middle; with none, the anchor's place on screen now, else the middle. */
     const fromMiddle = (at) => {
-        if (at === undefined)
-            return { x: 0, y: 0 };
+        if (at === undefined) {
+            const a = controller.anchor;
+            return a === undefined ? { x: 0, y: 0 } : { x: state.panX + state.zoom * a.x, y: state.panY + state.zoom * a.y };
+        }
         const c = centre();
         return { x: at.x - c.x, y: at.y - c.y };
     };
@@ -79,6 +82,10 @@ export function createViewController(options = {}) {
         speed: options.speed ?? 30,
         limits,
         ignore: options.ignore ?? DEFAULT_IGNORE,
+        anchor: options.anchor,
+        keyTilt: options.keyTilt ?? "drag",
+        stopTurn: options.stopTurn ?? false,
+        tiltStep: options.tiltStep ?? 0,
         get fitScale() {
             return fitScale;
         },
@@ -199,6 +206,10 @@ export function createViewController(options = {}) {
             holding = false;
         };
         const canTurn = () => controller.turnable;
+        const grab = () => {
+            if (controller.stopTurn)
+                controller.pause();
+        };
         const ignored = (e) => {
             if (controller.ignore === "")
                 return false;
@@ -226,6 +237,7 @@ export function createViewController(options = {}) {
                 return;
             if (ignored(e))
                 return;
+            grab();
             pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
             try {
                 view.setPointerCapture(e.pointerId);
@@ -273,7 +285,7 @@ export function createViewController(options = {}) {
                     return;
                 const r = view.getBoundingClientRect();
                 // Up and down tips it for a mouse; on a finger the browser keeps the vertical drag to scroll the page, and the tilt slider tips it.
-                take({ ...camera(), ...dragTurn(gesture.camera, dx, dy, { width: r.width, height: r.height }, e.pointerType !== "touch", limits) });
+                take({ ...camera(), ...dragTurn(gesture.camera, dx, dy, { width: r.width, height: r.height }, e.pointerType !== "touch", limits, controller.tiltStep) });
                 emit(false, "drag");
             }
         };
@@ -310,6 +322,7 @@ export function createViewController(options = {}) {
             if (e.ctrlKey || e.metaKey) {
                 // A trackpad's pinch arrives as Ctrl and the wheel; Command and the wheel does the same for a mouse.
                 e.preventDefault();
+                grab();
                 controller.zoomAt(state.zoom * wheelZoomFactor(e.deltaY, e.deltaMode), { x: e.clientX, y: e.clientY });
                 return;
             }
@@ -321,6 +334,7 @@ export function createViewController(options = {}) {
             e.preventDefault();
             if (!canTurn())
                 return;
+            grab();
             if (horizontal || e.shiftKey)
                 controller.set({ yaw: state.yaw + (e.deltaX || e.deltaY) * 0.3 }, true, "wheel");
             else
@@ -329,6 +343,10 @@ export function createViewController(options = {}) {
         const onKey = (e) => {
             if (e.ctrlKey || e.metaKey || e.altKey)
                 return;
+            if (!HANDLED_KEYS.includes(e.key))
+                return;
+            grab();
+            const up = controller.keyTilt === "wheel" ? -5 : 5;
             const big = e.shiftKey ? 45 : 15;
             const turn = (next) => {
                 if (canTurn())
@@ -342,10 +360,10 @@ export function createViewController(options = {}) {
                     turn({ yaw: state.yaw + big });
                     break;
                 case "ArrowUp":
-                    turn({ tilt: state.tilt + 5 });
+                    turn({ tilt: state.tilt + up });
                     break;
                 case "ArrowDown":
-                    turn({ tilt: state.tilt - 5 });
+                    turn({ tilt: state.tilt - up });
                     break;
                 case "+":
                 case "=":

package/dist/view-controls/element.d.ts

@@ -1,5 +1,6 @@
 import { type ViewController, type ViewState } from "./controller.ts";
 import { EVENT, TAG } from "./index.ts";
+import { type Point } from "./math.ts";
 import { type ViewWords } from "./words.ts";
 export { EVENT, TAG };
 /** What the `kazoku-viewchange` event carries in `detail`. */
@@ -11,7 +12,8 @@ export interface ViewChangeDetail extends ViewState {
  * Attributes: `for` (the id of the view to bind), `lang` (en or ja; else the page's), `yaw`, `tilt` (the starting view), `zoom` (`fit`, the default, or a scale where 1
  * is the scene's natural size), `fit-scale` (the page's scale at Fit: what zoom 1 means), `ignore` (a selector for what inside the view a pointer press leaves alone;
  * buttons, links and form controls by default), `autoplay` (turn by itself from the start, unless the reader prefers reduced motion), `speed` (degrees a second),
- * `flat` (the view cannot turn), `tilt-max`, `zoom-min`, `zoom-max`, `address` (keep the choices in the page's address), `address-keys` (`yaw:a,tilt:b`), `theme` (light
+ * `anchor` (`x,y`: the point the zoom buttons and keys zoom about, in pixels from the view's middle at Fit), `key-tilt` (`drag`, the default, or `wheel`: which way Arrow Up tips),
+ * `stop-turn` (a press, the wheel or a key on the view stops the automatic turn), `tilt-step` (round a drag's tilt to a multiple of this many degrees), `flat` (the view cannot turn), `tilt-max`, `zoom-min`, `zoom-max`, `address` (keep the choices in the page's address), `address-keys` (`yaw:a,tilt:b`), `theme` (light
  * or dark), `overlay` (sit over the bottom of a positioned parent).
  */
 export declare class ViewControlsElement extends HTMLElement {
@@ -32,6 +34,9 @@ export declare class ViewControlsElement extends HTMLElement {
     front(): void;
     fit(): void;
     set(next: Partial<ViewState>): void;
+    /** The point the zoom buttons and keys zoom about: `{ x, y }` in CSS pixels from the view's middle when it is at Fit, moving with the picture. `undefined` zooms about the view's middle. The `anchor` attribute (`"x,y"`) sets the same. */
+    get anchor(): Point | undefined;
+    set anchor(point: Point | undefined | null);
     /** What zoom 1 means to the page: the scene is drawn at `state.zoom * fitScale`. */
     get fitScale(): number;
     setFitScale(scale: number): void;

package/dist/view-controls/element.js

@@ -45,11 +45,12 @@ const HTML = `
  * Attributes: `for` (the id of the view to bind), `lang` (en or ja; else the page's), `yaw`, `tilt` (the starting view), `zoom` (`fit`, the default, or a scale where 1
  * is the scene's natural size), `fit-scale` (the page's scale at Fit: what zoom 1 means), `ignore` (a selector for what inside the view a pointer press leaves alone;
  * buttons, links and form controls by default), `autoplay` (turn by itself from the start, unless the reader prefers reduced motion), `speed` (degrees a second),
- * `flat` (the view cannot turn), `tilt-max`, `zoom-min`, `zoom-max`, `address` (keep the choices in the page's address), `address-keys` (`yaw:a,tilt:b`), `theme` (light
+ * `anchor` (`x,y`: the point the zoom buttons and keys zoom about, in pixels from the view's middle at Fit), `key-tilt` (`drag`, the default, or `wheel`: which way Arrow Up tips),
+ * `stop-turn` (a press, the wheel or a key on the view stops the automatic turn), `tilt-step` (round a drag's tilt to a multiple of this many degrees), `flat` (the view cannot turn), `tilt-max`, `zoom-min`, `zoom-max`, `address` (keep the choices in the page's address), `address-keys` (`yaw:a,tilt:b`), `theme` (light
  * or dark), `overlay` (sit over the bottom of a positioned parent).
  */
 export class ViewControlsElement extends HTMLElement {
-    static observedAttributes = ["for", "lang", "yaw", "tilt", "zoom", "fit-scale", "ignore", "speed", "flat", "tilt-max", "zoom-min", "zoom-max", "address-keys"];
+    static observedAttributes = ["for", "lang", "yaw", "tilt", "zoom", "fit-scale", "ignore", "anchor", "key-tilt", "stop-turn", "tilt-step", "speed", "flat", "tilt-max", "zoom-min", "zoom-max", "address-keys"];
     #root;
     #controller;
     #view;
@@ -98,6 +99,13 @@ export class ViewControlsElement extends HTMLElement {
     set(next) {
         this.#ensure().set(next);
     }
+    /** The point the zoom buttons and keys zoom about: `{ x, y }` in CSS pixels from the view's middle when it is at Fit, moving with the picture. `undefined` zooms about the view's middle. The `anchor` attribute (`"x,y"`) sets the same. */
+    get anchor() {
+        return this.#ensure().anchor;
+    }
+    set anchor(point) {
+        this.#ensure().anchor = point ?? undefined;
+    }
     /** What zoom 1 means to the page: the scene is drawn at `state.zoom * fitScale`. */
     get fitScale() {
         return this.#ensure().fitScale;
@@ -122,6 +130,10 @@ export class ViewControlsElement extends HTMLElement {
         c.turnable = !this.hasAttribute("flat");
         c.speed = Number(this.getAttribute("speed")) || 30;
         c.ignore = this.getAttribute("ignore") ?? DEFAULT_IGNORE;
+        for (const name of ["key-tilt", "stop-turn", "tilt-step"])
+            this.#option(name);
+        if (this.hasAttribute("anchor"))
+            this.#option("anchor");
         const fitScale = Number(this.getAttribute("fit-scale"));
         if (this.hasAttribute("fit-scale"))
             c.setFitScale(fitScale);
@@ -171,6 +183,8 @@ export class ViewControlsElement extends HTMLElement {
             c.setFitScale(Number(value));
         else if (name === "ignore")
             c.ignore = value ?? DEFAULT_IGNORE;
+        else if (name === "anchor" || name === "key-tilt" || name === "stop-turn" || name === "tilt-step")
+            this.#option(name);
         else if (name === "speed")
             c.speed = Number(value) || 30;
         else if (name === "flat") {
@@ -182,6 +196,20 @@ export class ViewControlsElement extends HTMLElement {
         else
             this.#limits();
     }
+    #option(name) {
+        const c = this.#ensure();
+        const value = this.getAttribute(name);
+        if (name === "anchor") {
+            const [x, y] = (value ?? "").trim().split(/[\s,]+/).map(Number);
+            c.anchor = x !== undefined && y !== undefined && Number.isFinite(x) && Number.isFinite(y) ? { x, y } : undefined;
+        }
+        else if (name === "key-tilt")
+            c.keyTilt = value === "wheel" ? "wheel" : "drag";
+        else if (name === "stop-turn")
+            c.stopTurn = value !== null;
+        else if (name === "tilt-step")
+            c.tiltStep = Number(value) > 0 && Number.isFinite(Number(value)) ? Number(value) : 0;
+    }
     #startZoom() {
         const value = Number(this.getAttribute("zoom"));
         return this.hasAttribute("zoom") && Number.isFinite(value) && value > 0 ? value : "fit";

package/dist/view-controls/math.d.ts

@@ -44,7 +44,7 @@ export interface PinchStart {
 }
 /** The camera for two fingers now at `a` and `b`: zoom by the change of distance about where the pinch began, and the middle of the fingers also drags the view. `centre` is the view's middle in client pixels. */
 export declare function pinchTo(start: PinchStart, a: Point, b: Point, centre: Point, limits?: Limits): Camera;
-/** A one-pointer drag that turns: `dx` and `dy` pixels from where it began, in a view of `size`. A finger does not tilt (the page's own scroll keeps the vertical drag). */
-export declare function dragTurn(start: Camera, dx: number, dy: number, size: Size, tips: boolean, limits?: Limits): Pick<Camera, "yaw" | "tilt">;
+/** A one-pointer drag that turns: `dx` and `dy` pixels from where it began, in a view of `size`. A finger does not tilt (the page's own scroll keeps the vertical drag). A `step` above 0 rounds the tilt to a multiple of it. */
+export declare function dragTurn(start: Camera, dx: number, dy: number, size: Size, tips: boolean, limits?: Limits, step?: number): Pick<Camera, "yaw" | "tilt">;
 /** The factor a Ctrl or Command wheel turn zooms by (a trackpad's pinch arrives that way). `deltaMode` 1 is lines. */
 export declare const wheelZoomFactor: (deltaY: number, deltaMode: number) => number;

package/dist/view-controls/math.js

@@ -38,10 +38,11 @@ export function pinchTo(start, a, b, centre, limits = DEFAULT_LIMITS) {
         return zoomed;
     return { ...zoomed, panX: zoomed.panX + (middle.x - start.middle.x), panY: zoomed.panY + (middle.y - start.middle.y) };
 }
-/** A one-pointer drag that turns: `dx` and `dy` pixels from where it began, in a view of `size`. A finger does not tilt (the page's own scroll keeps the vertical drag). */
-export function dragTurn(start, dx, dy, size, tips, limits = DEFAULT_LIMITS) {
+/** A one-pointer drag that turns: `dx` and `dy` pixels from where it began, in a view of `size`. A finger does not tilt (the page's own scroll keeps the vertical drag). A `step` above 0 rounds the tilt to a multiple of it. */
+export function dragTurn(start, dx, dy, size, tips, limits = DEFAULT_LIMITS, step = 0) {
     const yaw = wrapYaw(start.yaw + (dx / (size.width || 360)) * TURN_ACROSS);
-    const tilt = tips ? clamp(start.tilt - (dy / (size.height || 360)) * TILT_ACROSS, -limits.tiltMax, limits.tiltMax) : start.tilt;
+    const raw = start.tilt - (dy / (size.height || 360)) * TILT_ACROSS;
+    const tilt = tips ? clamp(step > 0 ? Math.round(raw / step) * step : raw, -limits.tiltMax, limits.tiltMax) : start.tilt;
     return { yaw, tilt };
 }
 /** The factor a Ctrl or Command wheel turn zooms by (a trackpad's pinch arrives that way). `deltaMode` 1 is lines. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kazoku-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Kazoku UI 家族, the family's shared interface parts as their own versioned package. First part: view controls for any 3D or zoomable view (angle, tilt, auto-turn, zoom about the pointer, pan, touch, address state) as a framework-free custom element and a plain controller. Zero dependencies.",
   "keywords": [
     "view-controls",