camox 0.43.0 → 0.45.0

package/dist/features/canvas/useCanvasCamera.js

@@ -0,0 +1,803 @@
+import { canvasStore } from "./canvasStore.js";
+import { ViewportContinuityContext, captureViewportAnchor, resolveViewportAnchor } from "../preview/viewportContinuity.js";
+import { canvasPageIframe } from "../preview/previewPageFrame.js";
+import { canvasBlockOverlap } from "./canvasFrameDocument.js";
+import { CANVAS_WHEEL_ZOOM_RATE, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_STRETCH, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt } from "./canvasCamera.js";
+import { revealScrollDelta } from "../preview/selectionReveal.js";
+import { createCanvasFlight, createCanvasPan } from "./canvasFlight.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",
+	"--canvas-zoom",
+	"--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
+* on tiles already drawn. Below this range a promoted layer keeps the larger
+* raster scale it had and runs out of tile memory; above it, the raster blurs.
+* Outside it, layers are promoted only while the camera moves, so the browser
+* re-rasters them at their zoom once it settles.
+*/
+const PROMOTED_ZOOM_RANGE = {
+	min: .25,
+	max: 1
+};
+function isControl(target) {
+	return target instanceof Element && !!target.closest("input, select, button, a, textarea, [data-canvas-overlay-control]");
+}
+function isTextEntry(target) {
+	return target instanceof Element && (!!target.closest("input, select, textarea") || target instanceof HTMLElement && target.isContentEditable);
+}
+/**
+* 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.
+*/
+function rescaleY(camera, scale) {
+	return camera.y > 0 ? camera.y : camera.y * scale / camera.scale;
+}
+/** 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());
+	const viewportRef = React.useRef(null);
+	const contentRef = React.useRef(null);
+	const initialTargetRef = React.useRef(initialTarget);
+	const rowRef = React.useRef(row);
+	const flightControls = React.useRef(null);
+	const flyTo = React.useCallback((key) => {
+		flightControls.current?.flyTo(key);
+	}, []);
+	const paintMirror = React.useRef(null);
+	/** Paints the camera onto an element outside the viewport until the returned cleanup. */
+	const mirrorCamera = React.useCallback((element) => {
+		mirrors.current.add(element);
+		paintMirror.current?.(element);
+		return () => {
+			mirrors.current.delete(element);
+			for (const name of CAMERA_PROPERTIES) element.style.removeProperty(name);
+			delete element.dataset.canvasPan;
+			delete element.dataset.canvasPromoted;
+			delete element.dataset.canvasBlockOverlap;
+		};
+	}, []);
+	/**
+	* Pan immediately so a world x sits at or right of a screen x; never pans
+	* otherwise, nor while a selection holds the camera.
+	*/
+	const keepInView = React.useCallback((worldX, screenX) => {
+		flightControls.current?.keepInView(worldX, screenX);
+	}, []);
+	/**
+	* Pan vertically to an element inside a Canvas frame, such as a selected block,
+	* 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);
+	}, []);
+	/** Zoom out to the whole Canvas, keeping the selection: its caller decides what it becomes. */
+	const fitAll = React.useCallback(() => {
+		flightControls.current?.fitAll();
+	}, []);
+	React.useLayoutEffect(() => {
+		rowRef.current = row;
+		flightControls.current?.syncRow();
+	});
+	React.useLayoutEffect(() => {
+		const viewport = viewportRef.current;
+		const content = contentRef.current;
+		if (!viewport || !content) return;
+		const rootStyle = viewport.ownerDocument.documentElement.style;
+		const overscrollX = rootStyle.getPropertyValue("overscroll-behavior-x");
+		const overscrollPriority = rootStyle.getPropertyPriority("overscroll-behavior-x");
+		rootStyle.setProperty("overscroll-behavior-x", "none");
+		const ownerWindow = viewport.ownerDocument.defaultView;
+		const preventHistorySwipe = (event) => {
+			if (event.ctrlKey || event.metaKey) return;
+			if (event.deltaX !== 0 || event.shiftKey && event.deltaY !== 0) event.preventDefault();
+		};
+		ownerWindow.addEventListener("wheel", preventHistorySwipe, {
+			capture: true,
+			passive: false
+		});
+		let viewportSize = {
+			width: viewport.clientWidth,
+			height: viewport.clientHeight
+		};
+		const measureContent = () => ({
+			width: rowRef.current?.width ?? content.offsetWidth,
+			height: content.offsetHeight
+		});
+		let contentSize = measureContent();
+		let minimumScale = canvasMinimumScale(viewportSize, contentSize);
+		const updateGeometry = (nextViewport = {
+			width: viewport.clientWidth,
+			height: viewport.clientHeight
+		}, nextContent = measureContent()) => {
+			viewportSize = nextViewport;
+			contentSize = nextContent;
+			minimumScale = canvasMinimumScale(viewportSize, contentSize);
+		};
+		const page = initialTargetRef.current;
+		const targets = () => rowRef.current?.targets ?? (page ? [{
+			...page,
+			key: "initial"
+		}] : []);
+		const targetOf = (key) => key == null ? void 0 : targets().find((candidate) => candidate.key === key);
+		let stretch;
+		let zoomEnd = 0;
+		let landing;
+		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;
+			const entered = selection !== candidate.key;
+			if (entered) landing = {
+				key: candidate.key,
+				stretched
+			};
+			else if (stretched && landing && !landing.stretched) {
+				landing.stretched = true;
+				rowRef.current?.onSnapStretched?.();
+			}
+			if (entered && !stretched) rowRef.current?.onSnap?.();
+			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 || !isCanvasPageScale(base.scale, fit.scale)) return intended;
+			const held = Math.abs(base.x - fit.x) < 1e-8;
+			const band = viewportSize.width * (held ? PAN_SNAP_RELEASE : PAN_SNAP_CAPTURE);
+			if (Math.abs(intended.x - fit.x) > band) return intended;
+			if (selection !== candidate.key) rowRef.current?.onSnap?.();
+			select(candidate.key);
+			return {
+				...intended,
+				x: fit.x
+			};
+		};
+		const endZoom = () => {
+			ownerWindow.clearTimeout(zoomEnd);
+			if (stretch) {
+				const next = rest(target);
+				stretch = void 0;
+				gesture = void 0;
+				markMoving();
+				applyCamera(next);
+			}
+			if (landing?.stretched && landing.key === selection) rowRef.current?.onSnap?.();
+			landing = void 0;
+		};
+		const pointers = /* @__PURE__ */ new Map();
+		let spaceHeld = false;
+		const paintPanState = () => {
+			for (const element of [viewport, ...mirrors.current]) if (pointers.size) 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 remember = () => {
+			if (restoredCamera || fittingInitialPage || !viewportSize.width || !viewportSize.height) return;
+			canvasStore.send({
+				type: "rememberView",
+				workspaceKey,
+				view: {
+					camera,
+					fitted: Math.abs(camera.scale - minimumScale) < 1e-8
+				}
+			});
+		};
+		let settle = 0;
+		const paintPromotion = () => {
+			const promoted = !!settle || 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 overlap = String(canvasBlockOverlap(camera.scale, ownerWindow.devicePixelRatio));
+			const zoom = String(camera.scale);
+			for (const element of [viewport, ...mirrors.current]) {
+				if (element.dataset.canvasBlockOverlap !== overlap) element.dataset.canvasBlockOverlap = overlap;
+				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) => {
+			element.style.setProperty("--canvas-x", `${camera.x}px`);
+			element.style.setProperty("--canvas-y", `${camera.y}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;
+			landing = 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);
+		};
+		flightControls.current = {
+			flyTo: startFlight,
+			keepInView: (worldX, screenX) => {
+				const x = screenX - worldX * camera.scale;
+				if (selection || camera.x >= x) return;
+				cancelCameraFlight();
+				restoredCamera = void 0;
+				fittingInitialPage = false;
+				gesture = void 0;
+				applyCamera({
+					...camera,
+					x
+				}, true);
+			},
+			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 + 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);
+				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;
+				}
+				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();
+		};
+		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 doc = element ? canvasPageIframe(element)?.contentDocument : void 0;
+				const anchor = doc && element ? captureViewportAnchor(doc, Math.max(0, (viewport.getBoundingClientRect().top - element.getBoundingClientRect().top) / camera.scale)) : void 0;
+				return {
+					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 - camera.y) / camera.scale : 0;
+					next = placeCanvasPageAnchor(viewportSize, destination, y, fit.scale, frameOffsetY);
+				}
+				fittingInitialPage = false;
+				restoredCamera = next;
+				applyCamera(next, true);
+			}
+		};
+		if (continuity) continuity.canvas = continuityBinding;
+		const resize = new ResizeObserver(() => {
+			const nextViewport = {
+				width: viewport.clientWidth,
+				height: viewport.clientHeight
+			};
+			const nextContent = measureContent();
+			if (nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height) return;
+			const wasFitted = Math.abs(target.scale - minimumScale) < 1e-8;
+			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);
+		});
+		resize.observe(viewport);
+		resize.observe(content);
+		const localPoint = (x, y) => {
+			const rect = viewport.getBoundingClientRect();
+			return {
+				x: x - rect.left,
+				y: y - rect.top
+			};
+		};
+		const onWheel = (event) => {
+			event.preventDefault();
+			const dx = canvasWheelDelta(event.deltaX, event.deltaMode, viewport.clientWidth);
+			const dy = canvasWheelDelta(event.deltaY, event.deltaMode, viewport.clientHeight);
+			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));
+		};
+		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));
+			viewport.setPointerCapture(event.pointerId);
+			paintPanState();
+		};
+		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);
+		};
+		const onPointerEnd = (event) => {
+			gesture = void 0;
+			pointers.delete(event.pointerId);
+			if (pointers.size < 2) endZoom();
+			if (pointers.size) return;
+			paintPanState();
+		};
+		const ownsSpace = (target) => {
+			const doc = viewport.ownerDocument;
+			if (target === doc.body || target === doc.documentElement) return true;
+			if (!(target instanceof Node) || !viewport.contains(target) || isTextEntry(target)) return false;
+			return !(isControl(target) && target.matches(":focus-visible"));
+		};
+		const onSpaceDown = (event) => {
+			if (event.code !== "Space" || event.ctrlKey || event.metaKey || event.altKey) return;
+			if (!spaceHeld && !ownsSpace(event.target)) return;
+			event.preventDefault();
+			if (spaceHeld) return;
+			spaceHeld = true;
+			paintPanState();
+		};
+		const onSpaceUp = (event) => {
+			if (event.code !== "Space" || !spaceHeld) return;
+			event.preventDefault();
+			spaceHeld = false;
+			paintPanState();
+		};
+		const releaseSpace = () => {
+			spaceHeld = false;
+			paintPanState();
+		};
+		const onFocusIn = (event) => {
+			if (!isControl(event.target)) return;
+			const rect = event.target.getBoundingClientRect();
+			const bounds = viewport.getBoundingClientRect();
+			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 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: viewport.clientWidth / 2,
+				y: viewport.clientHeight / 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;
+			event.preventDefault();
+			rowRef.current?.onEditorMove?.();
+			endZoom();
+			move(pan(target, direction, event.timeStamp, "keyboard"));
+		};
+		paint();
+		viewport.addEventListener("wheel", onWheel, { passive: false });
+		viewport.addEventListener("pointerdown", onPointerDown);
+		viewport.addEventListener("pointermove", onPointerMove);
+		viewport.addEventListener("pointerup", onPointerEnd);
+		viewport.addEventListener("pointercancel", onPointerEnd);
+		viewport.addEventListener("lostpointercapture", onPointerEnd);
+		viewport.addEventListener("keydown", onKeyDown);
+		viewport.addEventListener("focusin", onFocusIn);
+		ownerWindow.addEventListener("keydown", onSpaceDown);
+		ownerWindow.addEventListener("keyup", onSpaceUp);
+		ownerWindow.addEventListener("blur", releaseSpace);
+		return () => {
+			if (continuity?.canvas === continuityBinding) continuity.canvas = null;
+			flightControls.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);
+			resize.disconnect();
+			viewport.removeEventListener("wheel", onWheel);
+			viewport.removeEventListener("pointerdown", onPointerDown);
+			viewport.removeEventListener("pointermove", onPointerMove);
+			viewport.removeEventListener("pointerup", onPointerEnd);
+			viewport.removeEventListener("pointercancel", onPointerEnd);
+			viewport.removeEventListener("lostpointercapture", onPointerEnd);
+			viewport.removeEventListener("keydown", onKeyDown);
+			viewport.removeEventListener("focusin", onFocusIn);
+			ownerWindow.removeEventListener("keydown", onSpaceDown);
+			ownerWindow.removeEventListener("keyup", onSpaceUp);
+			ownerWindow.removeEventListener("blur", releaseSpace);
+			delete viewport.dataset.canvasPan;
+			delete viewport.dataset.canvasPromoted;
+			delete viewport.dataset.canvasBlockOverlap;
+			paintMirror.current = null;
+		};
+	}, [workspaceKey, continuity]);
+	return {
+		viewportRef,
+		contentRef,
+		flyTo,
+		mirrorCamera,
+		keepInView,
+		reveal,
+		fitAll
+	};
+}
+
+//#endregion
+export { useCanvasCamera };