@deepnoid/canvas 0.1.33 → 0.1.35

package/dist/components/AnnotatedCanvas.js

@@ -5,57 +5,60 @@ import Canvas from './Canvas';
 import { usePanZoom } from '../hooks/usePanZoom';
 import useResizeObserver from '../hooks/useResizeObserver';
 import { drawCanvas, resolutionCanvas } from '../utils/graphic';
+import { useDebounce } from '../hooks/useDebounce';
 const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton, resetOnImageChange = true, editable = false, timeout = 10000, onImageLoadSuccess, onImageLoadError, }) => {
     const canvasRef = useRef(null);
     const imageRef = useRef(new Image());
-    const { width, height } = useResizeObserver({ ref: canvasRef });
+    const debouncedHandleResize = useDebounce((size) => {
+        if (image && size.width && size.height && canvasRef.current && imageRef.current.src) {
+            console.log('> Debounced resize - canvasRef.current:', canvasRef.current);
+            const canvas = resolutionCanvas(canvasRef.current);
+            if (canvas)
+                init(canvas, imageRef.current);
+        }
+    }, 150);
+    useResizeObserver({ ref: canvasRef, onResize: debouncedHandleResize });
     const [displayCoordinates, setDisplayCoordinates] = useState();
     const { canvasState, init, initCanvas, clearCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, imageOnloadCount, setImageOnloadCount, } = usePanZoom({ canvasRef, imageRef, panZoomable });
     useEffect(() => {
-        if (!image || image.trim() === '') {
+        const createEmptyImage = () => {
+            const img = new Image();
+            img.width = img.height = 0;
+            return img;
+        };
+        const resetCanvas = (errorMsg) => {
             clearCanvas();
             setDisplayCoordinates([]);
-            return;
-        }
-        const tempImage = new Image();
+            imageRef.current = createEmptyImage();
+            if (errorMsg)
+                onImageLoadError?.(new Error(errorMsg));
+        };
+        if (!image?.trim())
+            return void resetCanvas();
         let cancelled = false;
-        tempImage.src = image;
+        const tempImage = new Image();
         tempImage.onload = () => {
-            if (cancelled)
+            if (cancelled || !canvasRef.current)
                 return;
             onImageLoadSuccess?.();
-            const canvas = resolutionCanvas(canvasRef.current);
-            if (!canvas)
-                return;
             if (resetOnImageChange) {
-                init(canvas, tempImage);
+                const canvas = resolutionCanvas(canvasRef.current);
+                if (canvas)
+                    init(canvas, tempImage);
             }
             else {
-                preserveZoomAndPosition(canvas, tempImage, canvasState.zoom / (canvasState.initZoom || 1));
+                preserveZoomAndPosition(canvasRef.current, tempImage, canvasState.zoom / (canvasState.initZoom || 1));
             }
             imageRef.current = tempImage;
-            setImageOnloadCount((prev) => prev + 1);
+            setImageOnloadCount((c) => c + 1);
             setDisplayCoordinates(coordinates);
         };
-        tempImage.onerror = () => {
-            if (cancelled)
-                return;
-            const err = new Error(`Failed to load image: ${image}`);
-            onImageLoadError?.(err);
-            clearCanvas();
-            setDisplayCoordinates([]);
-        };
+        tempImage.onerror = () => !cancelled && resetCanvas(`Failed to load image: ${image}`);
+        tempImage.src = image;
         return () => {
             cancelled = true;
         };
     }, [image, resetOnImageChange]);
-    useEffect(() => {
-        if (image && width && height) {
-            const canvas = resolutionCanvas(canvasRef.current);
-            if (canvas)
-                init(canvas, imageRef.current);
-        }
-    }, [width, height]);
     useEffect(() => {
         if (!canvasRef.current)
             return;

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;

package/dist/hooks/useDebounce.js

@@ -0,0 +1,13 @@
+import { useCallback, useRef } from 'react';
+export function useDebounce(func, delay) {
+    const timeoutRef = useRef(null);
+    return useCallback((...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            func(...args);
+            timeoutRef.current = null;
+        }, delay);
+    }, [func, delay]);
+}

package/package.json

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