nicecode-v2/packages/meta/es/ImageEditor/cropper/index.js

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class;
//@ts-nocheck
import { get, isPlainObject, isString, isNil } from '@zhst/func';
import { addClass, removeClass } from 'rc-util/lib/Dom/class';
import { Mixin, dispatchEvent } from "../utils";
import { NAMESPACE, CLASS_HIDDEN, CLASS_MASK, EVENT_CROP_CHANGE, EVENT_CROP_END } from "./constants";
import TEMPLATE from "./template";
import Render from "./render";
import Event from "./event";
import ViewerBridge from "./viewerBridge";
import Preview from "./preview";
import "./index.module.scss";
var Cropper = (_dec = Mixin(Render, Event, ViewerBridge, Preview), _dec(_class = /*#__PURE__*/function () {
  function Cropper(element, options) {
    _classCallCheck(this, Cropper);
    /* 容器:挂在的节点 */
    _defineProperty(this, "element", void 0);
    /* 配置项 */
    _defineProperty(this, "options", void 0);
    /* 是否截图 */
    _defineProperty(this, "cropped", void 0);
    /* crop框是否有限制 */
    _defineProperty(this, "limited", void 0);
    /* 维护图片对象  */
    _defineProperty(this, "image", void 0);
    /* 所有事件 */
    // eventHandleList: Array<any>;
    _defineProperty(this, "eventHandleList", []);
    /* 方便访问dom元素 */
    _defineProperty(this, "container", void 0);
    _defineProperty(this, "dragBox", void 0);
    _defineProperty(this, "cropBox", void 0);
    _defineProperty(this, "viewBox", void 0);
    this.element = element;
    this.options = Object.assign({}, isPlainObject(options) && options);
    this.limited = isNil(this.options.cropBoxLimited) ? false : true;
    this.cropped = false;
    this.init();
  }
  _createClass(Cropper, [{
    key: "init",
    value: function () {
      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
        return _regeneratorRuntime().wrap(function _callee$(_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
              this.build();
              //@ts-ignore
              this.bind();
              //@ts-ignore
              this.render();
              //@ts-ignore
              this.initPreview();
              if (this.options.viewer) {
                //@ts-ignore
                this.initBridge();
              }
              //初始化crop
              this.initDefaultCropBox();
            case 6:
            case "end":
              return _context.stop();
          }
        }, _callee, this);
      }));
      function init() {
        return _init.apply(this, arguments);
      }
      return init;
    }()
  }, {
    key: "initDefaultCropBox",
    value: function initDefaultCropBox() {
      var _ref = this.options || {},
        initialCropBoxData = _ref.initialCropBoxData;

      // const initialCropBoxData = {
      //     height: 158.02902221679688,
      //     left: 410.132080078125,
      //     top: 133.201904296875,
      //     width: 211.97821044921875,
      // };
      if (initialCropBoxData) {
        this.cropped = true;
        var showMask = this.options.showMask;
        showMask && addClass(this.dragBox, CLASS_MASK);
        removeClass(this.cropBox, CLASS_HIDDEN);
        //@ts-ignore
        this.cropBoxData = _objectSpread(_objectSpread({}, this.cropBoxData), initialCropBoxData);
        //@ts-ignore
        this.renderCropBox();
        var hasCrop = get(this, 'cropBoxData.width', 0) !== 0 && get(this, 'cropBoxData.height', 0) !== 0;
        //@ts-ignore
        dispatchEvent(this.element, EVENT_CROP_CHANGE, hasCrop ? this === null || this === void 0 ? void 0 : this.cropBoxData : null);
        //@ts-ignore
        hasCrop && dispatchEvent(this.element, EVENT_CROP_END, hasCrop ? this === null || this === void 0 ? void 0 : this.cropBoxData : null);
      }
    }
  }, {
    key: "load",
    value: function load() {
      var _this = this;
      return new Promise(function (resolve, reject) {
        var propImage = _this.options.image;
        if (isString(propImage)) {
          var image = new Image();
          var imgUrl = propImage;
          image.crossOrigin = 'anonymous';
          image.src = imgUrl;
          image.onload = function () {
            _this.image = image;
            resolve(image);
          };
          image.onerror = function (err) {
            reject(err);
          };
        } else {
          _this.image = propImage;
          resolve(propImage);
        }
      });
    }
  }, {
    key: "build",
    value: function build() {
      // Create cropper elements
      var template = document.createElement('div');
      template.innerHTML = TEMPLATE;
      var container = template.querySelector(".".concat(NAMESPACE, "-container"));
      var dragBox = container.querySelector(".".concat(NAMESPACE, "-drag-box"));
      var cropBox = container.querySelector(".".concat(NAMESPACE, "-crop-box"));
      var viewBox = container.querySelector(".".concat(NAMESPACE, "-view-box"));
      this.element.appendChild(container);
      this.container = container;
      this.dragBox = dragBox;
      this.cropBox = cropBox;
      this.viewBox = viewBox;

      //先隐藏crop
      addClass(cropBox, CLASS_HIDDEN);
    }
  }, {
    key: "destroy",
    value: function destroy() {
      var _this$element, _this$element$removeC;
      if (this.options.viewer) {
        //@ts-ignore
        this.clearBridge();
      }
      //清理事件
      //@ts-ignore
      this.unbind();
      //清理dom
      (_this$element = this.element) === null || _this$element === void 0 || (_this$element$removeC = _this$element.removeChild) === null || _this$element$removeC === void 0 || _this$element$removeC.call(_this$element, this.container);
    }
  }]);
  return Cropper;
}()) || _class);
export default Cropper;