Merge pull request #1695 from mermaid-js/1694_style_flowchart

#1694 Applying styles from the graph definition for flowcharts

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

@@ -312,6 +312,16 @@ _one --> b
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
-
+  it('58: handle styling with style expressions', () => {
+    imgSnapshotTest(
+      `
+    flowchart LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
 
 });

cypress/integration/rendering/flowchart.spec.js

@@ -776,4 +776,16 @@ describe('Flowchart', () => {
         expect(svg).to.not.have.attr('style');
       });
   });
+  it('58: handle styling with style expressions', () => {
+    imgSnapshotTest(
+      `
+    graph LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+
 });

src/dagre-wrapper/nodes.js

@@ -261,6 +261,7 @@ const rect = (parent, node) => {
 
   rect
     .attr('class', 'basic label-container')
+    .attr('style', node.style)
     .attr('rx', node.rx)
     .attr('ry', node.ry)
     .attr('x', -bbox.width / 2 - halfPadding)

src/dagre-wrapper/shapes/util.js

@@ -15,7 +15,10 @@ export const labelHelper = (parent, node, _classes, isNode) => {
     .attr('id', node.domId || node.id);
 
   // Create the label and insert it after the rect
-  const label = shapeSvg.insert('g').attr('class', 'label');
+  const label = shapeSvg
+    .insert('g')
+    .attr('class', 'label')
+    .attr('style', node.labelStyle);
 
   const text = label
     .node()