#3358 Edge labels

mermaid-js · Jan 4, 2024 · 72135c2 · 72135c2
1 parent d0eca26
commit 72135c2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -79,7 +79,7 @@
         E
         F
       end
-      E --> A
+      E -- "apa" --> A
     </pre>
     <pre id="diagram" class="mermaid2">
 block-beta

diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -183,9 +183,9 @@ document
 
 link
   : LINK
-  { yy.getLogger().info("Rule: link: ", $1, yytext); }
+  { yy.getLogger().info("Rule: link: ", $1, yytext); $$={edgeTypeStr: $1, label:''}; }
   | START_LINK LINK_LABEL STR LINK
-  { yy.getLogger().info("Rule: LABEL link: ", $1, $3, $4); $$=$4; }
+  { yy.getLogger().info("Rule: LABEL link: ", $1, $3, $4); $$={edgeTypeStr: $4, label:$3}; }
   ;
 
 statement
@@ -198,11 +198,11 @@ statement
 
 nodeStatement
   : nodeStatement link node {
-    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr: ',$2);
-    const edgeData = yy.edgeStrToEdgeData($2)
+    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr: ',$2.edgeTypeStr);
+    const edgeData = yy.edgeStrToEdgeData($2.edgeTypeStr)
     $$ = [
       {id: $1.id, label: $1.label, type:$1.type, directions: $1.directions},
-      {id: $1.id + '-' + $3.id, start: $1.id, end: $3.id, label: $3.label, type: 'edge', directions: $3.directions, arrowTypeEnd: edgeData, arrowTypeStart: 'arrow_open' },
+      {id: $1.id + '-' + $3.id, start: $1.id, end: $3.id, label: $2.label, type: 'edge', directions: $3.directions, arrowTypeEnd: edgeData, arrowTypeStart: 'arrow_open' },
       {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}
       ];
     }

diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -1,6 +1,6 @@
 import { getStylesFromArray } from '../../utils.js';
 import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js';
-import { insertEdge } from '../../dagre-wrapper/edges.js';
+import { insertEdge, insertEdgeLabel } from '../../dagre-wrapper/edges.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { getConfig } from '../../config.js';
 import { ContainerElement } from 'd3';
@@ -243,7 +243,6 @@ export async function insertEdges(
           { v: edge.start, w: edge.end, name: edge.id },
           {
             ...edge,
-            // arrowHead: 'normal',
             arrowTypeEnd: edge.arrowTypeEnd,
             arrowTypeStart: edge.arrowTypeStart,
             points,
@@ -253,6 +252,17 @@ export async function insertEdges(
           'block',
           g
         );
+        if (edge.label) {
+          await insertEdgeLabel(elem, {
+            ...edge,
+            label: edge.label,
+            labelStyle: 'stroke: #333; stroke-width: 1.5px;fill:none;',
+            arrowTypeEnd: edge.arrowTypeEnd,
+            arrowTypeStart: edge.arrowTypeStart,
+            points,
+            classes: 'edge-thickness-normal edge-pattern-solid flowchart-link LS-a1 LE-b1',
+          });
+        }
       }
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,7 +79,7 @@ @@
             E
             F
           end
-          E --> A
+          E -- "apa" --> A
         </pre>
         <pre id="diagram" class="mermaid2">
     block-beta
@@ Expand Down @@