@deepnoid/canvas 0.1.29 → 0.1.31

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

@@ -1,32 +1,80 @@
 '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 { 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 { width, height } = useResizeObserver({ ref: canvasRef });
     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({
-        canvasRef,
-        imageRef,
-        panZoomable,
-        resetOnImageChange,
-    });
-    const loaded = loadedImage && !isLoading;
+    const { canvasState, init, initCanvas, clearCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, imageOnloadCount, setImageOnloadCount, } = usePanZoom({ canvasRef, imageRef, panZoomable });
     useEffect(() => {
-        if (loaded) {
+        if (!image || image.trim() === '') {
+            clearCanvas();
+            return;
+        }
+        imageRef.current.src = image;
+        imageRef.current.onload = () => {
+            onImageLoadSuccess?.();
+            const canvas = resolutionCanvas(canvasRef.current);
+            if (!canvas)
+                return;
+            if (resetOnImageChange) {
+                init(canvas, imageRef.current);
+            }
+            else {
+                preserveZoomAndPosition(canvas, imageRef.current, canvasState.zoom / canvasState.initZoom);
+            }
+            setImageOnloadCount((prev) => prev + 1);
             setDisplayCoordinates(coordinates);
+        };
+        imageRef.current.onerror = () => {
+            const err = new Error(`Failed to load image: ${image}`);
+            onImageLoadError?.(err);
+            clearCanvas();
+            setDisplayCoordinates([]);
+        };
+    }, [image, resetOnImageChange]);
+    useEffect(() => {
+        if (image && width && height) {
+            const canvas = resolutionCanvas(canvasRef.current);
+            if (canvas)
+                init(canvas, imageRef.current);
         }
-    }, [loaded, coordinates]);
-    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: {
+    }, [width, height]);
+    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: 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: [_jsx("canvas", { ref: canvasRef, style: {
+                        position: 'absolute',
+                        width: '100%',
+                        height: '100%',
+                        left: 0,
+                        top: 0,
+                    } }), _jsx(Canvas, { ...canvasState, 
+                    // moveX={canvasState.moveX}
+                    // moveY={canvasState.moveY}
+                    // zoomX={canvasState.zoomX}
+                    // zoomY={canvasState.zoomY}
+                    // zoom={canvasState.zoom}
+                    // dx={canvasState.dx}
+                    // dy={canvasState.dy}
+                    // dw={canvasState.dw}
+                    // dh={canvasState.dh}
+                    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,26 +1,33 @@
 import { RefObject, WheelEvent, MouseEvent } from 'react';
-type UsePanZoomProps = {
-    canvasRef: RefObject<HTMLCanvasElement | null>;
-    imageRef: RefObject<HTMLImageElement | null>;
-    panZoomable?: boolean;
-    resetOnImageChange?: boolean;
-};
-export declare const usePanZoom: ({ canvasRef, imageRef, panZoomable, resetOnImageChange, }: UsePanZoomProps) => {
-    moveX: number;
-    moveY: number;
-    zoom: number;
-    initZoom: number;
-    zoomX: number;
-    zoomY: number;
+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): {
+    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;
     handleMouseUp: (event: MouseEvent) => void;
     handleMouseLeave: (event: MouseEvent) => void;
-    initCanvas: () => void;
 };
 export {};

package/dist/hooks/usePanZoom.js

@@ -1,169 +1,155 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
-import { resolutionCanvas, drawCanvas, getMousePointTransform, canvasCenterPoint } from '../utils/graphic';
+import { useState } from 'react';
+import { resolutionCanvas, getMousePointTransform, canvasCenterPoint, calculatorZoomPoint, calculateInitZoom, } 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);
-    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((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 };
-    }, [canvasRef]);
-    const calculateInitZoom = useCallback((canvasEl, image) => {
-        if (!image)
-            return 1;
-        const canvasRatio = canvasEl.clientWidth / canvasEl.clientHeight;
-        const imageRatio = image.naturalWidth / image.naturalHeight;
-        return canvasRatio < imageRatio
-            ? canvasEl.clientWidth / image.naturalWidth
-            : canvasEl.clientHeight / image.naturalHeight;
-    }, []);
-    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);
-        const init_zoom = calculateInitZoom(canvasEl, image);
-        setZoom(init_zoom);
-        setInitZoom(init_zoom);
-        const zoomPoint = calculatorZoomPoint(canvasEl, 0, 0, point.x, point.y);
-        setZoomX(zoomPoint.x);
-        setZoomY(zoomPoint.y);
+    const init = (canvas, image) => {
+        const point = canvasCenterPoint(canvas, image);
+        const zoomPoint = calculatorZoomPoint(canvas, 0, 0, point.x, point.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 (imageRef?.current) {
-            const canvasEl = resolutionCanvas(canvasRef.current);
-            if (canvasEl)
-                init(canvasEl, imageRef.current);
-            setImageOnloadCount((prev) => prev + 1);
-        }
+        if (!canvasRef.current)
+            return;
+        const canvas = resolutionCanvas(canvasRef.current);
+        if (!canvas)
+            return;
+        init(canvas, imageRef.current);
+        setImageOnloadCount((prev) => prev + 1);
+    };
+    const clearCanvas = () => {
+        if (!canvasRef.current)
+            return;
+        const canvas = resolutionCanvas(canvasRef.current);
+        if (!canvas)
+            return;
+        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 || 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 || 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: 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(canvasEl, 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) => {
-        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: 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();
     };
     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,
-        zoom,
-        initZoom,
-        zoomX,
-        zoomY,
-        dx,
-        dy,
-        dw,
-        dh,
+        canvasState,
+        imageOnloadCount,
+        setImageOnloadCount,
+        init,
+        initCanvas,
+        clearCanvas,
+        preserveZoomAndPosition,
         handleWheel,
         handleMouseDown,
         handleMouseMove,
         handleMouseUp,
         handleMouseLeave,
-        initCanvas,
     };
-};
+}

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.29",
+  "version": "0.1.31",
   "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 };
-};