Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-13 18:54:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 The menu no longer extends beyond the window

Browse source 
fix https://github.com/siyuan-note/siyuan/issues/15400
This commit is contained in:
Jeffrey Chen 2025-08-18 17:23:09 +08:00
parent e828496584
commit b37f65b8c4
5 changed files with 38 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/assets/scss/component/_menu.scss
View file

@ -169,7 +169,7 @@
}
&__items {
max-height: min(80vh, calc(100vh - 20px - var(--b3-menu-position-top, 0px))); // 20px 是 .b3-menu 的上下 padding
max-height: 80vh;
overflow: auto;
padding: 0 8px;
}

1
app/src/boot/onGetConfig.ts
View file

@ -84,6 +84,7 @@ export const onGetConfig = (isStart: boolean, app: App) => {
adjustLayout();
resizeTabs();
resizeTopBar();
window.siyuan.menus.menu.resetPosition();
firstResize = true;
}, 200);
});

20
app/src/menus/Menu.ts
View file

@ -146,7 +146,25 @@ export class Menu {
this.element.style.zIndex = (++window.siyuan.zIndex).toString();
this.element.classList.remove("fn__none");
setPosition(this.element, options.x - (options.isLeft ? this.element.clientWidth : 0), options.y, options.h, options.w);
this.element.style.setProperty("--b3-menu-position-top", this.element.style.top);
const menuTop = parseInt(this.element.style.top) || options.y;
const availableHeight = window.innerHeight - menuTop - Constants.SIZE_TOOLBAR_HEIGHT;
(this.element.lastElementChild as HTMLElement).style.maxHeight = Math.max(availableHeight, 0) + "px";
}
public resetPosition() {
if (this.element.classList.contains("fn__none")) {
return;
}
setPosition(this.element, parseInt(this.element.style.left) || 0, parseInt(this.element.style.top) || 0, 0, 0);
const menuTop = parseInt(this.element.style.top) || 0;
const availableHeight = window.innerHeight - menuTop - Constants.SIZE_TOOLBAR_HEIGHT;
(this.element.lastElementChild as HTMLElement).style.maxHeight = Math.max(availableHeight, 0) + "px";
const showSubMenus = this.element.querySelectorAll(".b3-menu__item--show .b3-menu__submenu");
showSubMenus.forEach((subMenuElement) => {
this.showSubMenu(subMenuElement as HTMLElement);
});
}
public fullscreen(position: "bottom" | "all" = "all") {

26
app/src/util/setPosition.ts
View file

@ -4,20 +4,26 @@ export const setPosition = (element: HTMLElement, x: number, y: number, targetHe
element.style.top = y + "px";
element.style.left = x + "px";
const rect = element.getBoundingClientRect();
// 上下超出屏幕
// 垂直方向调整
if (rect.bottom > window.innerHeight || rect.top < Constants.SIZE_TOOLBAR_HEIGHT) {
const top = y - rect.height - targetHeight;
if (top > Constants.SIZE_TOOLBAR_HEIGHT && (top + rect.height) < window.innerHeight) {
// 上部
element.style.top = top + "px";
} else if (top <= Constants.SIZE_TOOLBAR_HEIGHT) {
// 位置超越到屏幕上方外时，需移动到屏幕顶部。eg：光标在第一个块，然后滚动到上方看不见的位置，按 ctrl+a
element.style.top = Constants.SIZE_TOOLBAR_HEIGHT + "px";
const bottomSpace = window.innerHeight - y;
const topSpace = y - Constants.SIZE_TOOLBAR_HEIGHT;
if (bottomSpace >= rect.height) {
// 如果下方空间足够，直接使用原位置
element.style.top = y + "px";
} else if (topSpace >= rect.height) {
// 如果上方空间足够，向上调整
element.style.top = (y - rect.height - targetHeight) + "px";
} else {
// 依旧展现在下部，只是位置上移
element.style.top = Math.max(Constants.SIZE_TOOLBAR_HEIGHT, window.innerHeight - rect.height) + "px";
// 如果上下空间都不够，优先展现在下部
const maxTop = Math.max(Constants.SIZE_TOOLBAR_HEIGHT, window.innerHeight - rect.height);
element.style.top = maxTop + "px";
}
}
// 水平方向调整
if (rect.right > window.innerWidth) {
// 展现在左侧
element.style.left = `${window.innerWidth - rect.width - targetLeft}px`;

1
app/src/window/init.ts
View file

@ -61,6 +61,7 @@ export const init = (app: App) => {
resizeTimeout = window.setTimeout(() => {
adjustLayout(window.siyuan.layout.centerLayout);
resizeTabs();
window.siyuan.menus.menu.resetPosition();
}, 200);
});
};