ywana-core8 0.2.15 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/widgets/image/ImageViewer.js

@@ -71,34 +71,50 @@ export const ImageViewer = forwardRef(({ image }, ref) => {
     const handleMouseUp = () => setDragging(false);
 
     const draw = () => {
-        if (canvasRef.current) {
-            const { width, height } = canvasRef.current;
-            const context = canvasRef.current.getContext("2d");
+        if (!canvasRef.current || !background.complete || !background.naturalWidth) {
+            return;
+        }
+
+        try {
+            const canvas = canvasRef.current;
+            const { width, height } = canvas;
+            const context = canvas.getContext("2d");
 
             // Set canvas dimensions
-            canvasRef.current.width = width;
-            canvasRef.current.height = height;
+            canvas.width = width;
+            canvas.height = height;
+
+            // Save context state
+            context.save();
 
-            // Clear canvas and scale it
+            // Clear canvas and apply transformations
             context.translate(-offset.x, -offset.y);
             context.scale(zoom, zoom);
             context.clearRect(0, 0, width, height);
 
             // Make sure we're zooming to the center
-            const x = (context.canvas.width / zoom - background.width) / 2;
-            const y = (context.canvas.height / zoom - background.height) / 2;
+            const x = (canvas.width / zoom - background.width) / 2;
+            const y = (canvas.height / zoom - background.height) / 2;
 
             // Draw image
             context.drawImage(background, x, y);
+
+            // Restore context state
+            context.restore();
+        } catch (error) {
+            console.warn('Error drawing image:', error);
         }
     };
 
     useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
         observer.current = new ResizeObserver((entries) => {
             entries.forEach(({ target }) => {
                 const { width, height } = background;
                 // If width of the container is smaller than image, scale image down
-                if (target.clientWidth < width) {
+                if (target.clientWidth < width && canvasRef.current) {
                     // Calculate scale
                     const scale = target.clientWidth / width;
 
@@ -111,16 +127,23 @@ export const ImageViewer = forwardRef(({ image }, ref) => {
                 }
             });
         });
-        observer.current.observe(containerRef.current);
 
-        return () => observer.current.unobserve(containerRef.current);
+        observer.current.observe(container);
+
+        return () => {
+            if (observer.current && container) {
+                observer.current.unobserve(container);
+            }
+        };
     }, []);
 
     useEffect(() => {
+        if (!image) return;
+
         background.src = image;
 
-        if (canvasRef.current) {
-            background.onload = () => {
+        const handleImageLoad = () => {
+            if (canvasRef.current) {
                 // Get the image dimensions
                 const { width, height } = background;
                 canvasRef.current.width = width;
@@ -128,13 +151,25 @@ export const ImageViewer = forwardRef(({ image }, ref) => {
 
                 // Set image as background
                 canvasRef.current.getContext("2d").drawImage(background, 0, 0);
-            };
-        }
-    }, [background]);
+            }
+        };
+
+        const handleImageError = () => {
+            console.warn('Failed to load image:', image);
+        };
+
+        background.onload = handleImageLoad;
+        background.onerror = handleImageError;
+
+        return () => {
+            background.onload = null;
+            background.onerror = null;
+        };
+    }, [image, background]);
 
     useEffect(() => {
         draw();
-    }, [zoom, offset]);
+    }, [zoom, offset, background.src]);
 
     return (
         <div className="image-viewer" ref={containerRef}>