marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-22 00:40:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1200 Unify regex for finding <br> tags throughout mermaid

Browse Source
This commit is contained in:
Marc Faber
2020-01-13 22:04:47 +01:00
parent eade3d0a2d
commit 5493fadc9e
9 changed files with 112 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/diagrams/flowchart/flowRenderer.js
View File

@@ -88,7 +88,7 @@ export const addVertices = function(vert, g, svgId) {
} else {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const rows = vertexText.split(/<br[/]{0,1}>/);
const rows = vertexText.split(/<br\s*\/?>/gi);
for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@@ -237,7 +237,7 @@ export const addEdges = function(edges, g) {
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
} else {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(/<br\s*\/?>/g, '\n');
edgeData.label = edge.text.replace(/<br\s*\/?>/gi, '\n');
if (typeof edge.style === 'undefined') {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';

41
src/diagrams/flowchart/flowRenderer.spec.js
View File

@@ -55,6 +55,43 @@ describe('the flowchart renderer', function() {
expect(addedNodes[0][1]).toHaveProperty('ry', expectedRadios);
});
});
[
'Multi<br>Line',
'Multi<br/>Line',
'Multi<br />Line',
'Multi<br\t/>Line'
].forEach(function(labelText) {
it('should handle multiline texts with different line breaks', function() {
const addedNodes = [];
const mockG = {
setNode: function(id, object) {
addedNodes.push([id, object]);
}
};
addVertices(
{
v1: {
type: 'rect',
id: 'my-node-id',
classes: [],
styles: [],
text: 'Multi<br>Line'
}
},
mockG,
'svg-id'
);
expect(addedNodes).toHaveLength(1);
expect(addedNodes[0][0]).toEqual('my-node-id');
expect(addedNodes[0][1]).toHaveProperty('id', 'my-node-id');
expect(addedNodes[0][1]).toHaveProperty('labelType', 'svg');
expect(addedNodes[0][1].label).toBeDefined();
expect(addedNodes[0][1].label).toBeDefined(); // <text> node
expect(addedNodes[0][1].label.firstChild.innerHTML).toEqual('Multi'); // <tspan> node, line 1
expect(addedNodes[0][1].label.lastChild.innerHTML).toEqual('Line'); // <tspan> node, line 2
});
});
});
[
@@ -109,9 +146,11 @@ describe('the flowchart renderer', function() {
{ text: 'Multi<br>Line' },
{ text: 'Multi<br/>Line' },
{ text: 'Multi<br />Line' },
{ text: 'Multi<br\t/>Line' },
{ style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br>Line' },
{ style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br/>Line' },
{ style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br />Line' }
{ style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br />Line' },
{ style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br\t/>Line' }
],
mockG,
'svg-id'