diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 5d9850f94..531b5aae5 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/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
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
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
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
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(
`
diff --git a/dist/index.html b/dist/index.html
index cef42a10e..4acc24c4f 100644
--- a/dist/index.html
+++ b/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
+
+ gantt
+ dateFormat YYYY-MM-DD
+ axisFormat %d/%m
+ title GANTT diagram with multiline section titles
+ excludes weekdays 2014-01-10
+
+ section A section
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
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
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
multiline
+ Describe gantt syntax : after doc1, 3d
+ Add gantt diagram to demo page : 20h
+ Add another diagram to demo page : 48h
+
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 3bf258251..050b1cc7b 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -357,9 +357,22 @@ export const draw = function(text, id) {
.selectAll('text')
.data(numOccurances)
.enter()
- .append('text')
- .text(function(d) {
- return d[0];
+ .append(function(d) {
+ const rows = d[0].split(/
/gi);
+ 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) {
diff --git a/src/diagrams/gantt/parser/gantt.spec.js b/src/diagrams/gantt/parser/gantt.spec.js
index 650c7563f..463dd26e6 100644
--- a/src/diagrams/gantt/parser/gantt.spec.js
+++ b/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
Line2
Line3Line4
Line5';
+
+ expect(parserFnConstructor(str)).not.toThrow();
+ });
/**
* Beslutsflöde inligt nedan. Obs bla bla bla
* ```