Show vertex ids in graph
This commit is contained in:
parent
9eff884636
commit
5230f8664b
|
@ -29,16 +29,21 @@ export class Edge {
|
||||||
}
|
}
|
||||||
|
|
||||||
getHtml() {
|
getHtml() {
|
||||||
let html = '<table>';
|
const edges = this.getComorphicEdges();
|
||||||
for (const { type, weight } of this.getComorphicEdges()) {
|
let html = '';
|
||||||
|
html += `<span class=small>edge${edges.length > 1 ? 's' : ''}</span><br>`;
|
||||||
|
html += '<table>';
|
||||||
|
for (const { type, weight } of edges) {
|
||||||
html += `<tr><td>${type}</td><td>${weight}</td></tr>`;
|
html += `<tr><td>${type}</td><td>${weight}</td></tr>`;
|
||||||
}
|
}
|
||||||
html += '</table>';
|
html += '</table>';
|
||||||
|
html += `<span class=small>${this.from.id} → ${this.to.id}</span><br>`;
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
getFlowchartNode() {
|
getFlowchartNode() {
|
||||||
return `${Edge.getCombinedKey(this)}(${this.getHtml()})`;
|
return `${Edge.getCombinedKey(this)}("${this.getHtml()}")`;
|
||||||
}
|
}
|
||||||
|
|
||||||
displayEdgeNode() {
|
displayEdgeNode() {
|
||||||
|
|
|
@ -39,7 +39,7 @@ export class Vertex {
|
||||||
}
|
}
|
||||||
|
|
||||||
let html = '';
|
let html = '';
|
||||||
html += `<span class=small>${this.type}</span><br>`;
|
html += '<span class=small>vertex</span><br>';
|
||||||
html += `${this.label}`;
|
html += `${this.label}`;
|
||||||
html += '<table>';
|
html += '<table>';
|
||||||
for (const [key, value] of this.properties.entries()) {
|
for (const [key, value] of this.properties.entries()) {
|
||||||
|
@ -47,8 +47,11 @@ export class Vertex {
|
||||||
html += `<tr><td>${key}</td><td>${displayValue}</td></tr>`;
|
html += `<tr><td>${key}</td><td>${displayValue}</td></tr>`;
|
||||||
}
|
}
|
||||||
html += '</table>';
|
html += '</table>';
|
||||||
|
if (this.id !== this.label) {
|
||||||
|
html += `<span class=small>${this.id}</span><br>`;
|
||||||
|
}
|
||||||
html = html.replaceAll(/\n\s*/g, '');
|
html = html.replaceAll(/\n\s*/g, '');
|
||||||
this.graph.flowchart?.log(`${this.id}[${html}]`);
|
this.graph.flowchart?.log(`${this.id}["${html}"]`);
|
||||||
|
|
||||||
if (this.graph.editable && !this.installedClickCallback) {
|
if (this.graph.editable && !this.installedClickCallback) {
|
||||||
this.graph.flowchart?.log(`click ${this.id} WDGHandler${this.graph.index} "Edit Vertex ${this.id}"`);
|
this.graph.flowchart?.log(`click ${this.id} WDGHandler${this.graph.index} "Edit Vertex ${this.id}"`);
|
||||||
|
|
|
@ -23,7 +23,7 @@ export class WeightedDirectedGraph {
|
||||||
this.vertices = new Map();
|
this.vertices = new Map();
|
||||||
this.edgeTypes = new Map();
|
this.edgeTypes = new Map();
|
||||||
this.nextVertexId = 0;
|
this.nextVertexId = 0;
|
||||||
this.flowchart = undefined;
|
this.flowchart = scene?.flowchart;
|
||||||
this.editable = options.editable;
|
this.editable = options.editable;
|
||||||
|
|
||||||
// Mermaid supports a click callback, but we can't customize arguments; we just get the vertex ID.
|
// Mermaid supports a click callback, but we can't customize arguments; we just get the vertex ID.
|
||||||
|
|
|
@ -89,8 +89,6 @@ table {
|
||||||
form {
|
form {
|
||||||
min-width: 20em;
|
min-width: 20em;
|
||||||
}
|
}
|
||||||
.small {
|
span.small {
|
||||||
font-size: 8pt;
|
font-size: smaller;
|
||||||
line-height: 0;
|
|
||||||
color: #999999;
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue