Show vertex ids in graph

This commit is contained in:
Ladd Hoffman 2023-07-10 02:33:29 -05:00
parent 9eff884636
commit 5230f8664b
4 changed files with 16 additions and 10 deletions

View File

@ -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} &rarr; ${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() {

View File

@ -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}"`);

View File

@ -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.

View File

@ -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;
} }