diff --git a/app/src/asset/index.ts b/app/src/asset/index.ts index ffc27bdf6..02eeade04 100644 --- a/app/src/asset/index.ts +++ b/app/src/asset/index.ts @@ -503,7 +503,7 @@ export class Asset extends Model { /// #if !BROWSER setModelsHash(); /// #endif - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); /// #endif } } diff --git a/app/src/constants.ts b/app/src/constants.ts index 0bc967adc..8a0ec171c 100644 --- a/app/src/constants.ts +++ b/app/src/constants.ts @@ -85,10 +85,9 @@ export abstract class Constants { // timeout public static readonly TIMEOUT_DBLCLICK = 190; - public static readonly TIMEOUT_SEARCH = 300; public static readonly TIMEOUT_INPUT = 256; - public static readonly TIMEOUT_BLOCKLOAD = 300; - public static readonly TIMEOUT_TRANSITION = 150; + public static readonly TIMEOUT_LOAD = 300; + public static readonly TIMEOUT_TRANSITION = 300; // id public static readonly HELP_PATH = { diff --git a/app/src/editor/util.ts b/app/src/editor/util.ts index 0352383fe..2856ed79a 100644 --- a/app/src/editor/util.ts +++ b/app/src/editor/util.ts @@ -434,48 +434,56 @@ const newTab = (options: IOpenFileOptions) => { return tab; }; -export const updatePanelByEditor = (protyle?: IProtyle, focus = true, pushBackStack = false, reload = false) => { +export const updatePanelByEditor = (options: { + protyle?: IProtyle, + focus: boolean, + pushBackStack: boolean, + reload: boolean, + resize: boolean +}) => { let title = window.siyuan.languages.siyuanNote; - if (protyle && protyle.path) { + if (options.protyle && options.protyle.path) { // https://ld246.com/article/1637636106054/comment/1641485541929#comments - if (protyle.element.classList.contains("fn__none") || - (!hasClosestByClassName(protyle.element, "layout__wnd--active") && + if (options.protyle.element.classList.contains("fn__none") || + (!hasClosestByClassName(options.protyle.element, "layout__wnd--active") && document.querySelector(".layout__wnd--active") // https://github.com/siyuan-note/siyuan/issues/4414 ) ) { return; } - title = protyle.title.editElement.textContent; - resize(protyle); + title = options.protyle.title.editElement.textContent; + if (options.resize) { + resize(options.protyle); + } if (focus) { - if (protyle.toolbar.range) { - focusByRange(protyle.toolbar.range); - countSelectWord(protyle.toolbar.range, protyle.block.rootID); - if (pushBackStack && protyle.preview.element.classList.contains("fn__none")) { - pushBack(protyle, protyle.toolbar.range); + if (options.protyle.toolbar.range) { + focusByRange(options.protyle.toolbar.range); + countSelectWord(options.protyle.toolbar.range, options.protyle.block.rootID); + if (options.pushBackStack && options.protyle.preview.element.classList.contains("fn__none")) { + pushBack(options.protyle, options.protyle.toolbar.range); } } else { - focusBlock(protyle.wysiwyg.element.firstElementChild); - if (pushBackStack && protyle.preview.element.classList.contains("fn__none")) { - pushBack(protyle, undefined, protyle.wysiwyg.element.firstElementChild); + focusBlock(options.protyle.wysiwyg.element.firstElementChild); + if (options.pushBackStack && options.protyle.preview.element.classList.contains("fn__none")) { + pushBack(options.protyle, undefined, options.protyle.wysiwyg.element.firstElementChild); } - countBlockWord([], protyle.block.rootID); + countBlockWord([], options.protyle.block.rootID); } } - if (window.siyuan.config.fileTree.alwaysSelectOpenedFile && protyle) { + if (window.siyuan.config.fileTree.alwaysSelectOpenedFile && options.protyle) { const fileModel = getDockByType("file")?.data.file; if (fileModel instanceof Files) { - const target = fileModel.element.querySelector(`li[data-path="${protyle.path}"]`); + const target = fileModel.element.querySelector(`li[data-path="${options.protyle.path}"]`); if (!target || (target && !target.classList.contains("b3-list-item--focus"))) { - fileModel.selectItem(protyle.notebookId, protyle.path); + fileModel.selectItem(options.protyle.notebookId, options.protyle.path); } } } } // 切换页签或关闭所有页签时，需更新对应的面板 const models = getAllModels(); - updateOutline(models, protyle, reload); - updateBacklinkGraph(models, protyle); + updateOutline(models, options.protyle, options.reload); + updateBacklinkGraph(models, options.protyle); setTitle(title); }; diff --git a/app/src/layout/Tab.ts b/app/src/layout/Tab.ts index f387b4b37..d8f298ada 100644 --- a/app/src/layout/Tab.ts +++ b/app/src/layout/Tab.ts @@ -102,7 +102,7 @@ export class Tab { (event.clientX < 0 || event.clientY < 0 || event.clientX > window.innerWidth || event.clientY > window.innerHeight)) { openNewWindow(this); } - }, Constants.TIMEOUT_BLOCKLOAD); // 等待主进程发送关闭消息 + }, Constants.TIMEOUT_LOAD); // 等待主进程发送关闭消息 /// #endif window.siyuan.dragElement = undefined; if (event.dataTransfer.dropEffect === "none") { diff --git a/app/src/layout/Wnd.ts b/app/src/layout/Wnd.ts index ac9294f93..5b54237e5 100644 --- a/app/src/layout/Wnd.ts +++ b/app/src/layout/Wnd.ts @@ -484,10 +484,22 @@ export class Wnd { } // focusin 触发前，layout__wnd--active 和 tab 已设置，需在调用里面更新 if (update) { - updatePanelByEditor(currentTab.model.editor.protyle, true, pushBack); + updatePanelByEditor({ + protyle: currentTab.model.editor.protyle, + focus: true, + pushBackStack: pushBack, + reload: false, + resize: true, + }); } } else { - updatePanelByEditor(undefined, false); + updatePanelByEditor({ + protyle: undefined, + focus: false, + pushBackStack: false, + reload: false, + resize: true, + }); } } @@ -685,12 +697,24 @@ export class Wnd { // 关闭分屏页签后光标消失 const editors = getAllModels().editor; if (editors.length === 0) { - updatePanelByEditor(); + updatePanelByEditor({ + protyle: undefined, + focus: true, + pushBackStack: false, + reload: false, + resize: true, + }); } else { editors.forEach(item => { if (!item.element.classList.contains("fn__none")) { setPanelFocus(item.parent.parent.headersElement.parentElement.parentElement); - updatePanelByEditor(item.editor.protyle, true, true); + updatePanelByEditor({ + protyle: item.editor.protyle, + focus: true, + pushBackStack: true, + reload: false, + resize: true, + }); return; } }); @@ -719,7 +743,7 @@ export class Wnd { item.headElement.setAttribute("style", "max-width: 0px;"); setTimeout(() => { item.headElement.remove(); - }, Constants.TIMEOUT_TRANSITION); + }, 200); } else { item.headElement.remove(); } diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts index 941846d02..95c8ced76 100644 --- a/app/src/layout/dock/Backlink.ts +++ b/app/src/layout/dock/Backlink.ts @@ -641,6 +641,6 @@ export class Backlink extends Model { setTimeout(() => { this.tree.element.scrollTop = this.status[this.blockId].scrollTop; this.mTree.element.scrollTop = this.status[this.blockId].mScrollTop; - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); } } diff --git a/app/src/layout/util.ts b/app/src/layout/util.ts index bd4572280..b4571227e 100644 --- a/app/src/layout/util.ts +++ b/app/src/layout/util.ts @@ -400,7 +400,7 @@ export const JSONToLayout = (app: App, isStart: boolean) => { action: idZoomIn.isZoomIn ? [Constants.CB_GET_ALL, Constants.CB_GET_FOCUS] : [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT], zoomIn: idZoomIn.isZoomIn }); - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); } }; diff --git a/app/src/mobile/menu/search.ts b/app/src/mobile/menu/search.ts index 5716fb1e1..3ce6da4f7 100644 --- a/app/src/mobile/menu/search.ts +++ b/app/src/mobile/menu/search.ts @@ -242,7 +242,7 @@ const updateSearchResult = (config: ISearchOption, element: Element) => { } }); } - }, Constants.TIMEOUT_SEARCH); + }, Constants.TIMEOUT_INPUT); }; const initSearchEvent = (element: Element, config: ISearchOption) => { diff --git a/app/src/protyle/export/util.ts b/app/src/protyle/export/util.ts index 40aa471af..fd6623793 100644 --- a/app/src/protyle/export/util.ts +++ b/app/src/protyle/export/util.ts @@ -69,7 +69,7 @@ export const exportImage = (id: string) => { }); }); }); - }, Constants.TIMEOUT_TRANSITION); + }, Constants.TIMEOUT_LOAD); }); const previewElement = exportDialog.element.querySelector("#preview") as HTMLElement; const foldElement = (exportDialog.element.querySelector("#keepFold") as HTMLInputElement); diff --git a/app/src/protyle/header/Title.ts b/app/src/protyle/header/Title.ts index ac4e417bd..afc4d9a20 100644 --- a/app/src/protyle/header/Title.ts +++ b/app/src/protyle/header/Title.ts @@ -60,7 +60,13 @@ export class Title { this.editElement.addEventListener("click", () => { if (protyle.model) { setPanelFocus(protyle.model.element.parentElement.parentElement); - updatePanelByEditor(protyle, false); + updatePanelByEditor({ + protyle: protyle, + focus: false, + pushBackStack: false, + reload: false, + resize: false, + }); } protyle.toolbar?.element.classList.add("fn__none"); }); diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts index c707bc990..e1310cc12 100644 --- a/app/src/protyle/index.ts +++ b/app/src/protyle/index.ts @@ -116,7 +116,13 @@ export class Protyle { /// #if !MOBILE if (data.cmd === "heading2doc") { // 文档标题互转后，需更新大纲 - updatePanelByEditor(this.protyle, false, false, true); + updatePanelByEditor({ + protyle: this.protyle, + focus: false, + pushBackStack: false, + reload: true, + resize: false + }); } /// #endif } @@ -200,7 +206,13 @@ export class Protyle { if (mergedOptions.action?.includes(Constants.CB_GET_FOCUS)) { setPanelFocus(this.protyle.model.element.parentElement.parentElement); } - updatePanelByEditor(this.protyle, false); + updatePanelByEditor({ + protyle: this.protyle, + focus: false, + pushBackStack: false, + reload: false, + resize: false + }); /// #endif } @@ -217,7 +229,13 @@ export class Protyle { return; } setPanelFocus(this.protyle.model.element.parentElement.parentElement); - updatePanelByEditor(this.protyle, false); + updatePanelByEditor({ + protyle: this.protyle, + focus: false, + pushBackStack: false, + reload: false, + resize: false, + }); } else { // 悬浮层应移除其余面板高亮，否则按键会被面板监听到 document.querySelectorAll(".layout__tab--active").forEach(item => { diff --git a/app/src/protyle/markdown/mermaidRender.ts b/app/src/protyle/markdown/mermaidRender.ts index 7632143e1..c8ba688cc 100644 --- a/app/src/protyle/markdown/mermaidRender.ts +++ b/app/src/protyle/markdown/mermaidRender.ts @@ -73,7 +73,7 @@ const initMermaid = (mermaidElements: Element[]) => { renderElement.textContent = Lute.UnEscapeHTMLStr(item.getAttribute("data-content")); setTimeout(() => { mermaid.init(undefined, renderElement); - }, Constants.TIMEOUT_BLOCKLOAD * index); + }, Constants.TIMEOUT_LOAD * index); item.setAttribute("data-render", "true"); renderElement.setAttribute("contenteditable", "false"); if (!item.textContent.endsWith(Constants.ZWSP)) { diff --git a/app/src/protyle/scroll/event.ts b/app/src/protyle/scroll/event.ts index 186099cf5..691ca4f1e 100644 --- a/app/src/protyle/scroll/event.ts +++ b/app/src/protyle/scroll/event.ts @@ -55,7 +55,7 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => { inputElement.value = response.data; protyle.scroll.element.setAttribute("aria-label", `Blocks ${response.data}/${protyle.block.blockCount}`); }); - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); } if (protyle.wysiwyg.element.getAttribute("data-top") || protyle.block.showAll || (protyle.scroll && protyle.scroll.element.classList.contains("fn__none")) || !protyle.scroll || diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index a2875b1b0..75b5be76a 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -988,7 +988,7 @@ export class Toolbar { } setTimeout(() => { addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => { - window.html2canvas(renderElement).then((canvas) => { + window.html2canvas(renderElement, {useCORS: true}).then((canvas) => { canvas.toBlob((blob: Blob) => { const formData = new FormData(); formData.append("file", blob); @@ -1000,7 +1000,7 @@ export class Toolbar { }); }); }); - }, Constants.TIMEOUT_TRANSITION); + }, Constants.TIMEOUT_LOAD); }; headerElement.addEventListener("mousedown", (event: MouseEvent) => { if (hasClosestByClassName(event.target as HTMLElement, "block__icon")) { diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index ecb1f863a..f97588043 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -78,7 +78,7 @@ export const addLoading = (protyle: IProtyle) => { if (protyle.element.getAttribute("data-loading") !== "finished") { protyle.element.insertAdjacentHTML("beforeend", '
'); } - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); }; export const removeLoading = (protyle: IProtyle) => { diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts index 1e00d4017..cd3521fb4 100644 --- a/app/src/protyle/util/editorCommonEvent.ts +++ b/app/src/protyle/util/editorCommonEvent.ts @@ -855,13 +855,19 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { onGet(getResponse, protyle); /// #if !MOBILE // 文档标题互转后，需更新大纲 - updatePanelByEditor(protyle, false, false, true); + updatePanelByEditor({ + protyle, + focus: false, + pushBackStack: false, + reload: true, + resize: false, + }); /// #endif // 文档标题互转后，编辑区会跳转到开头 https://github.com/siyuan-note/siyuan/issues/2939 setTimeout(() => { protyle.contentElement.scrollTop = scrollTop; protyle.scroll.lastScrollTop = scrollTop - 1; - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); }); targetElement.classList.remove("dragover__bottom", "dragover__top"); } else if (!window.siyuan.dragElement && (event.dataTransfer.types[0] === "Files" || event.dataTransfer.types.includes("text/html"))) { diff --git a/app/src/protyle/util/insertHTML.ts b/app/src/protyle/util/insertHTML.ts index 8fe5a2495..fe7793901 100644 --- a/app/src/protyle/util/insertHTML.ts +++ b/app/src/protyle/util/insertHTML.ts @@ -51,7 +51,7 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false, updateTransaction(protyle, id, blockElement.outerHTML, oldHTML); setTimeout(() => { scrollCenter(protyle, blockElement, false, "smooth"); - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); return; } diff --git a/app/src/protyle/util/onGet.ts b/app/src/protyle/util/onGet.ts index 86eeaae4a..baa9ada33 100644 --- a/app/src/protyle/util/onGet.ts +++ b/app/src/protyle/util/onGet.ts @@ -220,7 +220,7 @@ const setHTML = (options: { // 减少抖动 https://ld246.com/article/1654263598088 setTimeout(() => { focusElement.scrollIntoView(); - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); } else { focusBlock(protyle.wysiwyg.element.firstElementChild); /// #if !MOBILE diff --git a/app/src/protyle/util/resize.ts b/app/src/protyle/util/resize.ts index fb0215948..fd842d5f7 100644 --- a/app/src/protyle/util/resize.ts +++ b/app/src/protyle/util/resize.ts @@ -1,33 +1,36 @@ import {hideElements} from "../ui/hideElements"; import {setPadding} from "../ui/initUI"; import {hasClosestBlock} from "./hasClosest"; +import {Constants} from "../../constants"; export const resize = (protyle: IProtyle) => { hideElements(["gutter"], protyle); setPadding(protyle); - if (typeof echarts !== "undefined") { - protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => { - const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_")); - if (chartInstance) { - chartInstance.resize(); + setTimeout(() => { + if (typeof echarts !== "undefined") { + protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => { + const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_")); + if (chartInstance) { + chartInstance.resize(); + } + }); + } + // 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments + if (protyle.toolbar.range) { + let rangeRect = protyle.toolbar.range.getBoundingClientRect(); + if (rangeRect.height === 0) { + const blockElement = hasClosestBlock(protyle.toolbar.range.startContainer); + if (blockElement) { + rangeRect = blockElement.getBoundingClientRect(); + } } - }); - } - // 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments - if (protyle.toolbar.range) { - let rangeRect = protyle.toolbar.range.getBoundingClientRect(); - if (rangeRect.height === 0) { - const blockElement = hasClosestBlock(protyle.toolbar.range.startContainer); - if (blockElement) { - rangeRect = blockElement.getBoundingClientRect(); + if (rangeRect.height === 0) { + return; + } + const protyleRect = protyle.element.getBoundingClientRect(); + if (protyleRect.top + 30 > rangeRect.top || protyleRect.bottom < rangeRect.bottom) { + protyle.toolbar.range.startContainer.parentElement.scrollIntoView(protyleRect.top > rangeRect.top); } } - if (rangeRect.height === 0) { - return; - } - const protyleRect = protyle.element.getBoundingClientRect(); - if (protyleRect.top + 30 > rangeRect.top || protyleRect.bottom < rangeRect.bottom) { - protyle.toolbar.range.startContainer.parentElement.scrollIntoView(protyleRect.top > rangeRect.top); - } - } + }, Constants.TIMEOUT_TRANSITION); // 等待 setPadding 动画结束 }; diff --git a/app/src/search/util.ts b/app/src/search/util.ts index 0a74fb344..fe3574c93 100644 --- a/app/src/search/util.ts +++ b/app/src/search/util.ts @@ -1054,7 +1054,7 @@ const inputEvent = (element: Element, config: ISearchOption, inputTimeout: numbe loadingElement.classList.add("fn__none"); }); } - }, Constants.TIMEOUT_SEARCH); + }, Constants.TIMEOUT_INPUT); return inputTimeout; }; diff --git a/app/src/util/backForward.ts b/app/src/util/backForward.ts index 82ba8a4ad..5975dceb0 100644 --- a/app/src/util/backForward.ts +++ b/app/src/util/backForward.ts @@ -151,7 +151,7 @@ const focusStack = async (stack: IBackStack) => { setTimeout(() => { // 图片、视频等加载完成后再定位 scrollCenter(stack.protyle, blockElement, true); - }, Constants.TIMEOUT_BLOCKLOAD); + }, Constants.TIMEOUT_LOAD); }); return true; }