@deepnoid/canvas 0.1.26 → 0.1.28

package/dist/components/AnnotatedCanvas.js

@@ -6,8 +6,9 @@ import { useImageLoader } from '../hooks/useImageLoader';
 import { usePanZoom } from '../hooks/usePanZoom';
 const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton, resetOnImageChange = true, editable = false, onImageLoadError, onImageLoadSuccess, }) => {
     const canvasRef = useRef(null);
+    const imageRef = useRef(new Image());
     const [displayCoordinates, setDisplayCoordinates] = useState();
-    const { image: loadedImage, isLoading, error, imageRef, } = useImageLoader(image, 10000, onImageLoadSuccess, onImageLoadError);
+    const { image: loadedImage, isLoading, error, } = useImageLoader(image, imageRef, 10000, onImageLoadSuccess, onImageLoadError);
     const { moveX, moveY, zoom, initZoom, zoomX, zoomY, dx, dy, dw, dh, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, initCanvas, } = usePanZoom({
         canvasRef,
         imageRef,
@@ -17,7 +18,7 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
     const loaded = loadedImage && !isLoading;
     useEffect(() => {
         if (loaded) {
-            setDisplayCoordinates(loaded ? coordinates : undefined);
+            setDisplayCoordinates(coordinates);
         }
     }, [loaded, coordinates]);
     if (!image || error)
@@ -26,6 +27,6 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
                 flex: 1,
                 position: 'relative',
                 cursor: panZoomable ? 'grab' : 'default',
-            }, children: loaded && (_jsxs(_Fragment, { children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), _jsx(Canvas, { moveX: moveX, moveY: moveY, zoomX: zoomX, zoomY: zoomY, zoom: zoom, dx: dx, dy: dy, dw: dw, dh: dh, coordinates: displayCoordinates, editable: editable }), ZoomButton && initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` }))] })) }) }));
+            }, children: loaded && (_jsxs(_Fragment, { children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), _jsx(Canvas, { moveX: moveX, moveY: moveY, zoomX: zoomX, zoomY: zoomY, zoom: zoom, dx: dx, dy: dy, dw: dw, dh: dh, coordinates: displayCoordinates, editable: editable }), ZoomButton && initZoom > 0 && zoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` }))] })) }) }));
 };
 export default AnnotatedCanvas;

package/dist/hooks/useImageLoader.d.ts

@@ -1,6 +1,6 @@
-export declare const useImageLoader: (src: string, timeout?: number, onLoadSuccess?: () => void, onLoadError?: (error: Error) => void) => {
+import { RefObject } from 'react';
+export declare const useImageLoader: (src: string, imageRef: RefObject<HTMLImageElement>, timeout?: number, onLoadSuccess?: () => void, onLoadError?: (error: Error) => void) => {
     image: HTMLImageElement | null;
     isLoading: boolean;
     error: string | null;
-    imageRef: import("react").RefObject<HTMLImageElement>;
 };

package/dist/hooks/useImageLoader.js

@@ -1,10 +1,9 @@
 'use client';
-import { useEffect, useRef, useState } from 'react';
-export const useImageLoader = (src, timeout = 10000, onLoadSuccess, onLoadError) => {
+import { useEffect, useState } from 'react';
+export const useImageLoader = (src, imageRef, timeout = 10000, onLoadSuccess, onLoadError) => {
     const [image, setImage] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
-    const imageRef = useRef(new Image());
     useEffect(() => {
         if (!src || src.trim() === '') {
             setImage(null);
@@ -12,46 +11,61 @@ export const useImageLoader = (src, timeout = 10000, onLoadSuccess, onLoadError)
             setError(null);
             return;
         }
+        const controller = new AbortController();
+        const { signal } = controller;
         setIsLoading(true);
         setError(null);
         setImage(null);
         const img = new Image();
         img.crossOrigin = 'anonymous';
-        const timer = setTimeout(() => {
-            const e = new Error(`Image load timeout: ${src}`);
-            setError(e.message);
-            setImage(null);
-            onLoadError?.(e);
-            setIsLoading(false);
-        }, timeout);
-        img.onload = () => {
-            clearTimeout(timer);
-            if (img.naturalWidth === 0 || img.naturalHeight === 0) {
-                const e = new Error(`Invalid image dimensions: ${src}`);
+        img.src = src;
+        const timeoutId = setTimeout(() => {
+            if (!signal.aborted) {
+                controller.abort();
+                const e = new Error(`Image load timeout: ${src}`);
                 setError(e.message);
-                setImage(null);
+                setIsLoading(false);
                 onLoadError?.(e);
+            }
+        }, timeout);
+        const load = async () => {
+            try {
+                await img.decode();
+                if (signal.aborted)
+                    return;
+                if (img.naturalWidth === 0 || img.naturalHeight === 0) {
+                    throw new Error(`Invalid image dimensions: ${src}`);
+                }
+                try {
+                    imageRef.current = img;
+                }
+                catch { }
+                setImage(img);
                 setIsLoading(false);
-                return;
+                setError(null);
+                onLoadSuccess?.();
+            }
+            catch (err) {
+                if (signal.aborted)
+                    return;
+                const e = new Error(`Failed to load image: ${src}`);
+                setError(e.message);
+                setIsLoading(false);
+                onLoadError?.(err instanceof Error ? err : e);
+            }
+            finally {
+                clearTimeout(timeoutId);
             }
-            imageRef.current = img;
-            setImage(img);
-            setError(null);
-            onLoadSuccess?.();
-            setIsLoading(false);
         };
-        img.onerror = () => {
-            clearTimeout(timer);
-            const e = new Error(`Failed to load image: ${src}`);
-            setError(e.message);
-            setImage(null);
-            onLoadError?.(e);
-            setIsLoading(false);
+        load();
+        return () => {
+            controller.abort();
+            clearTimeout(timeoutId);
+            try {
+                img.src = '';
+            }
+            catch { }
         };
-        setTimeout(() => {
-            img.src = src;
-        }, 0);
-        return () => clearTimeout(timer);
-    }, [src, timeout, onLoadError, onLoadSuccess]);
-    return { image, isLoading, error, imageRef };
+    }, [src, timeout, onLoadError, onLoadSuccess, imageRef]);
+    return { image, isLoading, error };
 };

package/dist/hooks/usePanZoom.js

@@ -8,7 +8,6 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
     const MAX_ZOOM = 4;
     const MIN_ZOOM = 0.5;
     const { width, height } = useResizeObserver({ ref: canvasRef });
-    console.log('> width', width, ', height :', height);
     const [initZoom, setInitZoom] = useState(0);
     const [zoom, setZoom] = useState(0);
     const [zoomX, setZoomX] = useState(0);
@@ -55,9 +54,7 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
         setZoomX(zoomPoint.x);
         setZoomY(zoomPoint.y);
     };
-    console.log('. imageOnloadCount ', imageOnloadCount);
     const initCanvas = () => {
-        console.log('> initCanvas !!!!!!!!! imageRef?.current : ', imageRef?.current);
         if (imageRef?.current) {
             const canvasEl = resolutionCanvas(canvasRef.current);
             if (canvasEl)
@@ -132,63 +129,25 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
         redraw();
     }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, imageOnloadCount, canvasRef, imageRef]);
     useEffect(() => {
-        if (!imageRef?.current || !canvasRef?.current)
+        if (!imageRef?.current || !canvasRef?.current || !width || !height)
             return;
         const canvasEl = resolutionCanvas(canvasRef.current);
         if (!canvasEl)
             return;
+        const isFirstLoad = imageOnloadCount === 0;
+        if (isFirstLoad) {
+            init(canvasEl, imageRef.current);
+            setImageOnloadCount((prev) => prev + 1);
+            return;
+        }
         if (resetOnImageChange) {
-            if (width && height) {
-                console.log('> init (resetOnImageChange true)');
-                init(canvasEl, imageRef.current);
-                setImageOnloadCount((prev) => prev + 1);
-            }
+            init(canvasEl, imageRef.current);
         }
         else {
             drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvasEl, imageRef.current, true);
         }
+        setImageOnloadCount((prev) => prev + 1);
     }, [imageRef?.current, width, height, resetOnImageChange]);
-    useEffect(() => {
-        if (!imageRef?.current || !canvasRef?.current)
-            return;
-        const canvasEl = resolutionCanvas(canvasRef.current);
-        if (!canvasEl)
-            return;
-        if (!resetOnImageChange) {
-            if (width && height) {
-                console.log('> init (resetOnImageChange false, width/height ready)');
-                init(canvasEl, imageRef.current);
-                setImageOnloadCount((prev) => prev + 1);
-            }
-            else {
-                drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvasEl, imageRef.current, true);
-            }
-        }
-    }, [width, height, resetOnImageChange]);
-    // useEffect(() => {
-    //   if (!imageRef?.current || !canvasRef?.current || !width || !height) {
-    //     console.log(888888888888888888888);
-    //     return;
-    //   }
-    //   console.log(11111111111111111111111111111);
-    //   if (resetOnImageChange) {
-    //     const canvasEl = resolutionCanvas(canvasRef.current);
-    //     if (canvasEl) init(canvasEl, imageRef.current);
-    //   }
-    //   setImageOnloadCount((prev) => prev + 1);
-    // }, [imageRef?.current]);
-    // useEffect(() => {
-    //   if (!imageRef?.current || !canvasRef?.current || !width || !height) {
-    //     console.log(99999999999999999999999);
-    //     return;
-    //   }
-    //   const canvasEl = resolutionCanvas(canvasRef.current);
-    //   if (canvasEl && !resetOnImageChange) {
-    //     console.log(333333333333333333333333333333);
-    //     init(canvasEl, imageRef.current);
-    //   }
-    //   setImageOnloadCount((prev) => prev + 1);
-    // }, [width, height]);
     return {
         moveX,
         moveY,

package/package.json

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