@deepnoid/canvas 0.1.15 → 0.1.16

package/dist/components/AnnotatedCanvas.js

@@ -6,19 +6,20 @@ 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 { image: loadedImage, isLoading } = useImageLoader(image, 10000, onImageLoadSuccess, onImageLoadError);
+    const { image: loadedImage, isLoading, error } = useImageLoader(image, 10000, onImageLoadSuccess, onImageLoadError);
     const { moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, resetView, } = usePanZoom({
         canvasRef,
         image: loadedImage,
         panZoomable,
         resetOnImageChange,
     });
-    if (!loadedImage)
+    if (!image || image.trim() === '' || error) {
         return null;
+    }
     return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, style: {
                 flex: 1,
                 position: 'relative',
                 cursor: panZoomable ? 'grab' : 'default',
-            }, children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), !isLoading && (_jsx(Canvas, { moveX: moveX, moveY: moveY, zoomX: zoomX, zoomY: zoomY, zoom: zoom, dx: dx, dy: dy, dw: dw, dh: dh, coordinates: coordinates, editable: editable })), ZoomButton && !isLoading && _jsx(ZoomButton, { onClick: resetView, children: `${Math.round(zoom * 100)}%` })] }) }));
+            }, children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), loadedImage && !isLoading && (_jsx(Canvas, { moveX: moveX, moveY: moveY, zoomX: zoomX, zoomY: zoomY, zoom: zoom, dx: dx, dy: dy, dw: dw, dh: dh, coordinates: coordinates, editable: editable })), ZoomButton && loadedImage && !isLoading && (_jsx(ZoomButton, { onClick: resetView, children: `${Math.round(zoom * 100)}%` }))] }) }));
 };
 export default AnnotatedCanvas;

package/dist/hooks/useImageLoader.js

@@ -6,15 +6,21 @@ export const useImageLoader = (src, timeout = 10000, onLoadSuccess, onLoadError)
     const [error, setError] = useState(null);
     const imageRef = useRef(new Image());
     useEffect(() => {
-        if (!src)
+        if (!src || src.trim() === '') {
+            setImage(null);
+            setIsLoading(false);
+            setError(null);
             return;
+        }
         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);
@@ -23,12 +29,14 @@ export const useImageLoader = (src, timeout = 10000, onLoadSuccess, onLoadError)
             if (img.naturalWidth === 0 || img.naturalHeight === 0) {
                 const e = new Error(`Invalid image dimensions: ${src}`);
                 setError(e.message);
+                setImage(null);
                 onLoadError?.(e);
                 setIsLoading(false);
                 return;
             }
             imageRef.current = img;
             setImage(img);
+            setError(null);
             onLoadSuccess?.();
             setIsLoading(false);
         };
@@ -36,6 +44,7 @@ export const useImageLoader = (src, timeout = 10000, onLoadSuccess, onLoadError)
             clearTimeout(timer);
             const e = new Error(`Failed to load image: ${src}`);
             setError(e.message);
+            setImage(null);
             onLoadError?.(e);
             setIsLoading(false);
         };

package/package.json

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