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

//@ts-nocheck
import { set, getOuterWidth, getOuterHeight } from 'rc-util/lib/Dom/css';
import { addClass, removeClass } from 'rc-util/lib/Dom/class';
import { getTransforms } from "../utils";
import { CLASS_MASK, CLASS_HIDDEN } from "./constants";
export default {
  cropBoxData: null,
  viewBoxImage: null,
  render: function render() {
    this.initContainer();
    this.initCropBox();
    this.limitCropBox(true, true);
  },
  initContainer: function initContainer() {
    //通过样式设置 不依赖父元素的prosition
    var element = this.element,
      container = this.container;
    var containerData = {
      width: getOuterWidth(element),
      height: getOuterHeight(element)
    };
    this.containerData = containerData;
    set(container, containerData);
  },
  initCropBox: function initCropBox() {
    var containerData = this.containerData,
      options = this.options;
    var cropBoxData = {
      // width: containerData.width,
      // height: containerData.height,
      width: 0,
      height: 0,
      left: 0,
      top: 0,
      minWidth: 0,
      minHeight: 0,
      maxWidth: containerData.width,
      maxHeight: containerData.height,
      minLeft: 0,
      maxLeft: containerData.width,
      minTop: 0,
      maxTop: containerData.height,
      oldLeft: 0,
      oldTop: 0
    };
    this.cropBoxData = cropBoxData;
    this.limitCropBox(true, true);
  },
  renderCropBox: function renderCropBox() {
    var cropBoxData = this.cropBoxData;
    if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {
      cropBoxData.left = cropBoxData.oldLeft;
    }
    if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) {
      cropBoxData.top = cropBoxData.oldTop;
    }
    cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);
    cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);
    this.limitCropBox(false, true);
    cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft);
    cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop);
    cropBoxData.oldLeft = cropBoxData.left;
    cropBoxData.oldTop = cropBoxData.top;
    set(this.cropBox, Object.assign({
      width: cropBoxData.width,
      height: cropBoxData.height
    }, getTransforms({
      translateX: cropBoxData.left,
      translateY: cropBoxData.top
    })));
    if (this.options.showMask) {
      this.renderPreview();
    }
  },
  clearCropBox: function clearCropBox() {
    // Clear the crop box
    if (this.cropped && !this.disabled) {
      Object.assign(this.cropBoxData, {
        left: 0,
        top: 0,
        width: 0,
        height: 0
      });
      this.cropped = false;
      this.renderCropBox();

      // Render canvas after crop box rendered
      // this.renderCanvas();
      removeClass(this.dragBox, CLASS_MASK);
      addClass(this.cropBox, CLASS_HIDDEN);
    }
    return this;
  },
  limitCropBox: function limitCropBox(sizeLimited, positionLimited) {
    // return
    var options = this.options,
      containerData = this.containerData,
      cropBoxData = this.cropBoxData,
      limited = this.limited;
    var _options$cropBoxLimit = options.cropBoxLimited,
      cropBoxLimited = _options$cropBoxLimit === void 0 ? {} : _options$cropBoxLimit;
    if (sizeLimited) {
      var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
      var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
      var maxCropBoxWidth = limited ? Math.min(containerData.width, cropBoxLimited.width, cropBoxLimited.width + cropBoxLimited.left, containerData.width - cropBoxLimited.left) : containerData.width;
      var maxCropBoxHeight = limited ? Math.min(containerData.height, cropBoxLimited.height, cropBoxLimited.height + cropBoxLimited.top, containerData.height - cropBoxLimited.top) : containerData.height;

      // The min/maxCropBoxWidth/Height must be less than container's width/height
      minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);
      minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height);

      // The minWidth/Height must be less than maxWidth/Height
      cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);
      cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);
      cropBoxData.maxWidth = maxCropBoxWidth;
      cropBoxData.maxHeight = maxCropBoxHeight;
    }
    if (positionLimited) {
      if (limited) {
        cropBoxData.minLeft = Math.max(0, cropBoxLimited.left);
        cropBoxData.minTop = Math.max(0, cropBoxLimited.top);
        cropBoxData.maxLeft = Math.min(containerData.width, cropBoxLimited.left + cropBoxLimited.width) - cropBoxData.width;
        cropBoxData.maxTop = Math.min(containerData.height, cropBoxLimited.top + cropBoxLimited.height) - cropBoxData.height;
      } else {
        cropBoxData.minLeft = 0;
        cropBoxData.minTop = 0;
        cropBoxData.maxLeft = containerData.width - cropBoxData.width;
        cropBoxData.maxTop = containerData.height - cropBoxData.height;
      }
    }
  }
};