From 85e58faa78bf1f441738ebbac648a3c872196020 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 10 Oct 2019 17:57:29 +0200
Subject: [PATCH] #945 White background and      forks in composite mode

---
 .../rendering/stateDiagram.spec.js            | 22 ++++++++++++
 dist/index.html                               |  4 +++
 src/diagrams/state/shapes.js                  | 36 ++++++++++++++++---
 src/diagrams/state/stateRenderer.js           |  4 +++
 4 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index bb93511a9..2c6bdb1e5 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -173,6 +173,28 @@ describe('State diagram', () => {
       { logLevel: 0 }
     );
   });
+  it('should render forks in composit states', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+      [*]-->TV
+
+      state TV {
+        state fork_state &lt;&lt;fork&gt;&gt;
+        [*] --> fork_state
+        fork_state --> State2
+        fork_state --> State3
+
+        state join_state &lt;&lt;join&gt;&gt;
+        State2 --> join_state
+        State3 --> join_state
+        join_state --> State4
+        State4 --> [*]
+      }
+      `,
+      { logLevel: 0 }
+    );
+  });
   it('should render forks and joins', () => {
     imgSnapshotTest(
       `
diff --git a/dist/index.html b/dist/index.html
index 2da7d74d4..f1ce7fa8e 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -418,6 +418,10 @@ class Class10 {
   size()
 }
   </div>
+  <div class="mermaid">
+    stateDiagram
+      s1
+      </div>
   <script src="./mermaid.js"></script>
   <script>
     mermaid.initialize({
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index 2f07f8fc3..d8e1fdf5a 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -158,11 +158,29 @@ export const addIdAndBox = (g, stateDef) => {
   title.attr('x', graphBox.width / 2 - title.node().getBBox().width / 2);
   descrLine.attr('x2', graphBox.width + conf.padding);
 
+  // White color
+  g.insert('rect', ':first-child')
+    .attr('x', graphBox.x)
+    .attr('y', lineY)
+    .attr('style', 'fill: white; border-bottom: 1px')
+    .attr('width', graphBox.width + conf.padding)
+    .attr('height', graphBox.height + 3 + conf.textHeight - 17)
+    .attr('rx', '0');
+
+  // Title background
   g.insert('rect', ':first-child')
     .attr('x', graphBox.x)
     .attr('y', -15 - conf.textHeight - conf.padding)
     .attr('width', graphBox.width + conf.padding)
-    .attr('height', graphBox.height + 3 + conf.textHeight)
+    .attr('height', 30)
+    .attr('rx', '5');
+
+  // Full background
+  g.insert('rect', ':first-child')
+    .attr('x', graphBox.x)
+    .attr('y', -15 - conf.textHeight - conf.padding)
+    .attr('width', graphBox.width + conf.padding)
+    .attr('height', graphBox.height + 3 + conf.textHeight + 10)
     .attr('rx', '5');
 
   return g;
@@ -184,13 +202,21 @@ const drawEndState = g => {
     .attr('cx', conf.padding + 7)
     .attr('cy', conf.padding + 7);
 };
-const drawForkJoinState = g => {
+const drawForkJoinState = (g, stateDef) => {
+  let width = 70;
+  let height = 7;
+
+  if (Math.PI > 3 || stateDef.parentId) {
+    let tmp = width;
+    width = height;
+    height = tmp;
+  }
   return g
     .append('rect')
     .style('stroke', 'black')
     .style('fill', 'black')
-    .attr('width', 70)
-    .attr('height', 7)
+    .attr('width', width)
+    .attr('height', height)
     .attr('x', conf.padding)
     .attr('y', conf.padding);
 };
@@ -286,7 +312,7 @@ export const drawState = function(elem, stateDef, graph, doc) {
 
   if (stateDef.type === 'start') drawStartState(g);
   if (stateDef.type === 'end') drawEndState(g);
-  if (stateDef.type === 'fork' || stateDef.type === 'join') drawForkJoinState(g);
+  if (stateDef.type === 'fork' || stateDef.type === 'join') drawForkJoinState(g, stateDef);
   if (stateDef.type === 'note') drawNote(stateDef.note.text, g);
   if (stateDef.type === 'divider') drawDivider(g);
   if (stateDef.type === 'default' && stateDef.descriptions.length === 0)
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index 5f57baf5c..831c1e0b4 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -152,6 +152,10 @@ const renderDoc = (doc, diagram, parentId) => {
   for (let i = 0; i < keys.length; i++) {
     const stateDef = states[keys[i]];
 
+    if (parentId) {
+      stateDef.parentId = parentId;
+    }
+
     let node;
     if (stateDef.doc) {
       let sub = diagram