@cratis/components 4.21.0 → 4.22.0

package/dist/esm/Canvas/useCanvasNavigation.js

@@ -0,0 +1,186 @@
+import { useCallback, useEffect } from 'react';
+import { easeInOutCubic } from './canvasEasing.js';
+
+const useCanvasNavigation = ({ containerRef, animationFrameRef, panRef, zoomRef, itemRegistryRef, minZoom, maxZoom, pixiReady, onHandleReadyRef, applyWorldTransform, refreshMinimap, render, }) => {
+    const handleZoomIn = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const cx = container.clientWidth / 2;
+        const cy = container.clientHeight / 2;
+        const factor = 1.2;
+        const newZoom = Math.min(maxZoom, zoomRef.current * factor);
+        const worldX = (cx - panRef.current.x) / zoomRef.current;
+        const worldY = (cy - panRef.current.y) / zoomRef.current;
+        panRef.current = { x: cx - worldX * newZoom, y: cy - worldY * newZoom };
+        zoomRef.current = newZoom;
+        applyWorldTransform();
+        refreshMinimap();
+        render();
+    }, [
+        maxZoom,
+        applyWorldTransform,
+        refreshMinimap,
+        render,
+        containerRef,
+        panRef,
+        zoomRef,
+    ]);
+    const handleZoomOut = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const cx = container.clientWidth / 2;
+        const cy = container.clientHeight / 2;
+        const factor = 1.2;
+        const newZoom = Math.max(minZoom, zoomRef.current / factor);
+        const worldX = (cx - panRef.current.x) / zoomRef.current;
+        const worldY = (cy - panRef.current.y) / zoomRef.current;
+        panRef.current = { x: cx - worldX * newZoom, y: cy - worldY * newZoom };
+        zoomRef.current = newZoom;
+        applyWorldTransform();
+        refreshMinimap();
+        render();
+    }, [
+        minZoom,
+        applyWorldTransform,
+        refreshMinimap,
+        render,
+        containerRef,
+        panRef,
+        zoomRef,
+    ]);
+    const handleZoomReset = useCallback(() => {
+        zoomRef.current = 1;
+        applyWorldTransform();
+        refreshMinimap();
+        render();
+    }, [applyWorldTransform, refreshMinimap, render, zoomRef]);
+    const handleMinimapPan = useCallback((pan) => {
+        panRef.current = pan;
+        applyWorldTransform();
+        refreshMinimap();
+        render();
+    }, [applyWorldTransform, refreshMinimap, render, panRef]);
+    const smoothPanToWorld = useCallback((worldX, worldY, durationMs = 600) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        const viewportWidth = container.clientWidth;
+        const viewportHeight = container.clientHeight;
+        const targetPanX = viewportWidth / 2 - worldX * zoomRef.current;
+        const targetPanY = viewportHeight / 2 - worldY * zoomRef.current;
+        const startPanX = panRef.current.x;
+        const startPanY = panRef.current.y;
+        const startTime = performance.now();
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / durationMs, 1);
+            const eased = easeInOutCubic(progress);
+            panRef.current = {
+                x: startPanX + (targetPanX - startPanX) * eased,
+                y: startPanY + (targetPanY - startPanY) * eased,
+            };
+            applyWorldTransform();
+            refreshMinimap();
+            render();
+            if (progress < 1) {
+                animationFrameRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                animationFrameRef.current = null;
+            }
+        };
+        animationFrameRef.current = requestAnimationFrame(animate);
+    }, [
+        applyWorldTransform,
+        refreshMinimap,
+        render,
+        animationFrameRef,
+        containerRef,
+        panRef,
+        zoomRef,
+    ]);
+    const smoothPanZoomToWorld = useCallback((worldX, worldY, targetZoom = 1, durationMs = 600) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        const viewportWidth = container.clientWidth;
+        const viewportHeight = container.clientHeight;
+        const startZoom = zoomRef.current;
+        const endZoom = Math.min(maxZoom, Math.max(minZoom, targetZoom));
+        const startPanX = panRef.current.x;
+        const startPanY = panRef.current.y;
+        const endPanX = viewportWidth / 2 - worldX * endZoom;
+        const endPanY = viewportHeight / 2 - worldY * endZoom;
+        const startTime = performance.now();
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / durationMs, 1);
+            const eased = easeInOutCubic(progress);
+            zoomRef.current = startZoom + (endZoom - startZoom) * eased;
+            panRef.current = {
+                x: startPanX + (endPanX - startPanX) * eased,
+                y: startPanY + (endPanY - startPanY) * eased,
+            };
+            applyWorldTransform();
+            refreshMinimap();
+            render();
+            if (progress < 1) {
+                animationFrameRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                animationFrameRef.current = null;
+            }
+        };
+        animationFrameRef.current = requestAnimationFrame(animate);
+    }, [
+        maxZoom,
+        minZoom,
+        applyWorldTransform,
+        refreshMinimap,
+        render,
+        animationFrameRef,
+        containerRef,
+        panRef,
+        zoomRef,
+    ]);
+    const getContainerRect = useCallback(() => {
+        return containerRef.current?.getBoundingClientRect() ?? null;
+    }, [containerRef]);
+    const getItemBounds = useCallback(() => Array.from(itemRegistryRef.current.values(), (entry) => ({
+        x: entry.x,
+        y: entry.y,
+        width: entry.width,
+        height: entry.height,
+    })), [itemRegistryRef]);
+    useEffect(() => {
+        if (!pixiReady)
+            return;
+        onHandleReadyRef.current?.({
+            smoothPanToWorld,
+            smoothPanZoomToWorld,
+            getContainerRect,
+            getItemBounds,
+        });
+    }, [
+        pixiReady,
+        smoothPanToWorld,
+        smoothPanZoomToWorld,
+        getContainerRect,
+        getItemBounds,
+        onHandleReadyRef,
+    ]);
+    return { handleZoomIn, handleZoomOut, handleZoomReset, handleMinimapPan };
+};
+
+export { useCanvasNavigation };
+//# sourceMappingURL=useCanvasNavigation.js.map

package/dist/esm/Canvas/useCanvasNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasNavigation.js","sources":["../../../Canvas/useCanvasNavigation.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCallback, useEffect, type RefObject } from 'react';\nimport { easeInOutCubic } from './canvasEasing';\nimport type { CanvasHandle } from './CanvasHandle';\nimport type { CanvasItemRegistryEntry } from './CanvasItemRegistryEntry';\nimport type { MinimapItem } from './CanvasMinimap';\n\n/** The camera state and operations {@link useCanvasNavigation} drives. */\nexport interface CanvasNavigationOptions {\n    containerRef: RefObject<HTMLDivElement | null>;\n    animationFrameRef: RefObject<number | null>;\n    panRef: RefObject<{ x: number; y: number }>;\n    zoomRef: RefObject<number>;\n    itemRegistryRef: RefObject<Map<string, CanvasItemRegistryEntry>>;\n    minZoom: number;\n    maxZoom: number;\n    pixiReady: boolean;\n    onHandleReadyRef: RefObject<((handle: CanvasHandle) => void) | undefined>;\n    applyWorldTransform: () => void;\n    refreshMinimap: () => void;\n    render: () => void;\n}\n\n/**\n * The zoom controls, minimap panning, animated camera moves, and the imperative handle.\n * @param options The container, camera state and operations.\n * @returns The handlers for the integrated controls and minimap.\n */\nexport const useCanvasNavigation = ({\n    containerRef,\n    animationFrameRef,\n    panRef,\n    zoomRef,\n    itemRegistryRef,\n    minZoom,\n    maxZoom,\n    pixiReady,\n    onHandleReadyRef,\n    applyWorldTransform,\n    refreshMinimap,\n    render,\n}: CanvasNavigationOptions) => {\n    // Controls handlers\n    const handleZoomIn = useCallback(() => {\n        const container = containerRef.current;\n        if (!container) return;\n        const cx = container.clientWidth / 2;\n        const cy = container.clientHeight / 2;\n        const factor = 1.2;\n        const newZoom = Math.min(maxZoom, zoomRef.current * factor);\n        const worldX = (cx - panRef.current.x) / zoomRef.current;\n        const worldY = (cy - panRef.current.y) / zoomRef.current;\n        panRef.current = { x: cx - worldX * newZoom, y: cy - worldY * newZoom };\n        zoomRef.current = newZoom;\n        applyWorldTransform();\n        refreshMinimap();\n        render();\n    }, [\n        maxZoom,\n        applyWorldTransform,\n        refreshMinimap,\n        render,\n        containerRef,\n        panRef,\n        zoomRef,\n    ]);\n\n    const handleZoomOut = useCallback(() => {\n        const container = containerRef.current;\n        if (!container) return;\n        const cx = container.clientWidth / 2;\n        const cy = container.clientHeight / 2;\n        const factor = 1.2;\n        const newZoom = Math.max(minZoom, zoomRef.current / factor);\n        const worldX = (cx - panRef.current.x) / zoomRef.current;\n        const worldY = (cy - panRef.current.y) / zoomRef.current;\n        panRef.current = { x: cx - worldX * newZoom, y: cy - worldY * newZoom };\n        zoomRef.current = newZoom;\n        applyWorldTransform();\n        refreshMinimap();\n        render();\n    }, [\n        minZoom,\n        applyWorldTransform,\n        refreshMinimap,\n        render,\n        containerRef,\n        panRef,\n        zoomRef,\n    ]);\n\n    const handleZoomReset = useCallback(() => {\n        zoomRef.current = 1;\n        applyWorldTransform();\n        refreshMinimap();\n        render();\n    }, [applyWorldTransform, refreshMinimap, render, zoomRef]);\n\n    const handleMinimapPan = useCallback(\n        (pan: { x: number; y: number }) => {\n            panRef.current = pan;\n            applyWorldTransform();\n            refreshMinimap();\n            render();\n        },\n        [applyWorldTransform, refreshMinimap, render, panRef],\n    );\n\n    const smoothPanToWorld = useCallback(\n        (worldX: number, worldY: number, durationMs = 600) => {\n            const container = containerRef.current;\n            if (!container) return;\n\n            if (animationFrameRef.current !== null) {\n                cancelAnimationFrame(animationFrameRef.current);\n                animationFrameRef.current = null;\n            }\n\n            const viewportWidth = container.clientWidth;\n            const viewportHeight = container.clientHeight;\n            const targetPanX = viewportWidth / 2 - worldX * zoomRef.current;\n            const targetPanY = viewportHeight / 2 - worldY * zoomRef.current;\n            const startPanX = panRef.current.x;\n            const startPanY = panRef.current.y;\n            const startTime = performance.now();\n\n            const animate = (currentTime: number) => {\n                const elapsed = currentTime - startTime;\n                const progress = Math.min(elapsed / durationMs, 1);\n                const eased = easeInOutCubic(progress);\n                panRef.current = {\n                    x: startPanX + (targetPanX - startPanX) * eased,\n                    y: startPanY + (targetPanY - startPanY) * eased,\n                };\n                applyWorldTransform();\n                refreshMinimap();\n                render();\n                if (progress < 1) {\n                    animationFrameRef.current = requestAnimationFrame(animate);\n                } else {\n                    animationFrameRef.current = null;\n                }\n            };\n\n            animationFrameRef.current = requestAnimationFrame(animate);\n        },\n        [\n            applyWorldTransform,\n            refreshMinimap,\n            render,\n            animationFrameRef,\n            containerRef,\n            panRef,\n            zoomRef,\n        ],\n    );\n\n    const smoothPanZoomToWorld = useCallback(\n        (worldX: number, worldY: number, targetZoom = 1, durationMs = 600) => {\n            const container = containerRef.current;\n            if (!container) return;\n\n            if (animationFrameRef.current !== null) {\n                cancelAnimationFrame(animationFrameRef.current);\n                animationFrameRef.current = null;\n            }\n\n            const viewportWidth = container.clientWidth;\n            const viewportHeight = container.clientHeight;\n            const startZoom = zoomRef.current;\n            const endZoom = Math.min(maxZoom, Math.max(minZoom, targetZoom));\n            const startPanX = panRef.current.x;\n            const startPanY = panRef.current.y;\n            // Final pan that centers the world point at the target zoom.\n            const endPanX = viewportWidth / 2 - worldX * endZoom;\n            const endPanY = viewportHeight / 2 - worldY * endZoom;\n            const startTime = performance.now();\n\n            const animate = (currentTime: number) => {\n                const elapsed = currentTime - startTime;\n                const progress = Math.min(elapsed / durationMs, 1);\n                const eased = easeInOutCubic(progress);\n                zoomRef.current = startZoom + (endZoom - startZoom) * eased;\n                panRef.current = {\n                    x: startPanX + (endPanX - startPanX) * eased,\n                    y: startPanY + (endPanY - startPanY) * eased,\n                };\n                applyWorldTransform();\n                refreshMinimap();\n                render();\n                if (progress < 1) {\n                    animationFrameRef.current = requestAnimationFrame(animate);\n                } else {\n                    animationFrameRef.current = null;\n                }\n            };\n\n            animationFrameRef.current = requestAnimationFrame(animate);\n        },\n        [\n            maxZoom,\n            minZoom,\n            applyWorldTransform,\n            refreshMinimap,\n            render,\n            animationFrameRef,\n            containerRef,\n            panRef,\n            zoomRef,\n        ],\n    );\n\n    const getContainerRect = useCallback((): DOMRect | null => {\n        return containerRef.current?.getBoundingClientRect() ?? null;\n    }, [containerRef]);\n\n    // Measured, not estimated: the registry holds what each CanvasItem's ResizeObserver last reported, so a\n    // fit-to-content computed from it includes everything an item really renders (specifications under the\n    // rows included), unlike the size estimates the minimap falls back to before anything has mounted.\n    const getItemBounds = useCallback(\n        (): MinimapItem[] =>\n            Array.from(itemRegistryRef.current.values(), (entry) => ({\n                x: entry.x,\n                y: entry.y,\n                width: entry.width,\n                height: entry.height,\n            })),\n        [itemRegistryRef],\n    );\n\n    // Expose imperative handle once the canvas is set up\n    useEffect(() => {\n        if (!pixiReady) return;\n        onHandleReadyRef.current?.({\n            smoothPanToWorld,\n            smoothPanZoomToWorld,\n            getContainerRect,\n            getItemBounds,\n        });\n    }, [\n        pixiReady,\n        smoothPanToWorld,\n        smoothPanZoomToWorld,\n        getContainerRect,\n        getItemBounds,\n        onHandleReadyRef,\n    ]);\n\n    return { handleZoomIn, handleZoomOut, handleZoomReset, handleMinimapPan };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Canvas/useCanvasPointerGestures.d.ts

@@ -0,0 +1,34 @@
+import { type PointerEvent, type RefObject } from 'react';
+import { type PointerPosition } from './pinchGesture.js';
+/** The camera state and operations {@link useCanvasPointerGestures} drives. */
+export interface CanvasPointerGesturesOptions {
+    containerRef: RefObject<HTMLDivElement | null>;
+    animationFrameRef: RefObject<number | null>;
+    panRef: RefObject<{
+        x: number;
+        y: number;
+    }>;
+    zoomRef: RefObject<number>;
+    /** Touch pointers currently down on the canvas, in the order they landed. */
+    touchPointersRef: RefObject<Map<number, PointerPosition>>;
+    minZoom: number;
+    maxZoom: number;
+    readOnly: boolean;
+    backgroundDragPans: boolean;
+    applyWorldTransform: () => void;
+    refreshMinimap: () => void;
+    render: () => void;
+    noteGestureActivity: () => void;
+    scheduleTransformApply: () => void;
+}
+/**
+ * Background drag-pan, middle-button pan, one-finger pan with momentum, and two-finger pinch.
+ * @param options The container, camera state and operations.
+ * @returns The pointer handlers for the canvas surface.
+ */
+export declare const useCanvasPointerGestures: ({ containerRef, animationFrameRef, panRef, zoomRef, touchPointersRef, minZoom, maxZoom, readOnly, backgroundDragPans, applyWorldTransform, refreshMinimap, render, noteGestureActivity, scheduleTransformApply, }: CanvasPointerGesturesOptions) => {
+    handlePointerDown: (e: PointerEvent<HTMLDivElement>) => void;
+    handlePointerMove: (e: PointerEvent<HTMLDivElement>) => void;
+    handlePointerUp: (e: PointerEvent<HTMLDivElement>) => void;
+};
+//# sourceMappingURL=useCanvasPointerGestures.d.ts.map

package/dist/esm/Canvas/useCanvasPointerGestures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasPointerGestures.d.ts","sourceRoot":"","sources":["../../../Canvas/useCanvasPointerGestures.ts"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAa/E,OAAO,EAEH,KAAK,eAAe,EAGvB,MAAM,mBAAgB,CAAC;AAExB,+EAA+E;AAC/E,MAAM,WAAW,4BAA4B;IACzC,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,iBAAiB,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5C,MAAM,EAAE,SAAS,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5C,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC3B,6EAA6E;IAC7E,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACtC;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,sNAelC,4BAA4B;2BAoHnB,YAAY,CAAC,cAAc,CAAC;2BAoD5B,YAAY,CAAC,cAAc,CAAC;yBA2C5B,YAAY,CAAC,cAAc,CAAC;CA4BvC,CAAC"}

package/dist/esm/Canvas/useCanvasPointerGestures.js

@@ -0,0 +1,178 @@
+import { useRef, useCallback } from 'react';
+import { MOMENTUM_MIN_VELOCITY, MOMENTUM_SAMPLE_WINDOW_MS } from './canvasGestureTuning.js';
+import { isBackgroundPointerTarget } from './isBackgroundPointerTarget.js';
+import { velocityFromSamples, trimSamples, decayVelocity } from './panMomentum.js';
+import { pinchSnapshotOf, pinchChangeBetween } from './pinchGesture.js';
+
+const useCanvasPointerGestures = ({ containerRef, animationFrameRef, panRef, zoomRef, touchPointersRef, minZoom, maxZoom, readOnly, backgroundDragPans, applyWorldTransform, refreshMinimap, render, noteGestureActivity, scheduleTransformApply, }) => {
+    const isPanningRef = useRef(false);
+    const lastPointerRef = useRef({ x: 0, y: 0 });
+    const setPanCursor = useCallback((panning) => {
+        if (containerRef.current)
+            containerRef.current.style.cursor = panning ? 'grabbing' : 'default';
+    }, [containerRef]);
+    const pinchRef = useRef(null);
+    const touchPanSamplesRef = useRef([]);
+    const applyPinch = useCallback(() => {
+        const container = containerRef.current;
+        const snapshot = pinchSnapshotOf(touchPointersRef.current.values());
+        if (!container || !snapshot)
+            return;
+        const previous = pinchRef.current;
+        pinchRef.current = snapshot;
+        if (!previous)
+            return;
+        const change = pinchChangeBetween(previous, snapshot);
+        const rect = container.getBoundingClientRect();
+        const focusX = snapshot.center.x - rect.left;
+        const focusY = snapshot.center.y - rect.top;
+        const newZoom = Math.max(minZoom, Math.min(maxZoom, zoomRef.current * change.scale));
+        const worldX = (focusX - change.panX - panRef.current.x) / zoomRef.current;
+        const worldY = (focusY - change.panY - panRef.current.y) / zoomRef.current;
+        panRef.current = { x: focusX - worldX * newZoom, y: focusY - worldY * newZoom };
+        zoomRef.current = newZoom;
+        noteGestureActivity();
+        scheduleTransformApply();
+    }, [
+        minZoom,
+        maxZoom,
+        noteGestureActivity,
+        scheduleTransformApply,
+        containerRef,
+        panRef,
+        touchPointersRef,
+        zoomRef,
+    ]);
+    const startTouchMomentum = useCallback(() => {
+        const initialVelocity = velocityFromSamples(touchPanSamplesRef.current, MOMENTUM_MIN_VELOCITY);
+        if (!initialVelocity)
+            return;
+        if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        let velocity = initialVelocity;
+        let lastFrameTime = performance.now();
+        const animate = (currentTime) => {
+            const frameElapsedMs = currentTime - lastFrameTime;
+            lastFrameTime = currentTime;
+            panRef.current = {
+                x: panRef.current.x + velocity.x * frameElapsedMs,
+                y: panRef.current.y + velocity.y * frameElapsedMs,
+            };
+            velocity = decayVelocity(velocity, frameElapsedMs);
+            applyWorldTransform();
+            refreshMinimap();
+            render();
+            noteGestureActivity();
+            if (Math.hypot(velocity.x, velocity.y) > MOMENTUM_MIN_VELOCITY) {
+                animationFrameRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                animationFrameRef.current = null;
+            }
+        };
+        animationFrameRef.current = requestAnimationFrame(animate);
+    }, [
+        applyWorldTransform,
+        refreshMinimap,
+        render,
+        noteGestureActivity,
+        animationFrameRef,
+        panRef,
+    ]);
+    const handlePointerDown = useCallback((e) => {
+        if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        if (e.pointerType === 'touch') {
+            touchPointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+            if (touchPointersRef.current.size > 1) {
+                isPanningRef.current = false;
+                setPanCursor(false);
+                pinchRef.current = pinchSnapshotOf(touchPointersRef.current.values());
+                return;
+            }
+        }
+        const isBackground = isBackgroundPointerTarget(e.pointerType, readOnly, e.target, containerRef.current);
+        const mayDragPan = backgroundDragPans || e.pointerType === 'touch';
+        if (e.button === 1 || (e.button === 0 && isBackground && mayDragPan)) {
+            if (e.button === 1)
+                e.preventDefault();
+            isPanningRef.current = true;
+            setPanCursor(true);
+            lastPointerRef.current = { x: e.clientX, y: e.clientY };
+            if (e.pointerType === 'touch') {
+                touchPanSamplesRef.current = [
+                    { x: e.clientX, y: e.clientY, time: performance.now() },
+                ];
+            }
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+    }, [
+        readOnly,
+        backgroundDragPans,
+        setPanCursor,
+        animationFrameRef,
+        containerRef,
+        touchPointersRef,
+    ]);
+    const handlePointerMove = useCallback((e) => {
+        if (e.pointerType === 'touch' && touchPointersRef.current.has(e.pointerId)) {
+            touchPointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+            if (touchPointersRef.current.size > 1) {
+                applyPinch();
+                return;
+            }
+        }
+        if (!isPanningRef.current)
+            return;
+        const deltaX = e.clientX - lastPointerRef.current.x;
+        const deltaY = e.clientY - lastPointerRef.current.y;
+        lastPointerRef.current = { x: e.clientX, y: e.clientY };
+        panRef.current = {
+            x: panRef.current.x + deltaX,
+            y: panRef.current.y + deltaY,
+        };
+        if (e.pointerType === 'touch') {
+            const samples = [
+                ...touchPanSamplesRef.current,
+                { x: e.clientX, y: e.clientY, time: performance.now() },
+            ];
+            touchPanSamplesRef.current = trimSamples(samples, MOMENTUM_SAMPLE_WINDOW_MS);
+        }
+        noteGestureActivity();
+        scheduleTransformApply();
+    }, [
+        applyPinch,
+        noteGestureActivity,
+        scheduleTransformApply,
+        panRef,
+        touchPointersRef,
+    ]);
+    const handlePointerUp = useCallback((e) => {
+        if (touchPointersRef.current.delete(e.pointerId)) {
+            pinchRef.current = pinchSnapshotOf(touchPointersRef.current.values());
+            const [remaining] = [...touchPointersRef.current.values()];
+            if (remaining) {
+                isPanningRef.current = true;
+                setPanCursor(true);
+                lastPointerRef.current = { x: remaining.x, y: remaining.y };
+                touchPanSamplesRef.current = [
+                    { x: remaining.x, y: remaining.y, time: performance.now() },
+                ];
+                return;
+            }
+        }
+        const wasPanningTouch = e.pointerType === 'touch' && isPanningRef.current;
+        isPanningRef.current = false;
+        setPanCursor(false);
+        if (wasPanningTouch)
+            startTouchMomentum();
+    }, [startTouchMomentum, setPanCursor, touchPointersRef]);
+    return { handlePointerDown, handlePointerMove, handlePointerUp };
+};
+
+export { useCanvasPointerGestures };
+//# sourceMappingURL=useCanvasPointerGestures.js.map

package/dist/esm/Canvas/useCanvasPointerGestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasPointerGestures.js","sources":["../../../Canvas/useCanvasPointerGestures.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCallback, useRef, type PointerEvent, type RefObject } from 'react';\nimport {\n    MOMENTUM_FRICTION,\n    MOMENTUM_MIN_VELOCITY,\n    MOMENTUM_SAMPLE_WINDOW_MS,\n} from './canvasGestureTuning';\nimport { isBackgroundPointerTarget } from './isBackgroundPointerTarget';\nimport {\n    type PanSample,\n    decayVelocity,\n    trimSamples,\n    velocityFromSamples,\n} from './panMomentum';\nimport {\n    type PinchSnapshot,\n    type PointerPosition,\n    pinchChangeBetween,\n    pinchSnapshotOf,\n} from './pinchGesture';\n\n/** The camera state and operations {@link useCanvasPointerGestures} drives. */\nexport interface CanvasPointerGesturesOptions {\n    containerRef: RefObject<HTMLDivElement | null>;\n    animationFrameRef: RefObject<number | null>;\n    panRef: RefObject<{ x: number; y: number }>;\n    zoomRef: RefObject<number>;\n    /** Touch pointers currently down on the canvas, in the order they landed. */\n    touchPointersRef: RefObject<Map<number, PointerPosition>>;\n    minZoom: number;\n    maxZoom: number;\n    readOnly: boolean;\n    backgroundDragPans: boolean;\n    applyWorldTransform: () => void;\n    refreshMinimap: () => void;\n    render: () => void;\n    noteGestureActivity: () => void;\n    scheduleTransformApply: () => void;\n}\n\n/**\n * Background drag-pan, middle-button pan, one-finger pan with momentum, and two-finger pinch.\n * @param options The container, camera state and operations.\n * @returns The pointer handlers for the canvas surface.\n */\nexport const useCanvasPointerGestures = ({\n    containerRef,\n    animationFrameRef,\n    panRef,\n    zoomRef,\n    touchPointersRef,\n    minZoom,\n    maxZoom,\n    readOnly,\n    backgroundDragPans,\n    applyWorldTransform,\n    refreshMinimap,\n    render,\n    noteGestureActivity,\n    scheduleTransformApply,\n}: CanvasPointerGesturesOptions) => {\n    const isPanningRef = useRef(false);\n    const lastPointerRef = useRef({ x: 0, y: 0 });\n\n    // Direct DOM write, not React state — an idle background should not look grabbable until a drag\n    // starts. Swapping to 'grabbing' for the life of a drag-pan is exactly the kind of per-gesture\n    // churn this file\n    // already avoids re-rendering for elsewhere (see the transform writes below).\n    const setPanCursor = useCallback(\n        (panning: boolean) => {\n            if (containerRef.current)\n                containerRef.current.style.cursor = panning ? 'grabbing' : 'default';\n        },\n        [containerRef],\n    );\n\n    const pinchRef = useRef<PinchSnapshot | null>(null);\n\n    // Recent positions of the single finger currently panning, newest last, trimmed to\n    // MOMENTUM_SAMPLE_WINDOW_MS — the trailing window startTouchMomentum reads the release velocity from.\n    const touchPanSamplesRef = useRef<PanSample[]>([]);\n\n    // Touch: two fingers pan and zoom together, anywhere on the surface — the trackpad's\n    // wheel/ctrl+wheel equivalent for a tablet. The world point under the pinch midpoint stays put\n    // while the midpoint itself drags the board, so zooming and panning feel like one gesture.\n    const applyPinch = useCallback(() => {\n        const container = containerRef.current;\n        const snapshot = pinchSnapshotOf(touchPointersRef.current.values());\n        if (!container || !snapshot) return;\n\n        const previous = pinchRef.current;\n        pinchRef.current = snapshot;\n        // The first move of a gesture only establishes the baseline — there is nothing to move yet.\n        if (!previous) return;\n\n        const change = pinchChangeBetween(previous, snapshot);\n        const rect = container.getBoundingClientRect();\n        const focusX = snapshot.center.x - rect.left;\n        const focusY = snapshot.center.y - rect.top;\n        const newZoom = Math.max(\n            minZoom,\n            Math.min(maxZoom, zoomRef.current * change.scale),\n        );\n        // The world point that was under the midpoint BEFORE this step is the one being held, so the\n        // midpoint's own movement is what pans — exactly as zoom-towards-cursor does for the wheel.\n        const worldX = (focusX - change.panX - panRef.current.x) / zoomRef.current;\n        const worldY = (focusY - change.panY - panRef.current.y) / zoomRef.current;\n        panRef.current = { x: focusX - worldX * newZoom, y: focusY - worldY * newZoom };\n        zoomRef.current = newZoom;\n\n        noteGestureActivity();\n        scheduleTransformApply();\n    }, [\n        minZoom,\n        maxZoom,\n        noteGestureActivity,\n        scheduleTransformApply,\n        containerRef,\n        panRef,\n        touchPointersRef,\n        zoomRef,\n    ]);\n\n    // Coasts the board after a touch pan release, decaying the release velocity to a stop — the\n    // manual equivalent of the momentum a trackpad's own wheel-event stream gives panning for free.\n    // Shares animationFrameRef with smoothPanToWorld/smoothPanZoomToWorld so only one of the three\n    // ever drives the transform at once; each cancels whichever of the others was still running.\n    const startTouchMomentum = useCallback(() => {\n        const initialVelocity = velocityFromSamples(\n            touchPanSamplesRef.current,\n            MOMENTUM_MIN_VELOCITY,\n        );\n        if (!initialVelocity) return;\n\n        if (animationFrameRef.current !== null) {\n            cancelAnimationFrame(animationFrameRef.current);\n            animationFrameRef.current = null;\n        }\n\n        let velocity = initialVelocity;\n        let lastFrameTime = performance.now();\n\n        const animate = (currentTime: number) => {\n            const frameElapsedMs = currentTime - lastFrameTime;\n            lastFrameTime = currentTime;\n\n            panRef.current = {\n                x: panRef.current.x + velocity.x * frameElapsedMs,\n                y: panRef.current.y + velocity.y * frameElapsedMs,\n            };\n            velocity = decayVelocity(velocity, frameElapsedMs, MOMENTUM_FRICTION);\n\n            applyWorldTransform();\n            refreshMinimap();\n            render();\n            noteGestureActivity();\n\n            if (Math.hypot(velocity.x, velocity.y) > MOMENTUM_MIN_VELOCITY) {\n                animationFrameRef.current = requestAnimationFrame(animate);\n            } else {\n                animationFrameRef.current = null;\n            }\n        };\n\n        animationFrameRef.current = requestAnimationFrame(animate);\n    }, [\n        applyWorldTransform,\n        refreshMinimap,\n        render,\n        noteGestureActivity,\n        animationFrameRef,\n        panRef,\n    ]);\n\n    // Pointer: pan via middle mouse, left-click on empty background, or a single finger on it\n    const handlePointerDown = useCallback(\n        (e: PointerEvent<HTMLDivElement>) => {\n            // A fresh gesture always wins over a still-coasting one from the last touch pan.\n            if (animationFrameRef.current !== null) {\n                cancelAnimationFrame(animationFrameRef.current);\n                animationFrameRef.current = null;\n            }\n\n            if (e.pointerType === 'touch') {\n                touchPointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });\n                if (touchPointersRef.current.size > 1) {\n                    // A second finger turns whatever was happening into a pinch: end the one-finger drag\n                    // so the two paths never both move the board in the same frame.\n                    isPanningRef.current = false;\n                    setPanCursor(false);\n                    pinchRef.current = pinchSnapshotOf(touchPointersRef.current.values());\n                    return;\n                }\n            }\n\n            const isBackground = isBackgroundPointerTarget(\n                e.pointerType,\n                readOnly,\n                e.target,\n                containerRef.current,\n            );\n            // A host that claims the background drag for itself only gives up the mouse/pen gesture: touch\n            // has no middle button and no wheel, so one finger must keep panning or the board is stuck.\n            const mayDragPan = backgroundDragPans || e.pointerType === 'touch';\n            if (e.button === 1 || (e.button === 0 && isBackground && mayDragPan)) {\n                if (e.button === 1) e.preventDefault();\n                isPanningRef.current = true;\n                setPanCursor(true);\n                lastPointerRef.current = { x: e.clientX, y: e.clientY };\n                if (e.pointerType === 'touch') {\n                    touchPanSamplesRef.current = [\n                        { x: e.clientX, y: e.clientY, time: performance.now() },\n                    ];\n                }\n                e.currentTarget.setPointerCapture(e.pointerId);\n            }\n        },\n        [\n            readOnly,\n            backgroundDragPans,\n            setPanCursor,\n            animationFrameRef,\n            containerRef,\n            touchPointersRef,\n        ],\n    );\n\n    const handlePointerMove = useCallback(\n        (e: PointerEvent<HTMLDivElement>) => {\n            if (e.pointerType === 'touch' && touchPointersRef.current.has(e.pointerId)) {\n                touchPointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });\n                if (touchPointersRef.current.size > 1) {\n                    applyPinch();\n                    return;\n                }\n            }\n            if (!isPanningRef.current) return;\n            const deltaX = e.clientX - lastPointerRef.current.x;\n            const deltaY = e.clientY - lastPointerRef.current.y;\n            lastPointerRef.current = { x: e.clientX, y: e.clientY };\n            panRef.current = {\n                x: panRef.current.x + deltaX,\n                y: panRef.current.y + deltaY,\n            };\n\n            if (e.pointerType === 'touch') {\n                const samples = [\n                    ...touchPanSamplesRef.current,\n                    { x: e.clientX, y: e.clientY, time: performance.now() },\n                ];\n                touchPanSamplesRef.current = trimSamples(\n                    samples,\n                    MOMENTUM_SAMPLE_WINDOW_MS,\n                );\n            }\n\n            // Same gesture path as wheel pan: coalesce onto one rAF and signal the gesture so\n            // virtualization holds still during a drag-pan too.\n            noteGestureActivity();\n            scheduleTransformApply();\n        },\n        [\n            applyPinch,\n            noteGestureActivity,\n            scheduleTransformApply,\n            panRef,\n            touchPointersRef,\n        ],\n    );\n\n    const handlePointerUp = useCallback(\n        (e: PointerEvent<HTMLDivElement>) => {\n            if (touchPointersRef.current.delete(e.pointerId)) {\n                // Re-baseline on the fingers that are left: keeping the old geometry would register the\n                // lifted finger's absence as a huge pinch/pan step on the next move.\n                pinchRef.current = pinchSnapshotOf(touchPointersRef.current.values());\n                const [remaining] = [...touchPointersRef.current.values()];\n                if (remaining) {\n                    // Lifting back down to one finger continues the same gesture as a plain drag-pan\n                    // rather than stopping dead until the user lifts and starts over.\n                    isPanningRef.current = true;\n                    setPanCursor(true);\n                    lastPointerRef.current = { x: remaining.x, y: remaining.y };\n                    touchPanSamplesRef.current = [\n                        { x: remaining.x, y: remaining.y, time: performance.now() },\n                    ];\n                    return;\n                }\n            }\n\n            const wasPanningTouch = e.pointerType === 'touch' && isPanningRef.current;\n            isPanningRef.current = false;\n            setPanCursor(false);\n            if (wasPanningTouch) startTouchMomentum();\n        },\n        [startTouchMomentum, setPanCursor, touchPointersRef],\n    );\n\n    return { handlePointerDown, handlePointerMove, handlePointerUp };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Canvas/useCanvasWheelZoom.d.ts

@@ -0,0 +1,23 @@
+import { type RefObject } from 'react';
+import type { PointerPosition } from './pinchGesture.js';
+/** The camera state and operations {@link useCanvasWheelZoom} drives. */
+export interface CanvasWheelZoomOptions {
+    containerRef: RefObject<HTMLDivElement | null>;
+    animationFrameRef: RefObject<number | null>;
+    panRef: RefObject<{
+        x: number;
+        y: number;
+    }>;
+    /** Touch pointers currently down; a touch pinch owns zooming while any are. */
+    touchPointersRef: RefObject<Map<number, PointerPosition>>;
+    zoomTowards: (focusX: number, focusY: number, factor: number) => void;
+    noteGestureActivity: () => void;
+    scheduleTransformApply: () => void;
+}
+/**
+ * Wheel pan, Ctrl/Cmd+wheel zoom, and Safari's trackpad gesture events, on the canvas and for
+ * floating content over it, without letting the browser zoom the page.
+ * @param options The container, camera state and operations.
+ */
+export declare const useCanvasWheelZoom: ({ containerRef, animationFrameRef, panRef, touchPointersRef, zoomTowards, noteGestureActivity, scheduleTransformApply, }: CanvasWheelZoomOptions) => void;
+//# sourceMappingURL=useCanvasWheelZoom.d.ts.map

package/dist/esm/Canvas/useCanvasWheelZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasWheelZoom.d.ts","sourceRoot":"","sources":["../../../Canvas/useCanvasWheelZoom.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAgB,CAAC;AAGtD,yEAAyE;AACzE,MAAM,WAAW,sBAAsB;IACnC,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,iBAAiB,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5C,MAAM,EAAE,SAAS,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5C,+EAA+E;IAC/E,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAC1D,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACtC;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,6HAQ5B,sBAAsB,SA8LxB,CAAC"}

package/dist/esm/Canvas/useCanvasWheelZoom.js

@@ -0,0 +1,146 @@
+import { useCallback, useEffect } from 'react';
+import { ZOOM_INTENSITY } from './canvasGestureTuning.js';
+import { isWithinScrollableContent } from './isWithinScrollableContent.js';
+
+const useCanvasWheelZoom = ({ containerRef, animationFrameRef, panRef, touchPointersRef, zoomTowards, noteGestureActivity, scheduleTransformApply, }) => {
+    const handleWheel = useCallback((e) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (!(e.ctrlKey || e.metaKey) &&
+            isWithinScrollableContent(e.target, container))
+            return;
+        e.preventDefault();
+        if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        const rect = container.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        if (e.ctrlKey || e.metaKey) {
+            zoomTowards(mouseX, mouseY, Math.exp(-e.deltaY * ZOOM_INTENSITY));
+        }
+        else {
+            panRef.current = {
+                x: panRef.current.x - e.deltaX,
+                y: panRef.current.y - e.deltaY,
+            };
+            noteGestureActivity();
+            scheduleTransformApply();
+        }
+    }, [
+        zoomTowards,
+        noteGestureActivity,
+        scheduleTransformApply,
+        animationFrameRef,
+        containerRef,
+        panRef,
+    ]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        return () => container.removeEventListener('wheel', handleWheel);
+    }, [handleWheel, containerRef]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        let lastScale = 1;
+        const handleGestureStart = (event) => {
+            event.preventDefault();
+            lastScale = event.scale || 1;
+        };
+        const handleGestureChange = (event) => {
+            event.preventDefault();
+            if (touchPointersRef.current.size > 0)
+                return;
+            const gesture = event;
+            if (!gesture.scale || !lastScale)
+                return;
+            const rect = container.getBoundingClientRect();
+            zoomTowards(gesture.clientX - rect.left, gesture.clientY - rect.top, gesture.scale / lastScale);
+            lastScale = gesture.scale;
+        };
+        const handleGestureEnd = (event) => event.preventDefault();
+        container.addEventListener('gesturestart', handleGestureStart, {
+            passive: false,
+        });
+        container.addEventListener('gesturechange', handleGestureChange, {
+            passive: false,
+        });
+        container.addEventListener('gestureend', handleGestureEnd, { passive: false });
+        return () => {
+            container.removeEventListener('gesturestart', handleGestureStart);
+            container.removeEventListener('gesturechange', handleGestureChange);
+            container.removeEventListener('gestureend', handleGestureEnd);
+        };
+    }, [zoomTowards, containerRef, touchPointersRef]);
+    useEffect(() => {
+        const isWithinCanvas = (x, y) => {
+            const rect = containerRef.current?.getBoundingClientRect();
+            return (!!rect &&
+                x >= rect.left &&
+                x <= rect.right &&
+                y >= rect.top &&
+                y <= rect.bottom);
+        };
+        const reachesContainerListeners = (event) => event.target instanceof Node &&
+            !!containerRef.current?.contains(event.target);
+        const handleWindowWheel = (event) => {
+            if ((event.ctrlKey || event.metaKey) &&
+                isWithinCanvas(event.clientX, event.clientY)) {
+                event.preventDefault();
+            }
+        };
+        let lastScale = 1;
+        const handleWindowGestureStart = (event) => {
+            const gesture = event;
+            if (!isWithinCanvas(gesture.clientX, gesture.clientY))
+                return;
+            event.preventDefault();
+            lastScale = gesture.scale || 1;
+        };
+        const handleWindowGestureChange = (event) => {
+            const gesture = event;
+            if (!isWithinCanvas(gesture.clientX, gesture.clientY))
+                return;
+            event.preventDefault();
+            if (reachesContainerListeners(event))
+                return;
+            if (touchPointersRef.current.size > 0)
+                return;
+            if (!gesture.scale || !lastScale)
+                return;
+            const rect = containerRef.current?.getBoundingClientRect();
+            if (!rect)
+                return;
+            zoomTowards(gesture.clientX - rect.left, gesture.clientY - rect.top, gesture.scale / lastScale);
+            lastScale = gesture.scale;
+        };
+        const handleWindowGestureEnd = (event) => {
+            const gesture = event;
+            if (isWithinCanvas(gesture.clientX, gesture.clientY))
+                event.preventDefault();
+        };
+        window.addEventListener('wheel', handleWindowWheel, { passive: false });
+        window.addEventListener('gesturestart', handleWindowGestureStart, {
+            passive: false,
+        });
+        window.addEventListener('gesturechange', handleWindowGestureChange, {
+            passive: false,
+        });
+        window.addEventListener('gestureend', handleWindowGestureEnd, { passive: false });
+        return () => {
+            window.removeEventListener('wheel', handleWindowWheel);
+            window.removeEventListener('gesturestart', handleWindowGestureStart);
+            window.removeEventListener('gesturechange', handleWindowGestureChange);
+            window.removeEventListener('gestureend', handleWindowGestureEnd);
+        };
+    }, [zoomTowards, containerRef, touchPointersRef]);
+};
+
+export { useCanvasWheelZoom };
+//# sourceMappingURL=useCanvasWheelZoom.js.map