93 lines
4.2 KiB
TypeScript
93 lines
4.2 KiB
TypeScript
interface Dimension {
|
|
maxTop: number | null;
|
|
minTop: number | null;
|
|
maxLeft: number | null;
|
|
minLeft: number | null;
|
|
}
|
|
|
|
const getGroupDimension = (
|
|
group: NodeListOf<HTMLElement>,
|
|
containerRect: DOMRect,
|
|
offsetX: number,
|
|
offsetY: number
|
|
) => {
|
|
let dimension: Dimension = { maxTop: null, minTop: null, maxLeft: null, minLeft: null };
|
|
|
|
group.forEach((element: HTMLElement) => {
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
dimension.minTop = Math.min(dimension.minTop ?? Infinity, rect.top);
|
|
dimension.maxTop = Math.max(dimension.maxTop ?? 0, rect.bottom);
|
|
|
|
dimension.minLeft = Math.min(dimension.minLeft ?? Infinity, rect.left);
|
|
dimension.maxLeft = Math.max(dimension.maxLeft ?? 0, rect.right);
|
|
});
|
|
|
|
dimension.maxTop = dimension.maxTop !== null ? dimension.maxTop - containerRect.top + (offsetY - 10) : null;
|
|
dimension.minTop = dimension.minTop !== null ? dimension.minTop - containerRect.top - (offsetY - 10) : null;
|
|
|
|
dimension.maxLeft = dimension.maxLeft !== null ? dimension.maxLeft - containerRect.left + (offsetX - 10) : null;
|
|
dimension.minLeft = dimension.minLeft !== null ? dimension.minLeft - containerRect.left - (offsetX - 10) : null;
|
|
|
|
return dimension;
|
|
}
|
|
|
|
|
|
const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
|
|
const dimension = getGroupDimension(groupElements, containerRect, offsetX, offsetY);
|
|
const borderTop: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='top']");
|
|
const borderRight: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='right']");
|
|
const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
|
|
const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");
|
|
|
|
console.log("handleGroupBorderPosition")
|
|
|
|
if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
|
|
borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
|
|
borderTop.style.height = "1px";
|
|
borderTop.style.top = dimension.minTop + "px";
|
|
borderTop.style.left = dimension.minLeft + "px";
|
|
}
|
|
|
|
if (borderRight !== null && dimension.maxTop !== null && dimension.minTop !== null) {
|
|
borderRight.style.width = "1px";
|
|
borderRight.style.height = (dimension.maxTop - dimension.minTop) + "px";
|
|
borderRight.style.top = dimension.minTop + "px";
|
|
borderRight.style.left = dimension.maxLeft + "px";
|
|
}
|
|
|
|
if (borderBottom !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
|
|
borderBottom.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
|
|
borderBottom.style.height = "1px";
|
|
borderBottom.style.top = dimension.maxTop + "px";
|
|
borderBottom.style.left = dimension.minLeft + "px";
|
|
}
|
|
|
|
if (borderLeft !== null && dimension.maxTop !== null && dimension.minTop !== null) {
|
|
borderLeft.style.width = "1px";
|
|
borderLeft.style.height = (dimension.maxTop - dimension.minTop) + "px";
|
|
borderLeft.style.top = dimension.minTop + "px";
|
|
borderLeft.style.left = dimension.minLeft + "px";
|
|
}
|
|
}
|
|
|
|
// const handleTargetBorderEventListener = (groupId: string, containerRect: DOMRect) => {
|
|
// console.log("handleTargetBorderEventListener called for groupId:", groupId);
|
|
// if (groupId) {
|
|
// const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
|
|
// handleGroupBorderPosition(groupElements, containerRect);
|
|
// }
|
|
// }
|
|
|
|
const handleInitialGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
|
|
setTimeout(() => {
|
|
handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY)
|
|
}, 0)
|
|
}
|
|
|
|
export {
|
|
getGroupDimension,
|
|
handleGroupBorderPosition,
|
|
handleInitialGroupBorderPosition
|
|
// handleTargetBorderEventListener
|
|
} |