@deepnoid/canvas 0.1.38 → 0.1.39

package/dist/components/AnnotationLayer/index.js

@@ -1,35 +1,129 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { drawCanvas, drawRect, resolutionCanvas } from '../../utils/graphic';
-const AnnotationLayer = ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates }) => {
-    const canvas = useRef(null);
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { DrawMode } from '../../enum/common';
+import { ignoreImageKey, isEqualWith } from '../../utils/common/isEqualWith';
+import { cloneDeepWith } from '../../utils/common/cloneDeepWith';
+import { cloneDeep } from '../../utils/common/cloneDeep';
+import { MouseAction } from '../../utils/mouseActions';
+import { useDrawEvents } from './_hooks/drawEvents/useDrawEvents';
+import { useHotkeys } from './_hooks/useHotkeys';
+import { INIT_POINT, useMouse } from './_hooks/useMouse';
+import { useCanvasDraw } from './_hooks/useCanvasDraw';
+import { drawCanvas, resolutionCanvas } from '../../utils/canvas';
+const initCanvasState = { moveX: 0, moveY: 0, zoomX: 0, zoomY: 0, zoom: 0, dx: 0, dy: 0, dw: 0, dh: 0 };
+const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSetCoordinates, historyRef, drawing, editable, }) => {
+    const { lineSize: drawLineSize, applyStyle, label: drawLabel, mode: selectedDrawMode, color: drawColor } = drawing;
+    const canvasRef = useRef(null);
+    const canvasStateRef = useRef(initCanvasState);
+    const animationFrameId = useRef(0);
+    const coordinatesRef = useRef([]);
+    const currentCoordinateRef = useRef(null);
+    const maskImageRef = useRef(typeof window !== 'undefined' ? new window.Image() : null);
+    const mousePointRef = useRef(INIT_POINT);
+    const mouseActionRef = useRef(null);
+    const startMousePointRef = useRef(null);
+    const prevMousePointRef = useRef(null);
+    const rectangleAnchorRef = useRef(null);
+    const [showSelectedOnly, setShowSelectedOnly] = useState(false);
+    const setCoordinates = useCallback((coordinates) => {
+        coordinatesRef.current = cloneDeep(coordinates) || [];
+        propSetCoordinates(coordinates);
+    }, [coordinates]);
+    const setMousePoint = useCallback((point) => (mousePointRef.current = point), []);
+    const { drawCross, drawActiveRect, drawRectFromPoints, setCursorStyle } = useCanvasDraw({ drawLineSize, drawColor });
+    useDrawEvents({
+        canvasRef,
+        canvasStateRef,
+        mousePointRef,
+        setMousePoint,
+        mouseActionRef,
+        startMousePointRef,
+        prevMousePointRef,
+        currentCoordinateRef,
+        coordinatesRef,
+        setCoordinates,
+        rectangleAnchorRef,
+        historyRef,
+        maskImageRef,
+        drawLabel,
+        selectedDrawMode,
+        editable,
+    });
+    const { handleMouseDown, handleMouseUp, handleMouseLeave } = useMouse({
+        canvasRef,
+        mouseActionRef,
+        setMousePoint,
+        coordinatesRef,
+        setCoordinates,
+        historyRef,
+        selectedDrawMode,
+    });
+    useHotkeys({
+        onDelete: () => {
+            coordinatesRef.current = coordinatesRef.current.filter((coordinate) => !coordinate.selected);
+            setCoordinates(coordinatesRef.current);
+            historyRef.current.add(cloneDeep(coordinatesRef.current));
+        },
+        toggleSelectionOnly: () => setShowSelectedOnly((prev) => !prev),
+        onUndoRedo: (isRedo) => {
+            const result = isRedo ? historyRef.current.redo() : historyRef.current.undo();
+            if (result)
+                setCoordinates(result);
+            const coordinate = coordinatesRef.current.find((coordinate) => coordinate.selected);
+            currentCoordinateRef.current = coordinate || null;
+        },
+    });
     useEffect(() => {
+        if (!isEqualWith(coordinates, coordinatesRef.current, ignoreImageKey)) {
+            coordinatesRef.current = cloneDeepWith(coordinates, () => {
+                return undefined;
+            });
+        }
+    }, [coordinates]);
+    useEffect(() => {
+        const initialize = () => {
+            const { moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh } = canvasState;
+            canvasStateRef.current = { moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh };
+        };
+        const drawNewBBox = (context) => {
+            if (mouseActionRef.current === MouseAction.LEFT && startMousePointRef.current) {
+                drawRectFromPoints(context, mousePointRef.current, startMousePointRef.current, canvasStateRef.current.zoom);
+            }
+        };
         const redraw = () => {
-            const canvas_el = resolutionCanvas(canvas.current);
-            if (canvas_el) {
-                drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas_el, undefined, true);
-                const context = canvas_el.getContext('2d');
-                if (context && coordinates) {
-                    const deep_copy = JSON.parse(JSON.stringify(coordinates));
-                    deep_copy.forEach((coordinate) => {
-                        drawRect(context, coordinate);
-                    });
+            const canvas = resolutionCanvas(canvasRef.current);
+            if (!canvas)
+                return;
+            const { moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh } = canvasState;
+            drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas, undefined, true);
+            const context = canvas.getContext('2d');
+            if (context && coordinates) {
+                const cloneCoordinates = cloneDeep(coordinatesRef.current);
+                cloneCoordinates.reverse().forEach((coordinate) => {
+                    if (coordinate.type === DrawMode.RECTANGLE) {
+                        if (!showSelectedOnly || coordinate.selected) {
+                            applyStyle({ variant: 'drawRect', context, coordinate, drawLineSize, zoom });
+                            applyStyle({ variant: 'drawText', context, coordinate, drawLineSize, zoom });
+                            drawActiveRect(context, coordinate, zoom);
+                            setCursorStyle(canvas, mousePointRef, coordinate, zoom);
+                        }
+                    }
+                });
+                if (mousePointRef.current && editable && selectedDrawMode && !currentCoordinateRef.current) {
+                    drawNewBBox(context);
+                    drawCross(context, dw, dh, zoom, mousePointRef.current);
                 }
             }
+            animationFrameId.current = requestAnimationFrame(redraw);
         };
+        initialize();
         redraw();
         window.addEventListener('resize', redraw);
         return () => {
             window.removeEventListener('resize', redraw);
+            cancelAnimationFrame(animationFrameId.current);
         };
-    }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, coordinates]);
-    return (_jsx("canvas", { ref: canvas, style: {
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            backgroundColor: 'transparent',
-            transition: 'all 500ms',
-            willChange: 'transform',
-        } }));
+    }, [canvasState, coordinates, selectedDrawMode, editable]);
+    return (_jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, style: { position: 'absolute', height: '100%', width: '100%' } }));
 };
 export default AnnotationLayer;

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+import { AnnotationCanvasProps } from './AnnotationCanvas/index';
+export type AnnotationViewerProps = Omit<AnnotationCanvasProps, 'editable' | 'drawing' | 'events'> & {
+    drawing: Pick<AnnotationCanvasProps['drawing'], 'lineSize' | 'applyStyle'>;
+    events: Pick<AnnotationCanvasProps['events'], 'onImageLoadSuccess' | 'onImageLoadError'>;
+};
+export declare const AnnotationViewer: (props: AnnotationViewerProps) => import("react/jsx-runtime").JSX.Element;
+export type AnnotationEditorProps = AnnotationCanvasProps;
+export declare const AnnotationEditor: (props: AnnotationEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AnnotationCanvas from './AnnotationCanvas/index';
+export const AnnotationViewer = (props) => {
+    return (_jsx(AnnotationCanvas, { ...props, editable: false }));
+};
+export const AnnotationEditor = (props) => {
+    return (_jsx(AnnotationCanvas, { ...props, editable: true }));
+};

package/dist/enum/common.d.ts

@@ -0,0 +1,13 @@
+export declare enum DrawMode {
+    RECTANGLE = "RECTANGLE"
+}
+export declare enum RectangleAnchor {
+    LEFT_TOP = "LEFT_TOP",
+    RIGHT_TOP = "RIGHT_TOP",
+    LEFT_BOTTOM = "LEFT_BOTTOM",
+    RIGHT_BOTTOM = "RIGHT_BOTTOM",
+    TOP = "TOP",
+    BOTTOM = "BOTTOM",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT"
+}

package/dist/enum/common.js

@@ -0,0 +1,15 @@
+export var DrawMode;
+(function (DrawMode) {
+    DrawMode["RECTANGLE"] = "RECTANGLE";
+})(DrawMode || (DrawMode = {}));
+export var RectangleAnchor;
+(function (RectangleAnchor) {
+    RectangleAnchor["LEFT_TOP"] = "LEFT_TOP";
+    RectangleAnchor["RIGHT_TOP"] = "RIGHT_TOP";
+    RectangleAnchor["LEFT_BOTTOM"] = "LEFT_BOTTOM";
+    RectangleAnchor["RIGHT_BOTTOM"] = "RIGHT_BOTTOM";
+    RectangleAnchor["TOP"] = "TOP";
+    RectangleAnchor["BOTTOM"] = "BOTTOM";
+    RectangleAnchor["LEFT"] = "LEFT";
+    RectangleAnchor["RIGHT"] = "RIGHT";
+})(RectangleAnchor || (RectangleAnchor = {}));

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import AnnotationViewer from './components/AnnotationViewer';
-export { AnnotationViewer };
-export type { ZoomButtonType } from './components/AnnotationViewer';
-export type { Rectangle, Coordinate } from './types/coordinate';
+export { AnnotationViewer, AnnotationEditor } from './components';
+export type { AnnotationViewerProps, AnnotationEditorProps } from './components';
+export type { ZoomButtonType } from './components/AnnotationCanvas';
+export type { Rectangle, Coordinate, ApplyAnnotationStyle } from './types';
+export { DrawMode } from './enum/common';

package/dist/index.js

@@ -1,2 +1,2 @@
-import AnnotationViewer from './components/AnnotationViewer';
-export { AnnotationViewer };
+export { AnnotationViewer, AnnotationEditor } from './components';
+export { DrawMode } from './enum/common';

package/dist/types/index.d.ts

@@ -0,0 +1,58 @@
+import { DrawMode } from '../enum/common';
+import { MouseAction } from '../utils/mouseActions';
+export type CanvasState = {
+    moveX: number;
+    moveY: number;
+    zoomX: number;
+    zoomY: number;
+    zoom: number;
+    dx: number;
+    dy: number;
+    dw: number;
+    dh: number;
+};
+export type Point = {
+    x: number;
+    y: number;
+    selected?: boolean;
+    mouseAction?: MouseAction;
+};
+export type Rectangle = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type Label = {
+    id: number;
+    name: string;
+};
+export type Coordinate = {
+    label?: Label;
+    type?: DrawMode;
+    color?: 'success' | 'warning' | 'danger';
+} & Rectangle;
+export type EditableCoordinate = Coordinate & {
+    selected?: boolean;
+};
+export type ApplyAnnotationStyleVariant = 'drawRect' | 'drawText';
+export type ApplyAnnotationStyleParams = {
+    variant: ApplyAnnotationStyleVariant;
+    context: CanvasRenderingContext2D;
+    coordinate: EditableCoordinate;
+    drawLineSize: number;
+    zoom: number;
+};
+export type ApplyAnnotationStyle = (params: ApplyAnnotationStyleParams) => void;
+export type AnnotationCanvasOptionsZoom = {
+    step?: number;
+    max?: number;
+    min?: number;
+};
+export type AnnotationCanvasDrawing = {
+    lineSize: number;
+    applyStyle: ApplyAnnotationStyle;
+    label?: Label;
+    mode?: DrawMode;
+    color?: string;
+};

package/dist/utils/canvas.d.ts

@@ -0,0 +1,3 @@
+export declare const drawCanvas: (moveX: number, moveY: number, zoomX: number, zoomY: number, zoom: number, dx: number, dy: number, canvas?: HTMLCanvasElement, image?: HTMLImageElement, isClear?: boolean) => void;
+export declare const resolutionCanvas: (canvas: HTMLCanvasElement | null | undefined, width?: number, height?: number) => HTMLCanvasElement | undefined;
+export declare const clearCanvasRect: (canvas: HTMLCanvasElement | null | undefined) => void;

package/dist/utils/canvas.js

@@ -0,0 +1,37 @@
+export const drawCanvas = (moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas, image, isClear) => {
+    if (canvas) {
+        const context = canvas.getContext('2d');
+        if (isClear)
+            context?.clearRect(0, 0, canvas.width, canvas.height);
+        const resolution_ratio_x = canvas.width / canvas.clientWidth;
+        const resolution_ratio_y = canvas.height / canvas.clientHeight;
+        context?.translate(dx * resolution_ratio_x, dy * resolution_ratio_y);
+        context?.translate(moveX * resolution_ratio_x, moveY * resolution_ratio_y);
+        context?.translate(zoomX, zoomY);
+        context?.scale(zoom, zoom);
+        context?.translate(-zoomX, -zoomY);
+        try {
+            if (image)
+                context?.drawImage(image, 0, 0, image.width, image.height);
+        }
+        catch (error) {
+            console.error('Failed to draw image', error);
+        }
+    }
+};
+export const resolutionCanvas = (canvas, width, height) => {
+    if (!canvas)
+        return undefined;
+    const newCanvas = canvas;
+    newCanvas.width = width || newCanvas.clientWidth;
+    newCanvas.height = height || newCanvas.clientHeight;
+    return newCanvas;
+};
+export const clearCanvasRect = (canvas) => {
+    if (!canvas)
+        return;
+    const ctx = canvas.getContext('2d');
+    const resolvedCanvas = resolutionCanvas(canvas);
+    if (resolvedCanvas)
+        ctx?.clearRect(0, 0, resolvedCanvas.width, resolvedCanvas.height);
+};

package/dist/utils/common/cloneDeep.d.ts

@@ -0,0 +1 @@
+export declare const cloneDeep: <T>(obj: T) => T;

package/dist/utils/common/cloneDeep.js

@@ -0,0 +1,18 @@
+export const cloneDeep = (obj) => {
+    if (obj === null || typeof obj !== 'object') {
+        return obj;
+    }
+    if (obj instanceof Date) {
+        return new Date(obj.getTime());
+    }
+    if (Array.isArray(obj)) {
+        return obj.map((item) => cloneDeep(item));
+    }
+    const copy = {};
+    for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            copy[key] = cloneDeep(obj[key]);
+        }
+    }
+    return copy;
+};

package/dist/utils/common/cloneDeepWith.d.ts

@@ -0,0 +1 @@
+export declare function cloneDeepWith<T>(obj: T, cloneValue: (value: unknown, key: PropertyKey | undefined, parent: unknown, stack: Map<unknown, unknown>) => unknown): T;

package/dist/utils/common/cloneDeepWith.js

@@ -0,0 +1,34 @@
+export function cloneDeepWith(obj, cloneValue) {
+    const stack = new Map();
+    const baseClone = (value, key, parent) => {
+        const customResult = cloneValue(value, key, parent, stack);
+        if (customResult !== undefined) {
+            return customResult;
+        }
+        if (value === null || typeof value !== 'object') {
+            return value;
+        }
+        if (stack.has(value)) {
+            return stack.get(value);
+        }
+        if (value instanceof Date) {
+            return new Date(value.getTime());
+        }
+        if (Array.isArray(value)) {
+            const arr = [];
+            stack.set(value, arr);
+            value.forEach((item, i) => {
+                arr[i] = baseClone(item, i, value);
+            });
+            return arr;
+        }
+        const result = {};
+        stack.set(value, result);
+        Object.keys(value).forEach((k) => {
+            const v = value[k];
+            result[k] = baseClone(v, k, value);
+        });
+        return result;
+    };
+    return baseClone(obj, undefined, undefined);
+}

package/dist/utils/common/isEqualWith.d.ts

@@ -0,0 +1,2 @@
+export declare const isEqualWith: (a: unknown, b: unknown, areValuesEqual: (x: unknown, y: unknown, property?: PropertyKey, xParent?: unknown, yParent?: unknown, stack?: Map<unknown, unknown>) => boolean | void) => boolean;
+export declare const ignoreImageKey: (objValue: any, othValue: any) => boolean;

package/dist/utils/common/isEqualWith.js

@@ -0,0 +1,70 @@
+const isEqualDate = (a, b) => a.getTime() === b.getTime();
+const isEqualArray = (a, b, baseEqual, xParent, yParent) => {
+    if (a.length !== b.length)
+        return false;
+    return a.every((item, i) => baseEqual(item, b[i], i, xParent, yParent));
+};
+const isEqualObject = (a, b, baseEqual) => {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    return aKeys.every((key) => baseEqual(a[key], b[key], key, a, b));
+};
+export const isEqualWith = (a, b, areValuesEqual) => {
+    const stack = new Map();
+    const baseEqual = (x, y, property, xParent, yParent) => {
+        const customResult = areValuesEqual(x, y, property, xParent, yParent, stack);
+        if (typeof customResult === 'boolean')
+            return customResult;
+        if (x === y)
+            return true;
+        if (x == null || y == null)
+            return false;
+        if (typeof x !== typeof y)
+            return false;
+        if (stack.has(x))
+            return stack.get(x) === y;
+        stack.set(x, y);
+        if (x instanceof Date && y instanceof Date)
+            return isEqualDate(x, y);
+        if (Array.isArray(x) && Array.isArray(y)) {
+            return isEqualArray(x, y, baseEqual, x, y);
+        }
+        if (typeof x === 'object' && typeof y === 'object' && x !== null && y !== null) {
+            return isEqualObject(x, y, baseEqual);
+        }
+        return Object.is(x, y);
+    };
+    return baseEqual(a, b);
+};
+export const ignoreImageKey = (objValue, othValue) => {
+    if (Array.isArray(objValue) && Array.isArray(othValue)) {
+        if (objValue.length !== othValue.length) {
+            return false;
+        }
+        for (let i = 0; i < objValue.length; i++) {
+            if (!isEqualWith(objValue[i], othValue[i], ignoreImageKey)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    if (typeof objValue === 'object' && typeof othValue === 'object' && objValue !== null && othValue !== null) {
+        const objKeys = Object.keys(objValue);
+        const othKeys = Object.keys(othValue);
+        if (objKeys.length !== othKeys.length) {
+            return false;
+        }
+        for (let key of objKeys) {
+            if (key === 'image') {
+                continue;
+            }
+            if (!isEqualWith(objValue[key], othValue[key], ignoreImageKey)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return objValue === othValue;
+};

package/dist/utils/mouseActions.d.ts

@@ -0,0 +1,8 @@
+export declare enum MouseAction {
+    LEFT = "LEFT",
+    WHEEL = "WHEEL",
+    RIGHT = "RIGHT"
+}
+export declare const mapButtonToMouseAction: (button: number) => MouseAction | undefined;
+export declare const isMouseClickAction: (button: number, action: MouseAction) => boolean;
+export declare const isMouseDragAction: (buttons: number, action: MouseAction) => boolean;

package/dist/utils/mouseActions.js

@@ -0,0 +1,19 @@
+export var MouseAction;
+(function (MouseAction) {
+    MouseAction["LEFT"] = "LEFT";
+    MouseAction["WHEEL"] = "WHEEL";
+    MouseAction["RIGHT"] = "RIGHT";
+})(MouseAction || (MouseAction = {}));
+const buttonToActionMap = {
+    0: MouseAction.LEFT,
+    1: MouseAction.WHEEL,
+    2: MouseAction.RIGHT,
+};
+const buttonsToActionMap = {
+    1: MouseAction.LEFT,
+    2: MouseAction.RIGHT,
+    4: MouseAction.WHEEL,
+};
+export const mapButtonToMouseAction = (button) => buttonToActionMap[button];
+export const isMouseClickAction = (button, action) => buttonToActionMap[button] === action;
+export const isMouseDragAction = (buttons, action) => (buttons & Number(Object.keys(buttonsToActionMap).find((key) => buttonsToActionMap[Number(key)] === action))) !== 0;

package/dist/utils/pointTransform.d.ts

@@ -0,0 +1,2 @@
+import { Point } from '../types';
+export declare const getMousePointTransform: (mousePoint: Point, movePoint: Point, zoomPoint: Point, originPoint: Point, zoom: number, canvas: HTMLCanvasElement, rotate?: number) => Point;

package/dist/utils/pointTransform.js

@@ -0,0 +1,46 @@
+const applyOrigin = (mouse, origin) => {
+    const x = mouse.x - origin.x;
+    const y = mouse.y - origin.y;
+    return {
+        x,
+        y,
+    };
+};
+const applyMove = (mouse, move) => {
+    const x = mouse.x - move.x;
+    const y = mouse.y - move.y;
+    return {
+        x,
+        y,
+    };
+};
+const applyZoom = (mouse, zoomPoint, zoom, canvas) => {
+    const resolution_ratio_x = canvas.width / canvas.clientWidth;
+    const resolution_ratio_y = canvas.height / canvas.clientHeight;
+    let x = mouse.x * (1 / zoom) * resolution_ratio_x;
+    let y = mouse.y * (1 / zoom) * resolution_ratio_y;
+    x = x + zoomPoint.x;
+    y = y + zoomPoint.y;
+    x = x - zoomPoint.x * (1 / zoom);
+    y = y - zoomPoint.y * (1 / zoom);
+    return {
+        x,
+        y,
+    };
+};
+const applyRotate = (mouse, rotate, center) => {
+    const rad = (rotate * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const x = cos * (mouse.x - center.x) - sin * (mouse.y - center.y) + center.x;
+    const y = sin * (mouse.x - center.x) + cos * (mouse.y - center.y) + center.y;
+    return { x, y };
+};
+export const getMousePointTransform = (mousePoint, movePoint, zoomPoint, originPoint, zoom, canvas, rotate = 0) => {
+    let mouse = mousePoint;
+    mouse = applyRotate(mouse, rotate, { x: canvas.width / 2, y: canvas.height / 2 });
+    mouse = applyOrigin(mouse, originPoint);
+    mouse = applyMove(mouse, movePoint);
+    mouse = applyZoom(mouse, zoomPoint, zoom, canvas);
+    return mouse;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/canvas",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -26,6 +26,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/node": "^24.5.2",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^4.2.0",

package/dist/components/AnnotationViewer/index.d.ts

@@ -1,22 +0,0 @@
-import { ComponentType, ReactNode } from 'react';
-import { Coordinate } from '../../types/coordinate';
-export type ZoomButtonType = {
-    onClick: () => void;
-    children: ReactNode;
-};
-type Props = {
-    image: string;
-    coordinates?: Coordinate[];
-    panZoomable?: boolean;
-    ZoomButton?: ComponentType<{
-        onClick: () => void;
-        children: ReactNode;
-    }>;
-    resetOnImageChange?: boolean;
-    editable?: boolean;
-    timeout?: number;
-    onImageLoadSuccess?: () => void;
-    onImageLoadError?: (error: Error) => void;
-};
-declare const AnnotationViewer: ({ image, coordinates, panZoomable, ZoomButton, resetOnImageChange, editable, timeout, onImageLoadSuccess, onImageLoadError, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default AnnotationViewer;

package/dist/components/AnnotationViewer/index.js

@@ -1,80 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import AnnotationLayer from '../AnnotationLayer';
-import { useImagePanZoom } from './_hooks/useImagePanZoom';
-import useResizeObserver from '../../hooks/useResizeObserver';
-import { clearCanvasRect, drawCanvas, resolutionCanvas } from '../../utils/graphic';
-import { useDebounce } from '../../hooks/useDebounce';
-const AnnotationViewer = ({ image, coordinates, panZoomable = false, ZoomButton, resetOnImageChange = true, editable = false, timeout = 10000, onImageLoadSuccess, onImageLoadError, }) => {
-    const canvasRef = useRef(null);
-    const imageRef = useRef(new Image());
-    const [displayCoordinates, setDisplayCoordinates] = useState();
-    const debouncedHandleResize = useDebounce((size) => {
-        if (image && size.width && size.height && canvasRef.current && imageRef.current.src) {
-            const canvas = resolutionCanvas(canvasRef.current);
-            if (canvas)
-                initZoomAndPosition(canvas, imageRef.current);
-        }
-    }, 150);
-    useResizeObserver({ ref: canvasRef, onResize: debouncedHandleResize });
-    const { canvasState, initZoomAndPosition, initCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, } = useImagePanZoom({ canvasRef, imageRef, panZoomable });
-    useEffect(() => {
-        const createEmptyImage = () => {
-            const img = new Image();
-            img.width = img.height = 0;
-            return img;
-        };
-        const resetCanvas = (errorMsg) => {
-            clearCanvasRect(canvasRef.current);
-            setDisplayCoordinates([]);
-            imageRef.current = createEmptyImage();
-            if (errorMsg)
-                onImageLoadError?.(new Error(errorMsg));
-        };
-        if (!image?.trim())
-            return void resetCanvas();
-        let cancelled = false;
-        const tempImage = new Image();
-        tempImage.onload = () => {
-            if (cancelled || !canvasRef.current)
-                return;
-            onImageLoadSuccess?.();
-            if (resetOnImageChange) {
-                setTimeout(() => initCanvas(), 0);
-            }
-            else {
-                preserveZoomAndPosition(canvasRef.current, tempImage, canvasState.zoom / (canvasState.initZoom || 1));
-            }
-            imageRef.current = tempImage;
-            setDisplayCoordinates(coordinates);
-        };
-        tempImage.onerror = () => !cancelled && resetCanvas(`Failed to load image: ${image}`);
-        tempImage.src = image;
-        return () => {
-            cancelled = true;
-        };
-    }, [image, resetOnImageChange]);
-    useEffect(() => {
-        if (!canvasRef.current)
-            return;
-        const redraw = (canvas) => {
-            drawCanvas(canvasState.moveX, canvasState.moveY, canvasState.zoomX, canvasState.zoomY, canvasState.zoom, canvasState.dx, canvasState.dy, canvas, imageRef.current, true);
-        };
-        const canvas = resolutionCanvas(canvasRef.current);
-        if (canvas)
-            redraw(canvas);
-    }, [canvasState]);
-    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, onContextMenu: (e) => e.preventDefault(), style: {
-                flex: 1,
-                position: 'relative',
-                cursor: panZoomable ? 'grab' : 'default',
-            }, children: [_jsx("canvas", { ref: canvasRef, style: {
-                        position: 'absolute',
-                        width: '100%',
-                        height: '100%',
-                        left: 0,
-                        top: 0,
-                    } }), _jsx(AnnotationLayer, { ...canvasState, coordinates: displayCoordinates, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
-};
-export default AnnotationViewer;