@canvas-tile-engine/react 0.0.1

package/README.md

@@ -0,0 +1,46 @@
+# @canvas-tile-engine/react
+
+React bindings for Canvas Tile Engine — build interactive 2D grid-based maps with declarative components.
+
+## Install
+
+```bash
+npm install @canvas-tile-engine/react
+```
+
+## Quick Start
+
+```tsx
+import { CanvasTileEngine, useCanvasTileEngine } from "@canvas-tile-engine/react";
+
+const config = {
+    scale: 50,
+    size: { width: 800, height: 600 },
+    backgroundColor: "#337426",
+    eventHandlers: { drag: true, zoom: true, click: true },
+};
+
+function App() {
+    const engine = useCanvasTileEngine();
+
+    return (
+        <CanvasTileEngine
+            engine={engine}
+            config={config}
+            center={{ x: 0, y: 0 }}
+            onClick={(coords) => console.log("Clicked:", coords.snapped)}
+        >
+            <CanvasTileEngine.Rect items={[{ x: 0, y: 0, size: 1, style: { fillStyle: "#f9c74f" } }]} layer={0} />
+            <CanvasTileEngine.GridLines cellSize={10} layer={1} />
+        </CanvasTileEngine>
+    );
+}
+```
+
+## Documentation
+
+Full API reference and examples: [https://www.canvastileengine.dev/docs/react/installation](https://www.canvastileengine.dev/docs/react/installation)
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,324 @@
+import * as react from 'react';
+import { DrawObject, ImageItem, Coords, CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngine$1, EventHandlers, LayerHandle, onClickCallback, onHoverCallback, onDrawCallback } from '@canvas-tile-engine/core';
+export { CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngineCore, Circle, Coords, DrawObject, EventHandlers, ImageItem, Line, Path, Rect, Text, onClickCallback, onDrawCallback, onHoverCallback } from '@canvas-tile-engine/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface RectProps {
+    items: DrawObject | DrawObject[];
+    layer?: number;
+}
+
+interface CircleProps {
+    items: DrawObject | DrawObject[];
+    layer?: number;
+}
+
+interface ImageProps {
+    items: ImageItem | ImageItem[];
+    layer?: number;
+}
+
+interface GridLinesProps {
+    cellSize: number;
+    lineWidth?: number;
+    strokeStyle?: string;
+    layer?: number;
+}
+
+interface LineProps {
+    items: {
+        from: Coords;
+        to: Coords;
+    } | {
+        from: Coords;
+        to: Coords;
+    }[];
+    style?: {
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
+    layer?: number;
+}
+
+interface TextProps {
+    items: {
+        coords: Coords;
+        text: string;
+    } | {
+        coords: Coords;
+        text: string;
+    }[];
+    style?: {
+        fillStyle?: string;
+        font?: string;
+        textAlign?: CanvasTextAlign;
+        textBaseline?: CanvasTextBaseline;
+    };
+    layer?: number;
+}
+
+interface PathProps {
+    items: Coords[] | Coords[][];
+    style?: {
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
+    layer?: number;
+}
+
+interface StaticRectProps {
+    items: DrawObject[];
+    cacheKey: string;
+    layer?: number;
+}
+
+interface StaticCircleProps {
+    items: DrawObject[];
+    cacheKey: string;
+    layer?: number;
+}
+
+interface StaticImageProps {
+    items: ImageItem[];
+    cacheKey: string;
+    layer?: number;
+}
+
+interface DrawFunctionProps {
+    /** The draw function to execute */
+    children: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void;
+    layer?: number;
+}
+
+/**
+ * Engine handle returned by useCanvasTileEngine hook.
+ * Provides access to engine methods with proper typing.
+ *
+ * All methods return default/dummy values when engine is not ready,
+ * allowing safe usage without null checks.
+ */
+interface EngineHandle {
+    /** Whether the engine is ready (mounted and initialized) */
+    readonly isReady: boolean;
+    /** The underlying engine instance (null until component mounts) */
+    readonly instance: CanvasTileEngine$1 | null;
+    /** Render a frame */
+    render(): void;
+    /** Get current center coordinates */
+    getCenterCoords(): Coords;
+    /** Update center coordinates */
+    updateCoords(center: Coords): void;
+    /** Animate to target coordinates */
+    goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void): void;
+    /** Resize the canvas */
+    resize(width: number, height: number, durationMs?: number, onComplete?: () => void): void;
+    /** Get current canvas size */
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    /** Get current canvas scale */
+    getScale(): number;
+    /** Zoom in by a factor (default: 1.5) */
+    zoomIn(factor?: number): void;
+    /** Zoom out by a factor (default: 1.5) */
+    zoomOut(factor?: number): void;
+    /** Get current config */
+    getConfig(): Required<CanvasTileEngineConfig>;
+    /** Set map boundaries */
+    setBounds(bounds: {
+        minX: number;
+        maxX: number;
+        minY: number;
+        maxY: number;
+    }): void;
+    /** Dynamically update event handlers at runtime */
+    setEventHandlers(handlers: Partial<EventHandlers>): void;
+    /** Draw rectangles */
+    drawRect(items: DrawObject | DrawObject[], layer?: number): LayerHandle;
+    /** Draw static rectangles (cached) */
+    drawStaticRect(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;
+    /** Draw circles */
+    drawCircle(items: DrawObject | DrawObject[], layer?: number): LayerHandle;
+    /** Draw static circles (cached) */
+    drawStaticCircle(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;
+    /** Draw lines */
+    drawLine(items: {
+        from: Coords;
+        to: Coords;
+    } | {
+        from: Coords;
+        to: Coords;
+    }[], style?: {
+        strokeStyle?: string;
+        lineWidth?: number;
+    }, layer?: number): LayerHandle;
+    /** Draw text */
+    drawText(items: {
+        coords: Coords;
+        text: string;
+    } | {
+        coords: Coords;
+        text: string;
+    }[], style?: {
+        fillStyle?: string;
+        font?: string;
+        textAlign?: CanvasTextAlign;
+        textBaseline?: CanvasTextBaseline;
+    }, layer?: number): LayerHandle;
+    /** Draw paths/polylines */
+    drawPath(items: Coords[] | Coords[][], style?: {
+        strokeStyle?: string;
+        lineWidth?: number;
+    }, layer?: number): LayerHandle;
+    /** Draw images */
+    drawImage(items: (Omit<DrawObject, "style"> & {
+        img: HTMLImageElement;
+    }) | (Omit<DrawObject, "style"> & {
+        img: HTMLImageElement;
+    })[], layer?: number): LayerHandle;
+    /** Draw static images (cached) */
+    drawStaticImage(items: (Omit<DrawObject, "style"> & {
+        img: HTMLImageElement;
+    })[], cacheKey: string, layer?: number): LayerHandle;
+    /** Draw grid lines */
+    drawGridLines(cellSize: number, lineWidth?: number, strokeStyle?: string, layer?: number): LayerHandle;
+    /** Add custom draw function */
+    addDrawFunction(fn: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void, layer?: number): LayerHandle;
+    /** Clear a specific layer */
+    clearLayer(layer: number): void;
+    /** Clear all layers */
+    clearAll(): void;
+    /** Clear static cache */
+    clearStaticCache(cacheKey?: string): void;
+    /** Remove a previously registered draw callback */
+    removeLayerHandle(handle: LayerHandle): void;
+    /** Image loader instance (undefined until engine mounts) */
+    readonly images: CanvasTileEngine$1["images"] | undefined;
+}
+/**
+ * React hook that creates an engine handle for use with CanvasTileEngine component.
+ *
+ * @returns Engine handle to pass to CanvasTileEngine component
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const mainMap = useCanvasTileEngine();
+ *   const miniMap = useCanvasTileEngine();
+ *
+ *   useEffect(() => {
+ *     if (mainMap.isReady && miniMap.isReady) {
+ *       // Both engines are ready, draw items
+ *       mainMap.drawGridLines(50);
+ *       mainMap.render();
+ *     }
+ *   }, [mainMap.isReady, miniMap.isReady]);
+ *
+ *   return (
+ *     <>
+ *       <CanvasTileEngine engine={mainMap} config={...} />
+ *       <CanvasTileEngine engine={miniMap} config={...} />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useCanvasTileEngine(): EngineHandle;
+
+/**
+ * Props for CanvasTileEngine component
+ */
+interface CanvasTileEngineProps {
+    /** Engine handle from useCanvasTileEngine hook (required) */
+    engine: EngineHandle;
+    /** Engine configuration */
+    config: CanvasTileEngineConfig;
+    /** Initial center coordinates */
+    center?: Coords;
+    /** Additional class name for the wrapper div */
+    className?: string;
+    /** Additional styles for the wrapper div */
+    style?: React.CSSProperties;
+    /** Draw components (Rect, Circle, Image, GridLines, etc.) */
+    children?: React.ReactNode;
+    /** Callback when center coordinates change */
+    onCoordsChange?: (coords: Coords) => void;
+    /** Callback when a tile is clicked */
+    onClick?: onClickCallback;
+    /** Callback when hovering over tiles */
+    onHover?: onHoverCallback;
+    /** Callback on mouse down */
+    onMouseDown?: () => void;
+    /** Callback on mouse up */
+    onMouseUp?: () => void;
+    /** Callback on mouse leave */
+    onMouseLeave?: () => void;
+    /** Callback after each draw frame */
+    onDraw?: onDrawCallback;
+    /** Callback on canvas resize */
+    onResize?: () => void;
+}
+
+/**
+ * React component that renders a CanvasTileEngine.
+ * Supports both imperative API (via engine handle) and declarative API (via children).
+ *
+ * @example Declarative API with compound components
+ * ```tsx
+ * function App() {
+ *   const engine = useCanvasTileEngine();
+ *
+ *   return (
+ *     <CanvasTileEngine engine={engine} config={config}>
+ *       <CanvasTileEngine.GridLines cellSize={50} layer={0} />
+ *       <CanvasTileEngine.Image items={imageItems} layer={1} />
+ *       <CanvasTileEngine.Circle items={markers} layer={2} />
+ *     </CanvasTileEngine>
+ *   );
+ * }
+ * ```
+ *
+ * @example Imperative API
+ * ```tsx
+ * function App() {
+ *   const engine = useCanvasTileEngine();
+ *
+ *   useEffect(() => {
+ *     if (engine.isReady) {
+ *       engine.drawGridLines(50);
+ *       engine.render();
+ *     }
+ *   }, [engine.isReady]);
+ *
+ *   return <CanvasTileEngine engine={engine} config={config} />;
+ * }
+ * ```
+ */
+declare function CanvasTileEngineBase({ engine, config, center, className, style, children, onCoordsChange, onClick, onHover, onMouseDown, onMouseUp, onMouseLeave, onDraw, onResize, }: CanvasTileEngineProps): react_jsx_runtime.JSX.Element;
+declare const CanvasTileEngine: typeof CanvasTileEngineBase & {
+    Rect: react.NamedExoticComponent<RectProps>;
+    Circle: react.NamedExoticComponent<CircleProps>;
+    Image: react.NamedExoticComponent<ImageProps>;
+    GridLines: react.NamedExoticComponent<GridLinesProps>;
+    Line: react.NamedExoticComponent<LineProps>;
+    Text: react.NamedExoticComponent<TextProps>;
+    Path: react.NamedExoticComponent<PathProps>;
+    StaticRect: react.NamedExoticComponent<StaticRectProps>;
+    StaticCircle: react.NamedExoticComponent<StaticCircleProps>;
+    StaticImage: react.NamedExoticComponent<StaticImageProps>;
+    DrawFunction: react.NamedExoticComponent<DrawFunctionProps>;
+};
+
+interface EngineContextValue {
+    engine: EngineHandle;
+    /** Request a re-render of the canvas */
+    requestRender: () => void;
+}
+/**
+ * Hook to access the engine context from child components.
+ * Must be used within a CanvasTileEngine component.
+ */
+declare function useEngineContext(): EngineContextValue;
+
+export { CanvasTileEngine, type CanvasTileEngineProps, type CircleProps, type DrawFunctionProps, type EngineContextValue, type EngineHandle, type GridLinesProps, type ImageProps, type LineProps, type PathProps, type RectProps, type StaticCircleProps, type StaticImageProps, type StaticRectProps, type TextProps, useCanvasTileEngine, useEngineContext };

package/dist/index.d.ts

@@ -0,0 +1,324 @@
+import * as react from 'react';
+import { DrawObject, ImageItem, Coords, CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngine$1, EventHandlers, LayerHandle, onClickCallback, onHoverCallback, onDrawCallback } from '@canvas-tile-engine/core';
+export { CanvasTileEngineConfig, CanvasTileEngine as CanvasTileEngineCore, Circle, Coords, DrawObject, EventHandlers, ImageItem, Line, Path, Rect, Text, onClickCallback, onDrawCallback, onHoverCallback } from '@canvas-tile-engine/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface RectProps {
+    items: DrawObject | DrawObject[];
+    layer?: number;
+}
+
+interface CircleProps {
+    items: DrawObject | DrawObject[];
+    layer?: number;
+}
+
+interface ImageProps {
+    items: ImageItem | ImageItem[];
+    layer?: number;
+}
+
+interface GridLinesProps {
+    cellSize: number;
+    lineWidth?: number;
+    strokeStyle?: string;
+    layer?: number;
+}
+
+interface LineProps {
+    items: {
+        from: Coords;
+        to: Coords;
+    } | {
+        from: Coords;
+        to: Coords;
+    }[];
+    style?: {
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
+    layer?: number;
+}
+
+interface TextProps {
+    items: {
+        coords: Coords;
+        text: string;
+    } | {
+        coords: Coords;
+        text: string;
+    }[];
+    style?: {
+        fillStyle?: string;
+        font?: string;
+        textAlign?: CanvasTextAlign;
+        textBaseline?: CanvasTextBaseline;
+    };
+    layer?: number;
+}
+
+interface PathProps {
+    items: Coords[] | Coords[][];
+    style?: {
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
+    layer?: number;
+}
+
+interface StaticRectProps {
+    items: DrawObject[];
+    cacheKey: string;
+    layer?: number;
+}
+
+interface StaticCircleProps {
+    items: DrawObject[];
+    cacheKey: string;
+    layer?: number;
+}
+
+interface StaticImageProps {
+    items: ImageItem[];
+    cacheKey: string;
+    layer?: number;
+}
+
+interface DrawFunctionProps {
+    /** The draw function to execute */
+    children: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void;
+    layer?: number;
+}
+
+/**
+ * Engine handle returned by useCanvasTileEngine hook.
+ * Provides access to engine methods with proper typing.
+ *
+ * All methods return default/dummy values when engine is not ready,
+ * allowing safe usage without null checks.
+ */
+interface EngineHandle {
+    /** Whether the engine is ready (mounted and initialized) */
+    readonly isReady: boolean;
+    /** The underlying engine instance (null until component mounts) */
+    readonly instance: CanvasTileEngine$1 | null;
+    /** Render a frame */
+    render(): void;
+    /** Get current center coordinates */
+    getCenterCoords(): Coords;
+    /** Update center coordinates */
+    updateCoords(center: Coords): void;
+    /** Animate to target coordinates */
+    goCoords(x: number, y: number, durationMs?: number, onComplete?: () => void): void;
+    /** Resize the canvas */
+    resize(width: number, height: number, durationMs?: number, onComplete?: () => void): void;
+    /** Get current canvas size */
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    /** Get current canvas scale */
+    getScale(): number;
+    /** Zoom in by a factor (default: 1.5) */
+    zoomIn(factor?: number): void;
+    /** Zoom out by a factor (default: 1.5) */
+    zoomOut(factor?: number): void;
+    /** Get current config */
+    getConfig(): Required<CanvasTileEngineConfig>;
+    /** Set map boundaries */
+    setBounds(bounds: {
+        minX: number;
+        maxX: number;
+        minY: number;
+        maxY: number;
+    }): void;
+    /** Dynamically update event handlers at runtime */
+    setEventHandlers(handlers: Partial<EventHandlers>): void;
+    /** Draw rectangles */
+    drawRect(items: DrawObject | DrawObject[], layer?: number): LayerHandle;
+    /** Draw static rectangles (cached) */
+    drawStaticRect(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;
+    /** Draw circles */
+    drawCircle(items: DrawObject | DrawObject[], layer?: number): LayerHandle;
+    /** Draw static circles (cached) */
+    drawStaticCircle(items: DrawObject[], cacheKey: string, layer?: number): LayerHandle;
+    /** Draw lines */
+    drawLine(items: {
+        from: Coords;
+        to: Coords;
+    } | {
+        from: Coords;
+        to: Coords;
+    }[], style?: {
+        strokeStyle?: string;
+        lineWidth?: number;
+    }, layer?: number): LayerHandle;
+    /** Draw text */
+    drawText(items: {
+        coords: Coords;
+        text: string;
+    } | {
+        coords: Coords;
+        text: string;
+    }[], style?: {
+        fillStyle?: string;
+        font?: string;
+        textAlign?: CanvasTextAlign;
+        textBaseline?: CanvasTextBaseline;
+    }, layer?: number): LayerHandle;
+    /** Draw paths/polylines */
+    drawPath(items: Coords[] | Coords[][], style?: {
+        strokeStyle?: string;
+        lineWidth?: number;
+    }, layer?: number): LayerHandle;
+    /** Draw images */
+    drawImage(items: (Omit<DrawObject, "style"> & {
+        img: HTMLImageElement;
+    }) | (Omit<DrawObject, "style"> & {
+        img: HTMLImageElement;
+    })[], layer?: number): LayerHandle;
+    /** Draw static images (cached) */
+    drawStaticImage(items: (Omit<DrawObject, "style"> & {
+        img: HTMLImageElement;
+    })[], cacheKey: string, layer?: number): LayerHandle;
+    /** Draw grid lines */
+    drawGridLines(cellSize: number, lineWidth?: number, strokeStyle?: string, layer?: number): LayerHandle;
+    /** Add custom draw function */
+    addDrawFunction(fn: (ctx: CanvasRenderingContext2D, coords: Coords, config: Required<CanvasTileEngineConfig>) => void, layer?: number): LayerHandle;
+    /** Clear a specific layer */
+    clearLayer(layer: number): void;
+    /** Clear all layers */
+    clearAll(): void;
+    /** Clear static cache */
+    clearStaticCache(cacheKey?: string): void;
+    /** Remove a previously registered draw callback */
+    removeLayerHandle(handle: LayerHandle): void;
+    /** Image loader instance (undefined until engine mounts) */
+    readonly images: CanvasTileEngine$1["images"] | undefined;
+}
+/**
+ * React hook that creates an engine handle for use with CanvasTileEngine component.
+ *
+ * @returns Engine handle to pass to CanvasTileEngine component
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const mainMap = useCanvasTileEngine();
+ *   const miniMap = useCanvasTileEngine();
+ *
+ *   useEffect(() => {
+ *     if (mainMap.isReady && miniMap.isReady) {
+ *       // Both engines are ready, draw items
+ *       mainMap.drawGridLines(50);
+ *       mainMap.render();
+ *     }
+ *   }, [mainMap.isReady, miniMap.isReady]);
+ *
+ *   return (
+ *     <>
+ *       <CanvasTileEngine engine={mainMap} config={...} />
+ *       <CanvasTileEngine engine={miniMap} config={...} />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useCanvasTileEngine(): EngineHandle;
+
+/**
+ * Props for CanvasTileEngine component
+ */
+interface CanvasTileEngineProps {
+    /** Engine handle from useCanvasTileEngine hook (required) */
+    engine: EngineHandle;
+    /** Engine configuration */
+    config: CanvasTileEngineConfig;
+    /** Initial center coordinates */
+    center?: Coords;
+    /** Additional class name for the wrapper div */
+    className?: string;
+    /** Additional styles for the wrapper div */
+    style?: React.CSSProperties;
+    /** Draw components (Rect, Circle, Image, GridLines, etc.) */
+    children?: React.ReactNode;
+    /** Callback when center coordinates change */
+    onCoordsChange?: (coords: Coords) => void;
+    /** Callback when a tile is clicked */
+    onClick?: onClickCallback;
+    /** Callback when hovering over tiles */
+    onHover?: onHoverCallback;
+    /** Callback on mouse down */
+    onMouseDown?: () => void;
+    /** Callback on mouse up */
+    onMouseUp?: () => void;
+    /** Callback on mouse leave */
+    onMouseLeave?: () => void;
+    /** Callback after each draw frame */
+    onDraw?: onDrawCallback;
+    /** Callback on canvas resize */
+    onResize?: () => void;
+}
+
+/**
+ * React component that renders a CanvasTileEngine.
+ * Supports both imperative API (via engine handle) and declarative API (via children).
+ *
+ * @example Declarative API with compound components
+ * ```tsx
+ * function App() {
+ *   const engine = useCanvasTileEngine();
+ *
+ *   return (
+ *     <CanvasTileEngine engine={engine} config={config}>
+ *       <CanvasTileEngine.GridLines cellSize={50} layer={0} />
+ *       <CanvasTileEngine.Image items={imageItems} layer={1} />
+ *       <CanvasTileEngine.Circle items={markers} layer={2} />
+ *     </CanvasTileEngine>
+ *   );
+ * }
+ * ```
+ *
+ * @example Imperative API
+ * ```tsx
+ * function App() {
+ *   const engine = useCanvasTileEngine();
+ *
+ *   useEffect(() => {
+ *     if (engine.isReady) {
+ *       engine.drawGridLines(50);
+ *       engine.render();
+ *     }
+ *   }, [engine.isReady]);
+ *
+ *   return <CanvasTileEngine engine={engine} config={config} />;
+ * }
+ * ```
+ */
+declare function CanvasTileEngineBase({ engine, config, center, className, style, children, onCoordsChange, onClick, onHover, onMouseDown, onMouseUp, onMouseLeave, onDraw, onResize, }: CanvasTileEngineProps): react_jsx_runtime.JSX.Element;
+declare const CanvasTileEngine: typeof CanvasTileEngineBase & {
+    Rect: react.NamedExoticComponent<RectProps>;
+    Circle: react.NamedExoticComponent<CircleProps>;
+    Image: react.NamedExoticComponent<ImageProps>;
+    GridLines: react.NamedExoticComponent<GridLinesProps>;
+    Line: react.NamedExoticComponent<LineProps>;
+    Text: react.NamedExoticComponent<TextProps>;
+    Path: react.NamedExoticComponent<PathProps>;
+    StaticRect: react.NamedExoticComponent<StaticRectProps>;
+    StaticCircle: react.NamedExoticComponent<StaticCircleProps>;
+    StaticImage: react.NamedExoticComponent<StaticImageProps>;
+    DrawFunction: react.NamedExoticComponent<DrawFunctionProps>;
+};
+
+interface EngineContextValue {
+    engine: EngineHandle;
+    /** Request a re-render of the canvas */
+    requestRender: () => void;
+}
+/**
+ * Hook to access the engine context from child components.
+ * Must be used within a CanvasTileEngine component.
+ */
+declare function useEngineContext(): EngineContextValue;
+
+export { CanvasTileEngine, type CanvasTileEngineProps, type CircleProps, type DrawFunctionProps, type EngineContextValue, type EngineHandle, type GridLinesProps, type ImageProps, type LineProps, type PathProps, type RectProps, type StaticCircleProps, type StaticImageProps, type StaticRectProps, type TextProps, useCanvasTileEngine, useEngineContext };

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";var O=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var te=Object.prototype.hasOwnProperty;var oe=(r,o)=>{for(var t in o)O(r,t,{get:o[t],enumerable:!0})},ae=(r,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of ne(o))!te.call(r,n)&&n!==t&&O(r,n,{get:()=>o[n],enumerable:!(a=re(o,n))||a.enumerable});return r};var ie=r=>ae(O({},"__esModule",{value:!0}),r);var le={};oe(le,{CanvasTileEngine:()=>j,CanvasTileEngineCore:()=>K.CanvasTileEngine,useCanvasTileEngine:()=>k,useEngineContext:()=>c});module.exports=ie(le);var m=require("react"),$=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 _=(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 V=(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 B=(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 W=(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 Y=(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 X=(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 N=(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 U=(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 Z=(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 se({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}){let g=(0,m.useRef)({onCoordsChange:e,onClick:i,onHover:l,onMouseDown:f,onMouseUp:z,onMouseLeave:q,onDraw:F,onResize:M});(0,m.useEffect)(()=>{g.current={onCoordsChange:e,onClick:i,onHover:l,onMouseDown:f,onMouseUp:z,onMouseLeave:q,onDraw:F,onResize:M}});let E=(0,m.useRef)(null),G=(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 ee=(0,m.useMemo)(()=>({engine:r,requestRender:G}),[r,G]);return(0,m.useEffect)(()=>{let A=r._containerRef.current;if(!A)return;let u=new $.CanvasTileEngine(A,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?.(),r._setInstance(u),u.render(),()=>{u.destroy(),r._setInstance(null)}},[r]),(0,w.jsxs)(L.Provider,{value:ee,children:[(0,w.jsx)("div",{ref:r._containerRef,className:a,style:{...n},children:(0,w.jsx)("canvas",{})}),r.isReady&&s]})}var j=Object.assign(se,{Rect:_,Circle:V,Image:B,GridLines:W,Line:Y,Text:X,Path:N,StaticRect:U,StaticCircle:J,StaticImage:Q,DrawFunction:Z});var p=require("react"),d={layer:-1,id:Symbol("dummy")},ce={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,a]=(0,p.useState)(!1),n=(0,p.useCallback)(e=>{r.current=e,a(e!==null)},[]);return(0,p.useMemo)(()=>({_containerRef:o,_setInstance:n,get isReady(){return t},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()??ce},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,t])}var K=require("@canvas-tile-engine/core");0&&(module.exports={CanvasTileEngine,CanvasTileEngineCore,useCanvasTileEngine,useEngineContext});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import{useEffect as y,useRef as G,useCallback as pe,useMemo as Ce}from"react";import{CanvasTileEngine as ye}from"@canvas-tile-engine/core";import{createContext as Y,useContext as X}from"react";var C=Y(null);function c(){let r=X(C);if(!r)throw new Error("useEngineContext must be used within a CanvasTileEngine component");return r}import{useEffect as N,memo as U}from"react";var L=U(function({items:i,layer:n=1}){let{engine:a,requestRender:t}=c();return N(()=>{let s=a.drawRect(i,n);return t(),()=>{s&&a.removeLayerHandle(s)}},[a,i,n,t]),null});import{useEffect as J,memo as Q}from"react";var S=Q(function({items:i,layer:n=1}){let{engine:a,requestRender:t}=c();return J(()=>{let s=a.drawCircle(i,n);return t(),()=>{s&&a.removeLayerHandle(s)}},[a,i,n,t]),null});import{useEffect as Z,memo as $}from"react";var P=$(function({items:i,layer:n=1}){let{engine:a,requestRender:t}=c();return Z(()=>{let s=a.drawImage(i,n);return t(),()=>{s&&a.removeLayerHandle(s)}},[a,i,n,t]),null});import{useEffect as K,memo as ee}from"react";var h=ee(function({cellSize:i,lineWidth:n=1,strokeStyle:a="black",layer:t=0}){let{engine:s,requestRender:e}=c();return K(()=>{let o=s.drawGridLines(i,n,a,t);return e(),()=>{o&&s.removeLayerHandle(o)}},[s,i,n,a,t,e]),null});import{useEffect as re,memo as ne}from"react";var I=ne(function({items:i,style:n,layer:a=1}){let{engine:t,requestRender:s}=c();return re(()=>{let e=t.drawLine(i,n,a);return s(),()=>{e&&t.removeLayerHandle(e)}},[t,i,n,a,s]),null});import{useEffect as te,memo as oe}from"react";var T=oe(function({items:i,style:n,layer:a=2}){let{engine:t,requestRender:s}=c();return te(()=>{let e=t.drawText(i,n,a);return s(),()=>{e&&t.removeLayerHandle(e)}},[t,i,n,a,s]),null});import{useEffect as ae,memo as ie}from"react";var H=ie(function({items:i,style:n,layer:a=1}){let{engine:t,requestRender:s}=c();return ae(()=>{let e=t.drawPath(i,n,a);return s(),()=>{e&&t.removeLayerHandle(e)}},[t,i,n,a,s]),null});import{useEffect as D,useRef as se,memo as ce}from"react";var O=ce(function({items:i,cacheKey:n,layer:a=1}){let{engine:t,requestRender:s}=c(),e=se(n);return D(()=>{if(i.length===0)return;e.current!==n&&(t.clearStaticCache(e.current),e.current=n);let o=t.drawStaticRect(i,n,a);return s(),()=>{o&&t.removeLayerHandle(o)}},[t,i,n,a,s]),D(()=>()=>{t.clearStaticCache(n)},[t,n]),null});import{useEffect as j,useRef as le,memo as ue}from"react";var k=ue(function({items:i,cacheKey:n,layer:a=1}){let{engine:t,requestRender:s}=c(),e=le(n);return j(()=>{if(i.length===0)return;e.current!==n&&(t.clearStaticCache(e.current),e.current=n);let o=t.drawStaticCircle(i,n,a);return s(),()=>{o&&t.removeLayerHandle(o)}},[t,i,n,a,s]),j(()=>()=>{t.clearStaticCache(n)},[t,n]),null});import{useEffect as z,useRef as me,memo as de}from"react";var q=de(function({items:i,cacheKey:n,layer:a=1}){let{engine:t,requestRender:s}=c(),e=me(n);return z(()=>{if(i.length===0)return;e.current!==n&&(t.clearStaticCache(e.current),e.current=n);let o=t.drawStaticImage(i,n,a);return s(),()=>{o&&t.removeLayerHandle(o)}},[t,i,n,a,s]),z(()=>()=>{t.clearStaticCache(n)},[t,n]),null});import{useEffect as F,useRef as fe,memo as ge}from"react";var M=ge(function({children:i,layer:n=1}){let{engine:a,requestRender:t}=c(),s=fe(i);return F(()=>{s.current=i}),F(()=>{let e=a.addDrawFunction((o,l,d)=>{s.current(o,l,d)},n);return t(),()=>{e&&a.removeLayerHandle(e)}},[a,n,t]),null});import{jsx as A,jsxs as ve}from"react/jsx-runtime";function xe({engine:r,config:i,center:n={x:0,y:0},className:a,style:t,children:s,onCoordsChange:e,onClick:o,onHover:l,onMouseDown:d,onMouseUp:x,onMouseLeave:v,onDraw:b,onResize:E}){let f=G({onCoordsChange:e,onClick:o,onHover:l,onMouseDown:d,onMouseUp:x,onMouseLeave:v,onDraw:b,onResize:E});y(()=>{f.current={onCoordsChange:e,onClick:o,onHover:l,onMouseDown:d,onMouseUp:x,onMouseLeave:v,onDraw:b,onResize:E}});let p=G(null),w=pe(()=>{p.current===null&&(p.current=requestAnimationFrame(()=>{p.current=null,r.render()}))},[r]);y(()=>()=>{p.current!==null&&cancelAnimationFrame(p.current)},[]);let W=Ce(()=>({engine:r,requestRender:w}),[r,w]);return y(()=>{let R=r._containerRef.current;if(!R)return;let u=new ye(R,i,n);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?.(),r._setInstance(u),u.render(),()=>{u.destroy(),r._setInstance(null)}},[r]),ve(C.Provider,{value:W,children:[A("div",{ref:r._containerRef,className:a,style:{...t},children:A("canvas",{})}),r.isReady&&s]})}var _=Object.assign(xe,{Rect:L,Circle:S,Image:P,GridLines:h,Line:I,Text:T,Path:H,StaticRect:O,StaticCircle:k,StaticImage:q,DrawFunction:M});import{useRef as V,useCallback as be,useState as Ee,useMemo as we}from"react";var m={layer:-1,id:Symbol("dummy")},Re={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 B(){let r=V(null),i=V(null),[n,a]=Ee(!1),t=be(e=>{r.current=e,a(e!==null)},[]);return we(()=>({_containerRef:i,_setInstance:t,get isReady(){return n},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()??Re},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)}}),[t,n])}import{CanvasTileEngine as kr}from"@canvas-tile-engine/core";export{_ as CanvasTileEngine,kr as CanvasTileEngineCore,B as useCanvasTileEngine,c as useEngineContext};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@canvas-tile-engine/react",
+    "version": "0.0.1",
+    "description": "React bindings for Canvas Tile Engine - build interactive 2D grid-based maps with declarative components",
+    "author": "Enes Yüksel",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/enesyukselx/canvas-tile-engine.git",
+        "directory": "packages/react"
+    },
+    "homepage": "https://canvastileengine.dev",
+    "bugs": {
+        "url": "https://github.com/enesyukselx/canvas-tile-engine/issues"
+    },
+    "keywords": [
+        "canvas",
+        "tile",
+        "engine",
+        "react",
+        "2d",
+        "map",
+        "game",
+        "grid",
+        "visualization",
+        "component"
+    ],
+    "sideEffects": false,
+    "main": "dist/index.cjs",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.cjs"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "@canvas-tile-engine/core": ">=0.0.1"
+    },
+    "dependencies": {
+        "@canvas-tile-engine/core": "workspace:*"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.0",
+        "@types/react-dom": "^18.3.0"
+    }
+}