Merge ff52b71a1a
into 879369dd94
This commit is contained in:
commit
173e42e990
2 changed files with 29 additions and 18 deletions
|
@ -182,8 +182,6 @@
|
|||
background-color: var(--b3-theme-primary-lightest);
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: var(--b3-transition);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -332,6 +332,25 @@ export class Wnd {
|
|||
saveLayout();
|
||||
});
|
||||
|
||||
const updateDragElementStyle = (event: DragEvent, rect: DOMRect, dragElement: HTMLElement) => {
|
||||
const height = rect.height;
|
||||
const width = rect.width;
|
||||
const x = event.clientX - rect.left;
|
||||
const y = event.clientY - rect.top;
|
||||
|
||||
if (x < width / 3 && (x - width / 6) / y < width / height && x / (height - y) < 2 * width / height) {
|
||||
dragElement.setAttribute("style", "height:100%;width:50%;right:50%;bottom:0;left:0;top:0");
|
||||
} else if (x > width * 2 / 3 && (width * 5 / 6 - x) / y < width / height && (width - x) / (height - y) < 2 * width / height) {
|
||||
dragElement.setAttribute("style", "height:100%;width:50%;right:0;bottom:0;left:50%;top:0");
|
||||
} else if (y < height / 6) {
|
||||
dragElement.setAttribute("style", "height:50%;width:100%;right:0;bottom:50%;left:0;top:0");
|
||||
} else if (y > height * 5 / 6) {
|
||||
dragElement.setAttribute("style", "height:50%;width:100%;right:0;bottom:0;left:0;top:50%");
|
||||
} else {
|
||||
dragElement.setAttribute("style", "height:100%;width:100%;right:0;bottom:0;left:0;top:0");
|
||||
}
|
||||
};
|
||||
|
||||
this.element.addEventListener("dragenter", (event: DragEvent & { target: HTMLElement }) => {
|
||||
if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_TAB)) {
|
||||
const tabHeadersElement = hasClosestByClassName(event.target, "layout-tab-bar");
|
||||
|
@ -341,7 +360,8 @@ export class Wnd {
|
|||
const tabPanelsElement = hasClosestByClassName(event.target, "layout-tab-container", true);
|
||||
if (tabPanelsElement) {
|
||||
dragElement.classList.remove("fn__none");
|
||||
dragElement.setAttribute("style", "height:100%;width:100%;right:auto;bottom:auto");
|
||||
const rect = dragElement.parentElement.getBoundingClientRect();
|
||||
updateDragElementStyle(event, rect, dragElement);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -352,24 +372,12 @@ export class Wnd {
|
|||
return;
|
||||
}
|
||||
const rect = dragElement.parentElement.getBoundingClientRect();
|
||||
const height = rect.height;
|
||||
const width = rect.width;
|
||||
const x = event.clientX - rect.left;
|
||||
const y = event.clientY - rect.top;
|
||||
if (x <= width / 8 || (x <= width / 3 && x > width / 8 && y >= height / 8 && y <= height * 7 / 8)) {
|
||||
dragElement.setAttribute("style", "height:100%;width:50%;right:50%;bottom:0;left:0;top:0");
|
||||
} else if (x >= width * 7 / 8 || (x >= width * 2 / 3 && x < width * 7 / 8 && y >= height / 8 && y <= height * 7 / 8)) {
|
||||
dragElement.setAttribute("style", "height:100%;width:50%;right:0;bottom:0;left:50%;top:0");
|
||||
} else if (y <= height / 8) {
|
||||
dragElement.setAttribute("style", "height:50%;width:100%;right:0;bottom:50%;left:0;top:0");
|
||||
} else if (y >= height * 7 / 8) {
|
||||
dragElement.setAttribute("style", "height:50%;width:100%;right:0;bottom:0;left:0;top:50%");
|
||||
} else {
|
||||
dragElement.setAttribute("style", "height:100%;width:100%;right:0;bottom:0;top:0;left:0");
|
||||
}
|
||||
updateDragElementStyle(event, rect, dragElement);
|
||||
});
|
||||
|
||||
dragElement.addEventListener("dragleave", () => {
|
||||
dragElement.classList.add("fn__none");
|
||||
dragElement.removeAttribute("style");
|
||||
});
|
||||
dragElement.addEventListener("drop", (event: DragEvent & { target: HTMLElement }) => {
|
||||
dragElement.classList.add("fn__none");
|
||||
|
@ -386,6 +394,7 @@ export class Wnd {
|
|||
}
|
||||
/// #endif
|
||||
if (!oldTab) {
|
||||
dragElement.removeAttribute("style");
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -418,10 +427,12 @@ export class Wnd {
|
|||
/// #if !BROWSER
|
||||
setTabPosition();
|
||||
/// #endif
|
||||
dragElement.removeAttribute("style");
|
||||
return;
|
||||
}
|
||||
|
||||
if (targetWndElement.contains(document.querySelector(`[data-id="${tabData.id}"]`))) {
|
||||
dragElement.removeAttribute("style");
|
||||
return;
|
||||
}
|
||||
if (targetWnd) {
|
||||
|
@ -430,6 +441,8 @@ export class Wnd {
|
|||
targetWnd.moveTab(oldTab);
|
||||
resizeTabs();
|
||||
}
|
||||
|
||||
dragElement.removeAttribute("style");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue