GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Support Multi-line Actor Descriptions

Browse Source 
- Add support for <br/> delimiter in actor descriptions.
- Add actorFontFamily and actorFontSize options to sequence diagram.
- Change default actor description font from times to sans.

Fix #384 #702 #755
This commit is contained in:
Casey Watson 2018-11-26 11:38:10 -07:00
parent a4992963b3
commit 2fc5745c58
3 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/index.html vendored
View File

@ -238,6 +238,9 @@ class A someclass;
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
participant John as John<br/>Second Line
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!

2
src/diagrams/sequence/sequenceRenderer.js
View File

@ -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,

36
src/diagrams/sequence/svgDraw.js
View File

@ -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)
function byTspan (content, g, x, y, width, height, textAttrs, conf) {
const { actorFontSize, actorFontFamily } = conf
text.attr('y', y + height / 2.0)
.attr('dominant-baseline', 'central')
.attr('alignment-baseline', 'central')
const lines = content.split(/<br\/?>/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])
_setTextAttrs(text, textAttrs)
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)
}