@deepnoid/canvas 0.1.18 → 0.1.20

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

@@ -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,25 +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;
-        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 canvasEl = resolutionCanvas(canvasRef.current);
-        const zoomPoint = {
-            x: -dx - moveX + canvasEl.width / 2,
-            y: -dy - moveY + canvasEl.height / 2,
-        };
-        setZoomX(zoomPoint.x);
-        setZoomY(zoomPoint.y);
+        const resolvedCanvas = resolutionCanvas(canvasEl);
+        if (!resolvedCanvas)
+            return;
+        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, dx, dy, moveX, moveY, image]);
+    }, [canvasRef, panZoomable, image, immediateRender]);
     const handleMouseDown = useCallback((e) => {
         if (!panZoomable || !canvasRef.current)
             return;
@@ -89,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;
@@ -121,12 +176,32 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
     useEffect(() => {
         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.18",
+  "version": "0.1.20",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",