@deepnoid/canvas 0.1.41 → 0.1.42

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/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';
@@ -75,9 +74,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.42",
   "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);
-}