@cratis/components 4.21.1 → 4.22.1

package/dist/esm/Canvas/Canvas.js

@@ -1,696 +1,103 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import * as PIXI from 'pixi.js';
+import { useRef } from 'react';
 import { CanvasControls } from './CanvasControls.js';
-import { canvasGesture } from './canvasGesture.js';
-import { canvasTransformActivity } from './canvasTransformActivity.js';
-import { isBackgroundPointerTarget } from './isBackgroundPointerTarget.js';
-import { isWithinScrollableContent } from './isWithinScrollableContent.js';
-import { velocityFromSamples, trimSamples, decayVelocity } from './panMomentum.js';
-import { pinchSnapshotOf, pinchChangeBetween } from './pinchGesture.js';
+import { CanvasItemRegistryContext } from './CanvasItemRegistryContext.js';
+import { useCanvasCamera } from './useCanvasCamera.js';
+import { useCanvasItemRegistry } from './useCanvasItemRegistry.js';
+import { useCanvasNavigation } from './useCanvasNavigation.js';
+import { useCanvasPointerGestures } from './useCanvasPointerGestures.js';
+import { useCanvasWheelZoom } from './useCanvasWheelZoom.js';
 import { useDragSelectionGuard } from './useDragSelectionGuard.js';
-import { applyZoomLayer, shouldUseCssZoom, isMultiTouchCapableDevice } from './zoomMechanism.js';
+import { useLatestRef } from './useLatestRef.js';
+import { usePixiApplication } from './usePixiApplication.js';
+import { usePixiItems } from './usePixiItems.js';
+import { shouldUseCssZoom, isMultiTouchCapableDevice } from './zoomMechanism.js';
 
-function easeInOutCubic(progress) {
-    return progress < 0.5
-        ? 4 * progress * progress * progress
-        : 1 - (-2 * progress + 2) ** 3 / 2;
-}
-const CanvasItemRegistryContext = React.createContext(null);
-const ZOOM_INTENSITY = 0.008;
-const GESTURE_SETTLE_MS = 150;
-const MOMENTUM_SAMPLE_WINDOW_MS = 100;
-const MOMENTUM_MIN_VELOCITY = 0.02;
 function Canvas({ children, items = [], renderItem, onItemPointerDown, onReady, onTransformChange, onHandleReady, initialZoom = 1, initialPan = { x: 0, y: 0 }, minZoom = 0.1, maxZoom = 5, showControls = true, showMinimap = false, minimapWorldWidth, minimapWorldHeight, minimapItems, controlsPlacement = 'bottom-left', className, style, onHelp, helpTitle, controlsLabels, controlsIcons, controlsFollowViewportInsets = true, controlsGlassSurface, disableControlsGlass = false, captureAttributes, readOnly = false, backgroundDragPans = true, }) {
     const containerRef = useRef(null);
     useDragSelectionGuard(containerRef);
-    const appRef = useRef(null);
-    const worldRef = useRef(null);
     const minimapRef = useRef(null);
     const overlayRef = useRef(null);
     const zoomLayerRef = useRef(null);
-    const spritesRef = useRef(new Map());
     const animationFrameRef = useRef(null);
-    const [pixiReady, setPixiReady] = useState(false);
     const panRef = useRef({ x: initialPan.x, y: initialPan.y });
     const zoomRef = useRef(initialZoom);
     const initialTransformRef = useRef({ pan: initialPan, zoom: initialZoom });
-    const gestureActiveRef = useRef(false);
-    const gestureSettleTimerRef = useRef(undefined);
-    const transformFramePendingRef = useRef(false);
-    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';
-    }, []);
     const touchPointersRef = useRef(new Map());
-    const pinchRef = useRef(null);
-    const touchPanSamplesRef = useRef([]);
-    const onReadyRef = useRef(onReady);
-    const onItemPointerDownRef = useRef(onItemPointerDown);
-    const onTransformChangeRef = useRef(onTransformChange);
-    const onHandleReadyRef = useRef(onHandleReady);
-    const itemsRef = useRef(items);
-    useEffect(() => {
-        onReadyRef.current = onReady;
-    }, [onReady]);
-    useEffect(() => {
-        onItemPointerDownRef.current = onItemPointerDown;
-    }, [onItemPointerDown]);
-    useEffect(() => {
-        onTransformChangeRef.current = onTransformChange;
-    }, [onTransformChange]);
-    useEffect(() => {
-        onHandleReadyRef.current = onHandleReady;
-    }, [onHandleReady]);
-    useEffect(() => {
-        itemsRef.current = items;
-    }, [items]);
-    const itemRegistryRef = useRef(new Map());
-    const [itemRegistryVersion, setItemRegistryVersion] = useState(0);
-    const registrySnapshotRef = useRef(new Map());
-    const registryListenersRef = useRef(new Set());
-    const notifyRegistryChanged = useCallback(() => {
-        registrySnapshotRef.current = new Map(itemRegistryRef.current);
-        setItemRegistryVersion((version) => version + 1);
-        registryListenersRef.current.forEach((listener) => listener());
-    }, []);
-    const registerItem = useCallback((id, entry) => {
-        const existing = itemRegistryRef.current.get(id);
-        if (existing &&
-            existing.x === entry.x &&
-            existing.y === entry.y &&
-            existing.width === entry.width &&
-            existing.height === entry.height &&
-            existing.anonymous === entry.anonymous)
-            return;
-        itemRegistryRef.current.set(id, entry);
-        notifyRegistryChanged();
-    }, [notifyRegistryChanged]);
-    const unregisterItem = useCallback((id) => {
-        if (!itemRegistryRef.current.delete(id))
-            return;
-        notifyRegistryChanged();
-    }, [notifyRegistryChanged]);
-    const getRegistrySnapshot = useCallback(() => registrySnapshotRef.current, []);
-    const subscribeToRegistry = useCallback((listener) => {
-        registryListenersRef.current.add(listener);
-        return () => {
-            registryListenersRef.current.delete(listener);
-        };
-    }, []);
-    const registryContextValue = useMemo(() => ({
-        register: registerItem,
-        unregister: unregisterItem,
-        getSnapshot: getRegistrySnapshot,
-        subscribe: subscribeToRegistry,
-    }), [registerItem, unregisterItem, getRegistrySnapshot, subscribeToRegistry]);
-    const autoMinimapItems = useMemo(() => {
-        const result = [];
-        itemRegistryRef.current.forEach((entry) => {
-            result.push({
-                x: entry.x,
-                y: entry.y,
-                width: entry.width,
-                height: entry.height,
-            });
-        });
-        return result;
-    }, [itemRegistryVersion]);
+    const onReadyRef = useLatestRef(onReady);
+    const onItemPointerDownRef = useLatestRef(onItemPointerDown);
+    const onTransformChangeRef = useLatestRef(onTransformChange);
+    const onHandleReadyRef = useLatestRef(onHandleReady);
+    const { itemRegistryRef, registryContextValue, autoMinimapItems } = useCanvasItemRegistry();
     const effectiveMinimapItems = minimapItems ?? autoMinimapItems;
-    const refreshMinimap = useCallback(() => {
-        const app = appRef.current;
-        if (!app || !minimapRef.current)
-            return;
-        minimapRef.current.update(panRef.current, zoomRef.current, app.renderer.width, app.renderer.height);
-    }, []);
-    const applyWorldTransform = useCallback(() => {
-        const world = worldRef.current;
-        if (!world)
-            return;
-        world.position.set(panRef.current.x, panRef.current.y);
-        world.scale.set(zoomRef.current);
-        if (overlayRef.current) {
-            overlayRef.current.style.transform = `translate(${panRef.current.x}px, ${panRef.current.y}px)`;
-        }
-        if (zoomLayerRef.current) {
-            applyZoomLayer(zoomLayerRef.current, zoomRef.current, gestureActiveRef.current);
-        }
-        onTransformChangeRef.current?.(zoomRef.current, panRef.current);
-        canvasTransformActivity.notify();
-    }, []);
-    const render = useCallback(() => {
-        const app = appRef.current;
-        if (!app)
-            return;
-        if ((worldRef.current?.children.length ?? 0) === 0)
-            return;
-        PIXI.Ticker.system.update();
-        app.renderer.render(app.stage);
-    }, []);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container || appRef.current)
-            return;
-        let mounted = true;
-        (async () => {
-            const rect = container.getBoundingClientRect();
-            const width = rect.width > 0 ? rect.width : container.clientWidth || 800;
-            const height = rect.height > 0 ? rect.height : container.clientHeight || 600;
-            const app = new PIXI.Application();
-            await app.init({
-                backgroundAlpha: 0,
-                antialias: true,
-                autoDensity: true,
-                resolution: window.devicePixelRatio || 1,
-                width,
-                height,
-                autoStart: false,
-            });
-            if (!mounted || !containerRef.current) {
-                app.destroy(true, { children: true });
-                return;
-            }
-            appRef.current = app;
-            const world = new PIXI.Container();
-            world.position.set(panRef.current.x, panRef.current.y);
-            world.scale.set(zoomRef.current);
-            app.stage.addChild(world);
-            worldRef.current = world;
-            const canvas = app.canvas;
-            canvas.style.display = 'block';
-            canvas.style.touchAction = 'none';
-            containerRef.current.appendChild(canvas);
-            setPixiReady(true);
-            app.renderer.render(app.stage);
-            PIXI.Ticker.system.stop();
-            onReadyRef.current?.({ app, world });
-        })();
-        return () => {
-            mounted = false;
-            if (appRef.current) {
-                appRef.current.destroy(true, { children: true });
-                appRef.current = null;
-                worldRef.current = null;
-            }
-            spritesRef.current.clear();
-        };
-    }, []);
-    useEffect(() => {
-        const canvas = appRef.current?.canvas;
-        const attribute = captureAttributes?.layer;
-        if (!canvas || !attribute)
-            return;
-        canvas.setAttribute(attribute, 'true');
-        return () => canvas.removeAttribute(attribute);
-    }, [pixiReady, captureAttributes?.layer]);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const observer = new ResizeObserver(() => {
-            const app = appRef.current;
-            if (!app)
-                return;
-            app.renderer.resize(container.clientWidth, container.clientHeight);
-            render();
-        });
-        observer.observe(container);
-        return () => observer.disconnect();
-    }, [render]);
-    const scheduleTransformApply = useCallback(() => {
-        if (transformFramePendingRef.current)
-            return;
-        transformFramePendingRef.current = true;
-        requestAnimationFrame(() => {
-            transformFramePendingRef.current = false;
-            applyWorldTransform();
-            refreshMinimap();
-            render();
-        });
-    }, [applyWorldTransform, refreshMinimap, render]);
-    const noteGestureActivity = useCallback(() => {
-        gestureActiveRef.current = true;
-        canvasGesture.set(true);
-        clearTimeout(gestureSettleTimerRef.current);
-        gestureSettleTimerRef.current = setTimeout(() => {
-            gestureActiveRef.current = false;
-            applyWorldTransform();
-            canvasGesture.set(false);
-        }, GESTURE_SETTLE_MS);
-    }, [applyWorldTransform]);
-    useEffect(() => () => {
-        clearTimeout(gestureSettleTimerRef.current);
-        canvasGesture.set(false);
-    }, []);
-    const zoomTowards = useCallback((focusX, focusY, factor) => {
-        const newZoom = Math.max(minZoom, Math.min(maxZoom, zoomRef.current * factor));
-        const worldX = (focusX - panRef.current.x) / zoomRef.current;
-        const worldY = (focusY - panRef.current.y) / zoomRef.current;
-        panRef.current = {
-            x: focusX - worldX * newZoom,
-            y: focusY - worldY * newZoom,
-        };
-        zoomRef.current = newZoom;
-        noteGestureActivity();
-        scheduleTransformApply();
-    }, [minZoom, maxZoom, 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]);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        container.addEventListener('wheel', handleWheel, { passive: false });
-        return () => container.removeEventListener('wheel', handleWheel);
-    }, [handleWheel]);
-    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]);
-    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]);
-    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]);
-    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]);
-    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]);
-    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]);
-    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]);
-    useEffect(() => {
-        const world = worldRef.current;
-        if (!pixiReady || !world || !renderItem)
-            return;
-        const incoming = new Map(items.map((item) => [item.id, item]));
-        spritesRef.current.forEach((container, id) => {
-            if (!incoming.has(id)) {
-                world.removeChild(container);
-                container.destroy({ children: true });
-                spritesRef.current.delete(id);
-            }
-        });
-        items.forEach((item) => {
-            const existing = spritesRef.current.get(item.id);
-            if (existing) {
-                existing.position.set(item.x, item.y);
-                existing.removeAllListeners('pointerdown');
-                existing.on('pointerdown', (event) => {
-                    onItemPointerDownRef.current?.(item, event);
-                });
-            }
-            else {
-                const container = renderItem(item);
-                container.position.set(item.x, item.y);
-                container.eventMode = 'static';
-                container.on('pointerdown', (event) => {
-                    onItemPointerDownRef.current?.(item, event);
-                });
-                world.addChild(container);
-                spritesRef.current.set(item.id, container);
-            }
-        });
-        appRef.current?.renderer.render(appRef.current.stage);
-    }, [pixiReady, items, renderItem]);
-    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]);
-    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]);
-    const handleZoomReset = useCallback(() => {
-        zoomRef.current = 1;
-        applyWorldTransform();
-        refreshMinimap();
-        render();
-    }, [applyWorldTransform, refreshMinimap, render]);
-    const handleMinimapPan = useCallback((pan) => {
-        panRef.current = pan;
-        applyWorldTransform();
-        refreshMinimap();
-        render();
-    }, [applyWorldTransform, refreshMinimap, render]);
-    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]);
-    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]);
-    const getContainerRect = useCallback(() => {
-        return containerRef.current?.getBoundingClientRect() ?? null;
-    }, []);
-    const getItemBounds = useCallback(() => Array.from(itemRegistryRef.current.values(), (entry) => ({
-        x: entry.x,
-        y: entry.y,
-        width: entry.width,
-        height: entry.height,
-    })), []);
-    useEffect(() => {
-        if (!pixiReady)
-            return;
-        onHandleReadyRef.current?.({
-            smoothPanToWorld,
-            smoothPanZoomToWorld,
-            getContainerRect,
-            getItemBounds,
-        });
-    }, [
+    const { appRef, worldRef, spritesRef, pixiReady, render } = usePixiApplication({
+        containerRef,
+        panRef,
+        zoomRef,
+        onReadyRef,
+        captureLayer: captureAttributes?.layer,
+    });
+    const { applyWorldTransform, refreshMinimap, scheduleTransformApply, noteGestureActivity, zoomTowards, } = useCanvasCamera({
+        appRef,
+        worldRef,
+        minimapRef,
+        overlayRef,
+        zoomLayerRef,
+        panRef,
+        zoomRef,
+        onTransformChangeRef,
+        render,
+        minZoom,
+        maxZoom,
+    });
+    useCanvasWheelZoom({
+        containerRef,
+        animationFrameRef,
+        panRef,
+        touchPointersRef,
+        zoomTowards,
+        noteGestureActivity,
+        scheduleTransformApply,
+    });
+    const { handlePointerDown, handlePointerMove, handlePointerUp } = useCanvasPointerGestures({
+        containerRef,
+        animationFrameRef,
+        panRef,
+        zoomRef,
+        touchPointersRef,
+        minZoom,
+        maxZoom,
+        readOnly,
+        backgroundDragPans,
+        applyWorldTransform,
+        refreshMinimap,
+        render,
+        noteGestureActivity,
+        scheduleTransformApply,
+    });
+    usePixiItems({
+        pixiReady,
+        appRef,
+        worldRef,
+        spritesRef,
+        items,
+        renderItem,
+        onItemPointerDownRef,
+    });
+    const { handleZoomIn, handleZoomOut, handleZoomReset, handleMinimapPan } = useCanvasNavigation({
+        containerRef,
+        animationFrameRef,
+        panRef,
+        zoomRef,
+        itemRegistryRef,
+        minZoom,
+        maxZoom,
         pixiReady,
-        smoothPanToWorld,
-        smoothPanZoomToWorld,
-        getContainerRect,
-        getItemBounds,
-    ]);
+        onHandleReadyRef,
+        applyWorldTransform,
+        refreshMinimap,
+        render,
+    });
     return (jsxs("div", { ref: containerRef, className: `canvas-surface cratis:relative cratis:overflow-hidden${className ? ` ${className}` : ''}`, style: { cursor: 'default', ...style }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: [jsx(CanvasItemRegistryContext.Provider, { value: registryContextValue, children: jsx("div", { ref: overlayRef, ...(captureAttributes?.transformHost
                         ? { [captureAttributes.transformHost]: 'true' }
                         : {}), style: {