diff --git a/forum-network/src/classes/supporting/edge.js b/forum-network/src/classes/supporting/edge.js index 14af725..d8e4017 100644 --- a/forum-network/src/classes/supporting/edge.js +++ b/forum-network/src/classes/supporting/edge.js @@ -29,16 +29,21 @@ export class Edge { } getHtml() { - let html = ''; - for (const { type, weight } of this.getComorphicEdges()) { + const edges = this.getComorphicEdges(); + let html = ''; + html += `edge${edges.length > 1 ? 's' : ''}
`; + html += '
'; + for (const { type, weight } of edges) { html += ``; } html += '
${type}${weight}
'; + html += `${this.from.id} → ${this.to.id}
`; + return html; } getFlowchartNode() { - return `${Edge.getCombinedKey(this)}(${this.getHtml()})`; + return `${Edge.getCombinedKey(this)}("${this.getHtml()}")`; } displayEdgeNode() { diff --git a/forum-network/src/classes/supporting/vertex.js b/forum-network/src/classes/supporting/vertex.js index d37967f..e7ee468 100644 --- a/forum-network/src/classes/supporting/vertex.js +++ b/forum-network/src/classes/supporting/vertex.js @@ -39,7 +39,7 @@ export class Vertex { } let html = ''; - html += `${this.type}
`; + html += 'vertex
'; html += `${this.label}`; html += ''; for (const [key, value] of this.properties.entries()) { @@ -47,8 +47,11 @@ export class Vertex { html += ``; } html += '
${key}${displayValue}
'; + if (this.id !== this.label) { + html += `${this.id}
`; + } 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) { this.graph.flowchart?.log(`click ${this.id} WDGHandler${this.graph.index} "Edit Vertex ${this.id}"`); diff --git a/forum-network/src/classes/supporting/wdg.js b/forum-network/src/classes/supporting/wdg.js index c1768a0..ab083e7 100644 --- a/forum-network/src/classes/supporting/wdg.js +++ b/forum-network/src/classes/supporting/wdg.js @@ -23,7 +23,7 @@ export class WeightedDirectedGraph { this.vertices = new Map(); this.edgeTypes = new Map(); this.nextVertexId = 0; - this.flowchart = undefined; + this.flowchart = scene?.flowchart; this.editable = options.editable; // Mermaid supports a click callback, but we can't customize arguments; we just get the vertex ID. diff --git a/forum-network/src/index.css b/forum-network/src/index.css index b9108fc..a42bab2 100644 --- a/forum-network/src/index.css +++ b/forum-network/src/index.css @@ -89,8 +89,6 @@ table { form { min-width: 20em; } -.small { - font-size: 8pt; - line-height: 0; - color: #999999; +span.small { + font-size: smaller; } \ No newline at end of file