ywana-core8 0.0.789 → 0.0.791

package/dist/index.umd.js

@@ -2917,10 +2917,161 @@
       })));
     };
 
+    var SCROLL_SENSITIVITY = 0.0005;
+    var MAX_ZOOM = 5;
+    var MIN_ZOOM = 0.1;
+    var ImageViewer = function ImageViewer(_ref) {
+      var image = _ref.image;
+
+      var _useState = React.useState({
+        x: 0,
+        y: 0
+      }),
+          offset = _useState[0],
+          setOffset = _useState[1];
+
+      var _useState2 = React.useState(1),
+          zoom = _useState2[0],
+          setZoom = _useState2[1];
+
+      var _useState3 = React.useState(false),
+          draggind = _useState3[0],
+          setDragging = _useState3[1];
+
+      var touch = React.useRef({
+        x: 0,
+        y: 0
+      });
+      var canvasRef = React.useRef(null);
+      var containerRef = React.useRef(null);
+      var observer = React.useRef(null);
+      var background = React.useMemo(function () {
+        return new Image();
+      }, [image]);
+
+      var clamp = function clamp(num, min, max) {
+        return Math.min(Math.max(num, min), max);
+      };
+
+      var handleWheel = function handleWheel(event) {
+        var deltaY = event.deltaY;
+
+        if (!draggind) {
+          setZoom(function (zoom) {
+            return clamp(zoom + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM);
+          });
+        }
+      };
+
+      var handleMouseMove = function handleMouseMove(event) {
+        if (draggind) {
+          var _touch$current = touch.current,
+              x = _touch$current.x,
+              y = _touch$current.y;
+          var clientX = event.clientX,
+              clientY = event.clientY;
+          setOffset({
+            x: offset.x + (x - clientX),
+            y: offset.y + (y - clientY)
+          });
+          touch.current = {
+            x: clientX,
+            y: clientY
+          };
+        }
+      };
+
+      var handleMouseDown = function handleMouseDown(event) {
+        var clientX = event.clientX,
+            clientY = event.clientY;
+        touch.current = {
+          x: clientX,
+          y: clientY
+        };
+        setDragging(true);
+      };
+
+      var handleMouseUp = function handleMouseUp() {
+        return setDragging(false);
+      };
+
+      var draw = function draw() {
+        if (canvasRef.current) {
+          var _canvasRef$current = canvasRef.current,
+              width = _canvasRef$current.width,
+              height = _canvasRef$current.height;
+          var 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
+
+          var x = (context.canvas.width / zoom - background.width) / 2;
+          var y = (context.canvas.height / zoom - background.height) / 2; // Draw image
+
+          context.drawImage(background, x, y);
+        }
+      };
+
+      React.useEffect(function () {
+        observer.current = new ResizeObserver(function (entries) {
+          entries.forEach(function (_ref2) {
+            var target = _ref2.target;
+            var width = background.width,
+                height = background.height; // If width of the container is smaller than image, scale image down
+
+            if (target.clientWidth < width) {
+              // Calculate scale
+              var 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 function () {
+          return observer.current.unobserve(containerRef.current);
+        };
+      }, []);
+      React.useEffect(function () {
+        background.src = image;
+
+        if (canvasRef.current) {
+          background.onload = function () {
+            // Get the image dimensions
+            var width = background.width,
+                height = background.height;
+            canvasRef.current.width = width;
+            canvasRef.current.height = height; // Set image as background
+
+            canvasRef.current.getContext("2d").drawImage(background, 0, 0);
+          };
+        }
+      }, [background]);
+      React.useEffect(function () {
+        draw();
+      }, [zoom, offset]);
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        ref: containerRef
+      }, /*#__PURE__*/React__default["default"].createElement("canvas", {
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onWheel: handleWheel,
+        onMouseMove: handleMouseMove,
+        ref: canvasRef
+      }));
+    };
+
     /**
      * Viewer
      */
 
+
     var Viewer = function Viewer(_ref) {
       var title = _ref.title,
           src = _ref.src,
@@ -2957,8 +3108,8 @@
         action: toggleDetails
       }), actions), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "resizer"
-      }, /*#__PURE__*/React__default["default"].createElement("picture", null, /*#__PURE__*/React__default["default"].createElement("img", {
-        src: src
+      }, /*#__PURE__*/React__default["default"].createElement("picture", null, /*#__PURE__*/React__default["default"].createElement(ImageViewer, {
+        image: src
       })))), /*#__PURE__*/React__default["default"].createElement("aside", {
         className: "" + (showDetails ? 'open' : '')
       }, /*#__PURE__*/React__default["default"].createElement(Header, {
@@ -4376,7 +4527,7 @@
         action: function action() {
           return onAction("CLOSE");
         },
-        disabled: canClose()
+        disabled: !canClose()
       }));
       var title = /*#__PURE__*/React__default["default"].createElement(Text, {
         use: "headline6"
@@ -4494,156 +4645,6 @@
       }, text));
     };
 
-    var SCROLL_SENSITIVITY = 0.0005;
-    var MAX_ZOOM = 5;
-    var MIN_ZOOM = 0.1;
-    var ImageViewer = function ImageViewer(_ref) {
-      var image = _ref.image;
-
-      var _useState = React.useState({
-        x: 0,
-        y: 0
-      }),
-          offset = _useState[0],
-          setOffset = _useState[1];
-
-      var _useState2 = React.useState(1),
-          zoom = _useState2[0],
-          setZoom = _useState2[1];
-
-      var _useState3 = React.useState(false),
-          draggind = _useState3[0],
-          setDragging = _useState3[1];
-
-      var touch = React.useRef({
-        x: 0,
-        y: 0
-      });
-      var canvasRef = React.useRef(null);
-      var containerRef = React.useRef(null);
-      var observer = React.useRef(null);
-      var background = React.useMemo(function () {
-        return new Image();
-      }, [image]);
-
-      var clamp = function clamp(num, min, max) {
-        return Math.min(Math.max(num, min), max);
-      };
-
-      var handleWheel = function handleWheel(event) {
-        var deltaY = event.deltaY;
-
-        if (!draggind) {
-          setZoom(function (zoom) {
-            return clamp(zoom + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM);
-          });
-        }
-      };
-
-      var handleMouseMove = function handleMouseMove(event) {
-        if (draggind) {
-          var _touch$current = touch.current,
-              x = _touch$current.x,
-              y = _touch$current.y;
-          var clientX = event.clientX,
-              clientY = event.clientY;
-          setOffset({
-            x: offset.x + (x - clientX),
-            y: offset.y + (y - clientY)
-          });
-          touch.current = {
-            x: clientX,
-            y: clientY
-          };
-        }
-      };
-
-      var handleMouseDown = function handleMouseDown(event) {
-        var clientX = event.clientX,
-            clientY = event.clientY;
-        touch.current = {
-          x: clientX,
-          y: clientY
-        };
-        setDragging(true);
-      };
-
-      var handleMouseUp = function handleMouseUp() {
-        return setDragging(false);
-      };
-
-      var draw = function draw() {
-        if (canvasRef.current) {
-          var _canvasRef$current = canvasRef.current,
-              width = _canvasRef$current.width,
-              height = _canvasRef$current.height;
-          var 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
-
-          var x = (context.canvas.width / zoom - background.width) / 2;
-          var y = (context.canvas.height / zoom - background.height) / 2; // Draw image
-
-          context.drawImage(background, x, y);
-        }
-      };
-
-      React.useEffect(function () {
-        observer.current = new ResizeObserver(function (entries) {
-          entries.forEach(function (_ref2) {
-            var target = _ref2.target;
-            var width = background.width,
-                height = background.height; // If width of the container is smaller than image, scale image down
-
-            if (target.clientWidth < width) {
-              // Calculate scale
-              var 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 function () {
-          return observer.current.unobserve(containerRef.current);
-        };
-      }, []);
-      React.useEffect(function () {
-        background.src = image;
-
-        if (canvasRef.current) {
-          background.onload = function () {
-            // Get the image dimensions
-            var width = background.width,
-                height = background.height;
-            canvasRef.current.width = width;
-            canvasRef.current.height = height; // Set image as background
-
-            canvasRef.current.getContext("2d").drawImage(background, 0, 0);
-          };
-        }
-      }, [background]);
-      React.useEffect(function () {
-        draw();
-      }, [zoom, offset]);
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        ref: containerRef
-      }, /*#__PURE__*/React__default["default"].createElement("canvas", {
-        onMouseDown: handleMouseDown,
-        onMouseUp: handleMouseUp,
-        onWheel: handleWheel,
-        onMouseMove: handleMouseMove,
-        ref: canvasRef
-      }));
-    };
-
     /**
      * Content Form 
      */