gdx-ui 1.5.0 → 1.7.0

package/components/images/ImageZoom.js

@@ -0,0 +1,294 @@
+"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.ImageZoom = 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 ImageZoom = exports.ImageZoom = function ImageZoom(_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,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? true : _ref$showHelp;
+  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,
+      userSelect: dragging ? 'none' : undefined
+    },
+    onDoubleClick: handleDoubleClick,
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    onMouseLeave: onMouseUp,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: "image-zoom ".concat(bordered ? 'bordered' : '', " margin-bottom")
+  }, showHelp && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "image-zoom-caption"
+  }, "Doble click para ampliar o reducir la imagen"), imageData ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: src,
+    alt: alt,
+    draggable: false,
+    style: {
+      width: imageData.width * zoom,
+      height: imageData.height * zoom,
+      left: offset.x,
+      top: offset.y,
+      cursor: zoom > minZoom ? dragging ? 'grabbing' : 'grab' : 'default',
+      transition: dragging ? 'none' : 'left 0.1s, top 0.1s'
+    },
+    onMouseDown: zoom > minZoom ? onMouseDown : undefined,
+    onTouchStart: zoom > minZoom ? onTouchStart : undefined
+  }) : /*#__PURE__*/_react["default"].createElement(_util.Skeleton, {
+    width: "100%",
+    height: height
+  }));
+};
+ImageZoom.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/Picture.js

@@ -0,0 +1,159 @@
+"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.Picture = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 _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 Picture = exports.Picture = function Picture(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$zoom = _ref.zoom,
+    zoom = _ref$zoom === void 0 ? 2 : _ref$zoom;
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageData = _useState2[0],
+    setImageData = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showZoom = _useState4[0],
+    setShowZoom = _useState4[1];
+  var _useState5 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    zoomPos = _useState6[0],
+    setZoomPos = _useState6[1];
+  var imgRef = (0, _react.useRef)(null);
+
+  // Detecta si es móvil (simple)
+  var isMobile = typeof window !== 'undefined' && /Mobi|Android/i.test(window.navigator.userAgent);
+  (0, _react.useEffect)(function () {
+    var image = new Image();
+    image.src = src;
+    image.onload = function () {
+      setImageData({
+        width: image.width,
+        height: image.height
+      });
+    };
+  }, [src]);
+
+  // Tamaño del cuadro de zoom sobre la imagen
+  var ZOOM_BOX = 200;
+
+  // Calcula la posición del cuadro de zoom, limitado a la imagen
+  var rectX = 0,
+    rectY = 0;
+  if (imgRef.current) {
+    var imgRect = imgRef.current.getBoundingClientRect();
+    rectX = Math.max(0, Math.min(zoomPos.x - ZOOM_BOX / 2, imgRect.width - ZOOM_BOX));
+    rectY = Math.max(0, Math.min(zoomPos.y - ZOOM_BOX / 2, imgRect.height - ZOOM_BOX));
+  }
+  var handleMouseEnter = function handleMouseEnter() {
+    return setShowZoom(true);
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!imgRef.current) return;
+    var rect = imgRef.current.getBoundingClientRect();
+    var x = e.clientX - rect.left;
+    var y = e.clientY - rect.top;
+    setZoomPos({
+      x: x,
+      y: y
+    });
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    return setShowZoom(false);
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'inline-block',
+      position: 'relative'
+    }
+  }, imageData ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+    ref: imgRef,
+    src: src,
+    className: bordered ? 'bordered' : '',
+    alt: alt,
+    width: width,
+    height: height,
+    style: {
+      display: 'block',
+      cursor: !isMobile ? 'zoom-in' : undefined
+    },
+    onMouseEnter: !isMobile ? handleMouseEnter : undefined,
+    onMouseMove: !isMobile ? handleMouseMove : undefined,
+    onMouseLeave: !isMobile ? handleMouseLeave : undefined,
+    draggable: false
+  }), !isMobile && showZoom && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: rectX,
+      top: rectY,
+      width: ZOOM_BOX,
+      height: ZOOM_BOX,
+      background: 'rgba(0,0,0,0.18)',
+      border: '2px solid #2196f3',
+      pointerEvents: 'none',
+      zIndex: 10
+    }
+  }), !isMobile && showZoom && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      // left: zoomPos,
+      left: "calc(100% + 15px)",
+      // left: `calc(50% + ${zoomPos} + 16px)`,
+      width: ZOOM_BOX * zoom,
+      height: ZOOM_BOX * zoom,
+      border: '1px solid #ccc',
+      background: '#fff',
+      overflow: 'hidden',
+      zIndex: 1000,
+      boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: src,
+    alt: alt,
+    style: {
+      position: 'absolute',
+      left: -rectX * zoom,
+      top: -rectY * zoom,
+      width: imgRef.current ? imgRef.current.width * zoom : undefined,
+      height: imgRef.current ? imgRef.current.height * zoom : undefined,
+      userSelect: 'none',
+      pointerEvents: 'none'
+    },
+    draggable: false
+  }))) : /*#__PURE__*/_react["default"].createElement(_util.Skeleton, {
+    width: width,
+    height: height
+  }));
+};
+Picture.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,
+  zoom: _propTypes["default"].number
+};