@onesy/ui-react 1.0.130 → 1.0.131

package/ImageCrop/ImageCrop.js

@@ -1,1076 +1,1101 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _utils2 = require("../utils");
+const _excluded = ["image", "minWidth", "minHeight", "maxWidth", "maxHeight", "selectorDefault", "selector", "onSelectorChange", "type", "quality", "aspectRatio", "gridLines", "dynamicParent", "onFocus", "onBlur", "TooltipProps", "Component", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => {
+  const dot = {
+    display: 'inline-block',
+    position: 'absolute',
+    width: '6px',
+    height: '6px',
+    borderRadius: '50%',
+    background: '#a4a4a4',
+    outline: '1px solid white'
+  };
+  return {
+    root: {
+      width: '100%',
+      minHeight: '1px',
+      lineHeight: '0',
+      userSelect: 'none',
+      overflow: 'hidden'
+    },
+    mouseDown_move: {
+      '& *': {
+        cursor: 'grab !important'
+      }
+    },
+    mouseDown_top: {
+      '& *': {
+        cursor: 'ns-resize !important'
+      }
+    },
+    mouseDown_left: {
+      '& *': {
+        cursor: 'ew-resize !important'
+      }
+    },
+    mouseDown_right: {
+      '& *': {
+        cursor: 'ew-resize !important'
+      }
+    },
+    mouseDown_bottom: {
+      '& *': {
+        cursor: 'ns-resize !important'
+      }
+    },
+    mouseDown_top_left: {
+      '& *': {
+        cursor: 'nwse-resize !important'
+      }
+    },
+    mouseDown_top_right: {
+      '& *': {
+        cursor: 'nesw-resize !important'
+      }
+    },
+    mouseDown_bottom_left: {
+      '& *': {
+        cursor: 'nesw-resize !important'
+      }
+    },
+    mouseDown_bottom_right: {
+      '& *': {
+        cursor: 'nwse-resize !important'
+      }
+    },
+    canvas: {
+      position: 'absolute',
+      zIndex: '0'
+    },
+    canvas_main: {
+      position: 'relative',
+      width: '100%',
+      height: 'auto'
+    },
+    canvas_imageSelector: {
+      zIndex: -1
+    },
+    background: {
+      position: 'absolute',
+      inset: '0',
+      width: '100%',
+      height: '100%',
+      opacity: '0',
+      background: theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, 44),
+      transition: theme.methods.transitions.make('opacity', {
+        duration: 'xxs'
+      }),
+      zIndex: '1'
+    },
+    background_in: {
+      opacity: '1'
+    },
+    imageSelector_main: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '0',
+      height: '0',
+      outline: '2px dashed white',
+      background: 'transparent',
+      touchAction: 'none',
+      opacity: '0',
+      zIndex: '14',
+      userSelect: 'none',
+      transition: theme.methods.transitions.make('opacity')
+    },
+    imageSelector_main_in: {
+      opacity: '1'
+    },
+    imageSelector: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '0',
+      height: '0',
+      touchAction: 'none',
+      overflow: 'hidden',
+      userSelect: 'none',
+      zIndex: '11'
+    },
+    move: {
+      position: 'absolute',
+      inset: '0',
+      width: '100%',
+      height: '100%',
+      cursor: 'grab',
+      '&:active': {
+        cursor: 'grabbing !important'
+      }
+    },
+    grid_line: {
+      position: 'absolute',
+      background: 'white',
+      mixBlendMode: 'difference'
+    },
+    grid_line_top_start: {
+      top: '33.3333%',
+      insetInline: '0',
+      width: '100%',
+      height: '1px'
+    },
+    grid_line_top_end: {
+      top: '66.6666%',
+      insetInline: '0',
+      width: '100%',
+      height: '1px'
+    },
+    grid_line_left_start: {
+      left: '33.3333%',
+      insetBlock: '0',
+      width: '1px',
+      height: '100%'
+    },
+    grid_line_left_end: {
+      left: '66.6666%',
+      insetBlock: '0',
+      width: '1px',
+      height: '100%'
+    },
+    dot: _objectSpread({}, dot),
+    dot_top_left: {
+      top: '-1px',
+      left: '-1px',
+      transform: 'translate(-50%, -50%)',
+      cursor: 'nwse-resize'
+    },
+    dot_top_right: {
+      top: '-1px',
+      right: '-1px',
+      transform: 'translate(50%, -50%)',
+      cursor: 'nesw-resize'
+    },
+    dot_bottom_left: {
+      bottom: '-1px',
+      left: '-1px',
+      transform: 'translate(-50%, 50%)',
+      cursor: 'nesw-resize'
+    },
+    dot_bottom_right: {
+      bottom: '-1px',
+      right: '-1px',
+      transform: 'translate(50%, 50%)',
+      cursor: 'nwse-resize'
+    },
+    border: {
+      position: 'absolute'
+    },
+    border_top: {
+      top: '-2px',
+      height: '2px',
+      width: '100%',
+      cursor: 'ns-resize',
+      '&::before': _objectSpread(_objectSpread({}, dot), {}, {
+        content: '""',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
+      })
+    },
+    border_left: {
+      left: '-2px',
+      height: '100%',
+      width: '2px',
+      cursor: 'ew-resize',
+      '&::before': _objectSpread(_objectSpread({}, dot), {}, {
+        content: '""',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
+      })
+    },
+    border_right: {
+      right: '-2px',
+      height: '100%',
+      width: '2px',
+      cursor: 'ew-resize',
+      '&::before': _objectSpread(_objectSpread({}, dot), {}, {
+        content: '""',
+        top: '50%',
+        right: '50%',
+        transform: 'translate(50%, -50%)'
+      })
+    },
+    border_bottom: {
+      bottom: '-2px',
+      height: '2px',
+      width: '100%',
+      cursor: 'ns-resize',
+      '&::before': _objectSpread(_objectSpread({}, dot), {}, {
+        content: '""',
+        bottom: '50%',
+        left: '50%',
+        transform: 'translate(-50%, 50%)'
+      })
+    }
+  };
+}, {
+  name: 'onesy-ImageCrop'
+});
+const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _refs$root$current4;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageCrop) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const {
+      // url, datauri or canvas
+      image: image_,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      selectorDefault,
+      selector: selector_,
+      onSelectorChange: onSelectorChange_,
+      type = `image/jpeg`,
+      quality = 1,
+      aspectRatio,
+      gridLines,
+      dynamicParent,
+      onFocus: onFocus_,
+      onBlur: onBlur_,
+      TooltipProps,
+      Component = 'div',
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [image, setImage] = _react.default.useState();
+  const [focus, setFocus] = _react.default.useState();
+  const [mouseDown, setMouseDown] = _react.default.useState();
+  const [selector, setSelector] = _react.default.useState(selectorDefault !== undefined ? selectorDefault : selector_);
+  const [selectorRelative, setSelectorRelative] = _react.default.useState();
+  const refs = {
+    root: _react.default.useRef(null),
+    image: _react.default.useRef(null),
+    mouseDown: _react.default.useRef(null),
+    selector: _react.default.useRef(null),
+    imageSelectorMain: _react.default.useRef(null),
+    imageSelector: _react.default.useRef(null),
+    previousMouseEvent: _react.default.useRef(null),
+    canvasMain: _react.default.useRef(null),
+    canvasImageSelector: _react.default.useRef(null),
+    move: _react.default.useRef(null),
+    borderTop: _react.default.useRef(null),
+    borderLeft: _react.default.useRef(null),
+    borderRight: _react.default.useRef(null),
+    borderBottom: _react.default.useRef(null),
+    dotTopLeft: _react.default.useRef(null),
+    dotTopRight: _react.default.useRef(null),
+    dotBottomLeft: _react.default.useRef(null),
+    dotBottomRight: _react.default.useRef(null),
+    props: _react.default.useRef(null),
+    dynamicParent: _react.default.useRef(null),
+    focus: _react.default.useRef(null),
+    aspectRatio: _react.default.useRef(null)
+  };
+  refs.image.current = image;
+  refs.mouseDown.current = mouseDown;
+  refs.selector.current = selector;
+  refs.props.current = props;
+  refs.focus.current = focus;
+  refs.dynamicParent.current = dynamicParent;
+  refs.aspectRatio.current = aspectRatio;
+  const onSelectorChange = valueNew => {
+    var _refs$canvasMain$curr, _refs$canvasMain$curr2, _refs$canvasMain$curr3, _refs$canvasMain$curr4;
+    // min, max for width, height
+    // + resolve it to max width and height for aspect ratio
+    if ((0, _utils.is)('object', valueNew) && !!Object.keys(valueNew).length && refs.root.current) {
+      var _refs$root$current, _refs$mouseDown$curre;
+      const rootRect = (_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.getBoundingClientRect();
+      const minWidth_ = refs.props.current.minWidth !== undefined ? refs.props.current.minWidth : Number.MIN_SAFE_INTEGER;
+      const minHeight_ = refs.props.current.minHeight !== undefined ? refs.props.current.minHeight : Number.MIN_SAFE_INTEGER;
+      const maxWidth_ = refs.props.current.maxWidth !== undefined ? refs.props.current.maxWidth : Number.MAX_SAFE_INTEGER;
+      const maxHeight_ = refs.props.current.maxHeight !== undefined ? refs.props.current.maxHeight : Number.MAX_SAFE_INTEGER;
+      valueNew.width = (0, _utils.clamp)(valueNew.width, minWidth_, maxWidth_);
+      valueNew.height = (0, _utils.clamp)(valueNew.height, minHeight_, maxHeight_);
+      if (refs.aspectRatio.current !== undefined) {
+        if (valueNew.width + valueNew.width / refs.aspectRatio.current >= valueNew.height + valueNew.height * refs.aspectRatio.current) {
+          valueNew.height = valueNew.width / refs.aspectRatio.current;
+        } else {
+          valueNew.width = valueNew.height * refs.aspectRatio.current;
+        }
+
+        // Max width
+        if (valueNew.left + valueNew.width > rootRect.width) {
+          valueNew.width = rootRect.width - valueNew.left;
+          valueNew.height = valueNew.width / refs.aspectRatio.current;
+        }
+
+        // Max height
+        if (valueNew.top + valueNew.height > rootRect.height) {
+          valueNew.height = rootRect.height - valueNew.top;
+          valueNew.width = valueNew.height * refs.aspectRatio.current;
+        }
+
+        // Max width, height per maxWidth and maxHeight
+        if (valueNew.width < minWidth_ || valueNew.width > maxWidth_) {
+          valueNew.width = (0, _utils.clamp)(valueNew.width, minWidth_, maxWidth_);
+          valueNew.height = valueNew.width / refs.aspectRatio.current;
         }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => {
-    const dot = {
-        display: 'inline-block',
-        position: 'absolute',
-        width: '6px',
-        height: '6px',
-        borderRadius: '50%',
-        background: '#a4a4a4',
-        outline: '1px solid white'
+        if (valueNew.height < minHeight_ || valueNew.height > maxHeight_) {
+          valueNew.height = (0, _utils.clamp)(valueNew.height, minHeight_, maxHeight_);
+          valueNew.width = valueNew.height / refs.aspectRatio.current;
+        }
+      }
+
+      // If previous values are within maxWidth and/or maxHeight
+      // and left or top are not same as before
+      // return
+      if (!['move'].includes((_refs$mouseDown$curre = refs.mouseDown.current) === null || _refs$mouseDown$curre === void 0 ? void 0 : _refs$mouseDown$curre.version)) {
+        if (maxWidth_ !== undefined || maxHeight_ !== undefined) {
+          var _refs$selector$curren, _refs$selector$curren2, _refs$selector$curren3, _refs$selector$curren4;
+          if ((valueNew.top < ((_refs$selector$curren = refs.selector.current) === null || _refs$selector$curren === void 0 ? void 0 : _refs$selector$curren.top) || valueNew.left < ((_refs$selector$curren2 = refs.selector.current) === null || _refs$selector$curren2 === void 0 ? void 0 : _refs$selector$curren2.left)) && (((_refs$selector$curren3 = refs.selector.current) === null || _refs$selector$curren3 === void 0 ? void 0 : _refs$selector$curren3.width) === maxWidth_ || ((_refs$selector$curren4 = refs.selector.current) === null || _refs$selector$curren4 === void 0 ? void 0 : _refs$selector$curren4.height) === maxHeight_)) return;
+        }
+      }
+    }
+    const rootRect_ = refs.root.current.getBoundingClientRect();
+    const selectorRelative_ = {
+      top: valueNew.top / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.height) * ((_refs$canvasMain$curr = refs.canvasMain.current) === null || _refs$canvasMain$curr === void 0 ? void 0 : _refs$canvasMain$curr.height),
+      left: valueNew.left / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.width) * ((_refs$canvasMain$curr2 = refs.canvasMain.current) === null || _refs$canvasMain$curr2 === void 0 ? void 0 : _refs$canvasMain$curr2.width),
+      width: valueNew.width / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.width) * ((_refs$canvasMain$curr3 = refs.canvasMain.current) === null || _refs$canvasMain$curr3 === void 0 ? void 0 : _refs$canvasMain$curr3.width),
+      height: valueNew.height / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.height) * ((_refs$canvasMain$curr4 = refs.canvasMain.current) === null || _refs$canvasMain$curr4 === void 0 ? void 0 : _refs$canvasMain$curr4.height)
+    };
+
+    // Update inner or controlled
+    if (!props.hasOwnProperty('selector')) {
+      setSelector(valueNew);
+      setSelectorRelative(selectorRelative_);
+    }
+    if ((0, _utils.is)('function', onSelectorChange_)) onSelectorChange_(selectorRelative_);
+  };
+  _react.default.useEffect(() => {
+    var _refs$root$current2;
+    const method = event => {
+      switch (event.key) {
+        case 'Escape':
+          if (refs.focus.current) setSelector({});
+          break;
+        default:
+          break;
+      }
     };
-    return {
-        root: {
-            width: '100%',
-            minHeight: '1px',
-            lineHeight: '0',
-            userSelect: 'none',
-            overflow: 'hidden'
-        },
-        mouseDown_move: {
-            '& *': {
-                cursor: 'grab !important'
+    const onMouseUp = event => {
+      setMouseDown(false);
+      refs.previousMouseEvent.current = undefined;
+    };
+
+    // Move
+    const onMove = (x, y) => {
+      if (refs.mouseDown.current && refs.previousMouseEvent.current) {
+        var _refs$mouseDown$curre2, _refs$mouseDown$curre3, _refs$mouseDown$curre4, _refs$mouseDown$curre5, _refs$mouseDown$curre6, _refs$mouseDown$curre7, _refs$mouseDown$curre8, _refs$mouseDown$curre9, _refs$mouseDown$curre10, _refs$mouseDown$curre11;
+        const {
+          top: previousTop,
+          left: previousLeft
+        } = refs.mouseDown.current;
+        const rootRect = refs.root.current.getBoundingClientRect();
+        const selectorRect_ = refs.imageSelectorMain.current.getBoundingClientRect();
+        const selectorRect = {};
+
+        // Normalize relative to root
+        selectorRect.width = selectorRect_.width;
+        selectorRect.height = selectorRect_.height;
+        selectorRect.top = selectorRect_.top - rootRect.top;
+        selectorRect.left = selectorRect_.left - rootRect.left;
+        selectorRect.right = selectorRect.left + selectorRect_.width;
+        selectorRect.bottom = selectorRect.top + selectorRect_.height;
+        if (((_refs$mouseDown$curre2 = refs.mouseDown.current) === null || _refs$mouseDown$curre2 === void 0 ? void 0 : _refs$mouseDown$curre2.version) === 'make') {
+          const top_ = (0, _utils.clamp)(y - rootRect.top, 0, rootRect.height);
+          const left_ = (0, _utils.clamp)(x - rootRect.left, 0, rootRect.width);
+          let top = (0, _utils.clamp)(top_, 0, previousTop);
+          let left = (0, _utils.clamp)(left_, 0, previousLeft);
+          let width = Math.abs(left_ - previousLeft);
+          let height = Math.abs(top_ - previousTop);
+          if (refs.aspectRatio.current !== undefined) {
+            if (left < previousLeft) {
+              var _refs$selector$curren5, _refs$selector$curren6, _refs$selector$curren7, _refs$selector$curren8;
+              if (((_refs$selector$curren5 = refs.selector.current) === null || _refs$selector$curren5 === void 0 ? void 0 : _refs$selector$curren5.left) < previousLeft && left < ((_refs$selector$curren6 = refs.selector.current) === null || _refs$selector$curren6 === void 0 ? void 0 : _refs$selector$curren6.left) && (top <= 0 || ((_refs$selector$curren7 = refs.selector.current) === null || _refs$selector$curren7 === void 0 ? void 0 : _refs$selector$curren7.top) + ((_refs$selector$curren8 = refs.selector.current) === null || _refs$selector$curren8 === void 0 ? void 0 : _refs$selector$curren8.height) >= rootRect.height)) return;
             }
-        },
-        mouseDown_top: {
-            '& *': {
-                cursor: 'ns-resize !important'
+            if (top < previousTop) {
+              var _refs$selector$curren9, _refs$selector$curren10, _refs$selector$curren11, _refs$selector$curren12;
+              if (((_refs$selector$curren9 = refs.selector.current) === null || _refs$selector$curren9 === void 0 ? void 0 : _refs$selector$curren9.top) < previousTop && top < ((_refs$selector$curren10 = refs.selector.current) === null || _refs$selector$curren10 === void 0 ? void 0 : _refs$selector$curren10.top) && (left <= 0 || ((_refs$selector$curren11 = refs.selector.current) === null || _refs$selector$curren11 === void 0 ? void 0 : _refs$selector$curren11.left) + ((_refs$selector$curren12 = refs.selector.current) === null || _refs$selector$curren12 === void 0 ? void 0 : _refs$selector$curren12.width) >= rootRect.width)) return;
             }
-        },
-        mouseDown_left: {
-            '& *': {
-                cursor: 'ew-resize !important'
+
+            // Max surface
+            if (width + width / refs.aspectRatio.current >= height + height * refs.aspectRatio.current) {
+              height = width / refs.aspectRatio.current;
+            } else {
+              width = height * refs.aspectRatio.current;
             }
-        },
-        mouseDown_right: {
-            '& *': {
-                cursor: 'ew-resize !important'
+
+            // Moved left
+            if (left < previousLeft) {
+              left = (0, _utils.clamp)(previousLeft - width, 0, previousLeft);
+
+              // Update width, height upto the previousLeft
+              width = (0, _utils.clamp)(width, 0, previousLeft);
+              height = width / refs.aspectRatio.current;
             }
-        },
-        mouseDown_bottom: {
-            '& *': {
-                cursor: 'ns-resize !important'
+
+            // Moved top
+            if (top < previousTop) {
+              top = (0, _utils.clamp)(previousTop - height, 0, previousTop);
+
+              // Update width, height upto the previousTop
+              height = (0, _utils.clamp)(height, 0, previousTop);
+              width = height * refs.aspectRatio.current;
             }
-        },
-        mouseDown_top_left: {
-            '& *': {
-                cursor: 'nwse-resize !important'
+
+            // Max width
+            if (left + width > rootRect.width) {
+              width = rootRect.width - left;
+              height = width / refs.aspectRatio.current;
             }
-        },
-        mouseDown_top_right: {
-            '& *': {
-                cursor: 'nesw-resize !important'
+
+            // Max height
+            if (top + height > rootRect.height) {
+              height = rootRect.height - top;
+              width = height * refs.aspectRatio.current;
             }
-        },
-        mouseDown_bottom_left: {
-            '& *': {
-                cursor: 'nesw-resize !important'
+
+            // Min left
+            if (left < previousLeft) left = previousLeft - width;
+
+            // Min top
+            if (top < previousTop) top = previousTop - height;
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            top,
+            left,
+            width,
+            height
+          }));
+        } else if (((_refs$mouseDown$curre3 = refs.mouseDown.current) === null || _refs$mouseDown$curre3 === void 0 ? void 0 : _refs$mouseDown$curre3.version) === 'move') {
+          const top = y - refs.previousMouseEvent.current.clientY;
+          const left = x - refs.previousMouseEvent.current.clientX;
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            top: (0, _utils.clamp)(refs.selector.current.top + top, 0, rootRect.height - selectorRect.height),
+            left: (0, _utils.clamp)(refs.selector.current.left + left, 0, rootRect.width - selectorRect.width)
+          }));
+        } else if (((_refs$mouseDown$curre4 = refs.mouseDown.current) === null || _refs$mouseDown$curre4 === void 0 ? void 0 : _refs$mouseDown$curre4.version) === 'top_left') {
+          const incY = y - refs.previousMouseEvent.current.clientY;
+          const incX = x - refs.previousMouseEvent.current.clientX;
+          let top = (0, _utils.clamp)(selectorRect.top + incY, 0);
+          let left = (0, _utils.clamp)(selectorRect.left + incX, 0);
+          if (selectorRect.bottom - top < 0 && selectorRect.right - left < 0) refs.mouseDown.current.version = 'bottom_right';else if (selectorRect.bottom - top < 0) refs.mouseDown.current.version = 'bottom_left';else if (selectorRect.right - left < 0) refs.mouseDown.current.version = 'top_right';
+          let width = (0, _utils.clamp)(selectorRect.right - left, 0);
+          let height = (0, _utils.clamp)(selectorRect.bottom - top, 0);
+          if (refs.aspectRatio.current !== undefined) {
+            var _refs$selector$curren13;
+            // Left
+            if (left < refs.selector.current.left && refs.selector.current.left < previousLeft && ((_refs$selector$curren13 = refs.selector.current) === null || _refs$selector$curren13 === void 0 ? void 0 : _refs$selector$curren13.top) === 0) return;
+
+            // Max surface
+            if (width + width / refs.aspectRatio.current >= height + height * refs.aspectRatio.current) {
+              height = width / refs.aspectRatio.current;
+            } else {
+              width = height * refs.aspectRatio.current;
             }
-        },
-        mouseDown_bottom_right: {
-            '& *': {
-                cursor: 'nwse-resize !important'
+
+            // Moved left
+            if (left < previousLeft) {
+              left = (0, _utils.clamp)(previousLeft - width, 0, previousLeft);
+
+              // Update width, height upto the previousLeft
+              width = (0, _utils.clamp)(width, 0, previousLeft);
+              height = width / refs.aspectRatio.current;
             }
-        },
-        canvas: {
-            position: 'absolute',
-            zIndex: '0'
-        },
-        canvas_main: {
-            position: 'relative',
-            width: '100%',
-            height: 'auto'
-        },
-        canvas_imageSelector: {
-            zIndex: -1
-        },
-        background: {
-            position: 'absolute',
-            inset: '0',
-            width: '100%',
-            height: '100%',
-            opacity: '0',
-            background: theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, 44),
-            transition: theme.methods.transitions.make('opacity', { duration: 'xxs' }),
-            zIndex: '1'
-        },
-        background_in: {
-            opacity: '1'
-        },
-        imageSelector_main: {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: '0',
-            height: '0',
-            outline: '2px dashed white',
-            background: 'transparent',
-            touchAction: 'none',
-            opacity: '0',
-            zIndex: '14',
-            userSelect: 'none',
-            transition: theme.methods.transitions.make('opacity'),
-        },
-        imageSelector_main_in: {
-            opacity: '1'
-        },
-        imageSelector: {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: '0',
-            height: '0',
-            touchAction: 'none',
-            overflow: 'hidden',
-            userSelect: 'none',
-            zIndex: '11'
-        },
-        move: {
-            position: 'absolute',
-            inset: '0',
-            width: '100%',
-            height: '100%',
-            cursor: 'grab',
-            '&:active': {
-                cursor: 'grabbing !important'
+
+            // Moved top
+            if (top < previousTop) {
+              top = (0, _utils.clamp)(previousTop - height, 0, previousTop);
+
+              // Update width, height upto the previousTop
+              height = (0, _utils.clamp)(height, 0, previousTop);
+              width = height * refs.aspectRatio.current;
             }
-        },
-        grid_line: {
-            position: 'absolute',
-            background: 'white',
-            mixBlendMode: 'difference'
-        },
-        grid_line_top_start: {
-            top: '33.3333%',
-            insetInline: '0',
-            width: '100%',
-            height: '1px'
-        },
-        grid_line_top_end: {
-            top: '66.6666%',
-            insetInline: '0',
-            width: '100%',
-            height: '1px'
-        },
-        grid_line_left_start: {
-            left: '33.3333%',
-            insetBlock: '0',
-            width: '1px',
-            height: '100%'
-        },
-        grid_line_left_end: {
-            left: '66.6666%',
-            insetBlock: '0',
-            width: '1px',
-            height: '100%'
-        },
-        dot: Object.assign({}, dot),
-        dot_top_left: {
-            top: '-1px',
-            left: '-1px',
-            transform: 'translate(-50%, -50%)',
-            cursor: 'nwse-resize'
-        },
-        dot_top_right: {
-            top: '-1px',
-            right: '-1px',
-            transform: 'translate(50%, -50%)',
-            cursor: 'nesw-resize'
-        },
-        dot_bottom_left: {
-            bottom: '-1px',
-            left: '-1px',
-            transform: 'translate(-50%, 50%)',
-            cursor: 'nesw-resize'
-        },
-        dot_bottom_right: {
-            bottom: '-1px',
-            right: '-1px',
-            transform: 'translate(50%, 50%)',
-            cursor: 'nwse-resize'
-        },
-        border: {
-            position: 'absolute'
-        },
-        border_top: {
-            top: '-2px',
-            height: '2px',
-            width: '100%',
-            cursor: 'ns-resize',
-            '&::before': Object.assign(Object.assign({}, dot), { content: '""', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' })
-        },
-        border_left: {
-            left: '-2px',
-            height: '100%',
-            width: '2px',
-            cursor: 'ew-resize',
-            '&::before': Object.assign(Object.assign({}, dot), { content: '""', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' })
-        },
-        border_right: {
-            right: '-2px',
-            height: '100%',
-            width: '2px',
-            cursor: 'ew-resize',
-            '&::before': Object.assign(Object.assign({}, dot), { content: '""', top: '50%', right: '50%', transform: 'translate(50%, -50%)' })
-        },
-        border_bottom: {
-            bottom: '-2px',
-            height: '2px',
-            width: '100%',
-            cursor: 'ns-resize',
-            '&::before': Object.assign(Object.assign({}, dot), { content: '""', bottom: '50%', left: '50%', transform: 'translate(-50%, 50%)' })
-        }
-    };
-}, { name: 'onesy-ImageCrop' });
-const ImageCrop = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyImageCrop) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const { 
-    // url, datauri or canvas
-    image: image_, minWidth, minHeight, maxWidth, maxHeight, selectorDefault, selector: selector_, onSelectorChange: onSelectorChange_, type = `image/jpeg`, quality = 1, aspectRatio, gridLines, dynamicParent, onFocus: onFocus_, onBlur: onBlur_, TooltipProps, Component = 'div', className } = props, other = __rest(props, ["image", "minWidth", "minHeight", "maxWidth", "maxHeight", "selectorDefault", "selector", "onSelectorChange", "type", "quality", "aspectRatio", "gridLines", "dynamicParent", "onFocus", "onBlur", "TooltipProps", "Component", "className"]);
-    const { classes } = useStyle();
-    const [image, setImage] = react_1.default.useState();
-    const [focus, setFocus] = react_1.default.useState();
-    const [mouseDown, setMouseDown] = react_1.default.useState();
-    const [selector, setSelector] = react_1.default.useState(selectorDefault !== undefined ? selectorDefault : selector_);
-    const [selectorRelative, setSelectorRelative] = react_1.default.useState();
-    const refs = {
-        root: react_1.default.useRef(null),
-        image: react_1.default.useRef(null),
-        mouseDown: react_1.default.useRef(null),
-        selector: react_1.default.useRef(null),
-        imageSelectorMain: react_1.default.useRef(null),
-        imageSelector: react_1.default.useRef(null),
-        previousMouseEvent: react_1.default.useRef(null),
-        canvasMain: react_1.default.useRef(null),
-        canvasImageSelector: react_1.default.useRef(null),
-        move: react_1.default.useRef(null),
-        borderTop: react_1.default.useRef(null),
-        borderLeft: react_1.default.useRef(null),
-        borderRight: react_1.default.useRef(null),
-        borderBottom: react_1.default.useRef(null),
-        dotTopLeft: react_1.default.useRef(null),
-        dotTopRight: react_1.default.useRef(null),
-        dotBottomLeft: react_1.default.useRef(null),
-        dotBottomRight: react_1.default.useRef(null),
-        props: react_1.default.useRef(null),
-        dynamicParent: react_1.default.useRef(null),
-        focus: react_1.default.useRef(null),
-        aspectRatio: react_1.default.useRef(null)
-    };
-    refs.image.current = image;
-    refs.mouseDown.current = mouseDown;
-    refs.selector.current = selector;
-    refs.props.current = props;
-    refs.focus.current = focus;
-    refs.dynamicParent.current = dynamicParent;
-    refs.aspectRatio.current = aspectRatio;
-    const onSelectorChange = (valueNew) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        // min, max for width, height
-        // + resolve it to max width and height for aspect ratio
-        if ((0, utils_1.is)('object', valueNew) && !!Object.keys(valueNew).length && refs.root.current) {
-            const rootRect = (_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const minWidth_ = refs.props.current.minWidth !== undefined ? refs.props.current.minWidth : Number.MIN_SAFE_INTEGER;
-            const minHeight_ = refs.props.current.minHeight !== undefined ? refs.props.current.minHeight : Number.MIN_SAFE_INTEGER;
-            const maxWidth_ = refs.props.current.maxWidth !== undefined ? refs.props.current.maxWidth : Number.MAX_SAFE_INTEGER;
-            const maxHeight_ = refs.props.current.maxHeight !== undefined ? refs.props.current.maxHeight : Number.MAX_SAFE_INTEGER;
-            valueNew.width = (0, utils_1.clamp)(valueNew.width, minWidth_, maxWidth_);
-            valueNew.height = (0, utils_1.clamp)(valueNew.height, minHeight_, maxHeight_);
-            if (refs.aspectRatio.current !== undefined) {
-                if (valueNew.width + (valueNew.width / refs.aspectRatio.current) >= valueNew.height + (valueNew.height * refs.aspectRatio.current)) {
-                    valueNew.height = valueNew.width / refs.aspectRatio.current;
-                }
-                else {
-                    valueNew.width = valueNew.height * refs.aspectRatio.current;
-                }
-                // Max width
-                if (valueNew.left + valueNew.width > rootRect.width) {
-                    valueNew.width = rootRect.width - valueNew.left;
-                    valueNew.height = valueNew.width / refs.aspectRatio.current;
-                }
-                // Max height
-                if (valueNew.top + valueNew.height > rootRect.height) {
-                    valueNew.height = rootRect.height - valueNew.top;
-                    valueNew.width = valueNew.height * refs.aspectRatio.current;
-                }
-                // Max width, height per maxWidth and maxHeight
-                if (valueNew.width < minWidth_ || valueNew.width > maxWidth_) {
-                    valueNew.width = (0, utils_1.clamp)(valueNew.width, minWidth_, maxWidth_);
-                    valueNew.height = valueNew.width / refs.aspectRatio.current;
-                }
-                if (valueNew.height < minHeight_ || valueNew.height > maxHeight_) {
-                    valueNew.height = (0, utils_1.clamp)(valueNew.height, minHeight_, maxHeight_);
-                    valueNew.width = valueNew.height / refs.aspectRatio.current;
-                }
+
+            // Max width
+            if (left + width > rootRect.width) {
+              width = rootRect.width - left;
+              height = width / refs.aspectRatio.current;
             }
-            // If previous values are within maxWidth and/or maxHeight
-            // and left or top are not same as before
-            // return
-            if (!['move'].includes((_b = refs.mouseDown.current) === null || _b === void 0 ? void 0 : _b.version)) {
-                if (maxWidth_ !== undefined || maxHeight_ !== undefined) {
-                    if ((valueNew.top < ((_c = refs.selector.current) === null || _c === void 0 ? void 0 : _c.top) || valueNew.left < ((_d = refs.selector.current) === null || _d === void 0 ? void 0 : _d.left)) && (((_e = refs.selector.current) === null || _e === void 0 ? void 0 : _e.width) === maxWidth_ || ((_f = refs.selector.current) === null || _f === void 0 ? void 0 : _f.height) === maxHeight_))
-                        return;
-                }
+
+            // Max height
+            if (top + height > rootRect.height) {
+              height = rootRect.height - top;
+              width = height * refs.aspectRatio.current;
             }
-        }
-        const rootRect_ = refs.root.current.getBoundingClientRect();
-        const selectorRelative_ = {
-            top: (valueNew.top / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.height)) * ((_g = refs.canvasMain.current) === null || _g === void 0 ? void 0 : _g.height),
-            left: (valueNew.left / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.width)) * ((_h = refs.canvasMain.current) === null || _h === void 0 ? void 0 : _h.width),
-            width: (valueNew.width / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.width)) * ((_j = refs.canvasMain.current) === null || _j === void 0 ? void 0 : _j.width),
-            height: (valueNew.height / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.height)) * ((_k = refs.canvasMain.current) === null || _k === void 0 ? void 0 : _k.height)
-        };
-        // Update inner or controlled
-        if (!props.hasOwnProperty('selector')) {
-            setSelector(valueNew);
-            setSelectorRelative(selectorRelative_);
-        }
-        if ((0, utils_1.is)('function', onSelectorChange_))
-            onSelectorChange_(selectorRelative_);
-    };
-    react_1.default.useEffect(() => {
-        var _a;
-        const method = (event) => {
-            switch (event.key) {
-                case 'Escape':
-                    if (refs.focus.current)
-                        setSelector({});
-                    break;
-                default:
-                    break;
+
+            // Min left
+            if (left < previousLeft) left = previousLeft - width;
+
+            // Min top
+            if (top < previousTop) top = previousTop - height;
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            top,
+            left,
+            width,
+            height
+          }));
+        } else if (((_refs$mouseDown$curre5 = refs.mouseDown.current) === null || _refs$mouseDown$curre5 === void 0 ? void 0 : _refs$mouseDown$curre5.version) === 'top_right') {
+          const incY = y - refs.previousMouseEvent.current.clientY;
+          const incX = x - refs.previousMouseEvent.current.clientX;
+          const top = (0, _utils.clamp)(selectorRect.top + incY, 0);
+          if (selectorRect.bottom - top < 0 && selectorRect.width + incX < 0) refs.mouseDown.current.version = 'bottom_left';else if (selectorRect.bottom - top < 0) refs.mouseDown.current.version = 'bottom_right';else if (selectorRect.width + incX < 0) refs.mouseDown.current.version = 'top_left';
+          let width = (0, _utils.clamp)(Math.abs(selectorRect.width + incX), 0, rootRect.width - selectorRect.left);
+          let height = (0, _utils.clamp)(selectorRect.bottom - top, 0);
+
+          // Top
+          if (refs.aspectRatio.current !== undefined) {
+            // Top
+            if (top < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect.width) return;
+            width = height * refs.aspectRatio.current;
+            height = width / refs.aspectRatio.current;
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
             }
-        };
-        const onMouseUp = (event) => {
-            setMouseDown(false);
-            refs.previousMouseEvent.current = undefined;
-        };
-        // Move
-        const onMove = (x, y) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-            if (refs.mouseDown.current && refs.previousMouseEvent.current) {
-                const { top: previousTop, left: previousLeft } = refs.mouseDown.current;
-                const rootRect = refs.root.current.getBoundingClientRect();
-                const selectorRect_ = refs.imageSelectorMain.current.getBoundingClientRect();
-                const selectorRect = {};
-                // Normalize relative to root
-                selectorRect.width = selectorRect_.width;
-                selectorRect.height = selectorRect_.height;
-                selectorRect.top = selectorRect_.top - rootRect.top;
-                selectorRect.left = selectorRect_.left - rootRect.left;
-                selectorRect.right = selectorRect.left + selectorRect_.width;
-                selectorRect.bottom = selectorRect.top + selectorRect_.height;
-                if (((_a = refs.mouseDown.current) === null || _a === void 0 ? void 0 : _a.version) === 'make') {
-                    const top_ = (0, utils_1.clamp)(y - rootRect.top, 0, rootRect.height);
-                    const left_ = (0, utils_1.clamp)(x - rootRect.left, 0, rootRect.width);
-                    let top = (0, utils_1.clamp)(top_, 0, previousTop);
-                    let left = (0, utils_1.clamp)(left_, 0, previousLeft);
-                    let width = Math.abs(left_ - previousLeft);
-                    let height = Math.abs(top_ - previousTop);
-                    if (refs.aspectRatio.current !== undefined) {
-                        if (left < previousLeft) {
-                            if (((_b = refs.selector.current) === null || _b === void 0 ? void 0 : _b.left) < previousLeft && left < ((_c = refs.selector.current) === null || _c === void 0 ? void 0 : _c.left) && (top <= 0 || ((_d = refs.selector.current) === null || _d === void 0 ? void 0 : _d.top) + ((_e = refs.selector.current) === null || _e === void 0 ? void 0 : _e.height) >= rootRect.height))
-                                return;
-                        }
-                        if (top < previousTop) {
-                            if (((_f = refs.selector.current) === null || _f === void 0 ? void 0 : _f.top) < previousTop && top < ((_g = refs.selector.current) === null || _g === void 0 ? void 0 : _g.top) && (left <= 0 || ((_h = refs.selector.current) === null || _h === void 0 ? void 0 : _h.left) + ((_j = refs.selector.current) === null || _j === void 0 ? void 0 : _j.width) >= rootRect.width))
-                                return;
-                        }
-                        // Max surface
-                        if (width + (width / refs.aspectRatio.current) >= height + (height * refs.aspectRatio.current)) {
-                            height = width / refs.aspectRatio.current;
-                        }
-                        else {
-                            width = height * refs.aspectRatio.current;
-                        }
-                        // Moved left
-                        if (left < previousLeft) {
-                            left = (0, utils_1.clamp)(previousLeft - width, 0, previousLeft);
-                            // Update width, height upto the previousLeft
-                            width = (0, utils_1.clamp)(width, 0, previousLeft);
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Moved top
-                        if (top < previousTop) {
-                            top = (0, utils_1.clamp)(previousTop - height, 0, previousTop);
-                            // Update width, height upto the previousTop
-                            height = (0, utils_1.clamp)(height, 0, previousTop);
-                            width = height * refs.aspectRatio.current;
-                        }
-                        // Max width
-                        if (left + width > rootRect.width) {
-                            width = rootRect.width - left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (top + height > rootRect.height) {
-                            height = rootRect.height - top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                        // Min left
-                        if (left < previousLeft)
-                            left = previousLeft - width;
-                        // Min top
-                        if (top < previousTop)
-                            top = previousTop - height;
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top,
-                        left,
-                        width,
-                        height }));
-                }
-                else if (((_k = refs.mouseDown.current) === null || _k === void 0 ? void 0 : _k.version) === 'move') {
-                    const top = y - refs.previousMouseEvent.current.clientY;
-                    const left = x - refs.previousMouseEvent.current.clientX;
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top: (0, utils_1.clamp)(refs.selector.current.top + top, 0, rootRect.height - selectorRect.height), left: (0, utils_1.clamp)(refs.selector.current.left + left, 0, rootRect.width - selectorRect.width) }));
-                }
-                else if (((_l = refs.mouseDown.current) === null || _l === void 0 ? void 0 : _l.version) === 'top_left') {
-                    const incY = y - refs.previousMouseEvent.current.clientY;
-                    const incX = x - refs.previousMouseEvent.current.clientX;
-                    let top = (0, utils_1.clamp)(selectorRect.top + incY, 0);
-                    let left = (0, utils_1.clamp)(selectorRect.left + incX, 0);
-                    if ((selectorRect.bottom - top < 0) &&
-                        (selectorRect.right - left < 0))
-                        refs.mouseDown.current.version = 'bottom_right';
-                    else if (selectorRect.bottom - top < 0)
-                        refs.mouseDown.current.version = 'bottom_left';
-                    else if (selectorRect.right - left < 0)
-                        refs.mouseDown.current.version = 'top_right';
-                    let width = (0, utils_1.clamp)(selectorRect.right - left, 0);
-                    let height = (0, utils_1.clamp)(selectorRect.bottom - top, 0);
-                    if (refs.aspectRatio.current !== undefined) {
-                        // Left
-                        if (left < refs.selector.current.left && refs.selector.current.left < previousLeft && ((_m = refs.selector.current) === null || _m === void 0 ? void 0 : _m.top) === 0)
-                            return;
-                        // Max surface
-                        if (width + (width / refs.aspectRatio.current) >= height + (height * refs.aspectRatio.current)) {
-                            height = width / refs.aspectRatio.current;
-                        }
-                        else {
-                            width = height * refs.aspectRatio.current;
-                        }
-                        // Moved left
-                        if (left < previousLeft) {
-                            left = (0, utils_1.clamp)(previousLeft - width, 0, previousLeft);
-                            // Update width, height upto the previousLeft
-                            width = (0, utils_1.clamp)(width, 0, previousLeft);
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Moved top
-                        if (top < previousTop) {
-                            top = (0, utils_1.clamp)(previousTop - height, 0, previousTop);
-                            // Update width, height upto the previousTop
-                            height = (0, utils_1.clamp)(height, 0, previousTop);
-                            width = height * refs.aspectRatio.current;
-                        }
-                        // Max width
-                        if (left + width > rootRect.width) {
-                            width = rootRect.width - left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (top + height > rootRect.height) {
-                            height = rootRect.height - top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                        // Min left
-                        if (left < previousLeft)
-                            left = previousLeft - width;
-                        // Min top
-                        if (top < previousTop)
-                            top = previousTop - height;
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top,
-                        left,
-                        width,
-                        height }));
-                }
-                else if (((_o = refs.mouseDown.current) === null || _o === void 0 ? void 0 : _o.version) === 'top_right') {
-                    const incY = y - refs.previousMouseEvent.current.clientY;
-                    const incX = x - refs.previousMouseEvent.current.clientX;
-                    const top = (0, utils_1.clamp)(selectorRect.top + incY, 0);
-                    if ((selectorRect.bottom - top < 0) &&
-                        (selectorRect.width + incX < 0))
-                        refs.mouseDown.current.version = 'bottom_left';
-                    else if (selectorRect.bottom - top < 0)
-                        refs.mouseDown.current.version = 'bottom_right';
-                    else if (selectorRect.width + incX < 0)
-                        refs.mouseDown.current.version = 'top_left';
-                    let width = (0, utils_1.clamp)(Math.abs(selectorRect.width + incX), 0, rootRect.width - selectorRect.left);
-                    let height = (0, utils_1.clamp)(selectorRect.bottom - top, 0);
-                    // Top
-                    if (refs.aspectRatio.current !== undefined) {
-                        // Top
-                        if (top < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect.width)
-                            return;
-                        width = height * refs.aspectRatio.current;
-                        height = width / refs.aspectRatio.current;
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (refs.selector.current.top + height > rootRect.height) {
-                            height = rootRect.height - refs.selector.current.top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top,
-                        width,
-                        height }));
-                }
-                else if (((_p = refs.mouseDown.current) === null || _p === void 0 ? void 0 : _p.version) === 'bottom_right') {
-                    const incY = y - refs.previousMouseEvent.current.clientY;
-                    const incX = x - refs.previousMouseEvent.current.clientX;
-                    if ((selectorRect.height + incY < 0) && (selectorRect.width + incX < 0))
-                        refs.mouseDown.current.version = 'top_left';
-                    else if (selectorRect.height + incY < 0)
-                        refs.mouseDown.current.version = 'top_right';
-                    else if (selectorRect.width + incX < 0)
-                        refs.mouseDown.current.version = 'bottom_left';
-                    let width = (0, utils_1.clamp)(Math.abs(selectorRect.width + incX), 0, rootRect.width - selectorRect.left);
-                    let height = (0, utils_1.clamp)(Math.abs(selectorRect.height + incY), 0, rootRect.height - selectorRect.top);
-                    // Right
-                    if (refs.aspectRatio.current !== undefined) {
-                        height = width / refs.aspectRatio.current;
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (refs.selector.current.top + height > rootRect.height) {
-                            height = rootRect.height - refs.selector.current.top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                        width = height * refs.aspectRatio.current;
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (refs.selector.current.top + height > rootRect.height) {
-                            height = rootRect.height - refs.selector.current.top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { width,
-                        height }));
-                }
-                else if (((_q = refs.mouseDown.current) === null || _q === void 0 ? void 0 : _q.version) === 'bottom_left') {
-                    const incY = y - refs.previousMouseEvent.current.clientY;
-                    const incX = x - refs.previousMouseEvent.current.clientX;
-                    const left = (0, utils_1.clamp)(selectorRect.left + incX, 0);
-                    if ((selectorRect.height + incY < 0) && (selectorRect.right - left < 0))
-                        refs.mouseDown.current.version = 'top_right';
-                    else if (selectorRect.height + incY < 0)
-                        refs.mouseDown.current.version = 'top_left';
-                    else if (selectorRect.right - left < 0)
-                        refs.mouseDown.current.version = 'bottom_right';
-                    let width = (0, utils_1.clamp)(selectorRect.right - left, 0);
-                    let height = (0, utils_1.clamp)(Math.abs(selectorRect.height + incY), 0, rootRect.height - selectorRect.top);
-                    // Left
-                    if (refs.aspectRatio.current !== undefined) {
-                        // Left
-                        if (left < refs.selector.current.left && ((_r = refs.selector.current) === null || _r === void 0 ? void 0 : _r.top) + ((_s = refs.selector.current) === null || _s === void 0 ? void 0 : _s.height) >= rootRect.height)
-                            return;
-                        height = width / refs.aspectRatio.current;
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (refs.selector.current.top + height > rootRect.height) {
-                            height = rootRect.height - refs.selector.current.top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                        width = height * refs.aspectRatio.current;
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (refs.selector.current.top + height > rootRect.height) {
-                            height = rootRect.height - refs.selector.current.top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { left,
-                        width,
-                        height }));
-                }
-                else if (((_t = refs.mouseDown.current) === null || _t === void 0 ? void 0 : _t.version) === 'top') {
-                    const inc = y - refs.previousMouseEvent.current.clientY;
-                    const top = (0, utils_1.clamp)(refs.selector.current.top + inc, 0);
-                    if (refs.selector.current.top <= 0 && top <= 0)
-                        return;
-                    if (selectorRect.bottom - top < 0)
-                        refs.mouseDown.current.version = 'bottom';
-                    let width = refs.selector.current.width;
-                    let height = (0, utils_1.clamp)(Math.abs(refs.selector.current.height - inc), 0, previousTop - top);
-                    if (refs.aspectRatio.current !== undefined) {
-                        // Top
-                        if (top < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect.width)
-                            return;
-                        width = height * refs.aspectRatio.current;
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (top + height > rootRect.height) {
-                            height = rootRect.height - top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top,
-                        width,
-                        height }));
-                }
-                else if (((_u = refs.mouseDown.current) === null || _u === void 0 ? void 0 : _u.version) === 'bottom') {
-                    const inc = y - refs.previousMouseEvent.current.clientY;
-                    if (selectorRect.height + inc < 0)
-                        refs.mouseDown.current.version = 'top';
-                    let width = refs.selector.current.width;
-                    let height = (0, utils_1.clamp)(Math.abs(selectorRect.height + inc), 0, rootRect.height - refs.selector.current.top);
-                    if (refs.aspectRatio.current !== undefined) {
-                        width = height * refs.aspectRatio.current;
-                        // Max height
-                        if (refs.selector.current.top + height > rootRect.height) {
-                            height = rootRect.height - refs.selector.current.top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { width,
-                        height }));
-                }
-                else if (((_v = refs.mouseDown.current) === null || _v === void 0 ? void 0 : _v.version) === 'left') {
-                    const inc = x - refs.previousMouseEvent.current.clientX;
-                    const left = (0, utils_1.clamp)(selectorRect.left + inc, 0);
-                    if (selectorRect.right - left < 0)
-                        refs.mouseDown.current.version = 'right';
-                    let width = (0, utils_1.clamp)(selectorRect.right - left, 0);
-                    let height = refs.selector.current.height;
-                    if (refs.aspectRatio.current !== undefined) {
-                        if (left < refs.selector.current.left && ((_w = refs.selector.current) === null || _w === void 0 ? void 0 : _w.top) + ((_x = refs.selector.current) === null || _x === void 0 ? void 0 : _x.height) >= rootRect.height)
-                            return;
-                        height = width / refs.aspectRatio.current;
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (refs.selector.current.top + height > rootRect.height) {
-                            height = rootRect.height - refs.selector.current.top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { left,
-                        width,
-                        height }));
-                }
-                else if (((_y = refs.mouseDown.current) === null || _y === void 0 ? void 0 : _y.version) === 'right') {
-                    const inc = x - refs.previousMouseEvent.current.clientX;
-                    if (selectorRect.width + inc < 0)
-                        refs.mouseDown.current.version = 'left';
-                    let width = (0, utils_1.clamp)(Math.abs(selectorRect.width + inc), 0, rootRect.width - selectorRect.left);
-                    let height = refs.selector.current.height;
-                    if (refs.aspectRatio.current !== undefined) {
-                        height = width / refs.aspectRatio.current;
-                        // Max width
-                        if (refs.selector.current.left + width > rootRect.width) {
-                            width = rootRect.width - refs.selector.current.left;
-                            height = width / refs.aspectRatio.current;
-                        }
-                        // Max height
-                        if (refs.selector.current.top + height > rootRect.height) {
-                            height = rootRect.height - refs.selector.current.top;
-                            width = height * refs.aspectRatio.current;
-                        }
-                    }
-                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { width,
-                        height }));
-                }
+
+            // Max height
+            if (refs.selector.current.top + height > rootRect.height) {
+              height = rootRect.height - refs.selector.current.top;
+              width = height * refs.aspectRatio.current;
             }
-        };
-        // Mouse move
-        const onMouseMove = (event) => {
-            if (refs.mouseDown.current) {
-                const { clientY, clientX } = event;
-                onMove(clientX, clientY);
-                refs.previousMouseEvent.current = event;
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            top,
+            width,
+            height
+          }));
+        } else if (((_refs$mouseDown$curre6 = refs.mouseDown.current) === null || _refs$mouseDown$curre6 === void 0 ? void 0 : _refs$mouseDown$curre6.version) === 'bottom_right') {
+          const incY = y - refs.previousMouseEvent.current.clientY;
+          const incX = x - refs.previousMouseEvent.current.clientX;
+          if (selectorRect.height + incY < 0 && selectorRect.width + incX < 0) refs.mouseDown.current.version = 'top_left';else if (selectorRect.height + incY < 0) refs.mouseDown.current.version = 'top_right';else if (selectorRect.width + incX < 0) refs.mouseDown.current.version = 'bottom_left';
+          let width = (0, _utils.clamp)(Math.abs(selectorRect.width + incX), 0, rootRect.width - selectorRect.left);
+          let height = (0, _utils.clamp)(Math.abs(selectorRect.height + incY), 0, rootRect.height - selectorRect.top);
+
+          // Right
+          if (refs.aspectRatio.current !== undefined) {
+            height = width / refs.aspectRatio.current;
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
             }
-        };
-        // Touch move
-        const onTouchMove = (event) => {
-            if (refs.mouseDown.current) {
-                const { clientY, clientX } = event.touches[0];
-                onMove(clientX, clientY);
-                refs.previousMouseEvent.current = event;
-                // Normalize for use as a mouseDown value
-                refs.previousMouseEvent.current.clientY = clientY;
-                refs.previousMouseEvent.current.clientX = clientX;
+
+            // Max height
+            if (refs.selector.current.top + height > rootRect.height) {
+              height = rootRect.height - refs.selector.current.top;
+              width = height * refs.aspectRatio.current;
             }
-        };
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        rootDocument.addEventListener('keydown', method);
-        rootDocument.addEventListener('mousemove', onMouseMove);
-        rootDocument.addEventListener('mouseup', onMouseUp);
-        rootDocument.addEventListener('touchmove', onTouchMove, { passive: true });
-        rootDocument.addEventListener('touchend', onMouseUp);
-        return () => {
-            // Clean up
-            rootDocument.removeEventListener('keydown', method);
-            rootDocument.removeEventListener('mousemove', onMouseMove);
-            rootDocument.removeEventListener('mouseup', onMouseUp);
-            rootDocument.removeEventListener('touchmove', onTouchMove);
-            rootDocument.removeEventListener('touchend', onMouseUp);
-            if (refs.image.current) {
-                setImage('');
-                if (rootDocument.body.style.overflow === 'hidden')
-                    rootDocument.body.style.removeProperty('overflow');
+            width = height * refs.aspectRatio.current;
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
             }
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (image_ !== image) {
-            if (image_ instanceof HTMLCanvasElement)
-                setImage(image_);
-            else if ((0, utils_1.is)('string', image_))
-                !refs.dynamicParent.current ? makeImage(image_) : setTimeout(() => makeImage(image_), 140);
-        }
-    }, [image_]);
-    const updateSelector = (selector__ = refs.selector.current, image__ = refs.image.current) => {
-        var _a, _b, _c, _d;
-        if (selector__ !== undefined && image__ !== undefined) {
-            const rootRect = refs.root.current.getBoundingClientRect();
-            const selectorValue = {
-                top: (0, utils_1.clamp)(selector__.top, 0, image__.height),
-                left: (0, utils_1.clamp)(selector__.left, 0, image__.height)
-            };
-            selectorValue.width = (0, utils_1.clamp)((selector__.width || 0), 0, rootRect.width - selectorValue.left);
-            selectorValue.height = (0, utils_1.clamp)((selector__.height || 0), 0, rootRect.height - selectorValue.top);
-            // Aspect ratio
-            if (refs.aspectRatio.current !== undefined) {
-                // Max surface
-                if (selectorValue.width + (selectorValue.width / refs.aspectRatio.current) >= selectorValue.height + (selectorValue.height * refs.aspectRatio.current)) {
-                    selectorValue.height = selectorValue.width / refs.aspectRatio.current;
-                }
-                else {
-                    selectorValue.width = selectorValue.height * refs.aspectRatio.current;
-                }
-                // Max width
-                if (selectorValue.left + selectorValue.width > rootRect.width) {
-                    selectorValue.width = rootRect.width - selectorValue.left;
-                    selectorValue.height = selectorValue.width / refs.aspectRatio.current;
-                }
-                // Max height
-                if (selectorValue.top + selectorValue.height > rootRect.height) {
-                    selectorValue.height = rootRect.height - selectorValue.top;
-                    selectorValue.width = selectorValue.height * refs.aspectRatio.current;
-                }
+
+            // Max height
+            if (refs.selector.current.top + height > rootRect.height) {
+              height = rootRect.height - refs.selector.current.top;
+              width = height * refs.aspectRatio.current;
+            }
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            width,
+            height
+          }));
+        } else if (((_refs$mouseDown$curre7 = refs.mouseDown.current) === null || _refs$mouseDown$curre7 === void 0 ? void 0 : _refs$mouseDown$curre7.version) === 'bottom_left') {
+          const incY = y - refs.previousMouseEvent.current.clientY;
+          const incX = x - refs.previousMouseEvent.current.clientX;
+          const left = (0, _utils.clamp)(selectorRect.left + incX, 0);
+          if (selectorRect.height + incY < 0 && selectorRect.right - left < 0) refs.mouseDown.current.version = 'top_right';else if (selectorRect.height + incY < 0) refs.mouseDown.current.version = 'top_left';else if (selectorRect.right - left < 0) refs.mouseDown.current.version = 'bottom_right';
+          let width = (0, _utils.clamp)(selectorRect.right - left, 0);
+          let height = (0, _utils.clamp)(Math.abs(selectorRect.height + incY), 0, rootRect.height - selectorRect.top);
+
+          // Left
+          if (refs.aspectRatio.current !== undefined) {
+            var _refs$selector$curren14, _refs$selector$curren15;
+            // Left
+            if (left < refs.selector.current.left && ((_refs$selector$curren14 = refs.selector.current) === null || _refs$selector$curren14 === void 0 ? void 0 : _refs$selector$curren14.top) + ((_refs$selector$curren15 = refs.selector.current) === null || _refs$selector$curren15 === void 0 ? void 0 : _refs$selector$curren15.height) >= rootRect.height) return;
+            height = width / refs.aspectRatio.current;
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
+            }
+
+            // Max height
+            if (refs.selector.current.top + height > rootRect.height) {
+              height = rootRect.height - refs.selector.current.top;
+              width = height * refs.aspectRatio.current;
+            }
+            width = height * refs.aspectRatio.current;
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
             }
-            // Update selector
-            setSelector(selectorValue);
-            // Update selector relative
-            setSelectorRelative({
-                top: (selectorValue.top / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.height)) * ((_a = refs.canvasMain.current) === null || _a === void 0 ? void 0 : _a.height),
-                left: (selectorValue.left / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.width)) * ((_b = refs.canvasMain.current) === null || _b === void 0 ? void 0 : _b.width),
-                width: (selectorValue.width / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.width)) * ((_c = refs.canvasMain.current) === null || _c === void 0 ? void 0 : _c.width),
-                height: (selectorValue.height / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.height)) * ((_d = refs.canvasMain.current) === null || _d === void 0 ? void 0 : _d.height)
-            });
+
+            // Max height
+            if (refs.selector.current.top + height > rootRect.height) {
+              height = rootRect.height - refs.selector.current.top;
+              width = height * refs.aspectRatio.current;
+            }
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            left,
+            width,
+            height
+          }));
+        } else if (((_refs$mouseDown$curre8 = refs.mouseDown.current) === null || _refs$mouseDown$curre8 === void 0 ? void 0 : _refs$mouseDown$curre8.version) === 'top') {
+          const inc = y - refs.previousMouseEvent.current.clientY;
+          const top = (0, _utils.clamp)(refs.selector.current.top + inc, 0);
+          if (refs.selector.current.top <= 0 && top <= 0) return;
+          if (selectorRect.bottom - top < 0) refs.mouseDown.current.version = 'bottom';
+          let width = refs.selector.current.width;
+          let height = (0, _utils.clamp)(Math.abs(refs.selector.current.height - inc), 0, previousTop - top);
+          if (refs.aspectRatio.current !== undefined) {
+            // Top
+            if (top < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect.width) return;
+            width = height * refs.aspectRatio.current;
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
+            }
+
+            // Max height
+            if (top + height > rootRect.height) {
+              height = rootRect.height - top;
+              width = height * refs.aspectRatio.current;
+            }
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            top,
+            width,
+            height
+          }));
+        } else if (((_refs$mouseDown$curre9 = refs.mouseDown.current) === null || _refs$mouseDown$curre9 === void 0 ? void 0 : _refs$mouseDown$curre9.version) === 'bottom') {
+          const inc = y - refs.previousMouseEvent.current.clientY;
+          if (selectorRect.height + inc < 0) refs.mouseDown.current.version = 'top';
+          let width = refs.selector.current.width;
+          let height = (0, _utils.clamp)(Math.abs(selectorRect.height + inc), 0, rootRect.height - refs.selector.current.top);
+          if (refs.aspectRatio.current !== undefined) {
+            width = height * refs.aspectRatio.current;
+
+            // Max height
+            if (refs.selector.current.top + height > rootRect.height) {
+              height = rootRect.height - refs.selector.current.top;
+              width = height * refs.aspectRatio.current;
+            }
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
+            }
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            width,
+            height
+          }));
+        } else if (((_refs$mouseDown$curre10 = refs.mouseDown.current) === null || _refs$mouseDown$curre10 === void 0 ? void 0 : _refs$mouseDown$curre10.version) === 'left') {
+          const inc = x - refs.previousMouseEvent.current.clientX;
+          const left = (0, _utils.clamp)(selectorRect.left + inc, 0);
+          if (selectorRect.right - left < 0) refs.mouseDown.current.version = 'right';
+          let width = (0, _utils.clamp)(selectorRect.right - left, 0);
+          let height = refs.selector.current.height;
+          if (refs.aspectRatio.current !== undefined) {
+            var _refs$selector$curren16, _refs$selector$curren17;
+            if (left < refs.selector.current.left && ((_refs$selector$curren16 = refs.selector.current) === null || _refs$selector$curren16 === void 0 ? void 0 : _refs$selector$curren16.top) + ((_refs$selector$curren17 = refs.selector.current) === null || _refs$selector$curren17 === void 0 ? void 0 : _refs$selector$curren17.height) >= rootRect.height) return;
+            height = width / refs.aspectRatio.current;
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
+            }
+
+            // Max height
+            if (refs.selector.current.top + height > rootRect.height) {
+              height = rootRect.height - refs.selector.current.top;
+              width = height * refs.aspectRatio.current;
+            }
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            left,
+            width,
+            height
+          }));
+        } else if (((_refs$mouseDown$curre11 = refs.mouseDown.current) === null || _refs$mouseDown$curre11 === void 0 ? void 0 : _refs$mouseDown$curre11.version) === 'right') {
+          const inc = x - refs.previousMouseEvent.current.clientX;
+          if (selectorRect.width + inc < 0) refs.mouseDown.current.version = 'left';
+          let width = (0, _utils.clamp)(Math.abs(selectorRect.width + inc), 0, rootRect.width - selectorRect.left);
+          let height = refs.selector.current.height;
+          if (refs.aspectRatio.current !== undefined) {
+            height = width / refs.aspectRatio.current;
+
+            // Max width
+            if (refs.selector.current.left + width > rootRect.width) {
+              width = rootRect.width - refs.selector.current.left;
+              height = width / refs.aspectRatio.current;
+            }
+
+            // Max height
+            if (refs.selector.current.top + height > rootRect.height) {
+              height = rootRect.height - refs.selector.current.top;
+              width = height * refs.aspectRatio.current;
+            }
+          }
+          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
+            width,
+            height
+          }));
         }
+      }
     };
-    react_1.default.useEffect(() => {
-        updateSelector();
-    }, [aspectRatio]);
-    react_1.default.useEffect(() => {
-        if (selector_ !== selector)
-            updateSelector(selector_);
-    }, [selector_]);
-    react_1.default.useEffect(() => {
-        if (image) {
-            refs.canvasMain.current.width = image.width;
-            refs.canvasMain.current.height = image.height;
-            refs.canvasMain.current.getContext('2d').drawImage(image, 0, 0), image.width, image.height;
-            refs.canvasImageSelector.current.width = image.width;
-            refs.canvasImageSelector.current.height = image.height;
-            refs.canvasImageSelector.current.getContext('2d').drawImage(image, 0, 0), image.width, image.height;
-            // Update selector
-            updateSelector();
-        }
-    }, [image]);
-    const makeImage = async (value = image) => {
-        var _a;
-        const img = await (0, utils_2.image)(value);
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        const canvas = rootDocument.createElement('canvas');
-        const rootRect = refs.root.current.getBoundingClientRect();
-        const aspectRatioImg = img.width / img.height;
-        // width being parent width
-        img.width = rootRect.width;
-        // height keep aspect ratio of the img for the height
-        img.height = img.width / aspectRatioImg;
-        canvas.width = img.width;
-        canvas.height = img.height;
-        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
-        setImage(canvas);
+
+    // Mouse move
+    const onMouseMove = event => {
+      if (refs.mouseDown.current) {
+        const {
+          clientY,
+          clientX
+        } = event;
+        onMove(clientX, clientY);
+        refs.previousMouseEvent.current = event;
+      }
     };
-    const onFocus = react_1.default.useCallback((event) => {
-        setFocus(true);
-        if ((0, utils_1.is)('function', onFocus_))
-            onFocus_(event);
-    }, []);
-    const onBlur = react_1.default.useCallback((event) => {
-        setFocus(false);
-        if ((0, utils_1.is)('function', onBlur_))
-            onBlur_(event);
-    }, []);
-    const onTouchStart = react_1.default.useCallback((event) => {
-        if (![
-            refs.imageSelectorMain.current,
-            refs.imageSelector.current,
-            refs.move.current,
-            refs.borderTop.current,
-            refs.borderLeft.current,
-            refs.borderRight.current,
-            refs.borderBottom.current,
-            refs.dotTopLeft.current,
-            refs.dotTopRight.current,
-            refs.dotBottomLeft.current,
-            refs.dotBottomRight.current
-        ].includes(event.target)) {
-            const { clientY, clientX } = event.touches[0];
-            const rootRect = refs.root.current.getBoundingClientRect();
-            setMouseDown({
-                version: 'make',
-                top: clientY - rootRect.top,
-                left: clientX - rootRect.left
-            });
-        }
-    }, []);
-    const onMouseDown = react_1.default.useCallback((event) => {
-        if (![
-            refs.imageSelectorMain.current,
-            refs.imageSelector.current,
-            refs.move.current,
-            refs.borderTop.current,
-            refs.borderLeft.current,
-            refs.borderRight.current,
-            refs.borderBottom.current,
-            refs.dotTopLeft.current,
-            refs.dotTopRight.current,
-            refs.dotBottomLeft.current,
-            refs.dotBottomRight.current
-        ].includes(event.target)) {
-            const { clientY, clientX } = event;
-            const rootRect = refs.root.current.getBoundingClientRect();
-            setMouseDown({
-                version: 'make',
-                top: clientY - rootRect.top,
-                left: clientX - rootRect.left
-            });
-        }
-    }, []);
-    const onTouchStartSelector = react_1.default.useCallback((event) => {
-        const { clientY, clientX } = event.touches[0];
-        const rootRect = refs.root.current.getBoundingClientRect();
-        setMouseDown({
-            version: 'move',
-            top: clientY - rootRect.top,
-            left: clientX - rootRect.left
-        });
-    }, []);
-    const onMouseDownSelector = react_1.default.useCallback((event) => {
-        const { clientY, clientX } = event;
-        const rootRect = refs.root.current.getBoundingClientRect();
-        setMouseDown({
-            version: 'move',
-            top: clientY - rootRect.top,
-            left: clientX - rootRect.left
-        });
-    }, []);
-    const onTouchStartBorder = (version) => (event) => {
-        var _a, _b, _c, _d;
-        setMouseDown({
-            version,
-            top: ((_a = refs.selector.current) === null || _a === void 0 ? void 0 : _a.top) + ((_b = refs.selector.current) === null || _b === void 0 ? void 0 : _b.height),
-            left: ((_c = refs.selector.current) === null || _c === void 0 ? void 0 : _c.left) + ((_d = refs.selector.current) === null || _d === void 0 ? void 0 : _d.width)
-        });
+
+    // Touch move
+    const onTouchMove = event => {
+      if (refs.mouseDown.current) {
+        const {
+          clientY,
+          clientX
+        } = event.touches[0];
+        onMove(clientX, clientY);
+        refs.previousMouseEvent.current = event;
+
+        // Normalize for use as a mouseDown value
+        refs.previousMouseEvent.current.clientY = clientY;
+        refs.previousMouseEvent.current.clientX = clientX;
+      }
     };
-    const onMouseDownBorder = (version) => (event) => {
-        var _a, _b, _c, _d;
-        setMouseDown({
-            version,
-            top: ((_a = refs.selector.current) === null || _a === void 0 ? void 0 : _a.top) + ((_b = refs.selector.current) === null || _b === void 0 ? void 0 : _b.height),
-            left: ((_c = refs.selector.current) === null || _c === void 0 ? void 0 : _c.left) + ((_d = refs.selector.current) === null || _d === void 0 ? void 0 : _d.width)
-        });
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    rootDocument.addEventListener('keydown', method);
+    rootDocument.addEventListener('mousemove', onMouseMove);
+    rootDocument.addEventListener('mouseup', onMouseUp);
+    rootDocument.addEventListener('touchmove', onTouchMove, {
+      passive: true
+    });
+    rootDocument.addEventListener('touchend', onMouseUp);
+    return () => {
+      // Clean up
+      rootDocument.removeEventListener('keydown', method);
+      rootDocument.removeEventListener('mousemove', onMouseMove);
+      rootDocument.removeEventListener('mouseup', onMouseUp);
+      rootDocument.removeEventListener('touchmove', onTouchMove);
+      rootDocument.removeEventListener('touchend', onMouseUp);
+      if (refs.image.current) {
+        setImage('');
+        if (rootDocument.body.style.overflow === 'hidden') rootDocument.body.style.removeProperty('overflow');
+      }
     };
-    const rect = (_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tabIndex: 0, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, onMouseDown: onMouseDown, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                'onesy-ImageCrop-root'
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [(0, jsx_runtime_1.jsx)("canvas", { ref: refs.canvasMain, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                        'onesy-ImageCrop-canvas',
-                        'onesy-ImageCrop-canvas-main'
-                    ],
-                    classes.canvas,
-                    classes.canvas_main
-                ]) }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                        'onesy-ImageCrop-background'
-                    ],
-                    classes.background,
-                    image && classes.background_in
-                ]) }), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: mouseDown && ((selector === null || selector === void 0 ? void 0 : selector.width) + (selector === null || selector === void 0 ? void 0 : selector.height) > 0), label: `${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.width) || 0)} x ${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.height) || 0)}`, position: 'bottom' }, TooltipProps, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: refs.imageSelectorMain, className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                            'onesy-ImageCrop-image-selector-main'
-                        ],
-                        classes.imageSelector_main,
-                        selector && classes.imageSelector_main_in
-                    ]), style: Object.assign({}, selector) }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: refs.move, onTouchStart: onTouchStartSelector, onMouseDown: onMouseDownSelector, className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-move'
-                                ],
-                                classes.move
-                            ]) }), gridLines && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                            'onesy-ImageCrop-grid-line',
-                                            'onesy-ImageCrop-grid-line-top-start'
-                                        ],
-                                        classes.grid_line,
-                                        classes.grid_line_top_start
-                                    ]) }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                            'onesy-ImageCrop-grid-line',
-                                            'onesy-ImageCrop-grid-line-top-end'
-                                        ],
-                                        classes.grid_line,
-                                        classes.grid_line_top_end
-                                    ]) }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                            'onesy-ImageCrop-grid-line',
-                                            'onesy-ImageCrop-grid-line-left-start'
-                                        ],
-                                        classes.grid_line,
-                                        classes.grid_line_left_start
-                                    ]) }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                            'onesy-ImageCrop-grid-line',
-                                            'onesy-ImageCrop-grid-line-left-end'
-                                        ],
-                                        classes.grid_line,
-                                        classes.grid_line_left_end
-                                    ]) })] }), (0, jsx_runtime_1.jsx)("div", { ref: refs.dotTopLeft, onTouchStart: onTouchStartBorder('top_left'), onMouseDown: onMouseDownBorder('top_left'), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-dot',
-                                    'onesy-ImageCrop-dot-top-left'
-                                ],
-                                classes.dot,
-                                classes.dot_top_left
-                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.dotTopRight, onTouchStart: onTouchStartBorder('top_right'), onMouseDown: onMouseDownBorder('top_right'), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-dot',
-                                    'onesy-ImageCrop-dot-top-right'
-                                ],
-                                classes.dot,
-                                classes.dot_top_right
-                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.dotBottomLeft, onTouchStart: onTouchStartBorder('bottom_left'), onMouseDown: onMouseDownBorder('bottom_left'), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-dot',
-                                    'onesy-ImageCrop-dot-bottom-left'
-                                ],
-                                classes.dot,
-                                classes.dot_bottom_left
-                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.dotBottomRight, onTouchStart: onTouchStartBorder('bottom_right'), onMouseDown: onMouseDownBorder('bottom_right'), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-dot',
-                                    'onesy-ImageCrop-dot-bottom-right'
-                                ],
-                                classes.dot,
-                                classes.dot_bottom_right
-                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.borderTop, onTouchStart: onTouchStartBorder('top'), onMouseDown: onMouseDownBorder('top'), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-border',
-                                    'onesy-ImageCrop-border-top'
-                                ],
-                                classes.border,
-                                classes.border_top
-                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.borderLeft, onTouchStart: onTouchStartBorder('left'), onMouseDown: onMouseDownBorder('left'), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-border',
-                                    'onesy-ImageCrop-border-left'
-                                ],
-                                classes.border,
-                                classes.border_left
-                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.borderRight, onTouchStart: onTouchStartBorder('right'), onMouseDown: onMouseDownBorder('right'), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-border',
-                                    'onesy-ImageCrop-border-right'
-                                ],
-                                classes.border,
-                                classes.border_right
-                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.borderBottom, onTouchStart: onTouchStartBorder('bottom'), onMouseDown: onMouseDownBorder('bottom'), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                                    'onesy-ImageCrop-border',
-                                    'onesy-ImageCrop-border-bottom'
-                                ],
-                                classes.border,
-                                classes.border_bottom
-                            ]) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.imageSelector, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                        'onesy-ImageCrop-image-selector'
-                    ],
-                    classes.imageSelector
-                ]), style: Object.assign({}, selector) }, { children: (0, jsx_runtime_1.jsx)("canvas", { ref: refs.canvasImageSelector, className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
-                            'onesy-ImageCrop-canvas',
-                            'onesy-ImageCrop-canvas-image-selector'
-                        ],
-                        classes.canvas,
-                        classes.canvas_imageSelector
-                    ]), width: (image === null || image === void 0 ? void 0 : image.width) || 0, height: (image === null || image === void 0 ? void 0 : image.height) || 0, style: {
-                        top: `${((selector === null || selector === void 0 ? void 0 : selector.top) || 0) * -1}px`,
-                        left: `${((selector === null || selector === void 0 ? void 0 : selector.left) || 0) * -1}px`,
-                        width: rect === null || rect === void 0 ? void 0 : rect.width,
-                        height: rect === null || rect === void 0 ? void 0 : rect.height
-                    } }) }))] })));
+  }, []);
+  _react.default.useEffect(() => {
+    if (image_ !== image) {
+      if (image_ instanceof HTMLCanvasElement) setImage(image_);else if ((0, _utils.is)('string', image_)) !refs.dynamicParent.current ? makeImage(image_) : setTimeout(() => makeImage(image_), 140);
+    }
+  }, [image_]);
+  const updateSelector = (selector__ = refs.selector.current, image__ = refs.image.current) => {
+    if (selector__ !== undefined && image__ !== undefined) {
+      var _refs$canvasMain$curr5, _refs$canvasMain$curr6, _refs$canvasMain$curr7, _refs$canvasMain$curr8;
+      const rootRect = refs.root.current.getBoundingClientRect();
+      const selectorValue = {
+        top: (0, _utils.clamp)(selector__.top, 0, image__.height),
+        left: (0, _utils.clamp)(selector__.left, 0, image__.height)
+      };
+      selectorValue.width = (0, _utils.clamp)(selector__.width || 0, 0, rootRect.width - selectorValue.left);
+      selectorValue.height = (0, _utils.clamp)(selector__.height || 0, 0, rootRect.height - selectorValue.top);
+
+      // Aspect ratio
+      if (refs.aspectRatio.current !== undefined) {
+        // Max surface
+        if (selectorValue.width + selectorValue.width / refs.aspectRatio.current >= selectorValue.height + selectorValue.height * refs.aspectRatio.current) {
+          selectorValue.height = selectorValue.width / refs.aspectRatio.current;
+        } else {
+          selectorValue.width = selectorValue.height * refs.aspectRatio.current;
+        }
+
+        // Max width
+        if (selectorValue.left + selectorValue.width > rootRect.width) {
+          selectorValue.width = rootRect.width - selectorValue.left;
+          selectorValue.height = selectorValue.width / refs.aspectRatio.current;
+        }
+
+        // Max height
+        if (selectorValue.top + selectorValue.height > rootRect.height) {
+          selectorValue.height = rootRect.height - selectorValue.top;
+          selectorValue.width = selectorValue.height * refs.aspectRatio.current;
+        }
+      }
+
+      // Update selector
+      setSelector(selectorValue);
+
+      // Update selector relative
+      setSelectorRelative({
+        top: selectorValue.top / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.height) * ((_refs$canvasMain$curr5 = refs.canvasMain.current) === null || _refs$canvasMain$curr5 === void 0 ? void 0 : _refs$canvasMain$curr5.height),
+        left: selectorValue.left / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.width) * ((_refs$canvasMain$curr6 = refs.canvasMain.current) === null || _refs$canvasMain$curr6 === void 0 ? void 0 : _refs$canvasMain$curr6.width),
+        width: selectorValue.width / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.width) * ((_refs$canvasMain$curr7 = refs.canvasMain.current) === null || _refs$canvasMain$curr7 === void 0 ? void 0 : _refs$canvasMain$curr7.width),
+        height: selectorValue.height / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.height) * ((_refs$canvasMain$curr8 = refs.canvasMain.current) === null || _refs$canvasMain$curr8 === void 0 ? void 0 : _refs$canvasMain$curr8.height)
+      });
+    }
+  };
+  _react.default.useEffect(() => {
+    updateSelector();
+  }, [aspectRatio]);
+  _react.default.useEffect(() => {
+    if (selector_ !== selector) updateSelector(selector_);
+  }, [selector_]);
+  _react.default.useEffect(() => {
+    if (image) {
+      refs.canvasMain.current.width = image.width;
+      refs.canvasMain.current.height = image.height;
+      refs.canvasMain.current.getContext('2d').drawImage(image, 0, 0), image.width, image.height;
+      refs.canvasImageSelector.current.width = image.width;
+      refs.canvasImageSelector.current.height = image.height;
+      refs.canvasImageSelector.current.getContext('2d').drawImage(image, 0, 0), image.width, image.height;
+
+      // Update selector
+      updateSelector();
+    }
+  }, [image]);
+  const makeImage = async (value = image) => {
+    var _refs$root$current3;
+    const img = await (0, _utils2.image)(value);
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
+    const canvas = rootDocument.createElement('canvas');
+    const rootRect = refs.root.current.getBoundingClientRect();
+    const aspectRatioImg = img.width / img.height;
+
+    // width being parent width
+    img.width = rootRect.width;
+
+    // height keep aspect ratio of the img for the height
+    img.height = img.width / aspectRatioImg;
+    canvas.width = img.width;
+    canvas.height = img.height;
+    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+    setImage(canvas);
+  };
+  const onFocus = _react.default.useCallback(event => {
+    setFocus(true);
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
+  }, []);
+  const onBlur = _react.default.useCallback(event => {
+    setFocus(false);
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
+  }, []);
+  const onTouchStart = _react.default.useCallback(event => {
+    if (![refs.imageSelectorMain.current, refs.imageSelector.current, refs.move.current, refs.borderTop.current, refs.borderLeft.current, refs.borderRight.current, refs.borderBottom.current, refs.dotTopLeft.current, refs.dotTopRight.current, refs.dotBottomLeft.current, refs.dotBottomRight.current].includes(event.target)) {
+      const {
+        clientY,
+        clientX
+      } = event.touches[0];
+      const rootRect = refs.root.current.getBoundingClientRect();
+      setMouseDown({
+        version: 'make',
+        top: clientY - rootRect.top,
+        left: clientX - rootRect.left
+      });
+    }
+  }, []);
+  const onMouseDown = _react.default.useCallback(event => {
+    if (![refs.imageSelectorMain.current, refs.imageSelector.current, refs.move.current, refs.borderTop.current, refs.borderLeft.current, refs.borderRight.current, refs.borderBottom.current, refs.dotTopLeft.current, refs.dotTopRight.current, refs.dotBottomLeft.current, refs.dotBottomRight.current].includes(event.target)) {
+      const {
+        clientY,
+        clientX
+      } = event;
+      const rootRect = refs.root.current.getBoundingClientRect();
+      setMouseDown({
+        version: 'make',
+        top: clientY - rootRect.top,
+        left: clientX - rootRect.left
+      });
+    }
+  }, []);
+  const onTouchStartSelector = _react.default.useCallback(event => {
+    const {
+      clientY,
+      clientX
+    } = event.touches[0];
+    const rootRect = refs.root.current.getBoundingClientRect();
+    setMouseDown({
+      version: 'move',
+      top: clientY - rootRect.top,
+      left: clientX - rootRect.left
+    });
+  }, []);
+  const onMouseDownSelector = _react.default.useCallback(event => {
+    const {
+      clientY,
+      clientX
+    } = event;
+    const rootRect = refs.root.current.getBoundingClientRect();
+    setMouseDown({
+      version: 'move',
+      top: clientY - rootRect.top,
+      left: clientX - rootRect.left
+    });
+  }, []);
+  const onTouchStartBorder = version => event => {
+    var _refs$selector$curren18, _refs$selector$curren19, _refs$selector$curren20, _refs$selector$curren21;
+    setMouseDown({
+      version,
+      top: ((_refs$selector$curren18 = refs.selector.current) === null || _refs$selector$curren18 === void 0 ? void 0 : _refs$selector$curren18.top) + ((_refs$selector$curren19 = refs.selector.current) === null || _refs$selector$curren19 === void 0 ? void 0 : _refs$selector$curren19.height),
+      left: ((_refs$selector$curren20 = refs.selector.current) === null || _refs$selector$curren20 === void 0 ? void 0 : _refs$selector$curren20.left) + ((_refs$selector$curren21 = refs.selector.current) === null || _refs$selector$curren21 === void 0 ? void 0 : _refs$selector$curren21.width)
+    });
+  };
+  const onMouseDownBorder = version => event => {
+    var _refs$selector$curren22, _refs$selector$curren23, _refs$selector$curren24, _refs$selector$curren25;
+    setMouseDown({
+      version,
+      top: ((_refs$selector$curren22 = refs.selector.current) === null || _refs$selector$curren22 === void 0 ? void 0 : _refs$selector$curren22.top) + ((_refs$selector$curren23 = refs.selector.current) === null || _refs$selector$curren23 === void 0 ? void 0 : _refs$selector$curren23.height),
+      left: ((_refs$selector$curren24 = refs.selector.current) === null || _refs$selector$curren24 === void 0 ? void 0 : _refs$selector$curren24.left) + ((_refs$selector$curren25 = refs.selector.current) === null || _refs$selector$curren25 === void 0 ? void 0 : _refs$selector$curren25.width)
+    });
+  };
+  const rect = (_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.getBoundingClientRect();
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tabIndex: 0,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onTouchStart: onTouchStart,
+    onMouseDown: onMouseDown,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-root'], className, classes.root])
+  }, other), /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: refs.canvasMain,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-main'], classes.canvas, classes.canvas_main])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-background'], classes.background, image && classes.background_in])
+  }), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    open: mouseDown && (selector === null || selector === void 0 ? void 0 : selector.width) + (selector === null || selector === void 0 ? void 0 : selector.height) > 0,
+    label: `${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.width) || 0)} x ${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.height) || 0)}`,
+    position: "bottom"
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.imageSelectorMain,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-image-selector-main'], classes.imageSelector_main, selector && classes.imageSelector_main_in]),
+    style: _objectSpread({}, selector)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.move,
+    onTouchStart: onTouchStartSelector,
+    onMouseDown: onMouseDownSelector,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-move'], classes.move])
+  }), gridLines && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-start'], classes.grid_line, classes.grid_line_top_start])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-end'], classes.grid_line, classes.grid_line_top_end])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-start'], classes.grid_line, classes.grid_line_left_start])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-end'], classes.grid_line, classes.grid_line_left_end])
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.dotTopLeft,
+    onTouchStart: onTouchStartBorder('top_left'),
+    onMouseDown: onMouseDownBorder('top_left'),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-left'], classes.dot, classes.dot_top_left])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.dotTopRight,
+    onTouchStart: onTouchStartBorder('top_right'),
+    onMouseDown: onMouseDownBorder('top_right'),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-right'], classes.dot, classes.dot_top_right])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.dotBottomLeft,
+    onTouchStart: onTouchStartBorder('bottom_left'),
+    onMouseDown: onMouseDownBorder('bottom_left'),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-left'], classes.dot, classes.dot_bottom_left])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.dotBottomRight,
+    onTouchStart: onTouchStartBorder('bottom_right'),
+    onMouseDown: onMouseDownBorder('bottom_right'),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-right'], classes.dot, classes.dot_bottom_right])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.borderTop,
+    onTouchStart: onTouchStartBorder('top'),
+    onMouseDown: onMouseDownBorder('top'),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-top'], classes.border, classes.border_top])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.borderLeft,
+    onTouchStart: onTouchStartBorder('left'),
+    onMouseDown: onMouseDownBorder('left'),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-left'], classes.border, classes.border_left])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.borderRight,
+    onTouchStart: onTouchStartBorder('right'),
+    onMouseDown: onMouseDownBorder('right'),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-right'], classes.border, classes.border_right])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.borderBottom,
+    onTouchStart: onTouchStartBorder('bottom'),
+    onMouseDown: onMouseDownBorder('bottom'),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-bottom'], classes.border, classes.border_bottom])
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.imageSelector,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-image-selector'], classes.imageSelector]),
+    style: _objectSpread({}, selector)
+  }, /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: refs.canvasImageSelector,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-image-selector'], classes.canvas, classes.canvas_imageSelector]),
+    width: (image === null || image === void 0 ? void 0 : image.width) || 0,
+    height: (image === null || image === void 0 ? void 0 : image.height) || 0,
+    style: {
+      top: `${((selector === null || selector === void 0 ? void 0 : selector.top) || 0) * -1}px`,
+      left: `${((selector === null || selector === void 0 ? void 0 : selector.left) || 0) * -1}px`,
+      width: rect === null || rect === void 0 ? void 0 : rect.width,
+      height: rect === null || rect === void 0 ? void 0 : rect.height
+    }
+  })));
 });
 ImageCrop.displayName = 'onesy-ImageCrop';
-exports.default = ImageCrop;
+var _default = exports.default = ImageCrop;