Merge pull request #1274 from GDFaber/bug/apply_default_class_to_flowchart_nodes

Fix applying default class to flowchart nodes

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

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/>
 

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(' ');
     }

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() {