@ue-too/board-react-adapter 0.12.0 → 0.13.0

package/README.md

@@ -432,7 +432,7 @@ function CustomBoard() {
 
 ## API Reference
 
-For complete API documentation with detailed type information, see the [TypeDoc-generated documentation](../../docs/board-react-adapter).
+For complete API documentation with detailed type information, see the [TypeDoc-generated documentation](/board-react-adapter/).
 
 ## TypeScript Support
 
@@ -483,9 +483,9 @@ This adapter follows these principles:
 
 ## Related Packages
 
-- **[@ue-too/board](../board)**: The core infinite canvas library
-- **[@ue-too/math](../math)**: Vector operations for point calculations
-- **[@ue-too/animate](../animate)**: Animation system for canvas objects
+- **[@ue-too/board](/board/)**: The core infinite canvas library
+- **[@ue-too/math](/math/)**: Vector operations for point calculations
+- **[@ue-too/animate](/animate/)**: Animation system for canvas objects
 
 ## License
 

package/hooks/index.d.ts

@@ -12,3 +12,4 @@
  */
 export * from "./useAnimationFrame";
 export * from "./useBoardify";
+export * from "./useCanvasProxy";

package/hooks/useBoardify.d.ts

@@ -1,44 +1,6 @@
-import { Board as Boardify } from "@ue-too/board";
+import { Board as Boardify, KMTEventParser, OutputEvent, TouchEventParser } from "@ue-too/board";
 import { CameraMux, CameraState } from "@ue-too/board/camera";
 import { Point } from "@ue-too/math";
-/**
- * Hook to create and manage a Board instance.
- *
- * @remarks
- * This hook creates a stable Board instance that persists across re-renders.
- * The board is created once and stored in a ref, making it suitable for use
- * in React components without recreating the board on every render.
- *
- * **Important**: This hook creates an independent board instance. If you need
- * to share a board across multiple components, use {@link BoardProvider} and
- * {@link useBoard} instead.
- *
- * @param fullScreen - Whether the board should be in fullscreen mode (resizes with window)
- * @returns Object containing the board instance and a subscribe function
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { board, subscribe } = useBoardify(true);
- *
- *   useEffect(() => {
- *     // Subscribe to camera pan events
- *     const unsubscribe = subscribe(() => {
- *       console.log('Camera panned');
- *     });
- *     return unsubscribe;
- *   }, [subscribe]);
- *
- *   return <canvas ref={(ref) => ref && board.attach(ref)} />;
- * }
- * ```
- *
- * @category Hooks
- */
-export declare function useBoardify(fullScreen?: boolean): {
-    board: Boardify;
-    subscribe: (callback: () => void) => import("@ue-too/board").UnSubscribe;
-};
 /**
  * Hook to subscribe to a specific camera state property with automatic re-rendering.
  *
@@ -119,8 +81,12 @@ export declare function useBoardCameraState<K extends keyof CameraState>(state:
  * @category Hooks
  */
 export declare function useCameraInput(): {
+    panByViewPort: (delta: Point) => void;
+    panByWorld: (delta: Point) => void;
     panToWorld: (worldPosition: Point) => void;
     panToViewPort: (viewPortPosition: Point) => void;
+    zoomToAtViewPort: (zoomLevel: number, at: Point) => void;
+    zoomToAtWorld: (zoomLevel: number, at: Point) => void;
     zoomTo: (zoomLevel: number) => void;
     zoomBy: (zoomDelta: number) => void;
     rotateTo: (rotation: number) => void;
@@ -197,6 +163,31 @@ export declare function useAllBoardCameraState(): {
  * @see {@link CameraMux} from @ue-too/board for camera mux interface
  */
 export declare function useCustomCameraMux(cameraMux: CameraMux): void;
+/**
+ * The custom input handling logic is before everything else. To use this hook, you would need to handle the event from the canvas and pass down the result to the `processInputEvent` function.
+ * @returns Object containing the `processInputEvent` function
+ * @example
+ * ```typescript
+ * const { processInputEvent } = useCustomInputHandling();
+ *
+ * const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
+ *   // custom logic to determine the user input
+ *
+ *   // if the user input is valid, pass it to the `processInputEvent` function
+ *   // e.g. pass the pan event down the input handling system
+ *   processInputEvent({
+ *     type: "pan",
+ *     delta: {
+ *       x: 10,
+ *       y: 10,
+ *     },
+ *   });
+ * }
+ * ```
+ */
+export declare function useCustomInputHandling(): {
+    processInputEvent: (input: OutputEvent) => void;
+};
 /**
  * Provider component for sharing a Board instance across the component tree.
  *
@@ -287,3 +278,7 @@ export declare function useBoard(): Boardify;
  * @see {@link useBoard} for accessing the full board instance
  */
 export declare function useBoardCamera(): import("@ue-too/board").ObservableBoardCamera;
+export declare function useCanvasDimension(): import("@ue-too/board").CanvasDimensions;
+export declare function useCoordinateConversion(): (pointInWindow: Point) => Point;
+export declare function useCustomKMTEventParser(eventParser: KMTEventParser): void;
+export declare function useCustomTouchEventParser(eventParser: TouchEventParser): void;

package/hooks/useCanvasProxy.d.ts

@@ -0,0 +1,6 @@
+import { CanvasProxy } from "@ue-too/board";
+export declare function useCanvasProxy(): CanvasProxy;
+export declare function useCanvasProxyWithRef(): {
+    canvasProxy: CanvasProxy;
+    refCallback: (canvas: HTMLCanvasElement | null) => void;
+};

package/index.js

@@ -1,3 +1,3 @@
-import{useCallback as L,useEffect as T,useRef as j}from"react";import{Board as q}from"@ue-too/board";import{createContext as I,useContext as U,useEffect as O,useMemo as Y,useRef as $,useSyncExternalStore as A}from"react";import{jsxDEV as Z}from"react/jsx-dev-runtime";function C(G=!1){let H=$(new q);return O(()=>{H.current.fullScreen=G},[G]),{board:H.current,subscribe:(K)=>{if(H.current==null)return()=>{};return H.current.on("pan",(J,N)=>{K()})}}}function E(G){let H=X(),K=G==="position"?"pan":G==="zoomLevel"?"zoom":"rotate",J=$(null);return A((N)=>H.camera.on(K,N),()=>{if(G==="position"){let N=H.camera.position,Q=J.current;if(Q&&Q.x===N.x&&Q.y===N.y)return Q;let _={...N};return J.current=_,_}return H.camera[G]})}function F(){let G=X();return Y(()=>{let K=G.getCameraRig();return{panToWorld:(J)=>{K.panToWorld(J)},panToViewPort:(J)=>{K.panToViewPort(J)},zoomTo:(J)=>{K.zoomTo(J)},zoomBy:(J)=>{K.zoomBy(J)},rotateTo:(J)=>{K.rotateTo(J)},rotateBy:(J)=>{K.rotateBy(J)}}},[G])}function y(){let G=X(),H=$(null);return A((K)=>{return G.camera.on("all",K)},()=>{let K=G.camera.position,J=G.camera.rotation,N=G.camera.zoomLevel,Q=H.current;if(Q&&Q.position.x===K.x&&Q.position.y===K.y&&Q.rotation===J&&Q.zoomLevel===N)return Q;let _={position:{...K},rotation:J,zoomLevel:N};return H.current=_,_})}function k(G){let H=X();O(()=>{H.cameraMux=G},[G])}var W=I(null);function V({children:G}){let H=Y(()=>new q,[]);return Z(W.Provider,{value:H,children:G},void 0,!1,void 0,this)}function X(){let G=U(W);if(G==null)throw Error("Board Provider not found");return G}function B(){return X().camera}function z(G){let H=j(null);T(()=>{let K=(J)=>{G(J),H.current=requestAnimationFrame(K)};return H.current=requestAnimationFrame(K),()=>{if(H.current)cancelAnimationFrame(H.current)}},[G])}function D(G){let H=X(),K=L((J)=>{H.step(J);let N=H.context;if(N==null){console.warn("Canvas context not available");return}G?.(J,N)},[G,H]);z(K)}import{jsxDEV as d}from"react/jsx-dev-runtime";export{k as useCustomCameraMux,F as useCameraInput,C as useBoardify,E as useBoardCameraState,B as useBoardCamera,X as useBoard,D as useAnimationFrameWithBoard,z as useAnimationFrame,y as useAllBoardCameraState,V as BoardProvider};
+import{useCallback as S,useEffect as I,useRef as L}from"react";import{Board as T}from"@ue-too/board";import{createContext as U,useCallback as O,useContext as V,useEffect as $,useMemo as Y,useRef as A,useSyncExternalStore as q}from"react";import{jsxDEV as j}from"react/jsx-dev-runtime";function P(G){let H=N(),J=G==="position"?"pan":G==="zoomLevel"?"zoom":"rotate",_=A(null);return q((K)=>H.camera.on(J,K),()=>{if(G==="position"){let K=H.camera.position,Q=_.current;if(Q&&Q.x===K.x&&Q.y===K.y)return Q;let X={...K};return _.current=X,X}return H.camera[G]})}function f(){let G=N();return Y(()=>{let J=G.getCameraRig();return{panByViewPort:(_)=>{J.panByViewPort(_)},panByWorld:(_)=>{J.panByWorld(_)},panToWorld:(_)=>{J.panToWorld(_)},panToViewPort:(_)=>{J.panToViewPort(_)},zoomToAtViewPort:(_,K)=>{J.zoomToAt(_,K)},zoomToAtWorld:(_,K)=>{J.zoomToAtWorld(_,K)},zoomTo:(_)=>{J.zoomTo(_)},zoomBy:(_)=>{J.zoomBy(_)},rotateTo:(_)=>{J.rotateTo(_)},rotateBy:(_)=>{J.rotateBy(_)}}},[G])}function w(){let G=N(),H=A(null);return q((J)=>{return G.camera.on("all",J)},()=>{let J=G.camera.position,_=G.camera.rotation,K=G.camera.zoomLevel,Q=H.current;if(Q&&Q.position.x===J.x&&Q.position.y===J.y&&Q.rotation===_&&Q.zoomLevel===K)return Q;let X={position:{...J},rotation:_,zoomLevel:K};return H.current=X,X})}function v(G){let H=N();$(()=>{H.cameraMux=G},[G,H])}function b(){let G=N(),H=O((J)=>{G.inputOrchestrator.processInputEvent(J)},[G]);return $(()=>{return G.disableEventListeners(),()=>{G.enableEventListeners()}},[G]),{processInputEvent:H}}var W=U(null);function Z({children:G}){let H=Y(()=>new T,[]);return j(W.Provider,{value:H,children:G},void 0,!1,void 0,this)}function N(){let G=V(W);if(G==null)throw Error("Board Provider not found");return G}function p(){return N().camera}function u(){let G=N();return q((H)=>G.onCanvasDimensionChange(H),()=>{return G.canvasDimensions})}function h(){let G=N();return O((H)=>{return G.convertWindowPoint2WorldCoord(H)},[G])}function m(G){let H=N();$(()=>{H.kmtParser=G},[G,H])}function d(G){let H=N();$(()=>{H.touchParser=G},[G,H])}function D(G){let H=L(null);I(()=>{let J=(_)=>{G(_),H.current=requestAnimationFrame(J)};return H.current=requestAnimationFrame(J),()=>{if(H.current)cancelAnimationFrame(H.current)}},[G])}function M(G){let H=N(),J=S((_)=>{H.step(_);let K=H.context;if(K==null){console.warn("Canvas context not available");return}G?.(_,K)},[G,H]);D(J)}import{PointCal as JG}from"@ue-too/math";import{jsxDEV as NG}from"react/jsx-dev-runtime";import{CanvasProxy as z}from"@ue-too/board";import{useState as C,useCallback as y}from"react";function F(){let[G,H]=C(()=>new z);return G}function YG(){let G=F(),H=y((J)=>{if(J==null){G.tearDown();return}G.attach(J)},[G]);return{canvasProxy:G,refCallback:H}}export{d as useCustomTouchEventParser,m as useCustomKMTEventParser,b as useCustomInputHandling,v as useCustomCameraMux,h as useCoordinateConversion,YG as useCanvasProxyWithRef,F as useCanvasProxy,u as useCanvasDimension,f as useCameraInput,P as useBoardCameraState,p as useBoardCamera,N as useBoard,M as useAnimationFrameWithBoard,D as useAnimationFrame,w as useAllBoardCameraState,Z as BoardProvider};
 
-//# debugId=E0E749EB72A2F9E564756E2164756E21
+//# debugId=6B2CEE4C23D45A0964756E2164756E21

package/index.js.map

@@ -1,11 +1,13 @@
 {
   "version": 3,
-  "sources": ["../src/hooks/useAnimationFrame.ts", "../src/hooks/useBoardify.tsx"],
+  "sources": ["../src/hooks/useAnimationFrame.ts", "../src/hooks/useBoardify.tsx", "../src/components/Board.tsx", "../src/hooks/useCanvasProxy.ts"],
   "sourcesContent": [
     "import { useCallback, useEffect, useRef } from 'react';\nimport { useBoard } from './useBoardify';\n\n/**\n * Hook to run a callback on every animation frame.\n *\n * @remarks\n * This hook uses `requestAnimationFrame` to execute a callback repeatedly for smooth animations.\n * The animation loop starts when the component mounts and stops when it unmounts, automatically\n * cleaning up the animation frame request.\n *\n * **Performance Note**: The callback is called on every frame, so ensure your callback is\n * optimized to avoid performance issues. The callback dependency should be stable to prevent\n * restarting the animation loop unnecessarily.\n *\n * @param callback - Function to call on each animation frame, receives the current timestamp\n *\n * @example\n * ```tsx\n * function AnimatedComponent() {\n *   const [rotation, setRotation] = useState(0);\n *\n *   useAnimationFrame((timestamp) => {\n *     // Rotate 45 degrees per second\n *     setRotation((prev) => prev + (Math.PI / 4) * (1 / 60));\n *   });\n *\n *   return <div style={{ transform: `rotate(${rotation}rad)` }}>Spinning!</div>;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAnimationFrameWithBoard} for board-integrated animation loop\n */\nexport function useAnimationFrame(callback: (timestamp: number) => void) {\n    const animationFrameRef = useRef<number | null>(null);\n\n    useEffect(() => {\n        const step = (timestamp: number) => {\n            callback(timestamp);\n            animationFrameRef.current = requestAnimationFrame(step);\n        };\n\n        // Start the animation loop\n        animationFrameRef.current = requestAnimationFrame(step);\n\n        // Cleanup function\n        return () => {\n            if (animationFrameRef.current) {\n                cancelAnimationFrame(animationFrameRef.current);\n            }\n        };\n    }, [callback]);\n}\n\n/**\n * Hook to run an animation loop integrated with the Board's step function.\n *\n * @remarks\n * This hook automatically calls `board.step(timestamp)` on every frame to update the board's\n * camera transform, then invokes your callback with the timestamp and canvas context.\n * This is the recommended way to implement drawing logic for board-based applications.\n *\n * The hook handles:\n * - Calling `board.step()` to update camera transforms\n * - Providing the canvas context for drawing\n * - Warning if context is not available\n * - Cleaning up the animation loop on unmount\n *\n * **Typical Usage Pattern**:\n * 1. Board calls `step()` to update transforms\n * 2. Your callback draws on the canvas\n * 3. Browser paints the frame\n * 4. Repeat next frame\n *\n * @param callback - Optional function to call after board.step(), receives timestamp and canvas context\n *\n * @example\n * ```tsx\n * function MyBoard() {\n *   useAnimationFrameWithBoard((timestamp, ctx) => {\n *     // Draw a rectangle at world position (0, 0)\n *     ctx.fillStyle = 'red';\n *     ctx.fillRect(0, 0, 100, 100);\n *\n *     // Draw a circle that moves\n *     const x = Math.sin(timestamp / 1000) * 200;\n *     const y = Math.cos(timestamp / 1000) * 200;\n *     ctx.fillStyle = 'blue';\n *     ctx.beginPath();\n *     ctx.arc(x, y, 20, 0, Math.PI * 2);\n *     ctx.fill();\n *   });\n *\n *   return <Board width={800} height={600} />;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAnimationFrame} for generic animation frame hook\n */\nexport function useAnimationFrameWithBoard(callback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void) {\n\n    const board = useBoard();\n\n    const animationCallback = useCallback((timestamp: number) => {\n        board.step(timestamp);\n        const ctx = board.context;\n        if (ctx == undefined) {\n            console.warn('Canvas context not available');\n            return;\n        }\n        callback?.(timestamp, ctx);\n    }, [callback, board]);\n\n    useAnimationFrame(animationCallback);\n}\n",
-    "import {Board as Boardify} from \"@ue-too/board\";\nimport {createContext, useContext, useEffect, useMemo, useRef, useSyncExternalStore} from \"react\";\nimport { CameraMux, CameraState } from \"@ue-too/board/camera\";\nimport { Point } from \"@ue-too/math\";\n\n/**\n * Maps camera state keys to their corresponding event names.\n * @internal\n */\ntype StateToEventKey<K extends keyof CameraState> =\n    K extends \"position\" ? \"pan\" : K extends \"zoomLevel\" ? \"zoom\" : \"rotate\";\n\n/**\n * Hook to create and manage a Board instance.\n *\n * @remarks\n * This hook creates a stable Board instance that persists across re-renders.\n * The board is created once and stored in a ref, making it suitable for use\n * in React components without recreating the board on every render.\n *\n * **Important**: This hook creates an independent board instance. If you need\n * to share a board across multiple components, use {@link BoardProvider} and\n * {@link useBoard} instead.\n *\n * @param fullScreen - Whether the board should be in fullscreen mode (resizes with window)\n * @returns Object containing the board instance and a subscribe function\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { board, subscribe } = useBoardify(true);\n *\n *   useEffect(() => {\n *     // Subscribe to camera pan events\n *     const unsubscribe = subscribe(() => {\n *       console.log('Camera panned');\n *     });\n *     return unsubscribe;\n *   }, [subscribe]);\n *\n *   return <canvas ref={(ref) => ref && board.attach(ref)} />;\n * }\n * ```\n *\n * @category Hooks\n */\nexport function useBoardify(fullScreen: boolean = false) {\n\n    const boardRef = useRef<Boardify>(new Boardify());\n\n    useEffect(() => {\n        boardRef.current.fullScreen = fullScreen;\n    }, [fullScreen]);\n\n    return {\n        board: boardRef.current,\n        subscribe: (callback: () => void) => {\n            if (boardRef.current == null) {\n                return () => {};\n            }\n            return boardRef.current.on(\"pan\", (_event, _data) => {\n                callback();\n            });\n        }\n    }\n}\n\n/**\n * Hook to subscribe to a specific camera state property with automatic re-rendering.\n *\n * @remarks\n * This hook uses React's `useSyncExternalStore` to efficiently subscribe to camera state changes.\n * It only triggers re-renders when the specified property actually changes, and uses caching\n * to maintain referential equality for object values (like position).\n *\n * **Performance**: The hook is optimized to prevent unnecessary re-renders by:\n * - Caching object values (position) to maintain referential equality\n * - Using `useSyncExternalStore` for efficient subscription management\n * - Only subscribing to the specific state property needed\n *\n * @typeParam K - Key of the camera state to subscribe to\n * @param state - The camera state property to track (\"position\", \"rotation\", or \"zoomLevel\")\n * @returns The current value of the specified camera state property\n *\n * @example\n * ```tsx\n * function CameraInfo() {\n *   const position = useBoardCameraState('position');\n *   const rotation = useBoardCameraState('rotation');\n *   const zoomLevel = useBoardCameraState('zoomLevel');\n *\n *   return (\n *     <div>\n *       Position: {position.x}, {position.y}<br/>\n *       Rotation: {rotation}<br/>\n *       Zoom: {zoomLevel}\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAllBoardCameraState} for subscribing to all camera state at once\n */\nexport function useBoardCameraState<K extends keyof CameraState>(state: K): CameraState[K] {\n    const board = useBoard();\n    const stateKey = (state === \"position\" ? \"pan\" : state === \"zoomLevel\" ? \"zoom\" : \"rotate\") as StateToEventKey<K>;\n    const cachedPositionRef = useRef<{ x: number; y: number } | null>(null);\n\n    return useSyncExternalStore(\n        (cb) => board.camera.on(stateKey, cb),\n        () => {\n            // For position (object), we need to cache to avoid creating new objects\n            if (state === \"position\") {\n                const currentPosition = board.camera.position;\n                const cached = cachedPositionRef.current;\n                \n                if (cached && cached.x === currentPosition.x && cached.y === currentPosition.y) {\n                    // Return cached snapshot to maintain referential equality\n                    return cached as CameraState[K];\n                }\n                \n                // Cache the new position object\n                const newPosition = {...currentPosition};\n                cachedPositionRef.current = newPosition;\n                return newPosition as CameraState[K];\n            }\n            \n            // For primitive values (rotation, zoomLevel), return directly\n            // Object.is works correctly for primitives\n            return board.camera[state] as CameraState[K];\n        },\n    );\n}\n\n/**\n * Hook to get camera control functions for programmatic camera manipulation.\n *\n * @remarks\n * This hook provides a stable set of functions to control the camera programmatically.\n * The functions are memoized and only recreate when the board instance changes.\n *\n * All camera operations go through the camera rig, which enforces boundaries,\n * restrictions, and other constraints configured on the board.\n *\n * @returns Object containing camera control functions:\n * - `panToWorld` - Pan camera to a world position\n * - `panToViewPort` - Pan camera to a viewport position\n * - `zoomTo` - Set camera zoom to specific level\n * - `zoomBy` - Adjust camera zoom by delta\n * - `rotateTo` - Set camera rotation to specific angle\n * - `rotateBy` - Adjust camera rotation by delta\n *\n * @example\n * ```tsx\n * function CameraControls() {\n *   const { panToWorld, zoomTo, rotateTo } = useCameraInput();\n *\n *   return (\n *     <div>\n *       <button onClick={() => panToWorld({ x: 0, y: 0 })}>\n *         Center Camera\n *       </button>\n *       <button onClick={() => zoomTo(1.0)}>\n *         Reset Zoom\n *       </button>\n *       <button onClick={() => rotateTo(0)}>\n *         Reset Rotation\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n */\nexport function useCameraInput(){\n    const board = useBoard();\n\n    const test = useMemo(()=>{\n        const cameraRig = board.getCameraRig();\n\n        return {\n            panToWorld: (worldPosition: Point) => {\n                cameraRig.panToWorld(worldPosition);\n            },\n            panToViewPort: (viewPortPosition: Point) => {\n                cameraRig.panToViewPort(viewPortPosition);\n            },\n            zoomTo: (zoomLevel: number) => {\n                cameraRig.zoomTo(zoomLevel);\n            },\n            zoomBy: (zoomDelta: number) => {\n                cameraRig.zoomBy(zoomDelta);\n            },\n            rotateTo: (rotation: number) => {\n                cameraRig.rotateTo(rotation);\n            },\n            rotateBy: (rotationDelta: number) => {\n                cameraRig.rotateBy(rotationDelta);\n            }\n        }\n\n    }, [board]);\n\n    return test;\n}\n\n/**\n * Hook to subscribe to all camera state properties with automatic re-rendering.\n *\n * @remarks\n * This hook provides a snapshot of all camera state (position, rotation, zoomLevel) and\n * re-renders only when any of these values change. It's more efficient than using multiple\n * {@link useBoardCameraState} calls when you need all state properties.\n *\n * **Performance**: The hook uses snapshot caching to maintain referential equality when\n * values haven't changed, preventing unnecessary re-renders in child components.\n *\n * @returns Object containing:\n * - `position` - Current camera position {x, y}\n * - `rotation` - Current camera rotation in radians\n * - `zoomLevel` - Current camera zoom level\n *\n * @example\n * ```tsx\n * function CameraStateDisplay() {\n *   const { position, rotation, zoomLevel } = useAllBoardCameraState();\n *\n *   return (\n *     <div>\n *       <h3>Camera State</h3>\n *       <p>Position: ({position.x.toFixed(2)}, {position.y.toFixed(2)})</p>\n *       <p>Rotation: {rotation.toFixed(2)} rad</p>\n *       <p>Zoom: {zoomLevel.toFixed(2)}x</p>\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useBoardCameraState} for subscribing to individual state properties\n */\nexport function useAllBoardCameraState()  {\n    const board = useBoard();\n    const cachedSnapshotRef = useRef<{\n        position: { x: number; y: number };\n        rotation: number;\n        zoomLevel: number;\n    } | null>(null);\n\n    return useSyncExternalStore(\n        (cb) => { return board.camera.on(\"all\", cb) },\n        () => {\n            const currentPosition = board.camera.position;\n            const currentRotation = board.camera.rotation;\n            const currentZoomLevel = board.camera.zoomLevel;\n\n            // Check if values actually changed\n            const cached = cachedSnapshotRef.current;\n            if (\n                cached &&\n                cached.position.x === currentPosition.x &&\n                cached.position.y === currentPosition.y &&\n                cached.rotation === currentRotation &&\n                cached.zoomLevel === currentZoomLevel\n            ) {\n                // Return cached snapshot to maintain referential equality\n                return cached;\n            }\n\n            // Create new snapshot only when values changed\n            const newSnapshot = {\n                position: {...currentPosition},\n                rotation: currentRotation,\n                zoomLevel: currentZoomLevel,\n            };\n            cachedSnapshotRef.current = newSnapshot;\n            return newSnapshot;\n        },\n    )\n}\n\n/**\n * Hook to set a custom camera multiplexer on the board.\n *\n * @remarks\n * This hook allows you to replace the board's default camera mux with a custom implementation.\n * Useful when you need custom input coordination, animation control, or state-based input blocking.\n *\n * The camera mux is updated whenever the provided `cameraMux` instance changes.\n *\n * @param cameraMux - Custom camera mux implementation to use\n *\n * @example\n * ```tsx\n * function CustomMuxBoard() {\n *   const myCustomMux = useMemo(() => {\n *     return createCameraMuxWithAnimationAndLock(camera);\n *   }, []);\n *\n *   useCustomCameraMux(myCustomMux);\n *\n *   return <Board />;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link CameraMux} from @ue-too/board for camera mux interface\n */\nexport function useCustomCameraMux(cameraMux: CameraMux) {\n    const board = useBoard();\n\n    useEffect(()=>{\n        board.cameraMux = cameraMux;\n    }, [cameraMux]);\n}\n\n/**\n * React context for sharing a Board instance across components.\n * @internal\n */\nconst BoardContext = createContext<Boardify | null>(null);\n\n/**\n * Provider component for sharing a Board instance across the component tree.\n *\n * @remarks\n * This component creates a single Board instance and makes it available to all child\n * components via the {@link useBoard} hook. This is the recommended way to use the\n * board in React applications when you need to access it from multiple components.\n *\n * The board instance is created once when the provider mounts and persists for the\n * lifetime of the provider.\n *\n * @param props - Component props\n * @param props.children - Child components that will have access to the board\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <BoardProvider>\n *       <Board width={800} height={600} />\n *       <CameraControls />\n *       <CameraStateDisplay />\n *     </BoardProvider>\n *   );\n * }\n * ```\n *\n * @category Components\n * @see {@link useBoard} for accessing the board instance\n */\nexport function BoardProvider({children}: {children: React.ReactNode}) {\n    const board = useMemo(() => new Boardify(), []);\n    return <BoardContext.Provider value={board}>{children}</BoardContext.Provider>;\n}\n\n/**\n * Hook to access the Board instance from context.\n *\n * @remarks\n * This hook retrieves the Board instance provided by {@link BoardProvider}.\n * It must be used within a component that is a descendant of BoardProvider,\n * otherwise it will throw an error.\n *\n * @returns The Board instance from context\n * @throws Error if used outside of BoardProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const board = useBoard();\n *\n *   useEffect(() => {\n *     // Configure board\n *     board.camera.boundaries = { min: { x: -1000, y: -1000 }, max: { x: 1000, y: 1000 } };\n *   }, [board]);\n *\n *   return <div>Board ready</div>;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link BoardProvider} for providing the board instance\n */\nexport function useBoard() {\n    const board = useContext(BoardContext);\n    if (board == null) {\n        throw new Error('Board Provider not found');\n    }\n    return board;\n}\n\n/**\n * Hook to access the camera instance from the Board context.\n *\n * @remarks\n * This is a convenience hook that returns the camera from the board instance.\n * Equivalent to calling `useBoard().camera` but more concise.\n *\n * @returns The camera instance from the board\n * @throws Error if used outside of BoardProvider\n *\n * @example\n * ```tsx\n * function CameraConfig() {\n *   const camera = useBoardCamera();\n *\n *   useEffect(() => {\n *     camera.setMinZoomLevel(0.5);\n *     camera.setMaxZoomLevel(4.0);\n *   }, [camera]);\n *\n *   return null;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useBoard} for accessing the full board instance\n */\nexport function useBoardCamera() {\n    const board = useBoard();\n    return board.camera;\n}\n"
+    "import {Board as Boardify, KMTEventParser, KmtInputStateMachine, OutputEvent, TouchEventParser} from \"@ue-too/board\";\nimport {createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore} from \"react\";\nimport { CameraMux, CameraState  } from \"@ue-too/board/camera\";\nimport { Point } from \"@ue-too/math\";\n\n/**\n * Maps camera state keys to their corresponding event names.\n * @internal\n */\ntype StateToEventKey<K extends keyof CameraState> =\n    K extends \"position\" ? \"pan\" : K extends \"zoomLevel\" ? \"zoom\" : \"rotate\";\n\n/**\n * Hook to subscribe to a specific camera state property with automatic re-rendering.\n *\n * @remarks\n * This hook uses React's `useSyncExternalStore` to efficiently subscribe to camera state changes.\n * It only triggers re-renders when the specified property actually changes, and uses caching\n * to maintain referential equality for object values (like position).\n *\n * **Performance**: The hook is optimized to prevent unnecessary re-renders by:\n * - Caching object values (position) to maintain referential equality\n * - Using `useSyncExternalStore` for efficient subscription management\n * - Only subscribing to the specific state property needed\n *\n * @typeParam K - Key of the camera state to subscribe to\n * @param state - The camera state property to track (\"position\", \"rotation\", or \"zoomLevel\")\n * @returns The current value of the specified camera state property\n *\n * @example\n * ```tsx\n * function CameraInfo() {\n *   const position = useBoardCameraState('position');\n *   const rotation = useBoardCameraState('rotation');\n *   const zoomLevel = useBoardCameraState('zoomLevel');\n *\n *   return (\n *     <div>\n *       Position: {position.x}, {position.y}<br/>\n *       Rotation: {rotation}<br/>\n *       Zoom: {zoomLevel}\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAllBoardCameraState} for subscribing to all camera state at once\n */\nexport function useBoardCameraState<K extends keyof CameraState>(state: K): CameraState[K] {\n    const board = useBoard();\n    const stateKey = (state === \"position\" ? \"pan\" : state === \"zoomLevel\" ? \"zoom\" : \"rotate\") as StateToEventKey<K>;\n    const cachedPositionRef = useRef<{ x: number; y: number } | null>(null);\n\n    return useSyncExternalStore(\n        (cb) => board.camera.on(stateKey, cb),\n        () => {\n            // For position (object), we need to cache to avoid creating new objects\n            if (state === \"position\") {\n                const currentPosition = board.camera.position;\n                const cached = cachedPositionRef.current;\n                \n                if (cached && cached.x === currentPosition.x && cached.y === currentPosition.y) {\n                    // Return cached snapshot to maintain referential equality\n                    return cached as CameraState[K];\n                }\n                \n                // Cache the new position object\n                const newPosition = {...currentPosition};\n                cachedPositionRef.current = newPosition;\n                return newPosition as CameraState[K];\n            }\n            \n            // For primitive values (rotation, zoomLevel), return directly\n            // Object.is works correctly for primitives\n            return board.camera[state] as CameraState[K];\n        },\n    );\n}\n\n/**\n * Hook to get camera control functions for programmatic camera manipulation.\n *\n * @remarks\n * This hook provides a stable set of functions to control the camera programmatically.\n * The functions are memoized and only recreate when the board instance changes.\n *\n * All camera operations go through the camera rig, which enforces boundaries,\n * restrictions, and other constraints configured on the board.\n *\n * @returns Object containing camera control functions:\n * - `panToWorld` - Pan camera to a world position\n * - `panToViewPort` - Pan camera to a viewport position\n * - `zoomTo` - Set camera zoom to specific level\n * - `zoomBy` - Adjust camera zoom by delta\n * - `rotateTo` - Set camera rotation to specific angle\n * - `rotateBy` - Adjust camera rotation by delta\n *\n * @example\n * ```tsx\n * function CameraControls() {\n *   const { panToWorld, zoomTo, rotateTo } = useCameraInput();\n *\n *   return (\n *     <div>\n *       <button onClick={() => panToWorld({ x: 0, y: 0 })}>\n *         Center Camera\n *       </button>\n *       <button onClick={() => zoomTo(1.0)}>\n *         Reset Zoom\n *       </button>\n *       <button onClick={() => rotateTo(0)}>\n *         Reset Rotation\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n */\nexport function useCameraInput(){\n    const board = useBoard();\n\n    const test = useMemo(()=>{\n        const cameraRig = board.getCameraRig();\n\n        return {\n            panByViewPort: (delta: Point) => {\n                cameraRig.panByViewPort(delta);\n            },\n            panByWorld: (delta: Point) => {\n                cameraRig.panByWorld(delta);\n            },\n            panToWorld: (worldPosition: Point) => {\n                cameraRig.panToWorld(worldPosition);\n            },\n            panToViewPort: (viewPortPosition: Point) => {\n                cameraRig.panToViewPort(viewPortPosition);\n            },\n            zoomToAtViewPort: (zoomLevel: number, at: Point) => {\n                cameraRig.zoomToAt(zoomLevel, at);\n            },\n            zoomToAtWorld: (zoomLevel: number, at: Point) => {\n                cameraRig.zoomToAtWorld(zoomLevel, at);\n            },\n            zoomTo: (zoomLevel: number) => {\n                cameraRig.zoomTo(zoomLevel);\n            },\n            zoomBy: (zoomDelta: number) => {\n                cameraRig.zoomBy(zoomDelta);\n            },\n            rotateTo: (rotation: number) => {\n                cameraRig.rotateTo(rotation);\n            },\n            rotateBy: (rotationDelta: number) => {\n                cameraRig.rotateBy(rotationDelta);\n            }\n        }\n\n    }, [board]);\n\n    return test;\n}\n\n/**\n * Hook to subscribe to all camera state properties with automatic re-rendering.\n *\n * @remarks\n * This hook provides a snapshot of all camera state (position, rotation, zoomLevel) and\n * re-renders only when any of these values change. It's more efficient than using multiple\n * {@link useBoardCameraState} calls when you need all state properties.\n *\n * **Performance**: The hook uses snapshot caching to maintain referential equality when\n * values haven't changed, preventing unnecessary re-renders in child components.\n *\n * @returns Object containing:\n * - `position` - Current camera position {x, y}\n * - `rotation` - Current camera rotation in radians\n * - `zoomLevel` - Current camera zoom level\n *\n * @example\n * ```tsx\n * function CameraStateDisplay() {\n *   const { position, rotation, zoomLevel } = useAllBoardCameraState();\n *\n *   return (\n *     <div>\n *       <h3>Camera State</h3>\n *       <p>Position: ({position.x.toFixed(2)}, {position.y.toFixed(2)})</p>\n *       <p>Rotation: {rotation.toFixed(2)} rad</p>\n *       <p>Zoom: {zoomLevel.toFixed(2)}x</p>\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useBoardCameraState} for subscribing to individual state properties\n */\nexport function useAllBoardCameraState()  {\n    const board = useBoard();\n    const cachedSnapshotRef = useRef<{\n        position: { x: number; y: number };\n        rotation: number;\n        zoomLevel: number;\n    } | null>(null);\n\n    return useSyncExternalStore(\n        (cb) => { return board.camera.on(\"all\", cb) },\n        () => {\n            const currentPosition = board.camera.position;\n            const currentRotation = board.camera.rotation;\n            const currentZoomLevel = board.camera.zoomLevel;\n\n            // Check if values actually changed\n            const cached = cachedSnapshotRef.current;\n            if (\n                cached &&\n                cached.position.x === currentPosition.x &&\n                cached.position.y === currentPosition.y &&\n                cached.rotation === currentRotation &&\n                cached.zoomLevel === currentZoomLevel\n            ) {\n                // Return cached snapshot to maintain referential equality\n                return cached;\n            }\n\n            // Create new snapshot only when values changed\n            const newSnapshot = {\n                position: {...currentPosition},\n                rotation: currentRotation,\n                zoomLevel: currentZoomLevel,\n            };\n            cachedSnapshotRef.current = newSnapshot;\n            return newSnapshot;\n        },\n    )\n}\n\n/**\n * Hook to set a custom camera multiplexer on the board.\n *\n * @remarks\n * This hook allows you to replace the board's default camera mux with a custom implementation.\n * Useful when you need custom input coordination, animation control, or state-based input blocking.\n *\n * The camera mux is updated whenever the provided `cameraMux` instance changes.\n *\n * @param cameraMux - Custom camera mux implementation to use\n *\n * @example\n * ```tsx\n * function CustomMuxBoard() {\n *   const myCustomMux = useMemo(() => {\n *     return createCameraMuxWithAnimationAndLock(camera);\n *   }, []);\n *\n *   useCustomCameraMux(myCustomMux);\n *\n *   return <Board />;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link CameraMux} from @ue-too/board for camera mux interface\n */\nexport function useCustomCameraMux(cameraMux: CameraMux) {\n    const board = useBoard();\n\n    useEffect(()=>{\n        board.cameraMux = cameraMux;\n    }, [cameraMux, board]);\n}\n\n/**\n * The custom input handling logic is before everything else. To use this hook, you would need to handle the event from the canvas and pass down the result to the `processInputEvent` function. \n * @returns Object containing the `processInputEvent` function\n * @example\n * ```typescript\n * const { processInputEvent } = useCustomInputHandling();\n * \n * const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {\n *   // custom logic to determine the user input\n * \n *   // if the user input is valid, pass it to the `processInputEvent` function\n *   // e.g. pass the pan event down the input handling system\n *   processInputEvent({\n *     type: \"pan\",\n *     delta: {\n *       x: 10,\n *       y: 10,\n *     },\n *   });\n * }\n * ```\n */\nexport function useCustomInputHandling(){\n    const board = useBoard();\n\n    const processInputEvent = useCallback((input: OutputEvent) => {\n        board.inputOrchestrator.processInputEvent(input);\n    }, [board]);\n\n    useEffect(()=>{\n        board.disableEventListeners();\n\n        return () => {\n            board.enableEventListeners();\n        };\n    }, [board])\n\n    return {\n        processInputEvent\n    };\n}\n\n\n\n/**\n * React context for sharing a Board instance across components.\n * @internal\n */\nconst BoardContext = createContext<Boardify | null>(null);\n\n/**\n * Provider component for sharing a Board instance across the component tree.\n *\n * @remarks\n * This component creates a single Board instance and makes it available to all child\n * components via the {@link useBoard} hook. This is the recommended way to use the\n * board in React applications when you need to access it from multiple components.\n *\n * The board instance is created once when the provider mounts and persists for the\n * lifetime of the provider.\n *\n * @param props - Component props\n * @param props.children - Child components that will have access to the board\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <BoardProvider>\n *       <Board width={800} height={600} />\n *       <CameraControls />\n *       <CameraStateDisplay />\n *     </BoardProvider>\n *   );\n * }\n * ```\n *\n * @category Components\n * @see {@link useBoard} for accessing the board instance\n */\nexport function BoardProvider({children}: {children: React.ReactNode}) {\n    const board = useMemo(() => new Boardify(), []);\n    return <BoardContext.Provider value={board}>{children}</BoardContext.Provider>;\n}\n\n/**\n * Hook to access the Board instance from context.\n *\n * @remarks\n * This hook retrieves the Board instance provided by {@link BoardProvider}.\n * It must be used within a component that is a descendant of BoardProvider,\n * otherwise it will throw an error.\n *\n * @returns The Board instance from context\n * @throws Error if used outside of BoardProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const board = useBoard();\n *\n *   useEffect(() => {\n *     // Configure board\n *     board.camera.boundaries = { min: { x: -1000, y: -1000 }, max: { x: 1000, y: 1000 } };\n *   }, [board]);\n *\n *   return <div>Board ready</div>;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link BoardProvider} for providing the board instance\n */\nexport function useBoard() {\n    const board = useContext(BoardContext);\n    if (board == null) {\n        throw new Error('Board Provider not found');\n    }\n    return board;\n}\n\n/**\n * Hook to access the camera instance from the Board context.\n *\n * @remarks\n * This is a convenience hook that returns the camera from the board instance.\n * Equivalent to calling `useBoard().camera` but more concise.\n *\n * @returns The camera instance from the board\n * @throws Error if used outside of BoardProvider\n *\n * @example\n * ```tsx\n * function CameraConfig() {\n *   const camera = useBoardCamera();\n *\n *   useEffect(() => {\n *     camera.setMinZoomLevel(0.5);\n *     camera.setMaxZoomLevel(4.0);\n *   }, [camera]);\n *\n *   return null;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useBoard} for accessing the full board instance\n */\nexport function useBoardCamera() {\n    const board = useBoard();\n    return board.camera;\n}\n\nexport function useCanvasDimension() {\n    const board = useBoard();\n\n    return useSyncExternalStore((cb) => board.onCanvasDimensionChange(cb), ()=> {\n        return board.canvasDimensions\n    });\n}\n\nexport function useCoordinateConversion() {\n    const board = useBoard();\n    return useCallback((pointInWindow: Point)=>{\n        return board.convertWindowPoint2WorldCoord(pointInWindow);\n    }, [board]);\n}\n\n\nexport function useCustomKMTEventParser(eventParser: KMTEventParser) {\n    const board = useBoard();\n\n    useEffect(()=>{\n        board.kmtParser = eventParser;\n    }, [eventParser, board]);\n}\n\nexport function useCustomTouchEventParser(eventParser: TouchEventParser) {\n    const board = useBoard();\n\n    useEffect(()=>{\n        board.touchParser = eventParser;\n    }, [eventParser, board]);\n}\n",
+    "import {useRef, useCallback, useSyncExternalStore, useMemo, useState} from \"react\";\nimport {useAnimationFrame, useAnimationFrameWithBoard} from \"../hooks/useAnimationFrame\";\nimport {BoardProvider, useBoard, useBoardCameraState, useCustomCameraMux, useCustomInputHandling} from \"../hooks/useBoardify\";\nimport { Point, PointCal } from \"@ue-too/math\";\nimport type { CameraMux } from \"@ue-too/board/camera\";\nimport { useCanvasProxyWithRef } from \"../hooks/useCanvasProxy\";\nimport { useEffect } from \"react\";\nimport { OutputEvent } from \"@ue-too/board\";\n/**\n * Props for the Board component.\n *\n * @category Components\n */\nexport type BoardProps = {\n    /** Enable fullscreen mode (canvas resizes with window) */\n    fullScreen?: boolean;\n    /** Canvas width in pixels */\n    width?: number;\n    /** Canvas height in pixels */\n    height?: number;\n    /** Callback function for drawing on each animation frame */\n    animationCallback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void;\n    /** Child components that can access the board via hooks */\n    children?: React.ReactNode;\n}\n\n/**\n * Internal Board component that renders the canvas element.\n *\n * @remarks\n * This component must be used within a {@link BoardProvider} to access the board instance.\n * It handles canvas attachment/detachment and integrates the animation loop.\n *\n * @internal\n */\nfunction Board({width, height, fullScreen, animationCallback: animationCallbackProp}: BoardProps) {\n\n    const board = useBoard();\n\n    useAnimationFrameWithBoard(animationCallbackProp);\n\n    // const {processInputEvent} = useCustomInputHandling();\n\n    // const keyboardMouseInput = useMemo(() => {console.log(\"new KeyboardMouseInput\"); return new KeyboardMouseInput(processInputEvent)}, [processInputEvent]);\n\n    return (\n        <canvas\n            width={width}\n            height={height}\n            ref={(ref) => {\n                if (ref == null) {\n                    board.tearDown();\n                    return;\n                }\n\n                board.attach(ref);\n            }}\n            // onPointerDown={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointerdownHandler(e.nativeEvent)}\n            // onPointerMove={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointermoveHandler(e.nativeEvent)}\n            // onPointerUp={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointerupHandler(e.nativeEvent)}\n        />\n    );\n}\n\n/**\n * Main Board component with provider wrapper for React applications.\n *\n * @remarks\n * This component provides a complete infinite canvas solution for React. It combines:\n * - A {@link BoardProvider} to share the board instance across components\n * - A canvas element configured with the @ue-too/board package\n * - An integrated animation loop for drawing\n * - Support for child components that can access board state and controls\n *\n * ## Features\n *\n * - **Infinite Canvas**: Pan, zoom, and rotate with mouse/touch input\n * - **Animation Loop**: Automatic rendering loop with customizable draw callback\n * - **React Integration**: Use hooks to access camera state and controls\n * - **Fullscreen Support**: Optional auto-resize with window\n * - **Type-Safe**: Full TypeScript support\n *\n * ## Usage Pattern\n *\n * 1. Render the Board component\n * 2. Provide an animation callback for drawing\n * 3. Use child components with board hooks for UI controls\n * 4. Access camera state reactively via hooks\n *\n * @param props - Component props\n * @param props.width - Canvas width in pixels (default: auto)\n * @param props.height - Canvas height in pixels (default: auto)\n * @param props.fullScreen - Enable fullscreen mode (canvas resizes with window)\n * @param props.animationCallback - Function called on each frame with timestamp and context\n * @param props.children - Child components that can use board hooks\n *\n * @example\n * Basic usage with drawing\n * ```tsx\n * function App() {\n *   return (\n *     <Board\n *       width={800}\n *       height={600}\n *       animationCallback={(timestamp, ctx) => {\n *         // Draw a rectangle at world position (0, 0)\n *         ctx.fillStyle = 'blue';\n *         ctx.fillRect(0, 0, 100, 100);\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @example\n * With child components and camera controls\n * ```tsx\n * function CameraControls() {\n *   const { panToWorld, zoomTo } = useCameraInput();\n *   const position = useBoardCameraState('position');\n *\n *   return (\n *     <div style={{ position: 'absolute', top: 10, left: 10 }}>\n *       <p>Position: ({position.x.toFixed(0)}, {position.y.toFixed(0)})</p>\n *       <button onClick={() => panToWorld({ x: 0, y: 0 })}>Center</button>\n *       <button onClick={() => zoomTo(1.0)}>Reset Zoom</button>\n *     </div>\n *   );\n * }\n *\n * function App() {\n *   return (\n *     <Board width={800} height={600} animationCallback={drawScene}>\n *       <CameraControls />\n *     </Board>\n *   );\n * }\n * ```\n *\n * @example\n * Fullscreen mode\n * ```tsx\n * function App() {\n *   return (\n *     <Board\n *       fullScreen\n *       animationCallback={(timestamp, ctx) => {\n *         // Canvas automatically resizes to window size\n *         ctx.fillStyle = 'green';\n *         ctx.fillRect(-50, -50, 100, 100);\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @category Components\n * @see {@link useBoardCameraState} for accessing camera state\n * @see {@link useCameraInput} for camera control functions\n * @see {@link useBoard} for accessing the board instance\n */\nexport default function BoardWrapperWithChildren({width, height, fullScreen, animationCallback: animationCallbackProp, children}: BoardProps) {\n    return (\n        <BoardProvider>\n            <Board width={width} height={height} fullScreen={fullScreen} animationCallback={animationCallbackProp} />\n            {children}\n        </BoardProvider>\n    );\n}\n\nclass KeyboardMouseInput{\n\n    private isPanning: boolean;\n    private panStartPoint: Point;\n    private processInputEvent: (input: OutputEvent) => void;\n\n    constructor(processInputEvent: (input: OutputEvent) => void){\n        this.isPanning = false;\n        this.panStartPoint = {x: 0, y: 0};\n        this.processInputEvent = processInputEvent;\n        this.bindFunctions();\n    }\n\n    bindFunctions(): void {\n        this.pointerdownHandler = this.pointerdownHandler.bind(this);\n        this.pointermoveHandler = this.pointermoveHandler.bind(this);\n        this.pointerupHandler = this.pointerupHandler.bind(this);\n    }\n\n    pointerdownHandler(event: PointerEvent): void {\n        if(event.pointerType !== \"mouse\"){\n            return;\n        }\n        this.isPanning = true;\n        this.panStartPoint = {x: event.clientX, y: event.clientY};\n    }\n\n    pointermoveHandler(event: PointerEvent): void {\n        if(!this.isPanning){\n            return;\n        }\n        const curPosition = {x: event.clientX, y: event.clientY};\n        const diff = PointCal.subVector(this.panStartPoint, curPosition);\n        this.processInputEvent({\n            type: 'pan',\n            delta: diff,\n        });\n        this.panStartPoint = curPosition;\n    }\n\n    pointerupHandler(event: PointerEvent): void {\n        if(event.pointerType !== \"mouse\"){\n            return;\n        }\n        this.isPanning = false;\n    }\n\n}\n",
+    "import { CanvasProxy } from \"@ue-too/board\";\nimport { useEffect, useState, useRef, useCallback } from \"react\";\n\n\nexport function useCanvasProxy() {\n    const [canvasProxy, _] = useState(() => new CanvasProxy());\n\n    return canvasProxy;\n}\n\nexport function useCanvasProxyWithRef() {\n    const canvasProxy = useCanvasProxy();\n    const refCallback = useCallback((canvas: HTMLCanvasElement | null)=>{\n        if(canvas == null){\n            canvasProxy.tearDown();\n            return;\n        }\n        canvasProxy.attach(canvas);\n    }, [canvasProxy]);\n\n    return {\n        canvasProxy,\n        refCallback,\n    };\n}\n"
   ],
-  "mappings": "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",
-  "debugId": "E0E749EB72A2F9E564756E2164756E21",
+  "mappings": "AAAA,sBAAS,eAAa,YAAW,cCAjC,gBAAQ,sBACR,wBAAQ,iBAAe,gBAAa,eAAY,aAAW,YAAS,0BAAQ,6DAgDrE,SAAS,CAAgD,CAAC,EAA0B,CACvF,IAAM,EAAQ,EAAS,EACjB,EAAY,IAAU,WAAa,MAAQ,IAAU,YAAc,OAAS,SAC5E,EAAoB,EAAwC,IAAI,EAEtE,OAAO,EACH,CAAC,IAAO,EAAM,OAAO,GAAG,EAAU,CAAE,EACpC,IAAM,CAEF,GAAI,IAAU,WAAY,CACtB,IAAM,EAAkB,EAAM,OAAO,SAC/B,EAAS,EAAkB,QAEjC,GAAI,GAAU,EAAO,IAAM,EAAgB,GAAK,EAAO,IAAM,EAAgB,EAEzE,OAAO,EAIX,IAAM,EAAc,IAAI,CAAe,EAEvC,OADA,EAAkB,QAAU,EACrB,EAKX,OAAO,EAAM,OAAO,GAE5B,EA4CG,SAAS,CAAc,EAAE,CAC5B,IAAM,EAAQ,EAAS,EAwCvB,OAtCa,EAAQ,IAAI,CACrB,IAAM,EAAY,EAAM,aAAa,EAErC,MAAO,CACH,cAAe,CAAC,IAAiB,CAC7B,EAAU,cAAc,CAAK,GAEjC,WAAY,CAAC,IAAiB,CAC1B,EAAU,WAAW,CAAK,GAE9B,WAAY,CAAC,IAAyB,CAClC,EAAU,WAAW,CAAa,GAEtC,cAAe,CAAC,IAA4B,CACxC,EAAU,cAAc,CAAgB,GAE5C,iBAAkB,CAAC,EAAmB,IAAc,CAChD,EAAU,SAAS,EAAW,CAAE,GAEpC,cAAe,CAAC,EAAmB,IAAc,CAC7C,EAAU,cAAc,EAAW,CAAE,GAEzC,OAAQ,CAAC,IAAsB,CAC3B,EAAU,OAAO,CAAS,GAE9B,OAAQ,CAAC,IAAsB,CAC3B,EAAU,OAAO,CAAS,GAE9B,SAAU,CAAC,IAAqB,CAC5B,EAAU,SAAS,CAAQ,GAE/B,SAAU,CAAC,IAA0B,CACjC,EAAU,SAAS,CAAa,EAExC,GAED,CAAC,CAAK,CAAC,EAwCP,SAAS,CAAsB,EAAI,CACtC,IAAM,EAAQ,EAAS,EACjB,EAAoB,EAIhB,IAAI,EAEd,OAAO,EACH,CAAC,IAAO,CAAE,OAAO,EAAM,OAAO,GAAG,MAAO,CAAE,GAC1C,IAAM,CACF,IAAM,EAAkB,EAAM,OAAO,SAC/B,EAAkB,EAAM,OAAO,SAC/B,EAAmB,EAAM,OAAO,UAGhC,EAAS,EAAkB,QACjC,GACI,GACA,EAAO,SAAS,IAAM,EAAgB,GACtC,EAAO,SAAS,IAAM,EAAgB,GACtC,EAAO,WAAa,GACpB,EAAO,YAAc,EAGrB,OAAO,EAIX,IAAM,EAAc,CAChB,SAAU,IAAI,CAAe,EAC7B,SAAU,EACV,UAAW,CACf,EAEA,OADA,EAAkB,QAAU,EACrB,EAEf,EA8BG,SAAS,CAAkB,CAAC,EAAsB,CACrD,IAAM,EAAQ,EAAS,EAEvB,EAAU,IAAI,CACV,EAAM,UAAY,GACnB,CAAC,EAAW,CAAK,CAAC,EAyBlB,SAAS,CAAsB,EAAE,CACpC,IAAM,EAAQ,EAAS,EAEjB,EAAoB,EAAY,CAAC,IAAuB,CAC1D,EAAM,kBAAkB,kBAAkB,CAAK,GAChD,CAAC,CAAK,CAAC,EAUV,OARA,EAAU,IAAI,CAGV,OAFA,EAAM,sBAAsB,EAErB,IAAM,CACT,EAAM,qBAAqB,IAEhC,CAAC,CAAK,CAAC,EAEH,CACH,mBACJ,EASJ,IAAM,EAAe,EAA+B,IAAI,EAgCjD,SAAS,CAAa,EAAE,YAAwC,CACnE,IAAM,EAAQ,EAAQ,IAAM,IAAI,EAAY,CAAC,CAAC,EAC9C,OAAO,EAAiD,EAAa,SAA9D,CAAuB,MAAO,EAA9B,SAAsC,GAAtC,qBAAiD,EA+BrD,SAAS,CAAQ,EAAG,CACvB,IAAM,EAAQ,EAAW,CAAY,EACrC,GAAI,GAAS,KACT,MAAU,MAAM,0BAA0B,EAE9C,OAAO,EA8BJ,SAAS,CAAc,EAAG,CAE7B,OADc,EAAS,EACV,OAGV,SAAS,CAAkB,EAAG,CACjC,IAAM,EAAQ,EAAS,EAEvB,OAAO,EAAqB,CAAC,IAAO,EAAM,wBAAwB,CAAE,EAAG,IAAK,CACxE,OAAO,EAAM,iBAChB,EAGE,SAAS,CAAuB,EAAG,CACtC,IAAM,EAAQ,EAAS,EACvB,OAAO,EAAY,CAAC,IAAuB,CACvC,OAAO,EAAM,8BAA8B,CAAa,GACzD,CAAC,CAAK,CAAC,EAIP,SAAS,CAAuB,CAAC,EAA6B,CACjE,IAAM,EAAQ,EAAS,EAEvB,EAAU,IAAI,CACV,EAAM,UAAY,GACnB,CAAC,EAAa,CAAK,CAAC,EAGpB,SAAS,CAAyB,CAAC,EAA+B,CACrE,IAAM,EAAQ,EAAS,EAEvB,EAAU,IAAI,CACV,EAAM,YAAc,GACrB,CAAC,EAAa,CAAK,CAAC,EDvapB,SAAS,CAAiB,CAAC,EAAuC,CACrE,IAAM,EAAoB,EAAsB,IAAI,EAEpD,EAAU,IAAM,CACZ,IAAM,EAAO,CAAC,IAAsB,CAChC,EAAS,CAAS,EAClB,EAAkB,QAAU,sBAAsB,CAAI,GAO1D,OAHA,EAAkB,QAAU,sBAAsB,CAAI,EAG/C,IAAM,CACT,GAAI,EAAkB,QAClB,qBAAqB,EAAkB,OAAO,IAGvD,CAAC,CAAQ,CAAC,EAiDV,SAAS,CAA0B,CAAC,EAAuE,CAE9G,IAAM,EAAQ,EAAS,EAEjB,EAAoB,EAAY,CAAC,IAAsB,CACzD,EAAM,KAAK,CAAS,EACpB,IAAM,EAAM,EAAM,QAClB,GAAI,GAAO,KAAW,CAClB,QAAQ,KAAK,8BAA8B,EAC3C,OAEJ,IAAW,EAAW,CAAG,GAC1B,CAAC,EAAU,CAAK,CAAC,EAEpB,EAAkB,CAAiB,EEhHvC,mBAAgB,sECHhB,sBAAS,sBACT,mBAAoB,iBAAkB,cAG/B,SAAS,CAAc,EAAG,CAC7B,IAAO,EAAa,GAAK,EAAS,IAAM,IAAI,CAAa,EAEzD,OAAO,EAGJ,SAAS,EAAqB,EAAG,CACpC,IAAM,EAAc,EAAe,EAC7B,EAAc,EAAY,CAAC,IAAmC,CAChE,GAAG,GAAU,KAAK,CACd,EAAY,SAAS,EACrB,OAEJ,EAAY,OAAO,CAAM,GAC1B,CAAC,CAAW,CAAC,EAEhB,MAAO,CACH,cACA,aACJ",
+  "debugId": "6B2CEE4C23D45A0964756E2164756E21",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ue-too/board-react-adapter",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ue-too/ue-too.git"
@@ -23,8 +23,8 @@
   "types": "./index.d.ts",
   "module": "./index.js",
   "dependencies": {
-    "@ue-too/board": "^0.12.0",
-    "@ue-too/math": "^0.12.0"
+    "@ue-too/board": "^0.13.0",
+    "@ue-too/math": "^0.13.0"
   },
   "peerDependencies": {
     "react": "^19.0.1",