From b1bfdec47306891c8b2ed6afd05f105fcaa10d70 Mon Sep 17 00:00:00 2001
From: Marc Faber <faber@genodata.de>
Date: Tue, 14 Jan 2020 23:37:30 +0100
Subject: [PATCH] #1196 Keep flowchart node label text (if already defined)
 when a style is applied

---
 .../integration/rendering/flowchart.spec.js   | 21 +++++++++++++++++++
 dist/index.html                               |  8 +++++++
 src/diagrams/flowchart/flowDb.js              |  2 +-
 .../flowchart/parser/flow-style.spec.js       | 11 ++++++++++
 4 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 8bb4b8dff..c9e0bad45 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/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 } }
+    );
+  });
 });
diff --git a/dist/index.html b/dist/index.html
index 4acc24c4f..6e228b9ae 100644
--- a/dist/index.html
+++ b/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/>
 
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index 4b78231c2..33c85a15d 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/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;
     }
   }
diff --git a/src/diagrams/flowchart/parser/flow-style.spec.js b/src/diagrams/flowchart/parser/flow-style.spec.js
index b9d678b54..db92660ae 100644
--- a/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/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;'