From e89dc0c34ae189321cce9b13ac005379d00d7ae1 Mon Sep 17 00:00:00 2001 From: "dominic.tobias" Date: Sun, 28 Jul 2019 14:27:12 +0100 Subject: [PATCH] Run release --- dist/ReactCrop.js | 2 +- dist/ReactCrop.min.js | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/ReactCrop.js b/dist/ReactCrop.js index 8214db0..d2da281 100644 --- a/dist/ReactCrop.js +++ b/dist/ReactCrop.js @@ -104,7 +104,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ReactCrop; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Component\", function() { return ReactCrop; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"makeAspectCrop\", function() { return makeAspectCrop; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"containCrop\", function() { return containCrop; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n/* globals document, window */\n\n\n // Feature detection\n// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners\n\nvar passiveSupported = false;\n\ntry {\n window.addEventListener('test', null, Object.defineProperty({}, 'passive', {\n get: function get() {\n passiveSupported = true;\n return true;\n }\n }));\n} catch (err) {} // eslint-disable-line no-empty\n\n\nfunction getClientPos(e) {\n var pageX;\n var pageY;\n\n if (e.touches) {\n var _e$touches = _slicedToArray(e.touches, 1);\n\n var _e$touches$ = _e$touches[0];\n pageX = _e$touches$.pageX;\n pageY = _e$touches$.pageY;\n } else {\n pageX = e.pageX;\n pageY = e.pageY;\n }\n\n return {\n x: pageX,\n y: pageY\n };\n}\n\nfunction clamp(num, min, max) {\n return Math.min(Math.max(num, min), max);\n}\n\nfunction isCropValid(crop) {\n return crop && crop.width && crop.height && !isNaN(crop.width) && !isNaN(crop.height);\n}\n\nfunction inverseOrd(ord) {\n if (ord === 'n') return 's';\n if (ord === 'ne') return 'sw';\n if (ord === 'e') return 'w';\n if (ord === 'se') return 'nw';\n if (ord === 's') return 'n';\n if (ord === 'sw') return 'ne';\n if (ord === 'w') return 'e';\n if (ord === 'nw') return 'se';\n return ord;\n}\n\nfunction makeAspectCrop(crop, imageWidth, imageHeight) {\n if (isNaN(crop.aspect)) {\n console.warn('`crop.aspect` should be a number in order to make an aspect crop', crop);\n return crop;\n }\n\n var completeCrop = _objectSpread({\n unit: 'px',\n x: 0,\n y: 0\n }, crop);\n\n if (crop.width) {\n completeCrop.height = completeCrop.width / crop.aspect;\n }\n\n if (crop.height) {\n completeCrop.width = completeCrop.height * crop.aspect;\n }\n\n if (completeCrop.y + completeCrop.height > imageHeight) {\n completeCrop.height = imageHeight - completeCrop.y;\n completeCrop.width = completeCrop.height * crop.aspect;\n }\n\n if (completeCrop.x + completeCrop.width > imageWidth) {\n completeCrop.width = imageWidth - completeCrop.x;\n completeCrop.height = completeCrop.width / crop.aspect;\n }\n\n return completeCrop;\n}\n\nfunction convertToPercentCrop(crop, imageWidth, imageHeight) {\n if (crop.unit === '%') {\n return crop;\n }\n\n return {\n unit: '%',\n aspect: crop.aspect,\n x: crop.x / imageWidth * 100,\n y: crop.y / imageHeight * 100,\n width: crop.width / imageWidth * 100,\n height: crop.height / imageHeight * 100\n };\n}\n\nfunction convertToPixelCrop(crop, imageWidth, imageHeight) {\n if (crop.unit === 'px') {\n return crop;\n }\n\n return {\n unit: 'px',\n aspect: crop.aspect,\n x: crop.x * imageWidth / 100,\n y: crop.y * imageHeight / 100,\n width: crop.width * imageWidth / 100,\n height: crop.height * imageHeight / 100\n };\n}\n\nfunction isAspectInvalid(crop, imageWidth, imageHeight) {\n if (!crop.width && crop.height || crop.width && !crop.height) {\n return true;\n }\n\n return crop.width / crop.aspect !== crop.height || crop.height * crop.aspect !== crop.width || crop.y + crop.height > imageHeight || crop.x + crop.width > imageWidth;\n}\n\nfunction resolveCrop(crop, imageWidth, imageHeight) {\n if (crop && crop.aspect && isAspectInvalid(crop, imageWidth, imageHeight)) {\n return makeAspectCrop(crop, imageWidth, imageHeight);\n }\n\n return crop;\n}\n\nfunction containCrop(prevCrop, crop, imageWidth, imageHeight) {\n var pixelCrop = convertToPixelCrop(crop, imageWidth, imageHeight);\n var prevPixelCrop = convertToPixelCrop(prevCrop, imageWidth, imageHeight);\n\n var contained = _objectSpread({}, pixelCrop); // Non-aspects are simple\n\n\n if (!pixelCrop.aspect) {\n if (pixelCrop.x < 0) {\n contained.x = 0;\n contained.width += pixelCrop.x;\n } else if (pixelCrop.x + pixelCrop.width > imageWidth) {\n contained.width = imageWidth - pixelCrop.x;\n }\n\n if (pixelCrop.y + pixelCrop.height > imageHeight) {\n contained.height = imageHeight - pixelCrop.y;\n }\n\n return contained;\n }\n\n var adjustedForX = false;\n\n if (pixelCrop.x < 0) {\n contained.x = 0;\n contained.width += pixelCrop.x;\n contained.height = contained.width / pixelCrop.aspect;\n adjustedForX = true;\n } else if (pixelCrop.x + pixelCrop.width > imageWidth) {\n contained.width = imageWidth - pixelCrop.x;\n contained.height = contained.width / pixelCrop.aspect;\n adjustedForX = true;\n } // If sizing in up direction we need to pin Y at the point it\n // would be at the boundary.\n\n\n if (adjustedForX && prevPixelCrop.y > contained.y) {\n contained.y = pixelCrop.y + (pixelCrop.height - contained.height);\n }\n\n var adjustedForY = false;\n\n if (contained.y + contained.height > imageHeight) {\n contained.height = imageHeight - pixelCrop.y;\n contained.width = contained.height * pixelCrop.aspect;\n adjustedForY = true;\n } // If sizing in left direction we need to pin X at the point it\n // would be at the boundary.\n\n\n if (adjustedForY && prevPixelCrop.x > contained.x) {\n contained.x = pixelCrop.x + (pixelCrop.width - contained.width);\n }\n\n return contained;\n}\n\nvar ReactCrop =\n/*#__PURE__*/\nfunction (_PureComponent) {\n _inherits(ReactCrop, _PureComponent);\n\n function ReactCrop() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, ReactCrop);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ReactCrop)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_this), \"window\", typeof window !== 'undefined' ? window : {});\n\n _defineProperty(_assertThisInitialized(_this), \"document\", typeof document !== 'undefined' ? document : {});\n\n _defineProperty(_assertThisInitialized(_this), \"state\", {});\n\n _defineProperty(_assertThisInitialized(_this), \"onCropMouseTouchDown\", function (e) {\n var _this$props = _this.props,\n crop = _this$props.crop,\n disabled = _this$props.disabled;\n var _this$componentDimens = _this.componentDimensions,\n width = _this$componentDimens.width,\n height = _this$componentDimens.height;\n var pixelCrop = convertToPixelCrop(crop, width, height);\n\n if (disabled) {\n return;\n }\n\n e.preventDefault(); // Stop drag selection.\n\n var clientPos = getClientPos(e); // Focus for detecting keypress.\n\n _this.componentRef.focus({\n preventScroll: true\n });\n\n var ord = e.target.dataset.ord;\n var xInversed = ord === 'nw' || ord === 'w' || ord === 'sw';\n var yInversed = ord === 'nw' || ord === 'n' || ord === 'ne';\n var cropOffset;\n\n if (pixelCrop.aspect) {\n cropOffset = _this.getElementOffset(_this.cropSelectRef);\n }\n\n _this.evData = {\n clientStartX: clientPos.x,\n clientStartY: clientPos.y,\n cropStartWidth: pixelCrop.width,\n cropStartHeight: pixelCrop.height,\n cropStartX: xInversed ? pixelCrop.x + pixelCrop.width : pixelCrop.x,\n cropStartY: yInversed ? pixelCrop.y + pixelCrop.height : pixelCrop.y,\n xInversed: xInversed,\n yInversed: yInversed,\n xCrossOver: xInversed,\n yCrossOver: yInversed,\n startXCrossOver: xInversed,\n startYCrossOver: yInversed,\n isResize: e.target.dataset.ord,\n ord: ord,\n cropOffset: cropOffset\n };\n _this.mouseDownOnCrop = true;\n\n _this.setState({\n cropIsActive: true\n });\n });\n\n _defineProperty(_assertThisInitialized(_this), \"onComponentMouseTouchDown\", function (e) {\n var _this$props2 = _this.props,\n crop = _this$props2.crop,\n disabled = _this$props2.disabled,\n locked = _this$props2.locked,\n keepSelection = _this$props2.keepSelection,\n onChange = _this$props2.onChange;\n var componentEl = _this.mediaWrapperRef.firstChild;\n\n if (e.target !== componentEl || !componentEl.contains(e.target)) {\n return;\n }\n\n if (disabled || locked || keepSelection && isCropValid(crop)) {\n return;\n }\n\n e.preventDefault(); // Stop drag selection.\n\n var clientPos = getClientPos(e); // Focus for detecting keypress.\n\n _this.componentRef.focus({\n preventScroll: true\n });\n\n var imageOffset = _this.getElementOffset(_this.componentRef);\n\n var x = clientPos.x - imageOffset.left;\n var y = clientPos.y - imageOffset.top;\n var nextCrop = {\n unit: 'px',\n aspect: crop ? crop.aspect : undefined,\n x: x,\n y: y,\n width: 0,\n height: 0\n };\n _this.evData = {\n clientStartX: clientPos.x,\n clientStartY: clientPos.y,\n cropStartWidth: nextCrop.width,\n cropStartHeight: nextCrop.height,\n cropStartX: nextCrop.x,\n cropStartY: nextCrop.y,\n xInversed: false,\n yInversed: false,\n xCrossOver: false,\n yCrossOver: false,\n startXCrossOver: false,\n startYCrossOver: false,\n isResize: true,\n ord: 'nw'\n };\n _this.mouseDownOnCrop = true;\n var _this$componentDimens2 = _this.componentDimensions,\n width = _this$componentDimens2.width,\n height = _this$componentDimens2.height;\n onChange(convertToPixelCrop(nextCrop, width, height), convertToPercentCrop(nextCrop, width, height));\n\n _this.setState({\n cropIsActive: true,\n newCropIsBeingDrawn: true\n });\n });\n\n _defineProperty(_assertThisInitialized(_this), \"onDocMouseTouchMove\", function (e) {\n var _this$props3 = _this.props,\n crop = _this$props3.crop,\n disabled = _this$props3.disabled,\n onChange = _this$props3.onChange,\n onDragStart = _this$props3.onDragStart;\n\n if (disabled) {\n return;\n }\n\n if (!_this.mouseDownOnCrop) {\n return;\n }\n\n e.preventDefault(); // Stop drag selection.\n\n if (!_this.dragStarted) {\n _this.dragStarted = true;\n onDragStart(e);\n }\n\n var _assertThisInitialize = _assertThisInitialized(_this),\n evData = _assertThisInitialize.evData;\n\n var clientPos = getClientPos(e);\n\n if (evData.isResize && crop.aspect && evData.cropOffset) {\n clientPos.y = _this.straightenYPath(clientPos.x);\n }\n\n evData.xDiff = clientPos.x - evData.clientStartX;\n evData.yDiff = clientPos.y - evData.clientStartY;\n var nextCrop;\n\n if (evData.isResize) {\n nextCrop = _this.resizeCrop();\n } else {\n nextCrop = _this.dragCrop();\n }\n\n if (nextCrop !== crop) {\n var _this$componentDimens3 = _this.componentDimensions,\n width = _this$componentDimens3.width,\n height = _this$componentDimens3.height;\n onChange(convertToPixelCrop(nextCrop, width, height), convertToPercentCrop(nextCrop, width, height));\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"onComponentKeyDown\", function (e) {\n var _this$props4 = _this.props,\n crop = _this$props4.crop,\n disabled = _this$props4.disabled,\n onChange = _this$props4.onChange,\n onComplete = _this$props4.onComplete;\n\n if (disabled) {\n return;\n }\n\n var keyCode = e.which;\n var nudged = false;\n\n if (!isCropValid(crop)) {\n return;\n }\n\n var nextCrop = _this.makeNewCrop();\n\n if (keyCode === ReactCrop.arrowKey.left) {\n nextCrop.x -= ReactCrop.nudgeStep;\n nudged = true;\n } else if (keyCode === ReactCrop.arrowKey.right) {\n nextCrop.x += ReactCrop.nudgeStep;\n nudged = true;\n } else if (keyCode === ReactCrop.arrowKey.up) {\n nextCrop.y -= ReactCrop.nudgeStep;\n nudged = true;\n } else if (keyCode === ReactCrop.arrowKey.down) {\n nextCrop.y += ReactCrop.nudgeStep;\n nudged = true;\n }\n\n if (nudged) {\n e.preventDefault(); // Stop drag selection.\n\n var _this$componentDimens4 = _this.componentDimensions,\n width = _this$componentDimens4.width,\n height = _this$componentDimens4.height;\n nextCrop.x = clamp(nextCrop.x, 0, width - nextCrop.width);\n nextCrop.y = clamp(nextCrop.y, 0, height - nextCrop.height);\n var pixelCrop = convertToPixelCrop(nextCrop, width, height);\n var percentCrop = convertToPercentCrop(nextCrop, width, height);\n onChange(pixelCrop, percentCrop);\n onComplete(pixelCrop, percentCrop);\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"onDocMouseTouchEnd\", function (e) {\n var _this$props5 = _this.props,\n crop = _this$props5.crop,\n disabled = _this$props5.disabled,\n onComplete = _this$props5.onComplete,\n onDragEnd = _this$props5.onDragEnd;\n\n if (disabled) {\n return;\n }\n\n if (_this.mouseDownOnCrop) {\n _this.mouseDownOnCrop = false;\n _this.dragStarted = false;\n var _this$componentDimens5 = _this.componentDimensions,\n width = _this$componentDimens5.width,\n height = _this$componentDimens5.height;\n onDragEnd(e);\n onComplete(convertToPixelCrop(crop, width, height), convertToPercentCrop(crop, width, height));\n\n _this.setState({\n cropIsActive: false,\n newCropIsBeingDrawn: false\n });\n }\n });\n\n return _this;\n }\n\n _createClass(ReactCrop, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n if (this.document.addEventListener) {\n var options = passiveSupported ? {\n passive: false\n } : false;\n this.document.addEventListener('mousemove', this.onDocMouseTouchMove, options);\n this.document.addEventListener('touchmove', this.onDocMouseTouchMove, options);\n this.document.addEventListener('mouseup', this.onDocMouseTouchEnd, options);\n this.document.addEventListener('touchend', this.onDocMouseTouchEnd, options);\n this.document.addEventListener('touchcancel', this.onDocMouseTouchEnd, options);\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n if (this.document.removeEventListener) {\n this.document.removeEventListener('mousemove', this.onDocMouseTouchMove);\n this.document.removeEventListener('touchmove', this.onDocMouseTouchMove);\n this.document.removeEventListener('mouseup', this.onDocMouseTouchEnd);\n this.document.removeEventListener('touchend', this.onDocMouseTouchEnd);\n this.document.removeEventListener('touchcancel', this.onDocMouseTouchEnd);\n }\n }\n }, {\n key: \"onImageLoad\",\n value: function onImageLoad(image) {\n var _this$props6 = this.props,\n onComplete = _this$props6.onComplete,\n onChange = _this$props6.onChange,\n onImageLoaded = _this$props6.onImageLoaded;\n var crop = this.makeNewCrop();\n var resolvedCrop = resolveCrop(crop, image.width, image.height); // Return false from onImageLoaded if you set the crop with setState in there as otherwise\n // the subsequent onChange + onComplete will not have your updated crop.\n\n var res = onImageLoaded(image);\n\n if (res !== false) {\n var pixelCrop = convertToPixelCrop(resolvedCrop, image.width, image.height);\n var percentCrop = convertToPercentCrop(resolvedCrop, image.width, image.height);\n onChange(pixelCrop, percentCrop);\n onComplete(pixelCrop, percentCrop);\n }\n }\n }, {\n key: \"getDocumentOffset\",\n value: function getDocumentOffset() {\n var _ref = this.document.documentElement || {},\n _ref$clientTop = _ref.clientTop,\n clientTop = _ref$clientTop === void 0 ? 0 : _ref$clientTop,\n _ref$clientLeft = _ref.clientLeft,\n clientLeft = _ref$clientLeft === void 0 ? 0 : _ref$clientLeft;\n\n return {\n clientTop: clientTop,\n clientLeft: clientLeft\n };\n }\n }, {\n key: \"getWindowOffset\",\n value: function getWindowOffset() {\n var _this$window = this.window,\n _this$window$pageYOff = _this$window.pageYOffset,\n pageYOffset = _this$window$pageYOff === void 0 ? 0 : _this$window$pageYOff,\n _this$window$pageXOff = _this$window.pageXOffset,\n pageXOffset = _this$window$pageXOff === void 0 ? 0 : _this$window$pageXOff;\n return {\n pageYOffset: pageYOffset,\n pageXOffset: pageXOffset\n };\n }\n }, {\n key: \"getElementOffset\",\n value: function getElementOffset(el) {\n var rect = el.getBoundingClientRect();\n var doc = this.getDocumentOffset();\n var win = this.getWindowOffset();\n var top = rect.top + win.pageYOffset - doc.clientTop;\n var left = rect.left + win.pageXOffset - doc.clientLeft;\n return {\n top: top,\n left: left\n };\n }\n }, {\n key: \"getCropStyle\",\n value: function getCropStyle() {\n var crop = this.makeNewCrop(this.props.crop ? this.props.crop.unit : 'px');\n return {\n top: \"\".concat(crop.y).concat(crop.unit),\n left: \"\".concat(crop.x).concat(crop.unit),\n width: \"\".concat(crop.width).concat(crop.unit),\n height: \"\".concat(crop.height).concat(crop.unit)\n };\n }\n }, {\n key: \"getNewSize\",\n value: function getNewSize() {\n var _this$props7 = this.props,\n crop = _this$props7.crop,\n minWidth = _this$props7.minWidth,\n maxWidth = _this$props7.maxWidth,\n minHeight = _this$props7.minHeight,\n maxHeight = _this$props7.maxHeight;\n var evData = this.evData;\n var _this$componentDimens6 = this.componentDimensions,\n width = _this$componentDimens6.width,\n height = _this$componentDimens6.height; // New width.\n\n var newWidth = evData.cropStartWidth + evData.xDiff;\n\n if (evData.xCrossOver) {\n newWidth = Math.abs(newWidth);\n }\n\n newWidth = clamp(newWidth, minWidth, maxWidth || width); // New height.\n\n var newHeight;\n\n if (crop.aspect) {\n newHeight = newWidth / crop.aspect;\n } else {\n newHeight = evData.cropStartHeight + evData.yDiff;\n }\n\n if (evData.yCrossOver) {\n // Cap if polarity is inversed and the height fills the y space.\n newHeight = Math.min(Math.abs(newHeight), evData.cropStartY);\n }\n\n newHeight = clamp(newHeight, minHeight, maxHeight || height);\n\n if (crop.aspect) {\n newWidth = clamp(newHeight * crop.aspect, 0, width);\n }\n\n return {\n width: newWidth,\n height: newHeight\n };\n }\n }, {\n key: \"dragCrop\",\n value: function dragCrop() {\n var nextCrop = this.makeNewCrop();\n var evData = this.evData;\n var _this$componentDimens7 = this.componentDimensions,\n width = _this$componentDimens7.width,\n height = _this$componentDimens7.height;\n nextCrop.x = clamp(evData.cropStartX + evData.xDiff, 0, width - nextCrop.width);\n nextCrop.y = clamp(evData.cropStartY + evData.yDiff, 0, height - nextCrop.height);\n return nextCrop;\n }\n }, {\n key: \"resizeCrop\",\n value: function resizeCrop() {\n var evData = this.evData;\n var nextCrop = this.makeNewCrop();\n var ord = evData.ord; // On the inverse change the diff so it's the same and\n // the same algo applies.\n\n if (evData.xInversed) {\n evData.xDiff -= evData.cropStartWidth * 2;\n evData.xDiffPc -= evData.cropStartWidth * 2;\n }\n\n if (evData.yInversed) {\n evData.yDiff -= evData.cropStartHeight * 2;\n evData.yDiffPc -= evData.cropStartHeight * 2;\n } // New size.\n\n\n var newSize = this.getNewSize(); // Adjust x/y to give illusion of 'staticness' as width/height is increased\n // when polarity is inversed.\n\n var newX = evData.cropStartX;\n var newY = evData.cropStartY;\n\n if (evData.xCrossOver) {\n newX = nextCrop.x + (nextCrop.width - newSize.width);\n }\n\n if (evData.yCrossOver) {\n // This not only removes the little \"shake\" when inverting at a diagonal, but for some\n // reason y was way off at fast speeds moving sw->ne with fixed aspect only, I couldn't\n // figure out why.\n if (evData.lastYCrossover === false) {\n newY = nextCrop.y - newSize.height;\n } else {\n newY = nextCrop.y + (nextCrop.height - newSize.height);\n }\n }\n\n var _this$componentDimens8 = this.componentDimensions,\n width = _this$componentDimens8.width,\n height = _this$componentDimens8.height;\n var containedCrop = containCrop(this.props.crop, {\n unit: nextCrop.unit,\n x: newX,\n y: newY,\n width: newSize.width,\n height: newSize.height,\n aspect: nextCrop.aspect\n }, width, height); // Apply x/y/width/height changes depending on ordinate (fixed aspect always applies both).\n\n if (nextCrop.aspect || ReactCrop.xyOrds.indexOf(ord) > -1) {\n nextCrop.x = containedCrop.x;\n nextCrop.y = containedCrop.y;\n nextCrop.width = containedCrop.width;\n nextCrop.height = containedCrop.height;\n } else if (ReactCrop.xOrds.indexOf(ord) > -1) {\n nextCrop.x = containedCrop.x;\n nextCrop.width = containedCrop.width;\n } else if (ReactCrop.yOrds.indexOf(ord) > -1) {\n nextCrop.y = containedCrop.y;\n nextCrop.height = containedCrop.height;\n }\n\n evData.lastYCrossover = evData.yCrossOver;\n this.crossOverCheck();\n return nextCrop;\n }\n }, {\n key: \"straightenYPath\",\n value: function straightenYPath(clientX) {\n var evData = this.evData;\n var ord = evData.ord;\n var cropOffset = evData.cropOffset,\n cropStartWidth = evData.cropStartWidth,\n cropStartHeight = evData.cropStartHeight;\n var k;\n var d;\n\n if (ord === 'nw' || ord === 'se') {\n k = cropStartHeight / cropStartWidth;\n d = cropOffset.top - cropOffset.left * k;\n } else {\n k = -cropStartHeight / cropStartWidth;\n d = cropOffset.top + (cropStartHeight - cropOffset.left * k);\n }\n\n return k * clientX + d;\n }\n }, {\n key: \"createCropSelection\",\n value: function createCropSelection() {\n var _this2 = this;\n\n var _this$props8 = this.props,\n disabled = _this$props8.disabled,\n locked = _this$props8.locked,\n renderSelectionAddon = _this$props8.renderSelectionAddon;\n var style = this.getCropStyle();\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n ref: function ref(n) {\n _this2.cropSelectRef = n;\n },\n style: style,\n className: \"ReactCrop__crop-selection\",\n onMouseDown: this.onCropMouseTouchDown,\n onTouchStart: this.onCropMouseTouchDown,\n role: \"presentation\"\n }, !disabled && !locked && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-elements\"\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-bar ord-n\",\n \"data-ord\": \"n\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-bar ord-e\",\n \"data-ord\": \"e\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-bar ord-s\",\n \"data-ord\": \"s\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-bar ord-w\",\n \"data-ord\": \"w\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-nw\",\n \"data-ord\": \"nw\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-n\",\n \"data-ord\": \"n\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-ne\",\n \"data-ord\": \"ne\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-e\",\n \"data-ord\": \"e\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-se\",\n \"data-ord\": \"se\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-s\",\n \"data-ord\": \"s\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-sw\",\n \"data-ord\": \"sw\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-w\",\n \"data-ord\": \"w\"\n })), renderSelectionAddon && renderSelectionAddon(this.state));\n }\n }, {\n key: \"makeNewCrop\",\n value: function makeNewCrop() {\n var unit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'px';\n\n var crop = _objectSpread({}, ReactCrop.defaultCrop, this.props.crop);\n\n var _this$componentDimens9 = this.componentDimensions,\n width = _this$componentDimens9.width,\n height = _this$componentDimens9.height;\n return unit === 'px' ? convertToPixelCrop(crop, width, height) : convertToPercentCrop(crop, width, height);\n }\n }, {\n key: \"crossOverCheck\",\n value: function crossOverCheck() {\n var evData = this.evData;\n\n if (!evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiff >= 0 || evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiff <= 0) {\n evData.xCrossOver = !evData.xCrossOver;\n }\n\n if (!evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiff >= 0 || evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiff <= 0) {\n evData.yCrossOver = !evData.yCrossOver;\n }\n\n var swapXOrd = evData.xCrossOver !== evData.startXCrossOver;\n var swapYOrd = evData.yCrossOver !== evData.startYCrossOver;\n evData.inversedXOrd = swapXOrd ? inverseOrd(evData.ord) : false;\n evData.inversedYOrd = swapYOrd ? inverseOrd(evData.ord) : false;\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this3 = this;\n\n var _this$props9 = this.props,\n children = _this$props9.children,\n className = _this$props9.className,\n crossorigin = _this$props9.crossorigin,\n crop = _this$props9.crop,\n disabled = _this$props9.disabled,\n locked = _this$props9.locked,\n imageAlt = _this$props9.imageAlt,\n onImageError = _this$props9.onImageError,\n renderComponent = _this$props9.renderComponent,\n src = _this$props9.src,\n style = _this$props9.style,\n imageStyle = _this$props9.imageStyle;\n var _this$state = this.state,\n cropIsActive = _this$state.cropIsActive,\n newCropIsBeingDrawn = _this$state.newCropIsBeingDrawn;\n var cropSelection = isCropValid(crop) && this.componentRef ? this.createCropSelection() : null;\n var componentClasses = Object(clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('ReactCrop', className, {\n 'ReactCrop--active': cropIsActive,\n 'ReactCrop--disabled': disabled,\n 'ReactCrop--locked': locked,\n 'ReactCrop--new-crop': newCropIsBeingDrawn,\n 'ReactCrop--fixed-aspect': crop && crop.aspect,\n // In this case we have to shadow the image, since the box-shadow on the crop won't work.\n 'ReactCrop--crop-invisible': crop && cropIsActive && (!crop.width || !crop.height)\n });\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n ref: function ref(n) {\n _this3.componentRef = n;\n },\n className: componentClasses,\n style: style,\n onTouchStart: this.onComponentMouseTouchDown,\n onMouseDown: this.onComponentMouseTouchDown,\n role: \"presentation\",\n tabIndex: 1,\n onKeyDown: this.onComponentKeyDown\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n ref: function ref(n) {\n _this3.mediaWrapperRef = n;\n }\n }, renderComponent || react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n ref: function ref(n) {\n _this3.imageRef = n;\n },\n crossOrigin: crossorigin,\n className: \"ReactCrop__image\",\n style: imageStyle,\n src: src,\n onLoad: function onLoad(e) {\n return _this3.onImageLoad(e.target);\n },\n onError: onImageError,\n alt: imageAlt\n })), children, cropSelection);\n }\n }, {\n key: \"componentDimensions\",\n get: function get() {\n var _this$componentRef = this.componentRef,\n clientWidth = _this$componentRef.clientWidth,\n clientHeight = _this$componentRef.clientHeight;\n return {\n width: clientWidth,\n height: clientHeight\n };\n }\n }]);\n\n return ReactCrop;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"PureComponent\"]);\n\nReactCrop.xOrds = ['e', 'w'];\nReactCrop.yOrds = ['n', 's'];\nReactCrop.xyOrds = ['nw', 'ne', 'se', 'sw'];\nReactCrop.arrowKey = {\n left: 37,\n up: 38,\n right: 39,\n down: 40\n};\nReactCrop.nudgeStep = 0.2;\nReactCrop.defaultCrop = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n unit: 'px'\n};\nReactCrop.propTypes = {\n className: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,\n crossorigin: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,\n children: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.node), prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.node]),\n crop: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.shape({\n aspect: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n x: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n y: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n width: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n height: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n unit: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOf(['px', '%'])\n }),\n disabled: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n locked: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n imageAlt: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,\n imageStyle: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.shape({}),\n keepSelection: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n minWidth: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n minHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n maxWidth: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n maxHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n onChange: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func.isRequired,\n onImageError: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n onComplete: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n onImageLoaded: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n onDragStart: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n onDragEnd: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n src: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string.isRequired,\n style: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.shape({}),\n renderComponent: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.node,\n renderSelectionAddon: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func\n};\nReactCrop.defaultProps = {\n className: undefined,\n crop: undefined,\n crossorigin: undefined,\n disabled: false,\n locked: false,\n imageAlt: '',\n maxWidth: undefined,\n maxHeight: undefined,\n minWidth: 0,\n minHeight: 0,\n keepSelection: false,\n onComplete: function onComplete() {},\n onImageError: function onImageError() {},\n onImageLoaded: function onImageLoaded() {},\n onDragStart: function onDragStart() {},\n onDragEnd: function onDragEnd() {},\n children: undefined,\n style: undefined,\n renderComponent: undefined,\n imageStyle: undefined,\n renderSelectionAddon: undefined\n};\n\n\n//# sourceURL=webpack://ReactCrop/./lib/ReactCrop.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ReactCrop; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Component\", function() { return ReactCrop; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"makeAspectCrop\", function() { return makeAspectCrop; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"containCrop\", function() { return containCrop; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n/* globals document, window */\n\n\n // Feature detection\n// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners\n\nvar passiveSupported = false;\n\ntry {\n window.addEventListener('test', null, Object.defineProperty({}, 'passive', {\n get: function get() {\n passiveSupported = true;\n return true;\n }\n }));\n} catch (err) {} // eslint-disable-line no-empty\n\n\nfunction getClientPos(e) {\n var pageX;\n var pageY;\n\n if (e.touches) {\n var _e$touches = _slicedToArray(e.touches, 1);\n\n var _e$touches$ = _e$touches[0];\n pageX = _e$touches$.pageX;\n pageY = _e$touches$.pageY;\n } else {\n pageX = e.pageX;\n pageY = e.pageY;\n }\n\n return {\n x: pageX,\n y: pageY\n };\n}\n\nfunction clamp(num, min, max) {\n return Math.min(Math.max(num, min), max);\n}\n\nfunction isCropValid(crop) {\n return crop && crop.width && crop.height && !isNaN(crop.width) && !isNaN(crop.height);\n}\n\nfunction inverseOrd(ord) {\n if (ord === 'n') return 's';\n if (ord === 'ne') return 'sw';\n if (ord === 'e') return 'w';\n if (ord === 'se') return 'nw';\n if (ord === 's') return 'n';\n if (ord === 'sw') return 'ne';\n if (ord === 'w') return 'e';\n if (ord === 'nw') return 'se';\n return ord;\n}\n\nfunction makeAspectCrop(crop, imageWidth, imageHeight) {\n if (isNaN(crop.aspect)) {\n console.warn('`crop.aspect` should be a number in order to make an aspect crop', crop);\n return crop;\n }\n\n var completeCrop = _objectSpread({\n unit: 'px',\n x: 0,\n y: 0\n }, crop);\n\n if (crop.width) {\n completeCrop.height = completeCrop.width / crop.aspect;\n }\n\n if (crop.height) {\n completeCrop.width = completeCrop.height * crop.aspect;\n }\n\n if (completeCrop.y + completeCrop.height > imageHeight) {\n completeCrop.height = imageHeight - completeCrop.y;\n completeCrop.width = completeCrop.height * crop.aspect;\n }\n\n if (completeCrop.x + completeCrop.width > imageWidth) {\n completeCrop.width = imageWidth - completeCrop.x;\n completeCrop.height = completeCrop.width / crop.aspect;\n }\n\n return completeCrop;\n}\n\nfunction convertToPercentCrop(crop, imageWidth, imageHeight) {\n if (crop.unit === '%') {\n return crop;\n }\n\n return {\n unit: '%',\n aspect: crop.aspect,\n x: crop.x / imageWidth * 100,\n y: crop.y / imageHeight * 100,\n width: crop.width / imageWidth * 100,\n height: crop.height / imageHeight * 100\n };\n}\n\nfunction convertToPixelCrop(crop, imageWidth, imageHeight) {\n if (crop.unit === 'px') {\n return crop;\n }\n\n return {\n unit: 'px',\n aspect: crop.aspect,\n x: crop.x * imageWidth / 100,\n y: crop.y * imageHeight / 100,\n width: crop.width * imageWidth / 100,\n height: crop.height * imageHeight / 100\n };\n}\n\nfunction isAspectInvalid(crop, imageWidth, imageHeight) {\n if (!crop.width && crop.height || crop.width && !crop.height) {\n return true;\n }\n\n return crop.width / crop.aspect !== crop.height || crop.height * crop.aspect !== crop.width || crop.y + crop.height > imageHeight || crop.x + crop.width > imageWidth;\n}\n\nfunction resolveCrop(crop, imageWidth, imageHeight) {\n if (crop && crop.aspect && isAspectInvalid(crop, imageWidth, imageHeight)) {\n return makeAspectCrop(crop, imageWidth, imageHeight);\n }\n\n return crop;\n}\n\nfunction containCrop(prevCrop, crop, imageWidth, imageHeight) {\n var pixelCrop = convertToPixelCrop(crop, imageWidth, imageHeight);\n var prevPixelCrop = convertToPixelCrop(prevCrop, imageWidth, imageHeight);\n\n var contained = _objectSpread({}, pixelCrop); // Non-aspects are simple\n\n\n if (!pixelCrop.aspect) {\n if (pixelCrop.x < 0) {\n contained.x = 0;\n contained.width += pixelCrop.x;\n } else if (pixelCrop.x + pixelCrop.width > imageWidth) {\n contained.width = imageWidth - pixelCrop.x;\n }\n\n if (pixelCrop.y + pixelCrop.height > imageHeight) {\n contained.height = imageHeight - pixelCrop.y;\n }\n\n return contained;\n }\n\n var adjustedForX = false;\n\n if (pixelCrop.x < 0) {\n contained.x = 0;\n contained.width += pixelCrop.x;\n contained.height = contained.width / pixelCrop.aspect;\n adjustedForX = true;\n } else if (pixelCrop.x + pixelCrop.width > imageWidth) {\n contained.width = imageWidth - pixelCrop.x;\n contained.height = contained.width / pixelCrop.aspect;\n adjustedForX = true;\n } // If sizing in up direction we need to pin Y at the point it\n // would be at the boundary.\n\n\n if (adjustedForX && prevPixelCrop.y > contained.y) {\n contained.y = pixelCrop.y + (pixelCrop.height - contained.height);\n }\n\n var adjustedForY = false;\n\n if (contained.y + contained.height > imageHeight) {\n contained.height = imageHeight - pixelCrop.y;\n contained.width = contained.height * pixelCrop.aspect;\n adjustedForY = true;\n } // If sizing in left direction we need to pin X at the point it\n // would be at the boundary.\n\n\n if (adjustedForY && prevPixelCrop.x > contained.x) {\n contained.x = pixelCrop.x + (pixelCrop.width - contained.width);\n }\n\n return contained;\n}\n\nvar ReactCrop =\n/*#__PURE__*/\nfunction (_PureComponent) {\n _inherits(ReactCrop, _PureComponent);\n\n function ReactCrop() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, ReactCrop);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ReactCrop)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_this), \"window\", typeof window !== 'undefined' ? window : {});\n\n _defineProperty(_assertThisInitialized(_this), \"document\", typeof document !== 'undefined' ? document : {});\n\n _defineProperty(_assertThisInitialized(_this), \"state\", {});\n\n _defineProperty(_assertThisInitialized(_this), \"onCropMouseTouchDown\", function (e) {\n var _this$props = _this.props,\n crop = _this$props.crop,\n disabled = _this$props.disabled;\n var _this$componentDimens = _this.componentDimensions,\n width = _this$componentDimens.width,\n height = _this$componentDimens.height;\n var pixelCrop = convertToPixelCrop(crop, width, height);\n\n if (disabled) {\n return;\n }\n\n e.preventDefault(); // Stop drag selection.\n\n var clientPos = getClientPos(e); // Focus for detecting keypress.\n\n _this.componentRef.focus({\n preventScroll: true\n });\n\n var ord = e.target.dataset.ord;\n var xInversed = ord === 'nw' || ord === 'w' || ord === 'sw';\n var yInversed = ord === 'nw' || ord === 'n' || ord === 'ne';\n var cropOffset;\n\n if (pixelCrop.aspect) {\n cropOffset = _this.getElementOffset(_this.cropSelectRef);\n }\n\n _this.evData = {\n clientStartX: clientPos.x,\n clientStartY: clientPos.y,\n cropStartWidth: pixelCrop.width,\n cropStartHeight: pixelCrop.height,\n cropStartX: xInversed ? pixelCrop.x + pixelCrop.width : pixelCrop.x,\n cropStartY: yInversed ? pixelCrop.y + pixelCrop.height : pixelCrop.y,\n xInversed: xInversed,\n yInversed: yInversed,\n xCrossOver: xInversed,\n yCrossOver: yInversed,\n startXCrossOver: xInversed,\n startYCrossOver: yInversed,\n isResize: e.target.dataset.ord,\n ord: ord,\n cropOffset: cropOffset\n };\n _this.mouseDownOnCrop = true;\n\n _this.setState({\n cropIsActive: true\n });\n });\n\n _defineProperty(_assertThisInitialized(_this), \"onComponentMouseTouchDown\", function (e) {\n var _this$props2 = _this.props,\n crop = _this$props2.crop,\n disabled = _this$props2.disabled,\n locked = _this$props2.locked,\n keepSelection = _this$props2.keepSelection,\n onChange = _this$props2.onChange;\n var componentEl = _this.mediaWrapperRef.firstChild;\n\n if (e.target !== componentEl || !componentEl.contains(e.target)) {\n return;\n }\n\n if (disabled || locked || keepSelection && isCropValid(crop)) {\n return;\n }\n\n e.preventDefault(); // Stop drag selection.\n\n var clientPos = getClientPos(e); // Focus for detecting keypress.\n\n _this.componentRef.focus({\n preventScroll: true\n });\n\n var imageOffset = _this.getElementOffset(_this.componentRef);\n\n var x = clientPos.x - imageOffset.left;\n var y = clientPos.y - imageOffset.top;\n var nextCrop = {\n unit: 'px',\n aspect: crop ? crop.aspect : undefined,\n x: x,\n y: y,\n width: 0,\n height: 0\n };\n _this.evData = {\n clientStartX: clientPos.x,\n clientStartY: clientPos.y,\n cropStartWidth: nextCrop.width,\n cropStartHeight: nextCrop.height,\n cropStartX: nextCrop.x,\n cropStartY: nextCrop.y,\n xInversed: false,\n yInversed: false,\n xCrossOver: false,\n yCrossOver: false,\n startXCrossOver: false,\n startYCrossOver: false,\n isResize: true,\n ord: 'nw'\n };\n _this.mouseDownOnCrop = true;\n var _this$componentDimens2 = _this.componentDimensions,\n width = _this$componentDimens2.width,\n height = _this$componentDimens2.height;\n onChange(convertToPixelCrop(nextCrop, width, height), convertToPercentCrop(nextCrop, width, height));\n\n _this.setState({\n cropIsActive: true,\n newCropIsBeingDrawn: true\n });\n });\n\n _defineProperty(_assertThisInitialized(_this), \"onDocMouseTouchMove\", function (e) {\n var _this$props3 = _this.props,\n crop = _this$props3.crop,\n disabled = _this$props3.disabled,\n onChange = _this$props3.onChange,\n onDragStart = _this$props3.onDragStart;\n\n if (disabled) {\n return;\n }\n\n if (!_this.mouseDownOnCrop) {\n return;\n }\n\n e.preventDefault(); // Stop drag selection.\n\n if (!_this.dragStarted) {\n _this.dragStarted = true;\n onDragStart(e);\n }\n\n var _assertThisInitialize = _assertThisInitialized(_this),\n evData = _assertThisInitialize.evData;\n\n var clientPos = getClientPos(e);\n\n if (evData.isResize && crop.aspect && evData.cropOffset) {\n clientPos.y = _this.straightenYPath(clientPos.x);\n }\n\n evData.xDiff = clientPos.x - evData.clientStartX;\n evData.yDiff = clientPos.y - evData.clientStartY;\n var nextCrop;\n\n if (evData.isResize) {\n nextCrop = _this.resizeCrop();\n } else {\n nextCrop = _this.dragCrop();\n }\n\n if (nextCrop !== crop) {\n var _this$componentDimens3 = _this.componentDimensions,\n width = _this$componentDimens3.width,\n height = _this$componentDimens3.height;\n onChange(convertToPixelCrop(nextCrop, width, height), convertToPercentCrop(nextCrop, width, height));\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"onComponentKeyDown\", function (e) {\n var _this$props4 = _this.props,\n crop = _this$props4.crop,\n disabled = _this$props4.disabled,\n onChange = _this$props4.onChange,\n onComplete = _this$props4.onComplete;\n\n if (disabled) {\n return;\n }\n\n var keyCode = e.which;\n var nudged = false;\n\n if (!isCropValid(crop)) {\n return;\n }\n\n var nextCrop = _this.makeNewCrop();\n\n if (keyCode === ReactCrop.arrowKey.left) {\n nextCrop.x -= ReactCrop.nudgeStep;\n nudged = true;\n } else if (keyCode === ReactCrop.arrowKey.right) {\n nextCrop.x += ReactCrop.nudgeStep;\n nudged = true;\n } else if (keyCode === ReactCrop.arrowKey.up) {\n nextCrop.y -= ReactCrop.nudgeStep;\n nudged = true;\n } else if (keyCode === ReactCrop.arrowKey.down) {\n nextCrop.y += ReactCrop.nudgeStep;\n nudged = true;\n }\n\n if (nudged) {\n e.preventDefault(); // Stop drag selection.\n\n var _this$componentDimens4 = _this.componentDimensions,\n width = _this$componentDimens4.width,\n height = _this$componentDimens4.height;\n nextCrop.x = clamp(nextCrop.x, 0, width - nextCrop.width);\n nextCrop.y = clamp(nextCrop.y, 0, height - nextCrop.height);\n var pixelCrop = convertToPixelCrop(nextCrop, width, height);\n var percentCrop = convertToPercentCrop(nextCrop, width, height);\n onChange(pixelCrop, percentCrop);\n onComplete(pixelCrop, percentCrop);\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"onDocMouseTouchEnd\", function (e) {\n var _this$props5 = _this.props,\n crop = _this$props5.crop,\n disabled = _this$props5.disabled,\n onComplete = _this$props5.onComplete,\n onDragEnd = _this$props5.onDragEnd;\n\n if (disabled) {\n return;\n }\n\n if (_this.mouseDownOnCrop) {\n _this.mouseDownOnCrop = false;\n _this.dragStarted = false;\n var _this$componentDimens5 = _this.componentDimensions,\n width = _this$componentDimens5.width,\n height = _this$componentDimens5.height;\n onDragEnd(e);\n onComplete(convertToPixelCrop(crop, width, height), convertToPercentCrop(crop, width, height));\n\n _this.setState({\n cropIsActive: false,\n newCropIsBeingDrawn: false\n });\n }\n });\n\n return _this;\n }\n\n _createClass(ReactCrop, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n if (this.document.addEventListener) {\n var options = passiveSupported ? {\n passive: false\n } : false;\n this.document.addEventListener('mousemove', this.onDocMouseTouchMove, options);\n this.document.addEventListener('touchmove', this.onDocMouseTouchMove, options);\n this.document.addEventListener('mouseup', this.onDocMouseTouchEnd, options);\n this.document.addEventListener('touchend', this.onDocMouseTouchEnd, options);\n this.document.addEventListener('touchcancel', this.onDocMouseTouchEnd, options);\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n if (this.document.removeEventListener) {\n this.document.removeEventListener('mousemove', this.onDocMouseTouchMove);\n this.document.removeEventListener('touchmove', this.onDocMouseTouchMove);\n this.document.removeEventListener('mouseup', this.onDocMouseTouchEnd);\n this.document.removeEventListener('touchend', this.onDocMouseTouchEnd);\n this.document.removeEventListener('touchcancel', this.onDocMouseTouchEnd);\n }\n }\n }, {\n key: \"onImageLoad\",\n value: function onImageLoad(image) {\n var _this$props6 = this.props,\n onComplete = _this$props6.onComplete,\n onChange = _this$props6.onChange,\n onImageLoaded = _this$props6.onImageLoaded;\n var crop = this.makeNewCrop();\n var resolvedCrop = resolveCrop(crop, image.width, image.height); // Return false from onImageLoaded if you set the crop with setState in there as otherwise\n // the subsequent onChange + onComplete will not have your updated crop.\n\n var res = onImageLoaded(image);\n\n if (res !== false) {\n var pixelCrop = convertToPixelCrop(resolvedCrop, image.width, image.height);\n var percentCrop = convertToPercentCrop(resolvedCrop, image.width, image.height);\n onChange(pixelCrop, percentCrop);\n onComplete(pixelCrop, percentCrop);\n }\n }\n }, {\n key: \"getDocumentOffset\",\n value: function getDocumentOffset() {\n var _ref = this.document.documentElement || {},\n _ref$clientTop = _ref.clientTop,\n clientTop = _ref$clientTop === void 0 ? 0 : _ref$clientTop,\n _ref$clientLeft = _ref.clientLeft,\n clientLeft = _ref$clientLeft === void 0 ? 0 : _ref$clientLeft;\n\n return {\n clientTop: clientTop,\n clientLeft: clientLeft\n };\n }\n }, {\n key: \"getWindowOffset\",\n value: function getWindowOffset() {\n var _this$window = this.window,\n _this$window$pageYOff = _this$window.pageYOffset,\n pageYOffset = _this$window$pageYOff === void 0 ? 0 : _this$window$pageYOff,\n _this$window$pageXOff = _this$window.pageXOffset,\n pageXOffset = _this$window$pageXOff === void 0 ? 0 : _this$window$pageXOff;\n return {\n pageYOffset: pageYOffset,\n pageXOffset: pageXOffset\n };\n }\n }, {\n key: \"getElementOffset\",\n value: function getElementOffset(el) {\n var rect = el.getBoundingClientRect();\n var doc = this.getDocumentOffset();\n var win = this.getWindowOffset();\n var top = rect.top + win.pageYOffset - doc.clientTop;\n var left = rect.left + win.pageXOffset - doc.clientLeft;\n return {\n top: top,\n left: left\n };\n }\n }, {\n key: \"getCropStyle\",\n value: function getCropStyle() {\n var crop = this.makeNewCrop(this.props.crop ? this.props.crop.unit : 'px');\n return {\n top: \"\".concat(crop.y).concat(crop.unit),\n left: \"\".concat(crop.x).concat(crop.unit),\n width: \"\".concat(crop.width).concat(crop.unit),\n height: \"\".concat(crop.height).concat(crop.unit)\n };\n }\n }, {\n key: \"getNewSize\",\n value: function getNewSize() {\n var _this$props7 = this.props,\n crop = _this$props7.crop,\n minWidth = _this$props7.minWidth,\n maxWidth = _this$props7.maxWidth,\n minHeight = _this$props7.minHeight,\n maxHeight = _this$props7.maxHeight;\n var evData = this.evData;\n var _this$componentDimens6 = this.componentDimensions,\n width = _this$componentDimens6.width,\n height = _this$componentDimens6.height; // New width.\n\n var newWidth = evData.cropStartWidth + evData.xDiff;\n\n if (evData.xCrossOver) {\n newWidth = Math.abs(newWidth);\n }\n\n newWidth = clamp(newWidth, minWidth, maxWidth || width); // New height.\n\n var newHeight;\n\n if (crop.aspect) {\n newHeight = newWidth / crop.aspect;\n } else {\n newHeight = evData.cropStartHeight + evData.yDiff;\n }\n\n if (evData.yCrossOver) {\n // Cap if polarity is inversed and the height fills the y space.\n newHeight = Math.min(Math.abs(newHeight), evData.cropStartY);\n }\n\n newHeight = clamp(newHeight, minHeight, maxHeight || height);\n\n if (crop.aspect) {\n newWidth = clamp(newHeight * crop.aspect, 0, width);\n }\n\n return {\n width: newWidth,\n height: newHeight\n };\n }\n }, {\n key: \"dragCrop\",\n value: function dragCrop() {\n var nextCrop = this.makeNewCrop();\n var evData = this.evData;\n var _this$componentDimens7 = this.componentDimensions,\n width = _this$componentDimens7.width,\n height = _this$componentDimens7.height;\n nextCrop.x = clamp(evData.cropStartX + evData.xDiff, 0, width - nextCrop.width);\n nextCrop.y = clamp(evData.cropStartY + evData.yDiff, 0, height - nextCrop.height);\n return nextCrop;\n }\n }, {\n key: \"resizeCrop\",\n value: function resizeCrop() {\n var evData = this.evData;\n var nextCrop = this.makeNewCrop();\n var ord = evData.ord; // On the inverse change the diff so it's the same and\n // the same algo applies.\n\n if (evData.xInversed) {\n evData.xDiff -= evData.cropStartWidth * 2;\n evData.xDiffPc -= evData.cropStartWidth * 2;\n }\n\n if (evData.yInversed) {\n evData.yDiff -= evData.cropStartHeight * 2;\n evData.yDiffPc -= evData.cropStartHeight * 2;\n } // New size.\n\n\n var newSize = this.getNewSize(); // Adjust x/y to give illusion of 'staticness' as width/height is increased\n // when polarity is inversed.\n\n var newX = evData.cropStartX;\n var newY = evData.cropStartY;\n\n if (evData.xCrossOver) {\n newX = nextCrop.x + (nextCrop.width - newSize.width);\n }\n\n if (evData.yCrossOver) {\n // This not only removes the little \"shake\" when inverting at a diagonal, but for some\n // reason y was way off at fast speeds moving sw->ne with fixed aspect only, I couldn't\n // figure out why.\n if (evData.lastYCrossover === false) {\n newY = nextCrop.y - newSize.height;\n } else {\n newY = nextCrop.y + (nextCrop.height - newSize.height);\n }\n }\n\n var _this$componentDimens8 = this.componentDimensions,\n width = _this$componentDimens8.width,\n height = _this$componentDimens8.height;\n var containedCrop = containCrop(this.props.crop, {\n unit: nextCrop.unit,\n x: newX,\n y: newY,\n width: newSize.width,\n height: newSize.height,\n aspect: nextCrop.aspect\n }, width, height); // Apply x/y/width/height changes depending on ordinate (fixed aspect always applies both).\n\n if (nextCrop.aspect || ReactCrop.xyOrds.indexOf(ord) > -1) {\n nextCrop.x = containedCrop.x;\n nextCrop.y = containedCrop.y;\n nextCrop.width = containedCrop.width;\n nextCrop.height = containedCrop.height;\n } else if (ReactCrop.xOrds.indexOf(ord) > -1) {\n nextCrop.x = containedCrop.x;\n nextCrop.width = containedCrop.width;\n } else if (ReactCrop.yOrds.indexOf(ord) > -1) {\n nextCrop.y = containedCrop.y;\n nextCrop.height = containedCrop.height;\n }\n\n evData.lastYCrossover = evData.yCrossOver;\n this.crossOverCheck();\n return nextCrop;\n }\n }, {\n key: \"straightenYPath\",\n value: function straightenYPath(clientX) {\n var evData = this.evData;\n var ord = evData.ord;\n var cropOffset = evData.cropOffset,\n cropStartWidth = evData.cropStartWidth,\n cropStartHeight = evData.cropStartHeight;\n var k;\n var d;\n\n if (ord === 'nw' || ord === 'se') {\n k = cropStartHeight / cropStartWidth;\n d = cropOffset.top - cropOffset.left * k;\n } else {\n k = -cropStartHeight / cropStartWidth;\n d = cropOffset.top + (cropStartHeight - cropOffset.left * k);\n }\n\n return k * clientX + d;\n }\n }, {\n key: \"createCropSelection\",\n value: function createCropSelection() {\n var _this2 = this;\n\n var _this$props8 = this.props,\n disabled = _this$props8.disabled,\n locked = _this$props8.locked,\n renderSelectionAddon = _this$props8.renderSelectionAddon,\n ruleOfThirds = _this$props8.ruleOfThirds;\n var style = this.getCropStyle();\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n ref: function ref(n) {\n _this2.cropSelectRef = n;\n },\n style: style,\n className: \"ReactCrop__crop-selection\",\n onMouseDown: this.onCropMouseTouchDown,\n onTouchStart: this.onCropMouseTouchDown,\n role: \"presentation\"\n }, !disabled && !locked && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-elements\"\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-bar ord-n\",\n \"data-ord\": \"n\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-bar ord-e\",\n \"data-ord\": \"e\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-bar ord-s\",\n \"data-ord\": \"s\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-bar ord-w\",\n \"data-ord\": \"w\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-nw\",\n \"data-ord\": \"nw\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-n\",\n \"data-ord\": \"n\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-ne\",\n \"data-ord\": \"ne\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-e\",\n \"data-ord\": \"e\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-se\",\n \"data-ord\": \"se\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-s\",\n \"data-ord\": \"s\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-sw\",\n \"data-ord\": \"sw\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__drag-handle ord-w\",\n \"data-ord\": \"w\"\n })), renderSelectionAddon && renderSelectionAddon(this.state), ruleOfThirds && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__rule-of-thirds-hz\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: \"ReactCrop__rule-of-thirds-vt\"\n })));\n }\n }, {\n key: \"makeNewCrop\",\n value: function makeNewCrop() {\n var unit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'px';\n\n var crop = _objectSpread({}, ReactCrop.defaultCrop, {}, this.props.crop);\n\n var _this$componentDimens9 = this.componentDimensions,\n width = _this$componentDimens9.width,\n height = _this$componentDimens9.height;\n return unit === 'px' ? convertToPixelCrop(crop, width, height) : convertToPercentCrop(crop, width, height);\n }\n }, {\n key: \"crossOverCheck\",\n value: function crossOverCheck() {\n var evData = this.evData;\n\n if (!evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiff >= 0 || evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiff <= 0) {\n evData.xCrossOver = !evData.xCrossOver;\n }\n\n if (!evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiff >= 0 || evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiff <= 0) {\n evData.yCrossOver = !evData.yCrossOver;\n }\n\n var swapXOrd = evData.xCrossOver !== evData.startXCrossOver;\n var swapYOrd = evData.yCrossOver !== evData.startYCrossOver;\n evData.inversedXOrd = swapXOrd ? inverseOrd(evData.ord) : false;\n evData.inversedYOrd = swapYOrd ? inverseOrd(evData.ord) : false;\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this3 = this;\n\n var _this$props9 = this.props,\n children = _this$props9.children,\n circularCrop = _this$props9.circularCrop,\n className = _this$props9.className,\n crossorigin = _this$props9.crossorigin,\n crop = _this$props9.crop,\n disabled = _this$props9.disabled,\n locked = _this$props9.locked,\n imageAlt = _this$props9.imageAlt,\n onImageError = _this$props9.onImageError,\n renderComponent = _this$props9.renderComponent,\n src = _this$props9.src,\n style = _this$props9.style,\n imageStyle = _this$props9.imageStyle,\n ruleOfThirds = _this$props9.ruleOfThirds;\n var _this$state = this.state,\n cropIsActive = _this$state.cropIsActive,\n newCropIsBeingDrawn = _this$state.newCropIsBeingDrawn;\n var cropSelection = isCropValid(crop) && this.componentRef ? this.createCropSelection() : null;\n var componentClasses = Object(clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('ReactCrop', className, {\n 'ReactCrop--active': cropIsActive,\n 'ReactCrop--disabled': disabled,\n 'ReactCrop--locked': locked,\n 'ReactCrop--new-crop': newCropIsBeingDrawn,\n 'ReactCrop--fixed-aspect': crop && crop.aspect,\n // In this case we have to shadow the image, since the box-shadow on the crop won't work.\n 'ReactCrop--crop-invisible': crop && cropIsActive && (!crop.width || !crop.height),\n 'ReactCrop--circular-crop': crop && circularCrop,\n 'ReactCrop--rule-of-thirds': crop && ruleOfThirds\n });\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n ref: function ref(n) {\n _this3.componentRef = n;\n },\n className: componentClasses,\n style: style,\n onTouchStart: this.onComponentMouseTouchDown,\n onMouseDown: this.onComponentMouseTouchDown,\n role: \"presentation\",\n tabIndex: 1,\n onKeyDown: this.onComponentKeyDown\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n ref: function ref(n) {\n _this3.mediaWrapperRef = n;\n }\n }, renderComponent || react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n ref: function ref(n) {\n _this3.imageRef = n;\n },\n crossOrigin: crossorigin,\n className: \"ReactCrop__image\",\n style: imageStyle,\n src: src,\n onLoad: function onLoad(e) {\n return _this3.onImageLoad(e.target);\n },\n onError: onImageError,\n alt: imageAlt\n })), children, cropSelection);\n }\n }, {\n key: \"componentDimensions\",\n get: function get() {\n var _this$componentRef = this.componentRef,\n clientWidth = _this$componentRef.clientWidth,\n clientHeight = _this$componentRef.clientHeight;\n return {\n width: clientWidth,\n height: clientHeight\n };\n }\n }]);\n\n return ReactCrop;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"PureComponent\"]);\n\nReactCrop.xOrds = ['e', 'w'];\nReactCrop.yOrds = ['n', 's'];\nReactCrop.xyOrds = ['nw', 'ne', 'se', 'sw'];\nReactCrop.arrowKey = {\n left: 37,\n up: 38,\n right: 39,\n down: 40\n};\nReactCrop.nudgeStep = 0.2;\nReactCrop.defaultCrop = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n unit: 'px'\n};\nReactCrop.propTypes = {\n className: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,\n children: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.node), prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.node]),\n circularCrop: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n crop: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.shape({\n aspect: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n x: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n y: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n width: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n height: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n unit: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOf(['px', '%'])\n }),\n crossorigin: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,\n disabled: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n locked: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n imageAlt: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,\n imageStyle: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.shape({}),\n keepSelection: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n minWidth: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n minHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n maxWidth: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n maxHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n onChange: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func.isRequired,\n onImageError: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n onComplete: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n onImageLoaded: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n onDragStart: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n onDragEnd: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n src: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string.isRequired,\n style: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.shape({}),\n renderComponent: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.node,\n renderSelectionAddon: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n ruleOfThirds: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool\n};\nReactCrop.defaultProps = {\n circularCrop: false,\n className: undefined,\n crop: undefined,\n crossorigin: undefined,\n disabled: false,\n locked: false,\n imageAlt: '',\n maxWidth: undefined,\n maxHeight: undefined,\n minWidth: 0,\n minHeight: 0,\n keepSelection: false,\n onComplete: function onComplete() {},\n onImageError: function onImageError() {},\n onImageLoaded: function onImageLoaded() {},\n onDragStart: function onDragStart() {},\n onDragEnd: function onDragEnd() {},\n children: undefined,\n style: undefined,\n renderComponent: undefined,\n imageStyle: undefined,\n renderSelectionAddon: undefined,\n ruleOfThirds: false\n};\n\n\n//# sourceURL=webpack://ReactCrop/./lib/ReactCrop.js?"); /***/ }), diff --git a/dist/ReactCrop.min.js b/dist/ReactCrop.min.js index 7115f1b..d13e864 100644 --- a/dist/ReactCrop.min.js +++ b/dist/ReactCrop.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactCrop=t(require("react")):e.ReactCrop=t(e.React)}(this,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t,n){e.exports=n(2)()},function(t,n){t.exports=e},function(e,t,n){"use strict";var r=n(3);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,i,a){if(a!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r),i=n(0),a=n.n(i);function s(e){var t,n,r="";if(e)if("object"==typeof e)if(e.push)for(t=0;tn&&(r.height=n-r.y,r.width=r.height*e.aspect),r.x+r.width>t&&(r.width=t-r.x,r.height=r.width/e.aspect),r}function b(e,t,n){return"%"===e.unit?e:{unit:"%",aspect:e.aspect,x:e.x/t*100,y:e.y/n*100,width:e.width/t*100,height:e.height/n*100}}function O(e,t,n){return"px"===e.unit?e:{unit:"px",aspect:e.aspect,x:e.x*t/100,y:e.y*n/100,width:e.width*t/100,height:e.height*n/100}}function S(e,t,n,r){var o=O(t,n,r),i=O(e,n,r),a=f({},o);if(!o.aspect)return o.x<0?(a.x=0,a.width+=o.x):o.x+o.width>n&&(a.width=n-o.x),o.y+o.height>r&&(a.height=r-o.y),a;var s=!1;o.x<0?(a.x=0,a.width+=o.x,a.height=a.width/o.aspect,s=!0):o.x+o.width>n&&(a.width=n-o.x,a.height=a.width/o.aspect,s=!0),s&&i.y>a.y&&(a.y=o.y+(o.height-a.height));var c=!1;return a.y+a.height>r&&(a.height=r-o.y,a.width=a.height*o.aspect,c=!0),c&&i.x>a.x&&(a.x=o.x+(o.width-a.width)),a}var D=function(e){function t(){var e,n,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,a=new Array(i),s=0;sn||e.x+e.width>t}(e,t,n)?x(e,t,n):e}(this.makeNewCrop(),e.width,e.height);if(!1!==o(e)){var a=O(i,e.width,e.height),s=b(i,e.width,e.height);r(a,s),n(a,s)}}},{key:"getDocumentOffset",value:function(){var e=this.document.documentElement||{},t=e.clientTop,n=void 0===t?0:t,r=e.clientLeft;return{clientTop:n,clientLeft:void 0===r?0:r}}},{key:"getWindowOffset",value:function(){var e=this.window,t=e.pageYOffset,n=void 0===t?0:t,r=e.pageXOffset;return{pageYOffset:n,pageXOffset:void 0===r?0:r}}},{key:"getElementOffset",value:function(e){var t=e.getBoundingClientRect(),n=this.getDocumentOffset(),r=this.getWindowOffset();return{top:t.top+r.pageYOffset-n.clientTop,left:t.left+r.pageXOffset-n.clientLeft}}},{key:"getCropStyle",value:function(){var e=this.makeNewCrop(this.props.crop?this.props.crop.unit:"px");return{top:"".concat(e.y).concat(e.unit),left:"".concat(e.x).concat(e.unit),width:"".concat(e.width).concat(e.unit),height:"".concat(e.height).concat(e.unit)}}},{key:"getNewSize",value:function(){var e,t=this.props,n=t.crop,r=t.minWidth,o=t.maxWidth,i=t.minHeight,a=t.maxHeight,s=this.evData,c=this.componentDimensions,h=c.width,d=c.height,u=s.cropStartWidth+s.xDiff;return s.xCrossOver&&(u=Math.abs(u)),u=y(u,r,o||h),e=n.aspect?u/n.aspect:s.cropStartHeight+s.yDiff,s.yCrossOver&&(e=Math.min(Math.abs(e),s.cropStartY)),e=y(e,i,a||d),n.aspect&&(u=y(e*n.aspect,0,h)),{width:u,height:e}}},{key:"dragCrop",value:function(){var e=this.makeNewCrop(),t=this.evData,n=this.componentDimensions,r=n.width,o=n.height;return e.x=y(t.cropStartX+t.xDiff,0,r-e.width),e.y=y(t.cropStartY+t.yDiff,0,o-e.height),e}},{key:"resizeCrop",value:function(){var e=this.evData,n=this.makeNewCrop(),r=e.ord;e.xInversed&&(e.xDiff-=2*e.cropStartWidth,e.xDiffPc-=2*e.cropStartWidth),e.yInversed&&(e.yDiff-=2*e.cropStartHeight,e.yDiffPc-=2*e.cropStartHeight);var o=this.getNewSize(),i=e.cropStartX,a=e.cropStartY;e.xCrossOver&&(i=n.x+(n.width-o.width)),e.yCrossOver&&(a=!1===e.lastYCrossover?n.y-o.height:n.y+(n.height-o.height));var s=this.componentDimensions,c=s.width,h=s.height,d=S(this.props.crop,{unit:n.unit,x:i,y:a,width:o.width,height:o.height,aspect:n.aspect},c,h);return n.aspect||t.xyOrds.indexOf(r)>-1?(n.x=d.x,n.y=d.y,n.width=d.width,n.height=d.height):t.xOrds.indexOf(r)>-1?(n.x=d.x,n.width=d.width):t.yOrds.indexOf(r)>-1&&(n.y=d.y,n.height=d.height),e.lastYCrossover=e.yCrossOver,this.crossOverCheck(),n}},{key:"straightenYPath",value:function(e){var t,n,r=this.evData,o=r.ord,i=r.cropOffset,a=r.cropStartWidth,s=r.cropStartHeight;return"nw"===o||"se"===o?(t=s/a,n=i.top-i.left*t):(t=-s/a,n=i.top+(s-i.left*t)),t*e+n}},{key:"createCropSelection",value:function(){var e=this,t=this.props,n=t.disabled,r=t.locked,i=t.renderSelectionAddon,a=this.getCropStyle();return o.a.createElement("div",{ref:function(t){e.cropSelectRef=t},style:a,className:"ReactCrop__crop-selection",onMouseDown:this.onCropMouseTouchDown,onTouchStart:this.onCropMouseTouchDown,role:"presentation"},!n&&!r&&o.a.createElement("div",{className:"ReactCrop__drag-elements"},o.a.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),o.a.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),o.a.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),o.a.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),o.a.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw"}),o.a.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n"}),o.a.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne"}),o.a.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e"}),o.a.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se"}),o.a.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s"}),o.a.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw"}),o.a.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w"})),i&&i(this.state))}},{key:"makeNewCrop",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"px",n=f({},t.defaultCrop,this.props.crop),r=this.componentDimensions,o=r.width,i=r.height;return"px"===e?O(n,o,i):b(n,o,i)}},{key:"crossOverCheck",value:function(){var e=this.evData;(!e.xCrossOver&&-Math.abs(e.cropStartWidth)-e.xDiff>=0||e.xCrossOver&&-Math.abs(e.cropStartWidth)-e.xDiff<=0)&&(e.xCrossOver=!e.xCrossOver),(!e.yCrossOver&&-Math.abs(e.cropStartHeight)-e.yDiff>=0||e.yCrossOver&&-Math.abs(e.cropStartHeight)-e.yDiff<=0)&&(e.yCrossOver=!e.yCrossOver);var t=e.xCrossOver!==e.startXCrossOver,n=e.yCrossOver!==e.startYCrossOver;e.inversedXOrd=!!t&&C(e.ord),e.inversedYOrd=!!n&&C(e.ord)}},{key:"render",value:function(){var e=this,t=this.props,n=t.children,r=t.className,i=t.crossorigin,a=t.crop,c=t.disabled,h=t.locked,d=t.imageAlt,u=t.onImageError,p=t.renderComponent,f=t.src,l=t.style,v=t.imageStyle,m=this.state,g=m.cropIsActive,y=m.newCropIsBeingDrawn,C=w(a)&&this.componentRef?this.createCropSelection():null,x=function(){for(var e,t=0,n="";tr&&(o.height=r-o.y,o.width=o.height*e.aspect),o.x+o.width>t&&(o.width=t-o.x,o.height=o.width/e.aspect),o}function b(e,t,r){return"%"===e.unit?e:{unit:"%",aspect:e.aspect,x:e.x/t*100,y:e.y/r*100,width:e.width/t*100,height:e.height/r*100}}function S(e,t,r){return"px"===e.unit?e:{unit:"px",aspect:e.aspect,x:e.x*t/100,y:e.y*r/100,width:e.width*t/100,height:e.height*r/100}}function D(e,t,r,o){var n=S(t,r,o),i=S(e,r,o),a=l({},n);if(!n.aspect)return n.x<0?(a.x=0,a.width+=n.x):n.x+n.width>r&&(a.width=r-n.x),n.y+n.height>o&&(a.height=o-n.y),a;var c=!1;n.x<0?(a.x=0,a.width+=n.x,a.height=a.width/n.aspect,c=!0):n.x+n.width>r&&(a.width=r-n.x,a.height=a.width/n.aspect,c=!0),c&&i.y>a.y&&(a.y=n.y+(n.height-a.height));var s=!1;return a.y+a.height>o&&(a.height=o-n.y,a.width=a.height*n.aspect,s=!0),s&&i.x>a.x&&(a.x=n.x+(n.width-a.width)),a}var E=function(e){function t(){var e,r,o,n;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,a=new Array(i),c=0;cr||e.x+e.width>t}(e,t,r)?x(e,t,r):e}(this.makeNewCrop(),e.width,e.height);if(!1!==n(e)){var a=S(i,e.width,e.height),c=b(i,e.width,e.height);o(a,c),r(a,c)}}},{key:"getDocumentOffset",value:function(){var e=this.document.documentElement||{},t=e.clientTop,r=void 0===t?0:t,o=e.clientLeft;return{clientTop:r,clientLeft:void 0===o?0:o}}},{key:"getWindowOffset",value:function(){var e=this.window,t=e.pageYOffset,r=void 0===t?0:t,o=e.pageXOffset;return{pageYOffset:r,pageXOffset:void 0===o?0:o}}},{key:"getElementOffset",value:function(e){var t=e.getBoundingClientRect(),r=this.getDocumentOffset(),o=this.getWindowOffset();return{top:t.top+o.pageYOffset-r.clientTop,left:t.left+o.pageXOffset-r.clientLeft}}},{key:"getCropStyle",value:function(){var e=this.makeNewCrop(this.props.crop?this.props.crop.unit:"px");return{top:"".concat(e.y).concat(e.unit),left:"".concat(e.x).concat(e.unit),width:"".concat(e.width).concat(e.unit),height:"".concat(e.height).concat(e.unit)}}},{key:"getNewSize",value:function(){var e,t=this.props,r=t.crop,o=t.minWidth,n=t.maxWidth,i=t.minHeight,a=t.maxHeight,c=this.evData,s=this.componentDimensions,h=s.width,d=s.height,u=c.cropStartWidth+c.xDiff;return c.xCrossOver&&(u=Math.abs(u)),u=w(u,o,n||h),e=r.aspect?u/r.aspect:c.cropStartHeight+c.yDiff,c.yCrossOver&&(e=Math.min(Math.abs(e),c.cropStartY)),e=w(e,i,a||d),r.aspect&&(u=w(e*r.aspect,0,h)),{width:u,height:e}}},{key:"dragCrop",value:function(){var e=this.makeNewCrop(),t=this.evData,r=this.componentDimensions,o=r.width,n=r.height;return e.x=w(t.cropStartX+t.xDiff,0,o-e.width),e.y=w(t.cropStartY+t.yDiff,0,n-e.height),e}},{key:"resizeCrop",value:function(){var e=this.evData,r=this.makeNewCrop(),o=e.ord;e.xInversed&&(e.xDiff-=2*e.cropStartWidth,e.xDiffPc-=2*e.cropStartWidth),e.yInversed&&(e.yDiff-=2*e.cropStartHeight,e.yDiffPc-=2*e.cropStartHeight);var n=this.getNewSize(),i=e.cropStartX,a=e.cropStartY;e.xCrossOver&&(i=r.x+(r.width-n.width)),e.yCrossOver&&(a=!1===e.lastYCrossover?r.y-n.height:r.y+(r.height-n.height));var c=this.componentDimensions,s=c.width,h=c.height,d=D(this.props.crop,{unit:r.unit,x:i,y:a,width:n.width,height:n.height,aspect:r.aspect},s,h);return r.aspect||t.xyOrds.indexOf(o)>-1?(r.x=d.x,r.y=d.y,r.width=d.width,r.height=d.height):t.xOrds.indexOf(o)>-1?(r.x=d.x,r.width=d.width):t.yOrds.indexOf(o)>-1&&(r.y=d.y,r.height=d.height),e.lastYCrossover=e.yCrossOver,this.crossOverCheck(),r}},{key:"straightenYPath",value:function(e){var t,r,o=this.evData,n=o.ord,i=o.cropOffset,a=o.cropStartWidth,c=o.cropStartHeight;return"nw"===n||"se"===n?(t=c/a,r=i.top-i.left*t):(t=-c/a,r=i.top+(c-i.left*t)),t*e+r}},{key:"createCropSelection",value:function(){var e=this,t=this.props,r=t.disabled,o=t.locked,i=t.renderSelectionAddon,a=t.ruleOfThirds,c=this.getCropStyle();return n.a.createElement("div",{ref:function(t){e.cropSelectRef=t},style:c,className:"ReactCrop__crop-selection",onMouseDown:this.onCropMouseTouchDown,onTouchStart:this.onCropMouseTouchDown,role:"presentation"},!r&&!o&&n.a.createElement("div",{className:"ReactCrop__drag-elements"},n.a.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),n.a.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),n.a.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),n.a.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),n.a.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw"}),n.a.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n"}),n.a.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne"}),n.a.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e"}),n.a.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se"}),n.a.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s"}),n.a.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw"}),n.a.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w"})),i&&i(this.state),a&&n.a.createElement(n.a.Fragment,null,n.a.createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),n.a.createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}},{key:"makeNewCrop",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"px",r=l({},t.defaultCrop,{},this.props.crop),o=this.componentDimensions,n=o.width,i=o.height;return"px"===e?S(r,n,i):b(r,n,i)}},{key:"crossOverCheck",value:function(){var e=this.evData;(!e.xCrossOver&&-Math.abs(e.cropStartWidth)-e.xDiff>=0||e.xCrossOver&&-Math.abs(e.cropStartWidth)-e.xDiff<=0)&&(e.xCrossOver=!e.xCrossOver),(!e.yCrossOver&&-Math.abs(e.cropStartHeight)-e.yDiff>=0||e.yCrossOver&&-Math.abs(e.cropStartHeight)-e.yDiff<=0)&&(e.yCrossOver=!e.yCrossOver);var t=e.xCrossOver!==e.startXCrossOver,r=e.yCrossOver!==e.startYCrossOver;e.inversedXOrd=!!t&&O(e.ord),e.inversedYOrd=!!r&&O(e.ord)}},{key:"render",value:function(){var e=this,t=this.props,r=t.children,o=t.circularCrop,i=t.className,a=t.crossorigin,s=t.crop,h=t.disabled,d=t.locked,u=t.imageAlt,p=t.onImageError,f=t.renderComponent,l=t.src,v=t.style,m=t.imageStyle,g=t.ruleOfThirds,y=this.state,w=y.cropIsActive,O=y.newCropIsBeingDrawn,x=C(s)&&this.componentRef?this.createCropSelection():null,b=function(){for(var e,t=0,r="";t