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
Line3
Line4Line5'; + + expect(parserFnConstructor(str)).not.toThrow(); + }); /** * Beslutsflöde inligt nedan. Obs bla bla bla * ```