This commit is contained in:
Vanessa 2023-07-18 23:46:08 +08:00
parent 4c59af49c4
commit 11764557ac
4 changed files with 55 additions and 32 deletions

View file

@ -12,7 +12,7 @@
top: -100px;
display: flex;
flex-direction: column;
min-height: 160px;
min-height: 197px;
border: 1px solid var(--b3-theme-surface-lighter);
&--open {

View file

@ -145,7 +145,7 @@ export class BlockPanel {
this.render();
}
private initProtyle(editorElement: HTMLElement) {
private initProtyle(editorElement: HTMLElement, afterCB?: () => void) {
const index = parseInt(editorElement.getAttribute("data-index"));
fetchPost("/api/block/getBlockInfo", {id: this.nodeIds[index]}, (response) => {
if (response.code === 3) {
@ -182,6 +182,9 @@ export class BlockPanel {
if (response.data.rootID !== this.nodeIds[index]) {
editor.protyle.breadcrumb.element.parentElement.lastElementChild.classList.remove("fn__none");
}
if (afterCB) {
afterCB();
}
}
});
this.editors.push(editor);
@ -251,7 +254,40 @@ export class BlockPanel {
});
this.element.querySelectorAll(".block__edit").forEach((item: HTMLElement, index) => {
if (index < 5) {
this.initProtyle(item);
this.initProtyle(item, index === 0 ? () => {
let targetRect;
if (this.targetElement && this.targetElement.classList.contains("protyle-wysiwyg__embed")) {
targetRect = this.targetElement.getBoundingClientRect();
// 嵌入块过长时,单击弹出的悬浮窗位置居下 https://ld246.com/article/1634292738717
let top = targetRect.top;
const contentElement = hasClosestByClassName(this.targetElement, "protyle-content", true);
if (contentElement) {
const contentRectTop = contentElement.getBoundingClientRect().top;
if (targetRect.top < contentRectTop) {
top = contentRectTop;
}
}
// 单击嵌入块悬浮窗的位置最好是覆盖嵌入块
setPosition(this.element, targetRect.left, Math.max(top - 84, Constants.SIZE_TOOLBAR_HEIGHT), 0, 8);
} else if (this.targetElement) {
if (this.targetElement.classList.contains("pdf__rect")) {
targetRect = this.targetElement.firstElementChild.getBoundingClientRect();
} else {
targetRect = this.targetElement.getBoundingClientRect();
}
// 靠边不宜拖拽 https://github.com/siyuan-note/siyuan/issues/2937
setPosition(this.element, targetRect.left, targetRect.bottom + 4, targetRect.height + 12, 8);
} else if (typeof this.x === "number" && typeof this.y === "number") {
setPosition(this.element, this.x, this.y);
}
const elementRect = this.element.getBoundingClientRect();
if (this.targetElement && elementRect.top < targetRect.top) {
this.element.style.maxHeight = (targetRect.top - elementRect.top - 8) + "px";
} else {
this.element.style.maxHeight = (window.innerHeight - elementRect.top - 8) + "px";
}
this.element.classList.add("block__popover--open");
} : undefined);
} else {
observer.observe(item);
}
@ -259,32 +295,5 @@ export class BlockPanel {
if (this.targetElement) {
this.targetElement.style.cursor = "";
}
this.element.classList.add("block__popover--open");
let targetRect;
if (this.targetElement && this.targetElement.classList.contains("protyle-wysiwyg__embed")) {
targetRect = this.targetElement.getBoundingClientRect();
// 嵌入块过长时,单击弹出的悬浮窗位置居下 https://ld246.com/article/1634292738717
let top = targetRect.top;
const contentElement = hasClosestByClassName(this.targetElement, "protyle-content", true);
if (contentElement) {
const contentRectTop = contentElement.getBoundingClientRect().top;
if (targetRect.top < contentRectTop) {
top = contentRectTop;
}
}
// 单击嵌入块悬浮窗的位置最好是覆盖嵌入块
setPosition(this.element, targetRect.left, Math.max(top - 84, Constants.SIZE_TOOLBAR_HEIGHT), 0, 8);
} else if (this.targetElement) {
if (this.targetElement.classList.contains("pdf__rect")) {
targetRect = this.targetElement.firstElementChild.getBoundingClientRect();
} else {
targetRect = this.targetElement.getBoundingClientRect();
}
// 靠边不宜拖拽 https://github.com/siyuan-note/siyuan/issues/2937
setPosition(this.element, targetRect.left, targetRect.top + targetRect.height + 4, targetRect.height + 12, 8);
} else if (typeof this.x === "number" && typeof this.y === "number") {
setPosition(this.element, this.x, this.y);
}
this.element.style.maxHeight = (window.innerHeight - this.element.getBoundingClientRect().top - 8) + "px";
}
}

View file

@ -268,8 +268,14 @@ export class Protyle {
mode: (mergedOptions.action && mergedOptions.action.includes(Constants.CB_GET_CONTEXT)) ? 3 : 0,
size: mergedOptions.action?.includes(Constants.CB_GET_ALL) ? Constants.SIZE_GET_MAX : window.siyuan.config.editor.dynamicLoadBlocks,
}, getResponse => {
onGet({data: getResponse, protyle: this.protyle, action: mergedOptions.action});
this.afterOnGet(mergedOptions);
onGet({
data: getResponse,
protyle: this.protyle,
action: mergedOptions.action,
afterCB: () => {
this.afterOnGet(mergedOptions);
}
});
});
}

View file

@ -23,6 +23,7 @@ export const onGet = (options: {
protyle: IProtyle,
action?: string[],
scrollAttr?: IScrollAttr
afterCB?: () => void
}) => {
if (!options.action) {
options.action = [];
@ -78,6 +79,7 @@ export const onGet = (options: {
action: options.action,
scrollAttr: options.scrollAttr,
isSyncing: options.data.data.isSyncing,
afterCB: options.afterCB,
}, options.protyle);
removeLoading(options.protyle);
return;
@ -100,6 +102,7 @@ export const onGet = (options: {
action: options.action,
scrollAttr: options.scrollAttr,
isSyncing: options.data.data.isSyncing,
afterCB: options.afterCB,
}, options.protyle);
setTitle(response.data.ial.title);
removeLoading(options.protyle);
@ -112,6 +115,7 @@ const setHTML = (options: {
isSyncing: boolean,
expand: boolean,
scrollAttr?: IScrollAttr
afterCB?: () => void
}, protyle: IProtyle) => {
if (protyle.contentElement.classList.contains("fn__none") && protyle.wysiwyg.element.innerHTML !== "") {
return;
@ -263,6 +267,7 @@ const setHTML = (options: {
onGet({data: getResponse, protyle, action: [Constants.CB_GET_APPEND, Constants.CB_GET_UNCHANGEID]});
});
}
if (options.action.includes(Constants.CB_GET_APPEND) || options.action.includes(Constants.CB_GET_BEFORE)) {
return;
}
@ -270,6 +275,9 @@ const setHTML = (options: {
protyle.breadcrumb.toggleExit(!options.action.includes(Constants.CB_GET_ALL));
protyle.breadcrumb.render(protyle);
}
if (options.afterCB) {
options.afterCB();
}
protyle.app.plugins.forEach(item => {
item.eventBus.emit("loaded-protyle", protyle);
});