@deepnoid/canvas 0.1.58 → 0.1.59

package/dist/components/AnnotationCanvas/_hooks/useImagePanZoom.js

@@ -1,143 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-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({
-        moveX: 0,
-        moveY: 0,
-        zoomX: 0,
-        zoomY: 0,
-        zoom: 1,
-        dx: 0,
-        dy: 0,
-        dw: 0,
-        dh: 0,
-        initZoom: 0,
-    });
-    const [startMousePoint, setStartMousePoint] = useState();
-    const isDraggingRef = useRef(false);
-    const initZoomAndPosition = (canvas, image) => {
-        const center = canvasCenterPoint(canvas, image);
-        const zoomPoint = calculatorZoomPoint(canvas, 0, 0, center.x, center.y);
-        const initZoomValue = calculateInitZoom(canvas, image);
-        setCanvasState({
-            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) => {
-        const prevZoomRatio = zoomRatio || 1;
-        const center = canvasCenterPoint(canvas, image);
-        const newInitZoom = calculateInitZoom(canvas, image);
-        const zoomPoint = calculatorZoomPoint(canvas, canvasState.moveX, canvasState.moveY, center.x, center.y);
-        setCanvasState({
-            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,
-        });
-    };
-    const initCanvas = () => {
-        if (!canvasRef.current)
-            return;
-        initZoomAndPosition(canvasRef.current, imageRef.current);
-    };
-    const handleWheel = (event) => {
-        if (!panZoomEnabled || !canvasRef.current || canvasState.initZoom <= 0)
-            return;
-        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,
-            zoomX: zoomPoint.x,
-            zoomY: zoomPoint.y,
-            zoom: newZoom,
-        });
-    };
-    const handleMouseMove = (event) => {
-        if (!panZoomEnabled || !canvasRef.current || !isDraggingRef.current)
-            return;
-        if (editable && isMouseDragAction(event.button, MouseAction.LEFT))
-            return;
-        const canvas = canvasRef.current;
-        const rect = canvas.getBoundingClientRect();
-        const mouseX = event.clientX - rect.left;
-        const mouseY = event.clientY - rect.top;
-        const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: canvasState.moveX, y: canvasState.moveY }, { x: canvasState.zoomX, y: canvasState.zoomY }, { x: canvasState.dx, y: canvasState.dy }, canvasState.zoom || 1, canvas);
-        let x = mouse.x;
-        let y = mouse.y;
-        if (startMousePoint) {
-            x -= startMousePoint.x;
-            y -= startMousePoint.y;
-        }
-        const zoomPoint = calculatorZoomPoint(canvas, canvasState.moveX + x, canvasState.moveY + y, canvasState.dx, canvasState.dy);
-        setCanvasState({
-            ...canvasState,
-            moveX: canvasState.moveX + x,
-            moveY: canvasState.moveY + y,
-            zoomX: zoomPoint.x,
-            zoomY: zoomPoint.y,
-        });
-        event.preventDefault();
-    };
-    const handleMouseDown = (event) => {
-        if (!panZoomEnabled || !canvasRef.current)
-            return;
-        if (editable && isMouseClickAction(event.button, MouseAction.LEFT))
-            return;
-        isDraggingRef.current = true;
-        const canvas = canvasRef.current;
-        const rect = canvas.getBoundingClientRect();
-        const mouseX = event.clientX - rect.left;
-        const mouseY = event.clientY - rect.top;
-        const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: canvasState.moveX, y: canvasState.moveY }, { x: canvasState.zoomX, y: canvasState.zoomY }, { x: canvasState.dx, y: canvasState.dy }, canvasState.zoom || 1, canvas);
-        setStartMousePoint({ x: mouse.x, y: mouse.y });
-        event.preventDefault();
-    };
-    const handleMouseUp = (event) => {
-        if (!panZoomEnabled || !canvasRef.current)
-            return;
-        isDraggingRef.current = false;
-        event.preventDefault();
-    };
-    const handleMouseLeave = (event) => {
-        if (!panZoomEnabled || !canvasRef.current)
-            return;
-        isDraggingRef.current = false;
-        event.preventDefault();
-    };
-    return {
-        canvasState,
-        initZoomAndPosition,
-        preserveZoomAndPosition,
-        initCanvas,
-        handleWheel,
-        handleMouseDown,
-        handleMouseMove,
-        handleMouseUp,
-        handleMouseLeave,
-    };
-}

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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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.js

@@ -1,96 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import AnnotationLayer from '../AnnotationLayer';
-import { useImagePanZoom } from './_hooks/useImagePanZoom';
-import useResizeObserver from '../../hooks/useResizeObserver';
-import { 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, enableHotkeys = false, 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(null);
-    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 updateDisplayCoordinates = (coordinates) => {
-        setDisplayCoordinates(coordinates?.map((coordinate) => ({
-            ...coordinate,
-            type: coordinate.type ?? DrawMode.RECTANGLE,
-        })) || []);
-    };
-    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;
-            updateDisplayCoordinates(coordinates);
-        };
-        tempImage.onerror = () => !cancelled && resetCanvas(`Failed to load image: ${image}`);
-        tempImage.src = image;
-        historyRef.current = null;
-        return () => {
-            cancelled = true;
-            tempImage.onload = null;
-            tempImage.onerror = null;
-        };
-    }, [image, resetOnImageChange]);
-    useEffect(() => {
-        if (imageRef.current.src) {
-            if (!historyRef.current && coordinates && coordinates.length > 0) {
-                historyRef.current = createHistory();
-                historyRef.current.init(coordinates);
-            }
-            updateDisplayCoordinates(coordinates);
-        }
-    }, [coordinates, imageRef.current]);
-    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: !panZoomEnabled || 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, enableHotkeys: enableHotkeys, 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

@@ -1,5 +0,0 @@
-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, drawLabelRef, historyRef, }: 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

@@ -1,88 +0,0 @@
-import { DrawMode } from '../../../../enum/common';
-import { cloneDeep } from '../../../../utils/common/cloneDeep';
-import { isMouseClickAction, MouseAction } from '../../../../utils/mouseActions';
-import { createHistory } from '../../../AnnotationCanvas/_utils/createHistory';
-import { ACTIVE_POINT_SIZE, clampBoundingBoxToImage, 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, drawLabelRef, historyRef, }) => (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) {
-                historyRef.current?.add(cloneDeep(coordinatesRef.current));
-            }
-            else {
-                const label = drawLabelRef.current;
-                const newCoordinate = { label, type: DrawMode.RECTANGLE, x, y, width, height, selected: false };
-                coordinatesRef.current.push(newCoordinate);
-                setCoordinates(coordinatesRef.current);
-                if (!historyRef.current) {
-                    historyRef.current = createHistory();
-                    historyRef.current.addInit();
-                }
-                historyRef.current?.add(cloneDeep(coordinatesRef.current));
-                currentCoordinateRef.current = null;
-            }
-        }
-        else {
-            selectRectangleAtPoint(zoom, mousePointRef.current, coordinatesRef, currentCoordinateRef);
-            setCoordinates(coordinatesRef.current);
-        }
-    }
-    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

@@ -1,28 +0,0 @@
-import { RefObject } from 'react';
-import { Coordinate, Point, Rectangle, CanvasState } from '../../../../types';
-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 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 {};

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

@@ -1,204 +0,0 @@
-import { MouseAction } from '../../../../utils/mouseActions';
-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 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

@@ -1,25 +0,0 @@
-import { RefObject } from 'react';
-import { Point, Coordinate, CanvasState, Label } from '../../../../types';
-import { DrawMode, RectangleAnchor } from '../../../../enum/common';
-import { MouseAction } from '../../../../utils/mouseActions';
-import { CoordinateHistory } from '../../../AnnotationCanvas/_utils/createHistory';
-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<Coordinate[]>;
-    setCoordinates: (coordinates: Coordinate[]) => void;
-    rectangleAnchorRef: RefObject<RectangleAnchor | null>;
-    maskImageRef: RefObject<HTMLImageElement | null>;
-    drawLabelRef: RefObject<Label | undefined>;
-    historyRef: RefObject<CoordinateHistory | null>;
-};
-export declare const useDrawEvents: (params: DrawEventsParams & {
-    selectedDrawMode?: DrawMode;
-    editable: boolean;
-}) => void;