camox 0.76.0 → 0.76.1

package/dist/features/canvas/canvasCameraController.js

@@ -0,0 +1,595 @@
+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";
+
+//#region src/features/canvas/canvasCameraController.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;
+/** The camera counts as moving until it has been still this long. */
+const CAMERA_SETTLE_MS = 150;
+const NO_INSETS = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
+/**
+* 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;
+}
+/**
+* The Canvas camera's policy: input, geometry and time in, camera and Selection changes out.
+* It opens on the saved view if it still holds the initial page, else fitted to that page,
+* else on the overview, and paints that first camera at once.
+*/
+function createCanvasCameraController(start, host) {
+	const { clock } = host;
+	let row = start.row;
+	let insets = row?.insets ?? NO_INSETS;
+	const page = start.initialPage;
+	const targets = () => row?.targets ?? (page ? [{
+		...page,
+		key: "initial"
+	}] : []);
+	const measure = () => {
+		const measured = host.measure();
+		insets = row?.insets ?? NO_INSETS;
+		const widths = targets().map((target) => target.width);
+		return {
+			viewport: {
+				width: Math.max(0, measured.viewport.width - insets.left - insets.right),
+				height: Math.max(0, measured.viewport.height - insets.top - insets.bottom)
+			},
+			content: {
+				width: row?.width ?? measured.content.width,
+				height: measured.content.height,
+				pageWidth: widths.length ? Math.min(...widths) : void 0
+			}
+		};
+	};
+	const measured = measure();
+	let viewportSize = measured.viewport;
+	let contentSize = measured.content;
+	let minimumScale = canvasMinimumScale(viewportSize, contentSize);
+	const updateGeometry = (next = measure()) => {
+		viewportSize = next.viewport;
+		contentSize = next.content;
+		minimumScale = canvasMinimumScale(viewportSize, contentSize);
+	};
+	const targetOf = (key) => key == null ? void 0 : targets().find((candidate) => candidate.key === key);
+	const toArea = (point) => ({
+		x: point.x - insets.left,
+		y: point.y - insets.top
+	});
+	let stretch;
+	let cancelZoomEnd;
+	const clearZoomEnd = () => {
+		cancelZoomEnd?.();
+		cancelZoomEnd = void 0;
+	};
+	const constrain = (next, stretched = !!stretch) => constrainCanvasCamera(next, viewportSize, contentSize, canvasMaximumScale(viewportSize, targets(), minimumScale), stretched);
+	const savedCamera = start.saved && !start.saved.fitted ? start.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;
+	let previousTime = 0;
+	const stopAnimation = () => {
+		animation?.();
+		animation = void 0;
+		previousTime = 0;
+	};
+	let flight;
+	let gesture;
+	let requested = row?.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) row?.onSelect(key);
+		else row?.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 pointers = /* @__PURE__ */ new Map();
+	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;
+		clearZoomEnd();
+		if (!pointers.size) cancelZoomEnd = clock.after(ZOOM_END_MS, endZoom);
+		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
+		});
+	};
+	function endZoom() {
+		clearZoomEnd();
+		if (stretch) {
+			const next = rest(target);
+			stretch = void 0;
+			gesture = void 0;
+			markMoving();
+			applyCamera(next);
+		}
+	}
+	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;
+		host.remember({
+			camera,
+			fitted: isOverview(camera)
+		});
+	};
+	let settle;
+	function markMoving() {
+		const wasMoving = !!settle;
+		settle?.();
+		settle = clock.after(CAMERA_SETTLE_MS, () => {
+			settle = void 0;
+			host.moving(controller);
+		});
+		if (!wasMoving) host.moving(controller);
+	}
+	const paint = () => {
+		host.paint(controller);
+		remember();
+	};
+	const animate = (time) => {
+		markMoving();
+		if (flight) {
+			flight.startedAt ??= time;
+			const progress = host.reducedMotion() ? 1 : Math.min(1, (time - flight.startedAt) / flight.path.duration);
+			camera = progress === 1 ? target : flight.path.at(progress);
+			paint();
+			if (progress < 1) {
+				animation = clock.frame(animate);
+				return;
+			}
+			flight = void 0;
+			animation = void 0;
+			previousTime = 0;
+			return;
+		}
+		const elapsed = previousTime ? Math.min(64, time - previousTime) : 16;
+		previousTime = time;
+		const amount = host.reducedMotion() ? 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 ? void 0 : clock.frame(animate);
+		if (settled) previousTime = 0;
+	};
+	function applyCamera(next, immediate = false) {
+		target = constrain(next);
+		if (immediate) {
+			stopAnimation();
+			camera = target;
+			paint();
+			return;
+		}
+		if (!animation) animation = clock.frame(animate);
+	}
+	const cancelCameraFlight = () => {
+		if (!flight) return;
+		flight = void 0;
+		stopAnimation();
+		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) => {
+		stopAnimation();
+		restoredCamera = void 0;
+		fittingInitialPage = false;
+		gesture = void 0;
+		clearZoomEnd();
+		stretch = void 0;
+		updateGeometry();
+		camera = constrain(camera, true);
+		target = constrain(destinationCamera());
+		const path = pan ? createCanvasPan(camera, target, viewportSize) : createCanvasFlight(camera, target, viewportSize, contentSize);
+		if (host.reducedMotion() || path.duration === 0) {
+			applyCamera(target, true);
+			return;
+		}
+		flight = {
+			page: page && { ...page },
+			pan,
+			path
+		};
+		animation = clock.frame(animate);
+	};
+	const move = (next, immediate = false) => {
+		markMoving();
+		cancelCameraFlight();
+		restoredCamera = void 0;
+		fittingInitialPage = false;
+		applyCamera(next, immediate);
+		releaseSelection();
+	};
+	let syncedTargets = targets();
+	const syncRow = () => {
+		const key = row?.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 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;
+		}
+		if (destination && selection === key && !flight && !fittingInitialPage && !isCanvasCameraSnapped(rest(target), viewportSize, destination)) startFlight(destination.key);
+	};
+	const resize = () => {
+		const previousInsets = insets;
+		const next = measure();
+		if (insets.left === previousInsets.left && insets.top === previousInsets.top && next.viewport.width === viewportSize.width && next.viewport.height === viewportSize.height && next.content.width === contentSize.width && next.content.height === contentSize.height && next.content.pageWidth === contentSize.pageWidth) return;
+		const wasFitted = isOverview(target);
+		gesture = void 0;
+		const held = next.viewport.width !== viewportSize.width && !flight && !fittingInitialPage ? targetOf(selection) : void 0;
+		updateGeometry(next);
+		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 wheel = (input) => {
+		const dx = canvasWheelDelta(input.deltaX, input.deltaMode, viewportSize.width);
+		const dy = canvasWheelDelta(input.deltaY, input.deltaMode, viewportSize.height);
+		if (!dx && !dy) return;
+		row?.onEditorMove?.();
+		cancelCameraFlight();
+		if (input.zoom) {
+			move(zoom(target, toArea(input.point), Math.exp(-dy * CANVAS_WHEEL_ZOOM_RATE), input.time));
+			return;
+		}
+		endZoom();
+		const previous = gesture?.kind === "pan" && gesture.source === "wheel" && input.time - gesture.time < GESTURE_IDLE_MS ? gesture.rail : void 0;
+		const rail = !input.shift && !pointers.size && targets().length > 0 && isCanvasPageScale(target.scale, canvasMaximumScale(viewportSize, targets(), minimumScale)) ? canvasVerticalRail({
+			x: dx,
+			y: dy
+		}, input.time, previous) : {
+			mode: "free",
+			samples: []
+		};
+		const vertical = rail.mode === "vertical";
+		move(pan(target, {
+			x: -(vertical ? 0 : input.shift && dx === 0 ? dy : dx),
+			y: -(input.shift && dx === 0 ? 0 : dy)
+		}, input.time, "wheel", rail));
+	};
+	const pointerDown = (id, point) => {
+		gesture = void 0;
+		move(camera, true);
+		pointers.set(id, toArea(point));
+	};
+	const pointerMove = (id, point, time) => {
+		const previous = pointers.get(id);
+		if (!previous) return;
+		const next = toArea(point);
+		const other = [...pointers.entries()].find(([candidate]) => candidate !== id)?.[1];
+		pointers.set(id, next);
+		row?.onEditorMove?.();
+		if (!other) {
+			move(pan(camera, {
+				x: next.x - previous.x,
+				y: next.y - previous.y
+			}, time, "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), time, {
+			x: center.x - oldCenter.x,
+			y: center.y - oldCenter.y
+		});
+		move(zoomed, true);
+	};
+	const pointerUp = (id) => {
+		gesture = void 0;
+		pointers.delete(id);
+		if (pointers.size < 2) endZoom();
+	};
+	const directions = {
+		panLeft: {
+			x: 100,
+			y: 0
+		},
+		panRight: {
+			x: -100,
+			y: 0
+		},
+		panUp: {
+			x: 0,
+			y: 100
+		},
+		panDown: {
+			x: 0,
+			y: -100
+		}
+	};
+	const key = (key, time) => {
+		cancelCameraFlight();
+		const center = {
+			x: viewportSize.width / 2,
+			y: viewportSize.height / 2
+		};
+		const factor = key === "zoomIn" ? 1.25 : key === "zoomOut" ? .8 : key === "zoomToActualSize" ? 1 / target.scale : void 0;
+		if (factor) {
+			gesture = void 0;
+			row?.onEditorMove?.();
+			move(zoom(target, center, factor, time));
+			return;
+		}
+		if (key === "overview") {
+			endZoom();
+			gesture = void 0;
+			row?.onEditorMove?.();
+			move(canvasOverview(viewportSize, contentSize));
+			return;
+		}
+		const direction = directions[key];
+		if (!direction) return;
+		row?.onEditorMove?.();
+		endZoom();
+		move(pan(target, direction, time, "keyboard"));
+	};
+	const bringIntoView = (rect) => {
+		const bounds = {
+			left: insets.left,
+			top: insets.top,
+			right: insets.left + viewportSize.width,
+			bottom: 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 reveal = (element, immediate) => {
+		if (flight && !flight.pan || pointers.size) return;
+		const worldTop = (element.frameTop - insets.top + element.top * camera.scale - camera.y) / camera.scale;
+		const delta = revealScrollDelta({
+			top: target.y + worldTop * target.scale,
+			bottom: target.y + (worldTop + element.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);
+	};
+	const restore = (previous, place) => {
+		const destination = targetOf(selection);
+		if (!destination) return;
+		cancelCameraFlight();
+		updateGeometry();
+		const fit = fitCanvasPage(viewportSize, destination);
+		let next = previous ? {
+			...fit,
+			y: rescaleY(previous, fit.scale)
+		} : fit;
+		const placement = place(destination.key);
+		if (placement) next = placeCanvasPageAnchor(viewportSize, destination, placement.y, fit.scale, placement.frameOffsetY);
+		fittingInitialPage = false;
+		restoredCamera = next;
+		applyCamera(next, true);
+	};
+	const dispose = () => {
+		remember();
+		stopAnimation();
+		settle?.();
+		settle = void 0;
+		clearZoomEnd();
+		host.moving(controller);
+	};
+	const controller = {
+		get camera() {
+			return camera;
+		},
+		get insets() {
+			return insets;
+		},
+		get moving() {
+			return !!settle;
+		},
+		get dragging() {
+			return pointers.size > 0;
+		},
+		setRow: (next) => {
+			row = next;
+			syncRow();
+		},
+		resize,
+		wheel,
+		pointerDown,
+		pointerMove,
+		pointerUp,
+		key,
+		bringIntoView,
+		flyTo: startFlight,
+		fitAll: startOverviewFlight,
+		reveal,
+		capture: () => {
+			const held = flight ? void 0 : targetOf(selection);
+			return {
+				camera: { ...camera },
+				page: held?.key
+			};
+		},
+		restore,
+		dispose
+	};
+	paint();
+	return controller;
+}
+
+//#endregion
+export { createCanvasCameraController };