@canvas-tile-engine/react 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/index.d.mts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +56 -56
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 ENES YÜKSEL
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
|
13
|
+
all copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
20
|
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
|
21
|
+
DEALINGS IN THE SOFTWARE.
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { DrawObject, ImageItem, Coords, CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngine$1, EventHandlers, LayerHandle, onClickCallback, onHoverCallback, onDrawCallback } from '@canvas-tile-engine/core';
|
|
2
|
+
import { DrawObject, ImageItem, Coords, CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngine$1, EventHandlers, LayerHandle, onClickCallback, onHoverCallback, onDrawCallback, onZoomCallback } from '@canvas-tile-engine/core';
|
|
3
3
|
export { CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngineCore, Circle, Coords, DrawObject, EventHandlers, ImageItem, Line, Path, Rect, Text, onClickCallback, onDrawCallback, onHoverCallback } from '@canvas-tile-engine/core';
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
5
|
|
|
@@ -258,6 +258,8 @@ interface CanvasTileEngineProps {
|
|
|
258
258
|
onDraw?: onDrawCallback;
|
|
259
259
|
/** Callback on canvas resize */
|
|
260
260
|
onResize?: () => void;
|
|
261
|
+
/** Callback when zoom level changes */
|
|
262
|
+
onZoom?: onZoomCallback;
|
|
261
263
|
}
|
|
262
264
|
|
|
263
265
|
/**
|
|
@@ -295,7 +297,7 @@ interface CanvasTileEngineProps {
|
|
|
295
297
|
* }
|
|
296
298
|
* ```
|
|
297
299
|
*/
|
|
298
|
-
declare function CanvasTileEngineBase({ engine, config, center, className, style, children, onCoordsChange, onClick, onHover, onMouseDown, onMouseUp, onMouseLeave, onDraw, onResize, }: CanvasTileEngineProps): react_jsx_runtime.JSX.Element;
|
|
300
|
+
declare function CanvasTileEngineBase({ engine, config, center, className, style, children, onCoordsChange, onClick, onHover, onMouseDown, onMouseUp, onMouseLeave, onDraw, onResize, onZoom, }: CanvasTileEngineProps): react_jsx_runtime.JSX.Element;
|
|
299
301
|
declare const CanvasTileEngine: typeof CanvasTileEngineBase & {
|
|
300
302
|
Rect: react.NamedExoticComponent<RectProps>;
|
|
301
303
|
Circle: react.NamedExoticComponent<CircleProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { DrawObject, ImageItem, Coords, CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngine$1, EventHandlers, LayerHandle, onClickCallback, onHoverCallback, onDrawCallback } from '@canvas-tile-engine/core';
|
|
2
|
+
import { DrawObject, ImageItem, Coords, CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngine$1, EventHandlers, LayerHandle, onClickCallback, onHoverCallback, onDrawCallback, onZoomCallback } from '@canvas-tile-engine/core';
|
|
3
3
|
export { CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngineCore, Circle, Coords, DrawObject, EventHandlers, ImageItem, Line, Path, Rect, Text, onClickCallback, onDrawCallback, onHoverCallback } from '@canvas-tile-engine/core';
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
5
|
|
|
@@ -258,6 +258,8 @@ interface CanvasTileEngineProps {
|
|
|
258
258
|
onDraw?: onDrawCallback;
|
|
259
259
|
/** Callback on canvas resize */
|
|
260
260
|
onResize?: () => void;
|
|
261
|
+
/** Callback when zoom level changes */
|
|
262
|
+
onZoom?: onZoomCallback;
|
|
261
263
|
}
|
|
262
264
|
|
|
263
265
|
/**
|
|
@@ -295,7 +297,7 @@ interface CanvasTileEngineProps {
|
|
|
295
297
|
* }
|
|
296
298
|
* ```
|
|
297
299
|
*/
|
|
298
|
-
declare function CanvasTileEngineBase({ engine, config, center, className, style, children, onCoordsChange, onClick, onHover, onMouseDown, onMouseUp, onMouseLeave, onDraw, onResize, }: CanvasTileEngineProps): react_jsx_runtime.JSX.Element;
|
|
300
|
+
declare function CanvasTileEngineBase({ engine, config, center, className, style, children, onCoordsChange, onClick, onHover, onMouseDown, onMouseUp, onMouseLeave, onDraw, onResize, onZoom, }: CanvasTileEngineProps): react_jsx_runtime.JSX.Element;
|
|
299
301
|
declare const CanvasTileEngine: typeof CanvasTileEngineBase & {
|
|
300
302
|
Rect: react.NamedExoticComponent<RectProps>;
|
|
301
303
|
Circle: react.NamedExoticComponent<CircleProps>;
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var O=Object.defineProperty;var
|
|
1
|
+
"use strict";var O=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var oe=Object.prototype.hasOwnProperty;var ae=(r,o)=>{for(var t in o)O(r,t,{get:o[t],enumerable:!0})},ie=(r,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of te(o))!oe.call(r,n)&&n!==t&&O(r,n,{get:()=>o[n],enumerable:!(a=ne(o,n))||a.enumerable});return r};var se=r=>ie(O({},"__esModule",{value:!0}),r);var ue={};ae(ue,{CanvasTileEngine:()=>j,CanvasTileEngineCore:()=>ee.CanvasTileEngine,useCanvasTileEngine:()=>k,useEngineContext:()=>c});module.exports=se(ue);var m=require("react"),K=require("@canvas-tile-engine/core");var R=require("react"),L=(0,R.createContext)(null);function c(){let r=(0,R.useContext)(L);if(!r)throw new Error("useEngineContext must be used within a CanvasTileEngine component");return r}var S=require("react");var V=(0,S.memo)(function({items:o,layer:t=1}){let{engine:a,requestRender:n}=c();return(0,S.useEffect)(()=>{let s=a.drawRect(o,t);return n(),()=>{s&&a.removeLayerHandle(s)}},[a,o,t,n]),null});var P=require("react");var B=(0,P.memo)(function({items:o,layer:t=1}){let{engine:a,requestRender:n}=c();return(0,P.useEffect)(()=>{let s=a.drawCircle(o,t);return n(),()=>{s&&a.removeLayerHandle(s)}},[a,o,t,n]),null});var h=require("react");var W=(0,h.memo)(function({items:o,layer:t=1}){let{engine:a,requestRender:n}=c();return(0,h.useEffect)(()=>{let s=a.drawImage(o,t);return n(),()=>{s&&a.removeLayerHandle(s)}},[a,o,t,n]),null});var I=require("react");var Y=(0,I.memo)(function({cellSize:o,lineWidth:t=1,strokeStyle:a="black",layer:n=0}){let{engine:s,requestRender:e}=c();return(0,I.useEffect)(()=>{let i=s.drawGridLines(o,t,a,n);return e(),()=>{i&&s.removeLayerHandle(i)}},[s,o,t,a,n,e]),null});var T=require("react");var X=(0,T.memo)(function({items:o,style:t,layer:a=1}){let{engine:n,requestRender:s}=c();return(0,T.useEffect)(()=>{let e=n.drawLine(o,t,a);return s(),()=>{e&&n.removeLayerHandle(e)}},[n,o,t,a,s]),null});var H=require("react");var N=(0,H.memo)(function({items:o,style:t,layer:a=2}){let{engine:n,requestRender:s}=c();return(0,H.useEffect)(()=>{let e=n.drawText(o,t,a);return s(),()=>{e&&n.removeLayerHandle(e)}},[n,o,t,a,s]),null});var D=require("react");var U=(0,D.memo)(function({items:o,style:t,layer:a=1}){let{engine:n,requestRender:s}=c();return(0,D.useEffect)(()=>{let e=n.drawPath(o,t,a);return s(),()=>{e&&n.removeLayerHandle(e)}},[n,o,t,a,s]),null});var y=require("react");var Z=(0,y.memo)(function({items:o,cacheKey:t,layer:a=1}){let{engine:n,requestRender:s}=c(),e=(0,y.useRef)(t);return(0,y.useEffect)(()=>{if(o.length===0)return;e.current!==t&&(n.clearStaticCache(e.current),e.current=t);let i=n.drawStaticRect(o,t,a);return s(),()=>{i&&n.removeLayerHandle(i)}},[n,o,t,a,s]),(0,y.useEffect)(()=>()=>{n.clearStaticCache(t)},[n,t]),null});var x=require("react");var J=(0,x.memo)(function({items:o,cacheKey:t,layer:a=1}){let{engine:n,requestRender:s}=c(),e=(0,x.useRef)(t);return(0,x.useEffect)(()=>{if(o.length===0)return;e.current!==t&&(n.clearStaticCache(e.current),e.current=t);let i=n.drawStaticCircle(o,t,a);return s(),()=>{i&&n.removeLayerHandle(i)}},[n,o,t,a,s]),(0,x.useEffect)(()=>()=>{n.clearStaticCache(t)},[n,t]),null});var v=require("react");var Q=(0,v.memo)(function({items:o,cacheKey:t,layer:a=1}){let{engine:n,requestRender:s}=c(),e=(0,v.useRef)(t);return(0,v.useEffect)(()=>{if(o.length===0)return;e.current!==t&&(n.clearStaticCache(e.current),e.current=t);let i=n.drawStaticImage(o,t,a);return s(),()=>{i&&n.removeLayerHandle(i)}},[n,o,t,a,s]),(0,v.useEffect)(()=>()=>{n.clearStaticCache(t)},[n,t]),null});var b=require("react");var $=(0,b.memo)(function({children:o,layer:t=1}){let{engine:a,requestRender:n}=c(),s=(0,b.useRef)(o);return(0,b.useEffect)(()=>{s.current=o}),(0,b.useEffect)(()=>{let e=a.addDrawFunction((i,l,f)=>{s.current(i,l,f)},t);return n(),()=>{e&&a.removeLayerHandle(e)}},[a,t,n]),null});var w=require("react/jsx-runtime");function ce({engine:r,config:o,center:t={x:0,y:0},className:a,style:n,children:s,onCoordsChange:e,onClick:i,onHover:l,onMouseDown:f,onMouseUp:z,onMouseLeave:q,onDraw:F,onResize:M,onZoom:G}){let g=(0,m.useRef)({onCoordsChange:e,onClick:i,onHover:l,onMouseDown:f,onMouseUp:z,onMouseLeave:q,onDraw:F,onResize:M,onZoom:G});(0,m.useEffect)(()=>{g.current={onCoordsChange:e,onClick:i,onHover:l,onMouseDown:f,onMouseUp:z,onMouseLeave:q,onDraw:F,onResize:M,onZoom:G}});let E=(0,m.useRef)(null),A=(0,m.useCallback)(()=>{E.current===null&&(E.current=requestAnimationFrame(()=>{E.current=null,r.render()}))},[r]);(0,m.useEffect)(()=>()=>{E.current!==null&&cancelAnimationFrame(E.current)},[]);let re=(0,m.useMemo)(()=>({engine:r,requestRender:A}),[r,A]);return(0,m.useEffect)(()=>{let _=r._containerRef.current;if(!_)return;let u=new K.CanvasTileEngine(_,o,t);return u.onCoordsChange=C=>g.current.onCoordsChange?.(C),u.onClick=(...C)=>g.current.onClick?.(...C),u.onHover=(...C)=>g.current.onHover?.(...C),u.onMouseDown=()=>g.current.onMouseDown?.(),u.onMouseUp=()=>g.current.onMouseUp?.(),u.onMouseLeave=()=>g.current.onMouseLeave?.(),u.onDraw=(...C)=>g.current.onDraw?.(...C),u.onResize=()=>g.current.onResize?.(),u.onZoom=C=>g.current.onZoom?.(C),r._setInstance(u),u.render(),()=>{u.destroy(),r._setInstance(null)}},[r]),(0,w.jsxs)(L.Provider,{value:re,children:[(0,w.jsx)("div",{ref:r._containerRef,className:a,style:{...n},children:(0,w.jsx)("canvas",{})}),r.isReady&&s]})}var j=Object.assign(ce,{Rect:V,Circle:B,Image:W,GridLines:Y,Line:X,Text:N,Path:U,StaticRect:Z,StaticCircle:J,StaticImage:Q,DrawFunction:$});var p=require("react"),d={layer:-1,id:Symbol("dummy")},le={size:{width:0,height:0,minWidth:100,minHeight:100,maxWidth:1/0,maxHeight:1/0},scale:1,minScale:.5,maxScale:2,backgroundColor:"#ffffff",renderer:"canvas",eventHandlers:{drag:!0,zoom:!0,hover:!1,click:!1,resize:!1},bounds:{minX:-1/0,maxX:1/0,minY:-1/0,maxY:1/0},coordinates:{enabled:!1,shownScaleRange:{min:0,max:1/0}},cursor:{default:"default",move:"move"},debug:{enabled:!1,hud:{enabled:!1,topLeftCoordinates:!1,coordinates:!1,scale:!1,tilesInView:!1,fps:!1},eventHandlers:{click:!1,hover:!1,drag:!1,zoom:!1,resize:!1}}};function k(){let r=(0,p.useRef)(null),o=(0,p.useRef)(null),[,t]=(0,p.useState)(!1),a=(0,p.useRef)(!1),n=(0,p.useCallback)(e=>{r.current=e,a.current=e!==null,t(e!==null)},[]);return(0,p.useMemo)(()=>({_containerRef:o,_setInstance:n,get isReady(){return a.current},get instance(){return r.current},get images(){return r.current?.images},render(){r.current?.render()},getCenterCoords(){return r.current?.getCenterCoords()??{x:0,y:0}},updateCoords(e){r.current?.updateCoords(e)},goCoords(e,i,l,f){r.current?.goCoords(e,i,l,f)},resize(e,i,l,f){r.current?.resize(e,i,l,f)},getSize(){return r.current?.getSize()??{width:0,height:0}},getScale(){return r.current?.getScale()??1},zoomIn(e){r.current?.zoomIn(e)},zoomOut(e){r.current?.zoomOut(e)},getConfig(){return r.current?.getConfig()??le},setBounds(e){r.current?.setBounds(e)},setEventHandlers(e){r.current?.setEventHandlers(e)},drawRect(e,i){return r.current?.drawRect(e,i)??d},drawStaticRect(e,i,l){return r.current?.drawStaticRect(e,i,l)??d},drawCircle(e,i){return r.current?.drawCircle(e,i)??d},drawStaticCircle(e,i,l){return r.current?.drawStaticCircle(e,i,l)??d},drawLine(e,i,l){return r.current?.drawLine(e,i,l)??d},drawText(e,i,l){return r.current?.drawText(e,i,l)??d},drawPath(e,i,l){return r.current?.drawPath(e,i,l)??d},drawImage(e,i){return r.current?.drawImage(e,i)??d},drawStaticImage(e,i,l){return r.current?.drawStaticImage(e,i,l)??d},drawGridLines(e,i,l,f){return r.current?.drawGridLines(e,i,l,f)??d},addDrawFunction(e,i){return r.current?.addDrawFunction(e,i)??d},clearLayer(e){r.current?.clearLayer(e)},clearAll(){r.current?.clearAll()},clearStaticCache(e){r.current?.clearStaticCache(e)},removeLayerHandle(e){r.current?.removeLayerHandle(e)}}),[n])}var ee=require("@canvas-tile-engine/core");0&&(module.exports={CanvasTileEngine,CanvasTileEngineCore,useCanvasTileEngine,useEngineContext});
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/CanvasTileEngine.tsx","../src/context/EngineContext.tsx","../src/components/draw/Rect.tsx","../src/components/draw/Circle.tsx","../src/components/draw/Image.tsx","../src/components/draw/GridLines.tsx","../src/components/draw/Line.tsx","../src/components/draw/Text.tsx","../src/components/draw/Path.tsx","../src/components/draw/StaticRect.tsx","../src/components/draw/StaticCircle.tsx","../src/components/draw/StaticImage.tsx","../src/components/draw/DrawFunction.tsx","../src/hooks/useCanvasTileEngine.ts"],"sourcesContent":["// Main component\nexport { CanvasTileEngine } from \"./components\";\n\n// Draw components\nexport {\n type RectProps,\n type CircleProps,\n type ImageProps,\n type GridLinesProps,\n type LineProps,\n type TextProps,\n type PathProps,\n type StaticRectProps,\n type StaticCircleProps,\n type StaticImageProps,\n type DrawFunctionProps,\n} from \"./components\";\n\n// Hooks\nexport { useCanvasTileEngine } from \"./hooks\";\n\n// Context\nexport { useEngineContext, type EngineContextValue } from \"./context\";\n\n// Types\nexport type {\n CanvasTileEngineProps,\n CanvasTileEngineConfig,\n Coords,\n DrawObject,\n EventHandlers,\n onClickCallback,\n onHoverCallback,\n onDrawCallback,\n Rect,\n Line,\n Circle,\n Text,\n Path,\n ImageItem,\n} from \"./types\";\nexport type { EngineHandle } from \"./hooks/useCanvasTileEngine\";\n\n// Re-export core class with different name\nexport { CanvasTileEngine as CanvasTileEngineCore } from \"@canvas-tile-engine/core\";\n","import { useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { CanvasTileEngine as CanvasTileEngineCore } from \"@canvas-tile-engine/core\";\nimport { EngineContext, type EngineContextValue } from \"../context/EngineContext\";\nimport type { CanvasTileEngineProps } from \"../types\";\n\n// Import draw components for compound pattern\nimport { Rect } from \"./draw/Rect\";\nimport { Circle } from \"./draw/Circle\";\nimport { Image } from \"./draw/Image\";\nimport { GridLines } from \"./draw/GridLines\";\nimport { Line } from \"./draw/Line\";\nimport { Text } from \"./draw/Text\";\nimport { Path } from \"./draw/Path\";\nimport { StaticRect } from \"./draw/StaticRect\";\nimport { StaticCircle } from \"./draw/StaticCircle\";\nimport { StaticImage } from \"./draw/StaticImage\";\nimport { DrawFunction } from \"./draw/DrawFunction\";\n\n/**\n * React component that renders a CanvasTileEngine.\n * Supports both imperative API (via engine handle) and declarative API (via children).\n *\n * @example Declarative API with compound components\n * ```tsx\n * function App() {\n * const engine = useCanvasTileEngine();\n *\n * return (\n * <CanvasTileEngine engine={engine} config={config}>\n * <CanvasTileEngine.GridLines cellSize={50} layer={0} />\n * <CanvasTileEngine.Image items={imageItems} layer={1} />\n * <CanvasTileEngine.Circle items={markers} layer={2} />\n * </CanvasTileEngine>\n * );\n * }\n * ```\n *\n * @example Imperative API\n * ```tsx\n * function App() {\n * const engine = useCanvasTileEngine();\n *\n * useEffect(() => {\n * if (engine.isReady) {\n * engine.drawGridLines(50);\n * engine.render();\n * }\n * }, [engine.isReady]);\n *\n * return <CanvasTileEngine engine={engine} config={config} />;\n * }\n * ```\n */\nfunction CanvasTileEngineBase({\n engine,\n config,\n center = { x: 0, y: 0 },\n className,\n style,\n children,\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n}: CanvasTileEngineProps) {\n // Stable callback refs\n const callbacksRef = useRef({\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n });\n\n // Update callback refs\n useEffect(() => {\n callbacksRef.current = {\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n };\n });\n\n // Debounced render - multiple draw components calling requestRender\n // in the same frame will trigger only one render\n const rafIdRef = useRef<number | null>(null);\n const requestRender = useCallback(() => {\n if (rafIdRef.current !== null) return;\n rafIdRef.current = requestAnimationFrame(() => {\n rafIdRef.current = null;\n engine.render();\n });\n }, [engine]);\n\n // Cleanup RAF on unmount\n useEffect(() => {\n return () => {\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n }\n };\n }, []);\n\n // Context value\n const contextValue = useMemo<EngineContextValue>(\n () => ({\n engine,\n requestRender,\n }),\n [engine, requestRender]\n );\n\n // Initialize engine when component mounts\n // Note: config and center are intentionally not in deps - we only want to create the engine once\n // Callbacks are accessed via callbacksRef which is always up-to-date\n useEffect(() => {\n const container = engine._containerRef.current;\n\n if (!container) {\n return;\n }\n\n // Create engine instance\n const instance = new CanvasTileEngineCore(container, config, center);\n\n // Set up callbacks using stable refs\n instance.onCoordsChange = (coords) => callbacksRef.current.onCoordsChange?.(coords);\n instance.onClick = (...args) => callbacksRef.current.onClick?.(...args);\n instance.onHover = (...args) => callbacksRef.current.onHover?.(...args);\n instance.onMouseDown = () => callbacksRef.current.onMouseDown?.();\n instance.onMouseUp = () => callbacksRef.current.onMouseUp?.();\n instance.onMouseLeave = () => callbacksRef.current.onMouseLeave?.();\n instance.onDraw = (...args) => callbacksRef.current.onDraw?.(...args);\n instance.onResize = () => callbacksRef.current.onResize?.();\n\n // Attach to handle\n engine._setInstance(instance);\n\n // Initial render\n instance.render();\n\n // Cleanup on unmount\n return () => {\n instance.destroy();\n engine._setInstance(null);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [engine]);\n\n return (\n <EngineContext.Provider value={contextValue}>\n <div\n ref={engine._containerRef}\n className={className}\n style={{\n ...style,\n }}\n >\n <canvas />\n </div>\n {/* Render children only when engine is ready */}\n {engine.isReady && children}\n </EngineContext.Provider>\n );\n}\n\n// Compound component pattern - attach draw components as static properties\nexport const CanvasTileEngine = Object.assign(CanvasTileEngineBase, {\n Rect,\n Circle,\n Image,\n GridLines,\n Line,\n Text,\n Path,\n StaticRect,\n StaticCircle,\n StaticImage,\n DrawFunction,\n});\n","import { createContext, useContext } from \"react\";\nimport type { EngineHandle } from \"../hooks/useCanvasTileEngine\";\n\nexport interface EngineContextValue {\n engine: EngineHandle;\n /** Request a re-render of the canvas */\n requestRender: () => void;\n}\n\nexport const EngineContext = createContext<EngineContextValue | null>(null);\n\n/**\n * Hook to access the engine context from child components.\n * Must be used within a CanvasTileEngine component.\n */\nexport function useEngineContext(): EngineContextValue {\n const context = useContext(EngineContext);\n\n if (!context) {\n throw new Error(\"useEngineContext must be used within a CanvasTileEngine component\");\n }\n\n return context;\n}\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface RectProps {\n items: DrawObject | DrawObject[];\n layer?: number;\n}\n\n/**\n * Draws rectangles on the canvas.\n */\nexport const Rect = memo(function Rect({ items, layer = 1 }: RectProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawRect(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface CircleProps {\n items: DrawObject | DrawObject[];\n layer?: number;\n}\n\n/**\n * Draws circles on the canvas.\n */\nexport const Circle = memo(function Circle({ items, layer = 1 }: CircleProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawCircle(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport { ImageItem } from \"@canvas-tile-engine/core\";\n\nexport interface ImageProps {\n items: ImageItem | ImageItem[];\n layer?: number;\n}\n\n/**\n * Draws images on the canvas.\n */\nexport const Image = memo(function Image({ items, layer = 1 }: ImageProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawImage(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\n\nexport interface GridLinesProps {\n cellSize: number;\n lineWidth?: number;\n strokeStyle?: string;\n layer?: number;\n}\n\n/**\n * Draws grid lines on the canvas.\n * Multiple GridLines can share the same layer (additive drawing).\n */\nexport const GridLines = memo(function GridLines({ cellSize, lineWidth = 1, strokeStyle = \"black\", layer = 0 }: GridLinesProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawGridLines(cellSize, lineWidth, strokeStyle, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, cellSize, lineWidth, strokeStyle, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface LineProps {\n items: { from: Coords; to: Coords } | { from: Coords; to: Coords }[];\n style?: { strokeStyle?: string; lineWidth?: number };\n layer?: number;\n}\n\n/**\n * Draws lines on the canvas.\n */\nexport const Line = memo(function Line({ items, style, layer = 1 }: LineProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawLine(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface TextProps {\n items: { coords: Coords; text: string } | { coords: Coords; text: string }[];\n style?: {\n fillStyle?: string;\n font?: string;\n textAlign?: CanvasTextAlign;\n textBaseline?: CanvasTextBaseline;\n };\n layer?: number;\n}\n\n/**\n * Draws text on the canvas.\n */\nexport const Text = memo(function Text({ items, style, layer = 2 }: TextProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawText(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface PathProps {\n items: Coords[] | Coords[][];\n style?: { strokeStyle?: string; lineWidth?: number };\n layer?: number;\n}\n\n/**\n * Draws paths/polylines on the canvas.\n */\nexport const Path = memo(function Path({ items, style, layer = 1 }: PathProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawPath(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface StaticRectProps {\n items: DrawObject[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static rectangles with caching for performance.\n * Ideal for large datasets that don't change frequently.\n */\nexport const StaticRect = memo(function StaticRect({ items, cacheKey, layer = 1 }: StaticRectProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n // Clear previous cache if cacheKey changed\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticRect(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n // Cleanup cache on unmount\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface StaticCircleProps {\n items: DrawObject[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static circles with caching for performance.\n */\nexport const StaticCircle = memo(function StaticCircle({ items, cacheKey, layer = 1 }: StaticCircleProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticCircle(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport { ImageItem } from \"@canvas-tile-engine/core\";\n\nexport interface StaticImageProps {\n items: ImageItem[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static images with caching for performance.\n * Ideal for terrain tiles or static decorations.\n */\nexport const StaticImage = memo(function StaticImage({ items, cacheKey, layer = 1 }: StaticImageProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticImage(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { CanvasTileEngineConfig, Coords } from \"@canvas-tile-engine/core\";\n\nexport interface DrawFunctionProps {\n /** The draw function to execute */\n children: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void;\n layer?: number;\n}\n\n/**\n * Custom draw function component.\n * Allows arbitrary canvas drawing within the engine's render cycle.\n * Multiple DrawFunction components can share the same layer (additive drawing).\n *\n * @example\n * ```tsx\n * <DrawFunction layer={3}>\n * {(ctx, coords, config) => {\n * ctx.fillStyle = \"red\";\n * ctx.fillRect(config.size.width / 2 - 5, config.size.height / 2 - 5, 10, 10);\n * }}\n * </DrawFunction>\n * ```\n */\nexport const DrawFunction = memo(function DrawFunction({ children, layer = 1 }: DrawFunctionProps) {\n const { engine, requestRender } = useEngineContext();\n const fnRef = useRef(children);\n\n // Keep function ref updated\n useEffect(() => {\n fnRef.current = children;\n });\n\n useEffect(() => {\n const handle = engine.addDrawFunction((ctx, coords, config) => {\n fnRef.current(ctx, coords, config);\n }, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, layer, requestRender]);\n\n return null;\n});\n","import { useRef, useCallback, useState, useMemo } from \"react\";\nimport type {\n CanvasTileEngine as CanvasTileEngineCore,\n CanvasTileEngineConfig,\n Coords,\n DrawObject,\n EventHandlers,\n LayerHandle,\n} from \"@canvas-tile-engine/core\";\n\n/** Dummy handle returned when engine is not ready */\nconst DUMMY_LAYER_HANDLE: LayerHandle = { layer: -1, id: Symbol(\"dummy\") };\n\n/** Default config when engine is not ready */\nconst DEFAULT_CONFIG: Required<CanvasTileEngineConfig> = {\n size: { width: 0, height: 0, minWidth: 100, minHeight: 100, maxWidth: Infinity, maxHeight: Infinity },\n scale: 1,\n minScale: 0.5,\n maxScale: 2,\n backgroundColor: \"#ffffff\",\n renderer: \"canvas\",\n eventHandlers: {\n drag: true,\n zoom: true,\n hover: false,\n click: false,\n resize: false,\n },\n bounds: {\n minX: -Infinity,\n maxX: Infinity,\n minY: -Infinity,\n maxY: Infinity,\n },\n coordinates: {\n enabled: false,\n shownScaleRange: { min: 0, max: Infinity },\n },\n cursor: {\n default: \"default\",\n move: \"move\",\n },\n debug: {\n enabled: false,\n hud: {\n enabled: false,\n topLeftCoordinates: false,\n coordinates: false,\n scale: false,\n tilesInView: false,\n fps: false,\n },\n eventHandlers: {\n click: false,\n hover: false,\n drag: false,\n zoom: false,\n resize: false,\n },\n },\n};\n\n/**\n * Engine handle returned by useCanvasTileEngine hook.\n * Provides access to engine methods with proper typing.\n * \n * All methods return default/dummy values when engine is not ready,\n * allowing safe usage without null checks.\n */\nexport interface EngineHandle {\n /** @internal - Used by CanvasTileEngine component */\n readonly _containerRef: React.RefObject<HTMLDivElement>;\n /** @internal - Used by CanvasTileEngine component */\n _setInstance: (engine: CanvasTileEngineCore | null) => void;\n\n /** Whether the engine is ready (mounted and initialized) */\n readonly isReady: boolean;\n\n /** The underlying engine instance (null until component mounts) */\n readonly instance: CanvasTileEngineCore | null;\n\n /** Render a frame */\n render(): void;\n\n /** Get current center coordinates */\n getCenterCoords(): Coords;\n\n /** Update center coordinates */\n updateCoords(center: Coords): void;\n\n /** Animate to target coordinates */\n goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void): void;\n\n /** Resize the canvas */\n resize(width: number, height: number, durationMs?: number, onComplete?: () => void): void;\n\n /** Get current canvas size */\n getSize(): { width: number; height: number };\n\n /** Get current canvas scale */\n getScale(): number;\n\n /** Zoom in by a factor (default: 1.5) */\n zoomIn(factor?: number): void;\n\n /** Zoom out by a factor (default: 1.5) */\n zoomOut(factor?: number): void;\n\n /** Get current config */\n getConfig(): Required<CanvasTileEngineConfig>;\n\n /** Set map boundaries */\n setBounds(bounds: { minX: number; maxX: number; minY: number; maxY: number }): void;\n\n /** Dynamically update event handlers at runtime */\n setEventHandlers(handlers: Partial<EventHandlers>): void;\n\n /** Draw rectangles */\n drawRect(items: DrawObject | DrawObject[], layer?: number): LayerHandle;\n\n /** Draw static rectangles (cached) */\n drawStaticRect(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;\n\n /** Draw circles */\n drawCircle(items: DrawObject | DrawObject[], layer?: number): LayerHandle;\n\n /** Draw static circles (cached) */\n drawStaticCircle(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;\n\n /** Draw lines */\n drawLine(\n items: { from: Coords; to: Coords } | { from: Coords; to: Coords }[],\n style?: { strokeStyle?: string; lineWidth?: number },\n layer?: number\n ): LayerHandle;\n\n /** Draw text */\n drawText(\n items: { coords: Coords; text: string } | { coords: Coords; text: string }[],\n style?: { fillStyle?: string; font?: string; textAlign?: CanvasTextAlign; textBaseline?: CanvasTextBaseline },\n layer?: number\n ): LayerHandle;\n\n /** Draw paths/polylines */\n drawPath(\n items: Coords[] | Coords[][],\n style?: { strokeStyle?: string; lineWidth?: number },\n layer?: number\n ): LayerHandle;\n\n /** Draw images */\n drawImage(\n items:\n | (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })\n | (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })[],\n layer?: number\n ): LayerHandle;\n\n /** Draw static images (cached) */\n drawStaticImage(\n items: (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })[],\n cacheKey: string,\n layer?: number\n ): LayerHandle;\n\n /** Draw grid lines */\n drawGridLines(cellSize: number, lineWidth?: number, strokeStyle?: string, layer?: number): LayerHandle;\n\n /** Add custom draw function */\n addDrawFunction(\n fn: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void,\n layer?: number\n ): LayerHandle;\n\n /** Clear a specific layer */\n clearLayer(layer: number): void;\n\n /** Clear all layers */\n clearAll(): void;\n\n /** Clear static cache */\n clearStaticCache(cacheKey?: string): void;\n\n /** Remove a previously registered draw callback */\n removeLayerHandle(handle: LayerHandle): void;\n\n /** Image loader instance (undefined until engine mounts) */\n readonly images: CanvasTileEngineCore[\"images\"] | undefined;\n}\n\n/**\n * React hook that creates an engine handle for use with CanvasTileEngine component.\n *\n * @returns Engine handle to pass to CanvasTileEngine component\n *\n * @example\n * ```tsx\n * function App() {\n * const mainMap = useCanvasTileEngine();\n * const miniMap = useCanvasTileEngine();\n *\n * useEffect(() => {\n * if (mainMap.isReady && miniMap.isReady) {\n * // Both engines are ready, draw items\n * mainMap.drawGridLines(50);\n * mainMap.render();\n * }\n * }, [mainMap.isReady, miniMap.isReady]);\n *\n * return (\n * <>\n * <CanvasTileEngine engine={mainMap} config={...} />\n * <CanvasTileEngine engine={miniMap} config={...} />\n * </>\n * );\n * }\n * ```\n */\nexport function useCanvasTileEngine(): EngineHandle {\n const instanceRef = useRef<CanvasTileEngineCore | null>(null);\n const containerRef = useRef<HTMLDivElement>(null!);\n const [isReady, setIsReady] = useState(false);\n\n const setInstance = useCallback((engine: CanvasTileEngineCore | null) => {\n instanceRef.current = engine;\n setIsReady(engine !== null);\n }, []);\n\n // Create stable handle object using useMemo\n const handle = useMemo<EngineHandle>(\n () => ({\n _containerRef: containerRef,\n _setInstance: setInstance,\n\n get isReady() {\n return isReady;\n },\n\n get instance() {\n return instanceRef.current;\n },\n\n get images() {\n return instanceRef.current?.images;\n },\n\n render() {\n instanceRef.current?.render();\n },\n\n getCenterCoords() {\n return instanceRef.current?.getCenterCoords() ?? { x: 0, y: 0 };\n },\n\n updateCoords(center: Coords) {\n instanceRef.current?.updateCoords(center);\n },\n\n goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void) {\n instanceRef.current?.goCoords(x, y, durationMs, onComplete);\n },\n\n resize(width: number, height: number, durationMs?: number, onComplete?: () => void) {\n instanceRef.current?.resize(width, height, durationMs, onComplete);\n },\n\n getSize() {\n return instanceRef.current?.getSize() ?? { width: 0, height: 0 };\n },\n\n getScale() {\n return instanceRef.current?.getScale() ?? 1;\n },\n\n zoomIn(factor?: number) {\n instanceRef.current?.zoomIn(factor);\n },\n\n zoomOut(factor?: number) {\n instanceRef.current?.zoomOut(factor);\n },\n\n getConfig() {\n return instanceRef.current?.getConfig() ?? DEFAULT_CONFIG;\n },\n\n setBounds(bounds) {\n instanceRef.current?.setBounds(bounds);\n },\n\n setEventHandlers(handlers) {\n instanceRef.current?.setEventHandlers(handlers);\n },\n\n drawRect(items, layer) {\n return instanceRef.current?.drawRect(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticRect(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticRect(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawCircle(items, layer) {\n return instanceRef.current?.drawCircle(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticCircle(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticCircle(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawLine(items, style, layer) {\n return instanceRef.current?.drawLine(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawText(items, style, layer) {\n return instanceRef.current?.drawText(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawPath(items, style, layer) {\n return instanceRef.current?.drawPath(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawImage(items, layer) {\n return instanceRef.current?.drawImage(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticImage(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticImage(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawGridLines(cellSize, lineWidth, strokeStyle, layer) {\n return instanceRef.current?.drawGridLines(cellSize, lineWidth, strokeStyle, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n addDrawFunction(fn, layer) {\n return instanceRef.current?.addDrawFunction(fn, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n clearLayer(layer) {\n instanceRef.current?.clearLayer(layer);\n },\n\n clearAll() {\n instanceRef.current?.clearAll();\n },\n\n clearStaticCache(cacheKey) {\n instanceRef.current?.clearStaticCache(cacheKey);\n },\n\n removeLayerHandle(handle) {\n instanceRef.current?.removeLayerHandle(handle);\n },\n }),\n [setInstance, isReady]\n );\n\n return handle;\n}\n"],"mappings":"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","names":["index_exports","__export","CanvasTileEngine","useCanvasTileEngine","useEngineContext","__toCommonJS","import_react","import_core","import_react","EngineContext","useEngineContext","context","import_react","Rect","items","layer","engine","requestRender","useEngineContext","handle","import_react","Circle","items","layer","engine","requestRender","useEngineContext","handle","import_react","Image","items","layer","engine","requestRender","useEngineContext","handle","import_react","GridLines","cellSize","lineWidth","strokeStyle","layer","engine","requestRender","useEngineContext","handle","import_react","Line","items","style","layer","engine","requestRender","useEngineContext","handle","import_react","Text","items","style","layer","engine","requestRender","useEngineContext","handle","import_react","Path","items","style","layer","engine","requestRender","useEngineContext","handle","import_react","StaticRect","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","handle","import_react","StaticCircle","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","handle","import_react","StaticImage","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","handle","import_react","DrawFunction","children","layer","engine","requestRender","useEngineContext","fnRef","handle","ctx","coords","config","import_jsx_runtime","CanvasTileEngineBase","engine","config","center","className","style","children","onCoordsChange","onClick","onHover","onMouseDown","onMouseUp","onMouseLeave","onDraw","onResize","callbacksRef","rafIdRef","requestRender","contextValue","container","instance","CanvasTileEngineCore","coords","args","EngineContext","CanvasTileEngine","Rect","Circle","Image","GridLines","Line","Text","Path","StaticRect","StaticCircle","StaticImage","DrawFunction","import_react","DUMMY_LAYER_HANDLE","DEFAULT_CONFIG","useCanvasTileEngine","instanceRef","containerRef","isReady","setIsReady","setInstance","engine","center","x","y","durationMs","onComplete","width","height","factor","bounds","handlers","items","layer","cacheKey","style","cellSize","lineWidth","strokeStyle","fn","handle","import_core"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/CanvasTileEngine.tsx","../src/context/EngineContext.tsx","../src/components/draw/Rect.tsx","../src/components/draw/Circle.tsx","../src/components/draw/Image.tsx","../src/components/draw/GridLines.tsx","../src/components/draw/Line.tsx","../src/components/draw/Text.tsx","../src/components/draw/Path.tsx","../src/components/draw/StaticRect.tsx","../src/components/draw/StaticCircle.tsx","../src/components/draw/StaticImage.tsx","../src/components/draw/DrawFunction.tsx","../src/hooks/useCanvasTileEngine.ts"],"sourcesContent":["// Main component\nexport { CanvasTileEngine } from \"./components\";\n\n// Draw components\nexport {\n type RectProps,\n type CircleProps,\n type ImageProps,\n type GridLinesProps,\n type LineProps,\n type TextProps,\n type PathProps,\n type StaticRectProps,\n type StaticCircleProps,\n type StaticImageProps,\n type DrawFunctionProps,\n} from \"./components\";\n\n// Hooks\nexport { useCanvasTileEngine } from \"./hooks\";\n\n// Context\nexport { useEngineContext, type EngineContextValue } from \"./context\";\n\n// Types\nexport type {\n CanvasTileEngineProps,\n CanvasTileEngineConfig,\n Coords,\n DrawObject,\n EventHandlers,\n onClickCallback,\n onHoverCallback,\n onDrawCallback,\n Rect,\n Line,\n Circle,\n Text,\n Path,\n ImageItem,\n} from \"./types\";\nexport type { EngineHandle } from \"./hooks/useCanvasTileEngine\";\n\n// Re-export core class with different name\nexport { CanvasTileEngine as CanvasTileEngineCore } from \"@canvas-tile-engine/core\";\n","import { useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { CanvasTileEngine as CanvasTileEngineCore } from \"@canvas-tile-engine/core\";\nimport { EngineContext, type EngineContextValue } from \"../context/EngineContext\";\nimport type { CanvasTileEngineProps } from \"../types\";\n\n// Import draw components for compound pattern\nimport { Rect } from \"./draw/Rect\";\nimport { Circle } from \"./draw/Circle\";\nimport { Image } from \"./draw/Image\";\nimport { GridLines } from \"./draw/GridLines\";\nimport { Line } from \"./draw/Line\";\nimport { Text } from \"./draw/Text\";\nimport { Path } from \"./draw/Path\";\nimport { StaticRect } from \"./draw/StaticRect\";\nimport { StaticCircle } from \"./draw/StaticCircle\";\nimport { StaticImage } from \"./draw/StaticImage\";\nimport { DrawFunction } from \"./draw/DrawFunction\";\n\n/**\n * React component that renders a CanvasTileEngine.\n * Supports both imperative API (via engine handle) and declarative API (via children).\n *\n * @example Declarative API with compound components\n * ```tsx\n * function App() {\n * const engine = useCanvasTileEngine();\n *\n * return (\n * <CanvasTileEngine engine={engine} config={config}>\n * <CanvasTileEngine.GridLines cellSize={50} layer={0} />\n * <CanvasTileEngine.Image items={imageItems} layer={1} />\n * <CanvasTileEngine.Circle items={markers} layer={2} />\n * </CanvasTileEngine>\n * );\n * }\n * ```\n *\n * @example Imperative API\n * ```tsx\n * function App() {\n * const engine = useCanvasTileEngine();\n *\n * useEffect(() => {\n * if (engine.isReady) {\n * engine.drawGridLines(50);\n * engine.render();\n * }\n * }, [engine.isReady]);\n *\n * return <CanvasTileEngine engine={engine} config={config} />;\n * }\n * ```\n */\nfunction CanvasTileEngineBase({\n engine,\n config,\n center = { x: 0, y: 0 },\n className,\n style,\n children,\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n onZoom,\n}: CanvasTileEngineProps) {\n // Stable callback refs\n const callbacksRef = useRef({\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n onZoom,\n });\n\n // Update callback refs\n useEffect(() => {\n callbacksRef.current = {\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n onZoom,\n };\n });\n\n // Debounced render - multiple draw components calling requestRender\n // in the same frame will trigger only one render\n const rafIdRef = useRef<number | null>(null);\n const requestRender = useCallback(() => {\n if (rafIdRef.current !== null) return;\n rafIdRef.current = requestAnimationFrame(() => {\n rafIdRef.current = null;\n engine.render();\n });\n }, [engine]);\n\n // Cleanup RAF on unmount\n useEffect(() => {\n return () => {\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n }\n };\n }, []);\n\n // Context value\n const contextValue = useMemo<EngineContextValue>(\n () => ({\n engine,\n requestRender,\n }),\n [engine, requestRender]\n );\n\n // Initialize engine when component mounts\n // Note: config and center are intentionally not in deps - we only want to create the engine once\n // Callbacks are accessed via callbacksRef which is always up-to-date\n useEffect(() => {\n const container = engine._containerRef.current;\n\n if (!container) {\n return;\n }\n\n // Create engine instance\n const instance = new CanvasTileEngineCore(container, config, center);\n\n // Set up callbacks using stable refs\n instance.onCoordsChange = (coords) => callbacksRef.current.onCoordsChange?.(coords);\n instance.onClick = (...args) => callbacksRef.current.onClick?.(...args);\n instance.onHover = (...args) => callbacksRef.current.onHover?.(...args);\n instance.onMouseDown = () => callbacksRef.current.onMouseDown?.();\n instance.onMouseUp = () => callbacksRef.current.onMouseUp?.();\n instance.onMouseLeave = () => callbacksRef.current.onMouseLeave?.();\n instance.onDraw = (...args) => callbacksRef.current.onDraw?.(...args);\n instance.onResize = () => callbacksRef.current.onResize?.();\n instance.onZoom = (scale) => callbacksRef.current.onZoom?.(scale);\n\n // Attach to handle\n engine._setInstance(instance);\n\n // Initial render\n instance.render();\n\n // Cleanup on unmount\n return () => {\n instance.destroy();\n engine._setInstance(null);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [engine]);\n\n return (\n <EngineContext.Provider value={contextValue}>\n <div\n ref={engine._containerRef}\n className={className}\n style={{\n ...style,\n }}\n >\n <canvas />\n </div>\n {/* Render children only when engine is ready */}\n {engine.isReady && children}\n </EngineContext.Provider>\n );\n}\n\n// Compound component pattern - attach draw components as static properties\nexport const CanvasTileEngine = Object.assign(CanvasTileEngineBase, {\n Rect,\n Circle,\n Image,\n GridLines,\n Line,\n Text,\n Path,\n StaticRect,\n StaticCircle,\n StaticImage,\n DrawFunction,\n});\n","import { createContext, useContext } from \"react\";\nimport type { EngineHandle } from \"../hooks/useCanvasTileEngine\";\n\nexport interface EngineContextValue {\n engine: EngineHandle;\n /** Request a re-render of the canvas */\n requestRender: () => void;\n}\n\nexport const EngineContext = createContext<EngineContextValue | null>(null);\n\n/**\n * Hook to access the engine context from child components.\n * Must be used within a CanvasTileEngine component.\n */\nexport function useEngineContext(): EngineContextValue {\n const context = useContext(EngineContext);\n\n if (!context) {\n throw new Error(\"useEngineContext must be used within a CanvasTileEngine component\");\n }\n\n return context;\n}\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface RectProps {\n items: DrawObject | DrawObject[];\n layer?: number;\n}\n\n/**\n * Draws rectangles on the canvas.\n */\nexport const Rect = memo(function Rect({ items, layer = 1 }: RectProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawRect(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface CircleProps {\n items: DrawObject | DrawObject[];\n layer?: number;\n}\n\n/**\n * Draws circles on the canvas.\n */\nexport const Circle = memo(function Circle({ items, layer = 1 }: CircleProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawCircle(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport { ImageItem } from \"@canvas-tile-engine/core\";\n\nexport interface ImageProps {\n items: ImageItem | ImageItem[];\n layer?: number;\n}\n\n/**\n * Draws images on the canvas.\n */\nexport const Image = memo(function Image({ items, layer = 1 }: ImageProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawImage(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\n\nexport interface GridLinesProps {\n cellSize: number;\n lineWidth?: number;\n strokeStyle?: string;\n layer?: number;\n}\n\n/**\n * Draws grid lines on the canvas.\n * Multiple GridLines can share the same layer (additive drawing).\n */\nexport const GridLines = memo(function GridLines({ cellSize, lineWidth = 1, strokeStyle = \"black\", layer = 0 }: GridLinesProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawGridLines(cellSize, lineWidth, strokeStyle, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, cellSize, lineWidth, strokeStyle, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface LineProps {\n items: { from: Coords; to: Coords } | { from: Coords; to: Coords }[];\n style?: { strokeStyle?: string; lineWidth?: number };\n layer?: number;\n}\n\n/**\n * Draws lines on the canvas.\n */\nexport const Line = memo(function Line({ items, style, layer = 1 }: LineProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawLine(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface TextProps {\n items: { coords: Coords; text: string } | { coords: Coords; text: string }[];\n style?: {\n fillStyle?: string;\n font?: string;\n textAlign?: CanvasTextAlign;\n textBaseline?: CanvasTextBaseline;\n };\n layer?: number;\n}\n\n/**\n * Draws text on the canvas.\n */\nexport const Text = memo(function Text({ items, style, layer = 2 }: TextProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawText(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface PathProps {\n items: Coords[] | Coords[][];\n style?: { strokeStyle?: string; lineWidth?: number };\n layer?: number;\n}\n\n/**\n * Draws paths/polylines on the canvas.\n */\nexport const Path = memo(function Path({ items, style, layer = 1 }: PathProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawPath(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface StaticRectProps {\n items: DrawObject[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static rectangles with caching for performance.\n * Ideal for large datasets that don't change frequently.\n */\nexport const StaticRect = memo(function StaticRect({ items, cacheKey, layer = 1 }: StaticRectProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n // Clear previous cache if cacheKey changed\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticRect(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n // Cleanup cache on unmount\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface StaticCircleProps {\n items: DrawObject[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static circles with caching for performance.\n */\nexport const StaticCircle = memo(function StaticCircle({ items, cacheKey, layer = 1 }: StaticCircleProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticCircle(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport { ImageItem } from \"@canvas-tile-engine/core\";\n\nexport interface StaticImageProps {\n items: ImageItem[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static images with caching for performance.\n * Ideal for terrain tiles or static decorations.\n */\nexport const StaticImage = memo(function StaticImage({ items, cacheKey, layer = 1 }: StaticImageProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticImage(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { CanvasTileEngineConfig, Coords } from \"@canvas-tile-engine/core\";\n\nexport interface DrawFunctionProps {\n /** The draw function to execute */\n children: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void;\n layer?: number;\n}\n\n/**\n * Custom draw function component.\n * Allows arbitrary canvas drawing within the engine's render cycle.\n * Multiple DrawFunction components can share the same layer (additive drawing).\n *\n * @example\n * ```tsx\n * <DrawFunction layer={3}>\n * {(ctx, coords, config) => {\n * ctx.fillStyle = \"red\";\n * ctx.fillRect(config.size.width / 2 - 5, config.size.height / 2 - 5, 10, 10);\n * }}\n * </DrawFunction>\n * ```\n */\nexport const DrawFunction = memo(function DrawFunction({ children, layer = 1 }: DrawFunctionProps) {\n const { engine, requestRender } = useEngineContext();\n const fnRef = useRef(children);\n\n // Keep function ref updated\n useEffect(() => {\n fnRef.current = children;\n });\n\n useEffect(() => {\n const handle = engine.addDrawFunction((ctx, coords, config) => {\n fnRef.current(ctx, coords, config);\n }, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, layer, requestRender]);\n\n return null;\n});\n","import { useRef, useCallback, useState, useMemo } from \"react\";\nimport type {\n CanvasTileEngine as CanvasTileEngineCore,\n CanvasTileEngineConfig,\n Coords,\n DrawObject,\n EventHandlers,\n LayerHandle,\n} from \"@canvas-tile-engine/core\";\n\n/** Dummy handle returned when engine is not ready */\nconst DUMMY_LAYER_HANDLE: LayerHandle = { layer: -1, id: Symbol(\"dummy\") };\n\n/** Default config when engine is not ready */\nconst DEFAULT_CONFIG: Required<CanvasTileEngineConfig> = {\n size: { width: 0, height: 0, minWidth: 100, minHeight: 100, maxWidth: Infinity, maxHeight: Infinity },\n scale: 1,\n minScale: 0.5,\n maxScale: 2,\n backgroundColor: \"#ffffff\",\n renderer: \"canvas\",\n eventHandlers: {\n drag: true,\n zoom: true,\n hover: false,\n click: false,\n resize: false,\n },\n bounds: {\n minX: -Infinity,\n maxX: Infinity,\n minY: -Infinity,\n maxY: Infinity,\n },\n coordinates: {\n enabled: false,\n shownScaleRange: { min: 0, max: Infinity },\n },\n cursor: {\n default: \"default\",\n move: \"move\",\n },\n debug: {\n enabled: false,\n hud: {\n enabled: false,\n topLeftCoordinates: false,\n coordinates: false,\n scale: false,\n tilesInView: false,\n fps: false,\n },\n eventHandlers: {\n click: false,\n hover: false,\n drag: false,\n zoom: false,\n resize: false,\n },\n },\n};\n\n/**\n * Engine handle returned by useCanvasTileEngine hook.\n * Provides access to engine methods with proper typing.\n * \n * All methods return default/dummy values when engine is not ready,\n * allowing safe usage without null checks.\n */\nexport interface EngineHandle {\n /** @internal - Used by CanvasTileEngine component */\n readonly _containerRef: React.RefObject<HTMLDivElement>;\n /** @internal - Used by CanvasTileEngine component */\n _setInstance: (engine: CanvasTileEngineCore | null) => void;\n\n /** Whether the engine is ready (mounted and initialized) */\n readonly isReady: boolean;\n\n /** The underlying engine instance (null until component mounts) */\n readonly instance: CanvasTileEngineCore | null;\n\n /** Render a frame */\n render(): void;\n\n /** Get current center coordinates */\n getCenterCoords(): Coords;\n\n /** Update center coordinates */\n updateCoords(center: Coords): void;\n\n /** Animate to target coordinates */\n goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void): void;\n\n /** Resize the canvas */\n resize(width: number, height: number, durationMs?: number, onComplete?: () => void): void;\n\n /** Get current canvas size */\n getSize(): { width: number; height: number };\n\n /** Get current canvas scale */\n getScale(): number;\n\n /** Zoom in by a factor (default: 1.5) */\n zoomIn(factor?: number): void;\n\n /** Zoom out by a factor (default: 1.5) */\n zoomOut(factor?: number): void;\n\n /** Get current config */\n getConfig(): Required<CanvasTileEngineConfig>;\n\n /** Set map boundaries */\n setBounds(bounds: { minX: number; maxX: number; minY: number; maxY: number }): void;\n\n /** Dynamically update event handlers at runtime */\n setEventHandlers(handlers: Partial<EventHandlers>): void;\n\n /** Draw rectangles */\n drawRect(items: DrawObject | DrawObject[], layer?: number): LayerHandle;\n\n /** Draw static rectangles (cached) */\n drawStaticRect(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;\n\n /** Draw circles */\n drawCircle(items: DrawObject | DrawObject[], layer?: number): LayerHandle;\n\n /** Draw static circles (cached) */\n drawStaticCircle(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;\n\n /** Draw lines */\n drawLine(\n items: { from: Coords; to: Coords } | { from: Coords; to: Coords }[],\n style?: { strokeStyle?: string; lineWidth?: number },\n layer?: number\n ): LayerHandle;\n\n /** Draw text */\n drawText(\n items: { coords: Coords; text: string } | { coords: Coords; text: string }[],\n style?: { fillStyle?: string; font?: string; textAlign?: CanvasTextAlign; textBaseline?: CanvasTextBaseline },\n layer?: number\n ): LayerHandle;\n\n /** Draw paths/polylines */\n drawPath(\n items: Coords[] | Coords[][],\n style?: { strokeStyle?: string; lineWidth?: number },\n layer?: number\n ): LayerHandle;\n\n /** Draw images */\n drawImage(\n items:\n | (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })\n | (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })[],\n layer?: number\n ): LayerHandle;\n\n /** Draw static images (cached) */\n drawStaticImage(\n items: (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })[],\n cacheKey: string,\n layer?: number\n ): LayerHandle;\n\n /** Draw grid lines */\n drawGridLines(cellSize: number, lineWidth?: number, strokeStyle?: string, layer?: number): LayerHandle;\n\n /** Add custom draw function */\n addDrawFunction(\n fn: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void,\n layer?: number\n ): LayerHandle;\n\n /** Clear a specific layer */\n clearLayer(layer: number): void;\n\n /** Clear all layers */\n clearAll(): void;\n\n /** Clear static cache */\n clearStaticCache(cacheKey?: string): void;\n\n /** Remove a previously registered draw callback */\n removeLayerHandle(handle: LayerHandle): void;\n\n /** Image loader instance (undefined until engine mounts) */\n readonly images: CanvasTileEngineCore[\"images\"] | undefined;\n}\n\n/**\n * React hook that creates an engine handle for use with CanvasTileEngine component.\n *\n * @returns Engine handle to pass to CanvasTileEngine component\n *\n * @example\n * ```tsx\n * function App() {\n * const mainMap = useCanvasTileEngine();\n * const miniMap = useCanvasTileEngine();\n *\n * useEffect(() => {\n * if (mainMap.isReady && miniMap.isReady) {\n * // Both engines are ready, draw items\n * mainMap.drawGridLines(50);\n * mainMap.render();\n * }\n * }, [mainMap.isReady, miniMap.isReady]);\n *\n * return (\n * <>\n * <CanvasTileEngine engine={mainMap} config={...} />\n * <CanvasTileEngine engine={miniMap} config={...} />\n * </>\n * );\n * }\n * ```\n */\nexport function useCanvasTileEngine(): EngineHandle {\n const instanceRef = useRef<CanvasTileEngineCore | null>(null);\n const containerRef = useRef<HTMLDivElement>(null!);\n // _isReady state is only used to trigger re-renders, actual value is read from isReadyRef\n const [, setIsReady] = useState(false);\n // Keep isReady in a ref so the handle getter can read it without recreating handle\n const isReadyRef = useRef(false);\n\n const setInstance = useCallback((engine: CanvasTileEngineCore | null) => {\n instanceRef.current = engine;\n isReadyRef.current = engine !== null;\n setIsReady(engine !== null);\n }, []);\n\n // Create stable handle object using useMemo\n // Note: isReady is NOT in deps - we read from isReadyRef to keep handle stable\n const handle = useMemo<EngineHandle>(\n () => ({\n _containerRef: containerRef,\n _setInstance: setInstance,\n\n get isReady() {\n return isReadyRef.current;\n },\n\n get instance() {\n return instanceRef.current;\n },\n\n get images() {\n return instanceRef.current?.images;\n },\n\n render() {\n instanceRef.current?.render();\n },\n\n getCenterCoords() {\n return instanceRef.current?.getCenterCoords() ?? { x: 0, y: 0 };\n },\n\n updateCoords(center: Coords) {\n instanceRef.current?.updateCoords(center);\n },\n\n goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void) {\n instanceRef.current?.goCoords(x, y, durationMs, onComplete);\n },\n\n resize(width: number, height: number, durationMs?: number, onComplete?: () => void) {\n instanceRef.current?.resize(width, height, durationMs, onComplete);\n },\n\n getSize() {\n return instanceRef.current?.getSize() ?? { width: 0, height: 0 };\n },\n\n getScale() {\n return instanceRef.current?.getScale() ?? 1;\n },\n\n zoomIn(factor?: number) {\n instanceRef.current?.zoomIn(factor);\n },\n\n zoomOut(factor?: number) {\n instanceRef.current?.zoomOut(factor);\n },\n\n getConfig() {\n return instanceRef.current?.getConfig() ?? DEFAULT_CONFIG;\n },\n\n setBounds(bounds) {\n instanceRef.current?.setBounds(bounds);\n },\n\n setEventHandlers(handlers) {\n instanceRef.current?.setEventHandlers(handlers);\n },\n\n drawRect(items, layer) {\n return instanceRef.current?.drawRect(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticRect(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticRect(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawCircle(items, layer) {\n return instanceRef.current?.drawCircle(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticCircle(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticCircle(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawLine(items, style, layer) {\n return instanceRef.current?.drawLine(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawText(items, style, layer) {\n return instanceRef.current?.drawText(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawPath(items, style, layer) {\n return instanceRef.current?.drawPath(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawImage(items, layer) {\n return instanceRef.current?.drawImage(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticImage(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticImage(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawGridLines(cellSize, lineWidth, strokeStyle, layer) {\n return instanceRef.current?.drawGridLines(cellSize, lineWidth, strokeStyle, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n addDrawFunction(fn, layer) {\n return instanceRef.current?.addDrawFunction(fn, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n clearLayer(layer) {\n instanceRef.current?.clearLayer(layer);\n },\n\n clearAll() {\n instanceRef.current?.clearAll();\n },\n\n clearStaticCache(cacheKey) {\n instanceRef.current?.clearStaticCache(cacheKey);\n },\n\n removeLayerHandle(handle) {\n instanceRef.current?.removeLayerHandle(handle);\n },\n }),\n [setInstance]\n );\n\n return handle;\n}\n"],"mappings":"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","names":["index_exports","__export","CanvasTileEngine","useCanvasTileEngine","useEngineContext","__toCommonJS","import_react","import_core","import_react","EngineContext","useEngineContext","context","import_react","Rect","items","layer","engine","requestRender","useEngineContext","handle","import_react","Circle","items","layer","engine","requestRender","useEngineContext","handle","import_react","Image","items","layer","engine","requestRender","useEngineContext","handle","import_react","GridLines","cellSize","lineWidth","strokeStyle","layer","engine","requestRender","useEngineContext","handle","import_react","Line","items","style","layer","engine","requestRender","useEngineContext","handle","import_react","Text","items","style","layer","engine","requestRender","useEngineContext","handle","import_react","Path","items","style","layer","engine","requestRender","useEngineContext","handle","import_react","StaticRect","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","handle","import_react","StaticCircle","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","handle","import_react","StaticImage","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","handle","import_react","DrawFunction","children","layer","engine","requestRender","useEngineContext","fnRef","handle","ctx","coords","config","import_jsx_runtime","CanvasTileEngineBase","engine","config","center","className","style","children","onCoordsChange","onClick","onHover","onMouseDown","onMouseUp","onMouseLeave","onDraw","onResize","onZoom","callbacksRef","rafIdRef","requestRender","contextValue","container","instance","CanvasTileEngineCore","coords","args","scale","EngineContext","CanvasTileEngine","Rect","Circle","Image","GridLines","Line","Text","Path","StaticRect","StaticCircle","StaticImage","DrawFunction","import_react","DUMMY_LAYER_HANDLE","DEFAULT_CONFIG","useCanvasTileEngine","instanceRef","containerRef","setIsReady","isReadyRef","setInstance","engine","center","x","y","durationMs","onComplete","width","height","factor","bounds","handlers","items","layer","cacheKey","style","cellSize","lineWidth","strokeStyle","fn","handle","import_core"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useEffect as y,useRef as
|
|
1
|
+
import{useEffect as y,useRef as _,useCallback as Ce,useMemo as ye}from"react";import{CanvasTileEngine as xe}from"@canvas-tile-engine/core";import{createContext as X,useContext as N}from"react";var C=X(null);function c(){let r=N(C);if(!r)throw new Error("useEngineContext must be used within a CanvasTileEngine component");return r}import{useEffect as U,memo as Z}from"react";var P=Z(function({items:i,layer:t=1}){let{engine:a,requestRender:n}=c();return U(()=>{let s=a.drawRect(i,t);return n(),()=>{s&&a.removeLayerHandle(s)}},[a,i,t,n]),null});import{useEffect as J,memo as Q}from"react";var h=Q(function({items:i,layer:t=1}){let{engine:a,requestRender:n}=c();return J(()=>{let s=a.drawCircle(i,t);return n(),()=>{s&&a.removeLayerHandle(s)}},[a,i,t,n]),null});import{useEffect as $,memo as K}from"react";var I=K(function({items:i,layer:t=1}){let{engine:a,requestRender:n}=c();return $(()=>{let s=a.drawImage(i,t);return n(),()=>{s&&a.removeLayerHandle(s)}},[a,i,t,n]),null});import{useEffect as ee,memo as re}from"react";var T=re(function({cellSize:i,lineWidth:t=1,strokeStyle:a="black",layer:n=0}){let{engine:s,requestRender:e}=c();return ee(()=>{let o=s.drawGridLines(i,t,a,n);return e(),()=>{o&&s.removeLayerHandle(o)}},[s,i,t,a,n,e]),null});import{useEffect as ne,memo as te}from"react";var H=te(function({items:i,style:t,layer:a=1}){let{engine:n,requestRender:s}=c();return ne(()=>{let e=n.drawLine(i,t,a);return s(),()=>{e&&n.removeLayerHandle(e)}},[n,i,t,a,s]),null});import{useEffect as oe,memo as ae}from"react";var D=ae(function({items:i,style:t,layer:a=2}){let{engine:n,requestRender:s}=c();return oe(()=>{let e=n.drawText(i,t,a);return s(),()=>{e&&n.removeLayerHandle(e)}},[n,i,t,a,s]),null});import{useEffect as ie,memo as se}from"react";var O=se(function({items:i,style:t,layer:a=1}){let{engine:n,requestRender:s}=c();return ie(()=>{let e=n.drawPath(i,t,a);return s(),()=>{e&&n.removeLayerHandle(e)}},[n,i,t,a,s]),null});import{useEffect as j,useRef as ce,memo as le}from"react";var k=le(function({items:i,cacheKey:t,layer:a=1}){let{engine:n,requestRender:s}=c(),e=ce(t);return j(()=>{if(i.length===0)return;e.current!==t&&(n.clearStaticCache(e.current),e.current=t);let o=n.drawStaticRect(i,t,a);return s(),()=>{o&&n.removeLayerHandle(o)}},[n,i,t,a,s]),j(()=>()=>{n.clearStaticCache(t)},[n,t]),null});import{useEffect as z,useRef as ue,memo as me}from"react";var q=me(function({items:i,cacheKey:t,layer:a=1}){let{engine:n,requestRender:s}=c(),e=ue(t);return z(()=>{if(i.length===0)return;e.current!==t&&(n.clearStaticCache(e.current),e.current=t);let o=n.drawStaticCircle(i,t,a);return s(),()=>{o&&n.removeLayerHandle(o)}},[n,i,t,a,s]),z(()=>()=>{n.clearStaticCache(t)},[n,t]),null});import{useEffect as F,useRef as de,memo as fe}from"react";var M=fe(function({items:i,cacheKey:t,layer:a=1}){let{engine:n,requestRender:s}=c(),e=de(t);return F(()=>{if(i.length===0)return;e.current!==t&&(n.clearStaticCache(e.current),e.current=t);let o=n.drawStaticImage(i,t,a);return s(),()=>{o&&n.removeLayerHandle(o)}},[n,i,t,a,s]),F(()=>()=>{n.clearStaticCache(t)},[n,t]),null});import{useEffect as G,useRef as ge,memo as pe}from"react";var A=pe(function({children:i,layer:t=1}){let{engine:a,requestRender:n}=c(),s=ge(i);return G(()=>{s.current=i}),G(()=>{let e=a.addDrawFunction((o,l,d)=>{s.current(o,l,d)},t);return n(),()=>{e&&a.removeLayerHandle(e)}},[a,t,n]),null});import{jsx as V,jsxs as be}from"react/jsx-runtime";function ve({engine:r,config:i,center:t={x:0,y:0},className:a,style:n,children:s,onCoordsChange:e,onClick:o,onHover:l,onMouseDown:d,onMouseUp:v,onMouseLeave:b,onDraw:E,onResize:w,onZoom:R}){let f=_({onCoordsChange:e,onClick:o,onHover:l,onMouseDown:d,onMouseUp:v,onMouseLeave:b,onDraw:E,onResize:w,onZoom:R});y(()=>{f.current={onCoordsChange:e,onClick:o,onHover:l,onMouseDown:d,onMouseUp:v,onMouseLeave:b,onDraw:E,onResize:w,onZoom:R}});let p=_(null),L=Ce(()=>{p.current===null&&(p.current=requestAnimationFrame(()=>{p.current=null,r.render()}))},[r]);y(()=>()=>{p.current!==null&&cancelAnimationFrame(p.current)},[]);let Y=ye(()=>({engine:r,requestRender:L}),[r,L]);return y(()=>{let S=r._containerRef.current;if(!S)return;let u=new xe(S,i,t);return u.onCoordsChange=g=>f.current.onCoordsChange?.(g),u.onClick=(...g)=>f.current.onClick?.(...g),u.onHover=(...g)=>f.current.onHover?.(...g),u.onMouseDown=()=>f.current.onMouseDown?.(),u.onMouseUp=()=>f.current.onMouseUp?.(),u.onMouseLeave=()=>f.current.onMouseLeave?.(),u.onDraw=(...g)=>f.current.onDraw?.(...g),u.onResize=()=>f.current.onResize?.(),u.onZoom=g=>f.current.onZoom?.(g),r._setInstance(u),u.render(),()=>{u.destroy(),r._setInstance(null)}},[r]),be(C.Provider,{value:Y,children:[V("div",{ref:r._containerRef,className:a,style:{...n},children:V("canvas",{})}),r.isReady&&s]})}var B=Object.assign(ve,{Rect:P,Circle:h,Image:I,GridLines:T,Line:H,Text:D,Path:O,StaticRect:k,StaticCircle:q,StaticImage:M,DrawFunction:A});import{useRef as x,useCallback as Ee,useState as we,useMemo as Re}from"react";var m={layer:-1,id:Symbol("dummy")},Le={size:{width:0,height:0,minWidth:100,minHeight:100,maxWidth:1/0,maxHeight:1/0},scale:1,minScale:.5,maxScale:2,backgroundColor:"#ffffff",renderer:"canvas",eventHandlers:{drag:!0,zoom:!0,hover:!1,click:!1,resize:!1},bounds:{minX:-1/0,maxX:1/0,minY:-1/0,maxY:1/0},coordinates:{enabled:!1,shownScaleRange:{min:0,max:1/0}},cursor:{default:"default",move:"move"},debug:{enabled:!1,hud:{enabled:!1,topLeftCoordinates:!1,coordinates:!1,scale:!1,tilesInView:!1,fps:!1},eventHandlers:{click:!1,hover:!1,drag:!1,zoom:!1,resize:!1}}};function W(){let r=x(null),i=x(null),[,t]=we(!1),a=x(!1),n=Ee(e=>{r.current=e,a.current=e!==null,t(e!==null)},[]);return Re(()=>({_containerRef:i,_setInstance:n,get isReady(){return a.current},get instance(){return r.current},get images(){return r.current?.images},render(){r.current?.render()},getCenterCoords(){return r.current?.getCenterCoords()??{x:0,y:0}},updateCoords(e){r.current?.updateCoords(e)},goCoords(e,o,l,d){r.current?.goCoords(e,o,l,d)},resize(e,o,l,d){r.current?.resize(e,o,l,d)},getSize(){return r.current?.getSize()??{width:0,height:0}},getScale(){return r.current?.getScale()??1},zoomIn(e){r.current?.zoomIn(e)},zoomOut(e){r.current?.zoomOut(e)},getConfig(){return r.current?.getConfig()??Le},setBounds(e){r.current?.setBounds(e)},setEventHandlers(e){r.current?.setEventHandlers(e)},drawRect(e,o){return r.current?.drawRect(e,o)??m},drawStaticRect(e,o,l){return r.current?.drawStaticRect(e,o,l)??m},drawCircle(e,o){return r.current?.drawCircle(e,o)??m},drawStaticCircle(e,o,l){return r.current?.drawStaticCircle(e,o,l)??m},drawLine(e,o,l){return r.current?.drawLine(e,o,l)??m},drawText(e,o,l){return r.current?.drawText(e,o,l)??m},drawPath(e,o,l){return r.current?.drawPath(e,o,l)??m},drawImage(e,o){return r.current?.drawImage(e,o)??m},drawStaticImage(e,o,l){return r.current?.drawStaticImage(e,o,l)??m},drawGridLines(e,o,l,d){return r.current?.drawGridLines(e,o,l,d)??m},addDrawFunction(e,o){return r.current?.addDrawFunction(e,o)??m},clearLayer(e){r.current?.clearLayer(e)},clearAll(){r.current?.clearAll()},clearStaticCache(e){r.current?.clearStaticCache(e)},removeLayerHandle(e){r.current?.removeLayerHandle(e)}}),[n])}import{CanvasTileEngine as zr}from"@canvas-tile-engine/core";export{B as CanvasTileEngine,zr as CanvasTileEngineCore,W as useCanvasTileEngine,c as useEngineContext};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CanvasTileEngine.tsx","../src/context/EngineContext.tsx","../src/components/draw/Rect.tsx","../src/components/draw/Circle.tsx","../src/components/draw/Image.tsx","../src/components/draw/GridLines.tsx","../src/components/draw/Line.tsx","../src/components/draw/Text.tsx","../src/components/draw/Path.tsx","../src/components/draw/StaticRect.tsx","../src/components/draw/StaticCircle.tsx","../src/components/draw/StaticImage.tsx","../src/components/draw/DrawFunction.tsx","../src/hooks/useCanvasTileEngine.ts","../src/index.ts"],"sourcesContent":["import { useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { CanvasTileEngine as CanvasTileEngineCore } from \"@canvas-tile-engine/core\";\nimport { EngineContext, type EngineContextValue } from \"../context/EngineContext\";\nimport type { CanvasTileEngineProps } from \"../types\";\n\n// Import draw components for compound pattern\nimport { Rect } from \"./draw/Rect\";\nimport { Circle } from \"./draw/Circle\";\nimport { Image } from \"./draw/Image\";\nimport { GridLines } from \"./draw/GridLines\";\nimport { Line } from \"./draw/Line\";\nimport { Text } from \"./draw/Text\";\nimport { Path } from \"./draw/Path\";\nimport { StaticRect } from \"./draw/StaticRect\";\nimport { StaticCircle } from \"./draw/StaticCircle\";\nimport { StaticImage } from \"./draw/StaticImage\";\nimport { DrawFunction } from \"./draw/DrawFunction\";\n\n/**\n * React component that renders a CanvasTileEngine.\n * Supports both imperative API (via engine handle) and declarative API (via children).\n *\n * @example Declarative API with compound components\n * ```tsx\n * function App() {\n * const engine = useCanvasTileEngine();\n *\n * return (\n * <CanvasTileEngine engine={engine} config={config}>\n * <CanvasTileEngine.GridLines cellSize={50} layer={0} />\n * <CanvasTileEngine.Image items={imageItems} layer={1} />\n * <CanvasTileEngine.Circle items={markers} layer={2} />\n * </CanvasTileEngine>\n * );\n * }\n * ```\n *\n * @example Imperative API\n * ```tsx\n * function App() {\n * const engine = useCanvasTileEngine();\n *\n * useEffect(() => {\n * if (engine.isReady) {\n * engine.drawGridLines(50);\n * engine.render();\n * }\n * }, [engine.isReady]);\n *\n * return <CanvasTileEngine engine={engine} config={config} />;\n * }\n * ```\n */\nfunction CanvasTileEngineBase({\n engine,\n config,\n center = { x: 0, y: 0 },\n className,\n style,\n children,\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n}: CanvasTileEngineProps) {\n // Stable callback refs\n const callbacksRef = useRef({\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n });\n\n // Update callback refs\n useEffect(() => {\n callbacksRef.current = {\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n };\n });\n\n // Debounced render - multiple draw components calling requestRender\n // in the same frame will trigger only one render\n const rafIdRef = useRef<number | null>(null);\n const requestRender = useCallback(() => {\n if (rafIdRef.current !== null) return;\n rafIdRef.current = requestAnimationFrame(() => {\n rafIdRef.current = null;\n engine.render();\n });\n }, [engine]);\n\n // Cleanup RAF on unmount\n useEffect(() => {\n return () => {\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n }\n };\n }, []);\n\n // Context value\n const contextValue = useMemo<EngineContextValue>(\n () => ({\n engine,\n requestRender,\n }),\n [engine, requestRender]\n );\n\n // Initialize engine when component mounts\n // Note: config and center are intentionally not in deps - we only want to create the engine once\n // Callbacks are accessed via callbacksRef which is always up-to-date\n useEffect(() => {\n const container = engine._containerRef.current;\n\n if (!container) {\n return;\n }\n\n // Create engine instance\n const instance = new CanvasTileEngineCore(container, config, center);\n\n // Set up callbacks using stable refs\n instance.onCoordsChange = (coords) => callbacksRef.current.onCoordsChange?.(coords);\n instance.onClick = (...args) => callbacksRef.current.onClick?.(...args);\n instance.onHover = (...args) => callbacksRef.current.onHover?.(...args);\n instance.onMouseDown = () => callbacksRef.current.onMouseDown?.();\n instance.onMouseUp = () => callbacksRef.current.onMouseUp?.();\n instance.onMouseLeave = () => callbacksRef.current.onMouseLeave?.();\n instance.onDraw = (...args) => callbacksRef.current.onDraw?.(...args);\n instance.onResize = () => callbacksRef.current.onResize?.();\n\n // Attach to handle\n engine._setInstance(instance);\n\n // Initial render\n instance.render();\n\n // Cleanup on unmount\n return () => {\n instance.destroy();\n engine._setInstance(null);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [engine]);\n\n return (\n <EngineContext.Provider value={contextValue}>\n <div\n ref={engine._containerRef}\n className={className}\n style={{\n ...style,\n }}\n >\n <canvas />\n </div>\n {/* Render children only when engine is ready */}\n {engine.isReady && children}\n </EngineContext.Provider>\n );\n}\n\n// Compound component pattern - attach draw components as static properties\nexport const CanvasTileEngine = Object.assign(CanvasTileEngineBase, {\n Rect,\n Circle,\n Image,\n GridLines,\n Line,\n Text,\n Path,\n StaticRect,\n StaticCircle,\n StaticImage,\n DrawFunction,\n});\n","import { createContext, useContext } from \"react\";\nimport type { EngineHandle } from \"../hooks/useCanvasTileEngine\";\n\nexport interface EngineContextValue {\n engine: EngineHandle;\n /** Request a re-render of the canvas */\n requestRender: () => void;\n}\n\nexport const EngineContext = createContext<EngineContextValue | null>(null);\n\n/**\n * Hook to access the engine context from child components.\n * Must be used within a CanvasTileEngine component.\n */\nexport function useEngineContext(): EngineContextValue {\n const context = useContext(EngineContext);\n\n if (!context) {\n throw new Error(\"useEngineContext must be used within a CanvasTileEngine component\");\n }\n\n return context;\n}\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface RectProps {\n items: DrawObject | DrawObject[];\n layer?: number;\n}\n\n/**\n * Draws rectangles on the canvas.\n */\nexport const Rect = memo(function Rect({ items, layer = 1 }: RectProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawRect(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface CircleProps {\n items: DrawObject | DrawObject[];\n layer?: number;\n}\n\n/**\n * Draws circles on the canvas.\n */\nexport const Circle = memo(function Circle({ items, layer = 1 }: CircleProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawCircle(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport { ImageItem } from \"@canvas-tile-engine/core\";\n\nexport interface ImageProps {\n items: ImageItem | ImageItem[];\n layer?: number;\n}\n\n/**\n * Draws images on the canvas.\n */\nexport const Image = memo(function Image({ items, layer = 1 }: ImageProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawImage(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\n\nexport interface GridLinesProps {\n cellSize: number;\n lineWidth?: number;\n strokeStyle?: string;\n layer?: number;\n}\n\n/**\n * Draws grid lines on the canvas.\n * Multiple GridLines can share the same layer (additive drawing).\n */\nexport const GridLines = memo(function GridLines({ cellSize, lineWidth = 1, strokeStyle = \"black\", layer = 0 }: GridLinesProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawGridLines(cellSize, lineWidth, strokeStyle, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, cellSize, lineWidth, strokeStyle, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface LineProps {\n items: { from: Coords; to: Coords } | { from: Coords; to: Coords }[];\n style?: { strokeStyle?: string; lineWidth?: number };\n layer?: number;\n}\n\n/**\n * Draws lines on the canvas.\n */\nexport const Line = memo(function Line({ items, style, layer = 1 }: LineProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawLine(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface TextProps {\n items: { coords: Coords; text: string } | { coords: Coords; text: string }[];\n style?: {\n fillStyle?: string;\n font?: string;\n textAlign?: CanvasTextAlign;\n textBaseline?: CanvasTextBaseline;\n };\n layer?: number;\n}\n\n/**\n * Draws text on the canvas.\n */\nexport const Text = memo(function Text({ items, style, layer = 2 }: TextProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawText(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface PathProps {\n items: Coords[] | Coords[][];\n style?: { strokeStyle?: string; lineWidth?: number };\n layer?: number;\n}\n\n/**\n * Draws paths/polylines on the canvas.\n */\nexport const Path = memo(function Path({ items, style, layer = 1 }: PathProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawPath(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface StaticRectProps {\n items: DrawObject[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static rectangles with caching for performance.\n * Ideal for large datasets that don't change frequently.\n */\nexport const StaticRect = memo(function StaticRect({ items, cacheKey, layer = 1 }: StaticRectProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n // Clear previous cache if cacheKey changed\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticRect(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n // Cleanup cache on unmount\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface StaticCircleProps {\n items: DrawObject[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static circles with caching for performance.\n */\nexport const StaticCircle = memo(function StaticCircle({ items, cacheKey, layer = 1 }: StaticCircleProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticCircle(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport { ImageItem } from \"@canvas-tile-engine/core\";\n\nexport interface StaticImageProps {\n items: ImageItem[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static images with caching for performance.\n * Ideal for terrain tiles or static decorations.\n */\nexport const StaticImage = memo(function StaticImage({ items, cacheKey, layer = 1 }: StaticImageProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticImage(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { CanvasTileEngineConfig, Coords } from \"@canvas-tile-engine/core\";\n\nexport interface DrawFunctionProps {\n /** The draw function to execute */\n children: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void;\n layer?: number;\n}\n\n/**\n * Custom draw function component.\n * Allows arbitrary canvas drawing within the engine's render cycle.\n * Multiple DrawFunction components can share the same layer (additive drawing).\n *\n * @example\n * ```tsx\n * <DrawFunction layer={3}>\n * {(ctx, coords, config) => {\n * ctx.fillStyle = \"red\";\n * ctx.fillRect(config.size.width / 2 - 5, config.size.height / 2 - 5, 10, 10);\n * }}\n * </DrawFunction>\n * ```\n */\nexport const DrawFunction = memo(function DrawFunction({ children, layer = 1 }: DrawFunctionProps) {\n const { engine, requestRender } = useEngineContext();\n const fnRef = useRef(children);\n\n // Keep function ref updated\n useEffect(() => {\n fnRef.current = children;\n });\n\n useEffect(() => {\n const handle = engine.addDrawFunction((ctx, coords, config) => {\n fnRef.current(ctx, coords, config);\n }, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, layer, requestRender]);\n\n return null;\n});\n","import { useRef, useCallback, useState, useMemo } from \"react\";\nimport type {\n CanvasTileEngine as CanvasTileEngineCore,\n CanvasTileEngineConfig,\n Coords,\n DrawObject,\n EventHandlers,\n LayerHandle,\n} from \"@canvas-tile-engine/core\";\n\n/** Dummy handle returned when engine is not ready */\nconst DUMMY_LAYER_HANDLE: LayerHandle = { layer: -1, id: Symbol(\"dummy\") };\n\n/** Default config when engine is not ready */\nconst DEFAULT_CONFIG: Required<CanvasTileEngineConfig> = {\n size: { width: 0, height: 0, minWidth: 100, minHeight: 100, maxWidth: Infinity, maxHeight: Infinity },\n scale: 1,\n minScale: 0.5,\n maxScale: 2,\n backgroundColor: \"#ffffff\",\n renderer: \"canvas\",\n eventHandlers: {\n drag: true,\n zoom: true,\n hover: false,\n click: false,\n resize: false,\n },\n bounds: {\n minX: -Infinity,\n maxX: Infinity,\n minY: -Infinity,\n maxY: Infinity,\n },\n coordinates: {\n enabled: false,\n shownScaleRange: { min: 0, max: Infinity },\n },\n cursor: {\n default: \"default\",\n move: \"move\",\n },\n debug: {\n enabled: false,\n hud: {\n enabled: false,\n topLeftCoordinates: false,\n coordinates: false,\n scale: false,\n tilesInView: false,\n fps: false,\n },\n eventHandlers: {\n click: false,\n hover: false,\n drag: false,\n zoom: false,\n resize: false,\n },\n },\n};\n\n/**\n * Engine handle returned by useCanvasTileEngine hook.\n * Provides access to engine methods with proper typing.\n * \n * All methods return default/dummy values when engine is not ready,\n * allowing safe usage without null checks.\n */\nexport interface EngineHandle {\n /** @internal - Used by CanvasTileEngine component */\n readonly _containerRef: React.RefObject<HTMLDivElement>;\n /** @internal - Used by CanvasTileEngine component */\n _setInstance: (engine: CanvasTileEngineCore | null) => void;\n\n /** Whether the engine is ready (mounted and initialized) */\n readonly isReady: boolean;\n\n /** The underlying engine instance (null until component mounts) */\n readonly instance: CanvasTileEngineCore | null;\n\n /** Render a frame */\n render(): void;\n\n /** Get current center coordinates */\n getCenterCoords(): Coords;\n\n /** Update center coordinates */\n updateCoords(center: Coords): void;\n\n /** Animate to target coordinates */\n goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void): void;\n\n /** Resize the canvas */\n resize(width: number, height: number, durationMs?: number, onComplete?: () => void): void;\n\n /** Get current canvas size */\n getSize(): { width: number; height: number };\n\n /** Get current canvas scale */\n getScale(): number;\n\n /** Zoom in by a factor (default: 1.5) */\n zoomIn(factor?: number): void;\n\n /** Zoom out by a factor (default: 1.5) */\n zoomOut(factor?: number): void;\n\n /** Get current config */\n getConfig(): Required<CanvasTileEngineConfig>;\n\n /** Set map boundaries */\n setBounds(bounds: { minX: number; maxX: number; minY: number; maxY: number }): void;\n\n /** Dynamically update event handlers at runtime */\n setEventHandlers(handlers: Partial<EventHandlers>): void;\n\n /** Draw rectangles */\n drawRect(items: DrawObject | DrawObject[], layer?: number): LayerHandle;\n\n /** Draw static rectangles (cached) */\n drawStaticRect(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;\n\n /** Draw circles */\n drawCircle(items: DrawObject | DrawObject[], layer?: number): LayerHandle;\n\n /** Draw static circles (cached) */\n drawStaticCircle(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;\n\n /** Draw lines */\n drawLine(\n items: { from: Coords; to: Coords } | { from: Coords; to: Coords }[],\n style?: { strokeStyle?: string; lineWidth?: number },\n layer?: number\n ): LayerHandle;\n\n /** Draw text */\n drawText(\n items: { coords: Coords; text: string } | { coords: Coords; text: string }[],\n style?: { fillStyle?: string; font?: string; textAlign?: CanvasTextAlign; textBaseline?: CanvasTextBaseline },\n layer?: number\n ): LayerHandle;\n\n /** Draw paths/polylines */\n drawPath(\n items: Coords[] | Coords[][],\n style?: { strokeStyle?: string; lineWidth?: number },\n layer?: number\n ): LayerHandle;\n\n /** Draw images */\n drawImage(\n items:\n | (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })\n | (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })[],\n layer?: number\n ): LayerHandle;\n\n /** Draw static images (cached) */\n drawStaticImage(\n items: (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })[],\n cacheKey: string,\n layer?: number\n ): LayerHandle;\n\n /** Draw grid lines */\n drawGridLines(cellSize: number, lineWidth?: number, strokeStyle?: string, layer?: number): LayerHandle;\n\n /** Add custom draw function */\n addDrawFunction(\n fn: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void,\n layer?: number\n ): LayerHandle;\n\n /** Clear a specific layer */\n clearLayer(layer: number): void;\n\n /** Clear all layers */\n clearAll(): void;\n\n /** Clear static cache */\n clearStaticCache(cacheKey?: string): void;\n\n /** Remove a previously registered draw callback */\n removeLayerHandle(handle: LayerHandle): void;\n\n /** Image loader instance (undefined until engine mounts) */\n readonly images: CanvasTileEngineCore[\"images\"] | undefined;\n}\n\n/**\n * React hook that creates an engine handle for use with CanvasTileEngine component.\n *\n * @returns Engine handle to pass to CanvasTileEngine component\n *\n * @example\n * ```tsx\n * function App() {\n * const mainMap = useCanvasTileEngine();\n * const miniMap = useCanvasTileEngine();\n *\n * useEffect(() => {\n * if (mainMap.isReady && miniMap.isReady) {\n * // Both engines are ready, draw items\n * mainMap.drawGridLines(50);\n * mainMap.render();\n * }\n * }, [mainMap.isReady, miniMap.isReady]);\n *\n * return (\n * <>\n * <CanvasTileEngine engine={mainMap} config={...} />\n * <CanvasTileEngine engine={miniMap} config={...} />\n * </>\n * );\n * }\n * ```\n */\nexport function useCanvasTileEngine(): EngineHandle {\n const instanceRef = useRef<CanvasTileEngineCore | null>(null);\n const containerRef = useRef<HTMLDivElement>(null!);\n const [isReady, setIsReady] = useState(false);\n\n const setInstance = useCallback((engine: CanvasTileEngineCore | null) => {\n instanceRef.current = engine;\n setIsReady(engine !== null);\n }, []);\n\n // Create stable handle object using useMemo\n const handle = useMemo<EngineHandle>(\n () => ({\n _containerRef: containerRef,\n _setInstance: setInstance,\n\n get isReady() {\n return isReady;\n },\n\n get instance() {\n return instanceRef.current;\n },\n\n get images() {\n return instanceRef.current?.images;\n },\n\n render() {\n instanceRef.current?.render();\n },\n\n getCenterCoords() {\n return instanceRef.current?.getCenterCoords() ?? { x: 0, y: 0 };\n },\n\n updateCoords(center: Coords) {\n instanceRef.current?.updateCoords(center);\n },\n\n goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void) {\n instanceRef.current?.goCoords(x, y, durationMs, onComplete);\n },\n\n resize(width: number, height: number, durationMs?: number, onComplete?: () => void) {\n instanceRef.current?.resize(width, height, durationMs, onComplete);\n },\n\n getSize() {\n return instanceRef.current?.getSize() ?? { width: 0, height: 0 };\n },\n\n getScale() {\n return instanceRef.current?.getScale() ?? 1;\n },\n\n zoomIn(factor?: number) {\n instanceRef.current?.zoomIn(factor);\n },\n\n zoomOut(factor?: number) {\n instanceRef.current?.zoomOut(factor);\n },\n\n getConfig() {\n return instanceRef.current?.getConfig() ?? DEFAULT_CONFIG;\n },\n\n setBounds(bounds) {\n instanceRef.current?.setBounds(bounds);\n },\n\n setEventHandlers(handlers) {\n instanceRef.current?.setEventHandlers(handlers);\n },\n\n drawRect(items, layer) {\n return instanceRef.current?.drawRect(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticRect(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticRect(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawCircle(items, layer) {\n return instanceRef.current?.drawCircle(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticCircle(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticCircle(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawLine(items, style, layer) {\n return instanceRef.current?.drawLine(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawText(items, style, layer) {\n return instanceRef.current?.drawText(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawPath(items, style, layer) {\n return instanceRef.current?.drawPath(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawImage(items, layer) {\n return instanceRef.current?.drawImage(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticImage(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticImage(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawGridLines(cellSize, lineWidth, strokeStyle, layer) {\n return instanceRef.current?.drawGridLines(cellSize, lineWidth, strokeStyle, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n addDrawFunction(fn, layer) {\n return instanceRef.current?.addDrawFunction(fn, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n clearLayer(layer) {\n instanceRef.current?.clearLayer(layer);\n },\n\n clearAll() {\n instanceRef.current?.clearAll();\n },\n\n clearStaticCache(cacheKey) {\n instanceRef.current?.clearStaticCache(cacheKey);\n },\n\n removeLayerHandle(handle) {\n instanceRef.current?.removeLayerHandle(handle);\n },\n }),\n [setInstance, isReady]\n );\n\n return handle;\n}\n","// Main component\nexport { CanvasTileEngine } from \"./components\";\n\n// Draw components\nexport {\n type RectProps,\n type CircleProps,\n type ImageProps,\n type GridLinesProps,\n type LineProps,\n type TextProps,\n type PathProps,\n type StaticRectProps,\n type StaticCircleProps,\n type StaticImageProps,\n type DrawFunctionProps,\n} from \"./components\";\n\n// Hooks\nexport { useCanvasTileEngine } from \"./hooks\";\n\n// Context\nexport { useEngineContext, type EngineContextValue } from \"./context\";\n\n// Types\nexport type {\n CanvasTileEngineProps,\n CanvasTileEngineConfig,\n Coords,\n DrawObject,\n EventHandlers,\n onClickCallback,\n onHoverCallback,\n onDrawCallback,\n Rect,\n Line,\n Circle,\n Text,\n Path,\n ImageItem,\n} from \"./types\";\nexport type { EngineHandle } from \"./hooks/useCanvasTileEngine\";\n\n// Re-export core class with different name\nexport { CanvasTileEngine as CanvasTileEngineCore } from \"@canvas-tile-engine/core\";\n"],"mappings":"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","names":["useEffect","useRef","useCallback","useMemo","CanvasTileEngineCore","createContext","useContext","EngineContext","useEngineContext","context","useEffect","memo","Rect","memo","items","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Circle","memo","items","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Image","memo","items","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","GridLines","memo","cellSize","lineWidth","strokeStyle","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Line","memo","items","style","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Text","memo","items","style","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Path","memo","items","style","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","useRef","memo","StaticRect","memo","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","useRef","useEffect","handle","useEffect","useRef","memo","StaticCircle","memo","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","useRef","useEffect","handle","useEffect","useRef","memo","StaticImage","memo","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","useRef","useEffect","handle","useEffect","useRef","memo","DrawFunction","memo","children","layer","engine","requestRender","useEngineContext","fnRef","useRef","useEffect","handle","ctx","coords","config","jsx","jsxs","CanvasTileEngineBase","engine","config","center","className","style","children","onCoordsChange","onClick","onHover","onMouseDown","onMouseUp","onMouseLeave","onDraw","onResize","callbacksRef","useRef","useEffect","rafIdRef","requestRender","useCallback","contextValue","useMemo","container","instance","CanvasTileEngineCore","coords","args","EngineContext","CanvasTileEngine","Rect","Circle","Image","GridLines","Line","Text","Path","StaticRect","StaticCircle","StaticImage","DrawFunction","useRef","useCallback","useState","useMemo","DUMMY_LAYER_HANDLE","DEFAULT_CONFIG","useCanvasTileEngine","instanceRef","containerRef","isReady","setIsReady","setInstance","engine","center","x","y","durationMs","onComplete","width","height","factor","bounds","handlers","items","layer","cacheKey","style","cellSize","lineWidth","strokeStyle","fn","handle","CanvasTileEngine"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/CanvasTileEngine.tsx","../src/context/EngineContext.tsx","../src/components/draw/Rect.tsx","../src/components/draw/Circle.tsx","../src/components/draw/Image.tsx","../src/components/draw/GridLines.tsx","../src/components/draw/Line.tsx","../src/components/draw/Text.tsx","../src/components/draw/Path.tsx","../src/components/draw/StaticRect.tsx","../src/components/draw/StaticCircle.tsx","../src/components/draw/StaticImage.tsx","../src/components/draw/DrawFunction.tsx","../src/hooks/useCanvasTileEngine.ts","../src/index.ts"],"sourcesContent":["import { useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { CanvasTileEngine as CanvasTileEngineCore } from \"@canvas-tile-engine/core\";\nimport { EngineContext, type EngineContextValue } from \"../context/EngineContext\";\nimport type { CanvasTileEngineProps } from \"../types\";\n\n// Import draw components for compound pattern\nimport { Rect } from \"./draw/Rect\";\nimport { Circle } from \"./draw/Circle\";\nimport { Image } from \"./draw/Image\";\nimport { GridLines } from \"./draw/GridLines\";\nimport { Line } from \"./draw/Line\";\nimport { Text } from \"./draw/Text\";\nimport { Path } from \"./draw/Path\";\nimport { StaticRect } from \"./draw/StaticRect\";\nimport { StaticCircle } from \"./draw/StaticCircle\";\nimport { StaticImage } from \"./draw/StaticImage\";\nimport { DrawFunction } from \"./draw/DrawFunction\";\n\n/**\n * React component that renders a CanvasTileEngine.\n * Supports both imperative API (via engine handle) and declarative API (via children).\n *\n * @example Declarative API with compound components\n * ```tsx\n * function App() {\n * const engine = useCanvasTileEngine();\n *\n * return (\n * <CanvasTileEngine engine={engine} config={config}>\n * <CanvasTileEngine.GridLines cellSize={50} layer={0} />\n * <CanvasTileEngine.Image items={imageItems} layer={1} />\n * <CanvasTileEngine.Circle items={markers} layer={2} />\n * </CanvasTileEngine>\n * );\n * }\n * ```\n *\n * @example Imperative API\n * ```tsx\n * function App() {\n * const engine = useCanvasTileEngine();\n *\n * useEffect(() => {\n * if (engine.isReady) {\n * engine.drawGridLines(50);\n * engine.render();\n * }\n * }, [engine.isReady]);\n *\n * return <CanvasTileEngine engine={engine} config={config} />;\n * }\n * ```\n */\nfunction CanvasTileEngineBase({\n engine,\n config,\n center = { x: 0, y: 0 },\n className,\n style,\n children,\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n onZoom,\n}: CanvasTileEngineProps) {\n // Stable callback refs\n const callbacksRef = useRef({\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n onZoom,\n });\n\n // Update callback refs\n useEffect(() => {\n callbacksRef.current = {\n onCoordsChange,\n onClick,\n onHover,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDraw,\n onResize,\n onZoom,\n };\n });\n\n // Debounced render - multiple draw components calling requestRender\n // in the same frame will trigger only one render\n const rafIdRef = useRef<number | null>(null);\n const requestRender = useCallback(() => {\n if (rafIdRef.current !== null) return;\n rafIdRef.current = requestAnimationFrame(() => {\n rafIdRef.current = null;\n engine.render();\n });\n }, [engine]);\n\n // Cleanup RAF on unmount\n useEffect(() => {\n return () => {\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n }\n };\n }, []);\n\n // Context value\n const contextValue = useMemo<EngineContextValue>(\n () => ({\n engine,\n requestRender,\n }),\n [engine, requestRender]\n );\n\n // Initialize engine when component mounts\n // Note: config and center are intentionally not in deps - we only want to create the engine once\n // Callbacks are accessed via callbacksRef which is always up-to-date\n useEffect(() => {\n const container = engine._containerRef.current;\n\n if (!container) {\n return;\n }\n\n // Create engine instance\n const instance = new CanvasTileEngineCore(container, config, center);\n\n // Set up callbacks using stable refs\n instance.onCoordsChange = (coords) => callbacksRef.current.onCoordsChange?.(coords);\n instance.onClick = (...args) => callbacksRef.current.onClick?.(...args);\n instance.onHover = (...args) => callbacksRef.current.onHover?.(...args);\n instance.onMouseDown = () => callbacksRef.current.onMouseDown?.();\n instance.onMouseUp = () => callbacksRef.current.onMouseUp?.();\n instance.onMouseLeave = () => callbacksRef.current.onMouseLeave?.();\n instance.onDraw = (...args) => callbacksRef.current.onDraw?.(...args);\n instance.onResize = () => callbacksRef.current.onResize?.();\n instance.onZoom = (scale) => callbacksRef.current.onZoom?.(scale);\n\n // Attach to handle\n engine._setInstance(instance);\n\n // Initial render\n instance.render();\n\n // Cleanup on unmount\n return () => {\n instance.destroy();\n engine._setInstance(null);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [engine]);\n\n return (\n <EngineContext.Provider value={contextValue}>\n <div\n ref={engine._containerRef}\n className={className}\n style={{\n ...style,\n }}\n >\n <canvas />\n </div>\n {/* Render children only when engine is ready */}\n {engine.isReady && children}\n </EngineContext.Provider>\n );\n}\n\n// Compound component pattern - attach draw components as static properties\nexport const CanvasTileEngine = Object.assign(CanvasTileEngineBase, {\n Rect,\n Circle,\n Image,\n GridLines,\n Line,\n Text,\n Path,\n StaticRect,\n StaticCircle,\n StaticImage,\n DrawFunction,\n});\n","import { createContext, useContext } from \"react\";\nimport type { EngineHandle } from \"../hooks/useCanvasTileEngine\";\n\nexport interface EngineContextValue {\n engine: EngineHandle;\n /** Request a re-render of the canvas */\n requestRender: () => void;\n}\n\nexport const EngineContext = createContext<EngineContextValue | null>(null);\n\n/**\n * Hook to access the engine context from child components.\n * Must be used within a CanvasTileEngine component.\n */\nexport function useEngineContext(): EngineContextValue {\n const context = useContext(EngineContext);\n\n if (!context) {\n throw new Error(\"useEngineContext must be used within a CanvasTileEngine component\");\n }\n\n return context;\n}\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface RectProps {\n items: DrawObject | DrawObject[];\n layer?: number;\n}\n\n/**\n * Draws rectangles on the canvas.\n */\nexport const Rect = memo(function Rect({ items, layer = 1 }: RectProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawRect(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface CircleProps {\n items: DrawObject | DrawObject[];\n layer?: number;\n}\n\n/**\n * Draws circles on the canvas.\n */\nexport const Circle = memo(function Circle({ items, layer = 1 }: CircleProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawCircle(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport { ImageItem } from \"@canvas-tile-engine/core\";\n\nexport interface ImageProps {\n items: ImageItem | ImageItem[];\n layer?: number;\n}\n\n/**\n * Draws images on the canvas.\n */\nexport const Image = memo(function Image({ items, layer = 1 }: ImageProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawImage(items, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\n\nexport interface GridLinesProps {\n cellSize: number;\n lineWidth?: number;\n strokeStyle?: string;\n layer?: number;\n}\n\n/**\n * Draws grid lines on the canvas.\n * Multiple GridLines can share the same layer (additive drawing).\n */\nexport const GridLines = memo(function GridLines({ cellSize, lineWidth = 1, strokeStyle = \"black\", layer = 0 }: GridLinesProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawGridLines(cellSize, lineWidth, strokeStyle, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, cellSize, lineWidth, strokeStyle, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface LineProps {\n items: { from: Coords; to: Coords } | { from: Coords; to: Coords }[];\n style?: { strokeStyle?: string; lineWidth?: number };\n layer?: number;\n}\n\n/**\n * Draws lines on the canvas.\n */\nexport const Line = memo(function Line({ items, style, layer = 1 }: LineProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawLine(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface TextProps {\n items: { coords: Coords; text: string } | { coords: Coords; text: string }[];\n style?: {\n fillStyle?: string;\n font?: string;\n textAlign?: CanvasTextAlign;\n textBaseline?: CanvasTextBaseline;\n };\n layer?: number;\n}\n\n/**\n * Draws text on the canvas.\n */\nexport const Text = memo(function Text({ items, style, layer = 2 }: TextProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawText(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { Coords } from \"@canvas-tile-engine/core\";\n\nexport interface PathProps {\n items: Coords[] | Coords[][];\n style?: { strokeStyle?: string; lineWidth?: number };\n layer?: number;\n}\n\n/**\n * Draws paths/polylines on the canvas.\n */\nexport const Path = memo(function Path({ items, style, layer = 1 }: PathProps) {\n const { engine, requestRender } = useEngineContext();\n\n useEffect(() => {\n const handle = engine.drawPath(items, style, layer);\n requestRender();\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, style, layer, requestRender]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface StaticRectProps {\n items: DrawObject[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static rectangles with caching for performance.\n * Ideal for large datasets that don't change frequently.\n */\nexport const StaticRect = memo(function StaticRect({ items, cacheKey, layer = 1 }: StaticRectProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n // Clear previous cache if cacheKey changed\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticRect(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n // Cleanup cache on unmount\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { DrawObject } from \"@canvas-tile-engine/core\";\n\nexport interface StaticCircleProps {\n items: DrawObject[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static circles with caching for performance.\n */\nexport const StaticCircle = memo(function StaticCircle({ items, cacheKey, layer = 1 }: StaticCircleProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticCircle(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport { ImageItem } from \"@canvas-tile-engine/core\";\n\nexport interface StaticImageProps {\n items: ImageItem[];\n cacheKey: string;\n layer?: number;\n}\n\n/**\n * Draws static images with caching for performance.\n * Ideal for terrain tiles or static decorations.\n */\nexport const StaticImage = memo(function StaticImage({ items, cacheKey, layer = 1 }: StaticImageProps) {\n const { engine, requestRender } = useEngineContext();\n const prevCacheKeyRef = useRef<string>(cacheKey);\n\n useEffect(() => {\n if (items.length === 0) {\n return;\n }\n\n if (prevCacheKeyRef.current !== cacheKey) {\n engine.clearStaticCache(prevCacheKeyRef.current);\n prevCacheKeyRef.current = cacheKey;\n }\n\n const handle = engine.drawStaticImage(items, cacheKey, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, items, cacheKey, layer, requestRender]);\n\n useEffect(() => {\n return () => {\n engine.clearStaticCache(cacheKey);\n };\n }, [engine, cacheKey]);\n\n return null;\n});\n","import { useEffect, useRef, memo } from \"react\";\nimport { useEngineContext } from \"../../context/EngineContext\";\nimport type { CanvasTileEngineConfig, Coords } from \"@canvas-tile-engine/core\";\n\nexport interface DrawFunctionProps {\n /** The draw function to execute */\n children: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void;\n layer?: number;\n}\n\n/**\n * Custom draw function component.\n * Allows arbitrary canvas drawing within the engine's render cycle.\n * Multiple DrawFunction components can share the same layer (additive drawing).\n *\n * @example\n * ```tsx\n * <DrawFunction layer={3}>\n * {(ctx, coords, config) => {\n * ctx.fillStyle = \"red\";\n * ctx.fillRect(config.size.width / 2 - 5, config.size.height / 2 - 5, 10, 10);\n * }}\n * </DrawFunction>\n * ```\n */\nexport const DrawFunction = memo(function DrawFunction({ children, layer = 1 }: DrawFunctionProps) {\n const { engine, requestRender } = useEngineContext();\n const fnRef = useRef(children);\n\n // Keep function ref updated\n useEffect(() => {\n fnRef.current = children;\n });\n\n useEffect(() => {\n const handle = engine.addDrawFunction((ctx, coords, config) => {\n fnRef.current(ctx, coords, config);\n }, layer);\n requestRender();\n\n return () => {\n if (handle) {\n engine.removeLayerHandle(handle);\n }\n };\n }, [engine, layer, requestRender]);\n\n return null;\n});\n","import { useRef, useCallback, useState, useMemo } from \"react\";\nimport type {\n CanvasTileEngine as CanvasTileEngineCore,\n CanvasTileEngineConfig,\n Coords,\n DrawObject,\n EventHandlers,\n LayerHandle,\n} from \"@canvas-tile-engine/core\";\n\n/** Dummy handle returned when engine is not ready */\nconst DUMMY_LAYER_HANDLE: LayerHandle = { layer: -1, id: Symbol(\"dummy\") };\n\n/** Default config when engine is not ready */\nconst DEFAULT_CONFIG: Required<CanvasTileEngineConfig> = {\n size: { width: 0, height: 0, minWidth: 100, minHeight: 100, maxWidth: Infinity, maxHeight: Infinity },\n scale: 1,\n minScale: 0.5,\n maxScale: 2,\n backgroundColor: \"#ffffff\",\n renderer: \"canvas\",\n eventHandlers: {\n drag: true,\n zoom: true,\n hover: false,\n click: false,\n resize: false,\n },\n bounds: {\n minX: -Infinity,\n maxX: Infinity,\n minY: -Infinity,\n maxY: Infinity,\n },\n coordinates: {\n enabled: false,\n shownScaleRange: { min: 0, max: Infinity },\n },\n cursor: {\n default: \"default\",\n move: \"move\",\n },\n debug: {\n enabled: false,\n hud: {\n enabled: false,\n topLeftCoordinates: false,\n coordinates: false,\n scale: false,\n tilesInView: false,\n fps: false,\n },\n eventHandlers: {\n click: false,\n hover: false,\n drag: false,\n zoom: false,\n resize: false,\n },\n },\n};\n\n/**\n * Engine handle returned by useCanvasTileEngine hook.\n * Provides access to engine methods with proper typing.\n * \n * All methods return default/dummy values when engine is not ready,\n * allowing safe usage without null checks.\n */\nexport interface EngineHandle {\n /** @internal - Used by CanvasTileEngine component */\n readonly _containerRef: React.RefObject<HTMLDivElement>;\n /** @internal - Used by CanvasTileEngine component */\n _setInstance: (engine: CanvasTileEngineCore | null) => void;\n\n /** Whether the engine is ready (mounted and initialized) */\n readonly isReady: boolean;\n\n /** The underlying engine instance (null until component mounts) */\n readonly instance: CanvasTileEngineCore | null;\n\n /** Render a frame */\n render(): void;\n\n /** Get current center coordinates */\n getCenterCoords(): Coords;\n\n /** Update center coordinates */\n updateCoords(center: Coords): void;\n\n /** Animate to target coordinates */\n goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void): void;\n\n /** Resize the canvas */\n resize(width: number, height: number, durationMs?: number, onComplete?: () => void): void;\n\n /** Get current canvas size */\n getSize(): { width: number; height: number };\n\n /** Get current canvas scale */\n getScale(): number;\n\n /** Zoom in by a factor (default: 1.5) */\n zoomIn(factor?: number): void;\n\n /** Zoom out by a factor (default: 1.5) */\n zoomOut(factor?: number): void;\n\n /** Get current config */\n getConfig(): Required<CanvasTileEngineConfig>;\n\n /** Set map boundaries */\n setBounds(bounds: { minX: number; maxX: number; minY: number; maxY: number }): void;\n\n /** Dynamically update event handlers at runtime */\n setEventHandlers(handlers: Partial<EventHandlers>): void;\n\n /** Draw rectangles */\n drawRect(items: DrawObject | DrawObject[], layer?: number): LayerHandle;\n\n /** Draw static rectangles (cached) */\n drawStaticRect(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;\n\n /** Draw circles */\n drawCircle(items: DrawObject | DrawObject[], layer?: number): LayerHandle;\n\n /** Draw static circles (cached) */\n drawStaticCircle(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;\n\n /** Draw lines */\n drawLine(\n items: { from: Coords; to: Coords } | { from: Coords; to: Coords }[],\n style?: { strokeStyle?: string; lineWidth?: number },\n layer?: number\n ): LayerHandle;\n\n /** Draw text */\n drawText(\n items: { coords: Coords; text: string } | { coords: Coords; text: string }[],\n style?: { fillStyle?: string; font?: string; textAlign?: CanvasTextAlign; textBaseline?: CanvasTextBaseline },\n layer?: number\n ): LayerHandle;\n\n /** Draw paths/polylines */\n drawPath(\n items: Coords[] | Coords[][],\n style?: { strokeStyle?: string; lineWidth?: number },\n layer?: number\n ): LayerHandle;\n\n /** Draw images */\n drawImage(\n items:\n | (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })\n | (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })[],\n layer?: number\n ): LayerHandle;\n\n /** Draw static images (cached) */\n drawStaticImage(\n items: (Omit<DrawObject, \"style\"> & { img: HTMLImageElement })[],\n cacheKey: string,\n layer?: number\n ): LayerHandle;\n\n /** Draw grid lines */\n drawGridLines(cellSize: number, lineWidth?: number, strokeStyle?: string, layer?: number): LayerHandle;\n\n /** Add custom draw function */\n addDrawFunction(\n fn: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void,\n layer?: number\n ): LayerHandle;\n\n /** Clear a specific layer */\n clearLayer(layer: number): void;\n\n /** Clear all layers */\n clearAll(): void;\n\n /** Clear static cache */\n clearStaticCache(cacheKey?: string): void;\n\n /** Remove a previously registered draw callback */\n removeLayerHandle(handle: LayerHandle): void;\n\n /** Image loader instance (undefined until engine mounts) */\n readonly images: CanvasTileEngineCore[\"images\"] | undefined;\n}\n\n/**\n * React hook that creates an engine handle for use with CanvasTileEngine component.\n *\n * @returns Engine handle to pass to CanvasTileEngine component\n *\n * @example\n * ```tsx\n * function App() {\n * const mainMap = useCanvasTileEngine();\n * const miniMap = useCanvasTileEngine();\n *\n * useEffect(() => {\n * if (mainMap.isReady && miniMap.isReady) {\n * // Both engines are ready, draw items\n * mainMap.drawGridLines(50);\n * mainMap.render();\n * }\n * }, [mainMap.isReady, miniMap.isReady]);\n *\n * return (\n * <>\n * <CanvasTileEngine engine={mainMap} config={...} />\n * <CanvasTileEngine engine={miniMap} config={...} />\n * </>\n * );\n * }\n * ```\n */\nexport function useCanvasTileEngine(): EngineHandle {\n const instanceRef = useRef<CanvasTileEngineCore | null>(null);\n const containerRef = useRef<HTMLDivElement>(null!);\n // _isReady state is only used to trigger re-renders, actual value is read from isReadyRef\n const [, setIsReady] = useState(false);\n // Keep isReady in a ref so the handle getter can read it without recreating handle\n const isReadyRef = useRef(false);\n\n const setInstance = useCallback((engine: CanvasTileEngineCore | null) => {\n instanceRef.current = engine;\n isReadyRef.current = engine !== null;\n setIsReady(engine !== null);\n }, []);\n\n // Create stable handle object using useMemo\n // Note: isReady is NOT in deps - we read from isReadyRef to keep handle stable\n const handle = useMemo<EngineHandle>(\n () => ({\n _containerRef: containerRef,\n _setInstance: setInstance,\n\n get isReady() {\n return isReadyRef.current;\n },\n\n get instance() {\n return instanceRef.current;\n },\n\n get images() {\n return instanceRef.current?.images;\n },\n\n render() {\n instanceRef.current?.render();\n },\n\n getCenterCoords() {\n return instanceRef.current?.getCenterCoords() ?? { x: 0, y: 0 };\n },\n\n updateCoords(center: Coords) {\n instanceRef.current?.updateCoords(center);\n },\n\n goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void) {\n instanceRef.current?.goCoords(x, y, durationMs, onComplete);\n },\n\n resize(width: number, height: number, durationMs?: number, onComplete?: () => void) {\n instanceRef.current?.resize(width, height, durationMs, onComplete);\n },\n\n getSize() {\n return instanceRef.current?.getSize() ?? { width: 0, height: 0 };\n },\n\n getScale() {\n return instanceRef.current?.getScale() ?? 1;\n },\n\n zoomIn(factor?: number) {\n instanceRef.current?.zoomIn(factor);\n },\n\n zoomOut(factor?: number) {\n instanceRef.current?.zoomOut(factor);\n },\n\n getConfig() {\n return instanceRef.current?.getConfig() ?? DEFAULT_CONFIG;\n },\n\n setBounds(bounds) {\n instanceRef.current?.setBounds(bounds);\n },\n\n setEventHandlers(handlers) {\n instanceRef.current?.setEventHandlers(handlers);\n },\n\n drawRect(items, layer) {\n return instanceRef.current?.drawRect(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticRect(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticRect(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawCircle(items, layer) {\n return instanceRef.current?.drawCircle(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticCircle(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticCircle(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawLine(items, style, layer) {\n return instanceRef.current?.drawLine(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawText(items, style, layer) {\n return instanceRef.current?.drawText(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawPath(items, style, layer) {\n return instanceRef.current?.drawPath(items, style, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawImage(items, layer) {\n return instanceRef.current?.drawImage(items, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawStaticImage(items, cacheKey, layer) {\n return instanceRef.current?.drawStaticImage(items, cacheKey, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n drawGridLines(cellSize, lineWidth, strokeStyle, layer) {\n return instanceRef.current?.drawGridLines(cellSize, lineWidth, strokeStyle, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n addDrawFunction(fn, layer) {\n return instanceRef.current?.addDrawFunction(fn, layer) ?? DUMMY_LAYER_HANDLE;\n },\n\n clearLayer(layer) {\n instanceRef.current?.clearLayer(layer);\n },\n\n clearAll() {\n instanceRef.current?.clearAll();\n },\n\n clearStaticCache(cacheKey) {\n instanceRef.current?.clearStaticCache(cacheKey);\n },\n\n removeLayerHandle(handle) {\n instanceRef.current?.removeLayerHandle(handle);\n },\n }),\n [setInstance]\n );\n\n return handle;\n}\n","// Main component\nexport { CanvasTileEngine } from \"./components\";\n\n// Draw components\nexport {\n type RectProps,\n type CircleProps,\n type ImageProps,\n type GridLinesProps,\n type LineProps,\n type TextProps,\n type PathProps,\n type StaticRectProps,\n type StaticCircleProps,\n type StaticImageProps,\n type DrawFunctionProps,\n} from \"./components\";\n\n// Hooks\nexport { useCanvasTileEngine } from \"./hooks\";\n\n// Context\nexport { useEngineContext, type EngineContextValue } from \"./context\";\n\n// Types\nexport type {\n CanvasTileEngineProps,\n CanvasTileEngineConfig,\n Coords,\n DrawObject,\n EventHandlers,\n onClickCallback,\n onHoverCallback,\n onDrawCallback,\n Rect,\n Line,\n Circle,\n Text,\n Path,\n ImageItem,\n} from \"./types\";\nexport type { EngineHandle } from \"./hooks/useCanvasTileEngine\";\n\n// Re-export core class with different name\nexport { CanvasTileEngine as CanvasTileEngineCore } from \"@canvas-tile-engine/core\";\n"],"mappings":"AAAA,OAAS,aAAAA,EAAW,UAAAC,EAAQ,eAAAC,GAAa,WAAAC,OAAe,QACxD,OAAS,oBAAoBC,OAA4B,2BCDzD,OAAS,iBAAAC,EAAe,cAAAC,MAAkB,QASnC,IAAMC,EAAgBF,EAAyC,IAAI,EAMnE,SAASG,GAAuC,CACnD,IAAMC,EAAUH,EAAWC,CAAa,EAExC,GAAI,CAACE,EACD,MAAM,IAAI,MAAM,mEAAmE,EAGvF,OAAOA,CACX,CCvBA,OAAS,aAAAC,EAAW,QAAAC,MAAY,QAYzB,IAAMC,EAAOC,EAAK,SAAc,CAAE,MAAAC,EAAO,MAAAC,EAAQ,CAAE,EAAc,CACpE,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAEnD,OAAAC,EAAU,IAAM,CACZ,IAAMC,EAASJ,EAAO,SAASF,EAAOC,CAAK,EAC3C,OAAAE,EAAc,EACP,IAAM,CACLG,GACAJ,EAAO,kBAAkBI,CAAM,CAEvC,CACJ,EAAG,CAACJ,EAAQF,EAAOC,EAAOE,CAAa,CAAC,EAEjC,IACX,CAAC,EC1BD,OAAS,aAAAI,EAAW,QAAAC,MAAY,QAYzB,IAAMC,EAASC,EAAK,SAAgB,CAAE,MAAAC,EAAO,MAAAC,EAAQ,CAAE,EAAgB,CAC1E,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAEnD,OAAAC,EAAU,IAAM,CACZ,IAAMC,EAASJ,EAAO,WAAWF,EAAOC,CAAK,EAC7C,OAAAE,EAAc,EACP,IAAM,CACLG,GACAJ,EAAO,kBAAkBI,CAAM,CAEvC,CACJ,EAAG,CAACJ,EAAQF,EAAOC,EAAOE,CAAa,CAAC,EAEjC,IACX,CAAC,EC1BD,OAAS,aAAAI,EAAW,QAAAC,MAAY,QAYzB,IAAMC,EAAQC,EAAK,SAAe,CAAE,MAAAC,EAAO,MAAAC,EAAQ,CAAE,EAAe,CACvE,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAEnD,OAAAC,EAAU,IAAM,CACZ,IAAMC,EAASJ,EAAO,UAAUF,EAAOC,CAAK,EAC5C,OAAAE,EAAc,EACP,IAAM,CACLG,GACAJ,EAAO,kBAAkBI,CAAM,CAEvC,CACJ,EAAG,CAACJ,EAAQF,EAAOC,EAAOE,CAAa,CAAC,EAEjC,IACX,CAAC,EC1BD,OAAS,aAAAI,GAAW,QAAAC,OAAY,QAczB,IAAMC,EAAYC,GAAK,SAAmB,CAAE,SAAAC,EAAU,UAAAC,EAAY,EAAG,YAAAC,EAAc,QAAS,MAAAC,EAAQ,CAAE,EAAmB,CAC5H,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAEnD,OAAAC,GAAU,IAAM,CACZ,IAAMC,EAASJ,EAAO,cAAcJ,EAAUC,EAAWC,EAAaC,CAAK,EAC3E,OAAAE,EAAc,EACP,IAAM,CACLG,GACAJ,EAAO,kBAAkBI,CAAM,CAEvC,CACJ,EAAG,CAACJ,EAAQJ,EAAUC,EAAWC,EAAaC,EAAOE,CAAa,CAAC,EAE5D,IACX,CAAC,EC5BD,OAAS,aAAAI,GAAW,QAAAC,OAAY,QAazB,IAAMC,EAAOC,GAAK,SAAc,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAQ,CAAE,EAAc,CAC3E,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAEnD,OAAAC,GAAU,IAAM,CACZ,IAAMC,EAASJ,EAAO,SAASH,EAAOC,EAAOC,CAAK,EAClD,OAAAE,EAAc,EACP,IAAM,CACLG,GACAJ,EAAO,kBAAkBI,CAAM,CAEvC,CACJ,EAAG,CAACJ,EAAQH,EAAOC,EAAOC,EAAOE,CAAa,CAAC,EAExC,IACX,CAAC,EC3BD,OAAS,aAAAI,GAAW,QAAAC,OAAY,QAkBzB,IAAMC,EAAOC,GAAK,SAAc,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAQ,CAAE,EAAc,CAC3E,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAEnD,OAAAC,GAAU,IAAM,CACZ,IAAMC,EAASJ,EAAO,SAASH,EAAOC,EAAOC,CAAK,EAClD,OAAAE,EAAc,EACP,IAAM,CACLG,GACAJ,EAAO,kBAAkBI,CAAM,CAEvC,CACJ,EAAG,CAACJ,EAAQH,EAAOC,EAAOC,EAAOE,CAAa,CAAC,EAExC,IACX,CAAC,EChCD,OAAS,aAAAI,GAAW,QAAAC,OAAY,QAazB,IAAMC,EAAOC,GAAK,SAAc,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAQ,CAAE,EAAc,CAC3E,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAEnD,OAAAC,GAAU,IAAM,CACZ,IAAMC,EAASJ,EAAO,SAASH,EAAOC,EAAOC,CAAK,EAClD,OAAAE,EAAc,EACP,IAAM,CACLG,GACAJ,EAAO,kBAAkBI,CAAM,CAEvC,CACJ,EAAG,CAACJ,EAAQH,EAAOC,EAAOC,EAAOE,CAAa,CAAC,EAExC,IACX,CAAC,EC3BD,OAAS,aAAAI,EAAW,UAAAC,GAAQ,QAAAC,OAAY,QAcjC,IAAMC,EAAaC,GAAK,SAAoB,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAE,EAAoB,CAChG,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAC7CC,EAAkBC,GAAeN,CAAQ,EAE/C,OAAAO,EAAU,IAAM,CACZ,GAAIR,EAAM,SAAW,EACjB,OAIAM,EAAgB,UAAYL,IAC5BE,EAAO,iBAAiBG,EAAgB,OAAO,EAC/CA,EAAgB,QAAUL,GAG9B,IAAMQ,EAASN,EAAO,eAAeH,EAAOC,EAAUC,CAAK,EAC3D,OAAAE,EAAc,EAEP,IAAM,CACLK,GACAN,EAAO,kBAAkBM,CAAM,CAEvC,CACJ,EAAG,CAACN,EAAQH,EAAOC,EAAUC,EAAOE,CAAa,CAAC,EAGlDI,EAAU,IACC,IAAM,CACTL,EAAO,iBAAiBF,CAAQ,CACpC,EACD,CAACE,EAAQF,CAAQ,CAAC,EAEd,IACX,CAAC,EC/CD,OAAS,aAAAS,EAAW,UAAAC,GAAQ,QAAAC,OAAY,QAajC,IAAMC,EAAeC,GAAK,SAAsB,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAE,EAAsB,CACtG,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAC7CC,EAAkBC,GAAeN,CAAQ,EAE/C,OAAAO,EAAU,IAAM,CACZ,GAAIR,EAAM,SAAW,EACjB,OAGAM,EAAgB,UAAYL,IAC5BE,EAAO,iBAAiBG,EAAgB,OAAO,EAC/CA,EAAgB,QAAUL,GAG9B,IAAMQ,EAASN,EAAO,iBAAiBH,EAAOC,EAAUC,CAAK,EAC7D,OAAAE,EAAc,EAEP,IAAM,CACLK,GACAN,EAAO,kBAAkBM,CAAM,CAEvC,CACJ,EAAG,CAACN,EAAQH,EAAOC,EAAUC,EAAOE,CAAa,CAAC,EAElDI,EAAU,IACC,IAAM,CACTL,EAAO,iBAAiBF,CAAQ,CACpC,EACD,CAACE,EAAQF,CAAQ,CAAC,EAEd,IACX,CAAC,EC5CD,OAAS,aAAAS,EAAW,UAAAC,GAAQ,QAAAC,OAAY,QAcjC,IAAMC,EAAcC,GAAK,SAAqB,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAE,EAAqB,CACnG,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAC7CC,EAAkBC,GAAeN,CAAQ,EAE/C,OAAAO,EAAU,IAAM,CACZ,GAAIR,EAAM,SAAW,EACjB,OAGAM,EAAgB,UAAYL,IAC5BE,EAAO,iBAAiBG,EAAgB,OAAO,EAC/CA,EAAgB,QAAUL,GAG9B,IAAMQ,EAASN,EAAO,gBAAgBH,EAAOC,EAAUC,CAAK,EAC5D,OAAAE,EAAc,EAEP,IAAM,CACLK,GACAN,EAAO,kBAAkBM,CAAM,CAEvC,CACJ,EAAG,CAACN,EAAQH,EAAOC,EAAUC,EAAOE,CAAa,CAAC,EAElDI,EAAU,IACC,IAAM,CACTL,EAAO,iBAAiBF,CAAQ,CACpC,EACD,CAACE,EAAQF,CAAQ,CAAC,EAEd,IACX,CAAC,EC7CD,OAAS,aAAAS,EAAW,UAAAC,GAAQ,QAAAC,OAAY,QAyBjC,IAAMC,EAAeC,GAAK,SAAsB,CAAE,SAAAC,EAAU,MAAAC,EAAQ,CAAE,EAAsB,CAC/F,GAAM,CAAE,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAiB,EAC7CC,EAAQC,GAAON,CAAQ,EAG7B,OAAAO,EAAU,IAAM,CACZF,EAAM,QAAUL,CACpB,CAAC,EAEDO,EAAU,IAAM,CACZ,IAAMC,EAASN,EAAO,gBAAgB,CAACO,EAAKC,EAAQC,IAAW,CAC3DN,EAAM,QAAQI,EAAKC,EAAQC,CAAM,CACrC,EAAGV,CAAK,EACR,OAAAE,EAAc,EAEP,IAAM,CACLK,GACAN,EAAO,kBAAkBM,CAAM,CAEvC,CACJ,EAAG,CAACN,EAAQD,EAAOE,CAAa,CAAC,EAE1B,IACX,CAAC,EZsHO,OAQQ,OAAAS,EARR,QAAAC,OAAA,oBAjHR,SAASC,GAAqB,CAC1B,OAAAC,EACA,OAAAC,EACA,OAAAC,EAAS,CAAE,EAAG,EAAG,EAAG,CAAE,EACtB,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,eAAAC,EACA,QAAAC,EACA,QAAAC,EACA,YAAAC,EACA,UAAAC,EACA,aAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,CACJ,EAA0B,CAEtB,IAAMC,EAAeC,EAAO,CACxB,eAAAV,EACA,QAAAC,EACA,QAAAC,EACA,YAAAC,EACA,UAAAC,EACA,aAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,CACJ,CAAC,EAGDG,EAAU,IAAM,CACZF,EAAa,QAAU,CACnB,eAAAT,EACA,QAAAC,EACA,QAAAC,EACA,YAAAC,EACA,UAAAC,EACA,aAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,CACJ,CACJ,CAAC,EAID,IAAMI,EAAWF,EAAsB,IAAI,EACrCG,EAAgBC,GAAY,IAAM,CAChCF,EAAS,UAAY,OACzBA,EAAS,QAAU,sBAAsB,IAAM,CAC3CA,EAAS,QAAU,KACnBlB,EAAO,OAAO,CAClB,CAAC,EACL,EAAG,CAACA,CAAM,CAAC,EAGXiB,EAAU,IACC,IAAM,CACLC,EAAS,UAAY,MACrB,qBAAqBA,EAAS,OAAO,CAE7C,EACD,CAAC,CAAC,EAGL,IAAMG,EAAeC,GACjB,KAAO,CACH,OAAAtB,EACA,cAAAmB,CACJ,GACA,CAACnB,EAAQmB,CAAa,CAC1B,EAKA,OAAAF,EAAU,IAAM,CACZ,IAAMM,EAAYvB,EAAO,cAAc,QAEvC,GAAI,CAACuB,EACD,OAIJ,IAAMC,EAAW,IAAIC,GAAqBF,EAAWtB,EAAQC,CAAM,EAGnE,OAAAsB,EAAS,eAAkBE,GAAWX,EAAa,QAAQ,iBAAiBW,CAAM,EAClFF,EAAS,QAAU,IAAIG,IAASZ,EAAa,QAAQ,UAAU,GAAGY,CAAI,EACtEH,EAAS,QAAU,IAAIG,IAASZ,EAAa,QAAQ,UAAU,GAAGY,CAAI,EACtEH,EAAS,YAAc,IAAMT,EAAa,QAAQ,cAAc,EAChES,EAAS,UAAY,IAAMT,EAAa,QAAQ,YAAY,EAC5DS,EAAS,aAAe,IAAMT,EAAa,QAAQ,eAAe,EAClES,EAAS,OAAS,IAAIG,IAASZ,EAAa,QAAQ,SAAS,GAAGY,CAAI,EACpEH,EAAS,SAAW,IAAMT,EAAa,QAAQ,WAAW,EAC1DS,EAAS,OAAUI,GAAUb,EAAa,QAAQ,SAASa,CAAK,EAGhE5B,EAAO,aAAawB,CAAQ,EAG5BA,EAAS,OAAO,EAGT,IAAM,CACTA,EAAS,QAAQ,EACjBxB,EAAO,aAAa,IAAI,CAC5B,CAEJ,EAAG,CAACA,CAAM,CAAC,EAGPF,GAAC+B,EAAc,SAAd,CAAuB,MAAOR,EAC3B,UAAAxB,EAAC,OACG,IAAKG,EAAO,cACZ,UAAWG,EACX,MAAO,CACH,GAAGC,CACP,EAEA,SAAAP,EAAC,WAAO,EACZ,EAECG,EAAO,SAAWK,GACvB,CAER,CAGO,IAAMyB,EAAmB,OAAO,OAAO/B,GAAsB,CAChE,KAAAgC,EACA,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,KAAAC,EACA,KAAAC,EACA,KAAAC,EACA,WAAAC,EACA,aAAAC,EACA,YAAAC,EACA,aAAAC,CACJ,CAAC,EanMD,OAAS,UAAAC,EAAQ,eAAAC,GAAa,YAAAC,GAAU,WAAAC,OAAe,QAWvD,IAAMC,EAAkC,CAAE,MAAO,GAAI,GAAI,OAAO,OAAO,CAAE,EAGnEC,GAAmD,CACrD,KAAM,CAAE,MAAO,EAAG,OAAQ,EAAG,SAAU,IAAK,UAAW,IAAK,SAAU,IAAU,UAAW,GAAS,EACpG,MAAO,EACP,SAAU,GACV,SAAU,EACV,gBAAiB,UACjB,SAAU,SACV,cAAe,CACX,KAAM,GACN,KAAM,GACN,MAAO,GACP,MAAO,GACP,OAAQ,EACZ,EACA,OAAQ,CACJ,KAAM,KACN,KAAM,IACN,KAAM,KACN,KAAM,GACV,EACA,YAAa,CACT,QAAS,GACT,gBAAiB,CAAE,IAAK,EAAG,IAAK,GAAS,CAC7C,EACA,OAAQ,CACJ,QAAS,UACT,KAAM,MACV,EACA,MAAO,CACH,QAAS,GACT,IAAK,CACD,QAAS,GACT,mBAAoB,GACpB,YAAa,GACb,MAAO,GACP,YAAa,GACb,IAAK,EACT,EACA,cAAe,CACX,MAAO,GACP,MAAO,GACP,KAAM,GACN,KAAM,GACN,OAAQ,EACZ,CACJ,CACJ,EA8JO,SAASC,GAAoC,CAChD,IAAMC,EAAcP,EAAoC,IAAI,EACtDQ,EAAeR,EAAuB,IAAK,EAE3C,CAAC,CAAES,CAAU,EAAIP,GAAS,EAAK,EAE/BQ,EAAaV,EAAO,EAAK,EAEzBW,EAAcV,GAAaW,GAAwC,CACrEL,EAAY,QAAUK,EACtBF,EAAW,QAAUE,IAAW,KAChCH,EAAWG,IAAW,IAAI,CAC9B,EAAG,CAAC,CAAC,EAoIL,OAhIeT,GACX,KAAO,CACH,cAAeK,EACf,aAAcG,EAEd,IAAI,SAAU,CACV,OAAOD,EAAW,OACtB,EAEA,IAAI,UAAW,CACX,OAAOH,EAAY,OACvB,EAEA,IAAI,QAAS,CACT,OAAOA,EAAY,SAAS,MAChC,EAEA,QAAS,CACLA,EAAY,SAAS,OAAO,CAChC,EAEA,iBAAkB,CACd,OAAOA,EAAY,SAAS,gBAAgB,GAAK,CAAE,EAAG,EAAG,EAAG,CAAE,CAClE,EAEA,aAAaM,EAAgB,CACzBN,EAAY,SAAS,aAAaM,CAAM,CAC5C,EAEA,SAASC,EAAWC,EAAWC,EAAqBC,EAAyB,CACzEV,EAAY,SAAS,SAASO,EAAGC,EAAGC,EAAYC,CAAU,CAC9D,EAEA,OAAOC,EAAeC,EAAgBH,EAAqBC,EAAyB,CAChFV,EAAY,SAAS,OAAOW,EAAOC,EAAQH,EAAYC,CAAU,CACrE,EAEA,SAAU,CACN,OAAOV,EAAY,SAAS,QAAQ,GAAK,CAAE,MAAO,EAAG,OAAQ,CAAE,CACnE,EAEA,UAAW,CACP,OAAOA,EAAY,SAAS,SAAS,GAAK,CAC9C,EAEA,OAAOa,EAAiB,CACpBb,EAAY,SAAS,OAAOa,CAAM,CACtC,EAEA,QAAQA,EAAiB,CACrBb,EAAY,SAAS,QAAQa,CAAM,CACvC,EAEA,WAAY,CACR,OAAOb,EAAY,SAAS,UAAU,GAAKF,EAC/C,EAEA,UAAUgB,EAAQ,CACdd,EAAY,SAAS,UAAUc,CAAM,CACzC,EAEA,iBAAiBC,EAAU,CACvBf,EAAY,SAAS,iBAAiBe,CAAQ,CAClD,EAEA,SAASC,EAAOC,EAAO,CACnB,OAAOjB,EAAY,SAAS,SAASgB,EAAOC,CAAK,GAAKpB,CAC1D,EAEA,eAAemB,EAAOE,EAAUD,EAAO,CACnC,OAAOjB,EAAY,SAAS,eAAegB,EAAOE,EAAUD,CAAK,GAAKpB,CAC1E,EAEA,WAAWmB,EAAOC,EAAO,CACrB,OAAOjB,EAAY,SAAS,WAAWgB,EAAOC,CAAK,GAAKpB,CAC5D,EAEA,iBAAiBmB,EAAOE,EAAUD,EAAO,CACrC,OAAOjB,EAAY,SAAS,iBAAiBgB,EAAOE,EAAUD,CAAK,GAAKpB,CAC5E,EAEA,SAASmB,EAAOG,EAAOF,EAAO,CAC1B,OAAOjB,EAAY,SAAS,SAASgB,EAAOG,EAAOF,CAAK,GAAKpB,CACjE,EAEA,SAASmB,EAAOG,EAAOF,EAAO,CAC1B,OAAOjB,EAAY,SAAS,SAASgB,EAAOG,EAAOF,CAAK,GAAKpB,CACjE,EAEA,SAASmB,EAAOG,EAAOF,EAAO,CAC1B,OAAOjB,EAAY,SAAS,SAASgB,EAAOG,EAAOF,CAAK,GAAKpB,CACjE,EAEA,UAAUmB,EAAOC,EAAO,CACpB,OAAOjB,EAAY,SAAS,UAAUgB,EAAOC,CAAK,GAAKpB,CAC3D,EAEA,gBAAgBmB,EAAOE,EAAUD,EAAO,CACpC,OAAOjB,EAAY,SAAS,gBAAgBgB,EAAOE,EAAUD,CAAK,GAAKpB,CAC3E,EAEA,cAAcuB,EAAUC,EAAWC,EAAaL,EAAO,CACnD,OAAOjB,EAAY,SAAS,cAAcoB,EAAUC,EAAWC,EAAaL,CAAK,GAAKpB,CAC1F,EAEA,gBAAgB0B,EAAIN,EAAO,CACvB,OAAOjB,EAAY,SAAS,gBAAgBuB,EAAIN,CAAK,GAAKpB,CAC9D,EAEA,WAAWoB,EAAO,CACdjB,EAAY,SAAS,WAAWiB,CAAK,CACzC,EAEA,UAAW,CACPjB,EAAY,SAAS,SAAS,CAClC,EAEA,iBAAiBkB,EAAU,CACvBlB,EAAY,SAAS,iBAAiBkB,CAAQ,CAClD,EAEA,kBAAkBM,EAAQ,CACtBxB,EAAY,SAAS,kBAAkBwB,CAAM,CACjD,CACJ,GACA,CAACpB,CAAW,CAChB,CAGJ,CC/TA,OAA6B,oBAApBqB,OAAgD","names":["useEffect","useRef","useCallback","useMemo","CanvasTileEngineCore","createContext","useContext","EngineContext","useEngineContext","context","useEffect","memo","Rect","memo","items","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Circle","memo","items","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Image","memo","items","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","GridLines","memo","cellSize","lineWidth","strokeStyle","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Line","memo","items","style","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Text","memo","items","style","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","memo","Path","memo","items","style","layer","engine","requestRender","useEngineContext","useEffect","handle","useEffect","useRef","memo","StaticRect","memo","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","useRef","useEffect","handle","useEffect","useRef","memo","StaticCircle","memo","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","useRef","useEffect","handle","useEffect","useRef","memo","StaticImage","memo","items","cacheKey","layer","engine","requestRender","useEngineContext","prevCacheKeyRef","useRef","useEffect","handle","useEffect","useRef","memo","DrawFunction","memo","children","layer","engine","requestRender","useEngineContext","fnRef","useRef","useEffect","handle","ctx","coords","config","jsx","jsxs","CanvasTileEngineBase","engine","config","center","className","style","children","onCoordsChange","onClick","onHover","onMouseDown","onMouseUp","onMouseLeave","onDraw","onResize","onZoom","callbacksRef","useRef","useEffect","rafIdRef","requestRender","useCallback","contextValue","useMemo","container","instance","CanvasTileEngineCore","coords","args","scale","EngineContext","CanvasTileEngine","Rect","Circle","Image","GridLines","Line","Text","Path","StaticRect","StaticCircle","StaticImage","DrawFunction","useRef","useCallback","useState","useMemo","DUMMY_LAYER_HANDLE","DEFAULT_CONFIG","useCanvasTileEngine","instanceRef","containerRef","setIsReady","isReadyRef","setInstance","engine","center","x","y","durationMs","onComplete","width","height","factor","bounds","handlers","items","layer","cacheKey","style","cellSize","lineWidth","strokeStyle","fn","handle","CanvasTileEngine"]}
|
package/package.json
CHANGED
|
@@ -1,59 +1,59 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
"files": [
|
|
40
|
-
"dist"
|
|
41
|
-
],
|
|
42
|
-
"scripts": {
|
|
43
|
-
"build": "tsup",
|
|
44
|
-
"dev": "tsup --watch",
|
|
45
|
-
"typecheck": "tsc --noEmit"
|
|
46
|
-
},
|
|
47
|
-
"peerDependencies": {
|
|
48
|
-
"react": ">=18.0.0",
|
|
49
|
-
"react-dom": ">=18.0.0",
|
|
50
|
-
"@canvas-tile-engine/core": ">=0.0.1"
|
|
51
|
-
},
|
|
52
|
-
"dependencies": {
|
|
53
|
-
"@canvas-tile-engine/core": "workspace:*"
|
|
54
|
-
},
|
|
55
|
-
"devDependencies": {
|
|
56
|
-
"@types/react": "^18.3.0",
|
|
57
|
-
"@types/react-dom": "^18.3.0"
|
|
2
|
+
"name": "@canvas-tile-engine/react",
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"description": "React bindings for Canvas Tile Engine - build interactive 2D grid-based maps with declarative components",
|
|
5
|
+
"author": "Enes Yüksel",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/enesyukselx/canvas-tile-engine.git",
|
|
10
|
+
"directory": "packages/react"
|
|
11
|
+
},
|
|
12
|
+
"homepage": "https://canvastileengine.dev",
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/enesyukselx/canvas-tile-engine/issues"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"canvas",
|
|
18
|
+
"tile",
|
|
19
|
+
"engine",
|
|
20
|
+
"react",
|
|
21
|
+
"2d",
|
|
22
|
+
"map",
|
|
23
|
+
"game",
|
|
24
|
+
"grid",
|
|
25
|
+
"visualization",
|
|
26
|
+
"component"
|
|
27
|
+
],
|
|
28
|
+
"sideEffects": false,
|
|
29
|
+
"main": "dist/index.cjs",
|
|
30
|
+
"module": "dist/index.mjs",
|
|
31
|
+
"types": "dist/index.d.ts",
|
|
32
|
+
"exports": {
|
|
33
|
+
".": {
|
|
34
|
+
"types": "./dist/index.d.ts",
|
|
35
|
+
"import": "./dist/index.mjs",
|
|
36
|
+
"require": "./dist/index.cjs"
|
|
58
37
|
}
|
|
38
|
+
},
|
|
39
|
+
"files": [
|
|
40
|
+
"dist"
|
|
41
|
+
],
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"react": ">=18.0.0",
|
|
44
|
+
"react-dom": ">=18.0.0",
|
|
45
|
+
"@canvas-tile-engine/core": ">=0.0.1"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@canvas-tile-engine/core": "0.0.2"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@types/react": "^18.3.0",
|
|
52
|
+
"@types/react-dom": "^18.3.0"
|
|
53
|
+
},
|
|
54
|
+
"scripts": {
|
|
55
|
+
"build": "tsup",
|
|
56
|
+
"dev": "tsup --watch",
|
|
57
|
+
"typecheck": "tsc --noEmit"
|
|
58
|
+
}
|
|
59
59
|
}
|