@deepnoid/canvas 0.1.58 → 0.1.60

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-import { Dispatch, RefObject, SetStateAction } from 'react';
-import { CanvasState, Coordinate, AnnotationCanvasDrawing } from '../../types';
-import { CoordinateHistory } from '../AnnotationCanvas/_utils/createHistory';
-type Props = {
-    canvasState: CanvasState;
-    coordinates: Coordinate[] | undefined;
-    setCoordinates?: Dispatch<SetStateAction<Coordinate[] | undefined>>;
-    historyRef: RefObject<CoordinateHistory | null>;
-    drawing: AnnotationCanvasDrawing;
-    enableHotkeys?: boolean;
-    editable: boolean;
-};
-declare const AnnotationLayer: ({ canvasState, coordinates, setCoordinates: propSetCoordinates, historyRef, drawing, enableHotkeys, editable, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default AnnotationLayer;

package/dist/components/AnnotationLayer/index.js

@@ -1,122 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { DrawMode } from '../../enum/common';
-import { ignoreImageKey, isEqualWith } from '../../utils/common/isEqualWith';
-import { cloneDeep } from '../../utils/common/cloneDeep';
-import { MouseAction } from '../../utils/mouseActions';
-import { useDrawEvents } from './_hooks/drawEvents/useDrawEvents';
-import { useHotkeys } from './_hooks/useHotkeys';
-import { useCanvasDraw } from './_hooks/useCanvasDraw';
-import { drawCanvas, resolutionCanvas } from '../../utils/canvas';
-const INIT_POINT = { x: 0, y: 0, selected: false };
-const INIT_CANVAS_STATE = { moveX: 0, moveY: 0, zoomX: 0, zoomY: 0, zoom: 0, dx: 0, dy: 0, dw: 0, dh: 0 };
-const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSetCoordinates, historyRef, drawing, enableHotkeys, editable, }) => {
-    const { lineSize: drawLineSize, applyStyle, label: drawLabel, mode: selectedDrawMode, color: drawColor } = drawing;
-    const canvasRef = useRef(null);
-    const canvasStateRef = useRef(INIT_CANVAS_STATE);
-    const animationFrameId = useRef(0);
-    const coordinatesRef = useRef([]);
-    const currentCoordinateRef = useRef(null);
-    const maskImageRef = useRef(typeof window !== 'undefined' ? new window.Image() : null);
-    const mousePointRef = useRef(INIT_POINT);
-    const mouseActionRef = useRef(null);
-    const startMousePointRef = useRef(null);
-    const prevMousePointRef = useRef(null);
-    const rectangleAnchorRef = useRef(null);
-    const drawLabelRef = useRef(drawLabel);
-    const [showSelectedOnly, setShowSelectedOnly] = useState(false);
-    useEffect(() => {
-        drawLabelRef.current = drawLabel;
-    }, [drawLabel]);
-    const setCoordinates = useCallback((coordinates) => {
-        coordinatesRef.current = cloneDeep(coordinates) || [];
-        propSetCoordinates && propSetCoordinates(coordinates);
-    }, [propSetCoordinates]);
-    const setMousePoint = useCallback((point) => (mousePointRef.current = point), []);
-    const { drawCross, drawActiveRect, drawRectFromPoints, setCursorStyle } = useCanvasDraw({ drawLineSize, drawColor });
-    useDrawEvents({
-        canvasRef,
-        canvasStateRef,
-        mousePointRef,
-        setMousePoint,
-        mouseActionRef,
-        startMousePointRef,
-        prevMousePointRef,
-        currentCoordinateRef,
-        coordinatesRef,
-        setCoordinates,
-        rectangleAnchorRef,
-        maskImageRef,
-        drawLabelRef,
-        historyRef,
-        selectedDrawMode,
-        editable,
-    });
-    useHotkeys({
-        onDelete: () => {
-            coordinatesRef.current = coordinatesRef.current.filter((coordinate) => !coordinate.selected);
-            setCoordinates(coordinatesRef.current);
-            historyRef.current?.add(cloneDeep(coordinatesRef.current));
-        },
-        toggleSelectionOnly: () => setShowSelectedOnly((prev) => !prev),
-        onUndoRedo: (isRedo) => {
-            const result = isRedo ? historyRef.current?.redo() : historyRef.current?.undo();
-            if (result)
-                setCoordinates(result);
-            const coordinate = coordinatesRef.current.find((coordinate) => coordinate.selected);
-            currentCoordinateRef.current = coordinate || null;
-        },
-        enabled: enableHotkeys,
-    });
-    useEffect(() => {
-        if (!isEqualWith(coordinates, coordinatesRef.current, ignoreImageKey)) {
-            coordinatesRef.current = cloneDeep(coordinates) || [];
-        }
-    }, [coordinates]);
-    useEffect(() => {
-        const initialize = () => {
-            const { moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh } = canvasState;
-            canvasStateRef.current = { moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh };
-        };
-        const drawNewBBox = (context) => {
-            if (mouseActionRef.current === MouseAction.LEFT && startMousePointRef.current) {
-                drawRectFromPoints(context, mousePointRef.current, startMousePointRef.current, canvasStateRef.current.zoom);
-            }
-        };
-        const redraw = () => {
-            const canvas = resolutionCanvas(canvasRef.current);
-            if (!canvas)
-                return;
-            const { moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh } = canvasState;
-            drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas, undefined, true);
-            const context = canvas.getContext('2d');
-            if (context && coordinates) {
-                const cloneCoordinates = cloneDeep(coordinatesRef.current);
-                cloneCoordinates.reverse().forEach((coordinate) => {
-                    if (coordinate.type === DrawMode.RECTANGLE) {
-                        if (!showSelectedOnly || coordinate.selected) {
-                            applyStyle({ variant: 'drawRect', context, coordinate, drawLineSize, zoom });
-                            applyStyle({ variant: 'drawText', context, coordinate, drawLineSize, zoom });
-                            drawActiveRect(context, coordinate, zoom);
-                            setCursorStyle(canvas, mousePointRef, coordinate, zoom);
-                        }
-                    }
-                });
-                if (mousePointRef.current && editable && selectedDrawMode && !currentCoordinateRef.current) {
-                    drawNewBBox(context);
-                    drawCross(context, dw, dh, zoom, mousePointRef.current);
-                }
-            }
-            animationFrameId.current = requestAnimationFrame(redraw);
-        };
-        initialize();
-        redraw();
-        window.addEventListener('resize', redraw);
-        return () => {
-            window.removeEventListener('resize', redraw);
-            cancelAnimationFrame(animationFrameId.current);
-        };
-    }, [canvasState, coordinates, selectedDrawMode, editable]);
-    return (_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', height: '100%', width: '100%' } }));
-};
-export default AnnotationLayer;

package/dist/utils/canvas.d.ts

@@ -1,3 +0,0 @@
-export declare const drawCanvas: (moveX: number, moveY: number, zoomX: number, zoomY: number, zoom: number, dx: number, dy: number, canvas?: HTMLCanvasElement, image?: HTMLImageElement, isClear?: boolean) => void;
-export declare const resolutionCanvas: (canvas: HTMLCanvasElement | null | undefined, width?: number, height?: number) => HTMLCanvasElement | undefined;
-export declare const clearCanvasRect: (canvas: HTMLCanvasElement | null | undefined) => void;

package/dist/utils/canvas.js

@@ -1,37 +0,0 @@
-export const drawCanvas = (moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas, image, isClear) => {
-    if (canvas) {
-        const context = canvas.getContext('2d');
-        if (isClear)
-            context?.clearRect(0, 0, canvas.width, canvas.height);
-        const resolution_ratio_x = canvas.width / canvas.clientWidth;
-        const resolution_ratio_y = canvas.height / canvas.clientHeight;
-        context?.translate(dx * resolution_ratio_x, dy * resolution_ratio_y);
-        context?.translate(moveX * resolution_ratio_x, moveY * resolution_ratio_y);
-        context?.translate(zoomX, zoomY);
-        context?.scale(zoom, zoom);
-        context?.translate(-zoomX, -zoomY);
-        try {
-            if (image)
-                context?.drawImage(image, 0, 0, image.width, image.height);
-        }
-        catch (error) {
-            console.error('Failed to draw image', error);
-        }
-    }
-};
-export const resolutionCanvas = (canvas, width, height) => {
-    if (!canvas)
-        return undefined;
-    const newCanvas = canvas;
-    newCanvas.width = width || newCanvas.clientWidth;
-    newCanvas.height = height || newCanvas.clientHeight;
-    return newCanvas;
-};
-export const clearCanvasRect = (canvas) => {
-    if (!canvas)
-        return;
-    const ctx = canvas.getContext('2d');
-    const resolvedCanvas = resolutionCanvas(canvas);
-    if (resolvedCanvas)
-        ctx?.clearRect(0, 0, resolvedCanvas.width, resolvedCanvas.height);
-};

package/dist/utils/pointTransform.d.ts

@@ -1,2 +0,0 @@
-import { Point } from '../types';
-export declare const getMousePointTransform: (mousePoint: Point, movePoint: Point, zoomPoint: Point, originPoint: Point, zoom: number, canvas: HTMLCanvasElement, rotate?: number) => Point;

package/dist/utils/pointTransform.js

@@ -1,46 +0,0 @@
-const applyOrigin = (mouse, origin) => {
-    const x = mouse.x - origin.x;
-    const y = mouse.y - origin.y;
-    return {
-        x,
-        y,
-    };
-};
-const applyMove = (mouse, move) => {
-    const x = mouse.x - move.x;
-    const y = mouse.y - move.y;
-    return {
-        x,
-        y,
-    };
-};
-const applyZoom = (mouse, zoomPoint, zoom, canvas) => {
-    const resolution_ratio_x = canvas.width / canvas.clientWidth;
-    const resolution_ratio_y = canvas.height / canvas.clientHeight;
-    let x = mouse.x * (1 / zoom) * resolution_ratio_x;
-    let y = mouse.y * (1 / zoom) * resolution_ratio_y;
-    x = x + zoomPoint.x;
-    y = y + zoomPoint.y;
-    x = x - zoomPoint.x * (1 / zoom);
-    y = y - zoomPoint.y * (1 / zoom);
-    return {
-        x,
-        y,
-    };
-};
-const applyRotate = (mouse, rotate, center) => {
-    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 };
-};
-export const getMousePointTransform = (mousePoint, movePoint, zoomPoint, originPoint, zoom, canvas, rotate = 0) => {
-    let mouse = mousePoint;
-    mouse = applyRotate(mouse, rotate, { x: canvas.width / 2, y: canvas.height / 2 });
-    mouse = applyOrigin(mouse, originPoint);
-    mouse = applyMove(mouse, movePoint);
-    mouse = applyZoom(mouse, zoomPoint, zoom, canvas);
-    return mouse;
-};