#1418 Fix for descriptions in states

cypress/platform/current.html

@@ -22,11 +22,13 @@
       stateDiagram-v2
 
       [*] --> S1
-      state "Some long name\nwith an even longer next row" as S1
+      state "Some long name" as S1: The
       </div>
       <div class="mermaid" style="width: 100%; height: 20%;">
-flowchart TD
-    cr((Create Request)) --label this is--> server[REST Server]
+      stateDiagram-v2
+
+      [*] --> S1
+      state "Some long name" as S1: The description\nwith multiple lines
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
 flowchart LR

src/dagre-wrapper/nodes.js

@@ -306,15 +306,41 @@ const rectWithTitle = (parent, node) => {
     dv.attr('width', bbox.width);
     dv.attr('height', bbox.height);
   }
+  logger.info('Text 2', text2);
   const textRows = text2.slice(1, text2.length);
   let titleBox = text.getBBox();
   const descr = label
     .node()
     .appendChild(createLabel(textRows.join('<br/>'), node.labelStyle, true, true));
 
-  logger.info(descr);
+  if (getConfig().flowchart.htmlLabels) {
+    const div = descr.children[0];
+    const dv = select(descr);
+    bbox = div.getBoundingClientRect();
+    dv.attr('width', bbox.width);
+    dv.attr('height', bbox.height);
+  }
+  // bbox = label.getBBox();
+  // logger.info(descr);
   const halfPadding = node.padding / 2;
-  select(descr).attr('transform', 'translate( 0' + ', ' + (titleBox.height + halfPadding) + ')');
+  select(descr).attr(
+    'transform',
+    'translate( ' +
+      // (titleBox.width - bbox.width) / 2 +
+      (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
+      ', ' +
+      (titleBox.height + halfPadding + 5) +
+      ')'
+  );
+  select(text).attr(
+    'transform',
+    'translate( ' +
+      // (titleBox.width - bbox.width) / 2 +
+      (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
+      ', ' +
+      0 +
+      ')'
+  );
   // Get the size of the label
 
   // Bounding box for title and text

src/diagrams/state/stateDb.js

@@ -148,6 +148,12 @@ export const clear = function() {
     root: newDoc()
   };
   currentDocument = documents.root;
+
+  currentDocument = documents.root;
+
+  startCnt = 0;
+  endCnt = 0; // eslint-disable-line
+  classes = [];
 };
 
 export const getState = function(id) {
@@ -213,7 +219,7 @@ const getDividerId = () => {
   return 'divider-id-' + dividerCnt;
 };
 
-const classes = [];
+let classes = [];
 
 const getClasses = () => classes;
 

src/diagrams/state/stateRenderer-v2.js

@@ -15,7 +15,7 @@ export const setConf = function(cnf) {
   }
 };
 
-const nodeDb = {};
+let nodeDb = {};
 
 /**
  * Returns the all the styles from classDef statements in the graph definition.
@@ -203,6 +203,7 @@ const setupDoc = (g, parent, doc, altFlag) => {
 export const draw = function(text, id) {
   logger.info('Drawing state diagram (v2)', id);
   stateDb.clear();
+  nodeDb = {};
   const parser = state.parser;
   parser.yy = stateDb;