@deepnoid/canvas 0.1.19 → 0.1.21

package/dist/components/AnnotatedCanvas.js

@@ -8,29 +8,29 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
     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({
+    const { moveX, moveY, zoom, initZoom, zoomX, zoomY, dx, dy, dw, dh, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, initCanvas, } = usePanZoom({
         canvasRef,
         image: loadedImage,
         panZoomable,
         resetOnImageChange,
     });
+    const loaded = loadedImage && !isLoading;
     useEffect(() => {
-        if (loadedImage && !isLoading) {
+        if (loaded) {
             setDisplayCoordinates(coordinates);
         }
-    }, [loadedImage, isLoading, coordinates]);
+    }, [loaded, coordinates]);
     useEffect(() => {
         if (isLoading) {
             setDisplayCoordinates(undefined);
         }
     }, [isLoading]);
-    if (!image || image.trim() === '' || error) {
+    if (!image || error)
         return null;
-    }
     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: 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)}%` })] })) }) }));
+            }, children: loaded && (_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 && initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` }))] })) }) }));
 };
 export default AnnotatedCanvas;

package/dist/hooks/usePanZoom.d.ts

@@ -9,17 +9,18 @@ export declare const usePanZoom: ({ canvasRef, image, panZoomable, resetOnImageC
     moveX: number;
     moveY: number;
     zoom: number;
+    initZoom: number;
     zoomX: number;
     zoomY: number;
     dx: number;
     dy: number;
     dw: number;
     dh: number;
-    handleWheel: (e: WheelEvent) => void;
-    handleMouseDown: (e: MouseEvent) => void;
-    handleMouseMove: (e: MouseEvent) => void;
-    handleMouseUp: () => void;
-    handleMouseLeave: () => void;
-    resetView: () => void;
+    handleWheel: (event: WheelEvent) => void;
+    handleMouseDown: (event: MouseEvent) => false | undefined;
+    handleMouseMove: (event: MouseEvent) => void;
+    handleMouseUp: (event: MouseEvent) => void;
+    handleMouseLeave: (event: MouseEvent) => void;
+    initCanvas: () => void;
 };
 export {};

package/dist/hooks/usePanZoom.js

@@ -1,134 +1,179 @@
 'use client';
 import { useCallback, useEffect, useState, useRef } from 'react';
-import { resolutionCanvas, drawCanvas, getMousePointTransform } from '../utils/graphic';
+import { resolutionCanvas, drawCanvas, getMousePointTransform, canvasCenterPoint } from '../utils/graphic';
 import { MouseStatus } from '../enum/common';
+import useResizeObserver from './useResizeObserver';
 export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImageChange = true }) => {
-    const [moveX, setMoveX] = useState(0);
-    const [moveY, setMoveY] = useState(0);
-    const [zoom, setZoom] = useState(1);
+    const ZOOM_UNIT = 0.9;
+    const MAX_ZOOM = 4;
+    const MIN_ZOOM = 0.5;
+    const { width, height } = useResizeObserver({ ref: canvasRef });
+    const [initZoom, setInitZoom] = useState(0);
+    const [zoom, setZoom] = useState(0);
     const [zoomX, setZoomX] = useState(0);
     const [zoomY, setZoomY] = useState(0);
     const [dx, setDx] = useState(0);
     const [dy, setDy] = useState(0);
     const [dw, setDw] = useState(0);
     const [dh, setDh] = useState(0);
-    const [status, setStatus] = useState();
-    const [startMousePoint, setStartMousePoint] = useState();
-    const ZOOM_UNIT = 0.9;
-    const MAX_ZOOM = 4;
-    const MIN_ZOOM = 0.5;
-    const prevImageRef = useRef(null);
-    const initCanvas = useCallback((img) => {
-        const canvasEl = canvasRef.current;
-        if (!canvasEl)
-            return;
-        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 [moveX, setMoveX] = useState(0);
+    const [moveY, setMoveY] = useState(0);
+    const [status, setStatus] = useState('');
+    const [imageOnloadCount, setImageOnloadCount] = useState(0);
+    const [_imageInfo, _setImageInfo] = useState();
+    const imageRef = useRef(new Image());
+    const calculatorZoomPoint = useCallback((canvasEl, movementX, movementY, dx, dy) => {
+        let x = 0;
+        let y = 0;
+        if (canvasRef.current) {
+            x = -dx - movementX + canvasEl.width / 2;
+            y = -dy - movementY + canvasEl.height / 2;
+        }
+        return { x, y };
+    }, []);
+    const calculateInitZoom = useCallback((image, canvasEl) => {
+        if (canvasEl.clientWidth < canvasEl.clientHeight) {
+            return canvasEl.clientWidth / canvasEl.clientHeight < image.width / image.height
+                ? canvasEl.clientWidth / image.width
+                : canvasEl.clientHeight / image.height;
+        }
+        else {
+            return canvasEl.clientWidth / canvasEl.clientHeight > image.width / image.height
+                ? canvasEl.clientHeight / image.height
+                : canvasEl.clientWidth / image.width;
         }
-        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);
-        setZoom(scale);
-        setZoomX(0);
-        setZoomY(0);
+    }, []);
+    const init = (canvasEl, image) => {
+        const point = canvasCenterPoint(canvasEl, image);
+        setDx(point.x);
+        setDy(point.y);
+        setDw(image.width);
+        setDh(image.height);
         setMoveX(0);
         setMoveY(0);
-    }, [canvasRef]);
+        const init_zoom = calculateInitZoom(image, canvasEl);
+        setZoom(init_zoom);
+        setInitZoom(init_zoom);
+        const zoomPoint = calculatorZoomPoint(canvasEl, 0, 0, point.x, point.y);
+        setZoomX(zoomPoint.x);
+        setZoomY(zoomPoint.y);
+    };
+    const initCanvas = () => {
+        if (image) {
+            const canvasEl = resolutionCanvas(canvasRef.current);
+            if (canvasEl)
+                init(canvasEl, imageRef.current);
+            setImageOnloadCount((prev) => prev + 1);
+        }
+    };
     useEffect(() => {
-        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);
+        if (image) {
+            imageRef.current.src = image.src;
+            imageRef.current.onload = () => {
+                if (resetOnImageChange) {
+                    const canvasEl = resolutionCanvas(canvasRef.current);
+                    if (canvasEl)
+                        init(canvasEl, imageRef.current);
+                }
+                setImageOnloadCount((prev) => prev + 1);
+            };
         }
-        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]);
+    const [startMousePoint, setStartMousePoint] = useState();
+    useEffect(() => {
+        const redraw = () => {
+            if (canvasRef.current) {
+                drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(canvasRef.current), imageRef.current, true);
+            }
+        };
+        redraw();
+    }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, imageOnloadCount]);
+    useEffect(() => {
+        if (image) {
+            imageRef.current.src = image.src;
+            const canvasEl = resolutionCanvas(canvasRef.current);
+            if (canvasEl)
+                init(canvasEl, imageRef.current);
+            setImageOnloadCount((prev) => prev + 1);
         }
-        prevImageRef.current = image;
-    }, [image, resetOnImageChange, initCanvas, canvasRef]);
-    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))
+    }, [width, height]);
+    const handleWheel = (event) => {
+        if (!panZoomable)
             return;
-        setZoomX(mouseX);
-        setZoomY(mouseY);
-        setZoom(nextZoom);
-    }, [canvasRef, panZoomable, zoom, image]);
-    const handleMouseDown = useCallback((e) => {
-        if (!panZoomable || !canvasRef.current)
+        if (canvasRef.current) {
+            let calc_zoom = event.deltaY < 0 ? (zoom || 1) * (1 / ZOOM_UNIT) : (zoom || 1) * ZOOM_UNIT;
+            if (initZoom * MAX_ZOOM < zoom * ZOOM_UNIT)
+                calc_zoom = calc_zoom * ZOOM_UNIT;
+            if (initZoom * MIN_ZOOM > zoom * ZOOM_UNIT)
+                calc_zoom = calc_zoom * (1 / ZOOM_UNIT);
+            const canvasEl = canvasRef.current;
+            const zoomPoint = calculatorZoomPoint(canvasEl, moveX, moveY, dx, dy);
+            setZoomX(zoomPoint.x);
+            setZoomY(zoomPoint.y);
+            setZoom(calc_zoom);
+        }
+    };
+    const handleMouseMove = (event) => {
+        if (!panZoomable)
             return;
+        if (status === MouseStatus.MOVE) {
+            if (canvasRef.current) {
+                const canvasEl = canvasRef.current;
+                const rect = canvasEl.getBoundingClientRect();
+                const mouseX = event.clientX - rect.left;
+                const mouseY = event.clientY - rect.top;
+                const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom || 1, canvasEl);
+                let x = mouse.x;
+                let y = mouse.y;
+                if (startMousePoint) {
+                    x = x - startMousePoint.x;
+                    y = y - startMousePoint.y;
+                }
+                setMoveX(moveX + x);
+                setMoveY(moveY + y);
+                const zoomPoint = calculatorZoomPoint(canvasEl, moveX + x, moveY + y, dx, dy);
+                setZoomX(zoomPoint.x);
+                setZoomY(zoomPoint.y);
+            }
+        }
+        event.preventDefault();
+    };
+    const handleMouseDown = (event) => {
+        if (!panZoomable)
+            return false;
         setStatus(MouseStatus.MOVE);
-        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);
-        setStartMousePoint({ x: transformed.x, y: transformed.y });
-        e.preventDefault();
-    }, [canvasRef, panZoomable, moveX, moveY, zoomX, zoomY, dx, dy, zoom]);
-    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);
-        if (startMousePoint) {
-            const deltaX = transformed.x - startMousePoint.x;
-            const deltaY = transformed.y - startMousePoint.y;
-            setMoveX((prev) => prev + deltaX);
-            setMoveY((prev) => prev + deltaY);
+        if (canvasRef.current) {
+            const canvasEl = canvasRef.current;
+            const rect = canvasEl.getBoundingClientRect();
+            const mouseX = event.clientX - rect.left;
+            const mouseY = event.clientY - rect.top;
+            const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom || 1, canvasEl);
+            const x = mouse.x;
+            const y = mouse.y;
+            setStartMousePoint({
+                x: x,
+                y: y,
+            });
         }
-        e.preventDefault();
-    }, [canvasRef, panZoomable, status, moveX, moveY, zoomX, zoomY, dx, dy, zoom, startMousePoint]);
-    const handleMouseUp = useCallback(() => {
+        event.preventDefault();
+    };
+    const handleMouseUp = (event) => {
         if (!panZoomable)
             return;
         setStatus(MouseStatus.STOP);
-    }, [panZoomable]);
-    const handleMouseLeave = useCallback(() => {
+        event.preventDefault();
+    };
+    const handleMouseLeave = (event) => {
         if (!panZoomable)
             return;
         setStatus(MouseStatus.STOP);
-    }, [panZoomable]);
-    useEffect(() => {
-        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]);
-    const resetView = useCallback(() => {
-        if (image)
-            initCanvas(image);
-    }, [image, initCanvas]);
+        event.preventDefault();
+    };
     return {
         moveX,
         moveY,
         zoom,
+        initZoom,
         zoomX,
         zoomY,
         dx,
@@ -140,6 +185,6 @@ export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImage
         handleMouseMove,
         handleMouseUp,
         handleMouseLeave,
-        resetView,
+        initCanvas,
     };
 };

package/package.json

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