mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

use foreignObject/div to place actor label in sequence diagram, enabled by config.textPlacement:fo

This commit is contained in:
whyzdev 2016-12-01 00:16:44 -05:00
parent da99d3b15e
commit 1e41cea107
2 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/diagrams/sequenceDiagram/sequenceRenderer.js
View File

@ -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,
@ -221,8 +223,8 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
}
else{
//textWidth = getBBox(textElem).width; //.getComputedTextLength()
textWidth = textElem[0][0].getBoundingClientRect();
//textWidth = textElem[0][0].getComputedTextLength();
textWidth = textElem[0][0].getBoundingClientRect();
//textWidth = textElem[0][0].getComputedTextLength();
}
var line;
@ -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
@ -476,14 +479,14 @@ module.exports.draw = function (text, id) {
}
var width = (box.stopx - box.startx) + (2 * conf.diagramMarginX);
if(title) {
diagram.append('text')
.text(title)
.attr('x', ( ( box.stopx-box.startx) / 2 ) - ( 2 * conf.diagramMarginX ) )
.attr('y', -25);
}
if(conf.useMaxWidth) {
diagram.attr('height', '100%');
diagram.attr('width', '100%');

38
src/diagrams/sequenceDiagram/svgDraw.js
View File

@ -112,17 +112,12 @@ 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) {
return elem.append('g');
return elem.append('g');
};
/**
* Draws an actor in the diagram with the attaced line
@ -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;
};
})();