From e99d872f2b86012f164d6b28fd90b2d77a13fd79 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@users.noreply.github.com>
Date: Sun, 1 Dec 2019 09:15:56 +0100
Subject: [PATCH 1/4] Create FUNDING.yml

---
 .github/FUNDING.yml | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 .github/FUNDING.yml

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000000..bbda16a663
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [knsv]
+#patreon: # Replace with a single Patreon username
+#open_collective: # Replace with a single Open Collective username
+#ko_fi: # Replace with a single Ko-fi username
+#tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+#community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+#liberapay: # Replace with a single Liberapay username
+#issuehunt: # Replace with a single IssueHunt username
+#otechie: # Replace with a single Otechie username
+#custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

From 346328156ab668b9299e905407b01bdab6b8ab99 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 2 Dec 2019 21:10:37 +0100
Subject: [PATCH 2/4] #1110 Adding tests for this case and some calcuations for
 width

---
 cypress/integration/rendering/current.spec.js |  21 +-
 .../rendering/stateDiagram.spec.js            |  45 ++++
 cypress/platform/current.html                 |  53 ++++-
 src/diagrams/state/shapes.js                  | 211 +++++++++++++++---
 src/diagrams/state/stateRenderer.js           |   6 +-
 5 files changed, 288 insertions(+), 48 deletions(-)

diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
index 1ed1c9d5cd..bd4eb888b5 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@@ -2,19 +2,20 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('State diagram', () => {
-  it('should render a flowchart full of circles', () => {
+  it('should render a state with states in it', () => {
     imgSnapshotTest(
       `
-    stateDiagram
-    State1: The state with a note
-    note right of State1
-      Important information! You\ncan write
-      notes with multiple lines...
-      Here is another line...
-      And another line...
-    end note
+      stateDiagram
+      state PersonalizedCockpit {
+        Other
+        state  Parent {
+          C
+        }
+    }
     `,
-      {}
+      {
+        logLevel: 0,
+      }
     );
   });
 });
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index e4231261e8..0ab68713ef 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -106,6 +106,22 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render a note with multiple lines in it', () => {
+    imgSnapshotTest(
+      `
+    stateDiagram
+    State1: The state with a note
+    note right of State1
+      Important information! You\ncan write
+      notes with multiple lines...
+      Here is another line...
+      And another line...
+    end note
+    `,
+      {}
+    );
+  });
+
   it('should render a states with descriptions including multi-line descriptions', () => {
     imgSnapshotTest(
       `
@@ -276,4 +292,33 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render a state with states in it', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+      state PilotCockpit {
+        state  Parent {
+          C
+        }
+    }
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
+  it('Simplest compone state', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+        state  Parent {
+          C
+        }
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
+
 });
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index c586863d94..4cf13b1cf4 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -8,12 +8,55 @@
   </head>
   <body>
     <h1>info below</h1>
-    <div class="mermaid">graph TB
-      a --> b
-      a --> c
-      a --> d
+    <div style="display: flex;">
+      <div class="mermaid">stateDiagram
+          state  P {
+            Child
+          }
+      </div>
+
+      <div class="mermaid">stateDiagram
+        state P {
+          state  Par {
+            Child
+          }
+      }
+      </div>
+      <div class="mermaid">stateDiagram
+        state P {
+          state  GPar {
+            state Parent {
+              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 PilotCockpit {
+        state  GParent {
+          state Parent {
+            Child
+          }
+        }
+    }
     </div>
-    <script src="./mermaid.js"></script>
+</div>
+  <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
         theme: 'forest',
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index c8cf181244..955e60adcc 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -129,7 +129,131 @@ export const drawDescrState = (g, stateDef) => {
  * Adds the creates a box around the existing content and adds a
  * panel for the id on top of the content.
  */
-export const addIdAndBox = (g, stateDef) => {
+/**
+ * Function that creates an title row and a frame around a substate for a composit state diagram.
+ * The function returns a new d3 svg object with updated width and height properties;
+ * @param {*} g The d3 svg object for the substate to framed
+ * @param {*} stateDef The info about the
+ */
+export const addTitleAndBox = (g, stateDef) => {
+  const pad = getConfig().state.padding;
+  const dblPad = 2 * getConfig().state.padding;
+  const orgBox = g.node().getBBox();
+  const orgWidth = orgBox.width;
+  const orgX = orgBox.x;
+
+  const title = g
+    .append('text')
+    .attr('x', 0)
+    .attr('y', getConfig().state.titleShift)
+    .attr('font-size', getConfig().state.fontSize)
+    .attr('class', 'state-title')
+    .text(stateDef.id);
+
+  const titleBox = title.node().getBBox();
+  const titleWidth = titleBox.width + dblPad;
+  let width = Math.max(titleWidth, orgWidth); // + dblPad;
+  if (width === orgWidth) {
+    width = width + dblPad;
+  }
+  let startX;
+  startX = orgBox.x - pad;
+  // const lineY = 1 - getConfig().state.textHeight;
+  // const descrLine = g
+  //   .append('line') // text label for the x axis
+  //   .attr('x1', 0)
+  //   .attr('y1', lineY)
+  //   .attr('y2', lineY)
+  //   .attr('class', 'descr-divider');
+
+  const graphBox = g.node().getBBox();
+  // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
+  if (titleWidth > orgWidth) {
+    startX = (orgWidth - width) / 2 + pad;
+  } else {
+    startX = orgX - pad;
+  }
+  // descrLine.attr('x2', graphBox.width + getConfig().state.padding);
+
+  if (stateDef.doc) {
+    // console.warn(
+    //   stateDef.id,
+    //   ' orgWidth: ',
+    //   orgWidth,
+    //   ' adjusted orgWidth: ',
+    //   orgWidth - dblPad,
+    //   titleWidth,
+    //   stateDef.doc
+    // );
+    // startX = orgX - (orgWidth - width) / 2 - pad;
+    // console.warn(' orgX: ', orgX, graphBox.x);
+    console.warn(
+      stateDef.id,
+      'orgX: ',
+      orgX,
+      'width: ',
+      width,
+      'titleWidth: ',
+      titleWidth,
+      'orgWidth: ',
+      orgWidth,
+      'width',
+      width
+    );
+  }
+
+  if (Math.abs(orgX - graphBox.x) < pad) {
+    console.warn('resetting startX', startX);
+    startX = orgX - (titleWidth - orgWidth) / 2;
+  }
+  console.warn('startX', startX);
+  // // White color
+  // g.insert('rect', ':first-child')
+  //   .attr('x', graphBox.x)
+  //   .attr('y', lineY)
+  //   .attr('class', 'composit')
+  //   .attr('width', graphBox.width + getConfig().state.padding)
+  //   .attr(
+  //     'height',
+  //     graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
+  //   )
+  //   .attr('rx', '0');
+
+  title.attr('x', startX + pad);
+  if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
+
+  // // Title background
+  g.insert('rect', ':first-child')
+    .attr('x', startX)
+    .attr(
+      'y',
+      getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
+    )
+    .attr('width', width)
+    // Just needs to be higher then the descr line, will be clipped by the white color box
+    .attr('height', getConfig().state.textHeight * 3)
+    .attr('rx', getConfig().state.radius);
+
+  // Full background
+  g.insert('rect', ':first-child')
+    .attr('x', startX)
+    .attr(
+      'y',
+      getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
+    )
+    .attr('width', width)
+    .attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
+    .attr('rx', getConfig().state.radius);
+
+  return g;
+};
+export const addTitleAndBoxOrg = (g, stateDef) => {
+  const pad = getConfig().state.padding;
+  const dblPad = 2 * getConfig().state.padding;
+  const orgBox = g.node().getBBox();
+  const orgWidth = orgBox.width + dblPad;
+  const orgX = orgBox.x;
+
   // TODO Move hardcodings to conf
   // const addTspan = function(textEl, txt, isFirst) {
   //   const tSpan = textEl
@@ -140,60 +264,87 @@ export const addIdAndBox = (g, stateDef) => {
   //     tSpan.attr('dy', getConfig().state.textHeight);
   //   }
   // };
+
+  /*
+    ct = tw/2
+    cg = gw/2
+  */
   const title = g
     .append('text')
-    .attr('x', 2 * getConfig().state.padding)
+    .attr('x', 0)
     .attr('y', getConfig().state.titleShift)
     .attr('font-size', getConfig().state.fontSize)
     .attr('class', 'state-title')
     .text(stateDef.id);
 
   const titleBox = title.node().getBBox();
-
-  const lineY = 1 - getConfig().state.textHeight;
-  const descrLine = g
-    .append('line') // text label for the x axis
-    .attr('x1', 0)
-    .attr('y1', lineY)
-    .attr('y2', lineY)
-    .attr('class', 'descr-divider');
+  const titleWidth = titleBox.width + dblPad;
+  const width = Math.max(titleWidth, orgWidth + dblPad);
+  let startX;
+  startX = orgBox.x - pad;
+  // const lineY = 1 - getConfig().state.textHeight;
+  // const descrLine = g
+  //   .append('line') // text label for the x axis
+  //   .attr('x1', 0)
+  //   .attr('y1', lineY)
+  //   .attr('y2', lineY)
+  //   .attr('class', 'descr-divider');
 
   const graphBox = g.node().getBBox();
-  title.attr('x', graphBox.width / 2 - titleBox.width / 2);
-  descrLine.attr('x2', graphBox.width + getConfig().state.padding);
-
-  // White color
-  g.insert('rect', ':first-child')
-    .attr('x', graphBox.x)
-    .attr('y', lineY)
-    .attr('class', 'composit')
-    .attr('width', graphBox.width + getConfig().state.padding)
-    .attr(
-      'height',
-      graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
-    )
-    .attr('rx', '0');
-
-  // Title background
+  // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
+  if (titleWidth > orgWidth) {
+    title.attr('x', (orgWidth - width) / 2 + pad);
+    startX = (orgWidth - width) / 2;
+  }
+  if (titleWidth <= orgWidth) title.attr('x', (orgWidth - width) / 2);
+  // descrLine.attr('x2', graphBox.width + getConfig().state.padding);
+
+  if (stateDef.doc) {
+    console.warn(
+      stateDef.id,
+      ' orgWidth: ',
+      orgWidth,
+      ' adjusted orgWidth: ',
+      orgWidth - dblPad,
+      titleWidth,
+      width,
+      stateDef.doc
+    );
+    startX = orgX - (orgWidth - width) / 2 - pad;
+    console.warn(' orgX: ', orgX);
+  }
+  // // White color
+  // g.insert('rect', ':first-child')
+  //   .attr('x', graphBox.x)
+  //   .attr('y', lineY)
+  //   .attr('class', 'composit')
+  //   .attr('width', graphBox.width + getConfig().state.padding)
+  //   .attr(
+  //     'height',
+  //     graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
+  //   )
+  //   .attr('rx', '0');
+
+  // // Title background
   g.insert('rect', ':first-child')
-    .attr('x', graphBox.x)
+    .attr('x', startX)
     .attr(
       'y',
       getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
     )
-    .attr('width', graphBox.width + getConfig().state.padding)
+    .attr('width', width)
     // Just needs to be higher then the descr line, will be clipped by the white color box
     .attr('height', getConfig().state.textHeight * 3)
     .attr('rx', getConfig().state.radius);
 
   // Full background
   g.insert('rect', ':first-child')
-    .attr('x', graphBox.x)
+    .attr('x', startX)
     .attr(
       'y',
       getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
     )
-    .attr('width', graphBox.width + getConfig().state.padding)
+    .attr('width', width)
     .attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
     .attr('rx', getConfig().state.radius);
 
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index bc21e6beb7..b64b117bf7 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -5,7 +5,7 @@ import { logger } from '../../logger';
 import stateDb from './stateDb';
 import { parser } from './parser/stateDiagram';
 // import idCache from './id-cache';
-import { drawState, addIdAndBox, drawEdge } from './shapes';
+import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
 
 parser.yy = stateDb;
@@ -100,7 +100,7 @@ export const draw = function(text, id) {
   // diagram.attr('height', height);
 
   // Zoom in a bit
-  diagram.attr('width', width * 2);
+  diagram.attr('width', width);
   // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
   diagram.attr(
     'viewBox',
@@ -189,7 +189,7 @@ const renderDoc = (doc, diagram, parentId) => {
 
       if (first) {
         // first = false;
-        sub = addIdAndBox(sub, stateDef);
+        sub = addTitleAndBox(sub, stateDef);
         let boxBounds = sub.node().getBBox();
         node.width = boxBounds.width;
         node.height = boxBounds.height + 2 * conf.padding;

From fcd1e106a5a686537daa00434e9d0eace02ce901 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 2 Dec 2019 21:22:22 +0100
Subject: [PATCH 3/4] #1110 Handling case when title is less wide then subgraph

---
 src/diagrams/state/shapes.js | 118 +++--------------------------------
 1 file changed, 8 insertions(+), 110 deletions(-)

diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index 955e60adcc..422374fec3 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -157,7 +157,6 @@ export const addTitleAndBox = (g, stateDef) => {
     width = width + dblPad;
   }
   let startX;
-  startX = orgBox.x - pad;
   // const lineY = 1 - getConfig().state.textHeight;
   // const descrLine = g
   //   .append('line') // text label for the x axis
@@ -168,11 +167,6 @@ export const addTitleAndBox = (g, stateDef) => {
 
   const graphBox = g.node().getBBox();
   // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
-  if (titleWidth > orgWidth) {
-    startX = (orgWidth - width) / 2 + pad;
-  } else {
-    startX = orgX - pad;
-  }
   // descrLine.attr('x2', graphBox.width + getConfig().state.padding);
 
   if (stateDef.doc) {
@@ -202,9 +196,16 @@ export const addTitleAndBox = (g, stateDef) => {
     );
   }
 
+  startX = orgX - pad;
+  if (titleWidth > orgWidth) {
+    startX = (orgWidth - width) / 2 + pad;
+    // startX = orgX + (orgWidth - titleWidth) / 2;
+  }
   if (Math.abs(orgX - graphBox.x) < pad) {
     console.warn('resetting startX', startX);
-    startX = orgX - (titleWidth - orgWidth) / 2;
+    if (titleWidth > orgWidth) {
+      startX = orgX - (titleWidth - orgWidth) / 2;
+    }
   }
   console.warn('startX', startX);
   // // White color
@@ -247,109 +248,6 @@ export const addTitleAndBox = (g, stateDef) => {
 
   return g;
 };
-export const addTitleAndBoxOrg = (g, stateDef) => {
-  const pad = getConfig().state.padding;
-  const dblPad = 2 * getConfig().state.padding;
-  const orgBox = g.node().getBBox();
-  const orgWidth = orgBox.width + dblPad;
-  const orgX = orgBox.x;
-
-  // TODO Move hardcodings to conf
-  // const addTspan = function(textEl, txt, isFirst) {
-  //   const tSpan = textEl
-  //     .append('tspan')
-  //     .attr('x', 2 * getConfig().state.padding)
-  //     .text(txt);
-  //   if (!isFirst) {
-  //     tSpan.attr('dy', getConfig().state.textHeight);
-  //   }
-  // };
-
-  /*
-    ct = tw/2
-    cg = gw/2
-  */
-  const title = g
-    .append('text')
-    .attr('x', 0)
-    .attr('y', getConfig().state.titleShift)
-    .attr('font-size', getConfig().state.fontSize)
-    .attr('class', 'state-title')
-    .text(stateDef.id);
-
-  const titleBox = title.node().getBBox();
-  const titleWidth = titleBox.width + dblPad;
-  const width = Math.max(titleWidth, orgWidth + dblPad);
-  let startX;
-  startX = orgBox.x - pad;
-  // const lineY = 1 - getConfig().state.textHeight;
-  // const descrLine = g
-  //   .append('line') // text label for the x axis
-  //   .attr('x1', 0)
-  //   .attr('y1', lineY)
-  //   .attr('y2', lineY)
-  //   .attr('class', 'descr-divider');
-
-  const graphBox = g.node().getBBox();
-  // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
-  if (titleWidth > orgWidth) {
-    title.attr('x', (orgWidth - width) / 2 + pad);
-    startX = (orgWidth - width) / 2;
-  }
-  if (titleWidth <= orgWidth) title.attr('x', (orgWidth - width) / 2);
-  // descrLine.attr('x2', graphBox.width + getConfig().state.padding);
-
-  if (stateDef.doc) {
-    console.warn(
-      stateDef.id,
-      ' orgWidth: ',
-      orgWidth,
-      ' adjusted orgWidth: ',
-      orgWidth - dblPad,
-      titleWidth,
-      width,
-      stateDef.doc
-    );
-    startX = orgX - (orgWidth - width) / 2 - pad;
-    console.warn(' orgX: ', orgX);
-  }
-  // // White color
-  // g.insert('rect', ':first-child')
-  //   .attr('x', graphBox.x)
-  //   .attr('y', lineY)
-  //   .attr('class', 'composit')
-  //   .attr('width', graphBox.width + getConfig().state.padding)
-  //   .attr(
-  //     'height',
-  //     graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
-  //   )
-  //   .attr('rx', '0');
-
-  // // Title background
-  g.insert('rect', ':first-child')
-    .attr('x', startX)
-    .attr(
-      'y',
-      getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
-    )
-    .attr('width', width)
-    // Just needs to be higher then the descr line, will be clipped by the white color box
-    .attr('height', getConfig().state.textHeight * 3)
-    .attr('rx', getConfig().state.radius);
-
-  // Full background
-  g.insert('rect', ':first-child')
-    .attr('x', startX)
-    .attr(
-      'y',
-      getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
-    )
-    .attr('width', width)
-    .attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
-    .attr('rx', getConfig().state.radius);
-
-  return g;
-};
 
 const drawEndState = g => {
   g.append('circle')

From 5a38562bfcdbb9fc6d4070c0042a9a6a2816713c Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 3 Dec 2019 20:59:17 +0100
Subject: [PATCH 4/4] #1110 Handling case with concurrency lines

---
 src/diagrams/state/stateRenderer.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index b64b117bf7..5b085c2ed6 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -278,8 +278,8 @@ const renderDoc = (doc, diagram, parentId) => {
             pShift = 0;
           }
         }
-        divider.setAttribute('x1', 0 - pShift);
-        divider.setAttribute('x2', pWidth - pShift);
+        divider.setAttribute('x1', 0 - pShift + 8);
+        divider.setAttribute('x2', pWidth - pShift - 8);
       });
     } else {
       logger.debug('No Node ' + v + ': ' + JSON.stringify(graph.node(v)));