@aliretail/cuckoo-official-retailforce-form-combo/es/components/Editor/lib/Crop.js

official-retailforce-form-combo

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { equals, is, update, remove } from 'ramda';
import interact from 'interactjs';
import { DeleteIcon, NumberIcon } from './Icons';

var Crop = /*#__PURE__*/function (_PureComponent) {
  _inheritsLoose(Crop, _PureComponent);

  function Crop() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;

    _this.handleResizeMove = function (e) {
      var _this$props = _this.props,
          index = _this$props.index,
          coordinate = _this$props.coordinate,
          _this$props$coordinat = _this$props.coordinate,
          x = _this$props$coordinat.x,
          y = _this$props$coordinat.y,
          coordinates = _this$props.coordinates,
          onResize = _this$props.onResize,
          onChange = _this$props.onChange;
      var _e$rect = e.rect,
          width = _e$rect.width,
          height = _e$rect.height;
      var _e$deltaRect = e.deltaRect,
          left = _e$deltaRect.left,
          top = _e$deltaRect.top;

      var nextCoordinate = _extends({}, coordinate, {
        x: x + left,
        y: y + top,
        width: width,
        height: height
      });

      var nextCoordinates = update(index, nextCoordinate)(coordinates);

      if (is(Function, onResize)) {
        onResize(nextCoordinate, index, nextCoordinates);
      }

      if (is(Function, onChange)) {
        onChange(nextCoordinate, index, nextCoordinates);
      }
    };

    _this.handleDragMove = function (e) {
      var _this$props2 = _this.props,
          index = _this$props2.index,
          coordinate = _this$props2.coordinate,
          _this$props2$coordina = _this$props2.coordinate,
          x = _this$props2$coordina.x,
          y = _this$props2$coordina.y,
          coordinates = _this$props2.coordinates,
          onDrag = _this$props2.onDrag,
          onChange = _this$props2.onChange;
      var dx = e.dx,
          dy = e.dy;

      var nextCoordinate = _extends({}, coordinate, {
        x: x + dx,
        y: y + dy
      });

      var nextCoordinates = update(index, nextCoordinate)(coordinates);

      if (is(Function, onDrag)) {
        onDrag(nextCoordinate, index, nextCoordinates);
      }

      if (is(Function, onChange)) {
        onChange(nextCoordinate, index, nextCoordinates);
      }
    };

    _this.handleDelete = function () {
      var _this$props3 = _this.props,
          index = _this$props3.index,
          coordinate = _this$props3.coordinate,
          onDelete = _this$props3.onDelete,
          coordinates = _this$props3.coordinates,
          layout = _this$props3.layout;

      if (layout !== 'custom') {
        return;
      }

      var nextCoordinates = remove(index, 1)(coordinates);

      if (is(Function, onDelete)) {
        onDelete(coordinate, index, nextCoordinates);
      }
    };

    return _this;
  }

  var _proto = Crop.prototype;

  _proto.componentDidMount = function componentDidMount() {
    interact(this.crop).draggable({}).resizable({
      edges: {
        left: true,
        right: true,
        bottom: true,
        top: true
      }
    }).on('dragmove', this.handleDragMove).on('resizemove', this.handleResizeMove);
  };

  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    // reduce uncessary update
    return !equals(nextProps.coordinate, this.props.coordinate) || nextProps.index !== this.props.index;
  };

  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (!nextProps.src !== this.props.src) {
      this.forceUpdate();
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    interact(this.crop).unset();
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props4 = this.props,
        coordinate = _this$props4.coordinate,
        index = _this$props4.index,
        layout = _this$props4.layout;
    var style = {
      width: '100%',
      position: 'absolute',
      left: 0,
      top: 0,
      height: '100%'
    };
    var style2 = {
      position: 'relative',
      width: '100%',
      height: '100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      color: '#ff6900',
      zIndex: 0,
      whiteSpace: 'pre-wrap',
      lineHeight: .9,
      textAlign: 'center'
    };

    var tips = function tips() {
      var col = coordinate.width / 32 <= 2 ? '\n' : ' ';
      return "" + parseInt(coordinate.width / 32 * 125) + col + "x" + col + parseInt(coordinate.height / 32 * 125);
    };

    return /*#__PURE__*/React.createElement("div", {
      style: Crop.cropStyle(coordinate),
      className: "crop-box",
      ref: function ref(crop) {
        return _this2.crop = crop;
      }
    }, coordinate.imgUrl ? /*#__PURE__*/React.createElement("img", {
      src: coordinate.imgUrl,
      style: style
    }) : /*#__PURE__*/React.createElement("span", {
      style: style2
    }, layout === 'custom' ? tips() : coordinate.tips), layout === 'custom' ? /*#__PURE__*/React.createElement(DeleteIcon, {
      onClick: this.handleDelete
    }) : null);
  };

  return Crop;
}(PureComponent);

Crop.cropStyle = function (coordinate) {
  var x = coordinate.x,
      y = coordinate.y,
      width = coordinate.width,
      height = coordinate.height;
  return {
    // border: '1px dotted rgba(153,153,153,1)',
    // background: 'rgba(153,153,153,0.3)',
    display: 'inline-block',
    position: 'absolute',
    width: width,
    height: height,
    top: y,
    left: x,
    // overflow: 'hidden',
    boxShadow: '0 0 6px #000',
    background: '#8c8c8c',
    opacity: 0.6,
    touchAction: 'none'
  };
};

export var coordinateType = PropTypes.shape({
  x: PropTypes.number.isRequired,
  y: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired
});
Crop.propTypes = {
  coordinate: coordinateType.isRequired,
  index: PropTypes.number.isRequired,
  onResize: PropTypes.func,
  // eslint-disable-line
  onDrag: PropTypes.func,
  // eslint-disable-line
  onDelete: PropTypes.func,
  // eslint-disable-line
  onChange: PropTypes.func,
  // eslint-disable-line
  coordinates: PropTypes.array // eslint-disable-line

};
export default Crop;