From d67e49400f20ae4d7c2cb9c840c84bfecefe1344 Mon Sep 17 00:00:00 2001
From: Marc Faber <faber@genodata.de>
Date: Mon, 24 Feb 2020 01:31:39 +0100
Subject: [PATCH] #684 Fix applying default class to flowchart nodes

---
 .../integration/rendering/flowchart.spec.js   | 36 ++++++++++++++++++-
 dist/index.html                               | 11 ++++++
 src/diagrams/flowchart/flowRenderer.js        |  2 +-
 src/diagrams/flowchart/flowRenderer.spec.js   | 34 ++++++++++++++++++
 4 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index bc6c68f6e..c88129ddc 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -524,7 +524,8 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
-it('25: 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)"]
@@ -583,6 +584,39 @@ it('25: Handle link click events (link, anchor, mailto, other protocol, script)'
       { flowchart: { htmlLabels: false } }
     );
   });
+
+  it('28: Apply default class to all nodes which do not have another class assigned (htmlLabels enabled)', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[myClass1] --> B[default] & C[default]
+      B[default] & C[default] --> D[myClass2]
+      classDef default stroke-width:2px,fill:none,stroke:silver
+      classDef node color:red
+      classDef myClass1 color:#0000ff
+      classDef myClass2 stroke:#0000ff,fill:#ccccff
+      class A myClass1
+      class D myClass2
+      `,
+      { flowchart: { htmlLabels: true } }
+    );
+  });
+
+  it('29: Apply default class to all nodes which do not have another class assigned (htmlLabels disabled)', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[myClass1] --> B[default] & C[default]
+      B[default] & C[default] --> D[myClass2]
+      classDef default stroke-width:2px,fill:none,stroke:silver
+      classDef node color:red
+      classDef myClass1 color:#0000ff
+      classDef myClass2 stroke:#0000ff,fill:#ccccff
+      class A myClass1
+      class D myClass2
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
   it('30: Possibility to style text color of nodes and subgraphs as well as apply classes to subgraphs', () => {
     imgSnapshotTest(
       `graph LR
diff --git a/dist/index.html b/dist/index.html
index e28890ce7..46af0d709 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -384,6 +384,17 @@ graph TB
     click B "index.html#link-clicked" "link test"
     click D testClick "click test"
   </div>
+  <div class="mermaid">
+    graph TD
+    A[myClass1] --> B[default] & C[default]
+    B[default] & C[default] --> D[myClass2]
+    classDef default stroke-width:2px,fill:none,stroke:silver
+    classDef node color:red
+    classDef myClass1 color:#0000ff
+    classDef myClass2 stroke:#0000ff,fill:#ccccff
+    class A myClass1
+    class D myClass2
+  </div>
 
   <hr/>
 
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 8b1a95046..e572f9188 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -36,7 +36,7 @@ export const addVertices = function(vert, g, svgId) {
      * Variable for storing the classes for the vertex
      * @type {string}
      */
-    let classStr = '';
+    let classStr = 'default';
     if (vertex.classes.length > 0) {
       classStr = vertex.classes.join(' ');
     }
diff --git a/src/diagrams/flowchart/flowRenderer.spec.js b/src/diagrams/flowchart/flowRenderer.spec.js
index e3980ef1f..95419a5df 100644
--- a/src/diagrams/flowchart/flowRenderer.spec.js
+++ b/src/diagrams/flowchart/flowRenderer.spec.js
@@ -127,6 +127,40 @@ describe('the flowchart renderer', function() {
         expect(addedNodes[0][1]).toHaveProperty('labelStyle', expectedLabelStyle);
       });
     });
+
+    it(`should add default class to all nodes which do not have another class assigned`, function() {
+      const addedNodes = [];
+      const mockG = {
+        setNode: function(id, object) {
+          addedNodes.push([id, object]);
+        }
+      };
+      addVertices(
+        {
+          v1: {
+            type: 'rect',
+            id: 'defaultNode',
+            classes: [],
+            styles: [],
+            text: 'my vertex text'
+          },
+          v2: {
+            type: 'rect',
+            id: 'myNode',
+            classes: ['myClass'],
+            styles: [],
+            text: 'my vertex text'
+          }
+        },
+        mockG,
+        'svg-id'
+      );
+      expect(addedNodes).toHaveLength(2);
+      expect(addedNodes[0][0]).toEqual('defaultNode');
+      expect(addedNodes[0][1]).toHaveProperty('class', 'default');
+      expect(addedNodes[1][0]).toEqual('myNode');
+      expect(addedNodes[1][1]).toHaveProperty('class', 'myClass');
+    });
   });
 
   describe('when adding edges to a graph', function() {