@deepnoid/canvas 0.1.17 → 0.1.19

package/dist/components/AnnotatedCanvas.js

@@ -1,11 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import Canvas from './Canvas';
 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 [displayCoordinates, setDisplayCoordinates] = useState();
     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,
@@ -13,13 +14,23 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
         panZoomable,
         resetOnImageChange,
     });
+    useEffect(() => {
+        if (loadedImage && !isLoading) {
+            setDisplayCoordinates(coordinates);
+        }
+    }, [loadedImage, isLoading, coordinates]);
+    useEffect(() => {
+        if (isLoading) {
+            setDisplayCoordinates(undefined);
+        }
+    }, [isLoading]);
     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: {
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsx("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 } }), 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)}%` }))] }) }));
+            }, children: loadedImage && !isLoading && (_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 && _jsx(ZoomButton, { onClick: resetView, children: `${Math.round(zoom * 100)}%` })] })) }) }));
 };
 export default AnnotatedCanvas;

package/dist/hooks/usePanZoom.js

@@ -1,6 +1,6 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
-import { drawCanvas, getMousePointTransform, resolutionCanvas } from '../utils/graphic';
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { resolutionCanvas, drawCanvas, getMousePointTransform } from '../utils/graphic';
 import { MouseStatus } from '../enum/common';
 export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImageChange = true }) => {
     const [moveX, setMoveX] = useState(0);
@@ -17,55 +17,69 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
     const ZOOM_UNIT = 0.9;
     const MAX_ZOOM = 4;
     const MIN_ZOOM = 0.5;
-    const initCanvas = useCallback(() => {
-        if (!canvasRef.current || !image)
-            return;
+    const prevImageRef = useRef(null);
+    const initCanvas = useCallback((img) => {
         const canvasEl = canvasRef.current;
-        const { width: canvasWidth, height: canvasHeight } = canvasEl.getBoundingClientRect();
-        if (canvasWidth === 0 || canvasHeight === 0)
+        if (!canvasEl)
             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 canvasWidth = canvasEl.clientWidth;
+        const canvasHeight = canvasEl.clientHeight;
+        let scale = 1;
+        if (img.width > canvasWidth || img.height > canvasHeight) {
+            scale = Math.min(canvasWidth / img.width, canvasHeight / img.height);
+        }
+        const dw = img.width * scale;
+        const dh = img.height * scale;
         const dx = (canvasWidth - dw) / 2;
         const dy = (canvasHeight - dh) / 2;
         setDx(dx);
         setDy(dy);
         setDw(dw);
         setDh(dh);
-        setMoveX(0);
-        setMoveY(0);
-        setZoom(initialZoom);
+        setZoom(scale);
         setZoomX(0);
         setZoomY(0);
-    }, [canvasRef, image]);
+        setMoveX(0);
+        setMoveY(0);
+    }, [canvasRef]);
     useEffect(() => {
-        if (resetOnImageChange) {
-            initCanvas();
+        const canvasEl = canvasRef.current;
+        if (!canvasEl || !image)
+            return;
+        const canvasWidth = canvasEl.clientWidth;
+        const canvasHeight = canvasEl.clientHeight;
+        const isTooBig = image.width > canvasWidth || image.height > canvasHeight;
+        const isFirstLoad = !prevImageRef.current;
+        if (resetOnImageChange || isFirstLoad) {
+            initCanvas(image);
+        }
+        else if (isTooBig) {
+            const scale = Math.min(canvasWidth / image.width, canvasHeight / image.height);
+            const dw = image.width * scale;
+            const dh = image.height * scale;
+            const dx = (canvasWidth - dw) / 2;
+            const dy = (canvasHeight - dh) / 2;
+            setDw(dw);
+            setDh(dh);
+            setDx(dx);
+            setDy(dy);
         }
-    }, [image, initCanvas, resetOnImageChange]);
+        prevImageRef.current = image;
+    }, [image, resetOnImageChange, initCanvas, canvasRef]);
     const handleWheel = useCallback((e) => {
         if (!panZoomable || !canvasRef.current || !image)
             return;
+        const rect = canvasRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
         let nextZoom = e.deltaY < 0 ? zoom / ZOOM_UNIT : zoom * ZOOM_UNIT;
-        if (nextZoom < MIN_ZOOM)
-            nextZoom = MIN_ZOOM;
-        if (nextZoom > MAX_ZOOM)
-            nextZoom = MAX_ZOOM;
+        nextZoom = Math.min(Math.max(nextZoom, MIN_ZOOM), MAX_ZOOM);
         if ((zoom <= MIN_ZOOM && e.deltaY > 0) || (zoom >= MAX_ZOOM && e.deltaY < 0))
             return;
-        const canvasEl = resolutionCanvas(canvasRef.current);
-        const zoomPoint = {
-            x: -dx - moveX + canvasEl.width / 2,
-            y: -dy - moveY + canvasEl.height / 2,
-        };
-        setZoomX(zoomPoint.x);
-        setZoomY(zoomPoint.y);
+        setZoomX(mouseX);
+        setZoomY(mouseY);
         setZoom(nextZoom);
-    }, [canvasRef, panZoomable, zoom, dx, dy, moveX, moveY, image]);
+    }, [canvasRef, panZoomable, zoom, image]);
     const handleMouseDown = useCallback((e) => {
         if (!panZoomable || !canvasRef.current)
             return;
@@ -103,13 +117,14 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
         setStatus(MouseStatus.STOP);
     }, [panZoomable]);
     useEffect(() => {
-        if (!canvasRef.current || !image)
+        if (!canvasRef.current || !image || (dx === 0 && dy === 0 && zoom === 1))
             return;
         drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(canvasRef.current), image, true);
     }, [canvasRef, image, moveX, moveY, zoomX, zoomY, zoom, dx, dy]);
     const resetView = useCallback(() => {
-        initCanvas();
-    }, [initCanvas]);
+        if (image)
+            initCanvas(image);
+    }, [image, initCanvas]);
     return {
         moveX,
         moveY,

package/package.json

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