@amaui/ui-react
Version:
UI for React
934 lines • 61.1 kB
JavaScript
"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("@amaui/utils");
const style_react_1 = require("@amaui/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: 'amaui-ImageCrop' });
const ImageCrop = react_1.default.forwardRef((props_, ref) => {
var _a;
const theme = (0, style_react_1.useAmauiTheme)();
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.amauiImageCrop) === 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,