@deepnoid/canvas 0.1.38 → 0.1.39

package/dist/components/AnnotationLayer/_hooks/drawEvents/rectangleUtils.js

@@ -0,0 +1,211 @@
+import { MouseAction } from '../../../../utils/mouseActions';
+import { cloneDeep } from '../../../../utils/common/cloneDeep';
+import { DrawMode, RectangleAnchor } from '../../../../enum/common';
+import { getMousePointTransform } from '../../../../utils/pointTransform';
+export const ACTIVE_POINT_SIZE = 10;
+export const getRectangleCorners = ({ x, y, width, height }) => {
+    return [
+        { x, y },
+        { x: x + width, y },
+        { x, y: y + height },
+        { x: x + width, y: y + height },
+    ];
+};
+export const selectRectangleAtPoint = (zoom, mousePoint, coordinatesRef, currentCoordinateRef) => {
+    const coordinates = coordinatesRef.current;
+    const { x: mouseX, y: mouseY } = mousePoint;
+    const padding = ACTIVE_POINT_SIZE / zoom;
+    const isPointInBBox = (c) => mouseX >= c.x - padding &&
+        mouseX <= c.x + c.width + padding &&
+        mouseY >= c.y - padding &&
+        mouseY <= c.y + c.height + padding;
+    let selectedIndex = -1;
+    let minArea = Number.MAX_SAFE_INTEGER;
+    const currentIndex = coordinates.findIndex((c) => c.selected);
+    if (currentIndex >= 0) {
+        const c = coordinates[currentIndex];
+        if (c.type === DrawMode.RECTANGLE && isPointInBBox(c)) {
+            selectedIndex = currentIndex;
+            minArea = c.width * c.height;
+        }
+    }
+    if (selectedIndex === -1) {
+        coordinates.forEach((c, idx) => {
+            if (c.type !== DrawMode.RECTANGLE || !isPointInBBox(c))
+                return;
+            const area = c.width * c.height;
+            if (area < minArea) {
+                minArea = area;
+                selectedIndex = idx;
+            }
+        });
+    }
+    coordinates.forEach((c) => (c.selected = false));
+    if (selectedIndex >= 0) {
+        coordinates[selectedIndex].selected = true;
+        currentCoordinateRef.current = coordinates[selectedIndex];
+    }
+    else {
+        currentCoordinateRef.current = null;
+    }
+};
+export const updateActiveRectangleAnchor = (zoom, mousePointRef, currentCoordinateRef, rectangleAnchorRef) => {
+    if (!currentCoordinateRef.current)
+        return;
+    const points = getRectangleCorners(currentCoordinateRef.current);
+    const pointSize = ACTIVE_POINT_SIZE / zoom;
+    const { x: mouseX, y: mouseY } = mousePointRef;
+    const { x, y, width: w, height: h } = currentCoordinateRef.current;
+    if (mouseX >= points[0].x - pointSize / 2 &&
+        mouseX <= points[0].x + pointSize / 2 &&
+        mouseY >= points[0].y - pointSize / 2 &&
+        mouseY <= points[0].y + pointSize / 2) {
+        rectangleAnchorRef.current = RectangleAnchor.LEFT_TOP;
+    }
+    else if (mouseX >= points[1].x - pointSize / 2 &&
+        mouseX <= points[1].x + pointSize / 2 &&
+        mouseY >= points[1].y - pointSize / 2 &&
+        mouseY <= points[1].y + pointSize / 2) {
+        rectangleAnchorRef.current = RectangleAnchor.RIGHT_TOP;
+    }
+    else if (mouseX >= points[2].x - pointSize / 2 &&
+        mouseX <= points[2].x + pointSize / 2 &&
+        mouseY >= points[2].y - pointSize / 2 &&
+        mouseY <= points[2].y + pointSize / 2) {
+        rectangleAnchorRef.current = RectangleAnchor.LEFT_BOTTOM;
+    }
+    else if (mouseX >= points[3].x - pointSize / 2 &&
+        mouseX <= points[3].x + pointSize / 2 &&
+        mouseY >= points[3].y - pointSize / 2 &&
+        mouseY <= points[3].y + pointSize / 2) {
+        rectangleAnchorRef.current = RectangleAnchor.RIGHT_BOTTOM;
+    }
+    else if (mouseX >= x && mouseX <= x + w && mouseY >= y - pointSize / 2 && mouseY <= y + pointSize / 2) {
+        rectangleAnchorRef.current = RectangleAnchor.TOP;
+    }
+    else if (mouseX >= x && mouseX <= x + w && mouseY >= y + h - pointSize / 2 && mouseY <= y + h + pointSize / 2) {
+        rectangleAnchorRef.current = RectangleAnchor.BOTTOM;
+    }
+    else if (mouseY >= y && mouseY <= y + h && mouseX >= x - pointSize / 2 && mouseX <= x + pointSize / 2) {
+        rectangleAnchorRef.current = RectangleAnchor.LEFT;
+    }
+    else if (mouseY >= y && mouseY <= y + h && mouseX >= x + w - pointSize / 2 && mouseX <= x + w + pointSize / 2) {
+        rectangleAnchorRef.current = RectangleAnchor.RIGHT;
+    }
+    else {
+        rectangleAnchorRef.current = null;
+    }
+};
+export const createCoordinate = (coordinate, setCoordinates, coordinatesRef, historyRef, currentCoordinateRef) => {
+    coordinatesRef.current.push(coordinate);
+    historyRef.current.add(cloneDeep(coordinatesRef.current));
+    setCoordinates(coordinatesRef.current);
+    currentCoordinateRef.current = null;
+};
+export const clampBoundingBoxToImage = (x, y, width, height, dw, dh) => {
+    let correctedX = x;
+    let correctedY = y;
+    let correctedWidth = width;
+    let correctedHeight = height;
+    if (x + width > dw)
+        correctedWidth = dw - x;
+    if (y + height > dh)
+        correctedHeight = dh - y;
+    if (x < 0) {
+        correctedWidth = width + x;
+        correctedX = 0;
+    }
+    if (y < 0) {
+        correctedHeight = height + y;
+        correctedY = 0;
+    }
+    return {
+        x: correctedX,
+        y: correctedY,
+        width: Math.max(0, correctedWidth),
+        height: Math.max(0, correctedHeight),
+        selected: false,
+    };
+};
+export const getCanvasMousePoint = (event, canvas, canvasState) => {
+    const rect = canvas.getBoundingClientRect();
+    const { moveX, moveY, zoomX, zoomY, zoom, dx, dy } = canvasState;
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    return getMousePointTransform({ x: mouseX, y: mouseY, selected: false }, { x: moveX, y: moveY, selected: false }, { x: zoomX, y: zoomY, selected: false }, { x: dx, y: dy, selected: false }, zoom, canvas);
+};
+const moveBBox = ({ coordinatesRef, dw, dh, mousePoint, prevMousePoint, mouseAction, currentCoordinate, rectangleAnchor, }) => {
+    if (mouseAction === MouseAction.LEFT &&
+        currentCoordinate &&
+        rectangleAnchor === null &&
+        mousePoint &&
+        prevMousePoint) {
+        const findIndex = coordinatesRef.current.findIndex((coordinate) => coordinate.selected);
+        const findCoordinate = coordinatesRef.current[findIndex];
+        if (findIndex >= 0 && findCoordinate) {
+            const newX = currentCoordinate.x + mousePoint.x - prevMousePoint.x;
+            const newY = currentCoordinate.y + mousePoint.y - prevMousePoint.y;
+            findCoordinate.x = Math.max(0, Math.min(newX, dw - findCoordinate.width));
+            findCoordinate.y = Math.max(0, Math.min(newY, dh - findCoordinate.height));
+        }
+    }
+};
+const editBBox = ({ dw, dh, mousePoint, prevMousePoint, mouseAction, currentCoordinate, rectangleAnchor, coordinatesRef, }) => {
+    if (rectangleAnchor && mouseAction === MouseAction.LEFT && currentCoordinate && mousePoint && prevMousePoint) {
+        const findIndex = coordinatesRef.current.findIndex((coordinate) => coordinate.selected);
+        const findCoordinate = coordinatesRef.current[findIndex];
+        if (findIndex >= 0 && findCoordinate) {
+            const dx = mousePoint.x - prevMousePoint.x;
+            const dy = mousePoint.y - prevMousePoint.y;
+            switch (rectangleAnchor) {
+                case RectangleAnchor.LEFT_TOP:
+                    findCoordinate.x += dx;
+                    findCoordinate.y += dy;
+                    findCoordinate.width -= dx;
+                    findCoordinate.height -= dy;
+                    break;
+                case RectangleAnchor.RIGHT_TOP:
+                    findCoordinate.y += dy;
+                    findCoordinate.width += dx;
+                    findCoordinate.height -= dy;
+                    break;
+                case RectangleAnchor.LEFT_BOTTOM:
+                    findCoordinate.x += dx;
+                    findCoordinate.width -= dx;
+                    findCoordinate.height += dy;
+                    break;
+                case RectangleAnchor.RIGHT_BOTTOM:
+                    findCoordinate.width += dx;
+                    findCoordinate.height += dy;
+                    break;
+                case RectangleAnchor.TOP:
+                    findCoordinate.y += dy;
+                    findCoordinate.height -= dy;
+                    break;
+                case RectangleAnchor.BOTTOM:
+                    findCoordinate.height += dy;
+                    break;
+                case RectangleAnchor.LEFT:
+                    findCoordinate.x += dx;
+                    findCoordinate.width -= dx;
+                    break;
+                case RectangleAnchor.RIGHT:
+                    findCoordinate.width += dx;
+                    break;
+                default:
+                    break;
+            }
+            findCoordinate.x = Math.max(0, Math.min(findCoordinate.x, dw - findCoordinate.width));
+            findCoordinate.y = Math.max(0, Math.min(findCoordinate.y, dh - findCoordinate.height));
+            findCoordinate.width = Math.max(0, Math.min(findCoordinate.width, dw - findCoordinate.x));
+            findCoordinate.height = Math.max(0, Math.min(findCoordinate.height, dh - findCoordinate.y));
+        }
+    }
+};
+export const handleBBoxOperations = (params) => {
+    moveBBox(params);
+    editBBox(params);
+};
+export const isInsideImage = (point, imageWidth, imageHeight) => {
+    return point.x >= 0 && point.y >= 0 && point.x <= imageWidth && point.y <= imageHeight;
+};

package/dist/components/AnnotationLayer/_hooks/drawEvents/useDrawEvents.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+import { Point, Coordinate, EditableCoordinate, CanvasState, Label } from '../../../../types';
+import { CoordinateHistory } from '../../../AnnotationCanvas/_utils/createHistory';
+import { DrawMode, RectangleAnchor } from '../../../../enum/common';
+import { MouseAction } from '../../../../utils/mouseActions';
+export type DrawEventsParams = {
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+    canvasStateRef: RefObject<CanvasState>;
+    mousePointRef: RefObject<Point>;
+    setMousePoint: (point: Point) => void;
+    mouseActionRef: RefObject<MouseAction | null>;
+    startMousePointRef: RefObject<Point | null>;
+    prevMousePointRef: RefObject<Point | null>;
+    currentCoordinateRef: RefObject<Coordinate | null>;
+    coordinatesRef: RefObject<EditableCoordinate[]>;
+    setCoordinates: (coordinates: EditableCoordinate[]) => void;
+    rectangleAnchorRef: RefObject<RectangleAnchor | null>;
+    historyRef: RefObject<CoordinateHistory>;
+    maskImageRef: RefObject<HTMLImageElement | null>;
+    drawLabel?: Label;
+};
+export declare const useDrawEvents: (params: DrawEventsParams & {
+    selectedDrawMode?: DrawMode;
+    editable: boolean;
+}) => void;

package/dist/components/AnnotationLayer/_hooks/drawEvents/useDrawEvents.js

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import * as Rectangle from './rectangle';
+import { DrawMode } from '../../../../enum/common';
+export const useDrawEvents = (params) => {
+    const { canvasRef, setMousePoint, startMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, maskImageRef, selectedDrawMode, editable, } = params;
+    const initSelector = (coordinates) => {
+        coordinates.map((coordinate) => {
+            coordinate.selected = false;
+            return coordinate;
+        });
+        return coordinates;
+    };
+    useEffect(() => {
+        if (!canvasRef.current || !editable || !selectedDrawMode)
+            return;
+        const handlers = selectedDrawMode === DrawMode.RECTANGLE
+            ? {
+                down: Rectangle.handleMouseDownRectangle(params),
+                move: Rectangle.handleMouseMoveRectangle(params),
+                up: Rectangle.handleMouseUpRectangle(params),
+                leave: Rectangle.handleMouseLeaveRectangle(params),
+            }
+            : null;
+        if (!handlers)
+            return;
+        canvasRef.current.addEventListener('mousedown', handlers.down);
+        canvasRef.current.addEventListener('mousemove', handlers.move);
+        canvasRef.current.addEventListener('mouseup', handlers.up);
+        canvasRef.current.addEventListener('mouseleave', handlers.leave);
+        setMousePoint({ x: 0, y: 0, selected: false });
+        setCoordinates(initSelector(coordinatesRef.current));
+        currentCoordinateRef.current = null;
+        startMousePointRef.current = null;
+        maskImageRef.current = new Image();
+        return () => {
+            canvasRef.current?.removeEventListener('mousedown', handlers.down);
+            canvasRef.current?.removeEventListener('mousemove', handlers.move);
+            canvasRef.current?.removeEventListener('mouseup', handlers.up);
+            canvasRef.current?.removeEventListener('mouseleave', handlers.leave);
+        };
+    }, [canvasRef, selectedDrawMode]);
+};

package/dist/components/AnnotationLayer/_hooks/useCanvasDraw.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { EditableCoordinate, Point } from '../../../types';
+type UseCanvasDrawParams = {
+    drawLineSize: number;
+    drawColor?: string;
+};
+export declare function useCanvasDraw({ drawLineSize, drawColor }: UseCanvasDrawParams): {
+    drawCross: (context: CanvasRenderingContext2D, dw: number, dh: number, zoom: number, point: Point) => void;
+    drawActiveRect: (context: CanvasRenderingContext2D, coordinate: EditableCoordinate, zoom: number) => void;
+    drawRectFromPoints: (context: CanvasRenderingContext2D, startPoint: Point, endPoint: Point, zoom: number, color?: string | undefined) => void;
+    setCursorStyle: (canvas: HTMLCanvasElement, mousePointRef: RefObject<Point>, coordinate: EditableCoordinate, zoom: number) => void;
+};
+export {};

package/dist/components/AnnotationLayer/_hooks/useCanvasDraw.js

@@ -0,0 +1,115 @@
+import { ACTIVE_POINT_SIZE, getRectangleCorners } from './drawEvents/rectangleUtils';
+export function useCanvasDraw({ drawLineSize, drawColor }) {
+    const drawCross = (context, dw, dh, zoom, point) => {
+        if (point.x > 0 && point.y > 0 && point.x < dw && point.y < dh) {
+            if (context)
+                context.lineWidth = (drawLineSize / 2) * (1 / zoom);
+            context?.setLineDash([5]);
+            context?.beginPath();
+            context?.moveTo(point.x, 0);
+            context?.lineTo(point.x, dh);
+            if (context)
+                context.strokeStyle = '#001f3f';
+            context?.stroke();
+            context?.beginPath();
+            context?.moveTo(0, point.y);
+            context?.lineTo(dw, point.y);
+            if (context)
+                context.strokeStyle = '#001f3f';
+            context?.stroke();
+        }
+    };
+    const drawActiveRect = (context, coordinate, zoom) => {
+        const { x, y, width, height, selected } = coordinate;
+        if (!(selected && x && y && width && height))
+            return;
+        context.lineWidth = drawLineSize / zoom;
+        context.fillStyle = '#FFF';
+        const pointSize = ACTIVE_POINT_SIZE / zoom;
+        const points = getRectangleCorners({ x, y, width, height });
+        points.forEach((point) => {
+            context.fillStyle = '#FFF';
+            context.fillRect(point.x - pointSize / 2, point.y - pointSize / 2, pointSize, pointSize);
+            context.strokeStyle = '#000';
+            context.lineWidth = 1 / zoom;
+            context.strokeRect(point.x - pointSize / 2, point.y - pointSize / 2, pointSize, pointSize);
+        });
+    };
+    const drawRectFromPoints = (context, startPoint, endPoint, zoom, color = drawColor) => {
+        if (!color)
+            return;
+        const x = Math.min(endPoint.x, startPoint.x);
+        const y = Math.min(endPoint.y, startPoint.y);
+        const width = Math.abs(endPoint.x - startPoint.x);
+        const height = Math.abs(endPoint.y - startPoint.y);
+        context.beginPath();
+        context.lineWidth = drawLineSize / zoom;
+        context.rect(x, y, width, height);
+        context.strokeStyle = color;
+        context.stroke();
+    };
+    const setCursorStyle = (canvas, mousePointRef, coordinate, zoom) => {
+        if (coordinate.selected) {
+            let cursorStyle = 'default';
+            const pointSize = ACTIVE_POINT_SIZE / zoom;
+            const mouseX = mousePointRef.current.x;
+            const mouseY = mousePointRef.current.y;
+            const { x, y, width: w, height: h } = coordinate;
+            if (x && y && w && h) {
+                const points = getRectangleCorners({ x, y, width: w, height: h });
+                if (mouseX >= points[0].x - pointSize / 2 &&
+                    mouseX <= points[0].x + pointSize / 2 &&
+                    mouseY >= points[0].y - pointSize / 2 &&
+                    mouseY <= points[0].y + pointSize / 2) {
+                    cursorStyle = 'nwse-resize';
+                }
+                else if (mouseX >= points[1].x - pointSize / 2 &&
+                    mouseX <= points[1].x + pointSize / 2 &&
+                    mouseY >= points[1].y - pointSize / 2 &&
+                    mouseY <= points[1].y + pointSize / 2) {
+                    cursorStyle = 'nesw-resize';
+                }
+                else if (mouseX >= points[2].x - pointSize / 2 &&
+                    mouseX <= points[2].x + pointSize / 2 &&
+                    mouseY >= points[2].y - pointSize / 2 &&
+                    mouseY <= points[2].y + pointSize / 2) {
+                    cursorStyle = 'nesw-resize';
+                }
+                else if (mouseX >= points[3].x - pointSize / 2 &&
+                    mouseX <= points[3].x + pointSize / 2 &&
+                    mouseY >= points[3].y - pointSize / 2 &&
+                    mouseY <= points[3].y + pointSize / 2) {
+                    cursorStyle = 'nwse-resize';
+                }
+                else if (mouseX >= x && mouseX <= x + w && mouseY >= y - pointSize / 2 && mouseY <= y + pointSize / 2) {
+                    cursorStyle = 'ns-resize';
+                }
+                else if (mouseX >= x &&
+                    mouseX <= x + w &&
+                    mouseY >= y + h - pointSize / 2 &&
+                    mouseY <= y + h + pointSize / 2) {
+                    cursorStyle = 'ns-resize';
+                }
+                else if (mouseY >= y && mouseY <= y + h && mouseX >= x - pointSize / 2 && mouseX <= x + pointSize / 2) {
+                    cursorStyle = 'ew-resize';
+                }
+                else if (mouseY >= y &&
+                    mouseY <= y + h &&
+                    mouseX >= x + w - pointSize / 2 &&
+                    mouseX <= x + w + pointSize / 2) {
+                    cursorStyle = 'ew-resize';
+                }
+                else {
+                    cursorStyle = 'default';
+                }
+            }
+            canvas.style.cursor = cursorStyle;
+        }
+    };
+    return {
+        drawCross,
+        drawActiveRect,
+        drawRectFromPoints,
+        setCursorStyle,
+    };
+}

package/dist/components/AnnotationLayer/_hooks/useHotkeys.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onDelete: () => void;
+    toggleSelectionOnly: () => void;
+    onUndoRedo: (isRedo: boolean) => void;
+};
+export declare function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo }: Props): void;
+export {};

package/dist/components/AnnotationLayer/_hooks/useHotkeys.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+export function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo }) {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Delete')
+                onDelete();
+            if (event.code === 'KeyX' && !(event.metaKey || event.ctrlKey) && !event.shiftKey)
+                toggleSelectionOnly();
+            if (event.code === 'KeyZ' && (event.metaKey || event.ctrlKey))
+                onUndoRedo(event.shiftKey);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [onDelete, toggleSelectionOnly, onUndoRedo]);
+}

package/dist/components/AnnotationLayer/_hooks/useMouse.d.ts

@@ -0,0 +1,21 @@
+import { MouseEvent, RefObject } from 'react';
+import { EditableCoordinate, Point } from '../../../types';
+import { MouseAction } from '../../../utils/mouseActions';
+import { CoordinateHistory } from '../../AnnotationCanvas/_utils/createHistory';
+import { DrawMode } from '../../../enum/common';
+export declare const INIT_POINT: Point;
+type UseMouseParams = {
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+    mouseActionRef: RefObject<MouseAction | null>;
+    setMousePoint: (point: Point) => void;
+    coordinatesRef?: RefObject<EditableCoordinate[]>;
+    setCoordinates?: (coordinates: EditableCoordinate[]) => void;
+    historyRef: RefObject<CoordinateHistory>;
+    selectedDrawMode?: DrawMode;
+};
+export declare function useMouse({ canvasRef, mouseActionRef, setMousePoint, coordinatesRef, setCoordinates, historyRef, selectedDrawMode, }: UseMouseParams): {
+    handleMouseDown: (event: MouseEvent) => void;
+    handleMouseUp: (event: MouseEvent) => void;
+    handleMouseLeave: (_event: MouseEvent) => void;
+};
+export {};

package/dist/components/AnnotationLayer/_hooks/useMouse.js

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { isMouseClickAction, mapButtonToMouseAction, MouseAction } from '../../../utils/mouseActions';
+import { DrawMode } from '../../../enum/common';
+export const INIT_POINT = { x: 0, y: 0, selected: false };
+export function useMouse({ canvasRef, mouseActionRef, setMousePoint, coordinatesRef, setCoordinates, historyRef, selectedDrawMode, }) {
+    const handleMouseDown = useCallback((event) => {
+        if (!canvasRef.current || !selectedDrawMode)
+            return;
+        const action = mapButtonToMouseAction(event.button);
+        if (action)
+            mouseActionRef.current = action;
+    }, [canvasRef, mouseActionRef]);
+    const handleMouseUp = useCallback((event) => {
+        if (canvasRef.current && isMouseClickAction(event.button, MouseAction.LEFT) && selectedDrawMode) {
+            if (selectedDrawMode === DrawMode.RECTANGLE && coordinatesRef?.current && setCoordinates) {
+                setCoordinates(coordinatesRef.current);
+                historyRef.current.add(JSON.parse(JSON.stringify(coordinatesRef.current)));
+            }
+        }
+        mouseActionRef.current = null;
+        event.preventDefault();
+    }, [canvasRef, coordinatesRef, setCoordinates, historyRef, selectedDrawMode, mouseActionRef]);
+    const handleMouseLeave = useCallback((_event) => {
+        if (!canvasRef.current || !selectedDrawMode)
+            return;
+        mouseActionRef.current = null;
+        setMousePoint(INIT_POINT);
+    }, [canvasRef, setMousePoint, mouseActionRef]);
+    return {
+        handleMouseDown,
+        handleMouseUp,
+        handleMouseLeave,
+    };
+}

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

@@ -1,16 +1,13 @@
-import { Coordinate } from '../../types/coordinate';
+import { Dispatch, RefObject, SetStateAction } from 'react';
+import { CanvasState, EditableCoordinate, AnnotationCanvasDrawing } from '../../types';
+import { CoordinateHistory } from '../AnnotationCanvas/_utils/createHistory';
 type Props = {
-    moveX: number;
-    moveY: number;
-    zoomX: number;
-    zoomY: number;
-    zoom: number;
-    dx: number;
-    dy: number;
-    dw: number;
-    dh: number;
-    coordinates?: Coordinate[];
-    editable?: boolean;
+    canvasState: CanvasState;
+    coordinates: EditableCoordinate[] | undefined;
+    setCoordinates: Dispatch<SetStateAction<EditableCoordinate[] | undefined>>;
+    historyRef: RefObject<CoordinateHistory>;
+    drawing: AnnotationCanvasDrawing;
+    editable: boolean;
 };
-declare const AnnotationLayer: ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const AnnotationLayer: ({ canvasState, coordinates, setCoordinates: propSetCoordinates, historyRef, drawing, editable, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default AnnotationLayer;