@deepnoid/canvas 0.1.19 → 0.1.20

package/dist/hooks/usePanZoom.js

@@ -14,10 +14,38 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
     const [dh, setDh] = useState(0);
     const [status, setStatus] = useState();
     const [startMousePoint, setStartMousePoint] = useState();
+    const animationFrameRef = useRef(null);
+    const currentTransformRef = useRef({
+        moveX: 0,
+        moveY: 0,
+        zoom: 1,
+        zoomX: 0,
+        zoomY: 0,
+        dx: 0,
+        dy: 0,
+    });
     const ZOOM_UNIT = 0.9;
     const MAX_ZOOM = 4;
     const MIN_ZOOM = 0.5;
     const prevImageRef = useRef(null);
+    const immediateRender = useCallback((moveX, moveY, zoomX, zoomY, zoom, dx, dy) => {
+        const canvasEl = canvasRef.current;
+        if (!canvasEl || !image)
+            return;
+        const resolvedCanvas = resolutionCanvas(canvasEl);
+        if (!resolvedCanvas)
+            return;
+        drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolvedCanvas, image, true);
+    }, [canvasRef, image]);
+    const scheduleRender = useCallback(() => {
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(() => {
+            const current = currentTransformRef.current;
+            immediateRender(current.moveX, current.moveY, current.zoomX, current.zoomY, current.zoom, current.dx, current.dy);
+        });
+    }, [immediateRender]);
     const initCanvas = useCallback((img) => {
         const canvasEl = canvasRef.current;
         if (!canvasEl)
@@ -41,6 +69,15 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
         setZoomY(0);
         setMoveX(0);
         setMoveY(0);
+        currentTransformRef.current = {
+            moveX: 0,
+            moveY: 0,
+            zoom: scale,
+            zoomX: 0,
+            zoomY: 0,
+            dx,
+            dy,
+        };
     }, [canvasRef]);
     useEffect(() => {
         const canvasEl = canvasRef.current;
@@ -63,23 +100,36 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
             setDh(dh);
             setDx(dx);
             setDy(dy);
+            currentTransformRef.current.dx = dx;
+            currentTransformRef.current.dy = dy;
         }
         prevImageRef.current = image;
     }, [image, resetOnImageChange, initCanvas, canvasRef]);
     const handleWheel = useCallback((e) => {
-        if (!panZoomable || !canvasRef.current || !image)
+        const canvasEl = canvasRef.current;
+        if (!panZoomable || !canvasRef.current || !canvasEl || !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;
+        const currentZoom = currentTransformRef.current.zoom;
+        let nextZoom = e.deltaY < 0 ? currentZoom / ZOOM_UNIT : currentZoom * 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))
+        if ((currentZoom <= MIN_ZOOM && e.deltaY > 0) || (currentZoom >= MAX_ZOOM && e.deltaY < 0))
+            return;
+        const resolvedCanvas = resolutionCanvas(canvasEl);
+        if (!resolvedCanvas)
             return;
-        setZoomX(mouseX);
-        setZoomY(mouseY);
+        const resolution_ratio_x = resolvedCanvas.width / canvasEl.clientWidth;
+        const resolution_ratio_y = resolvedCanvas.height / canvasEl.clientHeight;
+        const current = currentTransformRef.current;
+        const centerX = resolvedCanvas.width / 2 - current.dx * resolution_ratio_x - current.moveX * resolution_ratio_x;
+        const centerY = resolvedCanvas.height / 2 - current.dy * resolution_ratio_y - current.moveY * resolution_ratio_y;
+        currentTransformRef.current.zoom = nextZoom;
+        currentTransformRef.current.zoomX = centerX;
+        currentTransformRef.current.zoomY = centerY;
+        immediateRender(current.moveX, current.moveY, centerX, centerY, nextZoom, current.dx, current.dy);
+        setZoomX(centerX);
+        setZoomY(centerY);
         setZoom(nextZoom);
-    }, [canvasRef, panZoomable, zoom, image]);
+    }, [canvasRef, panZoomable, image, immediateRender]);
     const handleMouseDown = useCallback((e) => {
         if (!panZoomable || !canvasRef.current)
             return;
@@ -87,25 +137,32 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
         const rect = canvasRef.current.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
         const mouseY = e.clientY - rect.top;
-        const transformed = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom, canvasRef.current);
+        const current = currentTransformRef.current;
+        const transformed = getMousePointTransform({ x: mouseX, y: mouseY }, { x: current.moveX, y: current.moveY }, { x: current.zoomX, y: current.zoomY }, { x: current.dx, y: current.dy }, current.zoom, canvasRef.current);
         setStartMousePoint({ x: transformed.x, y: transformed.y });
         e.preventDefault();
-    }, [canvasRef, panZoomable, moveX, moveY, zoomX, zoomY, dx, dy, zoom]);
+    }, [canvasRef, panZoomable]);
     const handleMouseMove = useCallback((e) => {
         if (!panZoomable || status !== MouseStatus.MOVE || !canvasRef.current)
             return;
         const rect = canvasRef.current.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
         const mouseY = e.clientY - rect.top;
-        const transformed = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom, canvasRef.current);
+        const current = currentTransformRef.current;
+        const transformed = getMousePointTransform({ x: mouseX, y: mouseY }, { x: current.moveX, y: current.moveY }, { x: current.zoomX, y: current.zoomY }, { x: current.dx, y: current.dy }, current.zoom, canvasRef.current);
         if (startMousePoint) {
             const deltaX = transformed.x - startMousePoint.x;
             const deltaY = transformed.y - startMousePoint.y;
-            setMoveX((prev) => prev + deltaX);
-            setMoveY((prev) => prev + deltaY);
+            const newMoveX = current.moveX + deltaX;
+            const newMoveY = current.moveY + deltaY;
+            currentTransformRef.current.moveX = newMoveX;
+            currentTransformRef.current.moveY = newMoveY;
+            immediateRender(newMoveX, newMoveY, current.zoomX, current.zoomY, current.zoom, current.dx, current.dy);
+            setMoveX(newMoveX);
+            setMoveY(newMoveY);
         }
         e.preventDefault();
-    }, [canvasRef, panZoomable, status, moveX, moveY, zoomX, zoomY, dx, dy, zoom, startMousePoint]);
+    }, [canvasRef, panZoomable, status, startMousePoint, immediateRender]);
     const handleMouseUp = useCallback(() => {
         if (!panZoomable)
             return;
@@ -117,14 +174,34 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
         setStatus(MouseStatus.STOP);
     }, [panZoomable]);
     useEffect(() => {
-        if (!canvasRef.current || !image || (dx === 0 && dy === 0 && zoom === 1))
+        if (!canvasRef.current || !image)
             return;
-        drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(canvasRef.current), image, true);
-    }, [canvasRef, image, moveX, moveY, zoomX, zoomY, zoom, dx, dy]);
+        if (dx !== 0 || dy !== 0 || zoom !== 1) {
+            scheduleRender();
+        }
+    }, [canvasRef, image, moveX, moveY, zoomX, zoomY, zoom, dx, dy, scheduleRender]);
+    useEffect(() => {
+        currentTransformRef.current = {
+            moveX,
+            moveY,
+            zoom,
+            zoomX,
+            zoomY,
+            dx,
+            dy,
+        };
+    }, [moveX, moveY, zoom, zoomX, zoomY, dx, dy]);
     const resetView = useCallback(() => {
         if (image)
             initCanvas(image);
     }, [image, initCanvas]);
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, []);
     return {
         moveX,
         moveY,

package/package.json

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