102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
// Copyright (c) 2024-present AI-Labs
|
|
|
|
/**
|
|
* 调整对象大小
|
|
* @param container
|
|
* @param root
|
|
* @param updateAttrs
|
|
*/
|
|
export const resize = (container: HTMLDivElement, root: HTMLElement, updateAttrs: (data: any) => void) => {
|
|
|
|
const objResize = container.querySelector(".resize-obj") as HTMLElement,
|
|
minWidth = 10;
|
|
|
|
let startX: number, startY: number, objWidth: number, startPosition: string;
|
|
|
|
const onMousedown = (e: any) => {
|
|
e.preventDefault();
|
|
|
|
root.addEventListener('mousemove', onMousemove);
|
|
root.addEventListener('mouseup', onMouseup);
|
|
root.addEventListener('mouseleave', onMouseup);
|
|
|
|
// 获取鼠标初始位置
|
|
startX = e.clientX;
|
|
startY = e.clientY;
|
|
|
|
objWidth = Number(objResize.getAttribute("data-with")) || objResize.clientWidth;
|
|
startPosition = e.target.getAttribute("data-position");
|
|
};
|
|
|
|
const onMousemove = (event: MouseEvent) => {
|
|
// 获取鼠标最新位置的变化
|
|
const distanceX = event.clientX - startX;
|
|
const distanceY = event.clientY - startY;
|
|
if (distanceX == 0 && distanceY == 0) {
|
|
return;
|
|
}
|
|
|
|
// 判断是做缩小还是做放大
|
|
var zoomIn = false;
|
|
var zoomSize = 0;
|
|
if (startPosition === "1") {
|
|
zoomIn = distanceX > 0 && distanceY > 0 ? false : true;
|
|
zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
|
|
}
|
|
if (startPosition === "2") {
|
|
zoomIn = distanceY > 0 ? false : true;
|
|
zoomSize = Math.abs(distanceY);
|
|
}
|
|
if (startPosition === "3") {
|
|
zoomIn = distanceX < 0 && distanceY > 0 ? false : true;
|
|
zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
|
|
}
|
|
if (startPosition === "4") {
|
|
zoomIn = distanceX > 0 ? false : true;
|
|
zoomSize = Math.abs(distanceX);
|
|
}
|
|
if (startPosition === "5") {
|
|
zoomIn = distanceX < 0 ? false : true;
|
|
zoomSize = Math.abs(distanceX);
|
|
}
|
|
if (startPosition === "6") {
|
|
zoomIn = distanceX > 0 && distanceY < 0 ? false : true;
|
|
zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
|
|
}
|
|
if (startPosition === "7") {
|
|
zoomIn = distanceY < 0 ? false : true;
|
|
zoomSize = Math.abs(distanceY);
|
|
}
|
|
if (startPosition === "8") {
|
|
zoomIn = distanceX < 0 && distanceY < 0 ? false : true;
|
|
zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
|
|
}
|
|
let newWidth = objWidth + zoomSize * (zoomIn ? 1 : -1);
|
|
|
|
if (newWidth >= root.clientWidth) {
|
|
newWidth = root.clientWidth;
|
|
}
|
|
if (newWidth < minWidth) {
|
|
newWidth = minWidth;
|
|
}
|
|
|
|
//及时修改节点宽度，拖动结束后再通知渲染视图
|
|
objResize.style.width = `${newWidth}px`;
|
|
objResize.setAttribute("data-width", newWidth.toString());
|
|
|
|
objResize.parentElement!.removeAttribute("style");
|
|
}
|
|
|
|
const onMouseup = () => {
|
|
root.removeEventListener('mousemove', onMousemove);
|
|
root.removeEventListener('mouseup', onMouseup);
|
|
root.removeEventListener('mouseleave', onMouseup);
|
|
|
|
const attrs = { width: `${objResize.getAttribute("data-width")}px` };
|
|
updateAttrs(attrs)
|
|
};
|
|
|
|
for (let child of container.querySelector(".uai-resize")!.children) {
|
|
child.addEventListener("mousedown", onMousedown)
|
|
}
|
|
} |