0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/insider/issues/1080

Browse source
This commit is contained in:
Vanessa 2022-10-04 18:16:44 +08:00
parent 7f2cb0c48b
commit b9872a49f2
3 changed files with 102 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/src/editor/util.ts
View file

@ -450,6 +450,7 @@ export const updateBacklinkGraph = (models: IModels, protyle: IProtyle) => {
item.element.querySelector('.block__icon[data-type="refresh"] svg').classList.remove("fn__rotate");
return;
}
item.saveStatus();
item.blockId = blockId;
item.render(response.data);
});

125
app/src/layout/dock/Backlink.ts
View file

@ -19,6 +19,15 @@ export class Backlink extends Model {
private notebookId: string;
private mTree: Tree;
private editors: Protyle[] = [];
private status: {
[key: string]: {
scrollTop: number,
mScrollTop: number,
backlinkOpenIds: string[],
backlinkMOpenIds: string[],
backlinkMStatus: number // 0 全展开，1 展开一半箭头向下，2 展开一半箭头向上，3 全收起
}
} = {};
constructor(options: {
tab: Tab,
@ -190,20 +199,18 @@ export class Backlink extends Model {
this.tree.element.querySelectorAll(".protyle-gutters").forEach(item => {
item.classList.add("fn__none");
item.innerHTML = "";
// https://ld246.com/article/1651935412480
this.tree.element.querySelectorAll(".protyle-wysiwyg--hl").forEach((hlItem) => {
hlItem.classList.remove("protyle-wysiwyg--hl");
});
});
this.tree.element.querySelectorAll(".protyle-wysiwyg--hl").forEach((hlItem) => {
hlItem.classList.remove("protyle-wysiwyg--hl");
});
});
this.mTree.element.addEventListener("scroll", () => {
this.mTree.element.querySelectorAll(".protyle-gutters").forEach(item => {
item.classList.add("fn__none");
item.innerHTML = "";
// https://ld246.com/article/1651935412480
this.mTree.element.querySelectorAll(".protyle-wysiwyg--hl").forEach((hlItem) => {
hlItem.classList.remove("protyle-wysiwyg--hl");
});
});
this.mTree.element.querySelectorAll(".protyle-wysiwyg--hl").forEach((hlItem) => {
hlItem.classList.remove("protyle-wysiwyg--hl");
});
});
// 为了快捷键的 dispatch
@ -266,7 +273,8 @@ export class Backlink extends Model {
target.querySelector("use").setAttribute("xlink:href", "#iconDown");
}
}
target.setAttribute("data-clicked", "true");
this.tree.element.dispatchEvent(new CustomEvent("scroll"));
this.mTree.element.dispatchEvent(new CustomEvent("scroll"));
break;
}
}
@ -303,7 +311,7 @@ export class Backlink extends Model {
const editorElement = document.createElement("div");
editorElement.style.minHeight = "auto";
editorElement.setAttribute("data-defid", this.blockId);
editorElement.setAttribute("data-ismention", isMention? "true" : "false");
editorElement.setAttribute("data-ismention", isMention ? "true" : "false");
liElement.after(editorElement);
const editor = new Protyle(editorElement, {
blockId: "",
@ -322,7 +330,7 @@ export class Backlink extends Model {
}
}
public refresh() {
private refresh() {
fetchPost("/api/ref/refreshBacklink", {
id: this.blockId,
}, () => {
@ -341,10 +349,40 @@ export class Backlink extends Model {
mk: this.inputsElement[1].value,
id: this.blockId,
}, response => {
this.saveStatus();
this.render(response.data);
});
}
public saveStatus() {
this.status[this.blockId] = {
scrollTop: this.tree.element.scrollTop,
mScrollTop: this.mTree.element.scrollTop,
backlinkOpenIds: [],
backlinkMOpenIds: [],
backlinkMStatus: 3 // 0 全展开，1 展开一半箭头向下，2 展开一半箭头向上，3 全收起
}
this.tree.element.querySelectorAll(".b3-list-item__arrow--open").forEach(item => {
this.status[this.blockId].backlinkOpenIds.push(item.parentElement.parentElement.getAttribute("data-node-id"))
})
this.mTree.element.querySelectorAll(".b3-list-item__arrow--open").forEach(item => {
this.status[this.blockId].backlinkMOpenIds.push(item.parentElement.parentElement.getAttribute("data-node-id"))
})
if (this.mTree.element.style.flex) {
if (this.mTree.element.style.height === "0px") {
this.status[this.blockId].backlinkMStatus = 3;
} else {
this.status[this.blockId].backlinkMStatus = 0;
}
} else {
if (this.mTree.element.previousElementSibling.querySelector('[data-type="layout"]').getAttribute("aria-label") === window.siyuan.languages.down) {
this.status[this.blockId].backlinkMStatus = 1;
} else {
this.status[this.blockId].backlinkMStatus = 2;
}
}
}
public render(data: { box: string, backlinks: IBlockTree[], backmentions: IBlockTree[], linkRefsCount: number, mentionsCount: number, k: string, mk: string }) {
if (!data) {
data = {
@ -375,7 +413,6 @@ 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, false);
}
const mCountElement = this.element.querySelector(".listMCount");
if (data.mentionsCount === 0) {
@ -383,30 +420,68 @@ export class Backlink extends Model {
} else {
mCountElement.classList.remove("fn__none");
mCountElement.textContent = data.mentionsCount.toString();
this.toggleItem(this.mTree.element.firstElementChild.firstElementChild as HTMLElement, true);
}
const layoutElement = this.element.querySelector("[data-type='layout']");
if (layoutElement.getAttribute("data-clicked")) {
return;
if (!this.status[this.blockId]) {
this.status[this.blockId] = {
scrollTop: 0,
mScrollTop: 0,
backlinkOpenIds: [],
backlinkMOpenIds: [],
backlinkMStatus: 3
}
if (data.mentionsCount === 0) {
this.status[this.blockId].backlinkMStatus = 3;
} else {
this.status[this.blockId].backlinkMOpenIds = [data.backmentions[0].id]
if (data.linkRefsCount === 0) {
this.status[this.blockId].backlinkMStatus = 0;
} else {
this.status[this.blockId].backlinkOpenIds = [data.backlinks[0].id]
this.status[this.blockId].backlinkMStatus = 1;
}
}
}
if (data.mentionsCount === 0) {
// restore status
this.status[this.blockId].backlinkOpenIds.forEach(item => {
const liElement = this.tree.element.querySelector(`.b3-list-item[data-node-id="${item}"]`) as HTMLElement
if (liElement) {
this.toggleItem(liElement, false);
}
})
this.status[this.blockId].backlinkMOpenIds.forEach(item => {
const liElement = this.mTree.element.querySelector(`.b3-list-item[data-node-id="${item}"]`) as HTMLElement
if (liElement) {
this.toggleItem(liElement, true);
}
})
// 0 全展开，1 展开一半箭头向下，2 展开一半箭头向上，3 全收起
const layoutElement = this.mTree.element.previousElementSibling.querySelector('[data-type="layout"]');
if (this.status[this.blockId].backlinkMStatus === 2 || this.status[this.blockId].backlinkMStatus === 1) {
this.tree.element.classList.remove("fn__none");
this.mTree.element.removeAttribute("style");
if (this.status[this.blockId].backlinkMStatus === 1) {
layoutElement.setAttribute("aria-label", window.siyuan.languages.down);
layoutElement.querySelector("use").setAttribute("xlink:href", "#iconDown");
} else {
layoutElement.setAttribute("aria-label", window.siyuan.languages.up);
layoutElement.querySelector("use").setAttribute("xlink:href", "#iconUp");
}
}else if (this.status[this.blockId].backlinkMStatus === 3) {
this.tree.element.classList.remove("fn__none");
this.mTree.element.setAttribute("style", "flex:none;height:0px");
layoutElement.setAttribute("aria-label", window.siyuan.languages.up);
layoutElement.querySelector("use").setAttribute("xlink:href", "#iconUp");
return;
}
if (data.linkRefsCount === 0) {
} else {
this.tree.element.classList.add("fn__none");
this.mTree.element.setAttribute("style", `flex:none;height:${this.element.clientHeight - this.tree.element.previousElementSibling.clientHeight * 2}px`);
layoutElement.setAttribute("aria-label", window.siyuan.languages.down);
layoutElement.querySelector("use").setAttribute("xlink:href", "#iconDown");
} else {
this.tree.element.classList.remove("fn__none");
this.mTree.element.removeAttribute("style");
layoutElement.setAttribute("aria-label", window.siyuan.languages.down);
layoutElement.querySelector("use").setAttribute("xlink:href", "#iconDown");
}
setTimeout(() => {
this.tree.element.scrollTop = this.status[this.blockId].scrollTop;
this.mTree.element.scrollTop = this.status[this.blockId].mScrollTop;
}, Constants.TIMEOUT_BLOCKLOAD);
}
}

2
app/src/protyle/wysiwyg/transaction.ts
View file

@ -431,7 +431,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
nodeAttrHTML += `<div class="protyle-attr--memo b3-tooltips b3-tooltips__sw" aria-label="${escapeHTML}"><svg><use xlink:href="#iconM"></use></svg></div>`;
}
});
if (protyle.block.rootID === operation.id) {
if (protyle.block.rootID === operation.id && protyle.title) {
// 文档
const refElement = protyle.title.element.querySelector(".protyle-attr--refcount");
if (refElement) {