ywana-core8 0.2.14 → 0.2.16

package/dist/index.css

@@ -15079,19 +15079,36 @@ li.selected,
     justify-content: space-between;
     margin-top: 20px;
     display: none !important;
-}.image-viewer   {
+}.image-viewer {
     display: flex;
     justify-content: center;
     align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.image-viewer canvas {
+    cursor: grab;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.image-viewer canvas:active {
+    cursor: grabbing;
 }.viewer {
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: rgba(0, 0, 0, .75);
+    background-color: rgba(0, 0, 0, .85);
     display: grid;
     grid-template-columns: 1fr auto;
     grid-template-rows: 4rem 1fr;
     grid-template-areas: "header aside" "main aside";
     color: #FFF;
+    z-index: 1000;
 }
 
 .viewer>header {
@@ -15119,6 +15136,7 @@ li.selected,
 
 .viewer>main>.resizer {
     width: 100%;
+    height: 100%;
     overflow: hidden;
     position: relative;
     display: flex;
@@ -15127,9 +15145,18 @@ li.selected,
     padding: 1rem;
 }
 
-.viewer>main>.resizer img {
+.viewer>main>.resizer picture {
     width: 100%;
-    object-fit: fill;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.viewer>main>.resizer img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
 }
 
 @media (min-width: 800px) {
@@ -15141,9 +15168,12 @@ li.selected,
 
 .viewer>aside {
     min-width: 22rem;
+    max-width: 25rem;
     grid-area: aside;
     display: none;
-    background-color: rgb(50, 50, 50);
+    background-color: rgba(40, 40, 40, 0.95);
+    backdrop-filter: blur(10px);
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .viewer>aside.open {
@@ -15152,22 +15182,40 @@ li.selected,
     flex-direction: column;
 }
 
+.viewer>aside main {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+}
+
 .viewer>aside .property>label {
     color: #AAA;
 }
 
 .viewer>footer {
-    width: 15rem;
+    width: 12rem;
     position: absolute;
-    bottom: 1rem;
-    left: calc(50vw - 4rem);
-    border-radius: 3px;
+    bottom: 2rem;
+    left: calc(50vw - 6rem);
+    border-radius: 8px;
     z-index: 100;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: .5rem;
-    background-color: rgba(0, 0, 0, .75);
+    padding: 0.75rem 1rem;
+    background-color: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.viewer>footer .icon {
+    transition: all 0.2s ease;
+}
+
+.viewer>footer .icon:hover {
+    transform: scale(1.1);
+    color: #fff;
 }.kanban {
     background-color: var(--background-color);
     overflow-x: auto;

package/dist/index.js

@@ -22634,26 +22634,38 @@ const LOGIN_CONTEXT = {
 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({
@@ -22670,24 +22682,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);
     }
   };
   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;
@@ -22695,23 +22717,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);
+      }
+    };
   }, []);
   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",
     {
@@ -22722,14 +22758,55 @@ const ImageViewer = ({ image }) => {
       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(() => {
@@ -43033,6 +43110,7 @@ exports.MenuIcon = MenuIcon;
 exports.MenuItem = MenuItem;
 exports.MenuSeparator = MenuSeparator;
 exports.MonthCalendar = MonthCalendar;
+exports.MultiProgress = MultiProgress;
 exports.MultiSelector = MultiSelector;
 exports.Page = Page;
 exports.PageContext = PageContext;
@@ -43046,6 +43124,7 @@ exports.Planner2 = Planner2;
 exports.ProgressExamples = ProgressExamples;
 exports.Property = Property;
 exports.PropertyExamples = PropertyExamples;
+exports.RadialProgress = RadialProgress;
 exports.RadioButton = RadioButton;
 exports.RadioExamples = RadioExamples;
 exports.RadioGroup = RadioGroup;
@@ -43057,6 +43136,7 @@ exports.Site = Site;
 exports.SiteContext = SiteContext;
 exports.SiteProvider = SiteProvider;
 exports.Stack = Stack;
+exports.StepProgress = StepProgress;
 exports.Switch = Switch;
 exports.SwitchExamples = SwitchExamples;
 exports.TASK_STATES = TASK_STATES;
@@ -43101,6 +43181,7 @@ exports.UploadIcon = UploadIcon;
 exports.Uploader = Uploader;
 exports.View = View;
 exports.Viewer = Viewer;
+exports.ViewerTest = ViewerTest;
 exports.WaitScreen = WaitScreen;
 exports.Window = Window;
 exports.WindowManager = WindowManager;