ywana-core8 0.0.751 → 0.0.753

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.751",
+  "version": "0.0.753",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -37,7 +37,9 @@
     "moment-range": "^4.0.2",
     "react-datepicker": "^4.6.0",
     "react-error-overlay": "^6.0.10",
+    "react-image-pan-zoom-rotate": "^1.6.0",
     "react-notifications-component": "^3.4.1",
+    "react-pdf": "^6.0.3",
     "react-switch": "^6.0.0",
     "react-tooltip": "^4.2.21",
     "resumablejs": "^1.1.0"

package/src/domain/CollectionPage.js

@@ -402,6 +402,7 @@ const CollectionEditor = (props) => {
         }
         if (onChange) onChange(form)
         setPageContext(Object.assign({}, pageContext))
+        site.notify({ title: "Datos Guardados"  })
     }
 
     function renderTitle() {

package/src/domain2/CollectionList.js

@@ -45,8 +45,6 @@ export const CollectionList = (props) => {
             }
         })
 
-
-
     const style = selected ? 'selected' : ''
 
     return (

package/src/html/icon.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import './icon.css'
+import { Tooltip } from './tooltip';
 
 /**
  * Icon 
  */
-export const Icon = ({ icon, size = "normal", clickable = false, disabled = false, action, eventPropagation = false, className }) => {
+export const Icon = ({ icon, size = "normal", tooltip, clickable = false, disabled = false, action, eventPropagation = false, className }) => {
 
     function click (event) {
         if (!eventPropagation) {
@@ -15,9 +16,23 @@ export const Icon = ({ icon, size = "normal", clickable = false, disabled = fals
     }
 
     const style = disabled ? "disabled" : clickable ? "clickable" : ""
-    return (
+    return tooltip ? (
+        <Tooltip {...tooltip}>
+            <i className={`icon ${size} ${style} ${className} material-icons`} onClick={click} >
+                {icon}
+            </i>
+        </Tooltip>
+    ) : (
         <i className={`icon ${size} ${style} ${className} material-icons`} onClick={click}>
             {icon}
         </i>
     )
+}
+
+const IconTest = (props) => {
+    return (
+        <div>
+            <Icon icon="add" tooltip={{ text: 'add', top: '2rem', left: '2rem'}}/>
+        </div>
+    )
 }

package/src/html/list.js

@@ -62,7 +62,7 @@ const GroupedList = (props) => {
  * List Item
  */
 const ListItem = ({ item, selected, onSelect }) => {
-    const { id, icon, line1, line2, meta } = item
+    const { id, icon, iconTooltip, line1, line2, meta } = item
 
     function select() {
         if (onSelect) onSelect(id)
@@ -72,7 +72,7 @@ const ListItem = ({ item, selected, onSelect }) => {
     const style = isSelected ? "selected" : ""
     return (
         <li className={`${style}`} onClick={select}>
-            {icon ? <Icon icon={icon} size="small" /> : null}
+            {icon ? <Icon icon={icon} size="small" tooltip={iconTooltip} /> : null}
             <main>
                 <div className="primary-line"><Text>{line1}</Text></div>
                 {line2 ? <div className="secondary-line"><Text>{line2}</Text></div> : null}

package/src/incubator/pdfViewer.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'
+
+export const PDFViewer = (props) => {
+
+    const { file } = props
+    const [numPages, setNumPages] = useState(null)
+    const [pageNumber, setPageNumber] = useState(1)
+
+    function onDocumentLoadSuccess({ numPages }) {
+        setNumPages(numPages)
+    }
+
+    return (
+        <div className="pdfViewer">
+            <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
+                <Page pageNumber={pageNumber} />
+            </Document>
+        </div>
+    )
+}
+
+export const PDFViewerTest = (props) => {
+
+    const base64 = "xx"
+
+    return (
+        <PDFViewer file={base64} />
+    )
+
+}

package/src/widgets/image/ImageViewer.css

@@ -0,0 +1,3 @@
+.image-viewer {
+    border: solid 2px red;
+}

package/src/widgets/image/ImageViewer.js

@@ -0,0 +1,140 @@
+import React, { useRef, useMemo, useEffect, useState } from "react";
+import './ImageViewer.css'
+
+const ImageViewerTest = (props) => {
+
+    return (
+        <div>
+            <h1>ImageViewerTest</h1>
+            <ImageViewer image={"https://concepto.de/wp-content/uploads/2015/03/paisaje-800x409.jpg"} />
+        </div>
+    )
+}
+
+const SCROLL_SENSITIVITY = 0.0005;
+const MAX_ZOOM = 5;
+const MIN_ZOOM = 0.1;
+
+export const ImageViewer = ({ image }) => {
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [draggind, 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, min, max) => Math.min(Math.max(num, min), max);
+
+    const handleWheel = (event) => {
+        const { deltaY } = event;
+        if (!draggind) {
+            setZoom((zoom) =>
+                clamp(zoom + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM)
+            );
+        }
+    };
+
+    const handleMouseMove = (event) => {
+        if (draggind) {
+            const { x, y } = touch.current;
+            const { clientX, clientY } = event;
+            setOffset({
+                x: offset.x + (x - clientX),
+                y: offset.y + (y - clientY),
+            });
+            touch.current = { x: clientX, y: clientY };
+        }
+    };
+
+    const handleMouseDown = (event) => {
+        const { clientX, clientY } = event;
+        touch.current = { x: clientX, y: clientY };
+        setDragging(true);
+    };
+
+    const handleMouseUp = () => setDragging(false);
+
+    const draw = () => {
+        if (canvasRef.current) {
+            const { width, height } = canvasRef.current;
+            const context = canvasRef.current.getContext("2d");
+
+            // Set canvas dimensions
+            canvasRef.current.width = width;
+            canvasRef.current.height = height;
+
+            // Clear canvas and scale it
+            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;
+
+            // Draw image
+            context.drawImage(background, x, y);
+        }
+    };
+
+    useEffect(() => {
+        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) {
+                    // Calculate scale
+                    const scale = target.clientWidth / width;
+
+                    // Redraw image
+                    canvasRef.current.width = width * scale;
+                    canvasRef.current.height = height * scale;
+                    canvasRef.current
+                        .getContext("2d")
+                        .drawImage(background, 0, 0, width * scale, height * scale);
+                }
+            });
+        });
+        observer.current.observe(containerRef.current);
+
+        return () => observer.current.unobserve(containerRef.current);
+    }, []);
+
+    useEffect(() => {
+        background.src = image;
+
+        if (canvasRef.current) {
+            background.onload = () => {
+                // Get the image dimensions
+                const { width, height } = background;
+                canvasRef.current.width = width;
+                canvasRef.current.height = height;
+
+                // Set image as background
+                canvasRef.current.getContext("2d").drawImage(background, 0, 0);
+            };
+        }
+    }, [background]);
+
+    useEffect(() => {
+        draw();
+    }, [zoom, offset]);
+
+    return (
+        <div ref={containerRef}>
+            <canvas
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}
+                onWheel={handleWheel}
+                onMouseMove={handleMouseMove}
+                ref={canvasRef}
+            />
+        </div>
+    );
+};
+
+
+export default ImageViewer;

package/src/widgets/index.js

@@ -8,4 +8,5 @@ export * from './calendar/Calendar'
 export * from './planner/Planner'
 export * from './upload'
 export * from './explorer/Explorer'
-export * from './empty/EmptyMessage'
+export * from './empty/EmptyMessage'
+export * from './image/ImageViewer'