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

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

Browse Source
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
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, bottomMarginAdj:1,
// width of activation box // width of activation box
activationWidth:10 activationWidth:10,
//text placement as: tspan | fo
textPlacement: 'fo',
}; };
//var bb = getBBox('path');
exports.bounds = { exports.bounds = {
data:{ data:{
startx:undefined, startx:undefined,
@@ -221,8 +223,8 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
} }
else{ else{
//textWidth = getBBox(textElem).width; //.getComputedTextLength() //textWidth = getBBox(textElem).width; //.getComputedTextLength()
textWidth = textElem[0][0].getBoundingClientRect(); textWidth = textElem[0][0].getBoundingClientRect();
//textWidth = textElem[0][0].getComputedTextLength(); //textWidth = textElem[0][0].getComputedTextLength();
} }
var line; var line;
@@ -273,6 +275,7 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
}; };
module.exports.drawActors = function(diagram, actors, actorKeys,verticalPos){ module.exports.drawActors = function(diagram, actors, actorKeys,verticalPos){
var i; var i;
// Draw the actors // Draw the actors
@@ -476,14 +479,14 @@ module.exports.draw = function (text, id) {
} }
var width = (box.stopx - box.startx) + (2 * conf.diagramMarginX); var width = (box.stopx - box.startx) + (2 * conf.diagramMarginX);
if(title) { if(title) {
diagram.append('text') diagram.append('text')
.text(title) .text(title)
.attr('x', ( ( box.stopx-box.startx) / 2 ) - ( 2 * conf.diagramMarginX ) ) .attr('x', ( ( box.stopx-box.startx) / 2 ) - ( 2 * conf.diagramMarginX ) )
.attr('y', -25); .attr('y', -25);
} }
if(conf.useMaxWidth) { if(conf.useMaxWidth) {
diagram.attr('height', '100%'); diagram.attr('height', '100%');
diagram.attr('width', '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; rect.ry = 3;
exports.drawRect(g, rect); exports.drawRect(g, rect);
g.append('text') // text label for the x axis _drawTextCandidateFunc(conf)(
.attr('x', center) description, g, rect.x, rect.y, rect.width, rect.height);
.attr('y', verticalPos + (conf.height/2)+5)
.attr('class','actor')
.style('text-anchor', 'middle')
.text(description)
;
}; };
exports.anchorElement = function(elem) { exports.anchorElement = function(elem) {
return elem.append('g'); return elem.append('g');
}; };
/** /**
* Draws an actor in the diagram with the attaced line * Draws an actor in the diagram with the attaced line
@@ -269,3 +264,30 @@ exports.getNoteRect = function(){
}; };
return rect; 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;
};
})();