@deepnoid/canvas 0.1.50 → 0.1.52

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

@@ -5,7 +5,7 @@ export type CoordinateHistory = {
     setHistoryIndex: (index: number) => void;
     init: (coordinates?: Coordinate[]) => void;
     add: (coordinates: Coordinate[]) => void;
-    undo: () => Coordinate[];
+    undo: () => Coordinate[] | undefined;
     redo: () => Coordinate[] | undefined;
 };
 export declare const createHistory: () => CoordinateHistory;

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

@@ -17,16 +17,16 @@ export const createHistory = () => {
             historyIndex++;
         },
         undo: () => {
-            if (historyIndex > -1)
-                historyIndex--;
-            return history[historyIndex] || [];
+            if (historyIndex <= 0)
+                return undefined;
+            historyIndex--;
+            return history[historyIndex];
         },
         redo: () => {
-            if (historyIndex < history.length - 1) {
-                historyIndex++;
-                return history[historyIndex];
-            }
-            return undefined;
+            if (historyIndex > history.length)
+                return undefined;
+            historyIndex++;
+            return history[historyIndex];
         },
     };
 };

package/dist/components/AnnotationCanvas/index.js

@@ -13,7 +13,7 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
     const { onImageLoadSuccess, onImageLoadError } = events;
     const canvasRef = useRef(null);
     const imageRef = useRef(new Image());
-    const historyRef = useRef(createHistory());
+    const historyRef = useRef(null);
     const [displayCoordinates, setDisplayCoordinates] = useState();
     useResizeObserver({
         ref: canvasRef,
@@ -64,6 +64,7 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
         };
         tempImage.onerror = () => !cancelled && resetCanvas(`Failed to load image: ${image}`);
         tempImage.src = image;
+        historyRef.current = null;
         return () => {
             cancelled = true;
             tempImage.onload = null;
@@ -72,6 +73,10 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
     }, [image, resetOnImageChange]);
     useEffect(() => {
         if (imageRef.current.src) {
+            if (!historyRef.current) {
+                historyRef.current = createHistory();
+                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);

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

@@ -1,6 +1,5 @@
 import { RefObject } from 'react';
 import { Point, Coordinate, CanvasState, Label } from '../../../../types';
-import { CoordinateHistory } from '../../../AnnotationCanvas/_utils/createHistory';
 import { DrawMode, RectangleAnchor } from '../../../../enum/common';
 import { MouseAction } from '../../../../utils/mouseActions';
 export type DrawEventsParams = {
@@ -15,7 +14,6 @@ export type DrawEventsParams = {
     coordinatesRef: RefObject<Coordinate[]>;
     setCoordinates: (coordinates: Coordinate[]) => void;
     rectangleAnchorRef: RefObject<RectangleAnchor | null>;
-    historyRef: RefObject<CoordinateHistory>;
     maskImageRef: RefObject<HTMLImageElement | null>;
     drawLabelRef: RefObject<Label | undefined>;
 };

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

@@ -10,7 +10,7 @@ type UseMouseParams = {
     setMousePoint: (point: Point) => void;
     coordinatesRef?: RefObject<Coordinate[]>;
     setCoordinates?: (coordinates: Coordinate[]) => void;
-    historyRef: RefObject<CoordinateHistory>;
+    historyRef: RefObject<CoordinateHistory | null>;
     selectedDrawMode?: DrawMode;
 };
 export declare function useMouse({ canvasRef, mouseActionRef, setMousePoint, coordinatesRef, setCoordinates, historyRef, selectedDrawMode, }: UseMouseParams): {

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

@@ -15,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(cloneDeep(coordinatesRef.current));
+                historyRef.current?.add(cloneDeep(coordinatesRef.current));
             }
         }
         mouseActionRef.current = null;

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

@@ -5,7 +5,7 @@ type Props = {
     canvasState: CanvasState;
     coordinates: Coordinate[] | undefined;
     setCoordinates?: Dispatch<SetStateAction<Coordinate[] | undefined>>;
-    historyRef: RefObject<CoordinateHistory>;
+    historyRef: RefObject<CoordinateHistory | null>;
     drawing: AnnotationCanvasDrawing;
     enableHotkeys?: boolean;
     editable: boolean;

package/dist/components/AnnotationLayer/index.js

@@ -46,7 +46,6 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
         coordinatesRef,
         setCoordinates,
         rectangleAnchorRef,
-        historyRef,
         maskImageRef,
         drawLabelRef,
         selectedDrawMode,
@@ -65,11 +64,11 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
         onDelete: () => {
             coordinatesRef.current = coordinatesRef.current.filter((coordinate) => !coordinate.selected);
             setCoordinates(coordinatesRef.current);
-            historyRef.current.add(cloneDeep(coordinatesRef.current));
+            historyRef.current?.add(cloneDeep(coordinatesRef.current));
         },
         toggleSelectionOnly: () => setShowSelectedOnly((prev) => !prev),
         onUndoRedo: (isRedo) => {
-            const result = isRedo ? historyRef.current.redo() : historyRef.current.undo();
+            const result = isRedo ? historyRef.current?.redo() : historyRef.current?.undo();
             if (result)
                 setCoordinates(result);
             const coordinate = coordinatesRef.current.find((coordinate) => coordinate.selected);

package/package.json

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