@deepnoid/canvas 0.1.51 → 0.1.52

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

@@ -1,6 +1,6 @@
 import { Coordinate } from '../../../types';
 export type CoordinateHistory = {
-    getHistory: () => Coordinate[][] | undefined;
+    getHistory: () => Coordinate[][];
     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 = undefined;
+    let history = [];
     let historyIndex = -1;
     return {
         getHistory: () => history,
@@ -12,22 +12,18 @@ export const createHistory = () => {
             historyIndex = 0;
         },
         add: (coordinates) => {
-            if (history === undefined) {
-                history = [];
-                historyIndex = -1;
-            }
             history.splice(historyIndex + 1);
             history.push(coordinates);
             historyIndex++;
         },
         undo: () => {
-            if (history === undefined || historyIndex <= 0)
+            if (historyIndex <= 0)
                 return undefined;
             historyIndex--;
             return history[historyIndex];
         },
         redo: () => {
-            if (history === undefined || historyIndex > history.length)
+            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,9 +73,10 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
     }, [image, resetOnImageChange]);
     useEffect(() => {
         if (imageRef.current.src) {
-            const history = historyRef.current.getHistory();
-            if (!history)
+            if (!historyRef.current) {
+                historyRef.current = createHistory();
                 historyRef.current.init(coordinates);
+            }
             updateDisplayCoordinates(coordinates);
         }
     }, [coordinates, imageRef.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.51",
+  "version": "0.1.52",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",