ywana-core8 0.2.15 → 0.2.17

package/dist/index.umd.js

@@ -22683,24 +22683,34 @@ const rows = [
     };
     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;
@@ -22708,23 +22718,37 @@ const rows = [
           }
         });
       });
-      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",
       {