From b96ae68aee69436a4d95f3e6fbc988f7930cfc82 Mon Sep 17 00:00:00 2001 From: whyzdev Date: Wed, 7 Dec 2016 07:48:47 -0500 Subject: [PATCH 1/3] added byTspan in _drawText candidate function, which uses d3textwrap and align middle vertically by setting text.y --- .../sequenceDiagram/sequenceRenderer.js | 4 +- src/diagrams/sequenceDiagram/svgDraw.js | 68 +++++++++++++++---- 2 files changed, 56 insertions(+), 16 deletions(-) diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js index 56b65c1bf8..39324b4549 100644 --- a/src/diagrams/sequenceDiagram/sequenceRenderer.js +++ b/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 | only text as before + textPlacement: 'tspan', }; exports.bounds = { diff --git a/src/diagrams/sequenceDiagram/svgDraw.js b/src/diagrams/sequenceDiagram/svgDraw.js index bb0bdaed64..5ca505197f 100644 --- a/src/diagrams/sequenceDiagram/svgDraw.js +++ b/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,68 @@ 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') //.attr('y', y + height / 2) + .text(content); + + 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 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); }; })(); From db62447c98fd51ba48a10bf00c074a457bb67a08 Mon Sep 17 00:00:00 2001 From: whyzdev Date: Wed, 7 Dec 2016 20:24:30 -0500 Subject: [PATCH 2/3] fix logger to display exception stack includig message not just {} --- src/logger.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/logger.js b/src/logger.js index 0173d8cac5..040950adb2 100644 --- a/src/logger.js +++ b/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; })); } From 1424ff7d2274cda649c87076e81dac65ed1fdd81 Mon Sep 17 00:00:00 2001 From: whyzdev Date: Wed, 7 Dec 2016 21:46:58 -0500 Subject: [PATCH 3/3] fix karma tests where text.textwrap is undefined; added textPlacement parameters to some test cases --- .../sequenceDiagram/sequenceDiagram.spec.js | 19 ++++++++--- .../sequenceDiagram/sequenceRenderer.js | 2 +- src/diagrams/sequenceDiagram/svgDraw.js | 32 +++++++++---------- 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js b/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js index d7b41f0b24..b66644e537 100644 --- a/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js +++ b/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); - + }); }); }); diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js index 39324b4549..3f2afa0eaa 100644 --- a/src/diagrams/sequenceDiagram/sequenceRenderer.js +++ b/src/diagrams/sequenceDiagram/sequenceRenderer.js @@ -35,7 +35,7 @@ var conf = { activationWidth:10, //text placement as: tspan | fo | only text as before - textPlacement: 'tspan', + textPlacement: 'fo', }; exports.bounds = { diff --git a/src/diagrams/sequenceDiagram/svgDraw.js b/src/diagrams/sequenceDiagram/svgDraw.js index 5ca505197f..1bdb7106e7 100644 --- a/src/diagrams/sequenceDiagram/svgDraw.js +++ b/src/diagrams/sequenceDiagram/svgDraw.js @@ -281,25 +281,23 @@ var _drawTextCandidateFunc = (function() { .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') //.attr('y', y + height / 2) + .attr('x', x + width / 2).attr('dy', '0') .text(content); - 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 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") - } + 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 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]);