From 5c71a3c85b03f90f427bba5b8ebbd8c6c3d20bad Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 4 Dec 2019 18:20:28 +0100
Subject: [PATCH] #1110 Fix for transparent rect under edge title, was
 misaligned

---
 cypress/platform/current.html | 61 ++++-------------------------------
 src/diagrams/state/shapes.js  |  8 ++---
 2 files changed, 10 insertions(+), 59 deletions(-)

diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index a6031d6fc..a1d3f0774 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -10,61 +10,14 @@
     <h1>info below</h1>
     <div style="display: flex;">
       <div class="mermaid">stateDiagram
-          state  P {
-            Child
-          }
+        [*] --> State1
+        State1 --> State2 : Transition 1
+        State1 --> State3 : Transition 2
+        State1 --> State4 : Transition 3
+        State1 --> State5 : Transition 4
+        State2 --> State3 : Transition 5
+        State1 --> [*]
       </div>
-
-      <div class="mermaid">stateDiagram
-        state P {
-          state  Par {
-            Child
-          }
-      }
-      </div>
-      <div class="mermaid">stateDiagram
-        state P {
-          state  GPar {
-            state Parent {
-              state "Long state description" as TheLongChild
-              TheLongChild : New line
-              TheLongChild : Another line
-              TheLongChild
-            }
-          }
-      }
-      </div>
-  </div>
-  <div style="display: flex;">
-    <div class="mermaid">stateDiagram
-        state  Parent {
-          C
-        }
-    </div>
-
-    <div class="mermaid">stateDiagram
-      state PilotCockpit {
-        state  Parent {
-          C
-        }
-    }
-    </div>
-    <div class="mermaid">stateDiagram
-      state Pilot {
-        state  GParent {
-          state Parent1 {
-            Child
-          }
-          state Parent2 {
-            Child2
-          }
-        }
-        state Parent3 {
-          Child4
-        }
-
-    }
-    </div>
 </div>
   <script src="./mermaid.js"></script>
     <script>
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index b6ab93a76..f4711d493 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -188,7 +188,6 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
   startX = orgX - pad;
   if (titleWidth > orgWidth) {
     startX = (orgWidth - width) / 2 + pad;
-    // startX = orgX + (orgWidth - titleWidth) / 2;
   }
   if (Math.abs(orgX - graphBox.x) < pad) {
     if (titleWidth > orgWidth) {
@@ -197,7 +196,7 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
   }
 
   const lineY = 1 - getConfig().state.textHeight;
-  // // White color
+  // White color
   g.insert('rect', ':first-child')
     .attr('x', startX)
     .attr('y', lineY)
@@ -210,10 +209,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
     .attr('rx', '0');
 
   title.attr('x', startX + pad);
-  // if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
   if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);
 
-  // // Title background
+  // Title background
   g.insert('rect', ':first-child')
     .attr('x', startX)
     .attr(
@@ -489,7 +487,7 @@ export const drawEdge = function(elem, path, relation) {
       .insert('rect', ':first-child')
       .attr('class', 'box')
       .attr('x', bounds.x - getConfig().state.padding / 2)
-      .attr('y', bounds.y + getConfig().state.padding / 2)
+      .attr('y', bounds.y - getConfig().state.padding / 2)
       .attr('width', bounds.width + getConfig().state.padding)
       .attr('height', bounds.height + getConfig().state.padding);