#1295 Bugfix for descriptions

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -290,7 +290,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('should render conurrency states', () => {
+  it('should render concurrency states', () => {
     imgSnapshotTest(
       `
     stateDiagram-v2

cypress/platform/current.html

@@ -39,16 +39,25 @@
         G-->H
         G-->c
       </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-    stateDiagram-v2
-    [*] --> monkey
-    state monkey {
-              Sitting
-            --
-              Eating
-            }
-      </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
+stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+      [*] --> NumLockOff
+      NumLockOff --> NumLockOn : EvNumLockPressed
+      NumLockOn --> NumLockOff : EvNumLockPressed
+      --
+      [*] --> CapsLockOff
+      CapsLockOff --> CapsLockOn : EvCapsLockPressed
+      CapsLockOn --> CapsLockOff : EvCapsLockPressed
+      --
+      [*] --> ScrollLockOff
+      ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+      ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+    }
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%;">
      stateDiagram-v2
       [*]-->TV
 

src/dagre-wrapper/createLabel.js

@@ -2,8 +2,12 @@ const createLabel = (vertexText, style, isTitle) => {
   const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
   svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
   let rows = [];
-  if (vertexText) {
+  if (typeof vertexText === 'string') {
     rows = vertexText.split(/\\n|\n|<br\s*\/?>/gi);
+  } else if (Array.isArray(vertexText)) {
+    rows = vertexText;
+  } else {
+    rows = [];
   }
 
   for (let j = 0; j < rows.length; j++) {

src/dagre-wrapper/index.js

@@ -16,6 +16,8 @@ import { logger as log } from '../logger';
 const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   log.info('Graph in recursive render:', graphlib.json.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
+  log.warn('Dir in recursive render - dir:', dir);
+
   const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
   if (!graph.nodes()) {
     log.trace('No nodes found for', graph);

src/dagre-wrapper/nodes.js

@@ -293,8 +293,11 @@ const rectWithTitle = (parent, node) => {
 
   const label = shapeSvg.insert('g').attr('class', 'label');
 
-  const text = label.node().appendChild(createLabel(node.labelText[0], node.labelStyle, true));
-  const textRows = node.labelText.slice(1, node.labelText.length);
+  const text2 = node.labelText.flat();
+  logger.info('Label text', text2[0]);
+
+  const text = label.node().appendChild(createLabel(text2[0], node.labelStyle, true));
+  const textRows = text2.slice(1, text2.length);
   let titleBox = text.getBBox();
   const descr = label
     .node()