#1657 Handling class definitions for flowchart beta

cypress/integration/rendering/flowchart-v2.spec.js

@@ -125,6 +125,26 @@ describe('Flowchart v2', () => {
         expect(svg).to.not.have.attr('style');
       });
   });
+
+  it('V2 - 16: Render Stadium shape', () => {
+    imgSnapshotTest(
+      ` flowchart TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+      `,
+      { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+    );
+  });
+
   it('50: handle nested subgraphs in reverse order', () => {
     imgSnapshotTest(
       `flowchart LR

src/dagre-wrapper/nodes.js

@@ -839,6 +839,9 @@ export const insertNode = (elem, node, dir) => {
   if (node.tooltip) {
     el.attr('title', node.tooltip);
   }
+  if (node.class) {
+    el.attr('class', 'node default ' + node.class);
+  }
 
   nodeElems[node.id] = newEl;
 

src/diagrams/flowchart/flowDb.js

@@ -226,7 +226,8 @@ export const setDirection = function(dir) {
  */
 export const setClass = function(ids, className) {
   ids.split(',').forEach(function(_id) {
-    let id = version === 'gen-1' ? lookUpDomId(_id) : _id;
+    // let id = version === 'gen-2' ? lookUpDomId(_id) : _id;
+    let id = _id;
     // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof vertices[id] !== 'undefined') {
       vertices[id].classes.push(className);