@deepnoid/canvas 0.1.29 → 0.1.30

package/dist/components/AnnotatedCanvas.d.ts

@@ -14,8 +14,9 @@ type Props = {
     }>;
     resetOnImageChange?: boolean;
     editable?: boolean;
-    onImageLoadError?: (error: Error) => void;
+    timeout?: number;
     onImageLoadSuccess?: () => void;
+    onImageLoadError?: (error: Error) => void;
 };
-declare const AnnotatedCanvas: ({ image, coordinates, panZoomable, ZoomButton, resetOnImageChange, editable, onImageLoadError, onImageLoadSuccess, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const AnnotatedCanvas: ({ image, coordinates, panZoomable, ZoomButton, resetOnImageChange, editable, timeout, onImageLoadSuccess, onImageLoadError, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default AnnotatedCanvas;

package/dist/components/AnnotatedCanvas.js

@@ -2,31 +2,123 @@
 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, }) => {
+import useResizeObserver from '../hooks/useResizeObserver';
+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 [displayCoordinates, setDisplayCoordinates] = useState();
-    const { image: loadedImage, isLoading, error, } = useImageLoader(image, imageRef, 10000, onImageLoadSuccess, onImageLoadError);
-    const { moveX, moveY, zoom, initZoom, zoomX, zoomY, dx, dy, dw, dh, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, initCanvas, } = usePanZoom({
+    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,
-        resetOnImageChange,
     });
-    const loaded = loadedImage && !isLoading;
     useEffect(() => {
-        if (loaded) {
-            setDisplayCoordinates(coordinates);
+        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]);
+    // ----------
+    useEffect(() => {
+        if (!image || image.trim() === '') {
+            setIsLoading(false);
+            setIsError(false);
+            clearCanvas();
+            return;
+        }
+        setIsLoading(true);
+        imageRef.current.src = image;
+        imageRef.current.onload = () => {
+            console.log('> ======================= useEffect onload ============================');
+            setIsLoading(false);
+            setIsError(false);
+            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)
+                init(canvas, imageRef.current);
+            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);
+        };
+        imageRef.current.onerror = () => {
+            setIsLoading(false);
+            setIsError(true);
+            const err = new Error(`Failed to load image: ${image}`);
+            onImageLoadError?.(err);
+            clearCanvas();
+        };
+    }, [image, canvasRef.current]);
+    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);
+            }
         }
-    }, [loaded, coordinates]);
-    if (!image || error)
-        return null;
+    }, [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: {
                 flex: 1,
                 position: 'relative',
                 cursor: panZoomable ? 'grab' : 'default',
-            }, 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 && zoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` }))] })) }) }));
+            }, 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)}%` })] })) }) }));
 };
 export default AnnotatedCanvas;

package/dist/hooks/usePanZoom.d.ts

@@ -1,11 +1,10 @@
 import { RefObject, WheelEvent, MouseEvent } from 'react';
 type UsePanZoomProps = {
     canvasRef: RefObject<HTMLCanvasElement | null>;
-    imageRef: RefObject<HTMLImageElement | null>;
+    imageRef: RefObject<HTMLImageElement>;
     panZoomable?: boolean;
-    resetOnImageChange?: boolean;
 };
-export declare const usePanZoom: ({ canvasRef, imageRef, panZoomable, resetOnImageChange, }: UsePanZoomProps) => {
+export declare function usePanZoom({ canvasRef, imageRef, panZoomable }: UsePanZoomProps): {
     moveX: number;
     moveY: number;
     zoom: number;
@@ -16,11 +15,15 @@ export declare const usePanZoom: ({ canvasRef, imageRef, panZoomable, resetOnIma
     dy: number;
     dw: number;
     dh: number;
+    imageOnloadCount: number;
+    setImageOnloadCount: import("react").Dispatch<import("react").SetStateAction<number>>;
+    init: (canvas: HTMLCanvasElement, image: HTMLImageElement) => void;
+    initCanvas: () => void;
+    clearCanvas: () => void;
     handleWheel: (event: WheelEvent) => void;
     handleMouseDown: (event: MouseEvent) => void;
     handleMouseMove: (event: MouseEvent) => void;
     handleMouseUp: (event: MouseEvent) => void;
     handleMouseLeave: (event: MouseEvent) => void;
-    initCanvas: () => void;
 };
 export {};

package/dist/hooks/usePanZoom.js

@@ -1,13 +1,11 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
-import { resolutionCanvas, drawCanvas, getMousePointTransform, canvasCenterPoint } from '../utils/graphic';
+import { useCallback, useState } from 'react';
+import { resolutionCanvas, getMousePointTransform, canvasCenterPoint } from '../utils/graphic';
 import { MouseStatus } from '../enum/common';
-import useResizeObserver from './useResizeObserver';
-export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnImageChange = true, }) => {
+export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     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);
@@ -21,49 +19,61 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
     const [status, setStatus] = useState('');
     const [imageOnloadCount, setImageOnloadCount] = useState(0);
     const [startMousePoint, setStartMousePoint] = useState();
-    const calculatorZoomPoint = useCallback((canvasEl, movementX, movementY, dx, dy) => {
+    const calculatorZoomPoint = useCallback((canvas, 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;
+        if (canvas) {
+            x = -dx - movementX + canvas.width / 2;
+            y = -dy - movementY + canvas.height / 2;
         }
         return { x, y };
-    }, [canvasRef]);
-    const calculateInitZoom = useCallback((canvasEl, image) => {
-        if (!image)
+    }, []);
+    const calculateInitZoom = useCallback((canvas, image) => {
+        if (!canvas || !image)
             return 1;
-        const canvasRatio = canvasEl.clientWidth / canvasEl.clientHeight;
+        const canvasRatio = canvas.clientWidth / canvas.clientHeight;
         const imageRatio = image.naturalWidth / image.naturalHeight;
         return canvasRatio < imageRatio
-            ? canvasEl.clientWidth / image.naturalWidth
-            : canvasEl.clientHeight / image.naturalHeight;
+            ? canvas.clientWidth / image.naturalWidth
+            : canvas.clientHeight / image.naturalHeight;
     }, []);
-    const init = (canvasEl, image) => {
-        const point = canvasCenterPoint(canvasEl, image);
+    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(canvasEl, image);
+        const init_zoom = calculateInitZoom(canvas, image);
         setZoom(init_zoom);
         setInitZoom(init_zoom);
-        const zoomPoint = calculatorZoomPoint(canvasEl, 0, 0, point.x, point.y);
+        const zoomPoint = calculatorZoomPoint(canvas, 0, 0, point.x, point.y);
         setZoomX(zoomPoint.x);
         setZoomY(zoomPoint.y);
     };
     const initCanvas = () => {
-        if (imageRef?.current) {
-            const canvasEl = resolutionCanvas(canvasRef.current);
-            if (canvasEl)
-                init(canvasEl, imageRef.current);
+        if (!canvasRef.current || !imageRef.current)
+            return;
+        const canvas = resolutionCanvas(canvasRef.current);
+        if (canvas) {
+            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);
+        }
+    };
     const handleWheel = (event) => {
-        if (!panZoomable || !canvasRef.current || !imageRef?.current)
+        if (!panZoomable || !canvasRef.current)
             return;
         let calc_zoom = event.deltaY < 0 ? (zoom || 1) * (1 / ZOOM_UNIT) : (zoom || 1) * ZOOM_UNIT;
         if (initZoom * MAX_ZOOM < zoom * ZOOM_UNIT)
@@ -76,13 +86,13 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
         setZoom(calc_zoom);
     };
     const handleMouseMove = (event) => {
-        if (!panZoomable || status !== MouseStatus.MOVE || !canvasRef.current || !imageRef?.current)
+        if (!panZoomable || !canvasRef.current || status !== MouseStatus.MOVE)
             return;
-        const canvasEl = canvasRef.current;
-        const rect = canvasEl.getBoundingClientRect();
+        const canvas = canvasRef.current;
+        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, canvasEl);
+        const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom || 1, canvas);
         let x = mouse.x;
         let y = mouse.y;
         if (startMousePoint) {
@@ -91,63 +101,35 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
         }
         setMoveX(moveX + x);
         setMoveY(moveY + y);
-        const zoomPoint = calculatorZoomPoint(canvasEl, moveX + x, moveY + y, dx, dy);
+        const zoomPoint = calculatorZoomPoint(canvas, moveX + x, moveY + y, dx, dy);
         setZoomX(zoomPoint.x);
         setZoomY(zoomPoint.y);
         event.preventDefault();
     };
     const handleMouseDown = (event) => {
-        if (!panZoomable || !canvasRef.current || !imageRef?.current)
+        if (!panZoomable || !canvasRef.current)
             return;
         setStatus(MouseStatus.MOVE);
-        const canvasEl = canvasRef.current;
-        const rect = canvasEl.getBoundingClientRect();
+        const canvas = canvasRef.current;
+        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, canvasEl);
+        const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom || 1, canvas);
         setStartMousePoint({ x: mouse.x, y: mouse.y });
         event.preventDefault();
     };
     const handleMouseUp = (event) => {
-        if (!panZoomable)
+        if (!panZoomable || !canvasRef.current)
             return;
         setStatus(MouseStatus.STOP);
         event.preventDefault();
     };
     const handleMouseLeave = (event) => {
-        if (!panZoomable)
+        if (!panZoomable || !canvasRef.current)
             return;
         setStatus(MouseStatus.STOP);
         event.preventDefault();
     };
-    useEffect(() => {
-        const redraw = () => {
-            if (canvasRef.current && imageRef?.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, canvasRef, imageRef]);
-    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]);
     return {
         moveX,
         moveY,
@@ -159,11 +141,15 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
         dy,
         dw,
         dh,
+        imageOnloadCount,
+        setImageOnloadCount,
+        init,
+        initCanvas,
+        clearCanvas,
         handleWheel,
         handleMouseDown,
         handleMouseMove,
         handleMouseUp,
         handleMouseLeave,
-        initCanvas,
     };
-};
+}

package/package.json

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

package/dist/hooks/useImageLoader.d.ts

@@ -1,6 +0,0 @@
-import { RefObject } from 'react';
-export declare const useImageLoader: (src: string, imageRef: RefObject<HTMLImageElement>, timeout?: number, onLoadSuccess?: () => void, onLoadError?: (error: Error) => void) => {
-    image: HTMLImageElement | null;
-    isLoading: boolean;
-    error: string | null;
-};

package/dist/hooks/useImageLoader.js

@@ -1,71 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-export const useImageLoader = (src, imageRef, timeout = 10000, onLoadSuccess, onLoadError) => {
-    const [image, setImage] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        if (!src || src.trim() === '') {
-            setImage(null);
-            setIsLoading(false);
-            setError(null);
-            return;
-        }
-        if (imageRef.current && imageRef.current.src === src) {
-            setImage(imageRef.current);
-            setIsLoading(false);
-            setError(null);
-            onLoadSuccess?.();
-            return;
-        }
-        setIsLoading(true);
-        setError(null);
-        setImage(null);
-        const controller = new AbortController();
-        const { signal } = controller;
-        const img = new Image();
-        img.crossOrigin = 'anonymous';
-        img.src = src;
-        const timeoutId = setTimeout(() => {
-            if (!signal.aborted) {
-                controller.abort();
-                const e = new Error(`Image load timeout: ${src}`);
-                setError(e.message);
-                setIsLoading(false);
-                onLoadError?.(e);
-            }
-        }, timeout);
-        const handleLoad = () => {
-            if (signal.aborted)
-                return;
-            clearTimeout(timeoutId);
-            imageRef.current = img;
-            setImage(img);
-            setIsLoading(false);
-            setError(null);
-            onLoadSuccess?.();
-        };
-        const handleError = (e) => {
-            if (signal.aborted)
-                return;
-            clearTimeout(timeoutId);
-            const err = e instanceof Error ? e : new Error(`Failed to load image: ${src}`);
-            setError(err.message);
-            setIsLoading(false);
-            onLoadError?.(err);
-        };
-        img.onload = handleLoad;
-        img.onerror = handleError;
-        return () => {
-            clearTimeout(timeoutId);
-            controller.abort();
-            img.onload = null;
-            img.onerror = null;
-            try {
-                img.src = '';
-            }
-            catch { }
-        };
-    }, [src, imageRef, timeout, onLoadSuccess, onLoadError]);
-    return { image, isLoading, error };
-};