#1196 Keep flowchart node label text (if already defined) when a style is applied

cypress/integration/rendering/flowchart.spec.js

@@ -396,6 +396,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('16: Render Stadium shape', () => {
     imgSnapshotTest(
       ` graph TD
@@ -412,6 +413,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('17: Render multiline texts', () => {
     imgSnapshotTest(
       `graph LR
@@ -428,6 +430,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('18: Chaining of nodes', () => {
     imgSnapshotTest(
       `graph LR
@@ -436,6 +439,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('19: Multiple nodes and chaining in one statement', () => {
     imgSnapshotTest(
       `graph LR
@@ -444,6 +448,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('20: Multiple nodes and chaining in one statement', () => {
     imgSnapshotTest(
       `graph TD
@@ -453,6 +458,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('21: Render cylindrical shape', () => {
     imgSnapshotTest(
       `graph LR
@@ -474,6 +480,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('22: Render a simple flowchart with nodeSpacing set to 100', () => {
     imgSnapshotTest(
       `graph TD
@@ -487,6 +494,7 @@ describe('Flowchart', () => {
       { flowchart: { nodeSpacing: 50 } }
     );
   });
+
   it('23: Render a simple flowchart with rankSpacing set to 100', () => {
     imgSnapshotTest(
       `graph TD
@@ -500,4 +508,17 @@ describe('Flowchart', () => {
       { flowchart: { rankSpacing: '100' } }
     );
   });
+
+  it('24: Keep node label text (if already defined) when a style is applied', () => {
+    imgSnapshotTest(
+      `graph LR
+      A(( )) -->|step 1| B(( ))
+      B(( )) -->|step 2| C(( ))
+      C(( )) -->|step 3| D(( ))
+      linkStyle 1 stroke:greenyellow,stroke-width:2px
+      style C fill:greenyellow,stroke:green,stroke-width:4px
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });

dist/index.html

@@ -343,6 +343,14 @@ class A someclass;
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
   </div>
+  <div class="mermaid">
+    graph LR
+    A(( )) -->|step 1| B(( ))
+    B(( )) -->|step 2| C(( ))
+    C(( )) -->|step 3| D(( ))
+    linkStyle 1 stroke:greenyellow,stroke-width:2px
+    style C fill:greenyellow,stroke:green,stroke-width:4px
+  </div>
 
   <hr/>
 

src/diagrams/flowchart/flowDb.js

@@ -52,7 +52,7 @@ export const addVertex = function(_id, text, type, style, classes) {
 
     vertices[id].text = txt;
   } else {
-    if (!vertices[id].text) {
+    if (typeof vertices[id].text === 'undefined') {
       vertices[id].text = _id;
     }
   }

src/diagrams/flowchart/parser/flow-style.spec.js

@@ -86,6 +86,17 @@ describe('[Style] when parsing', () => {
     expect(vert['T'].styles[1]).toBe('border:1px solid red');
   });
 
+  it('should keep node label text (if already defined) when a style is applied', function() {
+    const res = flow.parser.parse('graph TD;A(( ));B((Test));C;style A background:#fff;style D border:1px solid red;');
+
+    const vert = flow.parser.yy.getVertices();
+
+    expect(vert['A'].text).toBe('');
+    expect(vert['B'].text).toBe('Test');
+    expect(vert['C'].text).toBe('C');
+    expect(vert['D'].text).toBe('D');
+  });
+
   it('should be possible to declare a class', function() {
     const res = flow.parser.parse(
       'graph TD;classDef exClass background:#bbb,border:1px solid red;'