@deepnoid/canvas 0.1.41 → 0.1.43

package/dist/components/AnnotationCanvas/index.js

@@ -26,6 +26,12 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
         }, 150),
     });
     const { canvasState, initZoomAndPosition, initCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, } = useImagePanZoom({ canvasRef, imageRef, panZoomEnabled, zoom, editable });
+    const updateDisplayCoordinates = (coordinates) => {
+        setDisplayCoordinates(coordinates?.map((coordinate) => ({
+            ...coordinate,
+            type: coordinate.type ?? DrawMode.RECTANGLE,
+        })) || []);
+    };
     const createEmptyImage = () => {
         const img = new Image();
         img.width = img.height = 0;
@@ -54,19 +60,21 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
                 preserveZoomAndPosition(canvasRef.current, tempImage, canvasState.zoom / (canvasState.initZoom || 1));
             }
             imageRef.current = tempImage;
-            setDisplayCoordinates(coordinates?.map((coordinate) => {
-                return {
-                    ...coordinate,
-                    type: coordinate.type ? coordinate.type : DrawMode.RECTANGLE,
-                };
-            }) || []);
+            updateDisplayCoordinates(coordinates);
         };
         tempImage.onerror = () => !cancelled && resetCanvas(`Failed to load image: ${image}`);
         tempImage.src = image;
         return () => {
             cancelled = true;
+            tempImage.onload = null;
+            tempImage.onerror = null;
         };
     }, [image, resetOnImageChange]);
+    useEffect(() => {
+        if (imageRef.current.src && imageRef.current.complete) {
+            updateDisplayCoordinates(coordinates);
+        }
+    }, [coordinates]);
     useEffect(() => {
         if (!canvasRef.current)
             return;

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

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

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

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

@@ -28,7 +28,8 @@ export const useDrawEvents = (params) => {
         canvasRef.current.addEventListener('mouseup', handlers.up);
         canvasRef.current.addEventListener('mouseleave', handlers.leave);
         setMousePoint({ x: 0, y: 0, selected: false });
-        setCoordinates(initSelector(coordinatesRef.current));
+        if (coordinatesRef.current.length > 0)
+            setCoordinates(initSelector(coordinatesRef.current));
         currentCoordinateRef.current = null;
         startMousePointRef.current = null;
         maskImageRef.current = new Image();

package/dist/components/AnnotationLayer/index.js

@@ -2,7 +2,6 @@ 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 { cloneDeepWith } from '../../utils/common/cloneDeepWith';
 import { cloneDeep } from '../../utils/common/cloneDeep';
 import { MouseAction } from '../../utils/mouseActions';
 import { useDrawEvents } from './_hooks/drawEvents/useDrawEvents';
@@ -24,7 +23,11 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
     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);
@@ -45,7 +48,7 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
         rectangleAnchorRef,
         historyRef,
         maskImageRef,
-        drawLabel,
+        drawLabelRef,
         selectedDrawMode,
         editable,
     });
@@ -75,9 +78,7 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
     });
     useEffect(() => {
         if (!isEqualWith(coordinates, coordinatesRef.current, ignoreImageKey)) {
-            coordinatesRef.current = cloneDeepWith(coordinates, () => {
-                return undefined;
-            });
+            coordinatesRef.current = cloneDeep(coordinates) || [];
         }
     }, [coordinates]);
     useEffect(() => {

package/package.json

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

package/dist/utils/common/cloneDeepWith.d.ts

@@ -1 +0,0 @@
-export declare function cloneDeepWith<T>(obj: T, cloneValue: (value: unknown, key: PropertyKey | undefined, parent: unknown, stack: Map<unknown, unknown>) => unknown): T;

package/dist/utils/common/cloneDeepWith.js

@@ -1,34 +0,0 @@
-export function cloneDeepWith(obj, cloneValue) {
-    const stack = new Map();
-    const baseClone = (value, key, parent) => {
-        const customResult = cloneValue(value, key, parent, stack);
-        if (customResult !== undefined) {
-            return customResult;
-        }
-        if (value === null || typeof value !== 'object') {
-            return value;
-        }
-        if (stack.has(value)) {
-            return stack.get(value);
-        }
-        if (value instanceof Date) {
-            return new Date(value.getTime());
-        }
-        if (Array.isArray(value)) {
-            const arr = [];
-            stack.set(value, arr);
-            value.forEach((item, i) => {
-                arr[i] = baseClone(item, i, value);
-            });
-            return arr;
-        }
-        const result = {};
-        stack.set(value, result);
-        Object.keys(value).forEach((k) => {
-            const v = value[k];
-            result[k] = baseClone(v, k, value);
-        });
-        return result;
-    };
-    return baseClone(obj, undefined, undefined);
-}