From ce233160081dfb722009d1e9d9287432144637c6 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Wed, 23 Sep 2020 19:51:16 +0200
Subject: [PATCH] #1694 Applying styles from the graph definition for
 flowcharts

---
 cypress/integration/rendering/flowchart-v2.spec.js | 12 +++++++++++-
 cypress/integration/rendering/flowchart.spec.js    | 12 ++++++++++++
 src/dagre-wrapper/nodes.js                         |  1 +
 src/dagre-wrapper/shapes/util.js                   |  5 ++++-
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index b2b72d97b..e7ce3e358 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/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'}
+    );
+  });
 
 });
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index bf03696a2..eb8c8cf81 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/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'}
+    );
+  });
+
 });
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index 27c65443c..c016a7850 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/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)
diff --git a/src/dagre-wrapper/shapes/util.js b/src/dagre-wrapper/shapes/util.js
index 4fca2976d..f4717412e 100644
--- a/src/dagre-wrapper/shapes/util.js
+++ b/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()