From 0955dd5e1b8c60ce97410f152d212cdab4066d00 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Tue, 4 Jul 2023 20:39:43 +0800 Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/8623 --- app/src/assets/scss/protyle/_protyle.scss | 2 + app/src/dialog/processSystem.ts | 1 - app/src/menus/protyle.ts | 5 -- app/src/mobile/editor.ts | 3 +- app/src/mobile/util/MobileBackFoward.ts | 2 +- app/src/mobile/util/touch.ts | 6 -- app/src/protyle/breadcrumb/index.ts | 67 ++++++++++++++++++++--- app/src/protyle/scroll/saveScroll.ts | 2 - app/src/protyle/util/onGet.ts | 1 + app/src/search/util.ts | 1 - 10 files changed, 65 insertions(+), 25 deletions(-) diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss index defb6895e..572fec4dc 100644 --- a/app/src/assets/scss/protyle/_protyle.scss +++ b/app/src/assets/scss/protyle/_protyle.scss @@ -176,6 +176,8 @@ margin: 3px 0; color: var(--b3-theme-on-surface); max-width: 70%; + border: 0; + background-color: transparent; &.b3-tooltips svg { margin-right: 0; diff --git a/app/src/dialog/processSystem.ts b/app/src/dialog/processSystem.ts index b8d1e63fa..1076c0c4a 100644 --- a/app/src/dialog/processSystem.ts +++ b/app/src/dialog/processSystem.ts @@ -39,7 +39,6 @@ export const reloadSync = (app: App, data: { upsertRootIDs: string[], removeRoot hideElements(["dialog"]); } else { reloadProtyle(window.siyuan.mobile.popEditor.protyle, false); - window.siyuan.mobile.popEditor.protyle.breadcrumb.render(window.siyuan.mobile.popEditor.protyle, true); } } if (window.siyuan.mobile.editor) { diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index ca4850405..4b0973bec 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -596,11 +596,6 @@ export const zoomOut = (options: { pushBack(); } } - /// #if !MOBILE - if (options.protyle.breadcrumb) { - options.protyle.breadcrumb.toggleExit(options.id === options.protyle.block.rootID); - } - /// #endif fetchPost("/api/filetree/getDoc", { id: options.id, size: options.id === options.protyle.block.rootID ? window.siyuan.config.editor.dynamicLoadBlocks : Constants.SIZE_GET_MAX, diff --git a/app/src/mobile/editor.ts b/app/src/mobile/editor.ts index 6b65ba274..91d639852 100644 --- a/app/src/mobile/editor.ts +++ b/app/src/mobile/editor.ts @@ -56,7 +56,7 @@ export const openMobileFileById = (app: App, id: string, action = [Constants.CB_ mode: action.includes(Constants.CB_GET_CONTEXT) ? 3 : 0, }, getResponse => { onGet({data: getResponse, protyle: window.siyuan.mobile.editor.protyle, action}); - window.siyuan.mobile.editor.protyle.breadcrumb?.render(window.siyuan.mobile.editor.protyle); + window.siyuan.mobile.editor.protyle.breadcrumb?.genMobileIcon(window.siyuan.mobile.editor.protyle.block.rootID); }); window.siyuan.mobile.editor.protyle.undo.clear(); } else { @@ -77,6 +77,7 @@ export const openMobileFileById = (app: App, id: string, action = [Constants.CB_ if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly) { disabledProtyle(editor.protyle); } + editor.protyle.breadcrumb?.genMobileIcon(editor.protyle.block.rootID); } }); } diff --git a/app/src/mobile/util/MobileBackFoward.ts b/app/src/mobile/util/MobileBackFoward.ts index 24dbd8062..4c9dfdd85 100644 --- a/app/src/mobile/util/MobileBackFoward.ts +++ b/app/src/mobile/util/MobileBackFoward.ts @@ -97,7 +97,7 @@ const focusStack = (backStack: IBackStack) => { } } protyle.contentElement.scrollTop = backStack.scrollTop; - protyle.breadcrumb?.render(protyle); + protyle.breadcrumb?.genMobileIcon(protyle.block.rootID); }); }; diff --git a/app/src/mobile/util/touch.ts b/app/src/mobile/util/touch.ts index 8c028358b..e29937174 100644 --- a/app/src/mobile/util/touch.ts +++ b/app/src/mobile/util/touch.ts @@ -25,12 +25,6 @@ const popSide = (render = true) => { export const handleTouchEnd = (event: TouchEvent) => { const editor = getCurrentEditor(); - if (editor) { - document.querySelectorAll(".protyle-breadcrumb__bar--hide").forEach(item => { - item.classList.remove("protyle-breadcrumb__bar--hide"); - }); - window.siyuan.hideBreadcrumb = false; - } const target = event.target as HTMLElement; if (editor && typeof yDiff === "undefined" && new Date().getTime() - time > 900 && target.tagName === "SPAN" && window.webkit?.messageHandlers && diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts index 498865c7f..09e90ad61 100644 --- a/app/src/protyle/breadcrumb/index.ts +++ b/app/src/protyle/breadcrumb/index.ts @@ -26,6 +26,8 @@ import {hideElements} from "../ui/hideElements"; import {confirmDialog} from "../../dialog/confirmDialog"; import {reloadProtyle} from "../util/reload"; import {deleteFile} from "../../editor/deleteFile"; +import {Menu} from "../../plugin/Menu"; +import {getNoContainerElement} from "../wysiwyg/getBlock"; export class Breadcrumb { public element: HTMLElement; @@ -36,7 +38,7 @@ export class Breadcrumb { constructor(protyle: IProtyle) { const element = document.createElement("div"); element.className = "protyle-breadcrumb"; - const isFocus = protyle.options.action.includes(Constants.CB_GET_ALL) && !isMobile(); + const isFocus = protyle.options.action.includes(Constants.CB_GET_ALL); element.innerHTML = `
@@ -53,17 +55,19 @@ export class Breadcrumb { while (target && !target.isEqualNode(element)) { const id = target.getAttribute("data-node-id"); if (id) { + /// #if MOBILE + this.genMobileMenu(protyle); + /// #else if (protyle.options.render.breadcrumbDocName && window.siyuan.ctrlIsPressed) { - /// #if !MOBILE openFileById({ - app:protyle.app, + app: protyle.app, id, action: id === protyle.block.rootID ? [Constants.CB_GET_FOCUS] : [Constants.CB_GET_FOCUS, Constants.CB_GET_ALL] }); - /// #endif } else { - zoomOut({protyle, id}); + zoomOut({protyle, id, focusId: protyle.block.id}); } + /// #endif event.preventDefault(); break; } else if (target.getAttribute("data-menu") === "true") { @@ -89,7 +93,6 @@ export class Breadcrumb { size: window.siyuan.config.editor.dynamicLoadBlocks, }, getResponse => { onGet({data: getResponse, protyle, action: [Constants.CB_GET_HL]}); - this.toggleExit(true); }); target.classList.add("block__icon--active"); } @@ -152,6 +155,48 @@ export class Breadcrumb { this.mediaRecorder.startRecordingNewWavFile(); } + private genMobileMenu(protyle: IProtyle) { + const menu = new Menu("breadcrumb-mobile-path"); + let blockElement: Element; + if (getSelection().rangeCount > 0) { + const range = getSelection().getRangeAt(0); + if (!protyle.wysiwyg.element.isEqualNode(range.startContainer) && !protyle.wysiwyg.element.contains(range.startContainer)) { + blockElement = getNoContainerElement(protyle.wysiwyg.element.firstElementChild) || protyle.wysiwyg.element.firstElementChild; + } else { + blockElement = hasClosestBlock(range.startContainer) as Element; + } + } + if (!blockElement) { + blockElement = getNoContainerElement(protyle.wysiwyg.element.firstElementChild) || protyle.wysiwyg.element.firstElementChild; + } + const id = blockElement.getAttribute("data-node-id") + fetchPost("/api/block/getBlockBreadcrumb", {id, excludeTypes: []}, (response) => { + response.data.forEach((item: IBreadcrumb) => { + let isCurrent = false; + if (!protyle.block.showAll && item.id === protyle.block.parentID) { + isCurrent = true; + } else if (protyle.block.showAll && item.id === protyle.block.id) { + isCurrent = true; + } + menu.addItem({ + current: isCurrent, + icon: getIconByType(item.type, item.subType), + label: item.name, + click() { + zoomOut({protyle, id: item.id, focusId: id}); + } + }) + }); + menu.fullscreen(); + }); + } + + public genMobileIcon(rootId: string) { + this.element.innerHTML = ``; + } + public toggleExit(hide: boolean) { const exitFocusElement = this.element.parentElement.querySelector('[data-type="exit-focus"]'); if (hide) { @@ -373,18 +418,21 @@ export class Breadcrumb { } public render(protyle: IProtyle, update = false) { + if (isMobile()) { + return; + } let range: Range; let blockElement: Element; if (getSelection().rangeCount > 0) { range = getSelection().getRangeAt(0); if (!protyle.wysiwyg.element.isEqualNode(range.startContainer) && !protyle.wysiwyg.element.contains(range.startContainer)) { - blockElement = protyle.wysiwyg.element.firstElementChild; + blockElement = getNoContainerElement(protyle.wysiwyg.element.firstElementChild) || protyle.wysiwyg.element.firstElementChild; } else { blockElement = hasClosestBlock(range.startContainer) as Element; } } if (!blockElement) { - blockElement = protyle.wysiwyg.element.firstElementChild; + blockElement = getNoContainerElement(protyle.wysiwyg.element.firstElementChild) || protyle.wysiwyg.element.firstElementChild; } const id = blockElement.getAttribute("data-node-id"); if (id === this.id && !update) { @@ -454,6 +502,9 @@ export class Breadcrumb { } public hide() { + if (isMobile()) { + return; + } this.element.classList.add("protyle-breadcrumb__bar--hide"); window.siyuan.hideBreadcrumb = true; } diff --git a/app/src/protyle/scroll/saveScroll.ts b/app/src/protyle/scroll/saveScroll.ts index ec0e00a38..3c197b044 100644 --- a/app/src/protyle/scroll/saveScroll.ts +++ b/app/src/protyle/scroll/saveScroll.ts @@ -67,7 +67,6 @@ export const getDocByScroll = (options: { size: Constants.SIZE_GET_MAX, }, response => { actions.push(Constants.CB_GET_ALL); - options.protyle.breadcrumb?.toggleExit(false); onGet({ data: response, protyle: options.protyle, @@ -85,7 +84,6 @@ export const getDocByScroll = (options: { startID: options.scrollAttr.startId, endID: options.scrollAttr.endId, }, response => { - options.protyle.breadcrumb?.toggleExit(true); onGet({ data: response, protyle: options.protyle, diff --git a/app/src/protyle/util/onGet.ts b/app/src/protyle/util/onGet.ts index fc5fca831..a2b5ad1de 100644 --- a/app/src/protyle/util/onGet.ts +++ b/app/src/protyle/util/onGet.ts @@ -267,6 +267,7 @@ const setHTML = (options: { return; } if (protyle.options.render.breadcrumb) { + protyle.breadcrumb.toggleExit(!options.action.includes(Constants.CB_GET_ALL)); protyle.breadcrumb.render(protyle); } protyle.app.plugins.forEach(item => { diff --git a/app/src/search/util.ts b/app/src/search/util.ts index 2170163ad..817401c10 100644 --- a/app/src/search/util.ts +++ b/app/src/search/util.ts @@ -972,7 +972,6 @@ const getArticle = (options: { const contentRect = options.edit.protyle.contentElement.getBoundingClientRect(); options.edit.protyle.contentElement.scrollTop = options.edit.protyle.contentElement.scrollTop + matchElement.getBoundingClientRect().top - contentRect.top - contentRect.height / 2; } - options.edit.protyle.breadcrumb.toggleExit(!foldResponse.data); }); }); };