#1783 Apply styles to all types of flowchart node shapes

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

@@ -362,6 +362,36 @@ flowchart TD
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+  it('60: handle styling for all node shapes', () => {
+    imgSnapshotTest(
+      `
+      flowchart LR
+      A[red text] -->|default style| B(blue text)
+      C([red text]) -->|default style| D[[blue text]]
+      E[(red text)] -->|default style| F((blue text))
+      G>red text] -->|default style| H{blue text}
+      I{{red text}} -->|default style| J[/blue text/]
+      K[\red text\] -->|default style| L[/blue text\]
+      M[\red text/] -->|default style| N[blue text]
+      linkStyle default color:Sienna;
+      style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style B stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style F stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style H stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style J stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style L stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style N stroke:#0000ff,fill:#ccccff,color:#0000ff
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
   it('61: fontawesome icons in edge labels', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/flowchart.spec.js

@@ -787,6 +787,36 @@ describe('Flowchart', () => {
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+  it('60: handle styling for all node shapes', () => {
+    imgSnapshotTest(
+      `
+      graph LR
+      A[red text] -->|default style| B(blue text)
+      C([red text]) -->|default style| D[[blue text]]
+      E[(red text)] -->|default style| F((blue text))
+      G>red text] -->|default style| H{blue text}
+      I{{red text}} -->|default style| J[/blue text/]
+      K[\red text\] -->|default style| L[/blue text\]
+      M[\red text/] -->|default style| N[blue text]
+      linkStyle default color:Sienna;
+      style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style B stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style F stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style H stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style J stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style L stroke:#0000ff,fill:#ccccff,color:#0000ff
+      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style N stroke:#0000ff,fill:#ccccff,color:#0000ff
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
   it('61: fontawesome icons in edge labels', () => {
     imgSnapshotTest(
       `

dist/flowchart.html

@@ -880,6 +880,63 @@
     class D myClass2
   </div>
 
+  <hr/>
+  <h2>Sample 18</h2>
+
+  <h3>graph</h3>
+  <div class="mermaid">
+    graph LR
+    A[red text] -->|default style| B(blue text)
+    C([red text]) -->|default style| D[[blue text]]
+    E[(red text)] -->|default style| F((blue text))
+    G>red text] -->|default style| H{blue text}
+    I{{red text}} -->|default style| J[/blue text/]
+    K[\red text\] -->|default style| L[/blue text\]
+    M[\red text/] -->|default style| N[blue text]
+    linkStyle default color:Sienna;
+    style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style B stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style F stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style H stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style J stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style L stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style N stroke:#0000ff,fill:#ccccff,color:#0000ff
+  </div>
+
+  <h3>flowchart</h3>
+  <div class="mermaid">
+    flowchart LR
+    A[red text] -->|default style| B(blue text)
+    C([red text]) -->|default style| D[[blue text]]
+    E[(red text)] -->|default style| F((blue text))
+    G>red text] -->|default style| H{blue text}
+    I{{red text}} -->|default style| J[/blue text/]
+    K[\red text\] -->|default style| L[/blue text\]
+    M[\red text/] -->|default style| N[blue text]
+    linkStyle default color:Sienna;
+    style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style B stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style F stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style H stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style J stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style L stroke:#0000ff,fill:#ccccff,color:#0000ff
+    style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style N stroke:#0000ff,fill:#ccccff,color:#0000ff
+  </div>
+
   <hr/>
 
   <h1 id="link-clicked">Anchor for "link-clicked" test</h1>

src/dagre-wrapper/nodes.js

@@ -20,10 +20,10 @@ const question = (parent, node) => {
     { x: 0, y: -s / 2 }
   ];
 
-  logger.info('Question main (Circle)');
-
   const questionElem = insertPolygonShape(shapeSvg, s, s, points);
+  questionElem.attr('style', node.style);
   updateNodeBounds(node, questionElem);
+
   node.intersect = function(point) {
     logger.warn('Intersect called');
     return intersect.polygon(node, points, point);
@@ -47,7 +47,9 @@ const hexagon = (parent, node) => {
     { x: m, y: -h },
     { x: 0, y: -h / 2 }
   ];
+
   const hex = insertPolygonShape(shapeSvg, w, h, points);
+  hex.attr('style', node.style);
   updateNodeBounds(node, hex);
 
   node.intersect = function(point) {
@@ -71,6 +73,7 @@ const rect_left_inv_arrow = (parent, node) => {
   ];
 
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
@@ -79,6 +82,7 @@ const rect_left_inv_arrow = (parent, node) => {
 
   return shapeSvg;
 };
+
 const lean_right = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
@@ -92,6 +96,7 @@ const lean_right = (parent, node) => {
   ];
 
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
@@ -114,6 +119,7 @@ const lean_left = (parent, node) => {
   ];
 
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
@@ -134,7 +140,9 @@ const trapezoid = (parent, node) => {
     { x: w - h / 6, y: -h },
     { x: h / 6, y: -h }
   ];
+
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
@@ -155,7 +163,9 @@ const inv_trapezoid = (parent, node) => {
     { x: w + (2 * h) / 6, y: -h },
     { x: (-2 * h) / 6, y: -h }
   ];
+
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
@@ -164,6 +174,7 @@ const inv_trapezoid = (parent, node) => {
 
   return shapeSvg;
 };
+
 const rect_right_inv_arrow = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
@@ -176,7 +187,9 @@ const rect_right_inv_arrow = (parent, node) => {
     { x: w + h / 2, y: -h },
     { x: 0, y: -h }
   ];
+
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
@@ -185,6 +198,7 @@ const rect_right_inv_arrow = (parent, node) => {
 
   return shapeSvg;
 };
+
 const cylinder = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
@@ -222,6 +236,7 @@ const cylinder = (parent, node) => {
   const el = shapeSvg
     .attr('label-offset-y', ry)
     .insert('path', ':first-child')
+    .attr('style', node.style)
     .attr('d', shape)
     .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
 
@@ -277,6 +292,7 @@ const rect = (parent, node) => {
 
   return shapeSvg;
 };
+
 const rectWithTitle = (parent, node) => {
   // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
 
@@ -389,6 +405,7 @@ const stadium = (parent, node) => {
   // add the rect
   const rect = shapeSvg
     .insert('rect', ':first-child')
+    .attr('style', node.style)
     .attr('rx', h / 2)
     .attr('ry', h / 2)
     .attr('x', -w / 2)
@@ -404,12 +421,14 @@ const stadium = (parent, node) => {
 
   return shapeSvg;
 };
+
 const circle = (parent, node) => {
   const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
   circle
+    .attr('style', node.style)
     .attr('rx', node.rx)
     .attr('ry', node.ry)
     .attr('r', bbox.width / 2 + halfPadding)
@@ -445,7 +464,9 @@ const subroutine = (parent, node) => {
     { x: -8, y: -h },
     { x: -8, y: 0 }
   ];
+
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {