From 6e6ced2cee29fb41164716d15c09be3ca23226d6 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sat, 22 May 2021 20:13:31 +0200
Subject: [PATCH] #2088 Add the possibility to theme forks and joins using
 theme variables

---
 cypress/platform/knsv.html   | 23 +++++++----------------
 src/dagre-wrapper/nodes.js   |  2 --
 src/diagrams/state/styles.js | 12 +++++++++---
 src/themes/theme-base.js     |  2 +-
 src/themes/theme-dark.js     |  1 +
 src/themes/theme-default.js  |  1 +
 src/themes/theme-forest.js   |  1 +
 src/themes/theme-neutral.js  |  1 +
 8 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index c30289bc1..cc996067f 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -66,22 +66,13 @@ stateDiagram-v2
 
 </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-    %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
-    flowchart LR
-
-    subgraph TOP
-      direction TB
-      subgraph B1
-          direction RL
-          i1 -->f1
-      end
-      subgraph B2
-          direction BT
-          i2 -->f2
-      end
-    end
-    A --> TOP --> B
-    B1 --> B2
+    %%{init:{"theme":"neutral", "themeVariables": {"stateBkg ":"red", "innerEndBackground":"red"}}}%%
+    stateDiagram-v2
+    state fork [[fork]]
+    state join [[join]]
+     [*] --> fork
+     fork --> join
+     join --> [*]
   </div>
   <script src="./mermaid.js"></script>
     <script>
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index bd14c630c..20688234b 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -567,8 +567,6 @@ const forkJoin = (parent, node, dir) => {
 
   const shape = shapeSvg
     .append('rect')
-    .style('stroke', 'black')
-    .style('fill', 'black')
     .attr('x', (-1 * width) / 2)
     .attr('y', (-1 * height) / 2)
     .attr('width', width)
diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js
index 90d7d2a47..4f42025cd 100644
--- a/src/diagrams/state/styles.js
+++ b/src/diagrams/state/styles.js
@@ -82,11 +82,17 @@ g.stateGroup line {
 }
 
 .node circle.state-start {
-  fill: ${options.lineColor};
-  stroke: black;
+  fill: ${options.stateBorder || options.lineColor};
+  stroke: ${options.stateBorder || options.lineColor};
 }
+
+.node .fork-join {
+  fill: ${options.stateBorder};
+  stroke: ${options.stateBorder};
+}
+
 .node circle.state-end {
-  fill: ${options.primaryBorderColor};
+  fill: ${options.innerEndBackground || options.primaryBorderColor};
   stroke: ${options.background};
   stroke-width: 1.5
 }
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 0ae4fbedd..0241b8f61 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -121,7 +121,7 @@ class Theme {
     this.altBackground = this.altBackground || this.tertiaryColor;
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
-
+    this.innerEndBackground = this.primaryBorderColor;
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
     this.transitionColor = this.transitionColor || this.lineColor;
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index b31544418..fcc9db92b 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -136,6 +136,7 @@ class Theme {
     this.altBackground = this.altBackground || '#555';
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
+    this.innerEndBackground = this.primaryBorderColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js
index 3041aaff5..05122eb6e 100644
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -149,6 +149,7 @@ class Theme {
     this.altBackground = this.altBackground || '#f0f0f0';
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
+    this.innerEndBackground = this.primaryBorderColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js
index 10d05dc18..f1f9bf27c 100644
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -119,6 +119,7 @@ class Theme {
     this.altBackground = this.altBackground || '#f0f0f0';
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
+    this.innerEndBackground = this.primaryBorderColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
index fb5923d7d..f528bac55 100644
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -156,6 +156,7 @@ class Theme {
     this.altBackground = this.altBackground || '#f4f4f4';
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.stateBorder = this.stateBorder || '#000';
+    this.innerEndBackground = this.primaryBorderColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;