#2088 Add the possibility to theme forks and joins using theme variables

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>

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)

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
 }

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;

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;

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;

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;

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;