@deepnoid/canvas 0.1.16 → 0.1.17

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.16",
+  "version": "0.1.17",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",