#1022 Fix for long names for state diagrams

mermaid-js · Oct 23, 2019 · 4a1eb55 · 4a1eb55
1 parent c87637c
commit 4a1eb55
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
@@ -13,6 +13,30 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render a long descriptions instead of id when available', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+
+      [*] --> S1
+      state "Some long name" as S1
+      `,
+      { logLevel: 0 }
+    );
+    cy.get('svg');
+  });
+  it('should render a long descriptions with additional descriptions', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+
+      [*] --> S1
+      state "Some long name" as S1: The description
+      `,
+      { logLevel: 0 }
+    );
+    cy.get('svg');
+  });
   it('should render a single state with short descr', () => {
     imgSnapshotTest(
       `

diff --git a/src/diagrams/state/parser/stateDiagram.jison b/src/diagrams/state/parser/stateDiagram.jison
@@ -133,7 +133,17 @@ statement
         /* console.warn('Adding document for state without id ', $1);*/
         $$={ stmt: 'state', id: $1, type: 'default', description: '', doc: $3 }
     }
-    | STATE_DESCR AS ID { $$={stmt: 'state', id: $3, type: 'default', description: $1.trim()};}
+    | STATE_DESCR AS ID {
+        var id=$3;
+        var description = $1.trim();
+        if($3.match(':')){
+            var parts = $3.split(':');
+            id=parts[0];
+            description = [description, parts[1]];
+        }
+        $$={stmt: 'state', id: id, type: 'default', description: description};
+
+    }
     | STATE_DESCR AS ID STRUCT_START document STRUCT_STOP
     {
          //console.warn('Adding document for state with id ', $3, $4); yy.addDocument($3);

diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
@@ -76,7 +76,7 @@ export const drawDescrState = (g, stateDef) => {
     .attr('y', getConfig().state.textHeight + 1.5 * getConfig().state.padding)
     .attr('font-size', getConfig().state.fontSize)
     .attr('class', 'state-title')
-    .text(stateDef.id);
+    .text(stateDef.descriptions[0]);
 
   const titleBox = title.node().getBBox();
   const titleHeight = titleBox.height;
@@ -94,8 +94,12 @@ export const drawDescrState = (g, stateDef) => {
     .attr('class', 'state-description');
 
   let isFirst = true;
+  let isSecond = true;
   stateDef.descriptions.forEach(function(descr) {
-    addTspan(description, descr, isFirst);
+    if (!isFirst) {
+      addTspan(description, descr, isSecond);
+      isSecond = false;
+    }
     isFirst = false;
   });
 

diff --git a/src/diagrams/state/stateDb.js b/src/diagrams/state/stateDb.js
@@ -64,7 +64,14 @@ export const addState = function(id, type, doc, descr, note) {
       currentDocument.states[id].type = type;
     }
   }
-  if (descr) addDescription(id, descr.trim());
+  if (descr) {
+    if (typeof descr === 'string') addDescription(id, descr.trim());
+
+    if (typeof descr === 'object') {
+      descr.forEach(des => addDescription(id, des.trim()));
+    }
+  }
+
   if (note) currentDocument.states[id].note = note;
 };