#743 handle multiline section titles in gantt diagrams

cypress/integration/rendering/gantt.spec.js

@@ -38,6 +38,42 @@ describe('Sequencediagram', () => {
       {}
     );
   });
+  it('Handle multiline section titles with different line breaks', () => {
+    imgSnapshotTest(
+      `
+      gantt
+      dateFormat  YYYY-MM-DD
+      axisFormat  %d/%m
+      title       GANTT diagram with multiline section titles
+      excludes    weekdays 2014-01-10
+
+      section A section<br>multiline
+      Completed task            : done,    des1, 2014-01-06,2014-01-08
+      Active task               : active,  des2, 2014-01-09, 3d
+      Future task               :          des3, after des2, 5d
+      Future task2              :          des4, after des3, 5d
+
+      section Critical tasks<br/>multiline
+      Completed task in the critical line : crit, done, 2014-01-06, 24h
+      Implement parser and jison          : crit, done, after des1, 2d
+      Create tests for parser             : crit, active, 3d
+      Future task in critical line        : crit, 5d
+      Create tests for renderer           : 2d
+      Add to mermaid                      : 1d
+
+      section Documentation<br />multiline
+      Describe gantt syntax               : active, a1, after des1, 3d
+      Add gantt diagram to demo page      : after a1, 20h
+      Add another diagram to demo page    : doc1, after a1, 48h
+
+      section Last section<br	/>multiline
+      Describe gantt syntax               : after doc1, 3d
+      Add gantt diagram to demo page      : 20h
+      Add another diagram to demo page    : 48h
+      `,
+      {}
+    );
+  });
   it('Multiple dependencies syntax', () => {
     imgSnapshotTest(
       `

dist/index.html

@@ -430,6 +430,37 @@ Describe gantt syntax               :after doc1, 3d
 Add gantt diagram to demo page      : 20h
 Add another diagram to demo page    : 48h
   </div>
+  <div class="mermaid">
+    gantt
+    dateFormat  YYYY-MM-DD
+    axisFormat  %d/%m
+    title       GANTT diagram with multiline section titles
+    excludes    weekdays 2014-01-10
+
+    section A section<br>multiline
+    Completed task            : done,    des1, 2014-01-06,2014-01-08
+    Active task               : active,  des2, 2014-01-09, 3d
+    Future task               :          des3, after des2, 5d
+    Future task2              :          des4, after des3, 5d
+
+    section Critical tasks<br/>multiline
+    Completed task in the critical line : crit, done, 2014-01-06, 24h
+    Implement parser and jison          : crit, done, after des1, 2d
+    Create tests for parser             : crit, active, 3d
+    Future task in critical line        : crit, 5d
+    Create tests for renderer           : 2d
+    Add to mermaid                      : 1d
+
+    section Documentation<br />multiline
+    Describe gantt syntax               : active, a1, after des1, 3d
+    Add gantt diagram to demo page      : after a1, 20h
+    Add another diagram to demo page    : doc1, after a1, 48h
+
+    section Last section<br	/>multiline
+    Describe gantt syntax               : after doc1, 3d
+    Add gantt diagram to demo page      : 20h
+    Add another diagram to demo page    : 48h
+  </div>
 
   <hr/>
 

src/diagrams/gantt/ganttRenderer.js

@@ -357,9 +357,22 @@ export const draw = function(text, id) {
       .selectAll('text')
       .data(numOccurances)
       .enter()
-      .append('text')
+      .append(function(d) {
-      .text(function(d) {
+        const rows = d[0].split(/<br\s*\/?>/gi);
-        return d[0];
+        const dy = -(rows.length - 1) / 2;
+
+        const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        svgLabel.setAttribute('dy', dy + 'em');
+
+        for (let j = 0; j < rows.length; j++) {
+          const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+          tspan.setAttribute('alignment-baseline', 'central');
+          tspan.setAttribute('x', '10');
+          if (j > 0) tspan.setAttribute('dy', '1em');
+          tspan.textContent = rows[j];
+          svgLabel.appendChild(tspan);
+        }
+        return svgLabel;
       })
       .attr('x', 10)
       .attr('y', function(d, i) {

src/diagrams/gantt/parser/gantt.spec.js

@@ -47,6 +47,16 @@ describe('when parsing a gantt diagram it', function() {
 
     expect(parserFnConstructor(str)).not.toThrow();
   });
+  it('should handle multiline section titles with different line breaks', function() {
+    const str =
+      'gantt\n' +
+      'dateFormat yyyy-mm-dd\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'excludes weekdays 2019-02-01\n' +
+      'section Line1<br>Line2<br/>Line3</br />Line4<br\t/>Line5';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+  });
   /**
    * Beslutsflöde inligt nedan. Obs bla bla bla
    * ```