diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js index 6c81305bf3..56b65c1bf8 100644 --- a/src/diagrams/sequenceDiagram/sequenceRenderer.js +++ b/src/diagrams/sequenceDiagram/sequenceRenderer.js @@ -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%'); diff --git a/src/diagrams/sequenceDiagram/svgDraw.js b/src/diagrams/sequenceDiagram/svgDraw.js index abc76cba67..bb0bdaed64 100644 --- a/src/diagrams/sequenceDiagram/svgDraw.js +++ b/src/diagrams/sequenceDiagram/svgDraw.js @@ -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 + height / 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; + }; +})();