ywana-core8 0.2.14 → 0.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "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({
@@ -133,7 +147,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>
-    )
-}
+    );
+};