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

#910 set correct position and style for edge labels when using linkStyle, #1088 handle multiline texts in edge labels when using linkStyle

Browse Source
This commit is contained in:
Marc Faber
2019-12-10 03:51:37 +01:00
parent 1f4be77662
commit 608445e64f
3 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 = '<span class="edgeLabel">' + edge.text + '</span>';
} else {
edgeData.labelType = 'text';
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
edgeData.label = edge.text.replace(/<br>/g, '\n');
}
edgeData.labelpos = 'c';
if (getConfig().flowchart.htmlLabels) {
edgeData.labelType = 'html';
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
} else {
edgeData.label = edge.text.replace(/<br>/g, '\n');
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(/<br ?\/?>/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

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

@@ -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<br>Line' },
{ text: 'Multi<br/>Line' },
{ 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' }
],
mockG,
'svg-id'
);
addedEdges.forEach(function(edge) {
expect(edge).toHaveProperty('label', 'Multi\nLine');
expect(edge).toHaveProperty('labelpos', 'c');
});
});
});
});