hongluan-ui
Version:
Hongluan Component Library for Vue 3
86 lines (83 loc) • 3.2 kB
JavaScript
import '../../../utils/index.mjs';
import { setTransform } from '../../../utils/animation.mjs';
const initDialogResizer = (dlg) => {
const resizer = dlg.__resizer__;
const body = dlg.querySelector(".panel-body");
body.addEventListener("mousedown", resizer.downHandler);
resizer.width = 0;
resizer.height = 0;
};
const resetDialogResizer = (dlg) => {
const resizer = dlg.__resizer__;
const body = dlg.querySelector(".panel-body");
body.removeEventListener("mousedown", resizer.downHandler);
};
const DialogResizer = {
beforeMount: (dlg, binding) => {
dlg.__resizer__ = Object.assign({
moveHandler: (e) => {
const resizer = dlg.__resizer__;
const { downX, downY, lastWidth, lastHeight, height: originHeight, width: originWidth } = resizer;
const { clientX, clientY } = e;
const transformStr = dlg.style.transform;
const diffX = clientX - downX;
const diffY = clientY - downY;
const newWidth = lastWidth + diffX;
const newHeight = lastHeight + diffY;
const scaleX = newWidth / originWidth;
const scaleY = newHeight / originHeight;
dlg.style.transformOrigin = "top left";
dlg.style.transform = setTransform(transformStr, "scale", `scale(${scaleX},${scaleY})`);
},
upHandler: () => {
const resizer = dlg.__resizer__;
removeEventListener("mousemove", resizer.moveHandler);
removeEventListener("mouseup", resizer.upHandler);
},
downHandler: (e) => {
const resizer = dlg.__resizer__;
const downX = e.clientX;
const downY = e.clientY;
resizer.downX = downX;
resizer.downY = downY;
const resizerDom = window.getComputedStyle(dlg.querySelector(".panel-body"), "::after");
const resizerWidth = parseFloat(resizerDom.getPropertyValue("width"));
const resizerHeight = parseFloat(resizerDom.getPropertyValue("height"));
const targetRect = dlg.getBoundingClientRect();
if (!resizer.width) {
resizer.width = targetRect.width;
resizer.height = targetRect.height;
}
const { bottom, right, height, width } = targetRect;
resizer.lastWidth = width;
resizer.lastHeight = height;
const resizerTop = bottom - resizerHeight;
const resizerLeft = right - resizerWidth;
if (downX >= resizerLeft && downX <= right && downY <= bottom && downY >= resizerTop) {
addEventListener("mousemove", resizer.moveHandler);
addEventListener("mouseup", resizer.upHandler);
}
}
});
if (!binding.value.canResize)
return;
initDialogResizer(dlg);
},
updated(dlg, binding) {
if (binding.value.canResize) {
initDialogResizer(dlg);
} else {
resetDialogResizer(dlg);
}
if (binding.value.showAs === "drawer" || binding.value.placement === "fullscreen") {
dlg.style.removeProperty("transform-origin");
dlg.style.transform = setTransform(dlg.style.transform, "scale", "");
}
},
beforeUnmount(dlg) {
resetDialogResizer(dlg);
dlg.__resizer__ = {};
}
};
export { DialogResizer };
//# sourceMappingURL=resizer.mjs.map