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

react components based on react

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
 * 可拖拽，可放大缩小的图片组件
 */
import React, { useState, Fragment } from 'react';
import DragbleModal from './dragble_modal';
import PropTypes from 'prop-types';
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.createElement(DragbleModal, {
    onCancel: handleOnCancel,
    title: "\u56FE\u7247\u9884\u89C8"
  }, /*#__PURE__*/React.createElement("div", {
    className: "app-file-preview-image"
  }, /*#__PURE__*/React.createElement("img", {
    id: "zoomImage",
    src: path,
    onWheel: handleImageWheel,
    onMouseDown: handleMouseDown,
    onMouseMove: handleMouseMove,
    onMouseUp: handleMouseUpAndLeave,
    onMouseLeave: handleMouseUpAndLeave
  })));
};
var ZoomView = function ZoomView(props) {
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showModal = _useState2[0],
    setShowModal = _useState2[1];
  var path = props.path;
  var handleCloseModal = function handleCloseModal() {
    setShowModal(false);
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
    onClick: function onClick(e) {
      e.preventDefault();
      setShowModal(true);
    }
  }, /*#__PURE__*/React.createElement("img", {
    src: path
  })), showModal ? /*#__PURE__*/React.createElement(ZoomImage, {
    path: path,
    onCancel: handleCloseModal
  }) : null);
};
export var ZoomGroup = function ZoomGroup(props) {
  var path = props.path;
  var list = [];
  if (Array.isArray(path)) {
    list = path;
  } else {
    list = [path];
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "app-file-upload"
  }, /*#__PURE__*/React.createElement("ul", {
    className: "app-file-upload-preview no-list-style"
  }, list.map(function (item, index) {
    return /*#__PURE__*/React.createElement("li", {
      key: index,
      className: "file-wrapper super-file-wrapper"
    }, /*#__PURE__*/React.createElement(ZoomView, {
      key: index,
      path: item
    }));
  })));
};
ZoomImage.propTypes = {
  path: PropTypes.string,
  onCancel: PropTypes.func
};
export default ZoomImage;