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

official-retailforce-form-combo

import _extends from "@babel/runtime/helpers/extends";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component, PureComponent } from 'react';
import { both, clone, is, complement, equals, map, addIndex } from 'ramda';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import Crop, { coordinateType } from './Crop';

var isValidPoint = function isValidPoint(point) {
  if (point === void 0) {
    point = {};
  }

  var strictNumber = function strictNumber(number) {
    return both(is(Number), complement(equals(NaN)))(number);
  };

  return strictNumber(point.x) && strictNumber(point.y);
};

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

  function MultiCrops() {
    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.drawingIndex = -1;
    _this.pointA = {};
    _this.id = shortid.generate();

    _this.renderCrops = function (props) {
      if (!(props.coordinates && props.coordinates.length)) {
        return;
      } // const result = props.coordinates.map((coor, index) => <Crop key={coor.id || index} index={index} coordinate={coor} {...props} />);
      // return result;


      var indexedMap = addIndex(map);
      return indexedMap(function (coor, index) {
        return /*#__PURE__*/React.createElement(Crop // improve performance when delet crop in middle array
        , _extends({
          key: coor.id || index,
          index: index,
          coordinate: coor
        }, props));
      })(props.coordinates);
    };

    _this.getCursorPosition = function (e) {
      var _this$container$getBo = _this.container.getBoundingClientRect(),
          left = _this$container$getBo.left,
          top = _this$container$getBo.top;

      return {
        x: e.clientX - left,
        y: e.clientY - top
      };
    };

    _this.handleMouseDown = function (e) {
      var coordinates = _this.props.coordinates;

      if (e.target === _this.img || e.target === _this.container) {
        var _this$getCursorPositi = _this.getCursorPosition(e),
            x = _this$getCursorPositi.x,
            y = _this$getCursorPositi.y;

        _this.drawingIndex = coordinates.length;
        _this.pointA = {
          x: x,
          y: y
        };
        _this.id = shortid.generate();
      }
    };

    _this.handleMouseMove = function (e) {
      var _this$props = _this.props,
          onDraw = _this$props.onDraw,
          onChange = _this$props.onChange,
          coordinates = _this$props.coordinates;

      var _assertThisInitialize = _assertThisInitialized(_this),
          pointA = _assertThisInitialize.pointA;

      if (isValidPoint(pointA)) {
        var pointB = _this.getCursorPosition(e);

        _this.pointB = pointB; // get the drawing coordinate

        var coordinate = {
          x: Math.min(pointA.x, pointB.x),
          y: Math.min(pointA.y, pointB.y),
          width: Math.abs(pointA.x - pointB.x),
          height: Math.abs(pointA.y - pointB.y),
          id: _this.id
        };
        var nextCoordinates = clone(coordinates);
        nextCoordinates[_this.drawingIndex] = coordinate;

        if (is(Function, onDraw)) {
          onDraw(coordinate, _this.drawingIndex, nextCoordinates);
        }

        if (is(Function, onChange)) {
          onChange(coordinate, _this.drawingIndex, nextCoordinates);
        }
      }
    };

    _this.handlMouseUp = function () {
      // if (!this.pointB || Math.abs(this.pointA.x - this.pointB.x) < 5 && Math.abs(this.pointA.y - this.pointB.y) < 5) {
      //   console.log('trigger click');
      //   return;
      // }
      _this.pointA = {};
      _this.pointB = {};
      _this.props.reSize && _this.props.reSize();
    };

    return _this;
  }

  var _proto = MultiCrops.prototype;

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

    var _this$props2 = this.props,
        src = _this$props2.src,
        width = _this$props2.width,
        height = _this$props2.height,
        onLoad = _this$props2.onLoad; // const { clicked } = this.state

    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'inline-block',
        position: 'relative'
      },
      onMouseDown: this.handleMouseDown,
      onMouseMove: this.handleMouseMove,
      onMouseUp: this.handlMouseUp,
      ref: function ref(container) {
        return _this2.container = container;
      }
    }, /*#__PURE__*/React.createElement("img", {
      ref: function ref(img) {
        return _this2.img = img;
      },
      src: src,
      width: width,
      height: height,
      onLoad: onLoad,
      alt: "",
      draggable: false
    }), this.renderCrops(this.props));
  };

  return MultiCrops;
}(PureComponent);

var string = PropTypes.string,
    arrayOf = PropTypes.arrayOf,
    number = PropTypes.number,
    func = PropTypes.func;
MultiCrops.propTypes = {
  coordinates: arrayOf(coordinateType),
  src: string,
  width: number,
  // eslint-disable-line
  height: number,
  // eslint-disable-line
  onDraw: func,
  // eslint-disable-line
  onChange: func,
  // eslint-disable-line
  onLoad: func // eslint-disable-line

};
MultiCrops.defaultProps = {
  coordinates: [],
  src: ''
};
export default MultiCrops;