"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
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");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "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 = props_ => {
  var _theme$ui, _theme$ui2, _theme$elements, _refs$root$current4;
  const theme = (0, _styleReact.useOnesyTheme)();
  const props = _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_);
  const Tooltip = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Tooltip) || _Tooltip.default;
  const {
      ref,
      // 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;
        }
        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;
      }
    };
    const onMouseUp = event_0 => {
      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$curre0, _refs$mouseDown$curre1;
        const {
          top: previousTop,
          left: previousLeft
        } = refs.mouseDown.current;
        const rootRect_0 = 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_0.top;
        selectorRect.left = selectorRect_.left - rootRect_0.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_0.top, 0, rootRect_0.height);
          const left_ = (0, _utils.clamp)(x - rootRect_0.left, 0, rootRect_0.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_0.height)) return;
            }
            if (top < previousTop) {
              var _refs$selector$curren9, _refs$selector$curren0, _refs$selector$curren1, _refs$selector$curren10;
              if (((_refs$selector$curren9 = refs.selector.current) === null || _refs$selector$curren9 === void 0 ? void 0 : _refs$selector$curren9.top) < previousTop && top < ((_refs$selector$curren0 = refs.selector.current) === null || _refs$selector$curren0 === void 0 ? void 0 : _refs$selector$curren0.top) && (left <= 0 || ((_refs$selector$curren1 = refs.selector.current) === null || _refs$selector$curren1 === void 0 ? void 0 : _refs$selector$curren1.left) + ((_refs$selector$curren10 = refs.selector.current) === null || _refs$selector$curren10 === void 0 ? void 0 : _refs$selector$curren10.width) >= rootRect_0.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.clamp)(previousLeft - width, 0, previousLeft);

              // Update width, height upto the previousLeft
              width = (0, _utils.clamp)(width, 0, previousLeft);
              height = width / refs.aspectRatio.current;
            }

            // 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;
            }

            // Max width
            if (left + width > rootRect_0.width) {
              width = rootRect_0.width - left;
              height = width / refs.aspectRatio.current;
            }

            // Max height
            if (top + height > rootRect_0.height) {
              height = rootRect_0.height - top;
              width = height * refs.aspectRatio.current;
            }

            // 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_0 = y - refs.previousMouseEvent.current.clientY;
          const left_0 = x - refs.previousMouseEvent.current.clientX;
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            top: (0, _utils.clamp)(refs.selector.current.top + top_0, 0, rootRect_0.height - selectorRect.height),
            left: (0, _utils.clamp)(refs.selector.current.left + left_0, 0, rootRect_0.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_1 = (0, _utils.clamp)(selectorRect.top + incY, 0);
          let left_1 = (0, _utils.clamp)(selectorRect.left + incX, 0);
          if (selectorRect.bottom - top_1 < 0 && selectorRect.right - left_1 < 0) refs.mouseDown.current.version = 'bottom_right';else if (selectorRect.bottom - top_1 < 0) refs.mouseDown.current.version = 'bottom_left';else if (selectorRect.right - left_1 < 0) refs.mouseDown.current.version = 'top_right';
          let width_0 = (0, _utils.clamp)(selectorRect.right - left_1, 0);
          let height_0 = (0, _utils.clamp)(selectorRect.bottom - top_1, 0);
          if (refs.aspectRatio.current !== undefined) {
            var _refs$selector$curren11;
            // Left
            if (left_1 < refs.selector.current.left && refs.selector.current.left < previousLeft && ((_refs$selector$curren11 = refs.selector.current) === null || _refs$selector$curren11 === void 0 ? void 0 : _refs$selector$curren11.top) === 0) return;

            // Max surface
            if (width_0 + width_0 / refs.aspectRatio.current >= height_0 + height_0 * refs.aspectRatio.current) {
              height_0 = width_0 / refs.aspectRatio.current;
            } else {
              width_0 = height_0 * refs.aspectRatio.current;
            }

            // Moved left
            if (left_1 < previousLeft) {
              left_1 = (0, _utils.clamp)(previousLeft - width_0, 0, previousLeft);

              // Update width, height upto the previousLeft
              width_0 = (0, _utils.clamp)(width_0, 0, previousLeft);
              height_0 = width_0 / refs.aspectRatio.current;
            }

            // Moved top
            if (top_1 < previousTop) {
              top_1 = (0, _utils.clamp)(previousTop - height_0, 0, previousTop);

              // Update width, height upto the previousTop
              height_0 = (0, _utils.clamp)(height_0, 0, previousTop);
              width_0 = height_0 * refs.aspectRatio.current;
            }

            // Max width
            if (left_1 + width_0 > rootRect_0.width) {
              width_0 = rootRect_0.width - left_1;
              height_0 = width_0 / refs.aspectRatio.current;
            }

            // Max height
            if (top_1 + height_0 > rootRect_0.height) {
              height_0 = rootRect_0.height - top_1;
              width_0 = height_0 * refs.aspectRatio.current;
            }

            // Min left
            if (left_1 < previousLeft) left_1 = previousLeft - width_0;

            // Min top
            if (top_1 < previousTop) top_1 = previousTop - height_0;
          }
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            top: top_1,
            left: left_1,
            width: width_0,
            height: height_0
          }));
        } else if (((_refs$mouseDown$curre5 = refs.mouseDown.current) === null || _refs$mouseDown$curre5 === void 0 ? void 0 : _refs$mouseDown$curre5.version) === 'top_right') {
          const incY_0 = y - refs.previousMouseEvent.current.clientY;
          const incX_0 = x - refs.previousMouseEvent.current.clientX;
          const top_2 = (0, _utils.clamp)(selectorRect.top + incY_0, 0);
          if (selectorRect.bottom - top_2 < 0 && selectorRect.width + incX_0 < 0) refs.mouseDown.current.version = 'bottom_left';else if (selectorRect.bottom - top_2 < 0) refs.mouseDown.current.version = 'bottom_right';else if (selectorRect.width + incX_0 < 0) refs.mouseDown.current.version = 'top_left';
          let width_1 = (0, _utils.clamp)(Math.abs(selectorRect.width + incX_0), 0, rootRect_0.width - selectorRect.left);
          let height_1 = (0, _utils.clamp)(selectorRect.bottom - top_2, 0);

          // Top
          if (refs.aspectRatio.current !== undefined) {
            // Top
            if (top_2 < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect_0.width) return;
            width_1 = height_1 * refs.aspectRatio.current;
            height_1 = width_1 / refs.aspectRatio.current;

            // Max width
            if (refs.selector.current.left + width_1 > rootRect_0.width) {
              width_1 = rootRect_0.width - refs.selector.current.left;
              height_1 = width_1 / refs.aspectRatio.current;
            }

            // Max height
            if (refs.selector.current.top + height_1 > rootRect_0.height) {
              height_1 = rootRect_0.height - refs.selector.current.top;
              width_1 = height_1 * refs.aspectRatio.current;
            }
          }
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            top: top_2,
            width: width_1,
            height: height_1
          }));
        } else if (((_refs$mouseDown$curre6 = refs.mouseDown.current) === null || _refs$mouseDown$curre6 === void 0 ? void 0 : _refs$mouseDown$curre6.version) === 'bottom_right') {
          const incY_1 = y - refs.previousMouseEvent.current.clientY;
          const incX_1 = x - refs.previousMouseEvent.current.clientX;
          if (selectorRect.height + incY_1 < 0 && selectorRect.width + incX_1 < 0) refs.mouseDown.current.version = 'top_left';else if (selectorRect.height + incY_1 < 0) refs.mouseDown.current.version = 'top_right';else if (selectorRect.width + incX_1 < 0) refs.mouseDown.current.version = 'bottom_left';
          let width_2 = (0, _utils.clamp)(Math.abs(selectorRect.width + incX_1), 0, rootRect_0.width - selectorRect.left);
          let height_2 = (0, _utils.clamp)(Math.abs(selectorRect.height + incY_1), 0, rootRect_0.height - selectorRect.top);

          // Right
          if (refs.aspectRatio.current !== undefined) {
            height_2 = width_2 / refs.aspectRatio.current;

            // Max width
            if (refs.selector.current.left + width_2 > rootRect_0.width) {
              width_2 = rootRect_0.width - refs.selector.current.left;
              height_2 = width_2 / refs.aspectRatio.current;
            }

            // Max height
            if (refs.selector.current.top + height_2 > rootRect_0.height) {
              height_2 = rootRect_0.height - refs.selector.current.top;
              width_2 = height_2 * refs.aspectRatio.current;
            }
            width_2 = height_2 * refs.aspectRatio.current;

            // Max width
            if (refs.selector.current.left + width_2 > rootRect_0.width) {
              width_2 = rootRect_0.width - refs.selector.current.left;
              height_2 = width_2 / refs.aspectRatio.current;
            }

            // Max height
            if (refs.selector.current.top + height_2 > rootRect_0.height) {
              height_2 = rootRect_0.height - refs.selector.current.top;
              width_2 = height_2 * refs.aspectRatio.current;
            }
          }
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            width: width_2,
            height: height_2
          }));
        } else if (((_refs$mouseDown$curre7 = refs.mouseDown.current) === null || _refs$mouseDown$curre7 === void 0 ? void 0 : _refs$mouseDown$curre7.version) === 'bottom_left') {
          const incY_2 = y - refs.previousMouseEvent.current.clientY;
          const incX_2 = x - refs.previousMouseEvent.current.clientX;
          const left_2 = (0, _utils.clamp)(selectorRect.left + incX_2, 0);
          if (selectorRect.height + incY_2 < 0 && selectorRect.right - left_2 < 0) refs.mouseDown.current.version = 'top_right';else if (selectorRect.height + incY_2 < 0) refs.mouseDown.current.version = 'top_left';else if (selectorRect.right - left_2 < 0) refs.mouseDown.current.version = 'bottom_right';
          let width_3 = (0, _utils.clamp)(selectorRect.right - left_2, 0);
          let height_3 = (0, _utils.clamp)(Math.abs(selectorRect.height + incY_2), 0, rootRect_0.height - selectorRect.top);

          // Left
          if (refs.aspectRatio.current !== undefined) {
            var _refs$selector$curren12, _refs$selector$curren13;
            // Left
            if (left_2 < refs.selector.current.left && ((_refs$selector$curren12 = refs.selector.current) === null || _refs$selector$curren12 === void 0 ? void 0 : _refs$selector$curren12.top) + ((_refs$selector$curren13 = refs.selector.current) === null || _refs$selector$curren13 === void 0 ? void 0 : _refs$selector$curren13.height) >= rootRect_0.height) return;
            height_3 = width_3 / refs.aspectRatio.current;

            // Max width
            if (refs.selector.current.left + width_3 > rootRect_0.width) {
              width_3 = rootRect_0.width - refs.selector.current.left;
              height_3 = width_3 / refs.aspectRatio.current;
            }

            // Max height
            if (refs.selector.current.top + height_3 > rootRect_0.height) {
              height_3 = rootRect_0.height - refs.selector.current.top;
              width_3 = height_3 * refs.aspectRatio.current;
            }
            width_3 = height_3 * refs.aspectRatio.current;

            // Max width
            if (refs.selector.current.left + width_3 > rootRect_0.width) {
              width_3 = rootRect_0.width - refs.selector.current.left;
              height_3 = width_3 / refs.aspectRatio.current;
            }

            // Max height
            if (refs.selector.current.top + height_3 > rootRect_0.height) {
              height_3 = rootRect_0.height - refs.selector.current.top;
              width_3 = height_3 * refs.aspectRatio.current;
            }
          }
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            left: left_2,
            width: width_3,
            height: height_3
          }));
        } 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_3 = (0, _utils.clamp)(refs.selector.current.top + inc, 0);
          if (refs.selector.current.top <= 0 && top_3 <= 0) return;
          if (selectorRect.bottom - top_3 < 0) refs.mouseDown.current.version = 'bottom';
          let width_4 = refs.selector.current.width;
          let height_4 = (0, _utils.clamp)(Math.abs(refs.selector.current.height - inc), 0, previousTop - top_3);
          if (refs.aspectRatio.current !== undefined) {
            // Top
            if (top_3 < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect_0.width) return;
            width_4 = height_4 * refs.aspectRatio.current;

            // Max width
            if (refs.selector.current.left + width_4 > rootRect_0.width) {
              width_4 = rootRect_0.width - refs.selector.current.left;
              height_4 = width_4 / refs.aspectRatio.current;
            }

            // Max height
            if (top_3 + height_4 > rootRect_0.height) {
              height_4 = rootRect_0.height - top_3;
              width_4 = height_4 * refs.aspectRatio.current;
            }
          }
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            top: top_3,
            width: width_4,
            height: height_4
          }));
        } else if (((_refs$mouseDown$curre9 = refs.mouseDown.current) === null || _refs$mouseDown$curre9 === void 0 ? void 0 : _refs$mouseDown$curre9.version) === 'bottom') {
          const inc_0 = y - refs.previousMouseEvent.current.clientY;
          if (selectorRect.height + inc_0 < 0) refs.mouseDown.current.version = 'top';
          let width_5 = refs.selector.current.width;
          let height_5 = (0, _utils.clamp)(Math.abs(selectorRect.height + inc_0), 0, rootRect_0.height - refs.selector.current.top);
          if (refs.aspectRatio.current !== undefined) {
            width_5 = height_5 * refs.aspectRatio.current;

            // Max height
            if (refs.selector.current.top + height_5 > rootRect_0.height) {
              height_5 = rootRect_0.height - refs.selector.current.top;
              width_5 = height_5 * refs.aspectRatio.current;
            }

            // Max width
            if (refs.selector.current.left + width_5 > rootRect_0.width) {
              width_5 = rootRect_0.width - refs.selector.current.left;
              height_5 = width_5 / refs.aspectRatio.current;
            }
          }
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            width: width_5,
            height: height_5
          }));
        } else if (((_refs$mouseDown$curre0 = refs.mouseDown.current) === null || _refs$mouseDown$curre0 === void 0 ? void 0 : _refs$mouseDown$curre0.version) === 'left') {
          const inc_1 = x - refs.previousMouseEvent.current.clientX;
          const left_3 = (0, _utils.clamp)(selectorRect.left + inc_1, 0);
          if (selectorRect.right - left_3 < 0) refs.mouseDown.current.version = 'right';
          let width_6 = (0, _utils.clamp)(selectorRect.right - left_3, 0);
          let height_6 = refs.selector.current.height;
          if (refs.aspectRatio.current !== undefined) {
            var _refs$selector$curren14, _refs$selector$curren15;
            if (left_3 < 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_0.height) return;
            height_6 = width_6 / refs.aspectRatio.current;

            // Max width
            if (refs.selector.current.left + width_6 > rootRect_0.width) {
              width_6 = rootRect_0.width - refs.selector.current.left;
              height_6 = width_6 / refs.aspectRatio.current;
            }

            // Max height
            if (refs.selector.current.top + height_6 > rootRect_0.height) {
              height_6 = rootRect_0.height - refs.selector.current.top;
              width_6 = height_6 * refs.aspectRatio.current;
            }
          }
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            left: left_3,
            width: width_6,
            height: height_6
          }));
        } else if (((_refs$mouseDown$curre1 = refs.mouseDown.current) === null || _refs$mouseDown$curre1 === void 0 ? void 0 : _refs$mouseDown$curre1.version) === 'right') {
          const inc_2 = x - refs.previousMouseEvent.current.clientX;
          if (selectorRect.width + inc_2 < 0) refs.mouseDown.current.version = 'left';
          let width_7 = (0, _utils.clamp)(Math.abs(selectorRect.width + inc_2), 0, rootRect_0.width - selectorRect.left);
          let height_7 = refs.selector.current.height;
          if (refs.aspectRatio.current !== undefined) {
            height_7 = width_7 / refs.aspectRatio.current;

            // Max width
            if (refs.selector.current.left + width_7 > rootRect_0.width) {
              width_7 = rootRect_0.width - refs.selector.current.left;
              height_7 = width_7 / refs.aspectRatio.current;
            }

            // Max height
            if (refs.selector.current.top + height_7 > rootRect_0.height) {
              height_7 = rootRect_0.height - refs.selector.current.top;
              width_7 = height_7 * refs.aspectRatio.current;
            }
          }
          onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
            width: width_7,
            height: height_7
          }));
        }
      }
    };

    // Mouse move
    const onMouseMove = event_1 => {
      if (refs.mouseDown.current) {
        const {
          clientY,
          clientX
        } = event_1;
        onMove(clientX, clientY);
        refs.previousMouseEvent.current = event_1;
      }
    };

    // Touch move
    const onTouchMove = event_2 => {
      if (refs.mouseDown.current) {
        const {
          clientY: clientY_0,
          clientX: clientX_0
        } = event_2.touches[0];
        onMove(clientX_0, clientY_0);
        refs.previousMouseEvent.current = event_2;

        // Normalize for use as a mouseDown value
        refs.previousMouseEvent.current.clientY = clientY_0;
        refs.previousMouseEvent.current.clientX = clientX_0;
      }
    };
    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');
      }
    };
  }, []);
  _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_1 = 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_1.width - selectorValue.left);
      selectorValue.height = (0, _utils.clamp)(selector__.height || 0, 0, rootRect_1.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_1.width) {
          selectorValue.width = rootRect_1.width - selectorValue.left;
          selectorValue.height = selectorValue.width / refs.aspectRatio.current;
        }

        // Max height
        if (selectorValue.top + selectorValue.height > rootRect_1.height) {
          selectorValue.height = rootRect_1.height - selectorValue.top;
          selectorValue.width = selectorValue.height * refs.aspectRatio.current;
        }
      }

      // Update selector
      setSelector(selectorValue);

      // Update selector relative
      setSelectorRelative({
        top: selectorValue.top / (rootRect_1 === null || rootRect_1 === void 0 ? void 0 : rootRect_1.height) * ((_refs$canvasMain$curr5 = refs.canvasMain.current) === null || _refs$canvasMain$curr5 === void 0 ? void 0 : _refs$canvasMain$curr5.height),
        left: selectorValue.left / (rootRect_1 === null || rootRect_1 === void 0 ? void 0 : rootRect_1.width) * ((_refs$canvasMain$curr6 = refs.canvasMain.current) === null || _refs$canvasMain$curr6 === void 0 ? void 0 : _refs$canvasMain$curr6.width),
        width: selectorValue.width / (rootRect_1 === null || rootRect_1 === void 0 ? void 0 : rootRect_1.width) * ((_refs$canvasMain$curr7 = refs.canvasMain.current) === null || _refs$canvasMain$curr7 === void 0 ? void 0 : _refs$canvasMain$curr7.width),
        height: selectorValue.height / (rootRect_1 === null || rootRect_1 === void 0 ? void 0 : rootRect_1.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 = (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_0.createElement('canvas');
    const rootRect_2 = refs.root.current.getBoundingClientRect();
    const aspectRatioImg = img.width / img.height;

    // width being parent width
    img.width = rootRect_2.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 = event_3 => {
    setFocus(true);
    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_3);
  };
  const onBlur = event_4 => {
    setFocus(false);
    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_4);
  };
  const onTouchStart = event_5 => {
    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_5.target)) {
      const {
        clientY: clientY_1,
        clientX: clientX_1
      } = event_5.touches[0];
      const rootRect_3 = refs.root.current.getBoundingClientRect();
      setMouseDown({
        version: 'make',
        top: clientY_1 - rootRect_3.top,
        left: clientX_1 - rootRect_3.left
      });
    }
  };
  const onMouseDown = event_6 => {
    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_6.target)) {
      const {
        clientY: clientY_2,
        clientX: clientX_2
      } = event_6;
      const rootRect_4 = refs.root.current.getBoundingClientRect();
      setMouseDown({
        version: 'make',
        top: clientY_2 - rootRect_4.top,
        left: clientX_2 - rootRect_4.left
      });
    }
  };
  const onTouchStartSelector = event_7 => {
    const {
      clientY: clientY_3,
      clientX: clientX_3
    } = event_7.touches[0];
    const rootRect_5 = refs.root.current.getBoundingClientRect();
    setMouseDown({
      version: 'move',
      top: clientY_3 - rootRect_5.top,
      left: clientX_3 - rootRect_5.left
    });
  };
  const onMouseDownSelector = event_8 => {
    const {
      clientY: clientY_4,
      clientX: clientX_4
    } = event_8;
    const rootRect_6 = refs.root.current.getBoundingClientRect();
    setMouseDown({
      version: 'move',
      top: clientY_4 - rootRect_6.top,
      left: clientX_4 - rootRect_6.left
    });
  };
  const onTouchStartBorder = version => event_9 => {
    var _refs$selector$curren16, _refs$selector$curren17, _refs$selector$curren18, _refs$selector$curren19;
    setMouseDown({
      version,
      top: ((_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),
      left: ((_refs$selector$curren18 = refs.selector.current) === null || _refs$selector$curren18 === void 0 ? void 0 : _refs$selector$curren18.left) + ((_refs$selector$curren19 = refs.selector.current) === null || _refs$selector$curren19 === void 0 ? void 0 : _refs$selector$curren19.width)
    });
  };
  const onMouseDownBorder = version_0 => event_10 => {
    var _refs$selector$curren20, _refs$selector$curren21, _refs$selector$curren22, _refs$selector$curren23;
    setMouseDown({
      version: version_0,
      top: ((_refs$selector$curren20 = refs.selector.current) === null || _refs$selector$curren20 === void 0 ? void 0 : _refs$selector$curren20.top) + ((_refs$selector$curren21 = refs.selector.current) === null || _refs$selector$curren21 === void 0 ? void 0 : _refs$selector$curren21.height),
      left: ((_refs$selector$curren22 = refs.selector.current) === null || _refs$selector$curren22 === void 0 ? void 0 : _refs$selector$curren22.left) + ((_refs$selector$curren23 = refs.selector.current) === null || _refs$selector$curren23 === void 0 ? void 0 : _refs$selector$curren23.width)
    });
  };
  const rect = (_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.getBoundingClientRect();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
    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), {}, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-background'], classes.background, image && classes.background_in])
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
      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: /*#__PURE__*/(0, _jsxRuntime.jsxs)("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),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          ref: refs.move,
          onTouchStart: onTouchStartSelector,
          onMouseDown: onMouseDownSelector,
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-move'], classes.move])
        }), gridLines && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("div", {
      ref: refs.imageSelector,
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-image-selector'], classes.imageSelector]),
      style: _objectSpread({}, selector),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("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';
var _default = exports.default = ImageCrop;