@deepnoid/canvas 0.1.49 → 0.1.51

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

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

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

@@ -1,5 +1,5 @@
 export const createHistory = () => {
-    let history = [];
+    let history = undefined;
     let historyIndex = -1;
     return {
         getHistory: () => history,
@@ -12,23 +12,25 @@ export const createHistory = () => {
             historyIndex = 0;
         },
         add: (coordinates) => {
+            if (history === undefined) {
+                history = [];
+                historyIndex = -1;
+            }
             history.splice(historyIndex + 1);
             history.push(coordinates);
             historyIndex++;
         },
         undo: () => {
-            if (historyIndex > 0) {
-                historyIndex--;
-                return history[historyIndex];
-            }
-            return undefined;
+            if (history === undefined || historyIndex <= 0)
+                return undefined;
+            historyIndex--;
+            return history[historyIndex];
         },
         redo: () => {
-            if (historyIndex < history.length - 1) {
-                historyIndex++;
-                return history[historyIndex];
-            }
-            return undefined;
+            if (history === undefined || historyIndex > history.length)
+                return undefined;
+            historyIndex++;
+            return history[historyIndex];
         },
     };
 };

package/dist/components/AnnotationCanvas/index.js

@@ -72,6 +72,9 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
     }, [image, resetOnImageChange]);
     useEffect(() => {
         if (imageRef.current.src) {
+            const history = historyRef.current.getHistory();
+            if (!history)
+                historyRef.current.init(coordinates);
             updateDisplayCoordinates(coordinates);
         }
     }, [coordinates, imageRef.current]);

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, historyRef, drawLabelRef, }: 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 handleMouseLeaveRectangle: ({ canvasRef, canvasStateRef, setMousePoint, startMousePointRef, prevMousePointRef, mouseActionRef, rectangleAnchorRef, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;

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

@@ -36,7 +36,7 @@ export const handleMouseMoveRectangle = ({ canvasRef, canvasStateRef, mouseActio
     });
     event.preventDefault();
 };
-export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, historyRef, drawLabelRef, }) => (event) => {
+export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, drawLabelRef, }) => (event) => {
     if (!canvasRef.current || !isMouseClickAction(event.button, MouseAction.LEFT))
         return;
     const mousePoint = getCanvasMousePoint(event, canvasRef.current, canvasStateRef.current);
@@ -50,7 +50,7 @@ export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionR
             if (!currentCoordinateRef.current) {
                 const label = drawLabelRef.current;
                 const newCoordinate = { label, type: DrawMode.RECTANGLE, x, y, width, height, selected: false };
-                createCoordinate(newCoordinate, setCoordinates, coordinatesRef, historyRef, currentCoordinateRef);
+                createCoordinate(newCoordinate, setCoordinates, coordinatesRef, currentCoordinateRef);
             }
         }
         else {

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

@@ -1,6 +1,5 @@
 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;
@@ -10,7 +9,7 @@ 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[]>, historyRef: RefObject<CoordinateHistory>, currentCoordinateRef: RefObject<Coordinate | 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

@@ -1,5 +1,4 @@
 import { MouseAction } from '../../../../utils/mouseActions';
-import { cloneDeep } from '../../../../utils/common/cloneDeep';
 import { DrawMode, RectangleAnchor } from '../../../../enum/common';
 import { getMousePointTransform } from '../../../../utils/pointTransform';
 export const ACTIVE_POINT_SIZE = 10;
@@ -96,9 +95,8 @@ export const updateActiveRectangleAnchor = (zoom, mousePointRef, currentCoordina
         rectangleAnchorRef.current = null;
     }
 };
-export const createCoordinate = (coordinate, setCoordinates, coordinatesRef, historyRef, currentCoordinateRef) => {
+export const createCoordinate = (coordinate, setCoordinates, coordinatesRef, currentCoordinateRef) => {
     coordinatesRef.current.push(coordinate);
-    historyRef.current.add(cloneDeep(coordinatesRef.current));
     setCoordinates(coordinatesRef.current);
     currentCoordinateRef.current = null;
 };

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

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { isMouseClickAction, mapButtonToMouseAction, MouseAction } from '../../../utils/mouseActions';
 import { DrawMode } from '../../../enum/common';
+import { cloneDeep } from '../../../utils/common/cloneDeep';
 export const INIT_POINT = { x: 0, y: 0, selected: false };
 export function useMouse({ canvasRef, mouseActionRef, setMousePoint, coordinatesRef, setCoordinates, historyRef, selectedDrawMode, }) {
     const handleMouseDown = useCallback((event) => {
@@ -14,7 +15,7 @@ export function useMouse({ canvasRef, mouseActionRef, setMousePoint, coordinates
         if (canvasRef.current && isMouseClickAction(event.button, MouseAction.LEFT) && selectedDrawMode) {
             if (selectedDrawMode === DrawMode.RECTANGLE && coordinatesRef?.current && setCoordinates) {
                 setCoordinates(coordinatesRef.current);
-                historyRef.current.add(JSON.parse(JSON.stringify(coordinatesRef.current)));
+                historyRef.current.add(cloneDeep(coordinatesRef.current));
             }
         }
         mouseActionRef.current = null;

package/package.json

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