ywana-core8 0.2.14 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/index.js

@@ -9,7 +9,7 @@ export { Header2 } from './header2'
 export { Icon } from './icon'
 export { List } from './list'
 export { MenuIcon, Menu, MenuItem, MenuSeparator } from './menu'
-export { CircularProgress, LinearProgress } from './progress'
+export { CircularProgress, LinearProgress, StepProgress, RadialProgress, MultiProgress } from './progress'
 export { Property } from './property'
 export { RadioButton, RadioGroup } from './radio'
 export { Section } from './section'

package/src/widgets/image/ImageViewer.css

@@ -1,5 +1,18 @@
-.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;
 }

package/src/widgets/image/ImageViewer.js

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo, useEffect, useState } from "react";
+import React, { useRef, useMemo, useEffect, useState, forwardRef, useImperativeHandle } from "react";
 import './ImageViewer.css'
 
 const ImageViewerTest = (props) => {
@@ -14,10 +14,10 @@ const SCROLL_SENSITIVITY = 0.0005;
 const MAX_ZOOM = 5;
 const MIN_ZOOM = 0.1;
 
-export const ImageViewer = ({ image }) => {
+export const ImageViewer = forwardRef(({ image }, ref) => {
     const [offset, 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);
@@ -27,9 +27,23 @@ export const ImageViewer = ({ image }) => {
 
     const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
+    // Expose zoom functions to parent component
+    useImperativeHandle(ref, () => ({
+        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((zoom) =>
                 clamp(zoom + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM)
             );
@@ -37,7 +51,7 @@ export const ImageViewer = ({ image }) => {
     };
 
     const handleMouseMove = (event) => {
-        if (draggind) {
+        if (dragging) {
             const { x, y } = touch.current;
             const { clientX, clientY } = event;
             setOffset({
@@ -57,34 +71,50 @@ export const ImageViewer = ({ image }) => {
     const handleMouseUp = () => setDragging(false);
 
     const draw = () => {
-        if (canvasRef.current) {
-            const { width, height } = canvasRef.current;
-            const context = canvasRef.current.getContext("2d");
+        if (!canvasRef.current || !background.complete || !background.naturalWidth) {
+            return;
+        }
+
+        try {
+            const canvas = canvasRef.current;
+            const { width, height } = canvas;
+            const context = canvas.getContext("2d");
 
             // Set canvas dimensions
-            canvasRef.current.width = width;
-            canvasRef.current.height = height;
+            canvas.width = width;
+            canvas.height = height;
 
-            // Clear canvas and scale it
+            // Save context state
+            context.save();
+
+            // Clear canvas and apply transformations
             context.translate(-offset.x, -offset.y);
             context.scale(zoom, zoom);
             context.clearRect(0, 0, width, height);
 
             // Make sure we're zooming to the center
-            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;
 
             // Draw image
             context.drawImage(background, x, y);
+
+            // Restore context state
+            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 width of the container is smaller than image, scale image down
-                if (target.clientWidth < width) {
+                if (target.clientWidth < width && canvasRef.current) {
                     // Calculate scale
                     const scale = target.clientWidth / width;
 
@@ -97,16 +127,23 @@ export 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) {
                 // Get the image dimensions
                 const { width, height } = background;
                 canvasRef.current.width = width;
@@ -114,13 +151,25 @@ export const ImageViewer = ({ image }) => {
 
                 // Set image as background
                 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, offset]);
+    }, [zoom, offset, background.src]);
 
     return (
         <div className="image-viewer" ref={containerRef}>
@@ -133,7 +182,7 @@ export const ImageViewer = ({ image }) => {
             />
         </div>
     );
-};
+});
 
 
 export default ImageViewer;

package/src/widgets/viewer/Viewer.css

@@ -1,12 +1,16 @@
 .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 {
@@ -34,6 +38,7 @@
 
 .viewer>main>.resizer {
     width: 100%;
+    height: 100%;
     overflow: hidden;
     position: relative;
     display: flex;
@@ -42,9 +47,18 @@
     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) {
@@ -56,9 +70,12 @@
 
 .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 {
@@ -67,20 +84,38 @@
     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;
 }

package/src/widgets/viewer/Viewer.js

@@ -3,35 +3,87 @@ import { Icon, Header, Text } from '../../html'
 import { ImageViewer} from '../image/ImageViewer'
 import './Viewer.css'
 
-const ViewerTest = (props) => {
+export const ViewerTest = () => {
+    const [showViewer, setShowViewer] = useState(false);
+
+    const sampleInfo = (
+        <div style={{ padding: '1rem' }}>
+            <h3>Sample Image</h3>
+            <p><strong>Size:</strong> 1920x1080</p>
+            <p><strong>Format:</strong> PNG</p>
+            <p><strong>Created:</strong> 2024-01-15</p>
+        </div>
+    );
+
+    const sampleActions = [
+        <Icon key="download" icon="download" clickable title="Download" />,
+        <Icon key="share" icon="share" clickable title="Share" />
+    ];
+
     return (
-        <Viewer src="https://pro.ywanadigital.com/files/2023/63bc36a840364cdd0b4c6670/63bc38f740364cdd0b4c6671/original/52905_TECNOLOG_A%20DICIEMBRE%20II%2043X199_Cart_n_Microcanal%20sencillo_43x199_es_A_1r5v-0.png" />
-    )
-}
+        <div>
+            <button onClick={() => setShowViewer(true)}>
+                Open Viewer Test
+            </button>
+            {showViewer && (
+                <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)}
+                />
+            )}
+        </div>
+    );
+};
 
 /**
  * Viewer
  */
 export const Viewer = ({ title, src, info, actions = [], tools = false, onClose }) => {
-
-    const [showDetails, setShowDetails] = useState(false)
+    const [showDetails, setShowDetails] = useState(false);
+    const [imageViewerRef, setImageViewerRef] = useState(null);
 
     function toggleDetails() {
-        setShowDetails(!showDetails)
+        setShowDetails(!showDetails);
     }
 
-    const headerTitle = <Text use="headline6">{title}</Text>
+    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 = <Text use="headline6">{title}</Text>;
+
     return (
         <div className="viewer">
-            <Header icon="view" title={headerTitle} >
-                {onClose ? <Icon icon="close" clickable action={onClose} /> : null}
-                {showDetails ? '' : <Icon icon="info" clickable action={toggleDetails} />}
+            <Header icon="view" title={headerTitle}>
                 {actions}
+                {!showDetails && <Icon icon="info" clickable action={toggleDetails} />}
+                {onClose && <Icon icon="close" clickable action={onClose} />}
             </Header>
             <main>
                 <div className="resizer">
                     <picture>
-                        <ImageViewer image={src} />
+                        <ImageViewer
+                            image={src}
+                            ref={setImageViewerRef}
+                        />
                     </picture>
                 </div>
             </main>
@@ -43,13 +95,13 @@ export const Viewer = ({ title, src, info, actions = [], tools = false, onClose
                     {info}
                 </main>
             </aside>
-            {tools ? (
+            {tools && (
                 <footer>
-                    <Icon clickable icon="zoom_out" />
-                    <Icon clickable icon="zoom_out_map" />
-                    <Icon clickable icon="zoom_in" />
+                    <Icon clickable icon="zoom_out" action={handleZoomOut} />
+                    <Icon clickable icon="zoom_out_map" action={handleZoomReset} />
+                    <Icon clickable icon="zoom_in" action={handleZoomIn} />
                 </footer>
-            ) : null }
+            )}
         </div>
-    )
-}
+    );
+};