@deepnoid/canvas 0.1.58 → 0.1.59

package/dist/engine/public/annotationEngine.js

@@ -0,0 +1,257 @@
+import { createHistory } from '../history';
+import { PanZoomController } from '../pan-zoom/panZoomController';
+import { cloneDeep } from '../utils/cloneDeep';
+import { InteractionController } from '../interaction/interactionController';
+import { panZoomInteraction } from '../interaction/panZoomInteraction';
+import { rectangleRenderer } from '../annotation/rectangle/rectangleRenderer';
+import { PointerInteraction } from '../interaction/pointerInteraction';
+import { drawModeRouter } from '../interaction/drawModeRouter';
+export class AnnotationEngine {
+    constructor(params) {
+        this.history = null;
+        this.editable = true;
+        this.renderers = {
+            RECTANGLE: rectangleRenderer,
+            // POLYGON: polygonRenderer,
+        };
+        this.imageCanvas = params.imageCanvas;
+        this.image = params.image;
+        this.imageCanvasState = params.imageCanvasState;
+        this.annotationsCanvas = params.annotationsCanvas;
+        this.annotations = params.annotations;
+        this.setAnnotationsCallback = params.setAnnotations;
+        this.drawing = params.drawing;
+        this.enableHotkeys = params.enableHotkeys;
+        this.editable = params.editable ?? true;
+        this.onChange = params.onChange;
+        this.showSelectedOnly = false;
+        this.initHistory(this.annotations);
+        this.panZoom = new PanZoomController(this.imageCanvas, this.image, () => this.imageCanvasState, (next) => {
+            this.imageCanvasState = next;
+            this.onChange?.();
+        }, {
+            enabled: params.panZoomEnabled ?? true,
+            zoom: params.zoom,
+            editable: this.editable,
+        });
+        this.interactionController = new InteractionController([
+            new PointerInteraction(this),
+            panZoomInteraction(this.panZoom),
+            drawModeRouter(this),
+        ]);
+    }
+    // ----------------- State -----------------
+    getImageCanvas() {
+        return this.imageCanvas;
+    }
+    getImageCanvasState() {
+        return this.imageCanvasState;
+    }
+    getAnnotationsCanvas() {
+        return this.annotationsCanvas;
+    }
+    getDrawing() {
+        return this.drawing;
+    }
+    setDrawing(drawing) {
+        this.drawing = drawing;
+    }
+    isEditable() {
+        return this.editable;
+    }
+    setEditable(editable) {
+        this.editable = editable;
+        this.panZoom.setEditable(editable);
+    }
+    setPanZoomEnabled(enabled) {
+        this.panZoom.setEnabled(enabled);
+    }
+    getEnableHotkeys() {
+        return this.enableHotkeys;
+    }
+    getShowSelectedOnly() {
+        return this.showSelectedOnly;
+    }
+    destroy() {
+        this.annotations = [];
+        this.history = null;
+        this.panZoom.destroy();
+    }
+    // ----------------- Image Canvas Pan Zoom -----------------
+    getZoomRatioLabel() {
+        return `${Math.round((this.imageCanvasState.zoom / this.imageCanvasState.initZoom) * 100)}%`;
+    }
+    initImageCanvas(resetZoom) {
+        this.setupCanvasResolution(this.imageCanvas);
+        this.setupCanvasResolution(this.annotationsCanvas);
+        if (resetZoom) {
+            this.panZoom.resetZoomAndPosition();
+        }
+        else {
+            this.panZoom.preserveZoomAndPosition();
+        }
+        this.drawCanvasAll();
+    }
+    setupCanvasResolution(canvas) {
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        const boundingRect = canvas.getBoundingClientRect();
+        canvas.width = boundingRect.width * devicePixelRatio;
+        canvas.height = boundingRect.height * devicePixelRatio;
+        const context = canvas.getContext('2d');
+        if (!context)
+            return;
+        context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+    }
+    // ----------------- draw Canvas -----------------
+    drawCanvasAll() {
+        this.drawImageCanvas();
+        this.drawAnnotationsCanvas();
+    }
+    drawImageCanvas() {
+        this.drawCanvas(this.imageCanvas, this.image);
+    }
+    drawAnnotationsCanvas() {
+        this.drawCanvas(this.annotationsCanvas, undefined);
+    }
+    drawCanvas(canvas, image) {
+        const { moveX, moveY, zoomX, zoomY, dx, dy, zoom } = this.getImageCanvasState();
+        const context = canvas.getContext('2d');
+        if (!context)
+            return;
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.save();
+        context.translate(dx, dy);
+        context.translate(moveX, moveY);
+        context.translate(zoomX, zoomY);
+        context.scale(zoom, zoom);
+        context.translate(-zoomX, -zoomY);
+        if (image) {
+            context.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
+        }
+        else {
+            this.drawAnnotations(context);
+        }
+        context.restore();
+    }
+    clearCanvasAll() {
+        this.clearCanvas(this.imageCanvas);
+        this.clearCanvas(this.annotationsCanvas);
+    }
+    clearCanvas(canvas) {
+        const context = canvas.getContext('2d');
+        if (!context)
+            return;
+        context.clearRect(0, 0, canvas.width, canvas.height);
+    }
+    resetCanvas() {
+        this.clearCanvasAll();
+        this.setAnnotations([]);
+    }
+    // ----------------- Annotations -----------------
+    getAnnotations() {
+        return this.annotations;
+    }
+    setAnnotations(annotation) {
+        this.annotations = cloneDeep(annotation);
+        this.syncAnnotations();
+    }
+    appendAnnotation(annotation) {
+        this.annotations.push(annotation);
+        this.syncAnnotations();
+    }
+    syncAnnotations() {
+        this.setAnnotationsCallback(this.annotations);
+        this.drawAnnotationsCanvas();
+    }
+    drawAnnotations(context) {
+        const mode = this.getDrawing().mode;
+        if (!mode)
+            return;
+        const renderer = this.renderers[mode];
+        if (!renderer)
+            return;
+        renderer.draw(context, this);
+    }
+    getSelectedAnnotation() {
+        return this.annotations.find((a) => a.selected) ?? null;
+    }
+    setSelectedAnnotation(target) {
+        let changed = false;
+        for (const annotation of this.annotations) {
+            const nextSelected = target !== null && annotation === target;
+            if (annotation.selected !== nextSelected) {
+                annotation.selected = nextSelected;
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.drawAnnotationsCanvas();
+        }
+    }
+    // ----------------- Interaction -----------------
+    getPointerRenderState() {
+        return (this.interactionController
+            .getInteractions()
+            .find((i) => i instanceof PointerInteraction)
+            ?.getRenderState() ?? null);
+    }
+    getDrawRenderState() {
+        const mode = this.drawing.mode;
+        if (!mode)
+            return null;
+        return this.interactionController.getRenderState(mode);
+    }
+    onMouseDown(e) {
+        this.interactionController.handleMouseDown(e);
+    }
+    onMouseMove(e) {
+        const layers = this.interactionController.handleMouseMove(e);
+        if (layers.imageCanvas) {
+            this.drawImageCanvas();
+        }
+        if (layers.annotationsCanvas) {
+            this.drawAnnotationsCanvas();
+        }
+    }
+    onMouseUp(e) {
+        this.interactionController.handleMouseUp(e);
+    }
+    onMouseLeave(e) {
+        this.interactionController.handleMouseLeave(e);
+    }
+    onWheel(e) {
+        this.interactionController.handleWheel(e);
+        this.drawCanvasAll();
+    }
+    // ----------------- History -----------------
+    initHistory(annotations) {
+        this.history = createHistory();
+        if (annotations.length > 0) {
+            this.history.init(cloneDeep(annotations));
+        }
+    }
+    commitHistory(checkInit = false) {
+        if (!this.history)
+            return;
+        if (checkInit && this.history.getHistoryIndex() === -1) {
+            this.history.addInit();
+        }
+        this.history.add(cloneDeep(this.annotations));
+    }
+    deleteSelected() {
+        const next = this.annotations.filter((c) => !c.selected);
+        if (next.length === this.annotations.length)
+            return;
+        this.setAnnotations(next);
+        this.commitHistory();
+    }
+    toggleShowSelectedOnly() {
+        this.showSelectedOnly = !this.showSelectedOnly;
+        this.drawAnnotationsCanvas();
+    }
+    undoRedo(isRedo) {
+        const result = isRedo ? this.history?.redo() : this.history?.undo();
+        if (result)
+            this.setAnnotations(result);
+    }
+}

package/dist/engine/renderer/drawCross.d.ts

@@ -0,0 +1,2 @@
+import { Point } from '../types';
+export declare function drawCross(context: CanvasRenderingContext2D, mousePoint: Point, dw: number, dh: number, zoom: number, drawLineSize: number): void;

package/dist/engine/renderer/drawCross.js

@@ -0,0 +1,19 @@
+export function drawCross(context, mousePoint, dw, dh, zoom, drawLineSize) {
+    if (mousePoint.x > 0 && mousePoint.y > 0 && mousePoint.x < dw && mousePoint.y < dh) {
+        if (context)
+            context.lineWidth = (drawLineSize / 2) * (1 / zoom);
+        context?.setLineDash([5]);
+        context?.beginPath();
+        context?.moveTo(mousePoint.x, 0);
+        context?.lineTo(mousePoint.x, dh);
+        if (context)
+            context.strokeStyle = '#001f3f';
+        context?.stroke();
+        context?.beginPath();
+        context?.moveTo(0, mousePoint.y);
+        context?.lineTo(dw, mousePoint.y);
+        if (context)
+            context.strokeStyle = '#001f3f';
+        context?.stroke();
+    }
+}

package/dist/engine/renderer/interface.d.ts

@@ -0,0 +1,4 @@
+import { AnnotationEngine } from '../public/annotationEngine';
+export interface AnnotationsRenderer {
+    draw(ctx: CanvasRenderingContext2D, engine: AnnotationEngine): void;
+}

package/dist/engine/renderer/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/{types/index.d.ts → engine/types.d.ts}

@@ -1,6 +1,6 @@
-import { DrawMode } from '../enum/common';
-import { MouseAction } from '../utils/mouseActions';
-export type CanvasState = {
+import { Annotation, DrawMode } from './annotation/annotationTypes';
+import { MouseAction } from './utils/mouseActions';
+export type ImageCanvasState = {
     moveX: number;
     moveY: number;
     zoomX: number;
@@ -10,44 +10,30 @@ export type CanvasState = {
     dy: number;
     dw: number;
     dh: number;
+    initZoom: number;
 };
 export type Point = {
     x: number;
     y: number;
+};
+export type PointState = Point & {
     selected?: boolean;
     mouseAction?: MouseAction;
 };
-export type Rectangle = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
 export type Label = {
     id: number;
     name: string;
     type: string;
 };
-export type Coordinate = {
-    label?: Label;
-    type?: DrawMode;
-    color?: 'success' | 'warning' | 'danger';
-    selected?: boolean;
-} & Rectangle;
 export type ApplyAnnotationStyleVariant = 'drawRect' | 'drawText';
 export type ApplyAnnotationStyleParams = {
     variant: ApplyAnnotationStyleVariant;
     context: CanvasRenderingContext2D;
-    coordinate: Coordinate;
+    annotation: Annotation;
     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;
@@ -55,3 +41,8 @@ export type AnnotationCanvasDrawing = {
     mode?: DrawMode;
     color?: string;
 };
+export type AnnotationCanvasOptionsZoom = {
+    step?: number;
+    max?: number;
+    min?: number;
+};

package/dist/engine/types.js

@@ -0,0 +1 @@
+export {};

package/dist/engine/utils/mousePoint.d.ts

@@ -0,0 +1,3 @@
+import { ImageCanvasState, Point, PointState } from '../types';
+export declare function getCanvasMousePoint(event: MouseEvent, canvas: HTMLCanvasElement, canvasState: ImageCanvasState): Point;
+export declare function getMousePointTransform(mousePoint: PointState, movePoint: PointState, zoomPoint: PointState, originPoint: PointState, zoom: number, canvas: HTMLCanvasElement, rotate?: number): Point;

package/dist/engine/utils/mousePoint.js

@@ -0,0 +1,52 @@
+export function 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);
+}
+export function getMousePointTransform(mousePoint, movePoint, zoomPoint, originPoint, zoom, canvas, rotate = 0) {
+    let mouse = mousePoint;
+    mouse = applyRotate(mouse, rotate, {
+        x: canvas.clientWidth / 2,
+        y: canvas.clientHeight / 2,
+    });
+    mouse = applyOrigin(mouse, originPoint);
+    mouse = applyMove(mouse, movePoint);
+    mouse = applyZoom(mouse, zoomPoint, zoom);
+    return mouse;
+}
+function applyOrigin(mouse, origin) {
+    return {
+        x: mouse.x - origin.x,
+        y: mouse.y - origin.y,
+    };
+}
+function applyMove(mouse, move) {
+    return {
+        x: mouse.x - move.x,
+        y: mouse.y - move.y,
+    };
+}
+function applyZoom(mouse, zoomPoint, zoom) {
+    // 1. 줌 기준점을 원점으로 이동
+    let x = mouse.x - zoomPoint.x;
+    let y = mouse.y - zoomPoint.y;
+    // 2. 줌 역변환 (화면 좌표 → 이미지 좌표)
+    x = x / zoom;
+    y = y / zoom;
+    // 3. 줌 기준점만큼 다시 이동
+    x = x + zoomPoint.x;
+    y = y + zoomPoint.y;
+    return { x, y };
+}
+function applyRotate(mouse, rotate, center) {
+    if (rotate === 0)
+        return mouse;
+    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 };
+}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-export { AnnotationViewer, AnnotationEditor } from './components';
-export type { AnnotationViewerProps, AnnotationEditorProps } from './components';
-export type { ZoomButtonType } from './components/AnnotationCanvas';
-export type { Rectangle, Coordinate, Label, ApplyAnnotationStyle } from './types';
-export { DrawMode } from './enum/common';
+export { AnnotationViewer, AnnotationEditor } from './react';
+export type { Label, ApplyAnnotationStyle } from './engine/types';
+export type { Rectangle, Annotation } from './engine/annotation/annotationTypes';
+export { DrawMode } from './engine/annotation/annotationTypes';

package/dist/index.js

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

package/dist/{components/AnnotationCanvas/index.d.ts → react/AnnotationCanvas.d.ts}

@@ -1,14 +1,15 @@
 import { ComponentType, Dispatch, ReactNode, SetStateAction } from 'react';
-import { AnnotationCanvasDrawing, AnnotationCanvasOptionsZoom, Coordinate } from '../../types';
-export type ZoomButtonType = {
+import { AnnotationCanvasDrawing, AnnotationCanvasOptionsZoom } from '../engine/types';
+import { Annotation } from '../engine/annotation/annotationTypes';
+type ZoomButtonType = {
     onClick: () => void;
     children: ReactNode;
 };
 export type AnnotationCanvasProps = {
     image: string;
-    coordinates?: Coordinate[];
-    setCoordinates?: Dispatch<SetStateAction<Coordinate[] | undefined>>;
-    options: {
+    annotations?: Annotation[];
+    setAnnotations?: Dispatch<SetStateAction<Annotation[] | undefined>>;
+    options?: {
         panZoomEnabled?: boolean;
         zoom?: AnnotationCanvasOptionsZoom;
         ZoomButton?: ComponentType<ZoomButtonType>;
@@ -23,5 +24,5 @@ export type AnnotationCanvasProps = {
     enableHotkeys?: boolean;
     editable?: boolean;
 };
-declare const AnnotationCanvas: ({ image, coordinates, setCoordinates, options, drawing, events, enableHotkeys, editable, }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;
+declare const AnnotationCanvas: ({ image, annotations, setAnnotations, options, drawing, events, enableHotkeys, editable, }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;
 export default AnnotationCanvas;

package/dist/react/AnnotationCanvas.js

@@ -0,0 +1,110 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { AnnotationEngine } from '../engine/public/annotationEngine';
+import useResizeObserver from './hooks/useResizeObserver';
+import { useDebounce } from './hooks/useDebounce';
+import { useHotkeys } from './hooks/useHotkeys';
+const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, drawing, events, enableHotkeys = true, editable = true, }) => {
+    const { panZoomEnabled, zoom, ZoomButton, resetOnImageChange = false } = options || {};
+    const { onImageLoadSuccess, onImageLoadError } = events || {};
+    const imageCanvasRef = useRef(null);
+    const imageRef = useRef(new Image());
+    const engineRef = useRef(null);
+    const annotationsCanvasRef = useRef(null);
+    const [_, forceRender] = useState(0);
+    useResizeObserver({
+        ref: imageCanvasRef,
+        onResize: useDebounce((size) => {
+            const engine = engineRef.current;
+            const imageCanvas = engine?.getImageCanvas();
+            if (!engine || !imageCanvas || !imageRef.current.src)
+                return;
+            const needsResize = size.width !== imageCanvas.width || size.height !== imageCanvas.height;
+            if (needsResize)
+                engine.initImageCanvas(true);
+        }, 150),
+    });
+    useHotkeys({
+        onDelete: () => engineRef.current?.deleteSelected(),
+        toggleSelectionOnly: () => engineRef.current?.toggleShowSelectedOnly(),
+        onUndoRedo: (isRedo) => engineRef.current?.undoRedo(isRedo),
+        enabled: enableHotkeys,
+    });
+    const createEmptyImage = () => {
+        const img = new Image();
+        img.width = img.height = 0;
+        return img;
+    };
+    const resetCanvas = (errorMsg) => {
+        engineRef.current?.resetCanvas();
+        imageRef.current = createEmptyImage();
+        if (errorMsg)
+            onImageLoadError?.(new Error(errorMsg));
+    };
+    useEffect(() => {
+        if (!image?.trim())
+            return void resetCanvas();
+        let cancelled = false;
+        const img = new Image();
+        img.onload = () => {
+            if (cancelled || !imageCanvasRef.current || !annotationsCanvasRef.current)
+                return;
+            const imageCanvasState = engineRef.current
+                ? engineRef.current.getImageCanvasState()
+                : { moveX: 0, moveY: 0, zoomX: 0, zoomY: 0, zoom: 1, dx: 0, dy: 0, dw: img.width, dh: img.height, initZoom: 1 };
+            engineRef.current?.destroy?.();
+            engineRef.current = new AnnotationEngine({
+                imageCanvas: imageCanvasRef.current,
+                image: img,
+                imageCanvasState,
+                annotationsCanvas: annotationsCanvasRef.current,
+                annotations,
+                setAnnotations: (annotations) => setAnnotations?.(annotations),
+                drawing,
+                editable,
+                panZoomEnabled,
+                zoom,
+                enableHotkeys,
+                onChange: () => forceRender((v) => v + 1),
+            });
+            engineRef.current.initImageCanvas(resetOnImageChange);
+        };
+        img.onerror = () => !cancelled && resetCanvas(`Failed to load image: ${image}`);
+        img.src = image;
+        imageRef.current = img;
+        onImageLoadSuccess?.();
+        return () => {
+            cancelled = true;
+            img.onload = null;
+            img.onerror = null;
+            engineRef.current?.destroy();
+        };
+    }, [image]);
+    useEffect(() => {
+        if (!engineRef.current)
+            return;
+        engineRef.current.setPanZoomEnabled(!!panZoomEnabled);
+    }, [panZoomEnabled]);
+    useEffect(() => {
+        if (!engineRef.current)
+            return;
+        engineRef.current.setEditable(editable);
+    }, [editable]);
+    useEffect(() => {
+        if (!engineRef.current)
+            return;
+        const before = engineRef.current.getAnnotations();
+        if (JSON.stringify(before) !== JSON.stringify(annotations)) {
+            engineRef.current.setAnnotations(annotations);
+            engineRef.current.commitHistory();
+        }
+    }, [engineRef.current, annotations]);
+    useEffect(() => {
+        if (!engineRef.current)
+            return;
+        engineRef.current.setDrawing(drawing);
+    }, [engineRef.current, drawing]);
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { onWheel: (e) => engineRef.current?.onWheel?.(e.nativeEvent), onMouseDown: (e) => engineRef.current?.onMouseDown?.(e.nativeEvent), onMouseMove: (e) => engineRef.current?.onMouseMove?.(e.nativeEvent), onMouseUp: (e) => engineRef.current?.onMouseUp?.(e.nativeEvent), onMouseLeave: (e) => engineRef.current?.onMouseLeave?.(e.nativeEvent), onContextMenu: (e) => e.preventDefault(), style: { flex: 1, position: 'relative', cursor: !panZoomEnabled || editable ? 'default' : 'grab' }, children: [_jsx("canvas", { ref: imageCanvasRef, style: { position: 'absolute', width: '100%', height: '100%' } }), _jsx("canvas", { ref: annotationsCanvasRef, style: { position: 'absolute', width: '100%', height: '100%' } }), ZoomButton && (_jsx(ZoomButton, { onClick: () => engineRef.current?.initImageCanvas(true), children: engineRef.current?.getZoomRatioLabel() }))] }) }));
+};
+export default AnnotationCanvas;

package/dist/{components → react}/index.d.ts

@@ -1,4 +1,4 @@
-import { AnnotationCanvasProps } from './AnnotationCanvas/index';
+import { AnnotationCanvasProps } from './AnnotationCanvas';
 export type AnnotationViewerProps = Omit<AnnotationCanvasProps, 'editable' | 'drawing' | 'events'> & {
     drawing: Pick<AnnotationCanvasProps['drawing'], 'lineSize' | 'applyStyle'>;
     events: Pick<AnnotationCanvasProps['events'], 'onImageLoadSuccess' | 'onImageLoadError'>;

package/dist/{components → react}/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/canvas",
-  "version": "0.1.58",
+  "version": "0.1.59",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",

package/dist/components/AnnotationCanvas/_hooks/useImagePanZoom.d.ts

@@ -1,24 +0,0 @@
-import { RefObject, WheelEvent, MouseEvent } from 'react';
-import { AnnotationCanvasOptionsZoom, CanvasState } from '../../../types';
-type ImageCanvasState = CanvasState & {
-    initZoom: number;
-};
-type Props = {
-    canvasRef: RefObject<HTMLCanvasElement | null>;
-    imageRef: RefObject<HTMLImageElement>;
-    panZoomEnabled?: boolean;
-    zoom?: AnnotationCanvasOptionsZoom;
-    editable?: boolean;
-};
-export declare function useImagePanZoom({ canvasRef, imageRef, panZoomEnabled, zoom, editable }: Props): {
-    canvasState: ImageCanvasState;
-    initZoomAndPosition: (canvas: HTMLCanvasElement, image: HTMLImageElement) => void;
-    preserveZoomAndPosition: (canvas: HTMLCanvasElement, image: HTMLImageElement, zoomRatio: number) => void;
-    initCanvas: () => void;
-    handleWheel: (event: WheelEvent) => void;
-    handleMouseDown: (event: MouseEvent) => void;
-    handleMouseMove: (event: MouseEvent) => void;
-    handleMouseUp: (event: MouseEvent) => void;
-    handleMouseLeave: (event: MouseEvent) => void;
-};
-export {};