Merge pull request #423 from whyzdev/issue422_seq_actor_text_placemen…

…t_by_fo #422 use foreignObject/div to place actor label in sequence diagram
mermaid-js · Dec 2, 2016 · 4984f9e · 4984f9e
2 parents da99d3b + 1e27238
commit 4984f9e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 14 deletions.
diff --git 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
@@ -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;
+    };
+})();