From 2ff005f715e00d5f1df6478344d8502700f560f3 Mon Sep 17 00:00:00 2001 From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com> Date: Thu, 19 Dec 2024 20:03:57 +0800 Subject: [PATCH 1/3] =?UTF-8?q?:art:=20=E6=94=B9=E8=BF=9B=E9=A1=B5?= =?UTF-8?q?=E7=AD=BE=E6=8B=96=E6=8B=BD=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/assets/scss/business/_layout.scss | 2 - app/src/layout/Wnd.ts | 45 +++++++++++++++-------- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/app/src/assets/scss/business/_layout.scss b/app/src/assets/scss/business/_layout.scss index 42fd647b08f..3c86da5f758 100644 --- a/app/src/assets/scss/business/_layout.scss +++ b/app/src/assets/scss/business/_layout.scss @@ -182,8 +182,6 @@ background-color: var(--b3-theme-primary-lightest); position: absolute; z-index: 100; - height: 100%; - width: 100%; transition: var(--b3-transition); } } diff --git a/app/src/layout/Wnd.ts b/app/src/layout/Wnd.ts index b5cc85fc2f9..8f27119dd8d 100644 --- a/app/src/layout/Wnd.ts +++ b/app/src/layout/Wnd.ts @@ -320,6 +320,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 / y < 2 * 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 - x) / y < 2 * 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"); @@ -329,7 +348,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); } } }); @@ -340,24 +360,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"); @@ -374,6 +382,7 @@ export class Wnd { } /// #endif if (!oldTab) { + dragElement.removeAttribute("style"); return; } @@ -406,10 +415,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) { @@ -418,6 +429,8 @@ export class Wnd { targetWnd.moveTab(oldTab); resizeTabs(); } + + dragElement.removeAttribute("style"); }); } From 2703ffbee51a9c57436c0bea86568ed70d598669 Mon Sep 17 00:00:00 2001 From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com> Date: Tue, 24 Dec 2024 22:18:47 +0800 Subject: [PATCH 2/3] =?UTF-8?q?:art:=20=E6=94=B9=E8=BF=9B=E9=A1=B5?= =?UTF-8?q?=E7=AD=BE=E6=8B=96=E6=8B=BD=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/layout/Wnd.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/layout/Wnd.ts b/app/src/layout/Wnd.ts index 8f27119dd8d..1ff637238af 100644 --- a/app/src/layout/Wnd.ts +++ b/app/src/layout/Wnd.ts @@ -326,9 +326,9 @@ export class Wnd { const x = event.clientX - rect.left; const y = event.clientY - rect.top; - if (x < width / 3 && x / y < 2 * width / height && x / (height - y) < 2 * width / height) { + if (x < width / 6 || x < width / 3 && (x - width / 6) / y < width / height && (x - width / 6) / (height - y) < width / height) { dragElement.setAttribute("style", "height:100%;width:50%;right:50%;bottom:0;left:0;top:0"); - } else if (x > width * 2 / 3 && (width - x) / y < 2 * width / height && (width - x) / (height - y) < 2 * width / height) { + } else if (x > width * 5 / 6 || x > width * 2 / 3 && (width * 5 / 6 - x) / y < width / height && (width * 5 / 6 - x) / (height - y) < 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"); From ff52b71a1aec37b133320967e302425ffce12b29 Mon Sep 17 00:00:00 2001 From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com> Date: Wed, 25 Dec 2024 12:39:59 +0800 Subject: [PATCH 3/3] =?UTF-8?q?:art:=20=E6=94=B9=E8=BF=9B=E9=A1=B5?= =?UTF-8?q?=E7=AD=BE=E6=8B=96=E6=8B=BD=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/layout/Wnd.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/layout/Wnd.ts b/app/src/layout/Wnd.ts index 1ff637238af..7b22e448010 100644 --- a/app/src/layout/Wnd.ts +++ b/app/src/layout/Wnd.ts @@ -326,9 +326,9 @@ export class Wnd { const x = event.clientX - rect.left; const y = event.clientY - rect.top; - if (x < width / 6 || x < width / 3 && (x - width / 6) / y < width / height && (x - width / 6) / (height - y) < width / height) { + 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 * 5 / 6 || x > width * 2 / 3 && (width * 5 / 6 - x) / y < width / height && (width * 5 / 6 - x) / (height - y) < width / height) { + } 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");