ywana-core8 0.2.14 → 0.2.16

package/dist/index.umd.js

@@ -22635,26 +22635,38 @@ const rows = [
   const SCROLL_SENSITIVITY = 5e-4;
   const MAX_ZOOM = 5;
   const MIN_ZOOM = 0.1;
-  const ImageViewer = ({ image }) => {
+  const ImageViewer = React.forwardRef(({ image }, ref2) => {
     const [offset2, setOffset] = React.useState({ x: 0, y: 0 });
     const [zoom, setZoom] = React.useState(1);
-    const [draggind, setDragging] = React.useState(false);
+    const [dragging, setDragging] = React.useState(false);
     const touch = React.useRef({ x: 0, y: 0 });
     const canvasRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const observer = React.useRef(null);
     const background = React.useMemo(() => new Image(), [image]);
     const clamp = (num, min2, max2) => Math.min(Math.max(num, min2), max2);
+    React.useImperativeHandle(ref2, () => ({
+      zoomIn: () => {
+        setZoom((prevZoom) => clamp(prevZoom + 0.2, MIN_ZOOM, MAX_ZOOM));
+      },
+      zoomOut: () => {
+        setZoom((prevZoom) => clamp(prevZoom - 0.2, MIN_ZOOM, MAX_ZOOM));
+      },
+      resetZoom: () => {
+        setZoom(1);
+        setOffset({ x: 0, y: 0 });
+      }
+    }), []);
     const handleWheel = (event) => {
       const { deltaY } = event;
-      if (!draggind) {
+      if (!dragging) {
         setZoom(
           (zoom2) => clamp(zoom2 + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM)
         );
       }
     };
     const handleMouseMove = (event) => {
-      if (draggind) {
+      if (dragging) {
         const { x, y } = touch.current;
         const { clientX, clientY } = event;
         setOffset({
@@ -22671,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;
@@ -22696,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",
       {
@@ -22723,14 +22759,55 @@ const rows = [
         ref: canvasRef
       }
     ));
+  });
+  const ViewerTest = () => {
+    const [showViewer, setShowViewer] = React.useState(false);
+    const sampleInfo = /* @__PURE__ */ React.createElement("div", { style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement("h3", null, "Sample Image"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Size:"), " 1920x1080"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Format:"), " PNG"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Created:"), " 2024-01-15"));
+    const sampleActions = [
+      /* @__PURE__ */ React.createElement(Icon, { key: "download", icon: "download", clickable: true, title: "Download" }),
+      /* @__PURE__ */ React.createElement(Icon, { key: "share", icon: "share", clickable: true, title: "Share" })
+    ];
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { onClick: () => setShowViewer(true) }, "Open Viewer Test"), showViewer && /* @__PURE__ */ React.createElement(
+      Viewer,
+      {
+        title: "Sample Image",
+        src: "https://concepto.de/wp-content/uploads/2015/03/paisaje-800x409.jpg",
+        info: sampleInfo,
+        actions: sampleActions,
+        tools: true,
+        onClose: () => setShowViewer(false)
+      }
+    ));
   };
   const Viewer = ({ title, src, info, actions = [], tools = false, onClose }) => {
     const [showDetails, setShowDetails] = React.useState(false);
+    const [imageViewerRef, setImageViewerRef] = React.useState(null);
     function toggleDetails() {
       setShowDetails(!showDetails);
     }
+    function handleZoomIn() {
+      if (imageViewerRef && imageViewerRef.zoomIn) {
+        imageViewerRef.zoomIn();
+      }
+    }
+    function handleZoomOut() {
+      if (imageViewerRef && imageViewerRef.zoomOut) {
+        imageViewerRef.zoomOut();
+      }
+    }
+    function handleZoomReset() {
+      if (imageViewerRef && imageViewerRef.resetZoom) {
+        imageViewerRef.resetZoom();
+      }
+    }
     const headerTitle = /* @__PURE__ */ React.createElement(Text, { use: "headline6" }, title);
-    return /* @__PURE__ */ React.createElement("div", { className: "viewer" }, /* @__PURE__ */ React.createElement(Header, { icon: "view", title: headerTitle }, onClose ? /* @__PURE__ */ React.createElement(Icon, { icon: "close", clickable: true, action: onClose }) : null, showDetails ? "" : /* @__PURE__ */ React.createElement(Icon, { icon: "info", clickable: true, action: toggleDetails }), actions), /* @__PURE__ */ React.createElement("main", null, /* @__PURE__ */ React.createElement("div", { className: "resizer" }, /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement(ImageViewer, { image: src })))), /* @__PURE__ */ React.createElement("aside", { className: `${showDetails ? "open" : ""}` }, /* @__PURE__ */ React.createElement(Header, { title: "Detalles" }, /* @__PURE__ */ React.createElement(Icon, { icon: "close", clickable: true, action: toggleDetails })), /* @__PURE__ */ React.createElement("main", null, info)), tools ? /* @__PURE__ */ React.createElement("footer", null, /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_out" }), /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_out_map" }), /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_in" })) : null);
+    return /* @__PURE__ */ React.createElement("div", { className: "viewer" }, /* @__PURE__ */ React.createElement(Header, { icon: "view", title: headerTitle }, actions, !showDetails && /* @__PURE__ */ React.createElement(Icon, { icon: "info", clickable: true, action: toggleDetails }), onClose && /* @__PURE__ */ React.createElement(Icon, { icon: "close", clickable: true, action: onClose })), /* @__PURE__ */ React.createElement("main", null, /* @__PURE__ */ React.createElement("div", { className: "resizer" }, /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement(
+      ImageViewer,
+      {
+        image: src,
+        ref: setImageViewerRef
+      }
+    )))), /* @__PURE__ */ React.createElement("aside", { className: `${showDetails ? "open" : ""}` }, /* @__PURE__ */ React.createElement(Header, { title: "Detalles" }, /* @__PURE__ */ React.createElement(Icon, { icon: "close", clickable: true, action: toggleDetails })), /* @__PURE__ */ React.createElement("main", null, info)), tools && /* @__PURE__ */ React.createElement("footer", null, /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_out", action: handleZoomOut }), /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_out_map", action: handleZoomReset }), /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_in", action: handleZoomIn })));
   };
   const Kanban = ({ children }) => {
     const hasSwimlanes = React.useMemo(() => {
@@ -43034,6 +43111,7 @@ Middle click: Close`
   exports2.MenuItem = MenuItem;
   exports2.MenuSeparator = MenuSeparator;
   exports2.MonthCalendar = MonthCalendar;
+  exports2.MultiProgress = MultiProgress;
   exports2.MultiSelector = MultiSelector;
   exports2.Page = Page;
   exports2.PageContext = PageContext;
@@ -43047,6 +43125,7 @@ Middle click: Close`
   exports2.ProgressExamples = ProgressExamples;
   exports2.Property = Property;
   exports2.PropertyExamples = PropertyExamples;
+  exports2.RadialProgress = RadialProgress;
   exports2.RadioButton = RadioButton;
   exports2.RadioExamples = RadioExamples;
   exports2.RadioGroup = RadioGroup;
@@ -43058,6 +43137,7 @@ Middle click: Close`
   exports2.SiteContext = SiteContext;
   exports2.SiteProvider = SiteProvider;
   exports2.Stack = Stack;
+  exports2.StepProgress = StepProgress;
   exports2.Switch = Switch;
   exports2.SwitchExamples = SwitchExamples;
   exports2.TASK_STATES = TASK_STATES;
@@ -43102,6 +43182,7 @@ Middle click: Close`
   exports2.Uploader = Uploader;
   exports2.View = View;
   exports2.Viewer = Viewer;
+  exports2.ViewerTest = ViewerTest;
   exports2.WaitScreen = WaitScreen;
   exports2.Window = Window;
   exports2.WindowManager = WindowManager;