Vanessa 2022-08-02 11:13:11 +08:00
parent 7881d97e84
commit 0e23e2c04b
12 changed files with 39 additions and 53 deletions

View file

@ -199,10 +199,8 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
</div> </div>
</div>`; </div>`;
window.siyuan.menus.menu.element.firstElementChild.querySelector(".emojis__item").classList.add("emojis__item--current"); window.siyuan.menus.menu.element.firstElementChild.querySelector(".emojis__item").classList.add("emojis__item--current");
window.siyuan.menus.menu.element.classList.remove("fn__none");
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + rect.height); window.siyuan.menus.menu.popup({x: rect.left, y: rect.top + rect.height})
const inputElement = window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement; const inputElement = window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement;
const emojisContentElement = window.siyuan.menus.menu.element.querySelector(".emojis__panel"); const emojisContentElement = window.siyuan.menus.menu.element.querySelector(".emojis__panel");
inputElement.addEventListener("compositionend", () => { inputElement.addEventListener("compositionend", () => {

View file

@ -124,7 +124,6 @@ export class Inbox extends Model {
}).element); }).element);
} }
}); });
window.siyuan.menus.menu.element.classList.remove("fn__none");
window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
break; break;
case "back": case "back":
@ -215,7 +214,6 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
}); });
} }
}).element); }).element);
window.siyuan.menus.menu.element.classList.remove("fn__none");
window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
} }

View file

@ -66,9 +66,9 @@ export class Menu {
this.element.append(element); this.element.append(element);
} }
public popup(options: { x: number, y: number }) { public popup(options: { x: number, y: number, h?: number }, isLeft = false) {
this.element.classList.remove("fn__none"); this.element.classList.remove("fn__none");
setPosition(this.element, options.x, options.y); setPosition(this.element, options.x - (isLeft ? window.siyuan.menus.menu.element.clientWidth : 0), options.y, options.h);
} }
} }

View file

@ -266,9 +266,8 @@ export const openFileAttr = (attrs: IObject, id: string, focusName = "bookmark")
}).element); }).element);
}); });
} }
window.siyuan.menus.menu.element.classList.remove("fn__none");
window.siyuan.menus.menu.element.style.zIndex = "310"; window.siyuan.menus.menu.element.style.zIndex = "310";
setPosition(window.siyuan.menus.menu.element, event.clientX, event.clientY + 16); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16})
}); });
break; break;
} }
@ -466,9 +465,8 @@ export const openAttr = (nodeElement: Element, protyle: IProtyle, focusName = "b
}).element); }).element);
}); });
} }
window.siyuan.menus.menu.element.classList.remove("fn__none");
window.siyuan.menus.menu.element.style.zIndex = "310"; window.siyuan.menus.menu.element.style.zIndex = "310";
setPosition(window.siyuan.menus.menu.element, event.clientX, event.clientY + 16); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16})
}); });
break; break;
} }

View file

@ -228,7 +228,12 @@ export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
focusByWbr(nodeElement, protyle.toolbar.range); focusByWbr(nodeElement, protyle.toolbar.range);
} }
}).element); }).element);
window.siyuan.menus.menu.element.classList.remove("fn__none"); const rect = element.getBoundingClientRect();
window.siyuan.menus.menu.popup({
x: rect.left,
y: rect.top + 13,
h: 26
})
window.siyuan.menus.menu.element.querySelector("input").select(); window.siyuan.menus.menu.element.querySelector("input").select();
}; };
@ -761,7 +766,12 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
if (linkAddress) { if (linkAddress) {
openMenu(linkAddress); openMenu(linkAddress);
} }
window.siyuan.menus.menu.element.classList.remove("fn__none"); const rect = linkElement.getBoundingClientRect();
window.siyuan.menus.menu.popup({
x: rect.left,
y: rect.top + 13,
h: 26
})
if (focusText || protyle.lute.IsValidLinkDest(linkAddress)) { if (focusText || protyle.lute.IsValidLinkDest(linkAddress)) {
window.siyuan.menus.menu.element.querySelectorAll("input")[1].select(); window.siyuan.menus.menu.element.querySelectorAll("input")[1].select();
} else { } else {

View file

@ -170,8 +170,7 @@ export class Gutter {
openAttr(protyle.wysiwyg.element.querySelector(`[data-node-id="${id}"]`), protyle); openAttr(protyle.wysiwyg.element.querySelector(`[data-node-id="${id}"]`), protyle);
} else { } else {
this.renderMenu(protyle, buttonElement); this.renderMenu(protyle, buttonElement);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({x: event.clientX - 16, y: event.clientY - 16}, true)
setPosition(window.siyuan.menus.menu.element, event.clientX - window.siyuan.menus.menu.element.clientWidth - 16, event.clientY - 16);
// https://ld246.com/article/1648433751993 // https://ld246.com/article/1648433751993
if (!protyle.toolbar.range) { if (!protyle.toolbar.range) {
protyle.toolbar.range = getEditorRange(protyle.wysiwyg.element.firstElementChild); protyle.toolbar.range = getEditorRange(protyle.wysiwyg.element.firstElementChild);
@ -186,8 +185,7 @@ export class Gutter {
} }
if (!window.siyuan.ctrlIsPressed && !window.siyuan.altIsPressed && !window.siyuan.shiftIsPressed) { if (!window.siyuan.ctrlIsPressed && !window.siyuan.altIsPressed && !window.siyuan.shiftIsPressed) {
this.renderMenu(protyle, buttonElement); this.renderMenu(protyle, buttonElement);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({x: event.clientX - 16, y: event.clientY - 16}, true)
setPosition(window.siyuan.menus.menu.element, event.clientX - window.siyuan.menus.menu.element.clientWidth - 16, event.clientY - 16);
} }
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();

View file

@ -422,9 +422,8 @@ export class Background {
} }
this.addTags(listItemElement.textContent); this.addTags(listItemElement.textContent);
}); });
window.siyuan.menus.menu.element.classList.remove("fn__none");
const rect = this.iconElement.nextElementSibling.getBoundingClientRect(); const rect = this.iconElement.nextElementSibling.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + rect.height); window.siyuan.menus.menu.popup({x: rect.left, y: rect.top + rect.height})
inputElement.focus(); inputElement.focus();
}); });
} }

View file

@ -192,8 +192,7 @@ export class Title {
focusByRange(range); focusByRange(range);
} }
}).element); }).element);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY})
setPosition(window.siyuan.menus.menu.element, event.clientX, event.clientY);
}); });
this.element.querySelector(".protyle-attr").addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => { this.element.querySelector(".protyle-attr").addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
fetchPost("/api/block/getDocInfo", { fetchPost("/api/block/getDocInfo", {

View file

@ -601,9 +601,11 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
highlightRender(nodeElement); highlightRender(nodeElement);
} else if (value.startsWith("<iframe") || value.startsWith("<video") || value.startsWith("<audio")) { } else if (value.startsWith("<iframe") || value.startsWith("<video") || value.startsWith("<audio")) {
protyle.gutter.renderMenu(protyle, nodeElement); protyle.gutter.renderMenu(protyle, nodeElement);
window.siyuan.menus.menu.element.classList.remove("fn__none");
const rect = nodeElement.getBoundingClientRect(); const rect = nodeElement.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left - window.siyuan.menus.menu.element.clientWidth, rect.top); window.siyuan.menus.menu.popup({
x: rect.left,
y: rect.top
}, true)
window.siyuan.menus.menu.element.querySelector('[data-id="assetSubMenu"]').classList.add("b3-menu__item--show"); window.siyuan.menus.menu.element.querySelector('[data-id="assetSubMenu"]').classList.add("b3-menu__item--show");
window.siyuan.menus.menu.element.querySelectorAll("input")[0].focus(); window.siyuan.menus.menu.element.querySelectorAll("input")[0].focus();
} else if (value === "---") { } else if (value === "---") {

View file

@ -272,8 +272,6 @@ export class Toolbar {
if (type === "link") { if (type === "link") {
this.element.classList.add("fn__none"); this.element.classList.add("fn__none");
linkMenu(protyle, this.range.startContainer.parentElement); linkMenu(protyle, this.range.startContainer.parentElement);
const rect = this.range.startContainer.parentElement.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + 13, 26);
} }
return; return;
} }
@ -334,8 +332,6 @@ export class Toolbar {
if (types.length > 0 && types.includes("link") && action === "range") { if (types.length > 0 && types.includes("link") && action === "range") {
// 链接快捷键不应取消,应该显示链接信息 // 链接快捷键不应取消,应该显示链接信息
linkMenu(protyle, this.range.startContainer.parentElement); linkMenu(protyle, this.range.startContainer.parentElement);
const rect = this.range.startContainer.parentElement.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + 13, 26);
return; return;
} }
const wbrElement = document.createElement("wbr"); const wbrElement = document.createElement("wbr");
@ -515,8 +511,6 @@ export class Toolbar {
} }
if (needShowLink) { if (needShowLink) {
linkMenu(protyle, newElement as HTMLElement, focusText); linkMenu(protyle, newElement as HTMLElement, focusText);
const rect = newElement.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + 13, 26);
} }
} }
} }

View file

@ -427,8 +427,7 @@ export class WYSIWYG {
// 多选块 // 多选块
hideElements(["util"], protyle); hideElements(["util"], protyle);
protyle.gutter.renderMenu(protyle, selectElements[0]); protyle.gutter.renderMenu(protyle, selectElements[0]);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY})
setPosition(window.siyuan.menus.menu.element, event.clientX, event.clientY);
return; return;
} }
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
@ -438,8 +437,7 @@ export class WYSIWYG {
focusSideBlock(embedElement); focusSideBlock(embedElement);
} }
protyle.gutter.renderMenu(protyle, embedElement); protyle.gutter.renderMenu(protyle, embedElement);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY})
setPosition(window.siyuan.menus.menu.element, event.clientX, event.clientY);
return false; return false;
} }
if (protyle.disabled) { if (protyle.disabled) {
@ -449,8 +447,6 @@ export class WYSIWYG {
const type = target.getAttribute("data-type"); const type = target.getAttribute("data-type");
if (type === "block-ref") { if (type === "block-ref") {
refMenu(protyle, target); refMenu(protyle, target);
const rect = target.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + 13, 26);
// 阻止 popover // 阻止 popover
target.setAttribute("prevent-popover", "true"); target.setAttribute("prevent-popover", "true");
setTimeout(() => { setTimeout(() => {
@ -464,8 +460,6 @@ export class WYSIWYG {
} }
if (type === "a") { if (type === "a") {
linkMenu(protyle, target); linkMenu(protyle, target);
const rect = target.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + 13, 26);
if (target.getAttribute("data-href")?.startsWith("siyuan://blocks")) { if (target.getAttribute("data-href")?.startsWith("siyuan://blocks")) {
// 阻止 popover // 阻止 popover
target.setAttribute("prevent-popover", "true"); target.setAttribute("prevent-popover", "true");
@ -490,8 +484,7 @@ export class WYSIWYG {
(isMobile() || beforeContextmenuRange && nodeElement.contains(beforeContextmenuRange.startContainer))) { (isMobile() || beforeContextmenuRange && nodeElement.contains(beforeContextmenuRange.startContainer))) {
if (!isMobile() || protyle.toolbar?.element.classList.contains("fn__none")) { if (!isMobile() || protyle.toolbar?.element.classList.contains("fn__none")) {
contentMenu(protyle, nodeElement); contentMenu(protyle, nodeElement);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 13, h: 26})
setPosition(window.siyuan.menus.menu.element, event.clientX, event.clientY + 13, 26);
protyle.toolbar?.element.classList.add("fn__none"); protyle.toolbar?.element.classList.add("fn__none");
if (nodeElement.classList.contains("table")) { if (nodeElement.classList.contains("table")) {
nodeElement.querySelector("table").classList.remove("select"); nodeElement.querySelector("table").classList.remove("select");
@ -501,8 +494,7 @@ export class WYSIWYG {
} else if (protyle.toolbar.range.toString() === "") { } else if (protyle.toolbar.range.toString() === "") {
hideElements(["util"], protyle); hideElements(["util"], protyle);
protyle.gutter.renderMenu(protyle, nodeElement); protyle.gutter.renderMenu(protyle, nodeElement);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY})
setPosition(window.siyuan.menus.menu.element, event.clientX, event.clientY);
protyle.toolbar?.element.classList.add("fn__none"); protyle.toolbar?.element.classList.add("fn__none");
} }
}); });
@ -1140,8 +1132,7 @@ export class WYSIWYG {
} }
} }
}).element); }).element);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({x: mouseUpEvent.clientX - 8, y: mouseUpEvent.clientY - 16})
setPosition(window.siyuan.menus.menu.element, mouseUpEvent.clientX - 8, mouseUpEvent.clientY - 16);
} }
} }
@ -1575,9 +1566,11 @@ export class WYSIWYG {
const menuElement = hasClosestByClassName(event.target, "protyle-action__menu"); const menuElement = hasClosestByClassName(event.target, "protyle-action__menu");
if (menuElement && !protyle.disabled) { if (menuElement && !protyle.disabled) {
protyle.gutter.renderMenu(protyle, menuElement.parentElement.parentElement); protyle.gutter.renderMenu(protyle, menuElement.parentElement.parentElement);
window.siyuan.menus.menu.element.classList.remove("fn__none");
const rect = menuElement.getBoundingClientRect(); const rect = menuElement.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left - window.siyuan.menus.menu.element.clientWidth, rect.top); window.siyuan.menus.menu.popup({
x: rect.left,
y: rect.top
}, true)
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
return; return;
@ -1666,8 +1659,10 @@ export class WYSIWYG {
updateTransaction(protyle, actionElement.parentElement.getAttribute("data-node-id"), actionElement.parentElement.outerHTML, html); updateTransaction(protyle, actionElement.parentElement.getAttribute("data-node-id"), actionElement.parentElement.outerHTML, html);
} else { } else {
protyle.gutter.renderMenu(protyle, actionElement.parentElement); protyle.gutter.renderMenu(protyle, actionElement.parentElement);
window.siyuan.menus.menu.element.classList.remove("fn__none"); window.siyuan.menus.menu.popup({
setPosition(window.siyuan.menus.menu.element, event.clientX - window.siyuan.menus.menu.element.clientWidth - 16, event.clientY - 16); x: event.clientX - 16,
y: event.clientY - 16
}, true)
} }
} }
} }

View file

@ -513,16 +513,12 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
const type = inlineElement.getAttribute("data-type"); const type = inlineElement.getAttribute("data-type");
if (type === "block-ref") { if (type === "block-ref") {
refMenu(protyle, inlineElement); refMenu(protyle, inlineElement);
const rect = inlineElement.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + 13, 26);
return; return;
} else if (type === "file-annotation-ref") { } else if (type === "file-annotation-ref") {
protyle.toolbar.showFileAnnotationRef(protyle, inlineElement); protyle.toolbar.showFileAnnotationRef(protyle, inlineElement);
return; return;
} else if (type === "a") { } else if (type === "a") {
linkMenu(protyle, inlineElement); linkMenu(protyle, inlineElement);
const rect = inlineElement.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left, rect.top + 13, 26);
return; return;
} }
} }
@ -544,9 +540,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
actionElement = selectElements[0] as HTMLElement; actionElement = selectElements[0] as HTMLElement;
} }
protyle.gutter.renderMenu(protyle, actionElement); protyle.gutter.renderMenu(protyle, actionElement);
window.siyuan.menus.menu.element.classList.remove("fn__none");
const rect = nodeElement.getBoundingClientRect(); const rect = nodeElement.getBoundingClientRect();
setPosition(window.siyuan.menus.menu.element, rect.left - window.siyuan.menus.menu.element.clientWidth, rect.top); window.siyuan.menus.menu.popup({x: rect.left, y: rect.top}, true)
return; return;
} }