@deepnoid/canvas 0.1.38 → 0.1.40

package/dist/components/{AnnotationViewer → AnnotationCanvas}/_hooks/useImagePanZoom.d.ts

@@ -1,23 +1,17 @@
 import { RefObject, WheelEvent, MouseEvent } from 'react';
-type CanvasState = {
-    dx: number;
-    dy: number;
-    dw: number;
-    dh: number;
-    moveX: number;
-    moveY: number;
-    zoomX: number;
-    zoomY: number;
-    zoom: number;
+import { AnnotationCanvasOptionsZoom, CanvasState } from '../../../types';
+type ImageCanvasState = CanvasState & {
     initZoom: number;
 };
 type Props = {
     canvasRef: RefObject<HTMLCanvasElement | null>;
     imageRef: RefObject<HTMLImageElement>;
-    panZoomable?: boolean;
+    panZoomEnabled?: boolean;
+    zoom?: AnnotationCanvasOptionsZoom;
+    editable?: boolean;
 };
-export declare function useImagePanZoom({ canvasRef, imageRef, panZoomable }: Props): {
-    canvasState: CanvasState;
+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;

package/dist/components/{AnnotationViewer → AnnotationCanvas}/_hooks/useImagePanZoom.js

@@ -1,20 +1,19 @@
 'use client';
 import { useState, useRef } from 'react';
-import { getMousePointTransform, canvasCenterPoint, calculatorZoomPoint, calculateInitZoom, calculateZoom, } from '../../../utils/graphic';
-export function useImagePanZoom({ canvasRef, imageRef, panZoomable = false }) {
-    const ZOOM_UNIT = 0.9;
-    const MAX_ZOOM = 4;
-    const MIN_ZOOM = 0.5;
+import { getMousePointTransform } from '../../../utils/pointTransform';
+import { isMouseClickAction, isMouseDragAction, MouseAction } from '../../../utils/mouseActions';
+import { calculateInitZoom, calculateZoom, calculatorZoomPoint, canvasCenterPoint } from '../_utils/panZoom';
+export function useImagePanZoom({ canvasRef, imageRef, panZoomEnabled = false, zoom, editable = false }) {
     const [canvasState, setCanvasState] = useState({
-        dx: 0,
-        dy: 0,
-        dw: 0,
-        dh: 0,
         moveX: 0,
         moveY: 0,
         zoomX: 0,
         zoomY: 0,
         zoom: 0,
+        dx: 0,
+        dy: 0,
+        dw: 0,
+        dh: 0,
         initZoom: 0,
     });
     const [startMousePoint, setStartMousePoint] = useState();
@@ -24,16 +23,16 @@ export function useImagePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         const zoomPoint = calculatorZoomPoint(canvas, 0, 0, center.x, center.y);
         const initZoomValue = calculateInitZoom(canvas, image);
         setCanvasState({
-            dx: center.x,
-            dy: center.y,
-            dw: image.width,
-            dh: image.height,
             moveX: 0,
             moveY: 0,
             zoomX: zoomPoint.x,
             zoomY: zoomPoint.y,
             zoom: initZoomValue,
             initZoom: initZoomValue,
+            dx: center.x,
+            dy: center.y,
+            dw: image.width,
+            dh: image.height,
         });
     };
     const preserveZoomAndPosition = (canvas, image, zoomRatio) => {
@@ -42,15 +41,15 @@ export function useImagePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         const newInitZoom = calculateInitZoom(canvas, image);
         const zoomPoint = calculatorZoomPoint(canvas, canvasState.moveX, canvasState.moveY, center.x, center.y);
         setCanvasState({
-            dx: center.x,
-            dy: center.y,
-            dw: image.width,
-            dh: image.height,
             moveX: canvasState.moveX,
             moveY: canvasState.moveY,
             zoomX: zoomPoint.x,
             zoomY: zoomPoint.y,
             zoom: newInitZoom * prevZoomRatio,
+            dx: center.x,
+            dy: center.y,
+            dw: image.width,
+            dh: image.height,
             initZoom: newInitZoom,
         });
     };
@@ -60,9 +59,16 @@ export function useImagePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         initZoomAndPosition(canvasRef.current, imageRef.current);
     };
     const handleWheel = (event) => {
-        if (!panZoomable || !canvasRef.current || canvasState.initZoom <= 0)
+        if (!panZoomEnabled || !canvasRef.current || canvasState.initZoom <= 0)
             return;
-        const newZoom = calculateZoom(canvasState.zoom, event.deltaY, canvasState.initZoom * MIN_ZOOM, canvasState.initZoom * MAX_ZOOM, ZOOM_UNIT);
+        const zoomStep = zoom?.step || 0.9;
+        const maxZoom = zoom?.max;
+        const minZoom = zoom?.min;
+        const newZoom = maxZoom && minZoom
+            ? calculateZoom(canvasState.zoom, event.deltaY, canvasState.initZoom * minZoom, canvasState.initZoom * maxZoom, zoomStep)
+            : event.deltaY < 0
+                ? (canvasState.zoom || 1) * (1 / zoomStep)
+                : (canvasState.zoom || 1) * zoomStep;
         const zoomPoint = calculatorZoomPoint(canvasRef.current, canvasState.moveX, canvasState.moveY, canvasState.dx, canvasState.dy);
         setCanvasState({
             ...canvasState,
@@ -72,7 +78,9 @@ export function useImagePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         });
     };
     const handleMouseMove = (event) => {
-        if (!panZoomable || !canvasRef.current || !isDraggingRef.current)
+        if (!panZoomEnabled || !canvasRef.current || !isDraggingRef.current)
+            return;
+        if (editable && isMouseDragAction(event.button, MouseAction.LEFT))
             return;
         const canvas = canvasRef.current;
         const rect = canvas.getBoundingClientRect();
@@ -96,7 +104,9 @@ export function useImagePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         event.preventDefault();
     };
     const handleMouseDown = (event) => {
-        if (!panZoomable || !canvasRef.current)
+        if (!panZoomEnabled || !canvasRef.current)
+            return;
+        if (editable && isMouseClickAction(event.button, MouseAction.LEFT))
             return;
         isDraggingRef.current = true;
         const canvas = canvasRef.current;
@@ -108,13 +118,13 @@ export function useImagePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         event.preventDefault();
     };
     const handleMouseUp = (event) => {
-        if (!panZoomable || !canvasRef.current)
+        if (!panZoomEnabled || !canvasRef.current)
             return;
         isDraggingRef.current = false;
         event.preventDefault();
     };
     const handleMouseLeave = (event) => {
-        if (!panZoomable || !canvasRef.current)
+        if (!panZoomEnabled || !canvasRef.current)
             return;
         isDraggingRef.current = false;
         event.preventDefault();

package/dist/components/AnnotationCanvas/_utils/createHistory.d.ts

@@ -0,0 +1,11 @@
+import { Coordinate } from '../../../types';
+export type CoordinateHistory = {
+    getHistory: () => Coordinate[][];
+    getHistoryIndex: () => number;
+    setHistoryIndex: (index: number) => void;
+    init: (coordinates?: Coordinate[]) => void;
+    add: (coordinates: Coordinate[]) => void;
+    undo: () => Coordinate[] | undefined;
+    redo: () => Coordinate[] | undefined;
+};
+export declare const createHistory: () => CoordinateHistory;

package/dist/components/AnnotationCanvas/_utils/createHistory.js

@@ -0,0 +1,34 @@
+export const createHistory = () => {
+    let history = [];
+    let historyIndex = -1;
+    return {
+        getHistory: () => history,
+        getHistoryIndex: () => historyIndex,
+        setHistoryIndex: (index) => {
+            historyIndex = index;
+        },
+        init: (coordinates = []) => {
+            history = [coordinates];
+            historyIndex = 0;
+        },
+        add: (coordinates) => {
+            history.splice(historyIndex + 1);
+            history.push(coordinates);
+            historyIndex++;
+        },
+        undo: () => {
+            if (historyIndex > 0) {
+                historyIndex--;
+                return history[historyIndex];
+            }
+            return undefined;
+        },
+        redo: () => {
+            if (historyIndex < history.length - 1) {
+                historyIndex++;
+                return history[historyIndex];
+            }
+            return undefined;
+        },
+    };
+};

package/dist/components/AnnotationCanvas/_utils/panZoom.d.ts

@@ -0,0 +1,10 @@
+export declare const canvasCenterPoint: (canvas: HTMLCanvasElement, image: HTMLImageElement) => {
+    x: number;
+    y: number;
+};
+export declare const calculatorZoomPoint: (canvas: HTMLCanvasElement, movementX: number, movementY: number, dx: number, dy: number) => {
+    x: number;
+    y: number;
+};
+export declare const calculateInitZoom: (canvas: HTMLCanvasElement, image: HTMLImageElement) => number;
+export declare const calculateZoom: (currentZoom: number, deltaY: number, minZoom: number, maxZoom: number, zoomUnit: number) => number;

package/dist/components/AnnotationCanvas/_utils/panZoom.js

@@ -0,0 +1,29 @@
+export const canvasCenterPoint = (canvas, image) => {
+    const centerX = canvas.width / 2 - image.width / 2;
+    const centerY = canvas.height / 2 - image.height / 2;
+    return { x: centerX, y: centerY };
+};
+export const calculatorZoomPoint = (canvas, movementX, movementY, dx, dy) => {
+    let x = 0;
+    let y = 0;
+    if (canvas) {
+        x = -dx - movementX + canvas.width / 2;
+        y = -dy - movementY + canvas.height / 2;
+    }
+    return { x, y };
+};
+export const calculateInitZoom = (canvas, image) => {
+    if (!canvas || !image.naturalWidth)
+        return 1;
+    const canvasRatio = canvas.clientWidth / canvas.clientHeight;
+    const imageRatio = image.naturalWidth / image.naturalHeight;
+    return canvasRatio < imageRatio ? canvas.clientWidth / image.naturalWidth : canvas.clientHeight / image.naturalHeight;
+};
+export const calculateZoom = (currentZoom, deltaY, minZoom, maxZoom, zoomUnit) => {
+    let newZoom = deltaY < 0 ? currentZoom * (1 / zoomUnit) : currentZoom * zoomUnit;
+    if (newZoom > maxZoom)
+        newZoom = maxZoom;
+    if (newZoom < minZoom)
+        newZoom = minZoom;
+    return newZoom;
+};

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

@@ -0,0 +1,26 @@
+import { ComponentType, Dispatch, ReactNode, SetStateAction } from 'react';
+import { AnnotationCanvasDrawing, AnnotationCanvasOptionsZoom, Coordinate } from '../../types';
+export type ZoomButtonType = {
+    onClick: () => void;
+    children: ReactNode;
+};
+export type AnnotationCanvasProps = {
+    image: string;
+    coordinates?: Coordinate[];
+    setCoordinates?: Dispatch<SetStateAction<Coordinate[] | undefined>>;
+    options: {
+        panZoomEnabled?: boolean;
+        zoom?: AnnotationCanvasOptionsZoom;
+        ZoomButton?: ComponentType<ZoomButtonType>;
+        resetOnImageChange?: boolean;
+        timeout?: number;
+    };
+    drawing: AnnotationCanvasDrawing;
+    events: {
+        onImageLoadSuccess?: () => void;
+        onImageLoadError?: (error: Error) => void;
+    };
+    editable?: boolean;
+};
+declare const AnnotationCanvas: ({ image, coordinates, setCoordinates, options, drawing, events, editable, }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;
+export default AnnotationCanvas;

package/dist/components/AnnotationCanvas/index.js

@@ -0,0 +1,83 @@
+'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 { useDebounce } from '../../hooks/useDebounce';
+import { DrawMode } from '../../enum/common';
+import { createHistory } from './_utils/createHistory';
+import { clearCanvasRect, drawCanvas, resolutionCanvas } from '../../utils/canvas';
+const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing, events, editable = false, }) => {
+    const { panZoomEnabled, zoom, ZoomButton, resetOnImageChange, timeout = 10000 } = options;
+    const { onImageLoadSuccess, onImageLoadError } = events;
+    const canvasRef = useRef(null);
+    const imageRef = useRef(new Image());
+    const historyRef = useRef(createHistory());
+    const [displayCoordinates, setDisplayCoordinates] = useState();
+    useResizeObserver({
+        ref: canvasRef,
+        onResize: 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),
+    });
+    const { canvasState, initZoomAndPosition, initCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, } = useImagePanZoom({ canvasRef, imageRef, panZoomEnabled, zoom, editable });
+    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));
+    };
+    useEffect(() => {
+        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?.map((coordinate) => {
+                return {
+                    ...coordinate,
+                    type: coordinate.type ? coordinate.type : DrawMode.RECTANGLE,
+                };
+            }) || []);
+        };
+        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) => {
+            const { moveX, moveY, zoomX, zoomY, zoom, dx, dy } = canvasState;
+            drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, 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: editable ? 'default' : 'grab' }, children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), _jsx(AnnotationLayer, { canvasState: canvasState, coordinates: displayCoordinates, setCoordinates: setCoordinates, historyRef: historyRef, drawing: drawing, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
+};
+export default AnnotationCanvas;

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

@@ -0,0 +1,5 @@
+import { DrawEventsParams } from './useDrawEvents';
+export declare const handleMouseDownRectangle: ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, currentCoordinateRef, coordinatesRef, rectangleAnchorRef, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;
+export declare const handleMouseMoveRectangle: ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, prevMousePointRef, currentCoordinateRef, coordinatesRef, rectangleAnchorRef, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;
+export declare const handleMouseUpRectangle: ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, historyRef, drawLabel, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;
+export declare const handleMouseLeaveRectangle: ({ canvasRef, canvasStateRef, setMousePoint, startMousePointRef, prevMousePointRef, mouseActionRef, rectangleAnchorRef, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;

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

@@ -0,0 +1,75 @@
+import { DrawMode } from '../../../../enum/common';
+import { cloneDeep } from '../../../../utils/common/cloneDeep';
+import { isMouseClickAction, MouseAction } from '../../../../utils/mouseActions';
+import { ACTIVE_POINT_SIZE, clampBoundingBoxToImage, createCoordinate, getCanvasMousePoint, handleBBoxOperations, isInsideImage, updateActiveRectangleAnchor, selectRectangleAtPoint, } from './rectangleUtils';
+export const handleMouseDownRectangle = ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, currentCoordinateRef, coordinatesRef, rectangleAnchorRef, }) => (event) => {
+    if (!canvasRef.current || !isMouseClickAction(event.button, MouseAction.LEFT))
+        return;
+    const mousePoint = getCanvasMousePoint(event, canvasRef.current, canvasStateRef.current);
+    if (!isInsideImage(mousePoint, canvasStateRef.current.dw, canvasStateRef.current.dh))
+        return;
+    mouseActionRef.current = MouseAction.LEFT;
+    setMousePoint(mousePoint);
+    startMousePointRef.current = mousePoint;
+    if (currentCoordinateRef.current) {
+        const { zoom } = canvasStateRef.current;
+        selectRectangleAtPoint(zoom, mousePointRef.current, coordinatesRef, currentCoordinateRef);
+        updateActiveRectangleAnchor(zoom, mousePointRef.current, currentCoordinateRef, rectangleAnchorRef);
+    }
+    event.preventDefault();
+};
+export const handleMouseMoveRectangle = ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, prevMousePointRef, currentCoordinateRef, coordinatesRef, rectangleAnchorRef, }) => (event) => {
+    if (!canvasRef.current || !isMouseClickAction(event.button, MouseAction.LEFT))
+        return;
+    prevMousePointRef.current = cloneDeep(mousePointRef.current);
+    const mousePoint = getCanvasMousePoint(event, canvasRef.current, canvasStateRef.current);
+    setMousePoint(mousePoint);
+    handleBBoxOperations({
+        coordinatesRef,
+        dw: canvasStateRef.current.dw,
+        dh: canvasStateRef.current.dh,
+        mousePoint: mousePointRef.current,
+        prevMousePoint: prevMousePointRef.current,
+        mouseAction: mouseActionRef.current,
+        currentCoordinate: currentCoordinateRef.current,
+        rectangleAnchor: rectangleAnchorRef.current,
+    });
+    event.preventDefault();
+};
+export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, historyRef, drawLabel, }) => (event) => {
+    if (!canvasRef.current || !isMouseClickAction(event.button, MouseAction.LEFT))
+        return;
+    const mousePoint = getCanvasMousePoint(event, canvasRef.current, canvasStateRef.current);
+    setMousePoint(mousePoint);
+    if (startMousePointRef.current) {
+        const movedWidth = Math.abs(startMousePointRef.current.x - mousePoint.x);
+        const movedHeight = Math.abs(startMousePointRef.current.y - mousePoint.y);
+        const { zoom, dw, dh } = canvasStateRef.current;
+        if (movedWidth > ACTIVE_POINT_SIZE || movedHeight > ACTIVE_POINT_SIZE) {
+            const { x, y, width, height } = clampBoundingBoxToImage(Math.min(startMousePointRef.current.x, mousePoint.x), Math.min(startMousePointRef.current.y, mousePoint.y), movedWidth, movedHeight, dw, dh);
+            if (!currentCoordinateRef.current) {
+                const newCoordinate = { label: drawLabel, type: DrawMode.RECTANGLE, x, y, width, height, selected: false };
+                createCoordinate(newCoordinate, setCoordinates, coordinatesRef, historyRef, currentCoordinateRef);
+            }
+        }
+        else {
+            selectRectangleAtPoint(zoom, mousePointRef.current, coordinatesRef, currentCoordinateRef);
+        }
+    }
+    mouseActionRef.current = null;
+    startMousePointRef.current = null;
+    prevMousePointRef.current = null;
+    rectangleAnchorRef.current = null;
+    event.preventDefault();
+};
+export const handleMouseLeaveRectangle = ({ canvasRef, canvasStateRef, setMousePoint, startMousePointRef, prevMousePointRef, mouseActionRef, rectangleAnchorRef, }) => (event) => {
+    if (!canvasRef.current)
+        return;
+    const mousePoint = getCanvasMousePoint(event, canvasRef.current, canvasStateRef.current);
+    setMousePoint(mousePoint);
+    mouseActionRef.current = null;
+    startMousePointRef.current = null;
+    prevMousePointRef.current = null;
+    rectangleAnchorRef.current = null;
+    event.preventDefault();
+};

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

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+import { Coordinate, Point, Rectangle, CanvasState } from '../../../../types';
+import { CoordinateHistory } from '../../../AnnotationCanvas/_utils/createHistory';
+import { MouseAction } from '../../../../utils/mouseActions';
+import { RectangleAnchor } from '../../../../enum/common';
+export declare const ACTIVE_POINT_SIZE = 10;
+export declare const getRectangleCorners: ({ x, y, width, height }: Rectangle) => {
+    x: number;
+    y: number;
+}[];
+export declare const selectRectangleAtPoint: (zoom: number, mousePoint: Point, coordinatesRef: RefObject<Coordinate[]>, currentCoordinateRef: RefObject<Coordinate | null>) => void;
+export declare const updateActiveRectangleAnchor: (zoom: number, mousePointRef: Point, currentCoordinateRef: RefObject<Coordinate | null>, rectangleAnchorRef: RefObject<RectangleAnchor | null>) => void;
+export declare const createCoordinate: (coordinate: Coordinate, setCoordinates: (dataSet: Coordinate[]) => void, coordinatesRef: RefObject<Coordinate[]>, historyRef: RefObject<CoordinateHistory>, currentCoordinateRef: RefObject<Coordinate | null>) => void;
+export declare const clampBoundingBoxToImage: (x: number, y: number, width: number, height: number, dw: number, dh: number) => Rectangle & {
+    selected?: boolean;
+};
+export declare const getCanvasMousePoint: (event: globalThis.MouseEvent | React.MouseEvent, canvas: HTMLCanvasElement, canvasState: CanvasState) => Point;
+type BBoxParams = {
+    coordinatesRef: RefObject<Coordinate[]>;
+    dw: number;
+    dh: number;
+    mousePoint: Point;
+    prevMousePoint: Point;
+    mouseAction: MouseAction | null;
+    currentCoordinate: Coordinate | null;
+    rectangleAnchor: RectangleAnchor | null;
+};
+export declare const handleBBoxOperations: (params: BBoxParams) => void;
+export declare const isInsideImage: (point: Point, imageWidth: number, imageHeight: number) => boolean;
+export {};