@deepnoid/canvas 0.1.18 → 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

@@ -69,19 +69,17 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
     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;
         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;
@@ -119,7 +117,7 @@ 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]);

package/package.json

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