@deepnoid/canvas 0.1.55 → 0.1.57

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

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

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

@@ -4,13 +4,14 @@ export const createHistory = () => {
     return {
         getHistory: () => history,
         getHistoryIndex: () => historyIndex,
-        setHistoryIndex: (index) => {
-            historyIndex = index;
-        },
         init: (coordinates = []) => {
             history = [coordinates];
             historyIndex = 0;
         },
+        addInit: () => {
+            history.push([]);
+            historyIndex++;
+        },
         add: (coordinates) => {
             history.splice(historyIndex + 1);
             history.push(coordinates);
@@ -23,7 +24,7 @@ export const createHistory = () => {
             return history[historyIndex];
         },
         redo: () => {
-            if (historyIndex > history.length)
+            if (historyIndex > history.length || !history[historyIndex + 1])
                 return undefined;
             historyIndex++;
             return history[historyIndex];

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

@@ -1,5 +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, drawLabelRef, }: 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,7 +1,8 @@
 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';
+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;
@@ -36,7 +37,7 @@ export const handleMouseMoveRectangle = ({ canvasRef, canvasStateRef, mouseActio
     });
     event.preventDefault();
 };
-export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, drawLabelRef, }) => (event) => {
+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);
@@ -47,10 +48,21 @@ export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionR
         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) {
+            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 };
-                createCoordinate(newCoordinate, setCoordinates, coordinatesRef, currentCoordinateRef);
+                coordinatesRef.current.push(newCoordinate);
+                setCoordinates(coordinatesRef.current);
+                const cloneCoordinates = cloneDeep(coordinatesRef.current);
+                if (!historyRef.current) {
+                    historyRef.current = createHistory();
+                    historyRef.current.addInit();
+                }
+                historyRef.current?.add(cloneCoordinates);
+                currentCoordinateRef.current = null;
             }
         }
         else {

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

@@ -9,7 +9,6 @@ export declare const getRectangleCorners: ({ x, y, width, height }: Rectangle) =
 }[];
 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[]>, currentCoordinateRef: RefObject<Coordinate | null>) => void;
 export declare const clampBoundingBoxToImage: (x: number, y: number, width: number, height: number, dw: number, dh: number) => Rectangle & {
     selected?: boolean;
 };

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

@@ -95,11 +95,6 @@ export const updateActiveRectangleAnchor = (zoom, mousePointRef, currentCoordina
         rectangleAnchorRef.current = null;
     }
 };
-export const createCoordinate = (coordinate, setCoordinates, coordinatesRef, currentCoordinateRef) => {
-    coordinatesRef.current.push(coordinate);
-    setCoordinates(coordinatesRef.current);
-    currentCoordinateRef.current = null;
-};
 export const clampBoundingBoxToImage = (x, y, width, height, dw, dh) => {
     let correctedX = x;
     let correctedY = y;

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

@@ -2,6 +2,7 @@ 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>;
@@ -16,6 +17,7 @@ export type DrawEventsParams = {
     rectangleAnchorRef: RefObject<RectangleAnchor | null>;
     maskImageRef: RefObject<HTMLImageElement | null>;
     drawLabelRef: RefObject<Label | undefined>;
+    historyRef: RefObject<CoordinateHistory | null>;
 };
 export declare const useDrawEvents: (params: DrawEventsParams & {
     selectedDrawMode?: DrawMode;

package/dist/components/AnnotationLayer/index.js

@@ -6,14 +6,14 @@ import { cloneDeep } from '../../utils/common/cloneDeep';
 import { MouseAction } from '../../utils/mouseActions';
 import { useDrawEvents } from './_hooks/drawEvents/useDrawEvents';
 import { useHotkeys } from './_hooks/useHotkeys';
-import { INIT_POINT, useMouse } from './_hooks/useMouse';
 import { useCanvasDraw } from './_hooks/useCanvasDraw';
 import { drawCanvas, resolutionCanvas } from '../../utils/canvas';
-const initCanvasState = { moveX: 0, moveY: 0, zoomX: 0, zoomY: 0, zoom: 0, dx: 0, dy: 0, dw: 0, dh: 0 };
+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(initCanvasState);
+    const canvasStateRef = useRef(INIT_CANVAS_STATE);
     const animationFrameId = useRef(0);
     const coordinatesRef = useRef([]);
     const currentCoordinateRef = useRef(null);
@@ -48,17 +48,9 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
         rectangleAnchorRef,
         maskImageRef,
         drawLabelRef,
-        selectedDrawMode,
-        editable,
-    });
-    const { handleMouseDown, handleMouseUp, handleMouseLeave } = useMouse({
-        canvasRef,
-        mouseActionRef,
-        setMousePoint,
-        coordinatesRef,
-        setCoordinates,
         historyRef,
         selectedDrawMode,
+        editable,
     });
     useHotkeys({
         onDelete: () => {
@@ -125,6 +117,6 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
             cancelAnimationFrame(animationFrameId.current);
         };
     }, [canvasState, coordinates, selectedDrawMode, editable]);
-    return (_jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, style: { position: 'absolute', height: '100%', width: '100%' } }));
+    return (_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', height: '100%', width: '100%' } }));
 };
 export default AnnotationLayer;

package/package.json

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

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

@@ -1,21 +0,0 @@
-import { MouseEvent, RefObject } from 'react';
-import { Coordinate, Point } from '../../../types';
-import { MouseAction } from '../../../utils/mouseActions';
-import { CoordinateHistory } from '../../AnnotationCanvas/_utils/createHistory';
-import { DrawMode } from '../../../enum/common';
-export declare const INIT_POINT: Point;
-type UseMouseParams = {
-    canvasRef: RefObject<HTMLCanvasElement | null>;
-    mouseActionRef: RefObject<MouseAction | null>;
-    setMousePoint: (point: Point) => void;
-    coordinatesRef?: RefObject<Coordinate[]>;
-    setCoordinates?: (coordinates: Coordinate[]) => void;
-    historyRef: RefObject<CoordinateHistory | null>;
-    selectedDrawMode?: DrawMode;
-};
-export declare function useMouse({ canvasRef, mouseActionRef, setMousePoint, coordinatesRef, setCoordinates, historyRef, selectedDrawMode, }: UseMouseParams): {
-    handleMouseDown: (event: MouseEvent) => void;
-    handleMouseUp: (event: MouseEvent) => void;
-    handleMouseLeave: (_event: MouseEvent) => void;
-};
-export {};

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

@@ -1,40 +0,0 @@
-import { useCallback } from 'react';
-import { isMouseClickAction, mapButtonToMouseAction, MouseAction } from '../../../utils/mouseActions';
-import { DrawMode } from '../../../enum/common';
-import { cloneDeep } from '../../../utils/common/cloneDeep';
-import { deepEqual } from '../../../utils/common/deepEqual';
-export const INIT_POINT = { x: 0, y: 0, selected: false };
-export function useMouse({ canvasRef, mouseActionRef, setMousePoint, coordinatesRef, setCoordinates, historyRef, selectedDrawMode, }) {
-    const handleMouseDown = useCallback((event) => {
-        if (!canvasRef.current || !selectedDrawMode)
-            return;
-        const action = mapButtonToMouseAction(event.button);
-        if (action)
-            mouseActionRef.current = action;
-    }, [canvasRef, mouseActionRef]);
-    const handleMouseUp = useCallback((event) => {
-        if (canvasRef.current && isMouseClickAction(event.button, MouseAction.LEFT) && selectedDrawMode) {
-            if (selectedDrawMode === DrawMode.RECTANGLE && coordinatesRef?.current && setCoordinates) {
-                setCoordinates(coordinatesRef.current);
-                const history = historyRef.current?.getHistory();
-                const lastHistoryItem = history && history.length > 0 ? history[history.length - 1] : null;
-                const cloneCoordinates = cloneDeep(coordinatesRef.current);
-                if (!deepEqual(lastHistoryItem, cloneCoordinates))
-                    historyRef.current?.add(cloneCoordinates);
-            }
-        }
-        mouseActionRef.current = null;
-        event.preventDefault();
-    }, [canvasRef, coordinatesRef, setCoordinates, historyRef, selectedDrawMode, mouseActionRef]);
-    const handleMouseLeave = useCallback((_event) => {
-        if (!canvasRef.current || !selectedDrawMode)
-            return;
-        mouseActionRef.current = null;
-        setMousePoint(INIT_POINT);
-    }, [canvasRef, setMousePoint, mouseActionRef]);
-    return {
-        handleMouseDown,
-        handleMouseUp,
-        handleMouseLeave,
-    };
-}