1interface Point {
2 readonly x: number;
3 readonly y: number;
4}
5
6export type PhoneNavigation =
7 | { readonly type: "orbit"; readonly x: number; readonly y: number }
8 | { readonly type: "zoom"; readonly delta: number };
9
10/** Browser wheel units vary by device. Navigation uses viewport fractions and logarithmic zoom. */
11export function phoneWheelNavigation(input: {
12 readonly deltaX: number;
13 readonly deltaY: number;
14 readonly deltaMode: number;
15 readonly ctrlKey: boolean;
16 readonly width: number;
17 readonly height: number;
18}): PhoneNavigation | null {
19 const { deltaX, deltaY, deltaMode, ctrlKey, width, height } = input;
20 if (![deltaX, deltaY, width, height].every(Number.isFinite) || width <= 0 || height <= 0)
21 return null;
22 if (deltaMode !== 0 && deltaMode !== 1 && deltaMode !== 2) return null;
23 const unit = deltaMode === 1 ? 16 : deltaMode === 2 ? height : 1;
24 const clamp = (value: number, limit: number) => Math.min(limit, Math.max(-limit, value));
25 if (ctrlKey) return { type: "zoom", delta: clamp(-deltaY * unit * 0.01, 1) };
26 return {
27 type: "orbit",
28 x: clamp((-deltaX * unit) / width, 0.25),
29 y: clamp((-deltaY * unit) / height, 0.25),
30 };
31}
32
33/** A single pointer owns either a device gesture or an orbit until released or cancelled. */
34export function createPhoneInteraction(options: {
35 readonly screenPoint: (point: Point, captured: boolean) => Point | null;
36 readonly touch: (phase: "begin" | "move" | "end", point: Point) => void;
37 readonly orbit: (deltaX: number, deltaY: number) => void;
38 readonly zoomBy: (logDelta: number) => void;
39 readonly onInteractionActive?: (active: boolean, mode: "touch" | "orbit") => void;
40}) {
41 let active: { id: number; mode: "touch" | "orbit"; last: Point; screen: Point | null } | null =
42 null;
43 return {
44 navigate(gesture: PhoneNavigation) {
45 // Moving the camera during a captured device touch would change its projected coordinates.
46 if (active) return false;
47 if (gesture.type === "zoom") options.zoomBy(gesture.delta);
48 else options.orbit(gesture.x, gesture.y);
49 return true;
50 },
51 endWheel() {
52 if (!active) options.onInteractionActive?.(false, "orbit");
53 },
54 begin(id: number, point: Point, forceOrbit = false) {
55 if (active) return false;
56 const screen = forceOrbit ? null : options.screenPoint(point, false);
57 active = { id, mode: screen ? "touch" : "orbit", last: point, screen };
58 options.onInteractionActive?.(true, active.mode);
59 if (screen) options.touch("begin", screen);
60 return true;
61 },
62 move(id: number, point: Point) {
63 if (active?.id !== id) return;
64 if (active.mode === "touch") {
65 const screen = options.screenPoint(point, true);
66 if (screen) {
67 active.screen = screen;
68 options.touch("move", screen);
69 }
70 } else {
71 options.orbit(point.x - active.last.x, point.y - active.last.y);
72 }
73 active.last = point;
74 },
75 end(id?: number) {
76 if (!active || (id !== undefined && active.id !== id)) return;
77 const previous = active;
78 active = null;
79 if (previous.mode === "touch" && previous.screen) options.touch("end", previous.screen);
80 options.onInteractionActive?.(false, previous.mode);
81 },
82 };
83}