From 1e41cea107229a6a225458e139d6e10eec493aab Mon Sep 17 00:00:00 2001
From: whyzdev <whyzdev>
Date: Thu, 1 Dec 2016 00:16:44 -0500
Subject: [PATCH 1/2] use foreignObject/div to place actor label in sequence
 diagram, enabled by config.textPlacement:fo

---
 .../sequenceDiagram/sequenceRenderer.js       | 15 +++++---
 src/diagrams/sequenceDiagram/svgDraw.js       | 38 +++++++++++++++----
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js
index 6c81305bf..56b65c1bf 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 abc76cba6..972bf90ae 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 + 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;
+    };
+})();

From 1e27238083fcb5369c36fd282c1b5881e135e052 Mon Sep 17 00:00:00 2001
From: whyzdev <whyzdev>
Date: Thu, 1 Dec 2016 20:09:57 -0500
Subject: [PATCH 2/2] fix non-fo y position as before

---
 src/diagrams/sequenceDiagram/svgDraw.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/diagrams/sequenceDiagram/svgDraw.js b/src/diagrams/sequenceDiagram/svgDraw.js
index 972bf90ae..bb0bdaed6 100644
--- a/src/diagrams/sequenceDiagram/svgDraw.js
+++ b/src/diagrams/sequenceDiagram/svgDraw.js
@@ -269,7 +269,7 @@ 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('x', center).attr('y', y + height / 2 + 5)
           .attr('class', 'actor').style('text-anchor', 'middle')
           .text(content);
     };