ywana-core8 0.2.15 → 0.2.16

package/dist/index.js

@@ -22682,24 +22682,34 @@ const ImageViewer = React.forwardRef(({ image }, ref2) => {
   };
   const handleMouseUp = () => setDragging(false);
   const draw = () => {
-    if (canvasRef.current) {
-      const { width, height } = canvasRef.current;
-      const context = canvasRef.current.getContext("2d");
-      canvasRef.current.width = width;
-      canvasRef.current.height = height;
+    if (!canvasRef.current || !background.complete || !background.naturalWidth) {
+      return;
+    }
+    try {
+      const canvas = canvasRef.current;
+      const { width, height } = canvas;
+      const context = canvas.getContext("2d");
+      canvas.width = width;
+      canvas.height = height;
+      context.save();
       context.translate(-offset2.x, -offset2.y);
       context.scale(zoom, zoom);
       context.clearRect(0, 0, width, height);
-      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;
       context.drawImage(background, x, y);
+      context.restore();
+    } catch (error) {
+      console.warn("Error drawing image:", error);
     }
   };
   React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
     observer.current = new ResizeObserver((entries) => {
       entries.forEach(({ target }) => {
         const { width, height } = background;
-        if (target.clientWidth < width) {
+        if (target.clientWidth < width && canvasRef.current) {
           const scale = target.clientWidth / width;
           canvasRef.current.width = width * scale;
           canvasRef.current.height = height * scale;
@@ -22707,23 +22717,37 @@ const ImageViewer = React.forwardRef(({ image }, ref2) => {
         }
       });
     });
-    observer.current.observe(containerRef.current);
-    return () => observer.current.unobserve(containerRef.current);
+    observer.current.observe(container);
+    return () => {
+      if (observer.current && container) {
+        observer.current.unobserve(container);
+      }
+    };
   }, []);
   React.useEffect(() => {
+    if (!image) return;
     background.src = image;
-    if (canvasRef.current) {
-      background.onload = () => {
+    const handleImageLoad = () => {
+      if (canvasRef.current) {
         const { width, height } = background;
         canvasRef.current.width = width;
         canvasRef.current.height = height;
         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]);
   React.useEffect(() => {
     draw();
-  }, [zoom, offset2]);
+  }, [zoom, offset2, background.src]);
   return /* @__PURE__ */ React.createElement("div", { className: "image-viewer", ref: containerRef }, /* @__PURE__ */ React.createElement(
     "canvas",
     {