marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-03 04:14:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix for issue #178, auto-line wrap of notes in sequence diagrams

Browse Source
This commit is contained in:
knsv
2015-06-20 20:58:58 +02:00
parent e5a701d04d
commit 4ed345101a
17 changed files with 2590 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
View File

@@ -12,7 +12,7 @@ var d3 = {
return new newD3();
}
};
var sd = proxyquire('./sequenceRenderer', { './d3': d3 });
//var sd = proxyquire('./sequenceRenderer', { './d3': d3 });
var sd = proxyquire('./sequenceRenderer', { '../../d3': d3 });
var str;

19
src/diagrams/sequenceDiagram/sequenceRenderer.js
View File

@@ -19,7 +19,6 @@ var conf = {
// Margin around loop boxes
boxMargin:10,
boxTextMargin:5,
noteMargin:10,
// Space between messages
messageMargin:35,
@@ -133,21 +132,31 @@ var drawNote = function(elem, startx, verticalPos, msg){
rect.width = conf.width;
rect.class = 'note';
var g = elem.append("g");
var g = elem.append('g');
var rectElem = svgDraw.drawRect(g, rect);
var textObj = svgDraw.getTextObj();
textObj.x = startx;
textObj.y = verticalPos+conf.noteMargin;
textObj.y = verticalPos;
textObj.textMargin = conf.noteMargin;
textObj.dy = '1em';
textObj.text = msg.message;
textObj.class = 'noteText';
var textElem = svgDraw.drawText(g,textObj);
var textElem = svgDraw.drawText(g,textObj, conf.width);
var textHeight = textElem[0][0].getBBox().height;
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2*conf.noteMargin + textHeight);
if(textHeight > conf.width){
textElem.remove();
g = elem.append("g");
textElem = svgDraw.drawText(g,textObj, 2*conf.width);
textHeight = textElem[0][0].getBBox().height;
rectElem.attr('width',2*conf.width);
exports.bounds.insert(startx, verticalPos, startx + 2*conf.width, verticalPos + 2*conf.noteMargin + textHeight);
}else{
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2*conf.noteMargin + textHeight);
}
rectElem.attr('height',textHeight+ 2*conf.noteMargin);
exports.bounds.bumpVerticalPos(textHeight+ 2*conf.noteMargin);

35
src/diagrams/sequenceDiagram/svgDraw.js
View File

@@ -19,23 +19,38 @@ exports.drawRect = function(elem , rectData){
return rectElem;
};
exports.drawText = function(elem , textData){
exports.drawText = function(elem, textData, width) {
// Remove and ignore br:s
var nText = textData.text.replace(/<br\/?>/ig,' ');
var textElem = elem.append('text');
textElem.attr('x', textData.x);
textElem.attr('y', textData.y);
textElem.style('text-anchor', textData.anchor);
textElem.attr('fill', textData.fill);
textData.text.split(/<br\/?>/ig).forEach(function(rowText){
var span = textElem.append('tspan');
span.attr('x', textData.x +textData.textMargin);
span.attr('dy', textData.dy);
span.text(rowText);
});
if(typeof textData.class !== 'undefined'){
if (typeof textData.class !== 'undefined') {
textElem.attr("class", textData.class);
}
/* textData.text.split(/<br\/?>/ig).forEach(function(rowText){
var span = textElem.append('tspan');
span.attr('x', textData.x +textData.textMargin);
span.attr('dy', textData.dy);
span.text(rowText);
});*/
var span = textElem.append('tspan');
span.attr('x', textData.x);
span.attr('dy', textData.dy);
span.text(nText);
if(typeof textElem.textwrap !== 'undefined'){
textElem.textwrap({
x: textData.x+4, // bounding box is 300 pixels from the left
y: textData.y-2, // bounding box is 400 pixels from the top
width: width, // bounding box is 500 pixels across
height: 1800 // bounding box is 600 pixels tall
}, textData.textMargin);
}
return textElem;
};