mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-02-04 07:13:25 +08:00
use foreignObject/div to place actor label in sequence diagram, enabled by config.textPlacement:fo
This commit is contained in:
parent
da99d3b15e
commit
1e41cea107
@ -32,10 +32,12 @@ var conf = {
|
||||
bottomMarginAdj:1,
|
||||
|
||||
// width of activation box
|
||||
activationWidth:10
|
||||
activationWidth:10,
|
||||
|
||||
//text placement as: tspan | fo
|
||||
textPlacement: 'fo',
|
||||
};
|
||||
|
||||
//var bb = getBBox('path');
|
||||
exports.bounds = {
|
||||
data:{
|
||||
startx:undefined,
|
||||
@ -273,6 +275,7 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
||||
|
||||
};
|
||||
|
||||
|
||||
module.exports.drawActors = function(diagram, actors, actorKeys,verticalPos){
|
||||
var i;
|
||||
// Draw the actors
|
||||
|
@ -112,13 +112,8 @@ exports.drawActor = function(elem, left, verticalPos, description,conf){
|
||||
rect.ry = 3;
|
||||
exports.drawRect(g, rect);
|
||||
|
||||
g.append('text') // text label for the x axis
|
||||
.attr('x', center)
|
||||
.attr('y', verticalPos + (conf.height/2)+5)
|
||||
.attr('class','actor')
|
||||
.style('text-anchor', 'middle')
|
||||
.text(description)
|
||||
;
|
||||
_drawTextCandidateFunc(conf)(
|
||||
description, g, rect.x, rect.y, rect.width, rect.height);
|
||||
};
|
||||
|
||||
exports.anchorElement = function(elem) {
|
||||
@ -269,3 +264,30 @@ exports.getNoteRect = function(){
|
||||
};
|
||||
return rect;
|
||||
};
|
||||
|
||||
var _drawTextCandidateFunc = (function() {
|
||||
var byText = function(content, g, x, y, width, height) {
|
||||
var center = x + width / 2;
|
||||
g.append('text')
|
||||
.attr('x', center).attr('y', y + y / 2 + 5)
|
||||
.attr('class', 'actor').style('text-anchor', 'middle')
|
||||
.text(content);
|
||||
};
|
||||
var byFo = function(content, g, x, y, width, height) {
|
||||
var s = g.append('switch');
|
||||
var f = s.append("foreignObject")
|
||||
.attr('x', x).attr('y', y)
|
||||
.attr('width', width).attr('height', height);
|
||||
|
||||
f.append('div').style('display', 'table')
|
||||
.style('height', '100%').style('width', '100%')
|
||||
.append('div').style('display', 'table-cell')
|
||||
.style('text-align', 'center').style('vertical-align', 'middle')
|
||||
.text(content)
|
||||
|
||||
byText(content, s, x, y, width, height);
|
||||
};
|
||||
return function(conf) {
|
||||
return conf.textPlacement==='fo' ? byFo : byText;
|
||||
};
|
||||
})();
|
||||
|
Loading…
x
Reference in New Issue
Block a user