Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-06 08:48:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 改进页签拖拽高亮 (#13549)

Browse source 
* 🎨 改进页签拖拽高亮

* 🎨 改进页签拖拽高亮

* 🎨 改进页签拖拽高亮
This commit is contained in:
Jeffrey Chen 2025-01-08 10:42:51 +08:00 • committed by GitHub
parent 41bf976dd6
commit 4c011d5ee9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/assets/scss/business/_layout.scss
View file

@ -182,8 +182,6 @@
background-color: var(--b3-theme-primary-lightest);
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
transition: var(--b3-transition);
}
}

45
app/src/layout/Wnd.ts
View file

@ -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");
});
}