gdx-ui 1.4.0 → 1.6.0

package/components/images/PictureZoom.js

@@ -0,0 +1,296 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PictureZoom = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _util = require("../util");
+var _button = require("../button");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 600 : _ref$height,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$maxZoom = _ref.maxZoom,
+    maxZoom = _ref$maxZoom === void 0 ? 1.5 : _ref$maxZoom;
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageData = _useState2[0],
+    setImageData = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    zoom = _useState4[0],
+    setZoom = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    minZoom = _useState6[0],
+    setMinZoom = _useState6[1];
+  var _useState7 = (0, _react.useState)(maxZoom),
+    _useState8 = _slicedToArray(_useState7, 2),
+    maxZoomState = _useState8[0],
+    setMaxZoomState = _useState8[1];
+  var _useState9 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    offset = _useState10[0],
+    setOffset = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dragging = _useState12[0],
+    setDragging = _useState12[1];
+  var _useState13 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dragStart = _useState14[0],
+    setDragStart = _useState14[1];
+  var _useState15 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    imgStart = _useState16[0],
+    setImgStart = _useState16[1];
+  var containerRef = (0, _react.useRef)(null);
+
+  // Cuando la imagen y el wrapper están listos, calcula el zoom mínimo y máximo
+  (0, _react.useEffect)(function () {
+    if (!src) return;
+    var image = new Image();
+    image.src = src;
+    image.onload = function () {
+      setImageData({
+        width: image.width,
+        height: image.height
+      });
+    };
+  }, [src]);
+  (0, _react.useEffect)(function () {
+    if (!imageData || !containerRef.current) return;
+    var wrapper = containerRef.current;
+    var dispW = wrapper.clientWidth;
+    var dispH = wrapper.clientHeight;
+    var zoomW = dispW / imageData.width;
+    var zoomH = dispH / imageData.height;
+    var fitZoom = Math.min(zoomW, zoomH);
+    setMinZoom(fitZoom);
+    setZoom(fitZoom);
+    setMaxZoomState(Math.max(fitZoom, maxZoom));
+    setOffset({
+      x: 0,
+      y: 0
+    });
+    // eslint-disable-next-line
+  }, [imageData, maxZoom, width, height]);
+
+  // Limita el offset para que la imagen no se salga del área visible
+  var clampOffset = function clampOffset(ox, oy, zoomVal) {
+    if (!imageData || !containerRef.current) return {
+      x: 0,
+      y: 0
+    };
+    var dispW = containerRef.current.clientWidth;
+    var dispH = containerRef.current.clientHeight;
+    var imgW = imageData.width * zoomVal;
+    var imgH = imageData.height * zoomVal;
+    var minX = Math.min(0, dispW - imgW);
+    var minY = Math.min(0, dispH - imgH);
+    return {
+      x: Math.max(minX, Math.min(ox, 0)),
+      y: Math.max(minY, Math.min(oy, 0))
+    };
+  };
+
+  // Drag handlers (mouse & touch)
+  var startDrag = function startDrag(clientX, clientY) {
+    setDragging(true);
+    setDragStart({
+      x: clientX,
+      y: clientY
+    });
+    setImgStart(offset);
+  };
+  var onMouseDown = function onMouseDown(e) {
+    if (zoom === minZoom) return;
+    e.preventDefault();
+    startDrag(e.clientX, e.clientY);
+  };
+  var onMouseMove = function onMouseMove(e) {
+    if (!dragging) return;
+    var dx = e.clientX - dragStart.x;
+    var dy = e.clientY - dragStart.y;
+    setOffset(clampOffset(imgStart.x + dx, imgStart.y + dy, zoom));
+  };
+  var onMouseUp = function onMouseUp() {
+    return setDragging(false);
+  };
+
+  // Touch events
+  var onTouchStart = function onTouchStart(e) {
+    if (zoom === minZoom) return;
+    if (e.touches.length === 1) {
+      var t = e.touches[0];
+      startDrag(t.clientX, t.clientY);
+    }
+  };
+  var onTouchMove = function onTouchMove(e) {
+    if (!dragging || e.touches.length !== 1) return;
+    var t = e.touches[0];
+    var dx = t.clientX - dragStart.x;
+    var dy = t.clientY - dragStart.y;
+    setOffset(clampOffset(imgStart.x + dx, imgStart.y + dy, zoom));
+  };
+  var onTouchEnd = function onTouchEnd() {
+    return setDragging(false);
+  };
+  var handleDoubleClick = function handleDoubleClick(e) {
+    if (!imageData || !containerRef.current) return;
+    var wrapper = containerRef.current;
+    var rect = wrapper.getBoundingClientRect();
+    var clickX = e.clientX - rect.left;
+    var clickY = e.clientY - rect.top;
+    if (zoom < maxZoomState) {
+      // Zoom al máximo desde el punto del click
+      var newZoom = maxZoomState;
+      var dispW = wrapper.clientWidth;
+      var dispH = wrapper.clientHeight;
+
+      // Calcula el punto relativo en la imagen original
+      var relX = (clickX - offset.x) / zoom;
+      var relY = (clickY - offset.y) / zoom;
+
+      // Calcula el nuevo offset para centrar ese punto
+      var offsetX = dispW / 2 - relX * newZoom;
+      var offsetY = dispH / 2 - relY * newZoom;
+
+      // Limita el offset para no salirte del área visible
+      var imgW = imageData.width * newZoom;
+      var imgH = imageData.height * newZoom;
+      var minX = Math.min(0, dispW - imgW);
+      var minY = Math.min(0, dispH - imgH);
+      offsetX = Math.max(minX, Math.min(offsetX, 0));
+      offsetY = Math.max(minY, Math.min(offsetY, 0));
+      setZoom(newZoom);
+      setOffset({
+        x: offsetX,
+        y: offsetY
+      });
+    } else {
+      // Regresa al zoom inicial y centra la imagen
+      var _dispW = wrapper.clientWidth;
+      var _dispH = wrapper.clientHeight;
+      var _imgW = imageData.width * minZoom;
+      var _imgH = imageData.height * minZoom;
+      var _offsetX = (_dispW - _imgW) / 2;
+      var _offsetY = (_dispH - _imgH) / 2;
+      setZoom(minZoom);
+      setOffset({
+        x: _offsetX,
+        y: _offsetY
+      });
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (!imageData || !containerRef.current) return;
+    var wrapper = containerRef.current;
+    var dispW = wrapper.clientWidth;
+    var dispH = wrapper.clientHeight;
+    var zoomW = dispW / imageData.width;
+    var zoomH = dispH / imageData.height;
+    var fitZoom = Math.min(zoomW, zoomH);
+    setMinZoom(fitZoom);
+    setZoom(fitZoom);
+    setMaxZoomState(Math.max(fitZoom, maxZoom));
+
+    // Centra la imagen al inicio
+    var imgW = imageData.width * fitZoom;
+    var imgH = imageData.height * fitZoom;
+    var offsetX = (dispW - imgW) / 2;
+    var offsetY = (dispH - imgH) / 2;
+    setOffset({
+      x: offsetX,
+      y: offsetY
+    });
+    // eslint-disable-next-line
+  }, [imageData, maxZoom, width, height]);
+  (0, _react.useEffect)(function () {
+    if (zoom === minZoom && imageData && containerRef.current) {
+      var dispW = containerRef.current.clientWidth;
+      var dispH = containerRef.current.clientHeight;
+      var imgW = imageData.width * minZoom;
+      var imgH = imageData.height * minZoom;
+      var offsetX = (dispW - imgW) / 2;
+      var offsetY = (dispH - imgH) / 2;
+      setOffset({
+        x: offsetX,
+        y: offsetY
+      });
+    }
+  }, [zoom, minZoom, imageData]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      width: width,
+      height: height,
+      overflow: 'hidden',
+      position: 'relative',
+      touchAction: 'none',
+      userSelect: dragging ? 'none' : undefined,
+      background: '#FFF'
+    },
+    onDoubleClick: handleDoubleClick,
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    onMouseLeave: onMouseUp,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: "".concat(bordered ? 'bordered' : '', " margin-bottom")
+  }, imageData ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: src,
+    alt: alt,
+    draggable: false,
+    style: {
+      width: imageData.width * zoom,
+      height: imageData.height * zoom,
+      position: 'absolute',
+      left: offset.x,
+      top: offset.y,
+      cursor: zoom > minZoom ? dragging ? 'grabbing' : 'grab' : 'default',
+      transition: dragging ? 'none' : 'left 0.1s, top 0.1s',
+      userSelect: 'none'
+    },
+    onMouseDown: zoom > minZoom ? onMouseDown : undefined,
+    onTouchStart: zoom > minZoom ? onTouchStart : undefined
+  }) : /*#__PURE__*/_react["default"].createElement(_util.Skeleton, {
+    width: "100%",
+    height: height
+  }));
+};
+PictureZoom.propTypes = {
+  src: _propTypes["default"].string.isRequired,
+  alt: _propTypes["default"].string,
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  bordered: _propTypes["default"].bool,
+  maxZoom: _propTypes["default"].number
+};

package/components/images/PictureZoomBtns.js

@@ -0,0 +1,308 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PictureZoom = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _util = require("../util");
+var _button = require("../button");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 600 : _ref$height,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$maxZoom = _ref.maxZoom,
+    maxZoom = _ref$maxZoom === void 0 ? 1.5 : _ref$maxZoom;
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageData = _useState2[0],
+    setImageData = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    zoom = _useState4[0],
+    setZoom = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    minZoom = _useState6[0],
+    setMinZoom = _useState6[1];
+  var _useState7 = (0, _react.useState)(maxZoom),
+    _useState8 = _slicedToArray(_useState7, 2),
+    maxZoomState = _useState8[0],
+    setMaxZoomState = _useState8[1];
+  var _useState9 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    offset = _useState10[0],
+    setOffset = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dragging = _useState12[0],
+    setDragging = _useState12[1];
+  var _useState13 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dragStart = _useState14[0],
+    setDragStart = _useState14[1];
+  var _useState15 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    imgStart = _useState16[0],
+    setImgStart = _useState16[1];
+  var containerRef = (0, _react.useRef)(null);
+
+  // Cuando la imagen y el wrapper están listos, calcula el zoom mínimo y máximo
+  (0, _react.useEffect)(function () {
+    if (!src) return;
+    var image = new Image();
+    image.src = src;
+    image.onload = function () {
+      setImageData({
+        width: image.width,
+        height: image.height
+      });
+    };
+  }, [src]);
+  (0, _react.useEffect)(function () {
+    if (!imageData || !containerRef.current) return;
+    var wrapper = containerRef.current;
+    var dispW = wrapper.clientWidth;
+    var dispH = wrapper.clientHeight;
+    var zoomW = dispW / imageData.width;
+    var zoomH = dispH / imageData.height;
+    var fitZoom = Math.min(zoomW, zoomH);
+    setMinZoom(fitZoom);
+    setZoom(fitZoom);
+    setMaxZoomState(Math.max(fitZoom, maxZoom));
+    setOffset({
+      x: 0,
+      y: 0
+    });
+    // eslint-disable-next-line
+  }, [imageData, maxZoom, width, height]);
+
+  // Limita el offset para que la imagen no se salga del área visible
+  var clampOffset = function clampOffset(ox, oy, zoomVal) {
+    if (!imageData || !containerRef.current) return {
+      x: 0,
+      y: 0
+    };
+    var dispW = containerRef.current.clientWidth;
+    var dispH = containerRef.current.clientHeight;
+    var imgW = imageData.width * zoomVal;
+    var imgH = imageData.height * zoomVal;
+    var minX = Math.min(0, dispW - imgW);
+    var minY = Math.min(0, dispH - imgH);
+    return {
+      x: Math.max(minX, Math.min(ox, 0)),
+      y: Math.max(minY, Math.min(oy, 0))
+    };
+  };
+
+  // Zoom handlers
+  var handleZoom = function handleZoom(delta) {
+    setZoom(function (prev) {
+      var next = Math.max(minZoom, Math.min(prev + delta, maxZoomState));
+      setOffset(function (current) {
+        return clampOffset(current.x, current.y, next);
+      });
+      return next;
+    });
+  };
+
+  // Wheel zoom (más suave)
+  // const handleWheel = (e) => {
+  //   e.preventDefault();
+  //   const delta = e.deltaY < 0 ? -0.05 : 0.05;
+  //   handleZoom(delta);
+  // };
+
+  // Drag handlers (mouse & touch)
+  var startDrag = function startDrag(clientX, clientY) {
+    setDragging(true);
+    setDragStart({
+      x: clientX,
+      y: clientY
+    });
+    setImgStart(offset);
+  };
+  var onMouseDown = function onMouseDown(e) {
+    if (zoom === minZoom) return;
+    e.preventDefault();
+    startDrag(e.clientX, e.clientY);
+  };
+  var onMouseMove = function onMouseMove(e) {
+    if (!dragging) return;
+    var dx = e.clientX - dragStart.x;
+    var dy = e.clientY - dragStart.y;
+    setOffset(clampOffset(imgStart.x + dx, imgStart.y + dy, zoom));
+  };
+  var onMouseUp = function onMouseUp() {
+    return setDragging(false);
+  };
+
+  // Touch events
+  var onTouchStart = function onTouchStart(e) {
+    if (zoom === minZoom) return;
+    if (e.touches.length === 1) {
+      var t = e.touches[0];
+      startDrag(t.clientX, t.clientY);
+    }
+  };
+  var onTouchMove = function onTouchMove(e) {
+    if (!dragging || e.touches.length !== 1) return;
+    var t = e.touches[0];
+    var dx = t.clientX - dragStart.x;
+    var dy = t.clientY - dragStart.y;
+    setOffset(clampOffset(imgStart.x + dx, imgStart.y + dy, zoom));
+  };
+  var onTouchEnd = function onTouchEnd() {
+    return setDragging(false);
+  };
+
+  // Reset offset if zoom regresa al mínimo
+  // useEffect(() => {
+  //   if (zoom === minZoom) setOffset({ x: 0, y: 0 });
+  // }, [zoom, minZoom]);
+
+  (0, _react.useEffect)(function () {
+    if (!imageData || !containerRef.current) return;
+    var wrapper = containerRef.current;
+    var dispW = wrapper.clientWidth;
+    var dispH = wrapper.clientHeight;
+    var zoomW = dispW / imageData.width;
+    var zoomH = dispH / imageData.height;
+    var fitZoom = Math.min(zoomW, zoomH);
+    setMinZoom(fitZoom);
+    setZoom(fitZoom);
+    setMaxZoomState(Math.max(fitZoom, maxZoom));
+
+    // Centra la imagen al inicio
+    var imgW = imageData.width * fitZoom;
+    var imgH = imageData.height * fitZoom;
+    var offsetX = (dispW - imgW) / 2;
+    var offsetY = (dispH - imgH) / 2;
+    setOffset({
+      x: offsetX,
+      y: offsetY
+    });
+    // eslint-disable-next-line
+  }, [imageData, maxZoom, width, height]);
+  (0, _react.useEffect)(function () {
+    if (zoom === minZoom && imageData && containerRef.current) {
+      var dispW = containerRef.current.clientWidth;
+      var dispH = containerRef.current.clientHeight;
+      var imgW = imageData.width * minZoom;
+      var imgH = imageData.height * minZoom;
+      var offsetX = (dispW - imgW) / 2;
+      var offsetY = (dispH - imgH) / 2;
+      setOffset({
+        x: offsetX,
+        y: offsetY
+      });
+    }
+  }, [zoom, minZoom, imageData]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      width: width,
+      height: height,
+      overflow: 'hidden',
+      position: 'relative',
+      touchAction: 'none',
+      userSelect: dragging ? 'none' : undefined,
+      background: '#FFF'
+    }
+    // onWheel={handleWheel}
+    ,
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    onMouseLeave: onMouseUp,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: "".concat(bordered ? 'bordered' : '', " margin-bottom")
+  }, imageData ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: src,
+    alt: alt,
+    draggable: false,
+    style: {
+      width: imageData.width * zoom,
+      height: imageData.height * zoom,
+      position: 'absolute',
+      left: offset.x,
+      top: offset.y,
+      cursor: zoom > minZoom ? dragging ? 'grabbing' : 'grab' : 'default',
+      transition: dragging ? 'none' : 'left 0.1s, top 0.1s',
+      userSelect: 'none'
+    },
+    onMouseDown: zoom > minZoom ? onMouseDown : undefined,
+    onTouchStart: zoom > minZoom ? onTouchStart : undefined
+  }) : /*#__PURE__*/_react["default"].createElement(_util.Skeleton, {
+    width: "100%",
+    height: height
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      right: 8,
+      bottom: 8,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 15,
+      zIndex: 10
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    icon: _freeSolidSvgIcons.faPlus,
+    type: "button",
+    bg: "solid",
+    style: {
+      cursor: zoom < maxZoomState ? 'pointer' : 'not-allowed'
+    },
+    onClick: function onClick() {
+      return handleZoom(0.5);
+    },
+    disabled: zoom >= maxZoomState,
+    "aria-label": "Zoom in"
+  }), /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    bg: "solid",
+    icon: _freeSolidSvgIcons.faMinus,
+    type: "button",
+    onClick: function onClick() {
+      return handleZoom(-0.5);
+    },
+    disabled: zoom <= minZoom,
+    "aria-label": "Zoom out",
+    style: {
+      cursor: zoom > minZoom ? 'pointer' : 'not-allowed'
+    }
+  })));
+};
+PictureZoom.propTypes = {
+  src: _propTypes["default"].string.isRequired,
+  alt: _propTypes["default"].string,
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  bordered: _propTypes["default"].bool,
+  maxZoom: _propTypes["default"].number
+};

package/components/images/{Image.js → PictureZoomSquare.js}

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Image = void 0;
+exports.Picture = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _util = require("../util");
@@ -17,7 +17,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var Image = exports.Image = function Image(_ref) {
+var Picture = exports.Picture = function Picture(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     width = _ref.width,
@@ -51,7 +51,7 @@ var Image = exports.Image = function Image(_ref) {
     height: height
   });
 };
-Image.propTypes = {
+Picture.propTypes = {
   src: _propTypes["default"].string.isRequired,
   alt: _propTypes["default"].string,
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

package/components/images/Thumb.js

@@ -11,6 +11,7 @@ var _util = require("../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -23,7 +24,8 @@ var Thumb = exports.Thumb = function Thumb(_ref) {
     _ref$bordered = _ref.bordered,
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size;
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    onClick = _ref.onClick;
   var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
     imageData = _useState2[0],
@@ -40,9 +42,18 @@ var Thumb = exports.Thumb = function Thumb(_ref) {
       });
     };
   }, [src]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "thumb thumb-".concat(size, " ").concat(bordered ? 'thumb-bordered' : '')
-  }, imageData ? /*#__PURE__*/_react["default"].createElement("img", {
+  var isClickable = typeof onClick === 'function';
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "thumb thumb-".concat(size, " ").concat(bordered ? 'thumb-bordered' : '', " ").concat(isClickable ? 'clickable bordered-hover' : ''),
+    onClick: true
+  }, isClickable && {
+    onClick: onClick,
+    role: 'button',
+    tabIndex: 0,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') onClick(e);
+    }
+  }), imageData ? /*#__PURE__*/_react["default"].createElement("img", {
     src: src,
     alt: alt,
     className: "center-by-".concat(imageData.width > imageData.height ? 'width' : 'height')
@@ -54,5 +65,6 @@ Thumb.propTypes = {
   src: _propTypes["default"].string.isRequired,
   alt: _propTypes["default"].string,
   bordered: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['smallest', 'small', 'medium', 'large', 'largest'])
+  size: _propTypes["default"].oneOf(['smallest', 'small', 'medium', 'large', 'largest']),
+  onClick: _propTypes["default"].func
 };