@deepnoid/canvas 0.1.10 → 0.1.12

package/dist/components/XrayViewer.d.ts

@@ -16,6 +16,7 @@ type Props = {
             onClick: () => void;
             children: ReactNode;
         }>;
+        preserveViewState?: boolean;
     };
     onImageLoadError?: (error: Error) => void;
     onImageLoadSuccess?: () => void;

package/dist/components/XrayViewer.js

@@ -98,6 +98,18 @@ const XrayViewer = ({ image, hasZoom, coordinates, onImageLoadError, onImageLoad
             onImageLoadError?.(new Error(errorMessage));
         }
     }, [calculateInitZoom, calculatorZoomPoint, onImageLoadError]);
+    const initWithPreservedState = useCallback((image) => {
+        try {
+            setDw(image.width);
+            setDh(image.height);
+            setImageError(null);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Canvas initialization failed';
+            setImageError(errorMessage);
+            onImageLoadError?.(new Error(errorMessage));
+        }
+    }, [onImageLoadError]);
     const initCanvas = useCallback(async () => {
         if (!image)
             return;
@@ -130,17 +142,24 @@ const XrayViewer = ({ image, hasZoom, coordinates, onImageLoadError, onImageLoad
         if (!image)
             return;
         const imageInfo = `${image.itemId}-${image.type}`;
+        const preserveViewState = hasZoom?.preserveViewState || false;
         const loadImageAsync = async () => {
             try {
                 setIsImageLoading(true);
                 setImageError(null);
                 const loadedImage = await loadImage(image.imagePath);
                 imageRef.current = loadedImage;
-                if (prevImageInfo.current !== imageInfo || image.type === 'REALITY') {
+                const isNewImage = prevImageInfo.current !== imageInfo || image.type === 'REALITY';
+                if (isNewImage) {
                     prevImageInfo.current = imageInfo;
                     const canvas_el = resolutionCanvas(viewer.current);
                     if (canvas_el) {
-                        init(canvas_el, loadedImage);
+                        if (preserveViewState && initZoom !== 0) {
+                            initWithPreservedState(loadedImage);
+                        }
+                        else {
+                            init(canvas_el, loadedImage);
+                        }
                     }
                 }
                 setImageOnloadCount((prev) => prev + 1);
@@ -150,6 +169,7 @@ const XrayViewer = ({ image, hasZoom, coordinates, onImageLoadError, onImageLoad
                 const errorMessage = error instanceof Error ? error.message : 'Image load failed';
                 setImageError(errorMessage);
                 imageRef.current = new Image();
+                prevImageInfo.current = undefined;
                 setZoom(0);
                 setInitZoom(0);
                 setMoveX(0);
@@ -162,6 +182,8 @@ const XrayViewer = ({ image, hasZoom, coordinates, onImageLoadError, onImageLoad
                     const canvas = viewer.current;
                     const ctx = canvas.getContext('2d');
                     if (ctx) {
+                        canvas.width = canvas.offsetWidth;
+                        canvas.height = canvas.offsetHeight;
                         ctx.clearRect(0, 0, canvas.width, canvas.height);
                     }
                 }
@@ -179,7 +201,16 @@ const XrayViewer = ({ image, hasZoom, coordinates, onImageLoadError, onImageLoad
                 clearTimeout(loadTimeoutRef.current);
             }
         };
-    }, [image, loadImage, init, onImageLoadError, onImageLoadSuccess]);
+    }, [
+        image,
+        loadImage,
+        init,
+        initWithPreservedState,
+        onImageLoadError,
+        onImageLoadSuccess,
+        hasZoom?.preserveViewState,
+        initZoom,
+    ]);
     useEffect(() => {
         const _redraw = () => {
             if (viewer.current && imageRef.current && !isImageLoading && !imageError) {
@@ -196,15 +227,21 @@ const XrayViewer = ({ image, hasZoom, coordinates, onImageLoadError, onImageLoad
     useEffect(() => {
         if (image && imageRef.current && !isImageLoading) {
             const imageInfo = `${image.itemId}-${image.type}`;
+            const preserveViewState = hasZoom?.preserveViewState || false;
             if (prevImageInfo.current === imageInfo) {
                 const canvas_el = resolutionCanvas(viewer.current);
                 if (canvas_el) {
-                    init(canvas_el, imageRef.current);
-                    setImageOnloadCount((prev) => prev + 1);
+                    if (preserveViewState && initZoom !== 0) {
+                        setImageOnloadCount((prev) => prev + 1);
+                    }
+                    else {
+                        init(canvas_el, imageRef.current);
+                        setImageOnloadCount((prev) => prev + 1);
+                    }
                 }
             }
         }
-    }, [width, height, image, init, isImageLoading]);
+    }, [width, height, image, init, isImageLoading, hasZoom?.preserveViewState, initZoom]);
     const handleWheel = (event) => {
         if (!hasZoom || isImageLoading || imageError)
             return;

package/package.json

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