@deepnoid/canvas 0.1.15 → 0.1.17

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/dist/hooks/usePanZoom.js

@@ -1,6 +1,6 @@
 'use client';
 import { useCallback, useEffect, useState } from 'react';
-import { canvasCenterPoint, drawCanvas, getMousePointTransform, resolutionCanvas } from '../utils/graphic';
+import { drawCanvas, getMousePointTransform, resolutionCanvas } from '../utils/graphic';
 import { MouseStatus } from '../enum/common';
 export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImageChange = true }) => {
     const [moveX, setMoveX] = useState(0);
@@ -20,15 +20,25 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
     const initCanvas = useCallback(() => {
         if (!canvasRef.current || !image)
             return;
-        const canvasEl = resolutionCanvas(canvasRef.current);
-        const center = canvasCenterPoint(canvasEl, image);
-        setDx(center.x);
-        setDy(center.y);
-        setDw(image.width);
-        setDh(image.height);
+        const canvasEl = canvasRef.current;
+        const { width: canvasWidth, height: canvasHeight } = canvasEl.getBoundingClientRect();
+        if (canvasWidth === 0 || canvasHeight === 0)
+            return;
+        const scaleX = canvasWidth / image.width;
+        const scaleY = canvasHeight / image.height;
+        const scale = Math.min(scaleX, scaleY);
+        const initialZoom = Math.min(1, scale);
+        const dw = image.width * initialZoom;
+        const dh = image.height * initialZoom;
+        const dx = (canvasWidth - dw) / 2;
+        const dy = (canvasHeight - dh) / 2;
+        setDx(dx);
+        setDy(dy);
+        setDw(dw);
+        setDh(dh);
         setMoveX(0);
         setMoveY(0);
-        setZoom(1);
+        setZoom(initialZoom);
         setZoomX(0);
         setZoomY(0);
     }, [canvasRef, image]);

package/package.json

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