@deepnoid/canvas 0.1.3 → 0.1.5

package/dist/components/XrayViewer.d.ts

@@ -17,6 +17,8 @@ type Props = {
             children: ReactNode;
         }>;
     };
+    onImageLoadError?: (error: Error) => void;
+    onImageLoadSuccess?: () => void;
 };
-declare const XrayViewer: ({ image, hasZoom, coordinates }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const XrayViewer: ({ image, hasZoom, coordinates, onImageLoadError, onImageLoadSuccess }: Props) => import("react/jsx-runtime").JSX.Element;
 export default XrayViewer;

package/dist/components/XrayViewer.js

@@ -1,15 +1,17 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import useResizeObserver from '../hooks/useResizeObserver';
 import { canvasCenterPoint, drawCanvas, getMousePointTransform, resolutionCanvas } from '../utils/graphic';
 import Canvas from './Canvas';
-const XrayViewer = ({ image, hasZoom, coordinates }) => {
+const XrayViewer = ({ image, hasZoom, coordinates, onImageLoadError, onImageLoadSuccess }) => {
     const wrapper = useRef(null);
     const viewer = useRef(null);
     const { width, height } = useResizeObserver({ ref: viewer });
     const ZOOM_UNIT = 0.9;
     const MAX_ZOOM = 4;
     const MIN_ZOOM = 0.5;
+    const IMAGE_LOAD_TIMEOUT = 10000;
     const [initZoom, setInitZoom] = useState(0);
     const [zoom, setZoom] = useState(0);
     const [zoomX, setZoomX] = useState(0);
@@ -22,9 +24,36 @@ const XrayViewer = ({ image, hasZoom, coordinates }) => {
     const [moveY, setMoveY] = useState(0);
     const [status, setStatus] = useState('');
     const [imageOnloadCount, setImageOnloadCount] = useState(0);
-    const [_imageInfo, _setImageInfo] = useState();
+    const [isImageLoading, setIsImageLoading] = useState(false);
+    const [imageError, setImageError] = useState(null);
     const imageRef = useRef(new Image());
     const prevImageInfo = useRef(undefined);
+    const loadTimeoutRef = useRef(0);
+    const [startMousePoint, setStartMousePoint] = useState();
+    const loadImage = useCallback((src) => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            const timeout = setTimeout(() => {
+                reject(new Error(`Image load timeout: ${src}`));
+            }, IMAGE_LOAD_TIMEOUT);
+            img.onload = () => {
+                clearTimeout(timeout);
+                if (img.naturalWidth === 0 || img.naturalHeight === 0) {
+                    reject(new Error(`Invalid image dimensions: ${src}`));
+                    return;
+                }
+                resolve(img);
+            };
+            img.onerror = () => {
+                clearTimeout(timeout);
+                reject(new Error(`Failed to load image: ${src}`));
+            };
+            setTimeout(() => {
+                img.src = src;
+            }, 0);
+        });
+    }, []);
     const calculatorZoomPoint = useCallback((canvas_el, movementX, movementY, dx, dy) => {
         let x = 0;
         let y = 0;
@@ -46,67 +75,121 @@ const XrayViewer = ({ image, hasZoom, coordinates }) => {
                 : canvas_el.clientWidth / image.width;
         }
     }, []);
-    const init = (canvas_el, image) => {
-        const point = canvasCenterPoint(canvas_el, image);
-        setDx(point.x);
-        setDy(point.y);
-        setDw(image.width);
-        setDh(image.height);
-        setMoveX(0);
-        setMoveY(0);
-        const init_zoom = calculateInitZoom(image, canvas_el);
-        setZoom(init_zoom);
-        setInitZoom(init_zoom);
-        const zoomPoint = calculatorZoomPoint(canvas_el, 0, 0, point.x, point.y);
-        setZoomX(zoomPoint.x);
-        setZoomY(zoomPoint.y);
-    };
-    const initCanvas = () => {
-        if (image) {
+    const init = useCallback((canvas_el, image) => {
+        try {
+            const point = canvasCenterPoint(canvas_el, image);
+            setDx(point.x);
+            setDy(point.y);
+            setDw(image.width);
+            setDh(image.height);
+            setMoveX(0);
+            setMoveY(0);
+            const init_zoom = calculateInitZoom(image, canvas_el);
+            setZoom(init_zoom);
+            setInitZoom(init_zoom);
+            const zoomPoint = calculatorZoomPoint(canvas_el, 0, 0, point.x, point.y);
+            setZoomX(zoomPoint.x);
+            setZoomY(zoomPoint.y);
+            setImageError(null);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Canvas initialization failed';
+            setImageError(errorMessage);
+            onImageLoadError?.(new Error(errorMessage));
+        }
+    }, [calculateInitZoom, calculatorZoomPoint, onImageLoadError]);
+    const initCanvas = useCallback(async () => {
+        if (!image)
+            return;
+        try {
+            setIsImageLoading(true);
+            setImageError(null);
+            if (loadTimeoutRef.current) {
+                clearTimeout(loadTimeoutRef.current);
+            }
+            const loadedImage = await loadImage(image.imagePath);
+            imageRef.current = loadedImage;
             const canvas_el = resolutionCanvas(viewer.current);
-            if (canvas_el)
-                init(canvas_el, imageRef.current);
-            setImageOnloadCount(prev => prev + 1);
+            if (canvas_el) {
+                init(canvas_el, loadedImage);
+                setImageOnloadCount((prev) => prev + 1);
+                onImageLoadSuccess?.();
+            }
         }
-    };
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown image load error';
+            setImageError(errorMessage);
+            onImageLoadError?.(new Error(errorMessage));
+            console.error('Image load failed:', error);
+        }
+        finally {
+            setIsImageLoading(false);
+        }
+    }, [image, loadImage, init, onImageLoadError, onImageLoadSuccess]);
     useEffect(() => {
-        if (image) {
-            imageRef.current.src = image.imagePath;
-            const imageInfo = `${image.itemId}-${image.type}`;
-            imageRef.current.onload = () => {
-                if (prevImageInfo.current !== imageInfo || ['REALITY'].includes(image.type)) {
+        if (!image)
+            return;
+        const imageInfo = `${image.itemId}-${image.type}`;
+        const loadImageAsync = async () => {
+            try {
+                setIsImageLoading(true);
+                setImageError(null);
+                const loadedImage = await loadImage(image.imagePath);
+                imageRef.current = loadedImage;
+                if (prevImageInfo.current !== imageInfo || image.type === 'REALITY') {
                     prevImageInfo.current = imageInfo;
                     const canvas_el = resolutionCanvas(viewer.current);
-                    if (canvas_el)
-                        init(canvas_el, imageRef.current);
+                    if (canvas_el) {
+                        init(canvas_el, loadedImage);
+                    }
                 }
-                setImageOnloadCount(prev => prev + 1);
-            };
-        }
-    }, [image]);
-    const [startMousePoint, setStartMousePoint] = useState();
+                setImageOnloadCount((prev) => prev + 1);
+                onImageLoadSuccess?.();
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Image load failed';
+                setImageError(errorMessage);
+                onImageLoadError?.(new Error(errorMessage));
+                console.error('Image load failed:', error);
+            }
+            finally {
+                setIsImageLoading(false);
+            }
+        };
+        loadImageAsync();
+        return () => {
+            if (loadTimeoutRef.current) {
+                clearTimeout(loadTimeoutRef.current);
+            }
+        };
+    }, [image, loadImage, init, onImageLoadError, onImageLoadSuccess]);
     useEffect(() => {
         const _redraw = () => {
-            if (viewer.current) {
-                drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(viewer.current), imageRef.current, true);
+            if (viewer.current && imageRef.current && !isImageLoading && !imageError) {
+                try {
+                    drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(viewer.current), imageRef.current, true);
+                }
+                catch {
+                    setImageError('Canvas drawing failed');
+                }
             }
         };
         _redraw();
-    }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, imageOnloadCount]);
+    }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, imageOnloadCount, isImageLoading, imageError]);
     useEffect(() => {
-        if (image) {
-            imageRef.current.src = image.imagePath;
+        if (image && imageRef.current && !isImageLoading) {
             const imageInfo = `${image.itemId}-${image.type}`;
             if (prevImageInfo.current === imageInfo) {
                 const canvas_el = resolutionCanvas(viewer.current);
-                if (canvas_el)
+                if (canvas_el) {
                     init(canvas_el, imageRef.current);
-                setImageOnloadCount(prev => prev + 1);
+                    setImageOnloadCount((prev) => prev + 1);
+                }
             }
         }
-    }, [width, height]);
+    }, [width, height, image, init, isImageLoading]);
     const handleWheel = (event) => {
-        if (!hasZoom)
+        if (!hasZoom || isImageLoading || imageError)
             return;
         if (viewer.current) {
             let calc_zoom = event.deltaY < 0 ? (zoom || 1) * (1 / ZOOM_UNIT) : (zoom || 1) * ZOOM_UNIT;
@@ -122,7 +205,7 @@ const XrayViewer = ({ image, hasZoom, coordinates }) => {
         }
     };
     const handleMouseMove = (event) => {
-        if (!hasZoom)
+        if (!hasZoom || isImageLoading || imageError)
             return;
         if (status === 'MOVE') {
             if (viewer.current) {
@@ -147,6 +230,8 @@ const XrayViewer = ({ image, hasZoom, coordinates }) => {
         event.preventDefault();
     };
     const handleMouseDown = (event) => {
+        if (isImageLoading || imageError)
+            return;
         setStatus('MOVE');
         if (viewer.current) {
             const canvas_el = viewer.current;
@@ -154,12 +239,7 @@ const XrayViewer = ({ image, hasZoom, coordinates }) => {
             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_el);
-            const x = mouse.x;
-            const y = mouse.y;
-            setStartMousePoint({
-                x: x,
-                y: y,
-            });
+            setStartMousePoint({ x: mouse.x, y: mouse.y });
         }
         event.preventDefault();
     };
@@ -171,22 +251,14 @@ const XrayViewer = ({ image, hasZoom, coordinates }) => {
         setStatus('STOP');
         event.preventDefault();
     };
-    return (_jsx("div", { style: {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flex: 1,
-            backgroundColor: '#f5f5f5'
-        }, children: _jsxs("div", { ref: wrapper, onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, style: {
-                flex: 1,
-                position: 'relative'
-            }, children: [_jsx("canvas", { ref: viewer, style: {
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1, backgroundColor: '#f5f5f5' }, children: _jsxs("div", { ref: wrapper, onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, style: { flex: 1, position: 'relative' }, children: [_jsx("canvas", { ref: viewer, style: {
                         position: 'absolute',
                         width: '100%',
                         height: '100%',
                         left: 0,
                         top: 0,
-                        transition: 'all 500ms'
-                    } }), _jsx(Canvas, { moveX: moveX, moveY: moveY, zoomX: zoomX, zoomY: zoomY, zoom: zoom, dx: dx, dy: dy, dw: dw, dh: dh, coordinates: coordinates }), hasZoom && initZoom !== 0 && (_jsx(hasZoom.ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` }))] }) }));
+                        transition: 'all 500ms',
+                        opacity: isImageLoading || imageError ? 0.5 : 1,
+                    } }), !isImageLoading && !imageError && (_jsx(Canvas, { moveX: moveX, moveY: moveY, zoomX: zoomX, zoomY: zoomY, zoom: zoom, dx: dx, dy: dy, dw: dw, dh: dh, coordinates: coordinates })), hasZoom && initZoom !== 0 && !isImageLoading && !imageError && (_jsx(hasZoom.ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` }))] }) }));
 };
 export default XrayViewer;

package/dist/hooks/useResizeObserver.d.ts

@@ -5,11 +5,11 @@ type ObservedSize = {
 };
 type ResizeHandler = (size: ObservedSize) => void;
 type HookResponse<T extends Element> = {
-    ref: RefCallback<T>;
+    ref: RefCallback<T> & RefObject<T>;
 } & ObservedSize;
 type RoundingFunction = (n: number) => number;
 type ResizeObserverBoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
-declare const useResizeObserver: <T extends Element>(opts: {
+declare const useResizeObserver: <T extends Element>(opts?: {
     ref?: RefObject<T | null> | T | null | undefined;
     onResize?: ResizeHandler;
     box?: ResizeObserverBoxOptions;

package/dist/hooks/useResizeObserver.js

@@ -1,18 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-const useResizeObserver = (opts) => {
+const useResizeObserver = (opts = {}) => {
     const onResize = opts.onResize;
     const onResizeRef = useRef(undefined);
     onResizeRef.current = onResize;
     const round = opts.round || Math.round;
     const resizeObserverRef = useRef({});
-    const [size, setSize] = useState({
-        width: undefined,
-        height: undefined,
-    });
-    const previous = useRef({
-        width: undefined,
-        height: undefined,
-    });
+    const [size, setSize] = useState({ width: undefined, height: undefined });
+    const previous = useRef({ width: undefined, height: undefined });
     const didUnmount = useRef(false);
     useEffect(() => {
         didUnmount.current = false;
@@ -62,10 +56,10 @@ const useResizeObserver = (opts) => {
         };
     }, [opts.box, round]), opts.ref);
     return useMemo(() => ({
-        ref: refCallback,
+        ref: Object.assign(refCallback, { current: opts.ref?.current ?? null }),
         width: size.width,
         height: size.height,
-    }), [refCallback, size.width, size.height]);
+    }), [refCallback, size.width, size.height, opts.ref]);
 };
 export default useResizeObserver;
 function useResolvedElement(subscriber, refOrElement) {
@@ -114,9 +108,7 @@ function useResolvedElement(subscriber, refOrElement) {
     }, [evaluateSubscription]);
 }
 function extractSize(entry, boxProp, sizeType) {
-    const box = Array.isArray(entry[boxProp])
-        ? entry[boxProp][0]
-        : undefined;
+    const box = Array.isArray(entry[boxProp]) ? entry[boxProp][0] : undefined;
     if (!box) {
         return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/canvas",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -33,6 +33,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "^3.6.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "typescript": "^5.9.2",