'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _utils = require('../utils/utils');

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

var draggableEvents = {
	touch: {
		// react代理事件
		react: {
			down: 'onTouchStart', // 按下
			mouseDown: 'onMouseDown',
			drag: 'onTouchMove', // 拖拽
			drop: 'onTouchEnd', // 抬起
			move: 'onTouchMove',
			mouseMove: 'onMouseMove',
			up: 'onTouchEnd',
			mouseUp: 'onMouseUp'
		},
		// 原生事件
		native: {
			down: 'touchstart', // 按下
			mouseDown: 'mousedown',
			drag: 'touchmove', // 拖拽
			drop: 'touchend', // 抬起
			move: 'touchmove',
			mouseMove: 'mousemove',
			up: 'touchend',
			mouseUp: 'mouseup'
		}
	},
	desktop: {
		// react代理事件
		react: {
			down: 'onMouseDown', // 按下
			drag: 'onDragOver', // 拖拽
			drop: 'onDrop', // 抬起
			move: 'onMouseMove',
			up: 'onMouseUp'
		},
		// 原生事件
		native: {
			down: 'mousedown', // 按下
			drag: 'dragStart', // 拖拽
			drop: 'drop', // 抬起
			move: 'mousemove',
			up: 'mouseup'
		}
	}
};
var deviceEvents = _utils.isTouchDevice ? draggableEvents.touch : draggableEvents.desktop;

var pixelRatio = typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1;

// 绘制一个圆角矩形.
var drawRoundedRect = function drawRoundedRect(context, x, y, width, height, borderRadius) {
	if (borderRadius === 0) {
		context.rect(x, y, width, height);
	} else {
		var widthMinusRad = width - borderRadius;
		var heightMinusRad = height - borderRadius;
		context.translate(x, y);
		context.arc(borderRadius, borderRadius, borderRadius, Math.PI, Math.PI * 1.5);
		context.lineTo(widthMinusRad, 0);
		context.arc(widthMinusRad, borderRadius, borderRadius, Math.PI * 1.5, Math.PI * 2);
		context.lineTo(width, heightMinusRad);
		context.arc(widthMinusRad, heightMinusRad, borderRadius, Math.PI * 2, Math.PI * 0.5);
		context.lineTo(borderRadius, height);
		context.arc(borderRadius, heightMinusRad, borderRadius, Math.PI * 0.5, Math.PI);
		context.translate(-x, -y);
	}
};

var ImgsCrop = function (_React$Component) {
	(0, _inherits3.default)(ImgsCrop, _React$Component);

	function ImgsCrop(props) {
		(0, _classCallCheck3.default)(this, ImgsCrop);

		var _this = (0, _possibleConstructorReturn3.default)(this, (ImgsCrop.__proto__ || Object.getPrototypeOf(ImgsCrop)).call(this, props));

		_this.setCanvas = function (canvas) {
			return _this.canvas = canvas;
		};

		_this.handleMouseDown = function (e) {
			e = e || window.event;
			// 多指触控
			if (e.touches && e.touches.length > 1) return;
			// 如果e是touch事件，则preventDefault保持相应的鼠标事件也被稍后触发。去除
			e.preventDefault();
			_this.setState({
				drag: true,
				mx: null,
				my: null
			});
		};

		_this.handleMouseUp = function () {
			if (_this.state.drag) {
				_this.setState({ drag: false });
				_this.props.onMouseUp();
			}
		};

		_this.handleMouseMove = function (e) {

			e = e || window.event;

			if (_this.state.drag === false) {
				return;
			}
			// 多指触控
			if (e.touches && e.touches.length > 1) return;

			var mousePositionX = e.targetTouches ? e.targetTouches[0].pageX : e.clientX;
			var mousePositionY = e.targetTouches ? e.targetTouches[0].pageY : e.clientY;

			var newState = {
				mx: mousePositionX,
				my: mousePositionY
			};

			var _this$props = _this.props,
			    rotate = _this$props.rotate,
			    scale = _this$props.scale;
			var _this$state = _this.state,
			    image = _this$state.image,
			    mx = _this$state.mx,
			    my = _this$state.my;


			rotate %= 360;
			rotate = rotate < 0 ? rotate + 360 : rotate;

			if (mx && my) {
				mx = mx - mousePositionX;
				my = my - mousePositionY;

				var width = image.width * scale;
				var height = image.height * scale;

				var _this$getCroppingRect = _this.getCroppingRect(),
				    lastX = _this$getCroppingRect.x,
				    lastY = _this$getCroppingRect.y;

				lastX *= width;
				lastY *= height;

				// 计算向量
				var toRadians = function toRadians(degree) {
					return degree * (Math.PI / 180);
				};
				var cos = Math.cos(toRadians(rotate));
				var sin = Math.sin(toRadians(rotate));

				var x = lastX + mx * cos + my * sin;
				var y = lastY + -mx * sin + my * cos;

				var relativeWidth = 1 / _this.props.scale * _this.getXScale();
				var relativeHeight = 1 / _this.props.scale * _this.getYScale();

				var position = {
					x: x / width + relativeWidth / 2,
					y: y / height + relativeHeight / 2
				};

				_this.props.onPositionChange(position);

				newState.image = (0, _extends3.default)({}, _this.state.image, position);
			}

			_this.setState(newState);
			/**
    * 移动回掉
    */
			_this.props.onMouseMove(e);
		};

		_this.handleDragOver = function (e) {
			// 对于touch端它属于touchmove事件
			e = e || window.event;
			// 多指触控
			if (e.touches && e.touches.length > 1) return;
			e.preventDefault();
		};

		_this.handleDrop = function () {
			var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.event;

			// 临时注释
			// e.stopPropagation();
			// e.preventDefault();
			// 支持desktop下直接拖入图片
			if (e.dataTransfer) {
				e.stopPropagation();
				e.preventDefault();
				var _e$dataTransfer = e.dataTransfer,
				    files = _e$dataTransfer.files,
				    items = _e$dataTransfer.items;


				if (files && files.length) {
					// 本地拖入
					_this.props.onDropFile(e);
					_this.loadImageFile(files[0]);
				} else if (items && items.length) {
					// 网页链接拖入
					(0, _utils.retrieveImageURL)(items, function (src) {
						return _this.loadImage(src);
					});
				}
			}
		};

		_this.state = {
			drag: false,
			my: null,
			mx: null,
			image: {
				x: 0.5,
				y: 0.5
			}
		};
		return _this;
	}

	(0, _createClass3.default)(ImgsCrop, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			var src = this.props.src;

			var context = _reactDom2.default.findDOMNode(this.canvas).getContext('2d');
			if (src) {
				this.loadImage(src);
			}
			this.paint(context);
			if (document) {
				var nativeEvents = deviceEvents.native;
				// 使用原生绑定
				document.addEventListener(nativeEvents.move, this.handleMouseMove, false);
				document.addEventListener(nativeEvents.up, this.handleMouseUp, false);
				if (_utils.isTouchDevice) {
					document.addEventListener(nativeEvents.mouseMove, this.handleMouseMove, false);
					document.addEventListener(nativeEvents.mouseUp, this.handleMouseUp, false);
				}
			}
		}
	}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(newProps) {
			if (newProps.src && this.props.src !== newProps.src || this.props.width !== newProps.width || this.props.height !== newProps.height) {
				this.loadImage(newProps.src);
			}
		}
	}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps, prevState) {
			var canvas = _reactDom2.default.findDOMNode(this.canvas);
			var context = canvas.getContext('2d');
			context.clearRect(0, 0, canvas.width, canvas.height);
			this.paint(context);
			this.paintImage(context, this.state.image, this.props.border);

			if (prevProps.src !== this.props.src || prevProps.width !== this.props.width || prevProps.height !== this.props.height || prevProps.position !== this.props.position || prevProps.scale !== this.props.scale || prevProps.rotate !== this.props.rotate || prevState.my !== this.state.my || prevState.mx !== this.state.mx || prevState.image.x !== this.state.image.x || prevState.image.y !== this.state.image.y) {
				this.props.onImageChange();
			}
		}
		/**
   * 去除事件
   */

	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			if (document) {
				var nativeEvents = deviceEvents.native;
				document.removeEventListener(nativeEvents.move, this.handleMouseMove, false);
				document.removeEventListener(nativeEvents.up, this.handleMouseUp, false);
				if (_utils.isTouchDevice) {
					document.removeEventListener(nativeEvents.mouseMove, this.handleMouseMove, false);
					document.removeEventListener(nativeEvents.mouseUp, this.handleMouseUp, false);
				}
			}
		}
		/**
   * 获取canvas节点
   */

	}, {
		key: 'paint',

		/**
   * 绘制当前的canvas
   */
		value: function paint(context) {
			var _props = this.props,
			    borderRadius = _props.borderRadius,
			    color = _props.color;


			context.save();
			// 画布的参数，不影响容器
			context.scale(pixelRatio, pixelRatio);
			context.translate(0, 0);
			// 填充色
			context.fillStyle = 'rgba(' + color.slice(0, 4).join(',') + ')';

			var dimensions = this.getDimensions();

			var _getBorders = this.getBorders(dimensions.border),
			    _getBorders2 = (0, _slicedToArray3.default)(_getBorders, 2),
			    borderSizeX = _getBorders2[0],
			    borderSizeY = _getBorders2[1];

			var height = dimensions.canvas.height;
			var width = dimensions.canvas.width;

			// 将边框半径在零，宽度一半，高度一半之间
			borderRadius = Math.max(borderRadius, 0);
			borderRadius = Math.min(borderRadius, width / 2 - borderSizeX, height / 2 - borderSizeY);
			// 开始绘制
			context.beginPath();
			// 内，可能圆形
			drawRoundedRect(context, borderSizeX, borderSizeY, width - borderSizeX * 2, height - borderSizeY * 2, borderRadius);
			// 外，逆时针绘制
			context.rect(width, 0, -width, height);
			context.fill('evenodd');
			context.restore();
		}
		/**
   * 绘制图片
   */

	}, {
		key: 'paintImage',
		value: function paintImage(context, image, border) {
			var scaleFactor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : pixelRatio;

			if (image.resource) {
				var rotate = this.props.rotate;

				var position = this.calculatePosition(image, border);

				context.save();

				context.translate(context.canvas.width / 2, context.canvas.height / 2);
				context.rotate(rotate * Math.PI / 180);
				context.translate(-(context.canvas.width / 2), -(context.canvas.height / 2));

				if (this.isVertical()) {
					context.translate((context.canvas.width - context.canvas.height) / 2, (context.canvas.height - context.canvas.width) / 2);
				}

				context.scale(scaleFactor, scaleFactor);
				// 在源图像上方显示目标图像
				context.globalCompositeOperation = 'destination-over';
				context.drawImage(image.resource, position.x, position.y, position.width, position.height);

				context.restore();
			}
		}
		/**
   * 是否选择超过180
   */

	}, {
		key: 'isVertical',
		value: function isVertical() {
			return this.props.rotate % 180 !== 0;
		}
		/**
   * 边框
   */

	}, {
		key: 'getBorders',
		value: function getBorders() {
			var border = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.border;

			return Array.isArray(border) ? border : [border, border];
		}
		/**
   * canvas外形尺寸
   */

	}, {
		key: 'getDimensions',
		value: function getDimensions() {
			var _props2 = this.props,
			    width = _props2.width,
			    height = _props2.height,
			    rotate = _props2.rotate,
			    border = _props2.border;


			var canvas = {};

			var _getBorders3 = this.getBorders(border),
			    _getBorders4 = (0, _slicedToArray3.default)(_getBorders3, 2),
			    borderX = _getBorders4[0],
			    borderY = _getBorders4[1];

			var canvasWidth = width;
			var canvasHeight = height;

			if (this.isVertical()) {
				canvas.width = canvasHeight;
				canvas.height = canvasWidth;
			} else {
				canvas.width = canvasWidth;
				canvas.height = canvasHeight;
			}

			canvas.width += borderX * 2;
			canvas.height += borderY * 2;

			return {
				canvas: canvas,
				rotate: rotate,
				width: width,
				height: height,
				border: border
			};
		}
		/**
   * 外部调用
   * 基于原图绘制
   * 返回一个HTMLCanvasElement，在另一个画布上绘制，或添加到DOM。
   */

	}, {
		key: 'getImageToCanvas',
		value: function getImageToCanvas() {
			// 获取相对坐标
			var cropRect = this.getCroppingRect();
			var image = this.state.image;
			var rotate = this.props.rotate;

			// 获取实际像素坐标

			cropRect.x *= image.resource.width;
			cropRect.y *= image.resource.height;
			cropRect.width *= image.resource.width;
			cropRect.height *= image.resource.height;

			// 创建具有正确尺寸的画布
			var canvas = document.createElement('canvas');

			if (this.isVertical()) {
				canvas.width = cropRect.height;
				canvas.height = cropRect.width;
			} else {
				canvas.width = cropRect.width;
				canvas.height = cropRect.height;
			}

			// 在正确的位置绘制全尺寸图像,
			// 图像被截断到画布的大小.
			var context = canvas.getContext('2d');

			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(rotate * Math.PI / 180);
			context.translate(-(canvas.width / 2), -(canvas.height / 2));

			if (this.isVertical()) {
				context.translate((canvas.width - canvas.height) / 2, (canvas.height - canvas.width) / 2);
			}

			context.drawImage(image.resource, -cropRect.x, -cropRect.y);

			return canvas;
		}

		/**
   * 外部调用
   * 基于当前画布大小绘制.
   * 返回一个HTMLCanvasElement ，base64 -> canvas.toDataURL()
   */

	}, {
		key: 'getImageScaledToCanvas',
		value: function getImageScaledToCanvas() {
			var _getDimensions = this.getDimensions(),
			    width = _getDimensions.width,
			    height = _getDimensions.height;

			var canvas = document.createElement('canvas');

			if (this.isVertical()) {
				canvas.width = height;
				canvas.height = width;
			} else {
				canvas.width = width;
				canvas.height = height;
			}

			// 不要在这里绘制边框，因为它是生成的图像
			this.paintImage(canvas.getContext('2d'), this.state.image, 0, 1);

			return canvas;
		}
	}, {
		key: 'getImage',
		value: function getImage() {
			var isNormal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
			var fileName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '____fileName';
			var getFile = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

			return (0, _utils.getCroppedImg)(isNormal ? this.getImageToCanvas() : this.getImageScaledToCanvas(), fileName, getFile);
		}
		/**
   * x轴默认缩放
   */

	}, {
		key: 'getXScale',
		value: function getXScale() {
			var image = this.state.image;
			var _props3 = this.props,
			    width = _props3.width,
			    height = _props3.height;


			var canvasAspect = width / height;
			var imageAspect = image.width / image.height;

			return Math.min(1, canvasAspect / imageAspect);
		}
		/**
   * y轴默认缩放
   */

	}, {
		key: 'getYScale',
		value: function getYScale() {
			var image = this.state.image;
			var _props4 = this.props,
			    width = _props4.width,
			    height = _props4.height;


			var canvasAspect = height / width;
			var imageAspect = image.height / image.width;

			return Math.min(1, canvasAspect / imageAspect);
		}
		/**
   * 可外调用
   * 获取裁剪的startX, startY, width, height [0, 1]
   */

	}, {
		key: 'getCroppingRect',
		value: function getCroppingRect() {
			var image = this.state.image;
			var scale = this.props.scale;


			var position = this.props.position || {
				x: image.x,
				y: image.y
			};
			var width = 1 / scale * this.getXScale();
			var height = 1 / scale * this.getYScale();

			var croppingRect = {
				x: position.x - width / 2,
				y: position.y - height / 2,
				width: width,
				height: height
			};

			var xMin = 0;
			var xMax = 1 - croppingRect.width;
			var yMin = 0;
			var yMax = 1 - croppingRect.height;
			/**
    * 如果裁剪图像大于原图像，则需要更改
    * 我们的最大和最小的x＆y允许图像出现在任何地方
    * 到修剪矩形的边缘.
    */
			var isLargerThanImage = width > 1 || height > 1;

			if (isLargerThanImage) {
				xMin = -croppingRect.width;
				xMax = 1;
				yMin = -croppingRect.height;
				yMax = 1;
			}

			return (0, _extends3.default)({}, croppingRect, {
				x: Math.max(xMin, Math.min(croppingRect.x, xMax)),
				y: Math.max(yMin, Math.min(croppingRect.y, yMax))
			});
		}
		/**
   * 通过相对位置计算 实际的位置
   */

	}, {
		key: 'calculatePosition',
		value: function calculatePosition(image, border) {
			image = image || this.state.image;

			var scale = this.props.scale;

			var _getBorders5 = this.getBorders(border),
			    _getBorders6 = (0, _slicedToArray3.default)(_getBorders5, 2),
			    borderX = _getBorders6[0],
			    borderY = _getBorders6[1];

			var croppingRect = this.getCroppingRect();

			var width = image.width * scale;
			var height = image.height * scale;

			var x = -croppingRect.x * width;
			var y = -croppingRect.y * height;

			if (this.isVertical()) {
				x += borderY;
				y += borderX;
			} else {
				x += borderX;
				y += borderY;
			}

			return {
				x: x,
				y: y,
				height: height,
				width: width
			};
		}
		/**
   * 按下，只作用于canvas区域
   */

		/**
   * 抬起
   * 由 this.state.drag 判断
   */

		/**
   * 移动 作用于整个document
   */

		/**
   * 去除作用于canvas本身事件
   * touch：onTouchMove -> touchmove
   * desktop：onDragOver -> dragStart
   */

		/**
   * 去除作用于canvas本身事件
   * touch：onTouchEnd -> touchend
   * desktop：onDrop -> drop
   */

	}, {
		key: 'isDataURL',

		/**
   * 判断是否是url链接
   * 基于base64正则
   */
		value: function isDataURL(str) {
			if (str === null) {
				return false;
			}
			var regex = /^\s*data:([a-z]+\/[a-z]+(;[a-z-]+=[a-z-]+)?)?(;base64)?,[a-z0-9!$&',()*+;=\-._~:@/?%\s]*\s*$/i;
			return !!str.match(regex);
		}
		/**
   * 选择加载图片的方式
   */

	}, {
		key: 'loadImage',
		value: function loadImage(image) {
			if (_utils.isFileAPISupported && image instanceof File) {
				this.loadImageFile(image);
			} else if (typeof image === 'string') {
				this.loadImageURL(image);
			}
		}
		/**
   * 生成图片
   */

	}, {
		key: 'loadImageURL',
		value: function loadImageURL(imageURL) {
			var imageObj = new Image();
			imageObj.onload = this.handleImageReady.bind(this, imageObj);
			imageObj.onerror = this.props.onLoadFailure;
			/**
    * 在HTML5中，一些 HTML 元素提供了对 CORS 的支持，
    * 例如 <img> 和 <video> 均有一个跨域属性 (crossOrigin property)，
    * 它允许你配置元素获取数据的 CORS 请求。 这些属性是枚举的，并具有以下可能的值：
    */
			if (!this.isDataURL(imageURL) && this.props.crossOrigin) {
				imageObj.crossOrigin = this.props.crossOrigin;
			}
			imageObj.src = imageURL;
		}
		/**
   * 图片文件，如event.target.files[index]
   */

	}, {
		key: 'loadImageFile',
		value: function loadImageFile(imageFile) {
			var _this2 = this;

			var reader = new FileReader();
			reader.onload = function (e) {
				return _this2.loadImageURL(e.target.result);
			}; // 返回base64
			reader.readAsDataURL(imageFile);
		}

		/**
   * 图片载入完成，设置state中image的信息
   */

	}, {
		key: 'handleImageReady',
		value: function handleImageReady(image) {
			var imageState = this.getInitialSize(image.width, image.height);
			imageState.resource = image;
			imageState.x = 0.5;
			imageState.y = 0.5;
			this.setState({ drag: false, image: imageState }, this.props.onImageReady);
			/**
    * 回调，图片加载成功
    */
			this.props.onLoadSuccess(imageState);
		}
		/**
   * 初始的宽高
   */

	}, {
		key: 'getInitialSize',
		value: function getInitialSize(width, height) {
			var newHeight = void 0;
			var newWidth = void 0;

			var dimensions = this.getDimensions();
			var canvasRatio = dimensions.height / dimensions.width;
			var imageRatio = height / width;

			if (canvasRatio > imageRatio) {
				newHeight = dimensions.height; // 高度占满
				newWidth = width * (newHeight / height);
			} else {
				newWidth = dimensions.width; // 宽度占满
				newHeight = height * (newWidth / width);
			}

			return {
				height: newHeight,
				width: newWidth
			};
		}
	}, {
		key: 'render',
		value: function render() {
			var dimensions = this.getDimensions();
			var defaultStyle = {
				// 所在浏览器下的容器
				width: dimensions.canvas.width,
				height: dimensions.canvas.height,
				// 鼠标样式
				cursor: this.state.drag ? '-webkit-grabbing' : '-webkit-grab'
			};

			var attributes = {
				// canvas标签的width和height是画布实际宽度和高度
				width: dimensions.canvas.width * pixelRatio,
				height: dimensions.canvas.height * pixelRatio,
				style: (0, _extends3.default)({}, defaultStyle, this.props.style)
			};

			attributes[deviceEvents.react.down] = this.handleMouseDown;
			attributes[deviceEvents.react.drag] = this.handleDragOver;
			if (!this.props.disableDrop) {
				attributes[deviceEvents.react.drop] = this.handleDrop;
			}
			if (_utils.isTouchDevice) {
				// 可不写
				attributes[deviceEvents.react.mouseDown] = this.handleMouseDown;
			}

			return _react2.default.createElement('canvas', (0, _extends3.default)({ ref: this.setCanvas }, attributes));
		}
	}]);
	return ImgsCrop;
}(_react2.default.Component);

ImgsCrop.propTypes = {
	// 放大的倍数
	scale: _propTypes2.default.number,
	// 旋转的角度倍数
	rotate: _propTypes2.default.number,
	// 图片的地址
	src: _propTypes2.default.oneOfType([_propTypes2.default.string].concat((0, _toConsumableArray3.default)(_utils.isFileAPISupported ? [_propTypes2.default.instanceOf(File)] : []))),
	// 裁剪的边框 [x, y]
	border: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)]),
	// 裁剪的边框圆角
	borderRadius: _propTypes2.default.number,
	// 裁剪区域宽
	width: _propTypes2.default.number,
	// 裁剪区域高
	height: _propTypes2.default.number,
	position: _propTypes2.default.shape({
		x: _propTypes2.default.number,
		y: _propTypes2.default.number
	}),
	// 边框的背景色RGBA
	color: _propTypes2.default.arrayOf(_propTypes2.default.number),
	style: _propTypes2.default.object,
	// CORS
	crossOrigin: _propTypes2.default.oneOf(['', 'anonymous', 'use-credentials']),
	// 拖入图片回掉
	onDropFile: _propTypes2.default.func,
	// 图片加载失败
	onLoadFailure: _propTypes2.default.func,
	// 图片加载成功
	onLoadSuccess: _propTypes2.default.func,
	// 图片加载成功，展示后执行
	onImageReady: _propTypes2.default.func,
	// 图片信息变化
	onImageChange: _propTypes2.default.func,
	// 抬起
	onMouseUp: _propTypes2.default.func,
	// 移动
	onMouseMove: _propTypes2.default.func,
	// 位置变化
	onPositionChange: _propTypes2.default.func,
	// 是否支持拖拽图片进来编辑
	disableDrop: _propTypes2.default.bool
};
ImgsCrop.defaultProps = {
	disableDrop: false,
	scale: 1,
	rotate: 0,
	border: 25,
	borderRadius: 0,
	width: _utils.isTouchDevice ? window.innerWidth : 200,
	height: _utils.isTouchDevice ? window.innerWidth : 200,
	color: [0, 0, 0, 0.5],
	style: {},
	onDropFile: function onDropFile() {},
	onLoadFailure: function onLoadFailure() {},
	onLoadSuccess: function onLoadSuccess() {},
	onImageReady: function onImageReady() {},
	onImageChange: function onImageChange() {},
	onMouseUp: function onMouseUp() {},
	onMouseMove: function onMouseMove() {},
	onPositionChange: function onPositionChange() {}
};
exports.default = ImgsCrop;