react-svg-image-board/dist/js/components/SvgImageBoard/index.js

A react component. can drawing svg element to image board.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.SvgImageBoard = exports.ShapeTypeEnum = exports.BoardMode = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var React = _interopRequireWildcard(require("react"));

require("./styles/index.scss");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

// import { BoardMode, Shape, Rectangle, Size, Point } from '..';
var BoardMode;
exports.BoardMode = BoardMode;

(function (BoardMode) {
  BoardMode[BoardMode["ReadOnly"] = 0] = "ReadOnly";
  BoardMode[BoardMode["Edit"] = 1] = "Edit";
})(BoardMode || (exports.BoardMode = BoardMode = {}));

var ShapeTypeEnum;
exports.ShapeTypeEnum = ShapeTypeEnum;

(function (ShapeTypeEnum) {
  ShapeTypeEnum[ShapeTypeEnum["Rectangle"] = 0] = "Rectangle";
  ShapeTypeEnum[ShapeTypeEnum["Line"] = 1] = "Line";
  ShapeTypeEnum[ShapeTypeEnum["Circle"] = 2] = "Circle";
  ShapeTypeEnum[ShapeTypeEnum["Polyline"] = 3] = "Polyline";
  ShapeTypeEnum[ShapeTypeEnum["polygon"] = 4] = "polygon";
})(ShapeTypeEnum || (exports.ShapeTypeEnum = ShapeTypeEnum = {}));

;

var SvgImageBoard = /*#__PURE__*/function (_React$Component) {
  _inherits(SvgImageBoard, _React$Component);

  var _super = _createSuper(SvgImageBoard);

  function SvgImageBoard(props) {
    var _this;

    _classCallCheck(this, SvgImageBoard);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "_isMouseDown", false);

    _defineProperty(_assertThisInitialized(_this), "_mouseDownPostion", {
      x: 0,
      y: 0
    });

    _defineProperty(_assertThisInitialized(_this), "_lastMousePosition", {
      x: 0,
      y: 0
    });

    _defineProperty(_assertThisInitialized(_this), "resize", function (e) {
      if (_this.mainBoxRef.current) {
        var imageSize = _this.state.imageSize;

        _this.setImageDefaultRatio(imageSize);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "preLoadImage", function (imageUrl) {
      if (imageUrl) {
        var img = new Image();

        img.onload = function (e) {
          var imageSize = {
            width: img.naturalWidth,
            height: img.naturalHeight
          };

          _this.setState({
            imageUrl: imageUrl,
            imageSize: imageSize
          });

          _this.setImageDefaultRatio(imageSize);
        };

        img.src = imageUrl;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "setImageDefaultRatio", function (imageSize) {
      var _this$mainBoxRef$curr, _this$mainBoxRef$curr2, _this$mapscaleControl;

      if (!_this.props.imageUrl || !_this.mainBoxRef.current) return;
      var boxSize = {
        width: (_this$mainBoxRef$curr = _this.mainBoxRef.current) === null || _this$mainBoxRef$curr === void 0 ? void 0 : _this$mainBoxRef$curr.clientWidth,
        height: (_this$mainBoxRef$curr2 = _this.mainBoxRef.current) === null || _this$mainBoxRef$curr2 === void 0 ? void 0 : _this$mainBoxRef$curr2.clientHeight
      }; // 设置初始图像比例

      var scaleRatio = 1;
      var scalePoint = {
        x: 0,
        y: 0
      };

      if (boxSize.width / imageSize.width < boxSize.height / imageSize.height) {
        scaleRatio = boxSize.width / imageSize.width;
        scalePoint.y = (boxSize.height - imageSize.height * scaleRatio) / 2;
      } else {
        scaleRatio = boxSize.height / imageSize.height;
        scalePoint.x = (boxSize.width - imageSize.width * scaleRatio) / 2;
      }

      (_this$mapscaleControl = _this.mapscaleControlRef.current) === null || _this$mapscaleControl === void 0 ? void 0 : _this$mapscaleControl.setAttribute('transform', "matrix(".concat(scaleRatio, ",0,0,").concat(scaleRatio, ",").concat(scalePoint.x, ",").concat(scalePoint.y, ")"));
    });

    _defineProperty(_assertThisInitialized(_this), "onkeydown", function (e) {
      if (e.keyCode === 46) {
        // Delete rect
        e.stopImmediatePropagation();
        var _this$props = _this.props,
            mode = _this$props.mode,
            onDeletedShape = _this$props.onDeletedShape;
        var _this$state = _this.state,
            currentEditIndex = _this$state.currentEditIndex,
            shapes = _this$state.shapes;

        if (mode === BoardMode.Edit && currentEditIndex >= 0) {
          var removes = shapes.splice(currentEditIndex, 1);

          if (removes && removes.length > 0) {
            _this.setState({
              shapes: _toConsumableArray(shapes),
              currentEditIndex: -1
            });

            onDeletedShape === null || onDeletedShape === void 0 ? void 0 : onDeletedShape.call(_assertThisInitialized(_this), removes[0]);
          }
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "mainMouseDown", function (evt) {
      // e.button  0 : left button  1  是滚轮按键 2是右键
      var e = evt.nativeEvent;
      e.stopImmediatePropagation();
      if (e.button !== 0) return; // 仅支持左键操作

      _this._mouseTarget = e.target;
      _this._isMouseDown = true;
      var x = e.offsetX;
      var y = e.offsetY;
      _this._mouseDownPostion = {
        x: x,
        y: y
      };
      _this._lastMousePosition = _this._mouseDownPostion;
    });

    _defineProperty(_assertThisInitialized(_this), "mainMouseMove", function (evt) {
      var _this$mapscaleControl2, _matrix;

      if (!_this._isMouseDown) return;
      var e = evt.nativeEvent;
      e.stopImmediatePropagation();
      var mode = _this.props.mode;
      var x = e.offsetX;
      var y = e.offsetY;
      var translateX = x - _this._lastMousePosition.x;
      var translateY = y - _this._lastMousePosition.y;

      switch (mode) {
        case BoardMode.ReadOnly:
          // move backgroud
          var matrix = (_this$mapscaleControl2 = _this.mapscaleControlRef.current) === null || _this$mapscaleControl2 === void 0 ? void 0 : _this$mapscaleControl2.getCTM();
          matrix = (_matrix = matrix) === null || _matrix === void 0 ? void 0 : _matrix.translate(translateX / matrix.a, translateY / matrix.d); // 矩阵偏移函数

          _this.ResetTransform(matrix);

          _this._lastMousePosition = {
            x: x,
            y: y
          };
          break;

        case BoardMode.Edit:
          if (_this._mouseTarget && _this._mouseTarget.tagName === 'rect') {
            var _this$mapscaleControl3;

            // 移动矩形
            var _matrix2 = (_this$mapscaleControl3 = _this.mapscaleControlRef.current) === null || _this$mapscaleControl3 === void 0 ? void 0 : _this$mapscaleControl3.getCTM();

            var svgContainer = _this._mouseTarget.parentNode;

            var nowX = parseFloat(svgContainer.getAttribute('x') || '0') + translateX / _matrix2.a;

            var nowY = parseFloat(svgContainer.getAttribute('y') || '0') + translateY / _matrix2.d;

            svgContainer.setAttribute('x', nowX.toString());
            svgContainer.setAttribute('y', nowY.toString());
            _this._lastMousePosition = {
              x: x,
              y: y
            };
          } else if (_this._mouseTarget && _this._mouseTarget.tagName === 'circle') {
            var _this$mapscaleControl4;

            var _matrix3 = (_this$mapscaleControl4 = _this.mapscaleControlRef.current) === null || _this$mapscaleControl4 === void 0 ? void 0 : _this$mapscaleControl4.getCTM();

            var _svgContainer = _this._mouseTarget.parentNode;
            var oldItem = {
              x: parseFloat(_svgContainer.getAttribute('x') || '0'),
              y: parseFloat(_svgContainer.getAttribute('y') || '0'),
              width: parseFloat(_svgContainer.getAttribute('width') || '0'),
              height: parseFloat(_svgContainer.getAttribute('height') || '0')
            };
            var nowItem = {};
            var className = _this._mouseTarget.className.baseVal; // console.log('className', className);

            switch (className) {
              case 'left-top':
                nowItem = {
                  x: oldItem.x + translateX / _matrix3.a,
                  y: oldItem.y + translateY / _matrix3.d,
                  width: oldItem.width - translateX / _matrix3.a,
                  height: oldItem.height - translateY / _matrix3.d
                };

                if (nowItem.x < oldItem.x + oldItem.width && nowItem.y < oldItem.y + oldItem.height) {
                  _svgContainer.setAttribute('x', nowItem.x);

                  _svgContainer.setAttribute('y', nowItem.y);

                  _svgContainer.setAttribute('width', nowItem.width);

                  _svgContainer.setAttribute('height', nowItem.height);
                }

                break;

              case 'left':
                nowItem = {
                  x: oldItem.x + translateX / _matrix3.a,
                  width: oldItem.width - translateX / _matrix3.a
                };

                if (nowItem.x < oldItem.x + oldItem.width) {
                  _svgContainer.setAttribute('x', nowItem.x);

                  _svgContainer.setAttribute('width', nowItem.width);
                }

                break;

              case 'left-bottom':
                nowItem = {
                  x: oldItem.x + translateX / _matrix3.a,
                  width: oldItem.width - translateX / _matrix3.a,
                  height: oldItem.height + translateY / _matrix3.d
                };

                if (nowItem.x < oldItem.x + oldItem.width && nowItem.height > 0) {
                  _svgContainer.setAttribute('x', nowItem.x);

                  _svgContainer.setAttribute('width', nowItem.width);

                  _svgContainer.setAttribute('height', nowItem.height);
                }

                break;

              case 'top':
                nowItem = {
                  y: oldItem.y + translateY / _matrix3.d,
                  height: oldItem.height - translateY / _matrix3.d
                };

                if (nowItem.height > 0) {
                  _svgContainer.setAttribute('y', nowItem.y);

                  _svgContainer.setAttribute('height', nowItem.height);
                }

                break;

              case 'bottom':
                nowItem = {
                  height: oldItem.height + translateY / _matrix3.d
                };

                if (nowItem.height > 0) {
                  _svgContainer.setAttribute('height', nowItem.height);
                }

                break;

              case 'right-top':
                nowItem = {
                  y: oldItem.y + translateY / _matrix3.d,
                  width: oldItem.width + translateX / _matrix3.a,
                  height: oldItem.height - translateY / _matrix3.d
                };

                if (nowItem.width > 0 && nowItem.height > 0) {
                  _svgContainer.setAttribute('y', nowItem.y);

                  _svgContainer.setAttribute('width', nowItem.width);

                  _svgContainer.setAttribute('height', nowItem.height);
                }

                break;

              case 'right':
                nowItem = {
                  width: oldItem.width + translateX / _matrix3.a
                };

                if (nowItem.width > 0) {
                  _svgContainer.setAttribute('width', nowItem.width);
                }

                break;

              case 'right-bottom':
                nowItem = {
                  width: oldItem.width + translateX / _matrix3.a,
                  height: oldItem.height + translateY / _matrix3.d
                };

                if (nowItem.width > 0 && nowItem.height > 0) {
                  _svgContainer.setAttribute('width', nowItem.width);

                  _svgContainer.setAttribute('height', nowItem.height);
                }

                break;

              default:
                break;
            }

            _this._lastMousePosition = {
              x: x,
              y: y
            };
          } else {
            // 画虚线框
            _this.setDrawRect({
              x: Math.min(_this._mouseDownPostion.x, x),
              y: Math.min(_this._mouseDownPostion.y, y),
              height: Math.abs(_this._mouseDownPostion.y - y),
              width: Math.abs(_this._mouseDownPostion.x - x)
            });
          }

          break;

        default:
          break;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "mainMouseUp", function (evt) {
      if (!_this._isMouseDown) return;
      var e = evt.nativeEvent;
      e.stopImmediatePropagation();
      if (e.button !== 0) return; // 仅支持左键操作

      var _this$props2 = _this.props,
          mode = _this$props2.mode,
          onCreatedShape = _this$props2.onCreatedShape,
          onUpdatedShape = _this$props2.onUpdatedShape,
          drawShapeType = _this$props2.drawShapeType;
      var _this$state2 = _this.state,
          currentEditIndex = _this$state2.currentEditIndex,
          shapes = _this$state2.shapes;
      var x = e.offsetX;
      var y = e.offsetY;

      switch (mode) {
        case BoardMode.ReadOnly:
          break;

        case BoardMode.Edit:
          if (Math.abs(x - _this._mouseDownPostion.x) > 1 || Math.abs(y - _this._mouseDownPostion.y) > 1) {
            // 鼠标有移动
            // console.log('this._mouseTarget', this._mouseTarget);
            if (_this._mouseTarget) {
              if (_this._mouseTarget.tagName === 'image') {
                // 创建矩形
                if (drawShapeType === ShapeTypeEnum.Rectangle) {
                  if (Math.abs(x - _this._mouseDownPostion.x) > 5 && Math.abs(y - _this._mouseDownPostion.y) > 5) {
                    var _this$mapscaleControl5;

                    // 创建尺寸大于5*5
                    var matrix = (_this$mapscaleControl5 = _this.mapscaleControlRef.current) === null || _this$mapscaleControl5 === void 0 ? void 0 : _this$mapscaleControl5.getCTM();
                    var rectX = Math.min(_this._mouseDownPostion.x, x);
                    var rectY = Math.min(_this._mouseDownPostion.y, y);
                    rectX = (rectX - matrix.e) / matrix.a;
                    rectY = (rectY - matrix.f) / matrix.d;
                    var theWidth = Math.abs(_this._mouseDownPostion.x - x) / matrix.a;
                    var theHeight = Math.abs(_this._mouseDownPostion.y - y) / matrix.d;
                    var rect = {
                      type: ShapeTypeEnum.Rectangle,
                      shape: {
                        x: rectX,
                        y: rectY,
                        width: theWidth,
                        height: theHeight
                      }
                    };
                    shapes.push(rect);

                    _this.setState({
                      shapes: _toConsumableArray(shapes),
                      currentEditIndex: shapes.length - 1
                    });

                    onCreatedShape === null || onCreatedShape === void 0 ? void 0 : onCreatedShape.call(_assertThisInitialized(_this), rect);
                  }

                  _this.setDrawRect({
                    x: 0,
                    y: 0,
                    height: 0,
                    width: 0
                  });
                }
              } else if (_this._mouseTarget.tagName === 'rect') {
                var _this$mapscaleControl6;

                // 移动矩形
                var _matrix4 = (_this$mapscaleControl6 = _this.mapscaleControlRef.current) === null || _this$mapscaleControl6 === void 0 ? void 0 : _this$mapscaleControl6.getCTM();

                var translateX = x - _this._lastMousePosition.x;
                var translateY = y - _this._lastMousePosition.y;
                var svgContainer = _this._mouseTarget.parentNode;

                var nowX = parseFloat("".concat(svgContainer.getAttribute('x'))) + translateX / _matrix4.a;

                var nowY = parseFloat("".concat(svgContainer.getAttribute('y'))) + translateY / _matrix4.d;

                var _rect = shapes[currentEditIndex];
                var _shape = _rect.shape;
                _shape.x = nowX;
                _shape.y = nowY;
                _rect.shape = _shape;

                _this.setState({
                  shapes: _toConsumableArray(shapes)
                });

                onUpdatedShape === null || onUpdatedShape === void 0 ? void 0 : onUpdatedShape.call(_assertThisInitialized(_this), _rect);
              } else if (_this._mouseTarget.tagName === 'circle') {
                // 矩形拉伸
                var _svgContainer2 = _this._mouseTarget.parentNode;
                var _rect2 = shapes[currentEditIndex];
                _rect2.shape = {
                  x: parseFloat(_svgContainer2.getAttribute('x')),
                  y: parseFloat(_svgContainer2.getAttribute('y')),
                  width: parseFloat(_svgContainer2.getAttribute('width')),
                  height: parseFloat(_svgContainer2.getAttribute('height'))
                };

                _this.setState({
                  shapes: _toConsumableArray(shapes)
                });

                onUpdatedShape === null || onUpdatedShape === void 0 ? void 0 : onUpdatedShape.call(_assertThisInitialized(_this), _rect2);
              } else if (_this._mouseTarget.tagName === 'svg' && _this._mouseTarget.className.baseVal === 'mainBox') {
                _this.setDrawRect({
                  x: 0,
                  y: 0,
                  height: 0,
                  width: 0
                });
              }
            }
          }

          break;

        default:
          break;
      }

      _this._isMouseDown = false;
    });

    _defineProperty(_assertThisInitialized(_this), "mainMouseWheel", function (evt) {
      if (_this._isMouseDown) return;
      var _this$props$scaleNum = _this.props.scaleNum,
          scaleNum = _this$props$scaleNum === void 0 ? 0.1 : _this$props$scaleNum;
      var e = evt.nativeEvent;
      e.stopImmediatePropagation();
      var zoomScale = 1; // if (e.wheelDelta > 0) {

      if (e.deltaY < 0) {
        zoomScale += scaleNum;
      } else {
        zoomScale -= scaleNum;
      } // if (evt.target.id.indexOf("mainBox") != -1) { //鼠标在缩放控件外，主容器内  //|| evt.target.id == "tempImg"
      //   scalePoint = null;
      // }


      _this.setZoomScale(zoomScale, {
        'x': e.offsetX,
        'y': e.offsetY
      });
    });

    _defineProperty(_assertThisInitialized(_this), "setZoomScale", function (zoomScale, scalePoint) {
      var _this$mapscaleControl7;

      var matrix = (_this$mapscaleControl7 = _this.mapscaleControlRef.current) === null || _this$mapscaleControl7 === void 0 ? void 0 : _this$mapscaleControl7.getCTM();
      var _this$props3 = _this.props,
          _this$props3$maxScale = _this$props3.maxScale,
          maxScale = _this$props3$maxScale === void 0 ? 5 : _this$props3$maxScale,
          _this$props3$minScale = _this$props3.minScale,
          minScale = _this$props3$minScale === void 0 ? 0.1 : _this$props3$minScale;

      if ((matrix.a >= maxScale || matrix.d >= maxScale) && zoomScale > 1) {
        // 超出或达到最大比例
        return;
      } else if ((matrix.a <= minScale || matrix.d <= minScale) && zoomScale < 1) {
        // 超出或达到最小比例
        return;
      }

      if ((matrix.a * zoomScale > maxScale || matrix.d * zoomScale > maxScale) && zoomScale > 1) {
        // 放大比例超过最大比例，则取最大比例
        if (matrix.a > matrix.d) {
          zoomScale = maxScale / matrix.a;
        } else {
          zoomScale = maxScale / matrix.d;
        }
      } else if ((matrix.a * zoomScale < minScale || matrix.d * zoomScale < minScale) && zoomScale < 1) {
        // 缩小比例超过最小比例，则取最小比例
        if (matrix.a < matrix.d) {
          zoomScale = minScale / matrix.a;
        } else {
          zoomScale = minScale / matrix.d;
        }
      }

      var offsetX = 0; // 偏移缩放后实际的偏移量

      var offsetY = 0;

      if (scalePoint) {
        offsetX = scalePoint.x - matrix.e; // / matrix.a * matrix.a;//偏移缩放后实际的偏移量

        offsetY = scalePoint.y - matrix.f; // / matrix.d * matrix.d;
      } else {
        offsetX = _this.mainBoxRef.current.clientWidth * matrix.a / 2; // 缩放控件中心点X

        offsetY = _this.mainBoxRef.current.clientHeight * matrix.d / 2; // 缩放控件中心点Y
      }

      var translateX = offsetX - offsetX * zoomScale;
      var translateY = offsetY - offsetY * zoomScale;
      matrix = matrix.translate(translateX / matrix.a, translateY / matrix.d);
      matrix = matrix.scale(zoomScale);

      _this.ResetTransform(matrix);
    });

    _defineProperty(_assertThisInitialized(_this), "setOriginalScale", function () {
      var _this$mapscaleControl8;

      (_this$mapscaleControl8 = _this.mapscaleControlRef.current) === null || _this$mapscaleControl8 === void 0 ? void 0 : _this$mapscaleControl8.setAttribute('transform', 'matrix(1,0,0,1,0,0)');
    });

    _defineProperty(_assertThisInitialized(_this), "ResetTransform", function (Matrix) {
      var _this$mapscaleControl9;

      // console.info("last matrix(" + Matrix.a + "," + Matrix.b + "," + Matrix.c + "," + Matrix.d + "," + Matrix.e + "," + Matrix.f + ")");
      (_this$mapscaleControl9 = _this.mapscaleControlRef.current) === null || _this$mapscaleControl9 === void 0 ? void 0 : _this$mapscaleControl9.setAttribute('transform', 'matrix(' + Matrix.a + ',' + Matrix.b + ',' + Matrix.c + ',' + Matrix.d + ',' + Matrix.e + ',' + Matrix.f + ')');
    });

    _defineProperty(_assertThisInitialized(_this), "setDrawRect", function (rect) {
      var _this$drawRectRef$cur, _this$drawRectRef$cur2, _this$drawRectRef$cur3, _this$drawRectRef$cur4;

      (_this$drawRectRef$cur = _this.drawRectRef.current) === null || _this$drawRectRef$cur === void 0 ? void 0 : _this$drawRectRef$cur.setAttribute('height', "".concat(rect.height));
      (_this$drawRectRef$cur2 = _this.drawRectRef.current) === null || _this$drawRectRef$cur2 === void 0 ? void 0 : _this$drawRectRef$cur2.setAttribute('width', "".concat(rect.width));
      (_this$drawRectRef$cur3 = _this.drawRectRef.current) === null || _this$drawRectRef$cur3 === void 0 ? void 0 : _this$drawRectRef$cur3.setAttribute('x', "".concat(rect.x));
      (_this$drawRectRef$cur4 = _this.drawRectRef.current) === null || _this$drawRectRef$cur4 === void 0 ? void 0 : _this$drawRectRef$cur4.setAttribute('y', "".concat(rect.y));
    });

    _defineProperty(_assertThisInitialized(_this), "getData", function () {
      console.log('getData');
      return _this.state.shapes;
    });

    _this.state = {
      uploading: false,
      imageUrl: '',
      imageSize: {
        width: 100,
        height: 100
      },
      currentEditIndex: -1,
      shapes: props.initShapes || []
    };
    _this.mainBoxRef = React.createRef();
    _this.mapscaleControlRef = React.createRef();
    _this.drawRectRef = React.createRef();
    return _this;
  }

  _createClass(SvgImageBoard, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props$onLoad,
          _this2 = this;

      (_this$props$onLoad = this.props.onLoad) === null || _this$props$onLoad === void 0 ? void 0 : _this$props$onLoad.call(this, this);
      var imageUrl = this.props.imageUrl;
      setTimeout(function () {
        _this2.preLoadImage(imageUrl);
      }, 100);
      window.addEventListener('resize', this.resize);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.resize);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props4 = this.props,
          mode = _this$props4.mode,
          shapeClassName = _this$props4.shapeClassName;
      var _this$state3 = this.state,
          imageUrl = _this$state3.imageUrl,
          imageSize = _this$state3.imageSize,
          currentEditIndex = _this$state3.currentEditIndex,
          shapes = _this$state3.shapes;
      return imageUrl && /*#__PURE__*/React.createElement("div", {
        style: {
          height: '100%'
        },
        onContextMenu: function onContextMenu(e) {
          return e.preventDefault();
        },
        onSelect: function onSelect(e) {
          return e.preventDefault();
        }
      }, /*#__PURE__*/React.createElement("svg", {
        ref: this.mainBoxRef,
        className: "mainBox",
        onMouseDown: this.mainMouseDown,
        onMouseMove: this.mainMouseMove,
        onMouseUp: this.mainMouseUp,
        onWheel: this.mainMouseWheel,
        tabIndex: 0,
        onKeyDown: function onKeyDown(e) {
          return _this3.onkeydown(e.nativeEvent);
        }
      }, /*#__PURE__*/React.createElement("g", {
        ref: this.mapscaleControlRef,
        transform: "matrix(1,0,0,1,0,0)"
      }, /*#__PURE__*/React.createElement("image", {
        href: imageUrl,
        width: imageSize.width,
        height: imageSize.height
      }), shapes && shapes.map(function (item, index) {
        if (item.type === ShapeTypeEnum.Rectangle) {
          var rectInfo = item.shape;
          return /*#__PURE__*/React.createElement("svg", _extends({
            key: index // id={`svg_rect_${index}`}
            ,
            className: "shape ".concat(shapeClassName, " ").concat(currentEditIndex === index ? 'active' : '', " ").concat(mode === BoardMode.Edit ? 'edit' : '') // x={item.shape.x} y={item.shape.y} height={item.shape.height} width={item.shape.width}

          }, rectInfo, {
            onMouseDown: function onMouseDown(e) {
              return _this3.setState({
                currentEditIndex: index
              });
            }
          }), /*#__PURE__*/React.createElement("rect", {
            x: "0",
            y: "0",
            height: "100%",
            width: "100%"
          }), mode === BoardMode.Edit && currentEditIndex === index && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
            className: "left-top",
            r: "4",
            cx: "0",
            cy: "0"
          }), /*#__PURE__*/React.createElement("circle", {
            className: "left",
            r: "4",
            cx: "0",
            cy: "50%"
          }), /*#__PURE__*/React.createElement("circle", {
            className: "left-bottom",
            r: "4",
            cx: "0",
            cy: "100%"
          }), /*#__PURE__*/React.createElement("circle", {
            className: "top",
            r: "4",
            cx: "50%",
            cy: "0"
          }), /*#__PURE__*/React.createElement("circle", {
            className: "bottom",
            r: "4",
            cx: "50%",
            cy: "100%"
          }), /*#__PURE__*/React.createElement("circle", {
            className: "right-top",
            r: "4",
            cx: "100%",
            cy: "0"
          }), /*#__PURE__*/React.createElement("circle", {
            className: "right",
            r: "4",
            cx: "100%",
            cy: "50%"
          }), /*#__PURE__*/React.createElement("circle", {
            className: "right-bottom",
            r: "4",
            cx: "100%",
            cy: "100%"
          })));
        } else {
          return /*#__PURE__*/React.createElement("div", {
            key: index
          }, " ");
        }
      })), /*#__PURE__*/React.createElement("rect", {
        ref: this.drawRectRef,
        strokeWidth: "1",
        strokeDasharray: "6,2",
        stroke: "#15f635",
        fill: "none"
      })));
    }
  }]);

  return SvgImageBoard;
}(React.Component);

exports.SvgImageBoard = SvgImageBoard;

_defineProperty(SvgImageBoard, "propTypes", {
  imageUrl: _propTypes.default.string.isRequired,
  mode: _propTypes.default.oneOf([0, 1]).isRequired,
  initShapes: _propTypes.default.arrayOf(_propTypes.default.shape({
    key: _propTypes.default.any,
    type: _propTypes.default.oneOf([0, 1, 2, 3, 4]).isRequired,
    tag: _propTypes.default.any
  })),
  onLoad: _propTypes.default.func,
  onDeletedShape: _propTypes.default.func,
  onCreatedShape: _propTypes.default.func,
  onUpdatedShape: _propTypes.default.func,
  scaleNum: _propTypes.default.number,
  maxScale: _propTypes.default.number,
  minScale: _propTypes.default.number,
  shapeClassName: _propTypes.default.string,
  drawShapeType: _propTypes.default.oneOf([0, 1, 2, 3, 4])
});

_defineProperty(SvgImageBoard, "defaultProps", {
  scaleNum: 0.1,
  maxScale: 5,
  minScale: 0.1,
  shapeClassName: 'red',
  drawShapeType: ShapeTypeEnum.Rectangle
});

var _default = SvgImageBoard;
exports.default = _default;
//# sourceMappingURL=index.js.map