diff --git a/app/src/assets/scss/business/_block.scss b/app/src/assets/scss/business/_block.scss index 2299f82c1..01ffb1b6d 100644 --- a/app/src/assets/scss/business/_block.scss +++ b/app/src/assets/scss/business/_block.scss @@ -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 { diff --git a/app/src/block/Panel.ts b/app/src/block/Panel.ts index de1ee1ead..58d60c49f 100644 --- a/app/src/block/Panel.ts +++ b/app/src/block/Panel.ts @@ -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"; } } diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts index c94fac404..ec110e139 100644 --- a/app/src/protyle/index.ts +++ b/app/src/protyle/index.ts @@ -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); + } + }); }); } diff --git a/app/src/protyle/util/onGet.ts b/app/src/protyle/util/onGet.ts index a2b5ad1de..8a5934527 100644 --- a/app/src/protyle/util/onGet.ts +++ b/app/src/protyle/util/onGet.ts @@ -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); });