@deepnoid/canvas 0.1.58 → 0.1.60

package/dist/engine/annotation/rectangle/rectangleTransform.d.ts

@@ -0,0 +1,14 @@
+import { Point } from '../../types';
+import { Annotation } from '../annotationTypes';
+import { RectangleAnchor } from './rectangleTypes';
+type RectangleParams = {
+    annotations: Annotation[];
+    dw: number;
+    dh: number;
+    mousePoint: Point;
+    prevMousePoint: Point;
+    rectangleAnchor: RectangleAnchor | null;
+};
+export declare function applyRectangleMove({ annotations, dw, dh, mousePoint, prevMousePoint }: RectangleParams): void;
+export declare function applyRectangleResize({ annotations, dw, dh, mousePoint, prevMousePoint, rectangleAnchor, }: RectangleParams): void;
+export {};

package/dist/engine/annotation/rectangle/rectangleTransform.js

@@ -0,0 +1,65 @@
+import { RectangleAnchor } from './rectangleTypes';
+export function applyRectangleMove({ annotations, dw, dh, mousePoint, prevMousePoint }) {
+    if (!mousePoint || !prevMousePoint)
+        return;
+    const findIndex = annotations.findIndex((annotation) => annotation.selected);
+    const findAnnotation = annotations[findIndex];
+    if (findIndex < 0 || !findAnnotation)
+        return;
+    const dx = mousePoint.x - prevMousePoint.x;
+    const dy = mousePoint.y - prevMousePoint.y;
+    const newX = findAnnotation.x + dx;
+    const newY = findAnnotation.y + dy;
+    findAnnotation.x = Math.max(0, Math.min(newX, dw - findAnnotation.width));
+    findAnnotation.y = Math.max(0, Math.min(newY, dh - findAnnotation.height));
+}
+export function applyRectangleResize({ annotations, dw, dh, mousePoint, prevMousePoint, rectangleAnchor, }) {
+    const findIndex = annotations.findIndex((annotation) => annotation.selected);
+    const findAnnotation = annotations[findIndex];
+    if (findIndex >= 0 && findAnnotation) {
+        const dx = mousePoint.x - prevMousePoint.x;
+        const dy = mousePoint.y - prevMousePoint.y;
+        switch (rectangleAnchor) {
+            case RectangleAnchor.LEFT_TOP:
+                findAnnotation.x += dx;
+                findAnnotation.y += dy;
+                findAnnotation.width -= dx;
+                findAnnotation.height -= dy;
+                break;
+            case RectangleAnchor.RIGHT_TOP:
+                findAnnotation.y += dy;
+                findAnnotation.width += dx;
+                findAnnotation.height -= dy;
+                break;
+            case RectangleAnchor.LEFT_BOTTOM:
+                findAnnotation.x += dx;
+                findAnnotation.width -= dx;
+                findAnnotation.height += dy;
+                break;
+            case RectangleAnchor.RIGHT_BOTTOM:
+                findAnnotation.width += dx;
+                findAnnotation.height += dy;
+                break;
+            case RectangleAnchor.TOP:
+                findAnnotation.y += dy;
+                findAnnotation.height -= dy;
+                break;
+            case RectangleAnchor.BOTTOM:
+                findAnnotation.height += dy;
+                break;
+            case RectangleAnchor.LEFT:
+                findAnnotation.x += dx;
+                findAnnotation.width -= dx;
+                break;
+            case RectangleAnchor.RIGHT:
+                findAnnotation.width += dx;
+                break;
+            default:
+                break;
+        }
+        findAnnotation.x = Math.max(0, Math.min(findAnnotation.x, dw - findAnnotation.width));
+        findAnnotation.y = Math.max(0, Math.min(findAnnotation.y, dh - findAnnotation.height));
+        findAnnotation.width = Math.max(0, Math.min(findAnnotation.width, dw - findAnnotation.x));
+        findAnnotation.height = Math.max(0, Math.min(findAnnotation.height, dh - findAnnotation.y));
+    }
+}

package/dist/{enum/common.d.ts → engine/annotation/rectangle/rectangleTypes.d.ts}

@@ -1,6 +1,3 @@
-export declare enum DrawMode {
-    RECTANGLE = "RECTANGLE"
-}
 export declare enum RectangleAnchor {
     LEFT_TOP = "LEFT_TOP",
     RIGHT_TOP = "RIGHT_TOP",

package/dist/{enum/common.js → engine/annotation/rectangle/rectangleTypes.js}

@@ -1,7 +1,3 @@
-export var DrawMode;
-(function (DrawMode) {
-    DrawMode["RECTANGLE"] = "RECTANGLE";
-})(DrawMode || (DrawMode = {}));
 export var RectangleAnchor;
 (function (RectangleAnchor) {
     RectangleAnchor["LEFT_TOP"] = "LEFT_TOP";

package/dist/engine/history.d.ts

@@ -0,0 +1,11 @@
+import { Annotation } from './annotation/annotationTypes';
+export type History = {
+    getHistory: () => Annotation[][];
+    init: (annotations?: Annotation[]) => void;
+    getHistoryIndex: () => number;
+    addInit: () => void;
+    add: (annotations: Annotation[]) => void;
+    undo: () => Annotation[] | undefined;
+    redo: () => Annotation[] | undefined;
+};
+export declare const createHistory: () => History;

package/dist/{components/AnnotationCanvas/_utils/createHistory.js → engine/history.js}

@@ -4,17 +4,17 @@ export const createHistory = () => {
     return {
         getHistory: () => history,
         getHistoryIndex: () => historyIndex,
-        init: (coordinates = []) => {
-            history = [coordinates];
+        init: (annotations = []) => {
+            history = [annotations];
             historyIndex = 0;
         },
         addInit: () => {
             history.push([]);
             historyIndex++;
         },
-        add: (coordinates) => {
+        add: (annotations) => {
             history.splice(historyIndex + 1);
-            history.push(coordinates);
+            history.push(annotations);
             historyIndex++;
         },
         undo: () => {

package/dist/engine/interaction/drawModeRouter.d.ts

@@ -0,0 +1,3 @@
+import { AnnotationEngine } from '../public/annotationEngine';
+import { Interaction } from './interface';
+export declare function drawModeRouter(engine: AnnotationEngine): Interaction;

package/dist/engine/interaction/drawModeRouter.js

@@ -0,0 +1,56 @@
+import { RectangleController } from '../annotation/rectangle/rectangleController';
+import { RectangleInteraction } from '../annotation/rectangle/rectangleInteraction';
+import { DrawMode } from '../annotation/annotationTypes';
+export function drawModeRouter(engine) {
+    const rectangle = new RectangleInteraction(new RectangleController(engine));
+    return {
+        getType() {
+            const drawMode = engine.getDrawing().mode;
+            if (drawMode)
+                return drawMode;
+            return false;
+        },
+        getRenderState() {
+            const drawMode = engine.getDrawing().mode;
+            if (drawMode === DrawMode.RECTANGLE) {
+                return rectangle.getRenderState();
+            }
+            return null;
+        },
+        getRedrawLayers() {
+            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
+                return rectangle.getRedrawLayers();
+            }
+            return {
+                imageCanvas: false,
+                annotationsCanvas: false,
+            };
+        },
+        handleMouseDown(e) {
+            if (!engine.isEditable())
+                return false;
+            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
+                return rectangle.handleMouseDown(e);
+            }
+            return false;
+        },
+        handleMouseMove(e) {
+            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
+                return rectangle.handleMouseMove(e);
+            }
+            return false;
+        },
+        handleMouseUp(e) {
+            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
+                return rectangle.handleMouseUp(e);
+            }
+            return false;
+        },
+        handleMouseLeave(e) {
+            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
+                return rectangle.handleMouseLeave(e);
+            }
+            return false;
+        },
+    };
+}

package/dist/engine/interaction/interactionController.d.ts

@@ -0,0 +1,13 @@
+import { DrawMode } from '../annotation/annotationTypes';
+import { Interaction, RedrawLayers } from '../interaction/interface';
+export declare class InteractionController {
+    private interactions;
+    constructor(interactions: Interaction[]);
+    getInteractions(): Interaction[];
+    getRenderState(type: DrawMode): unknown | null;
+    handleMouseDown: (e: MouseEvent) => void;
+    handleMouseMove: (e: MouseEvent) => RedrawLayers;
+    handleMouseUp: (e: MouseEvent) => void;
+    handleMouseLeave: (e: MouseEvent) => void;
+    handleWheel: (e: WheelEvent) => void;
+}

package/dist/engine/interaction/interactionController.js

@@ -0,0 +1,53 @@
+export class InteractionController {
+    constructor(interactions) {
+        this.interactions = interactions;
+        this.handleMouseDown = (e) => {
+            for (const interaction of this.interactions) {
+                if (interaction.handleMouseDown?.(e))
+                    break;
+            }
+        };
+        this.handleMouseMove = (e) => {
+            const layers = {
+                imageCanvas: false,
+                annotationsCanvas: false,
+            };
+            for (const interaction of this.interactions) {
+                const handled = interaction.handleMouseMove?.(e);
+                const interactionLayers = interaction.getRedrawLayers?.();
+                if (interactionLayers) {
+                    layers.imageCanvas = layers.imageCanvas || interactionLayers.imageCanvas;
+                    layers.annotationsCanvas = layers.annotationsCanvas || interactionLayers.annotationsCanvas;
+                }
+                if (handled)
+                    break;
+            }
+            return layers;
+        };
+        this.handleMouseUp = (e) => {
+            for (const interaction of this.interactions) {
+                if (interaction.handleMouseUp?.(e))
+                    break;
+            }
+        };
+        this.handleMouseLeave = (e) => {
+            for (const interaction of this.interactions) {
+                if (interaction.handleMouseLeave?.(e))
+                    break;
+            }
+        };
+        this.handleWheel = (e) => {
+            for (const interaction of this.interactions) {
+                if (interaction.handleWheel?.(e))
+                    break;
+            }
+        };
+    }
+    getInteractions() {
+        return this.interactions;
+    }
+    getRenderState(type) {
+        const interaction = this.interactions.find((i) => i.getType?.() === type);
+        return interaction?.getRenderState?.() ?? null;
+    }
+}

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

@@ -0,0 +1,15 @@
+import { DrawMode } from '../annotation/annotationTypes';
+export type RedrawLayers = {
+    imageCanvas: boolean;
+    annotationsCanvas: boolean;
+};
+export interface Interaction {
+    getType?(): boolean | DrawMode;
+    getRenderState?(): unknown;
+    getRedrawLayers?: () => RedrawLayers;
+    handleMouseDown?(e: MouseEvent): boolean | void;
+    handleMouseMove?(e: MouseEvent): boolean | void;
+    handleMouseUp?(e: MouseEvent): boolean | void;
+    handleMouseLeave?(e: MouseEvent): boolean | void;
+    handleWheel?(e: WheelEvent): boolean | void;
+}

package/dist/engine/interaction/panZoomInteraction.d.ts

@@ -0,0 +1,3 @@
+import { PanZoomController } from '../pan-zoom/panZoomController';
+import { Interaction } from './interface';
+export declare const panZoomInteraction: (panZoom: PanZoomController) => Interaction;

package/dist/engine/interaction/panZoomInteraction.js

@@ -0,0 +1,29 @@
+export const panZoomInteraction = (panZoom) => ({
+    getRedrawLayers() {
+        const isDragging = panZoom.getIsDragging();
+        return {
+            imageCanvas: isDragging,
+            annotationsCanvas: isDragging,
+        };
+    },
+    handleMouseDown(e) {
+        panZoom.handleMouseDown(e);
+        return panZoom.getIsDragging();
+    },
+    handleMouseMove(e) {
+        panZoom.handleMouseMove(e);
+        return panZoom.getIsDragging();
+    },
+    handleMouseUp(e) {
+        panZoom.handleMouseUp(e);
+        return false;
+    },
+    handleMouseLeave(e) {
+        panZoom.handleMouseLeave(e);
+        return false;
+    },
+    handleWheel(e) {
+        panZoom.handleWheel(e);
+        return true;
+    },
+});

package/dist/engine/interaction/pointerInteraction.d.ts

@@ -0,0 +1,16 @@
+import { AnnotationEngine } from '../public/annotationEngine';
+import { Point } from '../types';
+import { Interaction, RedrawLayers } from './interface';
+export declare class PointerInteraction implements Interaction {
+    private engine;
+    private mousePoint;
+    private needsRedraw;
+    constructor(engine: AnnotationEngine);
+    getRenderState(): {
+        mousePoint: Point | null;
+    };
+    getRedrawLayers(): RedrawLayers;
+    handleMouseMove(e: MouseEvent): false | undefined;
+    handleMouseLeave(): false | undefined;
+    private updateCursor;
+}

package/dist/engine/interaction/pointerInteraction.js

@@ -0,0 +1,48 @@
+import { DrawMode } from '../annotation/annotationTypes';
+import { getRectangleCursor } from '../annotation/rectangle/rectangleRenderer';
+import { getCanvasMousePoint } from '../utils/mousePoint';
+export class PointerInteraction {
+    constructor(engine) {
+        this.engine = engine;
+        this.mousePoint = null;
+        this.needsRedraw = false;
+    }
+    getRenderState() {
+        return {
+            mousePoint: this.mousePoint,
+        };
+    }
+    getRedrawLayers() {
+        return {
+            imageCanvas: false,
+            annotationsCanvas: this.needsRedraw,
+        };
+    }
+    handleMouseMove(e) {
+        if (!this.engine.isEditable())
+            return;
+        this.mousePoint = getCanvasMousePoint(e, this.engine.getImageCanvas(), this.engine.getImageCanvasState());
+        this.updateCursor();
+        this.needsRedraw = this.mousePoint !== null;
+        return false;
+    }
+    handleMouseLeave() {
+        if (!this.engine.isEditable())
+            return;
+        this.mousePoint = null;
+        this.needsRedraw = true;
+        return false;
+    }
+    updateCursor() {
+        const canvas = this.engine.getAnnotationsCanvas();
+        const annotation = this.engine.getSelectedAnnotation();
+        const { zoom } = this.engine.getImageCanvasState();
+        const { mode } = this.engine.getDrawing();
+        let cursor = 'default';
+        if (annotation && this.mousePoint) {
+            if (mode === DrawMode.RECTANGLE)
+                cursor = getRectangleCursor(this.mousePoint, annotation, zoom);
+        }
+        canvas.style.cursor = cursor;
+    }
+}

package/dist/engine/pan-zoom/panZoomController.d.ts

@@ -0,0 +1,26 @@
+import { AnnotationCanvasOptionsZoom, ImageCanvasState } from '../types';
+export declare class PanZoomController {
+    private canvas;
+    private image;
+    private getImageCanvasState;
+    private setImageCanvasState;
+    private options;
+    private isDragging;
+    private startMousePoint?;
+    constructor(canvas: HTMLCanvasElement | null, image: HTMLImageElement | null, getImageCanvasState: () => ImageCanvasState, setImageCanvasState: (state: ImageCanvasState) => void, options: {
+        enabled: boolean;
+        zoom?: AnnotationCanvasOptionsZoom;
+        editable: boolean;
+    });
+    destroy(): void;
+    setEnabled(enabled: boolean): void;
+    setEditable(editable: boolean): void;
+    resetZoomAndPosition(): void;
+    preserveZoomAndPosition(): void;
+    getIsDragging(): boolean;
+    handleMouseDown(event: MouseEvent): void;
+    handleMouseUp: (event: MouseEvent) => void;
+    handleMouseLeave: (event: MouseEvent) => void;
+    handleMouseMove(event: MouseEvent): void;
+    handleWheel(event: WheelEvent): void;
+}

package/dist/engine/pan-zoom/panZoomController.js

@@ -0,0 +1,148 @@
+import { isMouseClickAction, isMouseDragAction, MouseAction } from '../utils/mouseActions';
+import { getMousePointTransform } from '../utils/mousePoint';
+import { calculateInitZoom, getCenteredImageOffset, getZoomPivotFromCanvasCenter, limitZoom } from './panZoomUtils';
+export class PanZoomController {
+    constructor(canvas, image, getImageCanvasState, setImageCanvasState, options) {
+        this.canvas = canvas;
+        this.image = image;
+        this.getImageCanvasState = getImageCanvasState;
+        this.setImageCanvasState = setImageCanvasState;
+        this.options = options;
+        this.isDragging = false;
+        this.handleMouseUp = (event) => {
+            if (!this.options.enabled || !this.canvas)
+                return;
+            this.isDragging = false;
+            event.preventDefault();
+        };
+        this.handleMouseLeave = (event) => {
+            if (!this.options.enabled || !this.canvas)
+                return;
+            this.isDragging = false;
+            event.preventDefault();
+        };
+    }
+    destroy() {
+        this.isDragging = false;
+        this.startMousePoint = undefined;
+        this.canvas = null;
+        this.image = null;
+    }
+    setEnabled(enabled) {
+        this.options.enabled = enabled;
+        if (!enabled) {
+            this.isDragging = false;
+        }
+    }
+    setEditable(editable) {
+        this.options.editable = editable;
+        this.isDragging = false;
+    }
+    resetZoomAndPosition() {
+        if (!this.canvas || !this.image)
+            return;
+        const { dx, dy } = getCenteredImageOffset(this.canvas, this.image);
+        const newInitZoom = calculateInitZoom(this.canvas, this.image);
+        const { zoomX, zoomY } = getZoomPivotFromCanvasCenter(this.canvas, 0, 0, dx, dy);
+        this.setImageCanvasState({
+            moveX: 0,
+            moveY: 0,
+            zoomX,
+            zoomY,
+            zoom: newInitZoom,
+            initZoom: newInitZoom,
+            dx,
+            dy,
+            dw: this.image.naturalWidth,
+            dh: this.image.naturalHeight,
+        });
+    }
+    preserveZoomAndPosition() {
+        if (!this.canvas || !this.image)
+            return;
+        const { moveX, moveY, zoom, initZoom } = this.getImageCanvasState();
+        const zoomRatio = initZoom > 0 ? zoom / initZoom : 1;
+        const { dx, dy } = getCenteredImageOffset(this.canvas, this.image);
+        const newInitZoom = calculateInitZoom(this.canvas, this.image);
+        const { zoomX, zoomY } = getZoomPivotFromCanvasCenter(this.canvas, moveX, moveY, dx, dy);
+        this.setImageCanvasState({
+            moveX,
+            moveY,
+            zoomX,
+            zoomY,
+            zoom: newInitZoom * zoomRatio,
+            dx,
+            dy,
+            dw: this.image.naturalWidth,
+            dh: this.image.naturalHeight,
+            initZoom: newInitZoom,
+        });
+    }
+    getIsDragging() {
+        return this.isDragging;
+    }
+    handleMouseDown(event) {
+        if (!this.options.enabled || !this.canvas)
+            return;
+        if (this.options.editable && isMouseClickAction(event.button, MouseAction.LEFT))
+            return;
+        this.isDragging = true;
+        const { moveX, moveY, zoomX, zoomY, dx, dy, zoom } = this.getImageCanvasState();
+        const canvas = this.canvas;
+        const rect = canvas.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom || 1, canvas);
+        this.startMousePoint = { x: mouse.x, y: mouse.y };
+        event.preventDefault();
+    }
+    handleMouseMove(event) {
+        if (!this.options.enabled || !this.canvas || !this.isDragging)
+            return;
+        if (this.options.editable && isMouseDragAction(event.button, MouseAction.LEFT))
+            return;
+        const canvasState = this.getImageCanvasState();
+        const { moveX, moveY, zoomX, zoomY, dx, dy, zoom } = canvasState;
+        const canvas = this.canvas;
+        const rect = canvas.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom || 1, canvas);
+        let x = mouse.x;
+        let y = mouse.y;
+        if (this.startMousePoint) {
+            x -= this.startMousePoint.x;
+            y -= this.startMousePoint.y;
+        }
+        const { zoomX: newZoomX, zoomY: newZoomY } = getZoomPivotFromCanvasCenter(canvas, moveX + x, moveY + y, dx, dy);
+        this.setImageCanvasState({
+            ...canvasState,
+            moveX: moveX + x,
+            moveY: moveY + y,
+            zoomX: newZoomX,
+            zoomY: newZoomY,
+        });
+        event.preventDefault();
+    }
+    handleWheel(event) {
+        if (!this.options.enabled || !this.canvas || !this.image)
+            return;
+        const canvasState = this.getImageCanvasState();
+        const { zoom, initZoom, moveX, moveY, dx, dy } = canvasState;
+        if (initZoom <= 0)
+            return;
+        const zoomStep = this.options.zoom?.step ?? 0.9;
+        const minZoom = (this.options.zoom?.min ?? 0) * initZoom;
+        const maxZoom = (this.options.zoom?.max ?? Infinity) * initZoom;
+        const nextZoom = limitZoom(event.deltaY < 0 ? zoom * (1 / zoomStep) : zoom * zoomStep, minZoom, maxZoom);
+        if (nextZoom === zoom)
+            return;
+        const { zoomX, zoomY } = getZoomPivotFromCanvasCenter(this.canvas, moveX, moveY, dx, dy);
+        this.setImageCanvasState({
+            ...canvasState,
+            zoom: nextZoom,
+            zoomX,
+            zoomY,
+        });
+    }
+}

package/dist/engine/pan-zoom/panZoomUtils.d.ts

@@ -0,0 +1,10 @@
+export declare const getCenteredImageOffset: (canvas: HTMLCanvasElement, image: HTMLImageElement) => {
+    dx: number;
+    dy: number;
+};
+export declare const calculateInitZoom: (canvas: HTMLCanvasElement, image: HTMLImageElement) => number;
+export declare const getZoomPivotFromCanvasCenter: (canvas: HTMLCanvasElement, moveX: number, moveY: number, dx: number, dy: number) => {
+    zoomX: number;
+    zoomY: number;
+};
+export declare const limitZoom: (zoom: number, min?: number, max?: number) => number;

package/dist/engine/pan-zoom/panZoomUtils.js

@@ -0,0 +1,24 @@
+export const getCenteredImageOffset = (canvas, image) => {
+    return {
+        dx: (canvas.clientWidth - image.naturalWidth) / 2,
+        dy: (canvas.clientHeight - image.naturalHeight) / 2,
+    };
+};
+export const calculateInitZoom = (canvas, image) => {
+    if (!canvas || !image.naturalWidth)
+        return 1;
+    const canvasWidth = canvas.clientWidth;
+    const canvasHeight = canvas.clientHeight;
+    const imageWidth = image.naturalWidth;
+    const imageHeight = image.naturalHeight;
+    const scaleX = canvasWidth / imageWidth;
+    const scaleY = canvasHeight / imageHeight;
+    return Math.min(scaleX, scaleY);
+};
+export const getZoomPivotFromCanvasCenter = (canvas, moveX, moveY, dx, dy) => {
+    return {
+        zoomX: canvas.clientWidth / 2 - dx - moveX,
+        zoomY: canvas.clientHeight / 2 - dy - moveY,
+    };
+};
+export const limitZoom = (zoom, min, max) => min !== undefined && zoom < min ? min : max !== undefined && zoom > max ? max : zoom;

package/dist/engine/public/annotationEngine.d.ts

@@ -0,0 +1,75 @@
+import { AnnotationCanvasDrawing, AnnotationCanvasOptionsZoom, ImageCanvasState } from '../types';
+import { Annotation } from '../annotation/annotationTypes';
+export declare class AnnotationEngine {
+    private imageCanvas;
+    private image;
+    private imageCanvasState;
+    private annotationsCanvas;
+    private annotations;
+    private setAnnotationsCallback;
+    private drawing;
+    private history;
+    private enableHotkeys;
+    private editable;
+    private onChange?;
+    private showSelectedOnly;
+    private panZoom;
+    private interactionController;
+    private readonly renderers;
+    constructor(params: {
+        imageCanvas: HTMLCanvasElement;
+        image: HTMLImageElement;
+        imageCanvasState: ImageCanvasState;
+        annotationsCanvas: HTMLCanvasElement;
+        annotations: Annotation[];
+        setAnnotations: (annotations: Annotation[]) => void;
+        drawing: AnnotationCanvasDrawing;
+        enableHotkeys: boolean;
+        editable?: boolean;
+        panZoomEnabled?: boolean;
+        zoom?: AnnotationCanvasOptionsZoom;
+        onChange?: () => void;
+    });
+    getImageCanvas(): HTMLCanvasElement;
+    getImageCanvasState(): ImageCanvasState;
+    getAnnotationsCanvas(): HTMLCanvasElement;
+    getDrawing(): AnnotationCanvasDrawing;
+    setDrawing(drawing: AnnotationCanvasDrawing): void;
+    isEditable(): boolean;
+    setEditable(editable: boolean): void;
+    setPanZoomEnabled(enabled: boolean): void;
+    getEnableHotkeys(): boolean;
+    getShowSelectedOnly(): boolean;
+    destroy(): void;
+    getZoomRatioLabel(): string;
+    initImageCanvas(resetZoom: boolean): void;
+    private setupCanvasResolution;
+    private drawCanvasAll;
+    private drawImageCanvas;
+    private drawAnnotationsCanvas;
+    private drawCanvas;
+    clearCanvasAll(): void;
+    private clearCanvas;
+    resetCanvas(): void;
+    getAnnotations(): import("../annotation/annotationTypes").RectangleAnnotation[];
+    setAnnotations(annotation: Annotation[]): void;
+    appendAnnotation(annotation: Annotation): void;
+    private syncAnnotations;
+    private drawAnnotations;
+    getSelectedAnnotation(): Annotation | null;
+    setSelectedAnnotation(target: Annotation | null): void;
+    getPointerRenderState(): {
+        mousePoint: import("../types").Point | null;
+    } | null;
+    getDrawRenderState(): unknown;
+    onMouseDown(e: MouseEvent): void;
+    onMouseMove(e: MouseEvent): void;
+    onMouseUp(e: MouseEvent): void;
+    onMouseLeave(e: MouseEvent): void;
+    onWheel(e: WheelEvent): void;
+    initHistory(annotations: Annotation[]): void;
+    commitHistory(checkInit?: boolean): void;
+    deleteSelected(): void;
+    toggleShowSelectedOnly(): void;
+    undoRedo(isRedo: boolean): void;
+}