diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts index 976052047..d54db0ae1 100644 --- a/app/src/menus/Menu.ts +++ b/app/src/menus/Menu.ts @@ -34,28 +34,32 @@ export class Menu { return; } itemElement.classList.add("b3-menu__item--show"); - const rect = subMenuElement.getBoundingClientRect(); - let style = ""; - const leftPosition = rect.left - this.element.clientWidth - rect.width; - if (rect.right > window.innerWidth && ( - leftPosition > 0 || Math.abs(leftPosition) < (rect.right - window.innerWidth))) { - if (leftPosition >= 0) { - style = "left:auto;right:100%;"; - } else { - style = `z-index:1;mix-blend-mode: normal;left:-${this.element.style.left};`; - } - } else if (rect.right > window.innerWidth) { - style = `z-index:1;mix-blend-mode: normal;left:${window.innerWidth - rect.width - this.element.offsetLeft}px;`; - } - if (rect.bottom > window.innerHeight) { - style += `top: auto;bottom:-5px;max-height:${Math.min(rect.top, window.innerHeight * 0.4)}px`; - } - if (style) { - subMenuElement.setAttribute("style", style); - } + this.showSubMenu(subMenuElement); }); } + public showSubMenu(subMenuElement: Element) { + const rect = subMenuElement.getBoundingClientRect(); + let style = ""; + const leftPosition = rect.left - this.element.clientWidth - rect.width; + if (rect.right > window.innerWidth && ( + leftPosition > 0 || Math.abs(leftPosition) < (rect.right - window.innerWidth))) { + if (leftPosition >= 0) { + style = "left:auto;right:100%;"; + } else { + style = `z-index:1;mix-blend-mode: normal;left:-${this.element.style.left};`; + } + } else if (rect.right > window.innerWidth) { + style = `z-index:1;mix-blend-mode: normal;left:${window.innerWidth - rect.width - this.element.offsetLeft}px;`; + } + if (rect.bottom > window.innerHeight) { + style += `top: auto;bottom:-5px;max-height:${Math.min(rect.top, window.innerHeight * 0.4)}px`; + } + if (style) { + subMenuElement.setAttribute("style", style); + } + } + private preventDefault(event: KeyboardEvent) { if (!hasClosestByClassName(event.target as Element, "b3-menu")) { event.preventDefault(); diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts index 11ea7f02d..da71b0a31 100644 --- a/app/src/protyle/hint/index.ts +++ b/app/src/protyle/hint/index.ts @@ -605,7 +605,9 @@ ${unicode2Emoji(emoji.unicode, true)}`; x: rect.left, y: rect.top }, true); - window.siyuan.menus.menu.element.querySelector('[data-id="assetSubMenu"]').classList.add("b3-menu__item--show"); + const itemElement = window.siyuan.menus.menu.element.querySelector('[data-id="assetSubMenu"]') + itemElement.classList.add("b3-menu__item--show"); + window.siyuan.menus.menu.showSubMenu(itemElement.querySelector(".b3-menu__submenu")); window.siyuan.menus.menu.element.querySelectorAll("input")[0].focus(); } else if (value === "---") { focusBlock(nodeElement);