@deepnoid/canvas 0.1.17 → 0.1.18

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,44 +17,60 @@ 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;
         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);
@@ -108,8 +124,9 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
         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.18",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",