@onesy/ui-react 1.0.0

package/ImageCrop/ImageCrop.js

@@ -0,0 +1,1076 @@
+"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]];
+        }
+    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'
+    };
+    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: 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(undefined),
+        image: react_1.default.useRef(undefined),
+        mouseDown: react_1.default.useRef(undefined),
+        selector: react_1.default.useRef(undefined),
+        imageSelectorMain: react_1.default.useRef(undefined),
+        imageSelector: react_1.default.useRef(undefined),
+        previousMouseEvent: react_1.default.useRef(undefined),
+        canvasMain: react_1.default.useRef(),
+        canvasImageSelector: react_1.default.useRef(),
+        move: react_1.default.useRef(undefined),
+        borderTop: react_1.default.useRef(undefined),
+        borderLeft: react_1.default.useRef(undefined),
+        borderRight: react_1.default.useRef(undefined),
+        borderBottom: react_1.default.useRef(undefined),
+        dotTopLeft: react_1.default.useRef(undefined),
+        dotTopRight: react_1.default.useRef(undefined),
+        dotBottomLeft: react_1.default.useRef(undefined),
+        dotBottomRight: react_1.default.useRef(undefined),
+        props: react_1.default.useRef(undefined),
+        dynamicParent: react_1.default.useRef(undefined),
+        focus: react_1.default.useRef(undefined),
+        aspectRatio: react_1.default.useRef(undefined)
+    };
+    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;
+                }
+            }
+            // 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;
+                }
+            }
+        }
+        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;
+            }
+        };
+        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 }));
+                }
+            }
+        };
+        // Mouse move
+        const onMouseMove = (event) => {
+            if (refs.mouseDown.current) {
+                const { clientY, clientX } = event;
+                onMove(clientX, clientY);
+                refs.previousMouseEvent.current = event;
+            }
+        };
+        // 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 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');
+            }
+        };
+    }, []);
+    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;
+                }
+            }
+            // 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)
+            });
+        }
+    };
+    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);
+    };
+    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)
+        });
+    };
+    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 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
+                    } }) }))] })));
+});
+ImageCrop.displayName = 'onesy-ImageCrop';
+exports.default = ImageCrop;