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

🎨 Dynamically loading graph nodes and edges https://github.com/siyuan-note/siyuan/issues/13014

Browse source
This commit is contained in:
Daniel 2024-11-03 23:04:50 +08:00
parent c90801cfdd
commit cf01041ea1
No known key found for this signature in database
GPG key ID: 86211BA83DF03017
1 changed files with 46 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/src/layout/dock/Graph.ts
View file

@ -569,10 +569,6 @@ export class Graph extends Model {
this.graphElement.firstElementChild.classList.remove("fn__none");
this.graphElement.firstElementChild.firstElementChild.setAttribute("style", "width:3%");
const config = window.siyuan.config.graph[this.type === "global" ? "global" : "local"];
const data = {
nodes: this.graphData.nodes,
edges: this.graphData.links,
};
const options = {
autoResize: true,
interaction: {
@ -609,7 +605,8 @@ export class Graph extends Model {
}
},
layout: {
improvedLayout: false
randomSeed: 0,
improvedLayout: false,
},
physics: {
enabled: true,
@ -628,7 +625,7 @@ export class Graph extends Model {
stabilization: {
enabled: true,
iterations: 256,
updateInterval: 25,
updateInterval: 64,
onlyDynamicEdges: false,
fit: true
},
@ -637,7 +634,49 @@ export class Graph extends Model {
wind: {x: 0, y: 0}
},
};
const nodes = new vis.DataSet();
const edges = new vis.DataSet();
const data = {nodes, edges}
const network = new vis.Network(this.graphElement.lastElementChild, data, options);
const interval = 32
let batch = this.graphData.nodes.length / interval * 2;
if (batch < 64) {
batch = 64;
}
if (batch > 256) {
batch = 256;
}
let i = 0;
setTimeout(() => {
const addNodes = () => {
const intervalId = setInterval(() => {
const nodes = this.graphData.nodes.slice(i, i + batch);
if (nodes.length === 0) {
clearInterval(intervalId);
return;
}
network.body.data.nodes.add(nodes);
i += batch;
}, interval);
};
addNodes();
});
setTimeout(() => {
let j = 0;
const addEdges = () => {
const intervalId = setInterval(() => {
const edges = this.graphData.links.slice(j, j + batch);
if (edges.length === 0) {
clearInterval(intervalId);
return;
}
network.body.data.edges.add(edges);
j += batch;
}, interval);
};
addEdges();
});
this.network = network;
network.on("stabilizationIterationsDone", () => {
network.physics.stopSimulation();
@ -653,6 +692,7 @@ export class Graph extends Model {
});
network.on("stabilizationProgress", (data: any) => {
this.graphElement.firstElementChild.firstElementChild.setAttribute("style", `width:${Math.max(5, data.iterations) / data.total * 100}%`);
console.log("nodes: " + this.network.body.data.nodes.length);
});
network.on("click", (params: any) => {
if (params.nodes.length !== 1) {