@deepnoid/canvas 0.1.30 → 0.1.32

package/dist/components/AnnotatedCanvas.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import Canvas from './Canvas';
 import { usePanZoom } from '../hooks/usePanZoom';
@@ -8,117 +8,74 @@ import { drawCanvas, resolutionCanvas } from '../utils/graphic';
 const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton, resetOnImageChange = true, editable = false, timeout = 10000, onImageLoadSuccess, onImageLoadError, }) => {
     const canvasRef = useRef(null);
     const imageRef = useRef(new Image());
-    const [isLoading, setIsLoading] = useState(false);
-    const [isError, setIsError] = useState(false);
     const { width, height } = useResizeObserver({ ref: canvasRef });
-    const { moveX, moveY, zoom, initZoom, zoomX, zoomY, dx, dy, dw, dh, imageOnloadCount, setImageOnloadCount, init, initCanvas, clearCanvas, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, } = usePanZoom({
-        canvasRef,
-        imageRef,
-        panZoomable,
-    });
-    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 (!imageRef?.current || !canvasRef?.current || !width || !height) return;
-    //   const canvasEl = resolutionCanvas(canvasRef.current);
-    //   if (!canvasEl) return;
-    //   const isFirstLoad = imageOnloadCount === 0;
-    //   if (isFirstLoad) {
-    //     init(canvasEl, imageRef.current);
-    //     setImageOnloadCount((prev) => prev + 1);
-    //     return;
-    //   }
-    //   if (resetOnImageChange) {
-    //     init(canvasEl, imageRef.current);
-    //   } else {
-    //     drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvasEl, imageRef.current, true);
-    //   }
-    //   setImageOnloadCount((prev) => prev + 1);
-    // }, [imageRef?.current, width, height, resetOnImageChange]);
-    // ----------
+    const [displayCoordinates, setDisplayCoordinates] = useState();
+    const { canvasState, init, initCanvas, clearCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, imageOnloadCount, setImageOnloadCount, } = usePanZoom({ canvasRef, imageRef, panZoomable });
     useEffect(() => {
         if (!image || image.trim() === '') {
-            setIsLoading(false);
-            setIsError(false);
             clearCanvas();
+            setDisplayCoordinates([]);
             return;
         }
-        setIsLoading(true);
-        imageRef.current.src = image;
-        imageRef.current.onload = () => {
-            console.log('> ======================= useEffect onload ============================');
-            setIsLoading(false);
-            setIsError(false);
+        const tempImage = new Image();
+        let cancelled = false;
+        tempImage.src = image;
+        tempImage.onload = () => {
+            if (cancelled)
+                return;
             onImageLoadSuccess?.();
-            // const canvas = resolutionCanvas(canvasRef.current);
-            // if (canvas) init(canvas, imageRef.current);
-            // setImageOnloadCount((prev) => prev + 1);
-            console.log('> canvasRef.current : ', canvasRef.current);
             const canvas = resolutionCanvas(canvasRef.current);
-            console.log(' > canvas :', canvas);
             if (!canvas)
                 return;
-            if (resetOnImageChange)
+            imageRef.current = tempImage;
+            if (resetOnImageChange) {
                 init(canvas, imageRef.current);
+            }
+            else {
+                preserveZoomAndPosition(canvas, imageRef.current, canvasState.zoom / canvasState.initZoom);
+            }
             setImageOnloadCount((prev) => prev + 1);
-            // if (prevImageRef.current !== image) {
-            //   // prevImageRef.current = image;
-            //   prevImageRef.current = imageRef.current.src;
-            //   const canvas = resolutionCanvas(canvasRef.current);
-            //   const isFirstLoad = imageOnloadCount === 0;
-            //   console.log('> onload - isFirstLoad : ', isFirstLoad);
-            //   // if (canvas && isFirstLoad) {
-            //   //   init(canvas, imageRef.current);
-            //   //   setImageOnloadCount((prev) => prev + 1);
-            //   // }
-            //   if (!canvas) return;
-            //   if (isFirstLoad) {
-            //     init(canvas, imageRef.current);
-            //     setImageOnloadCount((prev) => prev + 1);
-            //     return;
-            //   }
-            //   console.log('> !!!!!!!!!!!!!!!! resetOnImageChange : ', resetOnImageChange);
-            //   if (resetOnImageChange) {
-            //     init(canvas, imageRef.current);
-            //   } else {
-            //     // drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas, imageRef.current, true);
-            //   }
-            //   setImageOnloadCount((prev) => prev + 1);
-            //   // if (canvas) init(canvas, imageRef.current);
-            // }
-            // setImageOnloadCount((prev) => prev + 1);
+            setDisplayCoordinates(coordinates);
         };
-        imageRef.current.onerror = () => {
-            setIsLoading(false);
-            setIsError(true);
+        tempImage.onerror = () => {
+            if (cancelled)
+                return;
             const err = new Error(`Failed to load image: ${image}`);
             onImageLoadError?.(err);
             clearCanvas();
+            setDisplayCoordinates([]);
         };
-    }, [image, canvasRef.current]);
+        return () => {
+            cancelled = true;
+        };
+    }, [image, resetOnImageChange]);
     useEffect(() => {
-        console.log('> ======================= useEffect width, height !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
-        if (image || !isError) {
-            imageRef.current.src = image;
-            if (!resetOnImageChange) {
-                const canvas = resolutionCanvas(canvasRef.current);
-                if (canvas)
-                    init(canvas, imageRef.current);
-                setImageOnloadCount((prev) => prev + 1);
-            }
+        if (image && width && height) {
+            const canvas = resolutionCanvas(canvasRef.current);
+            if (canvas)
+                init(canvas, imageRef.current);
         }
     }, [width, height]);
-    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: {
+    useEffect(() => {
+        if (!canvasRef.current)
+            return;
+        const redraw = (canvas) => {
+            drawCanvas(canvasState.moveX, canvasState.moveY, canvasState.zoomX, canvasState.zoomY, canvasState.zoom, canvasState.dx, canvasState.dy, canvas, imageRef.current, true);
+        };
+        const canvas = resolutionCanvas(canvasRef.current);
+        if (canvas)
+            redraw(canvas);
+    }, [canvasState, imageOnloadCount]);
+    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: {
                 flex: 1,
                 position: 'relative',
                 cursor: panZoomable ? 'grab' : 'default',
-            }, children: imageRef.current.src && !isLoading && !isError && (_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: coordinates, editable: editable }), ZoomButton && _jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` })] })) }) }));
+            }, children: [_jsx("canvas", { ref: canvasRef, style: {
+                        position: 'absolute',
+                        width: '100%',
+                        height: '100%',
+                        left: 0,
+                        top: 0,
+                    } }), _jsx(Canvas, { ...canvasState, coordinates: displayCoordinates, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
 };
 export default AnnotatedCanvas;

package/dist/hooks/usePanZoom.d.ts

@@ -1,25 +1,29 @@
 import { RefObject, WheelEvent, MouseEvent } from 'react';
+type CanvasState = {
+    dx: number;
+    dy: number;
+    dw: number;
+    dh: number;
+    moveX: number;
+    moveY: number;
+    zoomX: number;
+    zoomY: number;
+    zoom: number;
+    initZoom: number;
+};
 type UsePanZoomProps = {
     canvasRef: RefObject<HTMLCanvasElement | null>;
     imageRef: RefObject<HTMLImageElement>;
     panZoomable?: boolean;
 };
 export declare function usePanZoom({ canvasRef, imageRef, panZoomable }: UsePanZoomProps): {
-    moveX: number;
-    moveY: number;
-    zoom: number;
-    initZoom: number;
-    zoomX: number;
-    zoomY: number;
-    dx: number;
-    dy: number;
-    dw: number;
-    dh: number;
+    canvasState: CanvasState;
     imageOnloadCount: number;
     setImageOnloadCount: import("react").Dispatch<import("react").SetStateAction<number>>;
     init: (canvas: HTMLCanvasElement, image: HTMLImageElement) => void;
     initCanvas: () => void;
     clearCanvas: () => void;
+    preserveZoomAndPosition: (canvas: HTMLCanvasElement, image: HTMLImageElement, zoomRatio: number) => void;
     handleWheel: (event: WheelEvent) => void;
     handleMouseDown: (event: MouseEvent) => void;
     handleMouseMove: (event: MouseEvent) => void;

package/dist/hooks/usePanZoom.js

@@ -1,89 +1,94 @@
 'use client';
-import { useCallback, useState } from 'react';
-import { resolutionCanvas, getMousePointTransform, canvasCenterPoint } from '../utils/graphic';
+import { useState } from 'react';
+import { resolutionCanvas, getMousePointTransform, canvasCenterPoint, calculatorZoomPoint, calculateInitZoom, } from '../utils/graphic';
 import { MouseStatus } from '../enum/common';
 export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     const ZOOM_UNIT = 0.9;
     const MAX_ZOOM = 4;
     const MIN_ZOOM = 0.5;
-    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 [moveX, setMoveX] = useState(0);
-    const [moveY, setMoveY] = useState(0);
+    const [canvasState, setCanvasState] = useState({
+        dx: 0,
+        dy: 0,
+        dw: 0,
+        dh: 0,
+        moveX: 0,
+        moveY: 0,
+        zoomX: 0,
+        zoomY: 0,
+        zoom: 0,
+        initZoom: 0,
+    });
     const [status, setStatus] = useState('');
     const [imageOnloadCount, setImageOnloadCount] = useState(0);
     const [startMousePoint, setStartMousePoint] = useState();
-    const calculatorZoomPoint = useCallback((canvas, movementX, movementY, dx, dy) => {
-        let x = 0;
-        let y = 0;
-        if (canvas) {
-            x = -dx - movementX + canvas.width / 2;
-            y = -dy - movementY + canvas.height / 2;
-        }
-        return { x, y };
-    }, []);
-    const calculateInitZoom = useCallback((canvas, image) => {
-        if (!canvas || !image)
-            return 1;
-        const canvasRatio = canvas.clientWidth / canvas.clientHeight;
-        const imageRatio = image.naturalWidth / image.naturalHeight;
-        return canvasRatio < imageRatio
-            ? canvas.clientWidth / image.naturalWidth
-            : canvas.clientHeight / image.naturalHeight;
-    }, []);
     const init = (canvas, image) => {
-        if (!canvas || !image)
-            return;
         const point = canvasCenterPoint(canvas, image);
-        setDx(point.x);
-        setDy(point.y);
-        setDw(image.width);
-        setDh(image.height);
-        setMoveX(0);
-        setMoveY(0);
-        const init_zoom = calculateInitZoom(canvas, image);
-        setZoom(init_zoom);
-        setInitZoom(init_zoom);
         const zoomPoint = calculatorZoomPoint(canvas, 0, 0, point.x, point.y);
-        setZoomX(zoomPoint.x);
-        setZoomY(zoomPoint.y);
+        const initZoomValue = calculateInitZoom(canvas, image);
+        setCanvasState({
+            dx: point.x,
+            dy: point.y,
+            dw: image.width,
+            dh: image.height,
+            moveX: 0,
+            moveY: 0,
+            zoomX: zoomPoint.x,
+            zoomY: zoomPoint.y,
+            zoom: initZoomValue,
+            initZoom: initZoomValue,
+        });
+    };
+    const preserveZoomAndPosition = (canvas, image, zoomRatio) => {
+        const prevZoomRatio = zoomRatio || 1;
+        const point = canvasCenterPoint(canvas, image);
+        const newInitZoom = calculateInitZoom(canvas, image);
+        const zoomPoint = calculatorZoomPoint(canvas, canvasState.moveX, canvasState.moveY, point.x, point.y);
+        setCanvasState({
+            dx: point.x,
+            dy: point.y,
+            dw: image.width,
+            dh: image.height,
+            moveX: canvasState.moveX,
+            moveY: canvasState.moveY,
+            zoomX: zoomPoint.x,
+            zoomY: zoomPoint.y,
+            zoom: newInitZoom * prevZoomRatio,
+            initZoom: newInitZoom,
+        });
     };
     const initCanvas = () => {
-        if (!canvasRef.current || !imageRef.current)
+        if (!canvasRef.current)
             return;
         const canvas = resolutionCanvas(canvasRef.current);
-        if (canvas) {
-            init(canvas, imageRef.current);
-            setImageOnloadCount((prev) => prev + 1);
-        }
+        if (!canvas)
+            return;
+        init(canvas, imageRef.current);
+        setImageOnloadCount((prev) => prev + 1);
     };
     const clearCanvas = () => {
         if (!canvasRef.current)
             return;
         const canvas = resolutionCanvas(canvasRef.current);
-        if (canvas) {
-            const ctx = canvas.getContext('2d');
-            ctx?.clearRect(0, 0, canvas.width, canvas.height);
-        }
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        ctx?.clearRect(0, 0, canvas.width, canvas.height);
     };
     const handleWheel = (event) => {
-        if (!panZoomable || !canvasRef.current)
+        if (!panZoomable || !canvasRef.current || canvasState.initZoom <= 0)
             return;
-        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 zoomPoint = calculatorZoomPoint(canvasRef.current, moveX, moveY, dx, dy);
-        setZoomX(zoomPoint.x);
-        setZoomY(zoomPoint.y);
-        setZoom(calc_zoom);
+        let calcZoom = event.deltaY < 0 ? canvasState.zoom * (1 / ZOOM_UNIT) : canvasState.zoom * ZOOM_UNIT;
+        if (canvasState.initZoom * MAX_ZOOM < canvasState.zoom * ZOOM_UNIT)
+            calcZoom = calcZoom * ZOOM_UNIT;
+        if (canvasState.initZoom * MIN_ZOOM > canvasState.zoom * ZOOM_UNIT)
+            calcZoom = calcZoom * (1 / ZOOM_UNIT);
+        const zoomPoint = calculatorZoomPoint(canvasRef.current, canvasState.moveX, canvasState.moveY, canvasState.dx, canvasState.dy);
+        setCanvasState({
+            ...canvasState,
+            zoomX: zoomPoint.x,
+            zoomY: zoomPoint.y,
+            zoom: calcZoom,
+        });
     };
     const handleMouseMove = (event) => {
         if (!panZoomable || !canvasRef.current || status !== MouseStatus.MOVE)
@@ -92,18 +97,21 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         const rect = canvas.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, canvas);
+        const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: canvasState.moveX, y: canvasState.moveY }, { x: canvasState.zoomX, y: canvasState.zoomY }, { x: canvasState.dx, y: canvasState.dy }, canvasState.zoom || 1, canvas);
         let x = mouse.x;
         let y = mouse.y;
         if (startMousePoint) {
             x -= startMousePoint.x;
             y -= startMousePoint.y;
         }
-        setMoveX(moveX + x);
-        setMoveY(moveY + y);
-        const zoomPoint = calculatorZoomPoint(canvas, moveX + x, moveY + y, dx, dy);
-        setZoomX(zoomPoint.x);
-        setZoomY(zoomPoint.y);
+        const zoomPoint = calculatorZoomPoint(canvas, canvasState.moveX + x, canvasState.moveY + y, canvasState.dx, canvasState.dy);
+        setCanvasState({
+            ...canvasState,
+            moveX: canvasState.moveX + x,
+            moveY: canvasState.moveY + y,
+            zoomX: zoomPoint.x,
+            zoomY: zoomPoint.y,
+        });
         event.preventDefault();
     };
     const handleMouseDown = (event) => {
@@ -114,7 +122,7 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         const rect = canvas.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, canvas);
+        const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: canvasState.moveX, y: canvasState.moveY }, { x: canvasState.zoomX, y: canvasState.zoomY }, { x: canvasState.dx, y: canvasState.dy }, canvasState.zoom || 1, canvas);
         setStartMousePoint({ x: mouse.x, y: mouse.y });
         event.preventDefault();
     };
@@ -131,21 +139,13 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         event.preventDefault();
     };
     return {
-        moveX,
-        moveY,
-        zoom,
-        initZoom,
-        zoomX,
-        zoomY,
-        dx,
-        dy,
-        dw,
-        dh,
+        canvasState,
         imageOnloadCount,
         setImageOnloadCount,
         init,
         initCanvas,
         clearCanvas,
+        preserveZoomAndPosition,
         handleWheel,
         handleMouseDown,
         handleMouseMove,

package/dist/hooks/useResizeObserver.js

@@ -14,14 +14,14 @@ const useResizeObserver = (opts = {}) => {
             didUnmount.current = true;
         };
     }, []);
-    const refCallback = useResolvedElement(useCallback(element => {
+    const refCallback = useResolvedElement(useCallback((element) => {
         if (!resizeObserverRef.current ||
             resizeObserverRef.current.box !== opts.box ||
             resizeObserverRef.current.round !== round) {
             resizeObserverRef.current = {
                 box: opts.box,
                 round,
-                instance: new ResizeObserver(entries => {
+                instance: new ResizeObserver((entries) => {
                     const entry = entries[0];
                     const boxProp = opts.box === 'border-box'
                         ? 'borderBoxSize'
@@ -102,7 +102,7 @@ function useResolvedElement(subscriber, refOrElement) {
             }
         };
     }, []);
-    return useCallback(element => {
+    return useCallback((element) => {
         cbElementRef.current = element;
         evaluateSubscription();
     }, [evaluateSubscription]);

package/dist/utils/graphic.d.ts

@@ -3,6 +3,11 @@ export declare const canvasCenterPoint: (canvas: HTMLCanvasElement, image: HTMLI
     x: number;
     y: number;
 };
+export declare const calculatorZoomPoint: (canvas: HTMLCanvasElement, movementX: number, movementY: number, dx: number, dy: number) => {
+    x: number;
+    y: number;
+};
+export declare const calculateInitZoom: (canvas: HTMLCanvasElement, image: HTMLImageElement) => number;
 export declare const drawCanvas: (moveX: number, moveY: number, zoomX: number, zoomY: number, zoom: number, dx: number, dy: number, canvas_el?: HTMLCanvasElement, image?: HTMLImageElement, isClear?: boolean) => void;
 export declare const drawRect: (context: CanvasRenderingContext2D, coordinate: Coordinate) => void;
 export declare const setRectangleStyle: (context: CanvasRenderingContext2D, coordinate: Coordinate) => void;

package/dist/utils/graphic.js

@@ -5,6 +5,22 @@ export const canvasCenterPoint = (canvas, image) => {
     const centerY = canvas.height / 2 - image.height / 2;
     return { x: centerX, y: centerY };
 };
+export const calculatorZoomPoint = (canvas, movementX, movementY, dx, dy) => {
+    let x = 0;
+    let y = 0;
+    if (canvas) {
+        x = -dx - movementX + canvas.width / 2;
+        y = -dy - movementY + canvas.height / 2;
+    }
+    return { x, y };
+};
+export const calculateInitZoom = (canvas, image) => {
+    if (!canvas || !image.naturalWidth)
+        return 1;
+    const canvasRatio = canvas.clientWidth / canvas.clientHeight;
+    const imageRatio = image.naturalWidth / image.naturalHeight;
+    return canvasRatio < imageRatio ? canvas.clientWidth / image.naturalWidth : canvas.clientHeight / image.naturalHeight;
+};
 // [캔버스] 그리기
 export const drawCanvas = (moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas_el, image, isClear) => {
     if (canvas_el) {

package/package.json

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