camox 0.76.0 → 0.77.0

package/dist/features/canvas/useCanvasCamera.js

@@ -1,16 +1,11 @@
 import { canvasStore } from "./canvasStore.js";
-import { canvasPageIframe } from "../preview/previewPageFrame.js";
 import { ViewportContinuityContext, captureViewportAnchor, resolveViewportAnchor } from "../preview/viewportContinuity.js";
+import { canvasPageIframe } from "../preview/previewPageFrame.js";
 import { canvasSeamCover } from "./canvasFrameDocument.js";
-import { revealScrollDelta } from "../preview/selectionReveal.js";
-import { CANVAS_WHEEL_ZOOM_RATE, ZOOM_STRETCH, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, isInCanvasSnapWindow, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt } from "./canvasCamera.js";
-import { createCanvasFlight, createCanvasPan } from "./canvasFlight.js";
+import { createCanvasCameraController } from "./canvasCameraController.js";
 import * as React from "react";
 
 //#region src/features/canvas/useCanvasCamera.ts
-const GESTURE_IDLE_MS = 180;
-/** A zoom ends once its input pauses this long; a stretch past a limit then springs back. */
-const ZOOM_END_MS = 120;
 const CAMERA_PROPERTIES = [
 	"--canvas-x",
 	"--canvas-y",
@@ -18,8 +13,6 @@ const CAMERA_PROPERTIES = [
 	"--canvas-rest-zoom",
 	"--canvas-pixel-ratio"
 ];
-/** The camera counts as moving until it has been still this long. */
-const CAMERA_SETTLE_MS = 150;
 /**
 * At rest, zooms where layers that scale with the camera stay promoted
 * (`data-canvas-promoted`, for `will-change: transform`), so a movement starts
@@ -38,20 +31,27 @@ function isControl(target) {
 function isTextEntry(target) {
 	return target instanceof Element && (!!target.closest("input, select, textarea") || target instanceof HTMLElement && target.isContentEditable);
 }
+/** The camera's keyboard commands, by key: a zoom key wins over Shift+1, which types "+" on some layouts. */
+function keyCommand(event) {
+	switch (event.key) {
+		case "+":
+		case "=": return "zoomIn";
+		case "-": return "zoomOut";
+		case "0": return "zoomToActualSize";
+	}
+	if (event.key === "Home" || event.shiftKey && event.code === "Digit1") return "overview";
+	switch (event.key) {
+		case "ArrowLeft": return "panLeft";
+		case "ArrowRight": return "panRight";
+		case "ArrowUp": return "panUp";
+		case "ArrowDown": return "panDown";
+	}
+}
 /**
-* The camera's y at a new scale, keeping the document point at the viewport's
-* top edge. Above the page top, the unscaled chrome keeps its screen position.
+* Adapts the Canvas camera controller to the DOM: its input events, sizes, animation
+* frames and timers, and the canvas store. Animate only the camera's CSS properties;
+* page trees never rerender on pan/zoom.
 */
-function rescaleY(camera, scale) {
-	return camera.y > 0 ? camera.y : camera.y * scale / camera.scale;
-}
-const NO_INSETS = {
-	top: 0,
-	right: 0,
-	bottom: 0,
-	left: 0
-};
-/** Animate only the camera's CSS properties; page trees never rerender on pan/zoom. */
 function useCanvasCamera(workspaceKey, initialTarget, row) {
 	const continuity = React.useContext(ViewportContinuityContext);
 	const mirrors = React.useRef(/* @__PURE__ */ new Set());
@@ -59,9 +59,9 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 	const contentRef = React.useRef(null);
 	const initialTargetRef = React.useRef(initialTarget);
 	const rowRef = React.useRef(row);
-	const flightControls = React.useRef(null);
+	const controllerRef = React.useRef(null);
 	const flyTo = React.useCallback((key) => {
-		flightControls.current?.flyTo(key);
+		controllerRef.current?.flyTo(key);
 	}, []);
 	const paintMirror = React.useRef(null);
 	/** Paints the camera onto an element outside the viewport until the returned cleanup. */
@@ -81,15 +81,24 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 	* unless enough of it already shows. A page flight or a drag in progress keeps the camera.
 	*/
 	const reveal = React.useCallback((element, immediate = false) => {
-		flightControls.current?.reveal(element, immediate);
+		const controller = controllerRef.current;
+		const viewport = viewportRef.current;
+		const frame = element.ownerDocument.defaultView?.frameElement;
+		if (!controller || !viewport || !frame) return;
+		const rect = element.getBoundingClientRect();
+		controller.reveal({
+			frameTop: frame.getBoundingClientRect().top - viewport.getBoundingClientRect().top,
+			top: rect.top,
+			height: rect.height
+		}, immediate);
 	}, []);
 	/** Zoom out to the whole Canvas, keeping the selection: its caller decides what it becomes. */
 	const fitAll = React.useCallback(() => {
-		flightControls.current?.fitAll();
+		controllerRef.current?.fitAll();
 	}, []);
 	React.useLayoutEffect(() => {
 		rowRef.current = row;
-		flightControls.current?.syncRow();
+		controllerRef.current?.setRow(row);
 	});
 	React.useLayoutEffect(() => {
 		const viewport = viewportRef.current;
@@ -108,187 +117,23 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			capture: true,
 			passive: false
 		});
-		let insets = rowRef.current?.insets ?? NO_INSETS;
-		const measureViewport = () => {
-			insets = rowRef.current?.insets ?? NO_INSETS;
-			return {
-				width: Math.max(0, viewport.clientWidth - insets.left - insets.right),
-				height: Math.max(0, viewport.clientHeight - insets.top - insets.bottom)
-			};
-		};
-		let viewportSize = measureViewport();
-		const page = initialTargetRef.current;
-		const targets = () => rowRef.current?.targets ?? (page ? [{
-			...page,
-			key: "initial"
-		}] : []);
-		const measureContent = () => {
-			const widths = targets().map((target) => target.width);
-			return {
-				width: rowRef.current?.width ?? content.offsetWidth,
-				height: content.offsetHeight,
-				pageWidth: widths.length ? Math.min(...widths) : void 0
-			};
-		};
-		let contentSize = measureContent();
-		let minimumScale = canvasMinimumScale(viewportSize, contentSize);
-		const updateGeometry = (nextViewport = measureViewport(), nextContent = measureContent()) => {
-			viewportSize = nextViewport;
-			contentSize = nextContent;
-			minimumScale = canvasMinimumScale(viewportSize, contentSize);
-		};
-		const targetOf = (key) => key == null ? void 0 : targets().find((candidate) => candidate.key === key);
-		let stretch;
-		let zoomEnd = 0;
-		const constrain = (next, stretched = !!stretch) => constrainCanvasCamera(next, viewportSize, contentSize, canvasMaximumScale(viewportSize, targets(), minimumScale), stretched);
-		const saved = canvasStore.getSnapshot().context.views[workspaceKey];
-		const savedCamera = saved && !saved.fitted ? saved.camera : void 0;
-		let restoredCamera = savedCamera && (!page || isCanvasCameraSnapped(savedCamera, viewportSize, page)) ? savedCamera : void 0;
-		let fittingInitialPage = !!page && !restoredCamera;
-		const initialCamera = () => fittingInitialPage && page ? constrain(fitCanvasPage(viewportSize, page)) : canvasOverview(viewportSize, contentSize);
-		let camera = restoredCamera ? constrain(restoredCamera) : initialCamera();
-		let target = camera;
-		let animation = 0;
-		let previousTime = 0;
-		let flight;
-		let gesture;
-		let requested = rowRef.current?.selected ?? null;
-		let selection = requested ?? (page && targets().find((candidate) => candidate.left === page.left)?.key) ?? null;
-		const select = (key) => {
-			if (key === selection) return;
-			selection = key;
-			if (key) rowRef.current?.onSelect(key);
-			else rowRef.current?.onDeselect?.();
-		};
-		const rest = (next) => {
-			if (!stretch) return next;
-			const maximumScale = canvasMaximumScale(viewportSize, targets(), minimumScale);
-			const scale = Math.min(maximumScale, Math.max(minimumScale, next.scale));
-			const settled = zoomCanvasAt(next, stretch.point, scale, minimumScale, maximumScale);
-			const held = targetOf(selection);
-			const fit = held && fitCanvasPage(viewportSize, held);
-			return constrain(fit && isCanvasPageScale(scale, fit.scale) ? {
-				...settled,
-				x: fit.x
-			} : settled, false);
-		};
-		const releaseSelection = () => {
-			const held = targetOf(selection);
-			if (selection && !(held && isCanvasCameraSnapped(rest(target), viewportSize, held))) select(null);
-		};
-		const zoom = (base, point, factor, time, translation = {
-			x: 0,
-			y: 0
-		}) => {
-			const scale = base.scale;
-			const maximumScale = canvasMaximumScale(viewportSize, targets(), minimumScale);
-			const intendedScale = (gesture?.kind === "zoom" && time - gesture.time < GESTURE_IDLE_MS ? gesture.intendedScale : unstretchCanvasZoom(scale, minimumScale, maximumScale)) * factor;
-			gesture = {
-				kind: "zoom",
-				time,
-				intendedScale
-			};
-			const limited = Math.min(maximumScale, Math.max(minimumScale, intendedScale));
-			const eligible = targets().filter((candidate) => findCanvasSnapTarget(base, viewportSize, [candidate]));
-			const candidate = stretch && targetOf(selection) || findCanvasSnapTarget(camera, viewportSize, eligible);
-			const fit = candidate && fitCanvasPage(viewportSize, candidate);
-			const snapped = snapCanvasZoom(scale, limited, fit && fit.scale >= minimumScale ? fit.scale : void 0);
-			const stretched = limited !== intendedScale;
-			const nextScale = stretched ? stretchCanvasZoom(intendedScale, minimumScale, maximumScale) : snapped;
-			ownerWindow.clearTimeout(zoomEnd);
-			if (!pointers.size) zoomEnd = ownerWindow.setTimeout(endZoom, ZOOM_END_MS);
-			stretch = stretched ? { point } : void 0;
-			const anchored = zoomCanvasAt(base, point, nextScale, minimumScale / Math.exp(ZOOM_STRETCH), maximumScale * Math.exp(ZOOM_STRETCH));
-			const next = {
-				...anchored,
-				x: anchored.x + translation.x,
-				y: anchored.y + translation.y
-			};
-			if (!candidate || !fit || !isCanvasPageScale(snapped, fit.scale)) return next;
-			select(candidate.key);
-			return {
-				...next,
-				x: (viewportSize.width - candidate.width * nextScale) / 2 - candidate.left * nextScale
-			};
-		};
-		const pan = (base, delta, time, source, rail = {
-			mode: "free",
-			samples: []
-		}) => {
-			const start = gesture?.kind === "pan" && gesture.source === source && time - gesture.time < GESTURE_IDLE_MS ? gesture.intendedX : base.x;
-			const intended = constrain({
-				...base,
-				x: start + delta.x,
-				y: base.y + delta.y
-			});
-			gesture = {
-				kind: "pan",
-				time,
-				rail,
-				intendedX: intended.x,
-				source
-			};
-			if (!delta.x) return {
-				...intended,
-				x: base.x
-			};
-			const candidate = findCanvasSnapTarget(intended, viewportSize, targets());
-			const fit = candidate && fitCanvasPage(viewportSize, candidate);
-			if (!candidate || !fit || fit.scale < minimumScale) return intended;
-			const held = isCanvasCameraSnapped(base, viewportSize, candidate);
-			if (!isInCanvasSnapWindow(intended, viewportSize, candidate, held)) return intended;
-			select(candidate.key);
-			gesture.intendedX += (candidate.left + candidate.width / 2) * (intended.scale - fit.scale);
-			return constrain({
-				x: fit.x,
-				y: rescaleY(intended, fit.scale),
-				scale: fit.scale
-			});
-		};
-		const endZoom = () => {
-			ownerWindow.clearTimeout(zoomEnd);
-			if (stretch) {
-				const next = rest(target);
-				stretch = void 0;
-				gesture = void 0;
-				markMoving();
-				applyCamera(next);
-			}
-		};
-		const pointers = /* @__PURE__ */ new Map();
 		let spaceHeld = false;
-		const paintPanState = () => {
-			for (const element of [viewport, ...mirrors.current]) if (pointers.size) element.dataset.canvasPan = "dragging";
+		const paintPanState = (view) => {
+			for (const element of [viewport, ...mirrors.current]) if (view.dragging) element.dataset.canvasPan = "dragging";
 			else if (spaceHeld) element.dataset.canvasPan = "ready";
 			else delete element.dataset.canvasPan;
 		};
 		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
-		const isOverview = (view) => {
-			const overview = canvasOverview(viewportSize, contentSize);
-			return Math.abs(view.scale - overview.scale) < 1e-8 && Math.abs(view.x - overview.x) < .5 && Math.abs(view.y - overview.y) < .5;
-		};
-		const remember = () => {
-			if (restoredCamera || fittingInitialPage || !viewportSize.width || !viewportSize.height) return;
-			canvasStore.send({
-				type: "rememberView",
-				workspaceKey,
-				view: {
-					camera,
-					fitted: isOverview(camera)
-				}
-			});
-		};
-		let settle = 0;
-		const paintPromotion = () => {
-			const promoted = !!settle || camera.scale >= PROMOTED_ZOOM_RANGE.min && camera.scale <= PROMOTED_ZOOM_RANGE.max;
+		const paintPromotion = ({ camera, moving }) => {
+			const promoted = moving || camera.scale >= PROMOTED_ZOOM_RANGE.min && camera.scale <= PROMOTED_ZOOM_RANGE.max;
 			for (const element of [viewport, ...mirrors.current]) {
 				if (promoted === "canvasPromoted" in element.dataset) continue;
 				if (promoted) element.dataset.canvasPromoted = "";
 				else delete element.dataset.canvasPromoted;
 			}
 		};
-		const paintAtRest = () => {
-			if (settle) return;
+		const paintAtRest = ({ camera, moving }) => {
+			if (moving) return;
 			const seamCover = String(canvasSeamCover(camera.scale, ownerWindow.devicePixelRatio));
 			const zoom = String(camera.scale);
 			for (const element of [viewport, ...mirrors.current]) {
@@ -296,358 +141,131 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				if (element.style.getPropertyValue("--canvas-rest-zoom") !== zoom) element.style.setProperty("--canvas-rest-zoom", zoom);
 			}
 		};
-		const setMoving = (moving) => {
-			paintPromotion();
-			paintAtRest();
-			canvasStore.send({
-				type: "setCameraMoving",
-				workspaceKey,
-				moving
-			});
-		};
-		const markMoving = () => {
-			const wasMoving = !!settle;
-			ownerWindow.clearTimeout(settle);
-			settle = ownerWindow.setTimeout(() => {
-				settle = 0;
-				setMoving(false);
-			}, CAMERA_SETTLE_MS);
-			if (!wasMoving) setMoving(true);
-		};
-		const paintElement = (element) => {
+		const paintElement = (element, { camera, insets }) => {
 			element.style.setProperty("--canvas-x", `${camera.x + insets.left}px`);
 			element.style.setProperty("--canvas-y", `${camera.y + insets.top}px`);
 			element.style.setProperty("--canvas-zoom", String(camera.scale));
 			element.style.setProperty("--canvas-pixel-ratio", String(ownerWindow.devicePixelRatio));
 		};
-		paintMirror.current = (element) => {
-			paintElement(element);
-			paintPanState();
-			paintPromotion();
-			paintAtRest();
-		};
-		const paint = () => {
-			paintElement(viewport);
-			for (const element of mirrors.current) paintElement(element);
-			paintPromotion();
-			paintAtRest();
-			remember();
-		};
-		const animate = (time) => {
-			markMoving();
-			if (flight) {
-				flight.startedAt ??= time;
-				const progress = reducedMotion.matches ? 1 : Math.min(1, (time - flight.startedAt) / flight.path.duration);
-				camera = progress === 1 ? target : flight.path.at(progress);
-				paint();
-				if (progress < 1) {
-					animation = requestAnimationFrame(animate);
-					return;
-				}
-				flight = void 0;
-				animation = 0;
-				previousTime = 0;
-				return;
-			}
-			const elapsed = previousTime ? Math.min(64, time - previousTime) : 16;
-			previousTime = time;
-			const amount = reducedMotion.matches ? 1 : 1 - Math.exp(-elapsed / 55);
-			const approach = (from, to, epsilon) => {
-				const next = from + (to - from) * amount;
-				return Math.abs(next - to) < epsilon ? to : next;
-			};
-			camera = constrain({
-				x: approach(camera.x, target.x, .05),
-				y: approach(camera.y, target.y, .05),
-				scale: approach(camera.scale, target.scale, 1e-4)
-			}, true);
-			const settled = Math.abs(camera.x - target.x) < .05 && Math.abs(camera.y - target.y) < .05 && Math.abs(camera.scale - target.scale) < 1e-4;
-			if (settled) camera = target;
-			paint();
-			animation = settled ? 0 : requestAnimationFrame(animate);
-			if (settled) previousTime = 0;
-		};
-		const applyCamera = (next, immediate = false) => {
-			target = constrain(next);
-			if (immediate) {
-				cancelAnimationFrame(animation);
-				animation = 0;
-				previousTime = 0;
-				camera = target;
-				paint();
-				return;
-			}
-			if (!animation) animation = requestAnimationFrame(animate);
-		};
-		const cancelCameraFlight = () => {
-			if (!flight) return;
-			flight = void 0;
-			cancelAnimationFrame(animation);
-			animation = 0;
-			previousTime = 0;
-			target = camera;
-			gesture = void 0;
-		};
-		const startFlight = (key) => {
-			cancelCameraFlight();
-			const destination = targetOf(key);
-			if (!destination) return;
-			flyToCamera(() => fitCanvasPage(viewportSize, destination), destination);
-		};
-		const startOverviewFlight = () => {
-			cancelCameraFlight();
-			flyToCamera(() => canvasOverview(viewportSize, contentSize));
-		};
-		const startPan = (destination) => {
-			cancelCameraFlight();
-			flyToCamera(() => destination, void 0, true);
-		};
-		const flyToCamera = (destinationCamera, page, pan = false) => {
-			cancelAnimationFrame(animation);
-			animation = 0;
-			previousTime = 0;
-			restoredCamera = void 0;
-			fittingInitialPage = false;
-			gesture = void 0;
-			ownerWindow.clearTimeout(zoomEnd);
-			stretch = void 0;
-			updateGeometry();
-			camera = constrain(camera, true);
-			target = constrain(destinationCamera());
-			const path = pan ? createCanvasPan(camera, target, viewportSize) : createCanvasFlight(camera, target, viewportSize, contentSize);
-			if (reducedMotion.matches || path.duration === 0) {
-				applyCamera(target, true);
-				return;
-			}
-			flight = {
-				page: page && { ...page },
-				pan,
-				path
-			};
-			animation = requestAnimationFrame(animate);
-		};
-		let syncedTargets = targets();
-		flightControls.current = {
-			flyTo: startFlight,
-			reveal: (element, immediate) => {
-				const frame = element.ownerDocument.defaultView?.frameElement;
-				if (!frame || flight && !flight.pan || pointers.size) return;
-				const rect = element.getBoundingClientRect();
-				const worldTop = (frame.getBoundingClientRect().top - viewport.getBoundingClientRect().top - insets.top + rect.top * camera.scale - camera.y) / camera.scale;
-				const delta = revealScrollDelta({
-					top: target.y + worldTop * target.scale,
-					bottom: target.y + (worldTop + rect.height) * target.scale
-				}, {
-					top: 0,
-					bottom: viewportSize.height
-				});
-				if (!delta) return;
-				const next = {
-					...target,
-					y: target.y - delta
-				};
-				if (immediate) move(next, true);
-				else startPan(next);
-			},
-			syncRow: () => {
-				const key = rowRef.current?.selected ?? null;
-				const destination = targetOf(key);
-				const previousTargets = syncedTargets;
-				syncedTargets = targets();
-				if (key !== requested) {
-					requested = key;
-					selection = key;
-					if (destination && !isCanvasCameraSnapped(rest(target), viewportSize, destination)) startFlight(destination.key);
-					return;
-				}
-				if (flight?.page) {
-					const page = targetOf(flight.page.key);
-					if (!page) cancelCameraFlight();
-					else if (page.left !== flight.page.left || page.width !== flight.page.width) startFlight(page.key);
-					return;
+		const saved = canvasStore.getSnapshot().context.views[workspaceKey];
+		const controller = createCanvasCameraController({
+			initialPage: initialTargetRef.current,
+			saved,
+			row: rowRef.current
+		}, {
+			measure: () => ({
+				viewport: {
+					width: viewport.clientWidth,
+					height: viewport.clientHeight
+				},
+				content: {
+					width: content.offsetWidth,
+					height: content.offsetHeight
 				}
-				const previous = previousTargets[syncedTargets.findIndex((candidate) => candidate.key === key)];
-				if (destination && previous?.key === key && previous.left !== destination.left && previous.width === destination.width && selection === key && !flight && isCanvasCameraSnapped(rest(target), viewportSize, previous)) {
-					updateGeometry();
-					const fit = fitCanvasPage(viewportSize, destination);
-					const next = {
-						...fit,
-						y: rescaleY(restoredCamera ?? target, fit.scale)
-					};
-					if (restoredCamera || fittingInitialPage) restoredCamera = next;
-					fittingInitialPage = false;
-					camera = constrain(camera, true);
-					applyCamera(next, true);
-					return;
+			}),
+			clock: {
+				frame: (callback) => {
+					const id = requestAnimationFrame(callback);
+					return () => cancelAnimationFrame(id);
+				},
+				after: (ms, callback) => {
+					const id = ownerWindow.setTimeout(callback, ms);
+					return () => ownerWindow.clearTimeout(id);
 				}
-				if (destination && selection === key && !flight && !fittingInitialPage && !isCanvasCameraSnapped(rest(target), viewportSize, destination)) startFlight(destination.key);
 			},
-			fitAll: startOverviewFlight
-		};
-		const move = (next, immediate = false) => {
-			markMoving();
-			cancelCameraFlight();
-			restoredCamera = void 0;
-			fittingInitialPage = false;
-			applyCamera(next, immediate);
-			releaseSelection();
+			reducedMotion: () => reducedMotion.matches,
+			paint: (view) => {
+				paintElement(viewport, view);
+				for (const element of mirrors.current) paintElement(element, view);
+				paintPromotion(view);
+				paintAtRest(view);
+			},
+			moving: (view) => {
+				paintPromotion(view);
+				paintAtRest(view);
+				canvasStore.send({
+					type: "setCameraMoving",
+					workspaceKey,
+					moving: view.moving
+				});
+			},
+			remember: (view) => canvasStore.send({
+				type: "rememberView",
+				workspaceKey,
+				view
+			})
+		});
+		controllerRef.current = controller;
+		paintMirror.current = (element) => {
+			paintElement(element, controller);
+			paintPanState(controller);
+			paintPromotion(controller);
+			paintAtRest(controller);
 		};
+		const pageElement = (key) => Array.from(content.querySelectorAll("[data-canvas-page]")).find((element) => element.dataset.canvasPage === key);
 		const continuityBinding = {
 			capture: () => {
-				const held = flight ? void 0 : targetOf(selection);
-				const element = held && Array.from(content.querySelectorAll("[data-canvas-page]")).find((element) => element.dataset.canvasPage === held.key);
+				const { camera, page } = controller.capture();
+				const element = page ? pageElement(page) : void 0;
 				const doc = element ? canvasPageIframe(element)?.contentDocument : void 0;
-				const anchor = doc && element ? captureViewportAnchor(doc, Math.max(0, (viewport.getBoundingClientRect().top + insets.top - element.getBoundingClientRect().top) / camera.scale)) : void 0;
+				const anchor = doc && element ? captureViewportAnchor(doc, Math.max(0, (viewport.getBoundingClientRect().top + controller.insets.top - element.getBoundingClientRect().top) / camera.scale)) : void 0;
 				return {
-					camera: { ...camera },
+					camera,
 					pathname: element ? element.dataset.canvasPathname : void 0,
 					anchor
 				};
 			},
 			/** Snap to the selected page, at the anchor's reading point or the previous camera's. */
 			restore: (anchor, previous) => {
-				const destination = targetOf(selection);
-				if (!destination) return;
-				cancelCameraFlight();
-				const page = Array.from(content.querySelectorAll("[data-canvas-page]")).find((element) => element.dataset.canvasPage === destination.key);
-				const doc = page ? canvasPageIframe(page)?.contentDocument : void 0;
-				updateGeometry();
-				const fit = fitCanvasPage(viewportSize, destination);
-				let next = previous ? {
-					...fit,
-					y: rescaleY(previous, fit.scale)
-				} : fit;
-				if (anchor && doc) {
-					const y = resolveViewportAnchor(doc, anchor);
-					const frameOffsetY = page ? (page.getBoundingClientRect().top - viewport.getBoundingClientRect().top - insets.top - camera.y) / camera.scale : 0;
-					next = placeCanvasPageAnchor(viewportSize, destination, y, fit.scale, frameOffsetY);
-				}
-				fittingInitialPage = false;
-				restoredCamera = next;
-				applyCamera(next, true);
+				controller.restore(previous, (key) => {
+					const page = pageElement(key);
+					const doc = page ? canvasPageIframe(page)?.contentDocument : void 0;
+					if (!anchor || !doc || !page) return void 0;
+					const { camera, insets } = controller;
+					return {
+						y: resolveViewportAnchor(doc, anchor),
+						frameOffsetY: (page.getBoundingClientRect().top - viewport.getBoundingClientRect().top - insets.top - camera.y) / camera.scale
+					};
+				});
 			}
 		};
 		if (continuity) continuity.canvas = continuityBinding;
-		const resize = new ResizeObserver(() => {
-			const previousInsets = insets;
-			const nextViewport = measureViewport();
-			const nextContent = measureContent();
-			if (insets.left === previousInsets.left && insets.top === previousInsets.top && nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height && nextContent.pageWidth === contentSize.pageWidth) return;
-			const wasFitted = isOverview(target);
-			gesture = void 0;
-			const held = nextViewport.width !== viewportSize.width && !flight && !fittingInitialPage ? targetOf(selection) : void 0;
-			updateGeometry(nextViewport, nextContent);
-			if (held) {
-				const fit = fitCanvasPage(viewportSize, held);
-				const next = {
-					...fit,
-					y: rescaleY(restoredCamera ?? target, fit.scale)
-				};
-				if (restoredCamera) restoredCamera = next;
-				camera = constrain(camera, true);
-				applyCamera(next, true);
-				return;
-			}
-			if (flight) {
-				camera = constrain(camera, true);
-				if (flight.page) startFlight(flight.page.key);
-				else if (flight.pan) startPan(target);
-				else startOverviewFlight();
-				return;
-			}
-			if (restoredCamera) {
-				applyCamera(restoredCamera, true);
-				return;
-			}
-			if (fittingInitialPage) {
-				applyCamera(initialCamera(), true);
-				return;
-			}
-			camera = constrain(camera, true);
-			applyCamera(wasFitted ? canvasOverview(viewportSize, contentSize) : target, true);
-		});
+		const resize = new ResizeObserver(() => controller.resize());
 		resize.observe(viewport);
 		resize.observe(content);
 		const localPoint = (x, y) => {
 			const rect = viewport.getBoundingClientRect();
 			return {
-				x: x - rect.left - insets.left,
-				y: y - rect.top - insets.top
+				x: x - rect.left,
+				y: y - rect.top
 			};
 		};
 		const onWheel = (event) => {
 			event.preventDefault();
-			const dx = canvasWheelDelta(event.deltaX, event.deltaMode, viewportSize.width);
-			const dy = canvasWheelDelta(event.deltaY, event.deltaMode, viewportSize.height);
-			if (!dx && !dy) return;
-			rowRef.current?.onEditorMove?.();
-			cancelCameraFlight();
-			if (event.ctrlKey || event.metaKey) {
-				const point = localPoint(event.clientX, event.clientY);
-				move(zoom(target, point, Math.exp(-dy * CANVAS_WHEEL_ZOOM_RATE), event.timeStamp));
-				return;
-			}
-			endZoom();
-			const previous = gesture?.kind === "pan" && gesture.source === "wheel" && event.timeStamp - gesture.time < GESTURE_IDLE_MS ? gesture.rail : void 0;
-			const rail = !event.shiftKey && !pointers.size && targets().length > 0 && isCanvasPageScale(target.scale, canvasMaximumScale(viewportSize, targets(), minimumScale)) ? canvasVerticalRail({
-				x: dx,
-				y: dy
-			}, event.timeStamp, previous) : {
-				mode: "free",
-				samples: []
-			};
-			const vertical = rail.mode === "vertical";
-			move(pan(target, {
-				x: -(vertical ? 0 : event.shiftKey && dx === 0 ? dy : dx),
-				y: -(event.shiftKey && dx === 0 ? 0 : dy)
-			}, event.timeStamp, "wheel", rail));
+			controller.wheel({
+				deltaX: event.deltaX,
+				deltaY: event.deltaY,
+				deltaMode: event.deltaMode,
+				point: localPoint(event.clientX, event.clientY),
+				zoom: event.ctrlKey || event.metaKey,
+				shift: event.shiftKey,
+				time: event.timeStamp
+			});
 		};
 		const onPointerDown = (event) => {
 			if (!(event.button === 1 || event.button === 0 && (spaceHeld || event.pointerType === "touch")) || !spaceHeld && isControl(event.target)) return;
-			gesture = void 0;
 			event.preventDefault();
 			viewport.focus({ preventScroll: true });
-			move(camera, true);
-			pointers.set(event.pointerId, localPoint(event.clientX, event.clientY));
+			controller.pointerDown(event.pointerId, localPoint(event.clientX, event.clientY));
 			viewport.setPointerCapture(event.pointerId);
-			paintPanState();
+			paintPanState(controller);
 		};
 		const onPointerMove = (event) => {
-			const previous = pointers.get(event.pointerId);
-			if (!previous) return;
-			const next = localPoint(event.clientX, event.clientY);
-			const other = [...pointers.entries()].find(([id]) => id !== event.pointerId)?.[1];
-			pointers.set(event.pointerId, next);
-			rowRef.current?.onEditorMove?.();
-			if (!other) {
-				move(pan(camera, {
-					x: next.x - previous.x,
-					y: next.y - previous.y
-				}, event.timeStamp, "pointer"), true);
-				return;
-			}
-			const oldCenter = {
-				x: (previous.x + other.x) / 2,
-				y: (previous.y + other.y) / 2
-			};
-			const center = {
-				x: (next.x + other.x) / 2,
-				y: (next.y + other.y) / 2
-			};
-			const oldDistance = Math.hypot(previous.x - other.x, previous.y - other.y);
-			const distance = Math.hypot(next.x - other.x, next.y - other.y);
-			const zoomed = zoom(camera, oldCenter, distance / Math.max(1, oldDistance), event.timeStamp, {
-				x: center.x - oldCenter.x,
-				y: center.y - oldCenter.y
-			});
-			move(zoomed, true);
+			controller.pointerMove(event.pointerId, localPoint(event.clientX, event.clientY), event.timeStamp);
 		};
 		const onPointerEnd = (event) => {
-			gesture = void 0;
-			pointers.delete(event.pointerId);
-			if (pointers.size < 2) endZoom();
-			if (pointers.size) return;
-			paintPanState();
+			controller.pointerUp(event.pointerId);
+			if (!controller.dragging) paintPanState(controller);
 		};
 		const ownsSpace = (target) => {
 			const doc = viewport.ownerDocument;
@@ -661,96 +279,37 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			event.preventDefault();
 			if (spaceHeld) return;
 			spaceHeld = true;
-			paintPanState();
+			paintPanState(controller);
 		};
 		const onSpaceUp = (event) => {
 			if (event.code !== "Space" || !spaceHeld) return;
 			event.preventDefault();
 			spaceHeld = false;
-			paintPanState();
+			paintPanState(controller);
 		};
 		const releaseSpace = () => {
 			spaceHeld = false;
-			paintPanState();
+			paintPanState(controller);
 		};
 		const onFocusIn = (event) => {
 			if (!isControl(event.target)) return;
 			const rect = event.target.getBoundingClientRect();
-			const viewportRect = viewport.getBoundingClientRect();
-			const bounds = {
-				left: viewportRect.left + insets.left,
-				top: viewportRect.top + insets.top,
-				right: viewportRect.left + insets.left + viewportSize.width,
-				bottom: viewportRect.top + insets.top + viewportSize.height
-			};
-			const dx = Math.max(0, bounds.left + 16 - rect.left) - Math.max(0, rect.right - bounds.right + 16);
-			const dy = Math.max(0, bounds.top + 16 - rect.top) - Math.max(0, rect.bottom - bounds.bottom + 16);
-			if (!dx && !dy) return;
-			gesture = void 0;
-			move({
-				...camera,
-				x: camera.x + dx,
-				y: camera.y + dy
-			}, true);
+			const { x: left, y: top } = localPoint(rect.left, rect.top);
+			const { x: right, y: bottom } = localPoint(rect.right, rect.bottom);
+			controller.bringIntoView({
+				left,
+				top,
+				right,
+				bottom
+			});
 		};
 		const onKeyDown = (event) => {
 			if (isControl(event.target) || event.altKey || event.ctrlKey || event.metaKey) return;
-			if ([
-				"+",
-				"=",
-				"-",
-				"0",
-				"Home",
-				"ArrowLeft",
-				"ArrowRight",
-				"ArrowUp",
-				"ArrowDown"
-			].includes(event.key) || event.shiftKey && event.code === "Digit1") cancelCameraFlight();
-			const center = {
-				x: viewportSize.width / 2,
-				y: viewportSize.height / 2
-			};
-			const factor = event.key === "+" || event.key === "=" ? 1.25 : event.key === "-" ? .8 : event.key === "0" ? 1 / target.scale : void 0;
-			if (factor) {
-				gesture = void 0;
-				event.preventDefault();
-				rowRef.current?.onEditorMove?.();
-				move(zoom(target, center, factor, event.timeStamp));
-				return;
-			}
-			if (event.key === "Home" || event.shiftKey && event.code === "Digit1") {
-				endZoom();
-				gesture = void 0;
-				event.preventDefault();
-				rowRef.current?.onEditorMove?.();
-				move(canvasOverview(viewportSize, contentSize));
-				return;
-			}
-			const direction = {
-				ArrowLeft: {
-					x: 100,
-					y: 0
-				},
-				ArrowRight: {
-					x: -100,
-					y: 0
-				},
-				ArrowUp: {
-					x: 0,
-					y: 100
-				},
-				ArrowDown: {
-					x: 0,
-					y: -100
-				}
-			}[event.key];
-			if (!direction) return;
+			const command = keyCommand(event);
+			if (!command) return;
 			event.preventDefault();
-			rowRef.current?.onEditorMove?.();
-			endZoom();
-			move(pan(target, direction, event.timeStamp, "keyboard"));
+			controller.key(command, event.timeStamp);
 		};
-		paint();
 		viewport.addEventListener("wheel", onWheel, { passive: false });
 		viewport.addEventListener("pointerdown", onPointerDown);
 		viewport.addEventListener("pointermove", onPointerMove);
@@ -764,16 +323,11 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		ownerWindow.addEventListener("blur", releaseSpace);
 		return () => {
 			if (continuity?.canvas === continuityBinding) continuity.canvas = null;
-			flightControls.current = null;
+			controllerRef.current = null;
 			ownerWindow.removeEventListener("wheel", preventHistorySwipe, { capture: true });
 			if (overscrollX) rootStyle.setProperty("overscroll-behavior-x", overscrollX, overscrollPriority);
 			else rootStyle.removeProperty("overscroll-behavior-x");
-			remember();
-			cancelAnimationFrame(animation);
-			ownerWindow.clearTimeout(settle);
-			settle = 0;
-			ownerWindow.clearTimeout(zoomEnd);
-			setMoving(false);
+			controller.dispose();
 			resize.disconnect();
 			viewport.removeEventListener("wheel", onWheel);
 			viewport.removeEventListener("pointerdown", onPointerDown);