From b699e98a79e9e1767ebb900e814f7e44cb4cbb65 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 30 Sep 2022 10:39:35 +0800 Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/3565 --- app/src/layout/dock/Backlink.ts | 109 ++++++++++++++++---------------- app/src/protyle/ui/initUI.ts | 6 +- 2 files changed, 60 insertions(+), 55 deletions(-) diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts index b2b04a9e6..5f2c790b9 100644 --- a/app/src/layout/dock/Backlink.ts +++ b/app/src/layout/dock/Backlink.ts @@ -82,10 +82,6 @@ export class Backlink extends Model { - - - - @@ -105,10 +101,6 @@ export class Backlink extends Model { - - - - @@ -138,64 +130,35 @@ export class Backlink extends Model { this.tree = new Tree({ element: this.element.querySelector(".backlinkList") as HTMLElement, data: null, - click(element: HTMLElement) { + click(element) { openFileById({ id: element.getAttribute("data-node-id"), action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT] }); }, - ctrlClick(element: HTMLElement) { + ctrlClick(element) { openFileById({ id: element.getAttribute("data-node-id"), keepCursor: true, action: [Constants.CB_GET_CONTEXT] }); }, - altClick(element: HTMLElement) { + altClick(element) { openFileById({ id: element.getAttribute("data-node-id"), position: "right", action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT] }); }, - shiftClick(element: HTMLElement) { + shiftClick(element) { openFileById({ id: element.getAttribute("data-node-id"), position: "bottom", action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT] }); }, - toggleClick: (liElement: HTMLElement) => { - const svgElement = liElement.firstElementChild.firstElementChild; - if (svgElement.classList.contains("b3-list-item__arrow--open")) { - svgElement.classList.remove("b3-list-item__arrow--open"); - liElement.nextElementSibling?.classList.add("fn__none"); - } else { - svgElement.classList.add("b3-list-item__arrow--open"); - if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "DIV") { - liElement.nextElementSibling.classList.remove("fn__none"); - } else { - fetchPost("/api/ref/getBacklinkDoc", { - defID: this.blockId, - refTreeID: liElement.getAttribute("data-node-id") - }, (response) => { - const editorElement = document.createElement("div"); - liElement.after(editorElement); - const editor = new Protyle(editorElement, { - blockId: "", - backlinkData: response.data.backlinks, - render: { - background: false, - title: false, - gutter: true, - scroll: false, - breadcrumb: false, - } - }); - this.editors.push(editor); - }); - } - } + toggleClick: (liElement) => { + this.toggleItem(liElement); } }); this.mTree = new Tree({ @@ -228,21 +191,21 @@ export class Backlink extends Model { }); } }, - ctrlClick(element: HTMLElement) { + ctrlClick(element) { openFileById({ id: element.getAttribute("data-node-id"), keepCursor: true, action: [Constants.CB_GET_CONTEXT] }); }, - altClick(element: HTMLElement) { + altClick(element) { openFileById({ id: element.getAttribute("data-node-id"), position: "right", action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT] }); }, - shiftClick(element: HTMLElement) { + shiftClick(element) { openFileById({ id: element.getAttribute("data-node-id"), position: "bottom", @@ -273,10 +236,12 @@ export class Backlink extends Model { }); // 为了快捷键的 dispatch this.element.querySelector('[data-type="collapse"]').addEventListener("click", () => { - this.tree.collapseAll(); - }); - this.element.querySelector('[data-type="expand"]').addEventListener("click", () => { - this.tree.expandAll(); + this.tree.element.querySelectorAll(".protyle").forEach(item => { + item.classList.add("fn__none"); + }); + this.tree.element.querySelectorAll(".b3-list-item__arrow").forEach(item => { + item.classList.remove("b3-list-item__arrow--open"); + }); }); this.element.addEventListener("click", (event) => { if (this.type === "local") { @@ -292,11 +257,13 @@ export class Backlink extends Model { case "refresh": this.refresh(); break; - case "mExpand": - this.mTree.expandAll(); - break; case "mCollapse": - this.mTree.collapseAll(); + this.mTree.element.querySelectorAll(".protyle").forEach(item => { + item.classList.add("fn__none"); + }); + this.mTree.element.querySelectorAll(".b3-list-item__arrow").forEach(item => { + item.classList.remove("b3-list-item__arrow--open"); + }); break; case "min": getDockByType("backlink").toggleModel("backlink"); @@ -342,6 +309,39 @@ export class Backlink extends Model { } } + private toggleItem(liElement: HTMLElement) { + const svgElement = liElement.firstElementChild.firstElementChild; + if (svgElement.classList.contains("b3-list-item__arrow--open")) { + svgElement.classList.remove("b3-list-item__arrow--open"); + liElement.nextElementSibling?.classList.add("fn__none"); + } else { + svgElement.classList.add("b3-list-item__arrow--open"); + if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "DIV") { + liElement.nextElementSibling.classList.remove("fn__none"); + } else { + fetchPost("/api/ref/getBacklinkDoc", { + defID: this.blockId, + refTreeID: liElement.getAttribute("data-node-id") + }, (response) => { + const editorElement = document.createElement("div"); + liElement.after(editorElement); + const editor = new Protyle(editorElement, { + blockId: "", + backlinkData: response.data.backlinks, + render: { + background: false, + title: false, + gutter: true, + scroll: false, + breadcrumb: false, + } + }); + this.editors.push(editor); + }); + } + } + } + private turnToRef(element: HTMLElement, isDynamic: boolean) { element.querySelector(".b3-list-item__action").innerHTML = ''; this.element.querySelector('.block__icon[data-type="refresh"] svg').classList.add("fn__rotate"); @@ -434,6 +434,7 @@ export class Backlink extends Model { } else { countElement.classList.remove("fn__none"); countElement.textContent = data.linkRefsCount.toString(); + this.toggleItem(this.tree.element.firstElementChild.firstElementChild as HTMLElement); } const mCountElement = this.element.querySelector(".listMCount"); if (data.mentionsCount === 0) { diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index b4efe047b..63eb21a10 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -92,7 +92,11 @@ export const setPadding = (protyle: IProtyle) => { bottomHeight = protyle.element.clientHeight / 2 + "px"; } } - protyle.wysiwyg.element.style.padding = `16px ${min16}px ${bottomHeight} ${min24}px`; + if (protyle.options.backlinkData) { + protyle.wysiwyg.element.style.padding = `4px ${min16}px 4px ${min24}px`; + } else { + protyle.wysiwyg.element.style.padding = `16px ${min16}px ${bottomHeight} ${min24}px`; + } if (!isMobile()) { // 防止右侧分屏后，左侧页签抖动；10 为滚动条宽度 if (!window.siyuan.config.editor.fullWidth) {