217 lines
9.7 KiB
JavaScript
217 lines
9.7 KiB
JavaScript
"use strict";
|
|
var __assign = (this && this.__assign) || function () {
|
|
__assign = Object.assign || function(t) {
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
s = arguments[i];
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
t[p] = s[p];
|
|
}
|
|
return t;
|
|
};
|
|
return __assign.apply(this, arguments);
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.useResizable = void 0;
|
|
var react_1 = require("react");
|
|
var MoveEvent;
|
|
(function (MoveEvent) {
|
|
MoveEvent["MouseMove"] = "mousemove";
|
|
MoveEvent["TouchMove"] = "touchmove";
|
|
})(MoveEvent || (MoveEvent = {}));
|
|
var EndEvent;
|
|
(function (EndEvent) {
|
|
EndEvent["MouseUp"] = "mouseup";
|
|
EndEvent["TouchEnd"] = "touchend";
|
|
})(EndEvent || (EndEvent = {}));
|
|
var defaultProps = {
|
|
interval: 1,
|
|
initialHeight: 100,
|
|
initialWidth: 100,
|
|
lockHorizontal: false,
|
|
lockVertical: false,
|
|
};
|
|
var useResizable = function (options) {
|
|
var props = __assign(__assign({}, defaultProps), options);
|
|
var parentRef = (0, react_1.useRef)(null);
|
|
var getRootProps = function () {
|
|
var initialHeight = props.initialHeight, initialWidth = props.initialWidth;
|
|
return {
|
|
ref: parentRef,
|
|
style: {
|
|
height: initialHeight,
|
|
width: initialWidth,
|
|
},
|
|
};
|
|
};
|
|
var getHandleProps = function (handleProps) {
|
|
if (!handleProps) {
|
|
handleProps = {};
|
|
}
|
|
var _a = __assign(__assign({}, props), handleProps), _b = _a.parent, parent = _b === void 0 ? parentRef : _b, _c = _a.interval, interval = _c === void 0 ? 1 : _c, _d = _a.maxHeight, maxHeight = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? Number.MAX_SAFE_INTEGER : _e, reverse = _a.reverse, lockHorizontal = _a.lockHorizontal, lockVertical = _a.lockVertical, onResize = _a.onResize, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, _f = _a.minHeight, minHeight = _f === void 0 ? 0 : _f, _g = _a.minWidth, minWidth = _g === void 0 ? 0 : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.maintainAspectRatio, maintainAspectRatio = _j === void 0 ? false : _j;
|
|
var handleMove = function (clientY, startHeight, startY, clientX, startWidth, startX) {
|
|
var _a, _b;
|
|
if (disabled)
|
|
return;
|
|
var currentWidth = ((_a = parent === null || parent === void 0 ? void 0 : parent.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
|
|
var currentHeight = ((_b = parent === null || parent === void 0 ? void 0 : parent.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
|
|
var roundedHeight = currentHeight;
|
|
var roundedWidth = currentWidth;
|
|
if (!lockVertical) {
|
|
var newHeight = startHeight + (clientY - startY) * (reverse ? -1 : 1);
|
|
// Round height to nearest interval
|
|
roundedHeight = Math.round(newHeight / interval) * interval;
|
|
if (roundedHeight <= 0) {
|
|
roundedHeight = interval;
|
|
}
|
|
if (roundedHeight >= maxHeight) {
|
|
roundedHeight = maxHeight;
|
|
}
|
|
if (roundedHeight <= minHeight) {
|
|
roundedHeight = minHeight;
|
|
}
|
|
if (parent === null || parent === void 0 ? void 0 : parent.current) {
|
|
parent.current.style.height = "".concat(roundedHeight, "px");
|
|
}
|
|
}
|
|
if (!lockHorizontal) {
|
|
var newWidth = startWidth + (clientX - startX) * (reverse ? -1 : 1);
|
|
// Round height to nearest interval
|
|
roundedWidth = Math.round(newWidth / interval) * interval;
|
|
if (roundedWidth <= 0) {
|
|
roundedWidth = interval;
|
|
}
|
|
if (roundedWidth >= maxWidth) {
|
|
roundedWidth = maxWidth;
|
|
}
|
|
if (roundedWidth <= minWidth) {
|
|
roundedWidth = minWidth;
|
|
}
|
|
if (parent === null || parent === void 0 ? void 0 : parent.current) {
|
|
parent.current.style.width = "".concat(roundedWidth, "px");
|
|
}
|
|
}
|
|
if (maintainAspectRatio) {
|
|
var aspectRatio = currentWidth / currentHeight;
|
|
var newAspectRatio = roundedWidth / roundedHeight;
|
|
if (newAspectRatio > aspectRatio) {
|
|
roundedWidth = roundedHeight * aspectRatio;
|
|
if (parent === null || parent === void 0 ? void 0 : parent.current) {
|
|
parent.current.style.width = "".concat(roundedWidth, "px");
|
|
}
|
|
}
|
|
else {
|
|
roundedHeight = roundedWidth / aspectRatio;
|
|
if (parent === null || parent === void 0 ? void 0 : parent.current) {
|
|
parent.current.style.height = "".concat(roundedHeight, "px");
|
|
}
|
|
}
|
|
}
|
|
if (onResize) {
|
|
onResize({
|
|
newHeight: roundedHeight,
|
|
heightDiff: roundedHeight - currentHeight,
|
|
newWidth: roundedWidth,
|
|
widthDiff: roundedWidth - currentWidth,
|
|
});
|
|
}
|
|
};
|
|
var handleMouseMove = function (startHeight, startY, startWidth, startX) { return function (e) {
|
|
if (!(e instanceof MouseEvent))
|
|
return;
|
|
handleMove(e.clientY, startHeight, startY, e.clientX, startWidth, startX);
|
|
}; };
|
|
var handleTouchMove = function (startHeight, startY, startWidth, startX) { return function (e) {
|
|
e.preventDefault();
|
|
if (!(e instanceof TouchEvent))
|
|
return;
|
|
handleMove(e.touches[0].clientY, startHeight, startY, e.touches[0].clientX, startWidth, startX);
|
|
}; };
|
|
var handleDragEnd = function (handleMoveInstance, moveEvent, endEvent, startHeight, startWidth) {
|
|
function dragHandler() {
|
|
var _a, _b;
|
|
document.removeEventListener(moveEvent, handleMoveInstance);
|
|
document.removeEventListener(endEvent, dragHandler);
|
|
if (onDragEnd) {
|
|
var currentWidth = ((_a = parent === null || parent === void 0 ? void 0 : parent.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
|
|
var currentHeight = ((_b = parent === null || parent === void 0 ? void 0 : parent.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
|
|
onDragEnd({
|
|
newHeight: currentHeight,
|
|
heightDiff: currentHeight - startHeight,
|
|
newWidth: currentWidth,
|
|
widthDiff: currentWidth - startWidth,
|
|
});
|
|
}
|
|
}
|
|
return dragHandler;
|
|
};
|
|
var handleDown = function (e) {
|
|
var _a, _b;
|
|
if (disabled)
|
|
return;
|
|
var startHeight = ((_a = parent === null || parent === void 0 ? void 0 : parent.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
|
|
var startWidth = ((_b = parent === null || parent === void 0 ? void 0 : parent.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
|
|
var moveHandler = null;
|
|
var moveEvent = null;
|
|
var endEvent = null;
|
|
if (e.type === 'mousedown') {
|
|
var _c = e, clientY = _c.clientY, clientX = _c.clientX;
|
|
moveHandler = handleMouseMove(startHeight, clientY, startWidth, clientX);
|
|
moveEvent = MoveEvent.MouseMove;
|
|
endEvent = EndEvent.MouseUp;
|
|
}
|
|
else if (e.type === 'touchstart') {
|
|
var touches = e.touches;
|
|
var _d = touches[0], clientY = _d.clientY, clientX = _d.clientX;
|
|
moveHandler = handleTouchMove(startHeight, clientY, startWidth, clientX);
|
|
moveEvent = MoveEvent.TouchMove;
|
|
endEvent = EndEvent.TouchEnd;
|
|
}
|
|
if (!moveHandler || !moveEvent || !endEvent)
|
|
return;
|
|
if (onDragStart) {
|
|
onDragStart({
|
|
newHeight: startHeight,
|
|
heightDiff: 0,
|
|
newWidth: startWidth,
|
|
widthDiff: 0,
|
|
});
|
|
}
|
|
var dragEndHandler = handleDragEnd(moveHandler, moveEvent, endEvent, startHeight, startWidth);
|
|
// Attach the mousemove/mouseup/touchmove/touchend listeners to the document
|
|
// so that we can handle the case where the user drags outside of the element
|
|
document.addEventListener(moveEvent, moveHandler, { passive: false });
|
|
document.addEventListener(endEvent, dragEndHandler);
|
|
};
|
|
var cursor;
|
|
if (disabled) {
|
|
cursor = 'not-allowed';
|
|
}
|
|
else if (lockHorizontal && lockVertical) {
|
|
cursor = 'default';
|
|
}
|
|
else if (lockHorizontal) {
|
|
cursor = 'row-resize';
|
|
}
|
|
else if (lockVertical) {
|
|
cursor = 'col-resize';
|
|
}
|
|
else {
|
|
cursor = 'nwse-resize';
|
|
}
|
|
var style = {
|
|
cursor: cursor,
|
|
};
|
|
return {
|
|
onMouseDown: handleDown,
|
|
onTouchStart: handleDown,
|
|
style: style,
|
|
};
|
|
};
|
|
return {
|
|
rootRef: parentRef,
|
|
getRootProps: getRootProps,
|
|
getHandleProps: getHandleProps,
|
|
};
|
|
};
|
|
exports.useResizable = useResizable;
|