#815 Adding labels to edges

mermaid-js · Dec 11, 2022 · 14f7756 · 14f7756
1 parent 0b01c33
commit 14f7756
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -55,7 +55,7 @@
   </head>
   <body>
     <div>Security check</div>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 cyto TD
   %% I could not figure out how to use double quotes in labels in Mermaid
   subgraph ibm[IBM Espresso CPU]
@@ -109,21 +109,10 @@
   rtc{{rtc}}
 </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 cyto LR
-subgraph TOP
-    direction LR
-    subgraph B1
-        direction RL
-        i1 -->f1
-    end
-    subgraph B2
-        direction BT
-        i2 -->f2
-    end
-  end
-  B1 --> B2
-  F --> f1
+  B1 --be be--> B2
+  B1 --bo bo--> B3
   </pre
     >
     inside1 --> inside2 & inside3 & inside4 & inside5 & inside6 a(letter a<br />a) ---> b(letter

diff --git a/packages/mermaid-flowchart-v3/src/flowRenderer-v3.js b/packages/mermaid-flowchart-v3/src/flowRenderer-v3.js
@@ -3,6 +3,7 @@ import { select, line, curveLinear, curveCardinal, curveBasis, selectAll } from
 import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js';
 import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js';
+import createLabel from '../../mermaid/src/dagre-wrapper/createLabel';
 import dagre from 'cytoscape-dagre';
 // Replace with other function to avoid dependency to dagre-d3
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
@@ -247,9 +248,11 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
  * @param cy
  * @param diagObj
  * @param graph
+ * @param svg
  */
-export const addEdges = function (edges, diagObj, graph) {
+export const addEdges = function (edges, diagObj, graph, svg) {
   // log.info('abc78 edges = ', edges);
+  const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
   let cnt = 0;
   let linkIdCnt = {};
 
@@ -378,11 +381,30 @@ export const addEdges = function (edges, diagObj, graph) {
     edgeData.id = linkId;
     edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
 
+    const labelEl = createLabel(edgeData.label, edgeData.labelStyle);
+    labelsEl.node().appendChild(labelEl);
+    const labelBox = labelEl.firstChild.getBoundingClientRect();
+    // console.log('labelEl', labelEl);
     // Add the edge to the graph
     graph.edges.push({
       id: 'e' + edge.start + edge.end,
       sources: [edge.start],
       targets: [edge.end],
+      labelEl: labelEl,
+      labels: [
+        {
+          width: labelBox.width,
+          // width: 80,
+          height: labelBox.height,
+          orgWidth: labelBox.width,
+          orgHeight: labelBox.height,
+          text: edgeData.label,
+          layoutOptions: {
+            'edgeLabels.inline': 'true',
+            'edgeLabels.placement': 'CENTER',
+          },
+        },
+      ],
       edgeData,
       // targetPort: 'PortSide.NORTH',
       // id: cnt,
@@ -553,13 +575,24 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj) {
   // console.log('Edge ctrl points:', points);
   // const curve = line().curve(curveCardinal);
   const curve = line().curve(curveLinear);
-  const edge2 = edgesEl
+  const edgePath = edgesEl
     .insert('path')
     .attr('d', curve(points))
     // .attr('d', points))
     .attr('class', 'path')
     .attr('fill', 'none');
-  addmarkers(edge2, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute);
+  const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel');
+  const edgeEl = select(edgeG.node().appendChild(edge.labelEl));
+  // console.log('Edge label', edgeEl, edge);
+  const box = edgeEl.node().firstChild.getBoundingClientRect();
+  edgeEl.attr('width', box.width);
+  edgeEl.attr('height', box.height);
+  // edgeEl.height = 24;
+  edgeG.attr(
+    'transform',
+    `translate(${edge.labels[0].x - box.width / 2}, ${edge.labels[0].y - box.height / 2})`
+  );
+  addmarkers(edgesEl, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute);
   // edgesEl
   //   .append('circle')
   //   .style('stroke', 'red')
@@ -631,7 +664,7 @@ export const draw = function (text, id, _version, diagObj) {
         // 'elk.layered.spacing.nodeNodeBetweenLayers': '140',
         'elk.layered.spacing.edgeNodeBetweenLayers': '30',
         //   'elk.algorithm': 'layered',
-        'elk.direction': 'DOWN',
+        'elk.direction': 'WEST',
         //   'elk.port.side': 'SOUTH',
         // 'nodePlacement.strategy': 'SIMPLE',
         // 'org.eclipse.elk.spacing.labelLabel': 120,
@@ -685,7 +718,7 @@ export const draw = function (text, id, _version, diagObj) {
     graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
     const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
     const edges = diagObj.db.getEdges();
-    graph = addEdges(edges, diagObj, graph);
+    graph = addEdges(edges, diagObj, graph, svg);
 
     // Iterate through all nodes and add the top level nodes to the graph
     const nodes = Object.keys(nodeDb);
@@ -739,7 +772,7 @@ export const draw = function (text, id, _version, diagObj) {
     // };
     elk.layout(graph).then(function (g) {
       // elk.layout(graph2).then(function (g) {
-      // console.log('Layout (UGH)- ', g);
+      // console.log('Layout (UGH)- ', g, JSON.stringify(g));
       drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj);
 
       g.edges.map((edge, id) => {