diff --git a/dist/index.html b/dist/index.html index eb27c6593..615c9a537 100644 --- a/dist/index.html +++ b/dist/index.html @@ -313,6 +313,18 @@ class A someclass; classDef someclass fill:#f96; class A someclass; +
+ graph LR + A1[Multi
Line] -->|Multi
Line| B1(Multi
Line) + C1[Multi
Line] -->|Multi
Line| D1(Multi
Line) + E1[Multi
Line] -->|Multi
Line| F1(Multi
Line) + A2[Multi
Line] -->|Multi
Line| B2(Multi
Line) + C2[Multi
Line] -->|Multi
Line| D2(Multi
Line) + E2[Multi
Line] -->|Multi
Line| F2(Multi
Line) + linkStyle 0 stroke:DarkGray,stroke-width:2px + linkStyle 1 stroke:DarkGray,stroke-width:2px + linkStyle 2 stroke:DarkGray,stroke-width:2px +

diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index ee680532f..524742b39 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -239,18 +239,18 @@ export const addEdges = function(edges, g) { } } else { edgeData.arrowheadStyle = 'fill: #333'; - if (typeof edge.style === 'undefined') { - edgeData.labelpos = 'c'; - if (getConfig().flowchart.htmlLabels) { - edgeData.labelType = 'html'; - edgeData.label = '' + edge.text + ''; - } else { - edgeData.labelType = 'text'; - edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'; - edgeData.label = edge.text.replace(/
/g, '\n'); - } + edgeData.labelpos = 'c'; + + if (getConfig().flowchart.htmlLabels) { + edgeData.labelType = 'html'; + edgeData.label = '' + edge.text + ''; } else { - edgeData.label = edge.text.replace(/
/g, '\n'); + edgeData.labelType = 'text'; + edgeData.label = edge.text.replace(/
/g, '\n'); + + if (typeof edge.style === 'undefined') { + edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'; + } } } // Add the edge to the graph diff --git a/src/diagrams/flowchart/flowRenderer.spec.js b/src/diagrams/flowchart/flowRenderer.spec.js index 0e49dbf71..fe31292cc 100644 --- a/src/diagrams/flowchart/flowRenderer.spec.js +++ b/src/diagrams/flowchart/flowRenderer.spec.js @@ -1,4 +1,4 @@ -import { addVertices } from './flowRenderer'; +import { addVertices, addEdges } from './flowRenderer'; import { setConfig } from '../../config'; setConfig({ @@ -94,4 +94,32 @@ describe('the flowchart renderer', function() { expect(addedNodes[0][1]).toHaveProperty('labelStyle', expectedLabelStyle); }); }); + + describe('when adding edges to a graph', function() { + it('should handle multiline texts and set centered label position', function() { + const addedEdges = []; + const mockG = { + setEdge: function(s, e, data, c) { + addedEdges.push(data); + } + }; + addEdges( + [ + { text: 'Multi
Line' }, + { text: 'Multi
Line' }, + { text: 'Multi
Line' }, + { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi
Line' }, + { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi
Line' }, + { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi
Line' } + ], + mockG, + 'svg-id' + ); + + addedEdges.forEach(function(edge) { + expect(edge).toHaveProperty('label', 'Multi\nLine'); + expect(edge).toHaveProperty('labelpos', 'c'); + }); + }); + }); });