Something went wrong. Try again.
A privacy-first, self-hosted, fully open source personal knowledge management software, written in typescript and golang. (PERSONAL FORK)
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783import {Tab} from "../Tab";import {getInstanceById, setPanelFocus} from "../util";import {getDockByType} from "../tabUtil";import {Model} from "../Model";import {Constants} from "../../constants";import {addScript} from "../../protyle/util/addScript";import {BlockPanel} from "../../block/Panel";import {fullscreen} from "../../protyle/breadcrumb/action";import {fetchPost} from "../../util/fetch";import {openFileById} from "../../editor/util";import {updateHotkeyAfterTip} from "../../protyle/util/compatibility";import {openGlobalSearch} from "../../search/util";import {App} from "../../index";import {checkFold} from "../../util/noRelyPCFunction";import {Editor} from "../../editor";
declare const vis: any;
export class Graph extends Model { public inputElement: HTMLInputElement; private graphElement: HTMLDivElement; private panelElement: HTMLElement; private element: HTMLElement; private network: any; public blockId: string; // "local" / "pin" 必填 public rootId: string; // "local" 必填 public graphData: { nodes: { box: string, id: string, path: string, type: string, color: IObject }[], links: Record<string, unknown>[], box: string }; public type: "local" | "pin" | "global";
constructor(options: { app: App tab: Tab blockId?: string rootId?: string type: "local" | "pin" | "global" }) { super({ app: options.app, id: options.tab.id, callback() { if (this.type === "local") { fetchPost("/api/block/checkBlockExist", {id: this.blockId}, existResponse => { if (!existResponse.data) { this.parent.parent.removeTab(this.parent.id); } }); } }, msgCallback(data) { if (data) { switch (data.cmd) { case "mount": if (this.type === "global" && data.code !== 1) { this.searchGraph(false); } break; case "rename": if (this.graphData && data.data.box === this.graphData.box && this.rootId === data.data.id) { this.searchGraph(false); if (this.type === "local") { this.parent.updateTitle(data.data.title); } } if (this.type === "global") { this.searchGraph(false); } break; case "unmount": if (this.type === "local" && this.graphData && this.graphData.box === data.data.box) { this.parent.parent.removeTab(this.parent.id); } break; case "removeDoc": if (this.type === "local" && data.data.ids.includes(this.rootId)) { this.parent.parent.removeTab(this.parent.id); } break; } } } }); this.element = options.tab.panelElement; this.blockId = options.blockId; this.rootId = options.rootId; this.type = options.type;
this.element.classList.add("graph", "file-tree", this.type === "global" ? "sy__globalGraph" : "sy__graph", "dockPanel"); let panelHTML; if (this.type === "global") { panelHTML = `<label> <span>${window.siyuan.languages.headings}</span> <input data-type="heading" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.heading ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.list1}</span> <input data-type="list" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.list ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.listItem}</span> <input data-type="listItem" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.listItem ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.quote}</span> <input data-type="blockquote" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.blockquote ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.callout}</span> <input data-type="callout" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.callout ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.superBlock}</span> <input data-type="super" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.super ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.table}</span> <input data-type="table" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.table ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.math}</span> <input data-type="math" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.math ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.code}</span> <input data-type="code" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.code ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.paragraph}</span> <input data-type="paragraph" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.paragraph ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.dailyNote}</span> <input data-type="dailyNote" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.dailyNote ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.tag}</span> <input data-type="tag" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.type.tag ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.arrow}</span> <input data-type="arrow" type="checkbox" class="b3-switch"${window.siyuan.config.graph.global.d3.arrow ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.graphConfig2}</span> <input data-type="minRefs" class="b3-slider b3-tooltips__n b3-tooltips" max="16" min="0" step="1" type="range" value="${window.siyuan.config.graph.global.minRefs}" aria-label="${window.siyuan.config.graph.global.minRefs}" /></label><label> <span>${window.siyuan.languages.nodeSize}</span> <input data-type="nodeSize" class="b3-slider b3-tooltips__n b3-tooltips" aria-label="${window.siyuan.config.graph.global.d3.nodeSize}" max="32" min="4" step="2" type="range" value="${window.siyuan.config.graph.global.d3.nodeSize}" /></label><label> <span>${window.siyuan.languages.lineWidth}</span> <input data-type="linkWidth" class="b3-tooltips b3-tooltips__n b3-slider" max="32" min="4" step="2" type="range" value="${window.siyuan.config.graph.global.d3.linkWidth}" aria-label="${window.siyuan.config.graph.global.d3.linkWidth}"/></label><label> <span>${window.siyuan.languages.lineOpacity}</span> <input data-type="lineOpacity" class="b3-tooltips b3-tooltips__n b3-slider" max="1" min="0.1" step="0.01" type="range" value="${window.siyuan.config.graph.global.d3.lineOpacity}" aria-label="${window.siyuan.config.graph.global.d3.lineOpacity}"/></label><label> <span>${window.siyuan.languages.centerStrength}</span> <input data-type="centerStrength" class="b3-tooltips b3-tooltips__n b3-slider" max="0.1" min="0.005" step="0.01" type="range" value="${window.siyuan.config.graph.global.d3.centerStrength}" aria-label="${window.siyuan.config.graph.global.d3.centerStrength}"/></label><label> <span>${window.siyuan.languages.collideRadius}</span> <input data-type="collideRadius" class="b3-tooltips b3-tooltips__n b3-slider" max="5000" min="400" step="200" type="range" value="${window.siyuan.config.graph.global.d3.collideRadius}" aria-label="${window.siyuan.config.graph.global.d3.collideRadius}"/></label><label> <span>${window.siyuan.languages.collideStrength}</span> <input data-type="collideStrength" class="b3-tooltips b3-tooltips__n b3-slider" max="1" min="0.01" step="0.01" type="range" value="${window.siyuan.config.graph.global.d3.collideStrength}" aria-label="${window.siyuan.config.graph.global.d3.collideStrength}"/></label><label> <span>${window.siyuan.languages.linkDistance}</span> <input data-type="linkDistance" class="b3-tooltips b3-tooltips__n b3-slider" max="2000" min="100" step="100" type="range" value="${window.siyuan.config.graph.global.d3.linkDistance}" aria-label="${window.siyuan.config.graph.global.d3.linkDistance}"/></label><div class="fn__hr"></div><button class="b3-button b3-button--small fn__block">${window.siyuan.languages.reset}</button>`; } else { panelHTML = `<label> <span>${window.siyuan.languages.headings}</span> <input data-type="heading" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.heading ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.list1}</span> <input data-type="list" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.list ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.listItem}</span> <input data-type="listItem" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.listItem ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.quote}</span> <input data-type="blockquote" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.blockquote ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.callout}</span> <input data-type="callout" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.callout ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.superBlock}</span> <input data-type="super" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.super ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.table}</span> <input data-type="table" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.table ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.math}</span> <input data-type="math" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.math ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.code}</span> <input data-type="code" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.code ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.paragraph}</span> <input data-type="paragraph" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.paragraph ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.dailyNote}</span> <input data-type="dailyNote" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.dailyNote ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.tag}</span> <input data-type="tag" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.type.tag ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.arrow}</span> <input data-type="arrow" type="checkbox" class="b3-switch"${window.siyuan.config.graph.local.d3.arrow ? " checked" : ""}/></label><label> <span>${window.siyuan.languages.nodeSize}</span> <input data-type="nodeSize" class="b3-slider b3-tooltips__n b3-tooltips" aria-label="${window.siyuan.config.graph.local.d3.nodeSize}" max="32" min="4" step="2" type="range" value="${window.siyuan.config.graph.local.d3.nodeSize}" /></label><label> <span>${window.siyuan.languages.lineWidth}</span> <input data-type="linkWidth" class="b3-tooltips b3-tooltips__n b3-slider" max="32" min="4" step="2" type="range" value="${window.siyuan.config.graph.local.d3.linkWidth}" aria-label="${window.siyuan.config.graph.local.d3.linkWidth}"/></label><label> <span>${window.siyuan.languages.lineOpacity}</span> <input data-type="lineOpacity" class="b3-tooltips b3-tooltips__n b3-slider" max="1" min="0.1" step="0.01" type="range" value="${window.siyuan.config.graph.local.d3.lineOpacity}" aria-label="${window.siyuan.config.graph.local.d3.lineOpacity}"/></label><label> <span>${window.siyuan.languages.centerStrength}</span> <input data-type="centerStrength" class="b3-tooltips b3-tooltips__n b3-slider" max="0.1" min="0.005" step="0.01" type="range" value="${window.siyuan.config.graph.local.d3.centerStrength}" aria-label="${window.siyuan.config.graph.local.d3.centerStrength}"/></label><label> <span>${window.siyuan.languages.collideRadius}</span> <input data-type="collideRadius" class="b3-tooltips b3-tooltips__n b3-slider" max="5000" min="400" step="200" type="range" value="${window.siyuan.config.graph.local.d3.collideRadius}" aria-label="${window.siyuan.config.graph.local.d3.collideRadius}"/></label><label> <span>${window.siyuan.languages.collideStrength}</span> <input data-type="collideStrength" class="b3-tooltips b3-tooltips__n b3-slider" max="1" min="0.01" step="0.01" type="range" value="${window.siyuan.config.graph.local.d3.collideStrength}" aria-label="${window.siyuan.config.graph.local.d3.collideStrength}"/></label><label> <span>${window.siyuan.languages.linkDistance}</span> <input data-type="linkDistance" class="b3-tooltips b3-tooltips__n b3-slider" max="2000" min="100" step="100" type="range" value="${window.siyuan.config.graph.local.d3.linkDistance}" aria-label="${window.siyuan.config.graph.local.d3.linkDistance}"/></label><div class="fn__hr"></div><button class="b3-button b3-button--small fn__block">${window.siyuan.languages.reset}</button>`; } this.element.innerHTML = `<div class="block__icons"> <div class="block__logo"> <svg class="block__logoicon"><use xlink:href="#icon${this.type === "global" ? "GlobalGraph" : "Graph"}"></use></svg>${this.type === "global" ? window.siyuan.languages.globalGraph : window.siyuan.languages.graphView} </div> <span class="fn__flex-1"></span> <span class="fn__space"></span> <input class="b3-text-field search__label fn__size200 fn__none" placeholder="${window.siyuan.languages.search}" /> <span data-type="search" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.search}"><svg><use xlink:href='#iconFilter'></use></svg></span> <span class="fn__space"></span> <span data-type="refresh" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href='#iconRefresh'></use></svg></span> <div class="fn__space"></div> <div data-type="fullscreen" class="b3-tooltips b3-tooltips__sw block__icon" aria-label="${window.siyuan.languages.fullscreen}"> <svg><use xlink:href="#iconFullscreen"></use></svg> </div> <div class="fn__space"></div> <div data-type="menu" class="b3-tooltips b3-tooltips__sw block__icon" aria-label="${window.siyuan.languages.more}"> <svg><use xlink:href="#iconMore"></use></svg> </div> <span class="${this.type === "local" ? "fn__none " : ""}fn__space"></span> <span data-type="min" class="${this.type === "local" ? "fn__none " : ""}block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min}${updateHotkeyAfterTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span></div><div class="graph__panel"> ${panelHTML}</div><div class="fn__flex-1 graph__svg"></div>`; this.graphElement = this.element.querySelector(".graph__svg"); this.inputElement = this.element.querySelector("input"); this.panelElement = this.element.querySelector(".graph__panel") as HTMLElement; this.element.addEventListener("click", (event) => { if (this.type === "local") { setPanelFocus(this.element.parentElement.parentElement); } else { setPanelFocus(this.element); } let target = event.target as HTMLElement; while (target && !target.isEqualNode(this.element)) { if (target.classList.contains("b3-button")) { if (this.type === "global") { fetchPost("/api/graph/resetGraph", {}, (data) => { this.reset(data.data.conf); }); } else { fetchPost("/api/graph/resetLocalGraph", {}, (data) => { this.reset(data.data.conf); }); } break; } else if (target.classList.contains("block__icon")) { const dataType = target.getAttribute("data-type"); if (dataType === "min") { getDockByType(this.type === "global" ? "globalGraph" : "graph").toggleModel(this.type === "global" ? "globalGraph" : "graph", false, true); } else if (dataType === "menu") { if (target.classList.contains("ft__primary")) { target.classList.remove("ft__primary"); this.panelElement.style.right = ""; } else { target.classList.add("ft__primary"); this.panelElement.style.right = "0"; } } else if (dataType === "search") { target.previousElementSibling.classList.remove("fn__none"); (target.previousElementSibling as HTMLInputElement).select(); } else if (dataType === "refresh") { this.searchGraph(false, undefined, true); } else if (dataType === "fullscreen") { fullscreen(this.element, target); const minElement = this.element.querySelector('.block__icons .block__icon[data-type="min"]'); if (this.element.className.includes("fullscreen")) { minElement.classList.add("fn__none"); minElement.previousElementSibling.classList.add("fn__none"); } else { minElement.classList.remove("fn__none"); minElement.previousElementSibling.classList.remove("fn__none"); } } break; } else if (target.classList.contains("graph__svg")) { this.element.querySelectorAll(".block__icon.ft__primary").forEach(item => { item.classList.remove("ft__primary"); }); this.panelElement.style.right = ""; break; } target = target.parentElement; } }); this.inputElement.addEventListener("compositionend", () => { this.searchGraph(false); }); this.inputElement.addEventListener("blur", (event: InputEvent) => { const inputElement = event.target as HTMLInputElement; inputElement.classList.add("fn__none"); }); this.inputElement.addEventListener("input", (event: InputEvent) => { if (event.isComposing) { return; } this.searchGraph(false); }); this.element.querySelectorAll(".b3-slider").forEach((item: HTMLInputElement) => { item.addEventListener("input", () => { item.setAttribute("aria-label", item.value); this.searchGraph(false); }); }); this.element.querySelectorAll(".b3-switch").forEach((item) => { item.addEventListener("change", () => { this.searchGraph(false); }); }); this.searchGraph(options.type !== "global"); }
private reset(conf: IGraphCommon & ({ dailyNote: boolean } | { minRefs: number, dailyNote: boolean })) { if (this.type === "global") { window.siyuan.config.graph.global = conf as IGraphCommon & { minRefs: number, dailyNote: boolean }; this.panelElement.querySelector("[data-type='minRefs']").setAttribute("aria-label", window.siyuan.config.graph.global.minRefs.toString()); (this.panelElement.querySelector("[data-type='minRefs']") as HTMLInputElement).value = window.siyuan.config.graph.global.minRefs.toString();
} else { window.siyuan.config.graph.local = conf as IGraphCommon & { dailyNote: boolean }; } this.inputElement.value = ""; this.panelElement.querySelector("[data-type='nodeSize']").setAttribute("aria-label", conf.d3.nodeSize.toString()); this.panelElement.querySelector("[data-type='centerStrength']").setAttribute("aria-label", conf.d3.centerStrength.toString()); this.panelElement.querySelector("[data-type='collideRadius']").setAttribute("aria-label", conf.d3.collideRadius.toString()); this.panelElement.querySelector("[data-type='collideStrength']").setAttribute("aria-label", conf.d3.collideStrength.toString()); this.panelElement.querySelector("[data-type='lineOpacity']").setAttribute("aria-label", conf.d3.lineOpacity.toString()); this.panelElement.querySelector("[data-type='linkDistance']").setAttribute("aria-label", conf.d3.linkDistance.toString()); this.panelElement.querySelector("[data-type='linkWidth']").setAttribute("aria-label", conf.d3.linkWidth.toString()); (this.panelElement.querySelector("[data-type='nodeSize']") as HTMLInputElement).value = conf.d3.nodeSize.toString(); (this.panelElement.querySelector("[data-type='centerStrength']") as HTMLInputElement).value = conf.d3.centerStrength.toString(); (this.panelElement.querySelector("[data-type='collideRadius']") as HTMLInputElement).value = conf.d3.collideRadius.toString(); (this.panelElement.querySelector("[data-type='collideStrength']") as HTMLInputElement).value = conf.d3.collideStrength.toString(); (this.panelElement.querySelector("[data-type='lineOpacity']") as HTMLInputElement).value = conf.d3.lineOpacity.toString(); (this.panelElement.querySelector("[data-type='linkDistance']") as HTMLInputElement).value = conf.d3.linkDistance.toString(); (this.panelElement.querySelector("[data-type='linkWidth']") as HTMLInputElement).value = conf.d3.linkWidth.toString(); (this.panelElement.querySelector("[data-type='list']") as HTMLInputElement).checked = conf.type.list; (this.panelElement.querySelector("[data-type='listItem']") as HTMLInputElement).checked = conf.type.listItem; (this.panelElement.querySelector("[data-type='math']") as HTMLInputElement).checked = conf.type.math; (this.panelElement.querySelector("[data-type='paragraph']") as HTMLInputElement).checked = conf.type.paragraph; (this.panelElement.querySelector("[data-type='super']") as HTMLInputElement).checked = conf.type.super; (this.panelElement.querySelector("[data-type='table']") as HTMLInputElement).checked = conf.type.table; (this.panelElement.querySelector("[data-type='tag']") as HTMLInputElement).checked = conf.type.tag; (this.panelElement.querySelector("[data-type='dailyNote']") as HTMLInputElement).checked = conf.dailyNote; (this.panelElement.querySelector("[data-type='heading']") as HTMLInputElement).checked = conf.type.heading; (this.panelElement.querySelector("[data-type='arrow']") as HTMLInputElement).checked = conf.d3.arrow; (this.panelElement.querySelector("[data-type='blockquote']") as HTMLInputElement).checked = conf.type.blockquote; (this.panelElement.querySelector("[data-type='callout']") as HTMLInputElement).checked = conf.type.callout; (this.panelElement.querySelector("[data-type='code']") as HTMLInputElement).checked = conf.type.code; this.searchGraph(false); }
public searchGraph(focus: boolean, id?: string, refresh = false) { const element = this.element.querySelector('.block__icon[data-type="refresh"] svg'); if (element.classList.contains("fn__rotate") && !id) { return; } element.classList.add("fn__rotate"); const type = { list: (this.panelElement.querySelector("[data-type='list']") as HTMLInputElement).checked, listItem: (this.panelElement.querySelector("[data-type='listItem']") as HTMLInputElement).checked, math: (this.panelElement.querySelector("[data-type='math']") as HTMLInputElement).checked, paragraph: (this.panelElement.querySelector("[data-type='paragraph']") as HTMLInputElement).checked, super: (this.panelElement.querySelector("[data-type='super']") as HTMLInputElement).checked, table: (this.panelElement.querySelector("[data-type='table']") as HTMLInputElement).checked, tag: (this.panelElement.querySelector("[data-type='tag']") as HTMLInputElement).checked, heading: (this.panelElement.querySelector("[data-type='heading']") as HTMLInputElement).checked, blockquote: (this.panelElement.querySelector("[data-type='blockquote']") as HTMLInputElement).checked, callout: (this.panelElement.querySelector("[data-type='callout']") as HTMLInputElement).checked, code: (this.panelElement.querySelector("[data-type='code']") as HTMLInputElement).checked, }; const d3 = { arrow: (this.panelElement.querySelector("[data-type='arrow']") as HTMLInputElement).checked, nodeSize: parseFloat((this.panelElement.querySelector("[data-type='nodeSize']") as HTMLInputElement).value), centerStrength: parseFloat((this.panelElement.querySelector("[data-type='centerStrength']") as HTMLInputElement).value), collideRadius: parseFloat((this.panelElement.querySelector("[data-type='collideRadius']") as HTMLInputElement).value), collideStrength: parseFloat((this.panelElement.querySelector("[data-type='collideStrength']") as HTMLInputElement).value), lineOpacity: parseFloat((this.panelElement.querySelector("[data-type='lineOpacity']") as HTMLInputElement).value), linkDistance: parseFloat((this.panelElement.querySelector("[data-type='linkDistance']") as HTMLInputElement).value), linkWidth: parseFloat((this.panelElement.querySelector("[data-type='linkWidth']") as HTMLInputElement).value), }; if (this.type === "global") { // 全局 fetchPost("/api/graph/getGraph", { k: this.inputElement.value, conf: { type, d3, dailyNote: (this.panelElement.querySelector("[data-type='dailyNote']") as HTMLInputElement).checked, minRefs: parseFloat((this.panelElement.querySelector("[data-type='minRefs']") as HTMLInputElement).value) } }, response => { this.graphData = response.data; window.siyuan.config.graph.global = response.data.conf; this.onGraph(false); element.classList.remove("fn__rotate"); }); } else { fetchPost("/api/graph/getLocalGraph", { type: this.type, // 用于如下场景：当打开文档A的关系图、关系图、文档A后刷新，由于防止请求重复处理，文档A关系图无法渲染。 k: this.inputElement.value, id: id || this.blockId, conf: { type, d3, dailyNote: (this.panelElement.querySelector("[data-type='dailyNote']") as HTMLInputElement).checked, }, }, response => { element.classList.remove("fn__rotate"); if (id) { this.blockId = id; } if (!refresh && this.type === "pin" && this.blockId) { const isActive = Array.from(document.querySelectorAll(".fn__flex > .layout-tab-bar > .item--focus")).find(activeElement => { const tab = getInstanceById(activeElement.getAttribute("data-id")); if (tab instanceof Tab && tab.model instanceof Editor) { if (tab.model.editor.protyle.block.rootID === this.blockId || tab.model.editor.protyle.block.parentID === this.blockId || tab.model.editor.protyle.block.id === this.blockId) { return true; } } }); if (!isActive) { return; } } this.graphData = response.data; window.siyuan.config.graph.local = response.data.conf; this.onGraph(focus); }); } }
private hlNode(id: string) { if (this.graphElement.clientHeight === 0 || !this.network || this.network.findNode(id).length === 0) { return; } this.network.focus(id, { animation: { duration: 1000, easingFunction: "easeInOutQuad", }, }); this.network.selectNodes([id]); }
public destroy() { this.network?.destroy(); }
public onGraph(hl: boolean) { if (this.graphElement.clientHeight === 0) { // 界面没有渲染时不能进行渲染 return; } this.network?.destroy(); if (!this.graphData || !this.graphData.nodes || this.graphData.nodes.length === 0) { return; } // 使用颜色 const rootStyle = getComputedStyle(document.body); this.graphData.nodes.forEach(item => { switch (item.type) { case "NodeDocument": item.color = {background: rootStyle.getPropertyValue("--b3-graph-doc-point").trim()}; break; case "NodeParagraph": item.color = {background: rootStyle.getPropertyValue("--b3-graph-p-point").trim()}; break; case "NodeHeading": item.color = {background: rootStyle.getPropertyValue("--b3-graph-heading-point").trim()}; break; case "NodeMathBlock": item.color = {background: rootStyle.getPropertyValue("--b3-graph-math-point").trim()}; break; case "NodeCodeBlock": item.color = {background: rootStyle.getPropertyValue("--b3-graph-code-point").trim()}; break; case "NodeTable": item.color = {background: rootStyle.getPropertyValue("--b3-graph-table-point").trim()}; break; case "NodeList": item.color = {background: rootStyle.getPropertyValue("--b3-graph-list-point").trim()}; break; case "NodeListItem": item.color = {background: rootStyle.getPropertyValue("--b3-graph-listitem-point").trim()}; break; case "NodeBlockquote": item.color = {background: rootStyle.getPropertyValue("--b3-graph-bq-point").trim()}; break; case "NodeCallout": item.color = {background: rootStyle.getPropertyValue("--b3-graph-callout-point").trim()}; break; case "NodeSuperBlock": item.color = {background: rootStyle.getPropertyValue("--b3-graph-super-point").trim()}; break; case "tag": case "textmark tag": item.color = {background: rootStyle.getPropertyValue("--b3-graph-tag-point").trim()}; break; default: item.color = {background: rootStyle.getPropertyValue("--b3-graph-p-point").trim()}; break; } }); this.graphData.links.forEach(item => { if (item.ref) { item.color = {color: rootStyle.getPropertyValue("--b3-graph-ref-line").trim()}; } else { item.color = {color: rootStyle.getPropertyValue("--b3-graph-line").trim()}; } }); addScript(`${Constants.PROTYLE_CDN}/js/vis/vis-network.min.js?v=9.1.13`, "protyleVisScript").then(() => { this.network?.destroy(); if (!this.graphData || !this.graphData.nodes || this.graphData.nodes.length === 0) { return; } const config = window.siyuan.config.graph[this.type === "global" ? "global" : "local"]; const timestep = 32 < this.graphData.nodes.length ? 0.1 : 0.5; let maxVelocity = this.graphData.nodes.length; if (this.graphData.nodes.length > 1024) { maxVelocity = 1024; } if (this.graphData.nodes.length < 256) { maxVelocity = 256; } let minVelocity = this.graphData.nodes.length; if (this.graphData.nodes.length > 64) { minVelocity = 64; } if (this.graphData.nodes.length < 16) { minVelocity = 8; } const options = { autoResize: true, interaction: { hover: true, }, nodes: { borderWidth: 0, borderWidthSelected: 5, shape: "dot", font: { face: rootStyle.getPropertyValue("--b3-font-family-graph").trim(), size: 32, color: rootStyle.getPropertyValue("--b3-theme-on-background").trim(), }, color: { hover: { border: rootStyle.getPropertyValue("--b3-graph-hl-point").trim(), background: rootStyle.getPropertyValue("--b3-graph-hl-point").trim() }, highlight: { border: rootStyle.getPropertyValue("--b3-graph-hl-point").trim(), background: rootStyle.getPropertyValue("--b3-graph-hl-point").trim() }, } }, edges: { width: config.d3.linkWidth, arrowStrikethrough: false, smooth: false, color: { opacity: config.d3.lineOpacity, hover: rootStyle.getPropertyValue("--b3-graph-hl-line").trim(), highlight: rootStyle.getPropertyValue("--b3-graph-hl-line").trim(), } }, layout: { randomSeed: 0, improvedLayout: false, }, physics: { enabled: true, forceAtlas2Based: { theta: 0.5, gravitationalConstant: -config.d3.collideRadius, centralGravity: config.d3.centerStrength, springConstant: config.d3.collideStrength, springLength: config.d3.linkDistance, damping: 0.4, avoidOverlap: 0.5 }, maxVelocity: maxVelocity, minVelocity: minVelocity, solver: "forceAtlas2Based", stabilization: { enabled: true, iterations: 64, updateInterval: 64, onlyDynamicEdges: false, fit: true }, timestep: timestep, adaptiveTimestep: true, wind: {x: 0, y: 0} }, }; let i = Math.max(Math.ceil(this.graphData.nodes.length * 0.1), 128); let j = Math.max(Math.ceil(this.graphData.links.length * 0.1), 128); const nodes = new vis.DataSet(this.graphData.nodes.slice(0, i)); const edges = new vis.DataSet(this.graphData.links.slice(0, j)); const network = new vis.Network(this.graphElement, {nodes, edges}, options); const initialScale = Math.max(0.03, 1 - 0.3 * Math.floor(this.graphData.nodes.length / 128)); if (1 !== initialScale) { network.moveTo({ position: {x: 0, y: 0}, scale: initialScale, animation: false }); } const time = 256; const intervalNodeTime = Math.max(Math.ceil(time / 8), 32); let batch = this.graphData.nodes.length / time / 2; if (batch < 64) { batch = 64; } if (batch > 256) { batch = 256; } const intervalNode = setInterval(() => { if (!network.images) { clearInterval(intervalEdge); return; } const nodesAdded = this.graphData.nodes.slice(i, i + batch); if (nodesAdded.length === 0) { clearInterval(intervalNode); return; } network.body.data.nodes.add(nodesAdded); i += batch; }, intervalNodeTime); const intervalEdge = setInterval(() => { if (!network.images) { clearInterval(intervalEdge); return; } const edgesAdded = this.graphData.links.slice(j, j + batch); if (edgesAdded.length === 0) { clearInterval(intervalEdge); network.fit({ animation: true }); return; } network.body.data.edges.add(edgesAdded); j += batch; }, time); this.network = network; network.on("stabilizationIterationsDone", () => { network.physics.stopSimulation(); if (hl) { this.hlNode(this.blockId); } }); network.on("dragEnd", () => { setTimeout(() => { network.physics.stopSimulation(); }, 3000); }); network.on("click", (params: any) => { if (params.nodes.length !== 1) { return; } const node = this.graphData.nodes.find((item) => item.id === params.nodes[0]); if (!node) { return; } if (-1 < node.type.indexOf("tag")) { openGlobalSearch(this.app, `#${node.id}#`, !window.siyuan.ctrlIsPressed, {method: 0}); return; } if (window.siyuan.shiftIsPressed) { checkFold(node.id, (zoomIn, action: TProtyleAction[]) => { openFileById({ app: this.app, id: node.id, position: "bottom", action, zoomIn }); }); } else if (window.siyuan.altIsPressed) { checkFold(node.id, (zoomIn, action: TProtyleAction[]) => { openFileById({ app: this.app, id: node.id, position: "right", action, zoomIn }); }); } else if (window.siyuan.ctrlIsPressed) { window.siyuan.blockPanels.push(new BlockPanel({ app: this.app, isBacklink: false, x: params.event.center.x, y: params.event.center.y, refDefs: [{refID: node.id}] })); } else { checkFold(node.id, (zoomIn, action: TProtyleAction[]) => { openFileById({ app: this.app, id: node.id, action, zoomIn }); }); } }); }); }}