From 4c011d5ee92ef654c7f39b3322946421d2ca9952 Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Wed, 8 Jan 2025 10:42:51 +0800
Subject: [PATCH] =?UTF-8?q?:art:=20=E6=94=B9=E8=BF=9B=E9=A1=B5=E7=AD=BE?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E9=AB=98=E4=BA=AE=20(#13549)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :art: 改进页签拖拽高亮

* :art: 改进页签拖拽高亮

* :art: 改进页签拖拽高亮
---
 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 563c90eef..59cbbb238 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 cefd6bfdd..75de287e2 100644
--- a/app/src/layout/Wnd.ts
+++ b/app/src/layout/Wnd.ts
@@ -323,6 +323,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");
@@ -332,7 +351,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);
                 }
             }
         });
@@ -346,24 +366,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");
@@ -380,6 +388,7 @@ export class Wnd {
             }
             /// #endif
             if (!oldTab) {
+                dragElement.removeAttribute("style");
                 return;
             }
 
@@ -412,10 +421,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) {
@@ -424,6 +435,8 @@ export class Wnd {
                 targetWnd.moveTab(oldTab);
                 resizeTabs();
             }
+
+            dragElement.removeAttribute("style");
         });
     }