Merge pull request #427 from whyzdev/issue422_seq_actor_text_placement

use tspan via d3.textwrap to place actor text in sequence diagram

src/diagrams/sequenceDiagram/sequenceDiagram.spec.js

@@ -23,6 +23,13 @@ var sd = proxyquire('./sequenceRenderer', { '../../d3': d3 });
 //
 //var sd = require('./sequenceRenderer');
 
+function addConf(conf, key, value) {
+  if (value !== undefined) {
+    conf[key]=value;
+  }
+  return conf;
+}
+
 var str;
 describe('when parsing a sequenceDiagram',function() {
     beforeEach(function () {
@@ -761,7 +768,9 @@ describe('when rendering a sequenceDiagram',function() {
         //console.log(document.querySelector('#tst').getBBox());
 
     });
-    it('it should handle one actor', function () {
+    ['tspan','fo','old',undefined].forEach(function(textPlacement) {
+      it('it should handle one actor, when textPlacement is '+textPlacement, function () {
+        sd.setConf(addConf(conf, 'textPlacement', textPlacement));
         sd.bounds.init();
         var str = 'sequenceDiagram\n' +
             'participant Alice';
@@ -774,7 +783,7 @@ describe('when rendering a sequenceDiagram',function() {
         expect(bounds.starty).toBe(0);
         expect(bounds.stopx ).toBe( conf.width);
         expect(bounds.stopy ).toBe(conf.height);
-
+      });
     });
     it('it should handle one actor and a centered note', function () {
         sd.bounds.init();
@@ -987,7 +996,9 @@ describe('when rendering a sequenceDiagram with actor mirror activated',function
         };
         sd.setConf(conf);
     });
-    it('it should handle one actor', function () {
+    ['tspan','fo','old',undefined].forEach(function(textPlacement) {
+      it('it should handle one actor, when textPlacement is'+textPlacement, function () {
+        sd.setConf(addConf(conf, 'textPlacement', textPlacement));
         sd.bounds.init();
         var str = 'sequenceDiagram\n' +
             'participant Alice';
@@ -1000,6 +1011,6 @@ describe('when rendering a sequenceDiagram with actor mirror activated',function
         expect(bounds.starty).toBe(0);
         expect(bounds.stopx ).toBe( conf.width);
         expect(bounds.stopy ).toBe(2*conf.height+2*conf.boxMargin);
-
+      });
     });
 });

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -34,8 +34,8 @@ var conf = {
     // width of activation box
     activationWidth:10,
 
-    //text placement as: tspan | fo
-    textPlacement: 'fo',
+    //text placement as: tspan | fo | <else> only text as before 
+    textPlacement: 'fo', 
 };
 
 exports.bounds = {

src/diagrams/sequenceDiagram/svgDraw.js

@@ -112,8 +112,8 @@ exports.drawActor = function(elem, left, verticalPos, description,conf){
     rect.ry = 3;
     exports.drawRect(g, rect);
 
-    _drawTextCandidateFunc(conf)(
-      description, g, rect.x, rect.y, rect.width, rect.height);
+    _drawTextCandidateFunc(conf)(description, g, 
+        rect.x, rect.y, rect.width, rect.height, {'class':'actor'});
 };
 
 exports.anchorElement = function(elem) {
@@ -266,28 +266,66 @@ exports.getNoteRect = function(){
 };
 
 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);
+    function byText(content, g, x, y, width, height, textAttrs) {
+      var text = g.append('text')
+        .attr('x', x + width / 2).attr('y', y + height / 2 + 5)
+        .style('text-anchor', 'middle')
+        .text(content);
+      for (var key in textAttrs) {
+        text.attr(key, textAttrs[key]);
+      }
     };
-    var byFo = function(content, g, x, y, width, height) {
+
+    function byTspan(content, g, x, y, width, height, textAttrs) {
+      var text = g.append('text')
+        .attr('x', x + width / 2).attr('y', y) 
+        .style('text-anchor', 'middle');
+      var tspan = text.append('tspan')
+        .attr('x', x + width / 2).attr('dy', '0') 
+        .text(content);
+
+      if(typeof(text.textwrap) !== 'undefined'){
+        text.textwrap({ //d3textwrap
+              x: x + width / 2, y: y, width: width, height: height
+        }, 0);
+        //vertical aligment after d3textwrap expans tspan to multiple tspans
+        var tspans = text.selectAll('tspan');
+        if (tspans.length > 0 && tspans[0].length > 0) {
+          tspans = tspans[0];
+          //set y of <text> to the mid y of the first line 
+          text.attr('y', y + (height/2.- text[0][0].getBBox().height*(1 - 1.0/tspans.length)/2.))
+            .attr("dominant-baseline", "central")
+            .attr("alignment-baseline", "central")
+        }
+      } 
+
+      for (var key in textAttrs) {
+        text.attr(key, textAttrs[key]);
+      }
+    };
+
+    function byFo(content, g, x, y, width, height, textAttrs) {
         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')
+        var text = f.append('div').style('display', 'table')
+          .style('height', '100%').style('width', '100%');
+
+        text.append('div').style('display', 'table-cell')
            .style('text-align', 'center').style('vertical-align', 'middle')
            .text(content)
 
-        byText(content, s, x, y, width, height);
+        byTspan(content, s, x, y, width, height, textAttrs);
+
+        for (var key in textAttrs) {
+          text.attr(key, textAttrs[key]);
+        }
     };
+
     return function(conf) {
-      return conf.textPlacement==='fo' ? byFo : byText;
+      return conf.textPlacement==='fo' ? byFo : (
+          conf.textPlacement==='tspan' ? byTspan : byText);
     };
 })();

src/logger.js

@@ -70,7 +70,10 @@ function Log(level) {
                     //return console.log('[' + formatTime(new Date()) + '] ' , str); //eslint-disable-line no-console
                     args.unshift('[' + formatTime(new Date()) + '] ');
                     console.log.apply(console, args.map(function(a){
-                        if (typeof a === "object") return JSON.stringify(a, null, 2);
+                        if (typeof a === "object") {
+                          if (a.stack !== undefined) { return a.stack; }
+                          return JSON.stringify(a, null, 2);
+                        }
                         return a;
                     }));
                 }