#962 Set text color for flowchart link labels according to linkStyle definitions

cypress/integration/rendering/flowchart.spec.js

@@ -512,7 +512,7 @@ describe('Flowchart', () => {
     );
   });
 
-  it('24.1: Keep node label text (if already defined) when a style is applied', () => {
+  it('24: Keep node label text (if already defined) when a style is applied', () => {
     imgSnapshotTest(
       `graph LR
       A(( )) -->|step 1| B(( ))
@@ -524,7 +524,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
-it('24.2: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
+it('25: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
     imgSnapshotTest(
       `graph TB
       TITLE["Link Click Events<br>(click the nodes below)"]
@@ -544,11 +544,13 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
       );
   });
 
-  it('25: Set node text color according to style when html labels are enabled', () => {
+  it('26: Set text color of nodes and links according to styles when html labels are enabled', () => {
     imgSnapshotTest(
       `graph LR
-      A[red<br>text] --> B(blue<br>text)
+      A[red<br>text] -->|red<br>text| B(blue<br>text)
-      C[/red<br/>text/] --> D{blue<br/>text}
+      C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+      linkStyle 0 color:red;
+      linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
       style A color:red;
       style B color:blue;
       style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
@@ -560,11 +562,13 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
     );
   });
 
-  it('26: Set node text color according to style when html labels are disabled', () => {
+  it('27: Set text color of nodes and links according to styles when html labels are disabled', () => {
     imgSnapshotTest(
       `graph LR
-      A[red<br>text] --> B(blue<br>text)
+      A[red<br>text] -->|red<br>text| B(blue<br>text)
-      C[/red<br/>text/] --> D{blue<br/>text}
+      C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+      linkStyle 0 color:red;
+      linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
       style A color:red;
       style B color:blue;
       style C stroke:#ff0000,fill:#ffcccc,color:#ff0000

dist/index.html

@@ -371,8 +371,10 @@ graph TB
   <hr/>
   <div class="mermaid">
     graph LR
-    A[red<br>text] --> B(blue<br>text)
+    A[red<br>text] -->|red<br>text| B(blue<br>text)
-    C[/red<br/>text/] --> D{blue<br/>text}
+    C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+    linkStyle 0 color:red;
+    linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
     style A color:red;
     style B color:blue;
     style C stroke:#ff0000,fill:#ffcccc,color:#ff0000

docs/flowchart.md

@@ -497,7 +497,7 @@ Instead of ids, the order number of when the link was defined in the graph is us
 defined in the linkStyle statement will belong to the fourth link in the graph:
 
 ```
-linkStyle 3 stroke:#ff3,stroke-width:4px;
+linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
 ```
 
 

src/diagrams/flowchart/flowRenderer.js

@@ -176,6 +176,25 @@ export const addVertices = function(vert, g, svgId) {
  * @param {Object} g The graph object
  */
 export const addEdges = function(edges, g) {
+  const styleFromStyleArr = function(styleStr, arr, { label }) {
+    if (!label) {
+      // Create a compound style definition from the style definitions found for the node in the graph definition
+      for (let i = 0; i < arr.length; i++) {
+        if (typeof arr[i] !== 'undefined') {
+          styleStr = styleStr + arr[i] + ';';
+        }
+      }
+    } else {
+      // create the style definition for the text, if property is a text-property
+      for (let i = 0; i < arr.length; i++) {
+        if (typeof arr[i] !== 'undefined') {
+          if (arr[i].startsWith('color:')) styleStr = styleStr + arr[i] + ';';
+        }
+      }
+    }
+    return styleStr;
+  };
+
   let cnt = 0;
 
   let defaultStyle;
@@ -195,10 +214,11 @@ export const addEdges = function(edges, g) {
     }
 
     let style = '';
+    let labelStyle = '';
+
     if (typeof edge.style !== 'undefined') {
-      edge.style.forEach(function(s) {
+      style = styleFromStyleArr(style, edge.style, { label: false });
-        style = style + s + ';';
+      labelStyle = styleFromStyleArr(labelStyle, edge.style, { label: true });
-      });
     } else {
       switch (edge.stroke) {
         case 'normal':
@@ -215,7 +235,9 @@ export const addEdges = function(edges, g) {
           break;
       }
     }
+
     edgeData.style = style;
+    edgeData.labelStyle = labelStyle;
 
     if (typeof edge.interpolate !== 'undefined') {
       edgeData.curve = interpolateToCurve(edge.interpolate, d3.curveLinear);
@@ -242,6 +264,8 @@ export const addEdges = function(edges, g) {
 
         if (typeof edge.style === 'undefined') {
           edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
+        } else {
+          edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
         }
       }
     }