knk/lib/components/basic/view/zoom_image.js

react components based on react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ZoomGroup = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _dragble_modal = _interopRequireDefault(require("./dragble_modal"));
var _propTypes = _interopRequireDefault(require("prop-types"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
 * 可拖拽，可放大缩小的图片组件
 */

var dragging = false;
var startX = null;
var startY = null;
var endX = null;
var endY = null;
var recordX = 0;
var recordY = 0;
var zoomPrecent = null;
var ZoomImage = function ZoomImage(props) {
  var handleImageWheel = function handleImageWheel(e) {
    var body = document.getElementsByTagName('body')[0];
    body.style.overflow = 'hidden';
    var zoomImage = document.getElementById('zoomImage');
    var zoom = parseInt(zoomImage.getAttribute('zoom'), 10) || 100;
    zoom += e.deltaY / 10;
    if (zoom > 100 && zoom < 300) {
      zoomPrecent = zoom / 100;
      zoomImage.style.transform = "scale(".concat(zoomPrecent, ", ").concat(zoomPrecent, ")");
      zoomImage.setAttribute('zoom', "".concat(zoom, "%"));
    } else {
      return false;
    }
  };
  var handleMouseDown = function handleMouseDown(e) {
    e.stopPropagation();
    e.preventDefault();
    startX = e.clientX - recordX * 2;
    startY = e.clientY - recordY * 2;
    dragging = true;
  };
  var handleMouseMove = function handleMouseMove(e) {
    e.stopPropagation();
    e.preventDefault();
    if (dragging) {
      var zoomImage = document.getElementById('zoomImage');
      endX = e.clientX;
      endY = e.clientY;

      //  控制拖拽灵敏度
      recordX = (endX - startX) / 2;
      recordY = (endY - startY) / 2;
      zoomImage.style.transform = "scale(".concat(zoomPrecent, ", ").concat(zoomPrecent, ") translate(").concat(recordX, "px, ").concat(recordY, "px)");
    }
  };
  var handleMouseUpAndLeave = function handleMouseUpAndLeave(e) {
    e.stopPropagation();
    e.preventDefault();
    dragging = false;
    startX = null;
    startY = null;
    endX = null;
    endY = null;
  };
  var handleOnCancel = function handleOnCancel() {
    var onCancel = props.onCancel;
    var body = document.getElementsByTagName('body')[0];
    body.style.overflow = '';
    onCancel();
  };
  var path = props.path;
  return /*#__PURE__*/_react.default.createElement(_dragble_modal.default, {
    onCancel: handleOnCancel,
    title: "\u56FE\u7247\u9884\u89C8"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "app-file-preview-image"
  }, /*#__PURE__*/_react.default.createElement("img", {
    id: "zoomImage",
    src: path,
    onWheel: handleImageWheel,
    onMouseDown: handleMouseDown,
    onMouseMove: handleMouseMove,
    onMouseUp: handleMouseUpAndLeave,
    onMouseLeave: handleMouseUpAndLeave
  })));
};
var ZoomView = function ZoomView(props) {
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    showModal = _useState2[0],
    setShowModal = _useState2[1];
  var path = props.path;
  var handleCloseModal = function handleCloseModal() {
    setShowModal(false);
  };
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
    onClick: function onClick(e) {
      e.preventDefault();
      setShowModal(true);
    }
  }, /*#__PURE__*/_react.default.createElement("img", {
    src: path
  })), showModal ? /*#__PURE__*/_react.default.createElement(ZoomImage, {
    path: path,
    onCancel: handleCloseModal
  }) : null);
};
var ZoomGroup = exports.ZoomGroup = function ZoomGroup(props) {
  var path = props.path;
  var list = [];
  if (Array.isArray(path)) {
    list = path;
  } else {
    list = [path];
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "app-file-upload"
  }, /*#__PURE__*/_react.default.createElement("ul", {
    className: "app-file-upload-preview no-list-style"
  }, list.map(function (item, index) {
    return /*#__PURE__*/_react.default.createElement("li", {
      key: index,
      className: "file-wrapper super-file-wrapper"
    }, /*#__PURE__*/_react.default.createElement(ZoomView, {
      key: index,
      path: item
    }));
  })));
};
ZoomImage.propTypes = {
  path: _propTypes.default.string,
  onCancel: _propTypes.default.func
};
var _default = exports.default = ZoomImage;