ywana-core8 0.2.14 → 0.2.16

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useCallback, useState, useEffect, useRef, Fragment, createContext } from "react";
+import React, { useContext, useMemo, useCallback, useState, useEffect, useRef, Fragment, createContext, forwardRef, useImperativeHandle } from "react";
 function isEmpty(obj) {
   if (obj === null) {
     return true;
@@ -22632,26 +22632,38 @@ const LOGIN_CONTEXT = {
 const SCROLL_SENSITIVITY = 5e-4;
 const MAX_ZOOM = 5;
 const MIN_ZOOM = 0.1;
-const ImageViewer = ({ image }) => {
+const ImageViewer = forwardRef(({ image }, ref2) => {
   const [offset2, setOffset] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
-  const [draggind, setDragging] = useState(false);
+  const [dragging, setDragging] = useState(false);
   const touch = useRef({ x: 0, y: 0 });
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   const observer = useRef(null);
   const background = useMemo(() => new Image(), [image]);
   const clamp = (num, min2, max2) => Math.min(Math.max(num, min2), max2);
+  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({
@@ -22668,24 +22680,34 @@ const ImageViewer = ({ image }) => {
   };
   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);
     }
   };
   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;
@@ -22693,23 +22715,37 @@ const ImageViewer = ({ image }) => {
         }
       });
     });
-    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) {
         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]);
   useEffect(() => {
     draw();
-  }, [zoom, offset2]);
+  }, [zoom, offset2, background.src]);
   return /* @__PURE__ */ React.createElement("div", { className: "image-viewer", ref: containerRef }, /* @__PURE__ */ React.createElement(
     "canvas",
     {
@@ -22720,14 +22756,55 @@ const ImageViewer = ({ image }) => {
       ref: canvasRef
     }
   ));
+});
+const ViewerTest = () => {
+  const [showViewer, setShowViewer] = 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] = useState(false);
+  const [imageViewerRef, setImageViewerRef] = 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 = useMemo(() => {
@@ -43032,6 +43109,7 @@ export {
   MenuItem,
   MenuSeparator,
   MonthCalendar,
+  MultiProgress,
   MultiSelector,
   Page,
   PageContext,
@@ -43045,6 +43123,7 @@ export {
   ProgressExamples,
   Property,
   PropertyExamples,
+  RadialProgress,
   RadioButton,
   RadioExamples,
   RadioGroup,
@@ -43056,6 +43135,7 @@ export {
   SiteContext,
   SiteProvider,
   Stack,
+  StepProgress,
   Switch,
   SwitchExamples,
   TASK_STATES,
@@ -43100,6 +43180,7 @@ export {
   Uploader,
   View,
   Viewer,
+  ViewerTest,
   WaitScreen,
   Window,
   WindowManager,