diff --git a/dist/index.html b/dist/index.html index 7fe650751b..47bf945d57 100644 --- a/dist/index.html +++ b/dist/index.html @@ -238,6 +238,9 @@
sequenceDiagram +participant Alice +participant Bob +participant John as John
Second Line Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index fcf41d28ea..f37238a13d 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -17,6 +17,8 @@ const conf = { width: 150, // Height of actor boxes height: 65, + actorFontSize: 14, + actorFontFamily: '"Open-Sans", "sans-serif"', // Margin around loop boxes boxMargin: 10, boxTextMargin: 5, diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index 29dbbafba5..71f527eca5 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -89,7 +89,7 @@ export const drawActor = function (elem, left, verticalPos, description, conf) { drawRect(g, rect) _drawTextCandidateFunc(conf)(description, g, - rect.x, rect.y, rect.width, rect.height, { 'class': 'actor' }) + rect.x, rect.y, rect.width, rect.height, { 'class': 'actor' }, conf) } export const anchorElement = function (elem) { @@ -252,22 +252,30 @@ const _drawTextCandidateFunc = (function () { _setTextAttrs(text, textAttrs) } - function byTspan (content, g, x, y, width, height, textAttrs) { - const text = g.append('text') - .attr('x', x + width / 2).attr('y', y) - .style('text-anchor', 'middle') - text.append('tspan') - .attr('x', x + width / 2).attr('dy', '0') - .text(content) - - text.attr('y', y + height / 2.0) - .attr('dominant-baseline', 'central') - .attr('alignment-baseline', 'central') - - _setTextAttrs(text, textAttrs) + function byTspan (content, g, x, y, width, height, textAttrs, conf) { + const { actorFontSize, actorFontFamily } = conf + + const lines = content.split(//ig) + for (let i = 0; i < lines.length; i++) { + const dy = (i * actorFontSize) - (actorFontSize * (lines.length - 1) / 2) + const text = g.append('text') + .attr('x', x + width / 2).attr('y', y) + .style('text-anchor', 'middle') + .style('font-size', actorFontSize) + .style('font-family', actorFontFamily) + text.append('tspan') + .attr('x', x + width / 2).attr('dy', dy) + .text(lines[i]) + + text.attr('y', y + height / 2.0) + .attr('dominant-baseline', 'central') + .attr('alignment-baseline', 'central') + + _setTextAttrs(text, textAttrs) + } } - function byFo (content, g, x, y, width, height, textAttrs) { + function byFo (content, g, x, y, width, height, textAttrs, conf) { const s = g.append('switch') const f = s.append('foreignObject') .attr('x', x).attr('y', y) @@ -280,7 +288,7 @@ const _drawTextCandidateFunc = (function () { .style('text-align', 'center').style('vertical-align', 'middle') .text(content) - byTspan(content, s, x, y, width, height, textAttrs) + byTspan(content, s, x, y, width, height, textAttrs, conf) _setTextAttrs(text, textAttrs) }