mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Sequence diagram loop margins 

Handling of arrows to the left in loops in sequence diagrams
Addition of labels
This commit is contained in:
knsv 2014-12-20 18:41:20 +01:00
parent 7bb75c16da
commit 9458bfb24f
3 changed files with 77 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,6 +121,7 @@ describe('when checking the bounds in a sequenceDiagram',function() {
height:65,
boxMargin:10,
messageMargin:40,
boxTextMargin:15,
noteMargin:25
};
sd.setConf(conf);
@ -169,6 +170,7 @@ describe('when checking the bounds in a sequenceDiagram',function() {
sd.bounds.init();
sd.bounds.insert(25,50,300,400);
sd.bounds.verticalPos = 150;
sd.bounds.newLoop();
sd.bounds.insert(125,150,150,200);
@ -193,6 +195,7 @@ describe('when checking the bounds in a sequenceDiagram',function() {
sd.bounds.init();
sd.bounds.insert(100,100,1000,1000);
sd.bounds.verticalPos = 200;
sd.bounds.newLoop();
sd.bounds.newLoop();
sd.bounds.insert(200,200,300,300);
@ -226,6 +229,7 @@ describe('when checking the bounds in a sequenceDiagram',function() {
sd.bounds.init();
sd.bounds.insert(100,100,200,200);
sd.bounds.verticalPos = 200;
sd.bounds.newLoop();
sd.bounds.insert(50,50,300,300);
@ -328,6 +332,7 @@ describe('when rendering a sequenceDiagram',function() {
height:65,
boxMargin:10,
messageMargin:40,
boxTextMargin:15,
noteMargin:25
};
sd.setConf(conf);
@ -430,7 +435,7 @@ describe('when rendering a sequenceDiagram',function() {
var expStopX = conf.actorMargin +conf.width+ (conf.width/2) + conf.noteMargin + conf.width;
expect(bounds.stopx ).toBe(expStopX);
expect(bounds.stopy ).toBe(2*conf.messageMargin + conf.height + conf.boxMargin);
expect(bounds.stopy ).toBe(2*conf.messageMargin + conf.height + conf.boxMargin + 10+ 2*conf.noteMargin);
});
it('it should draw two actors notes to the left', function () {
@ -448,7 +453,7 @@ describe('when rendering a sequenceDiagram',function() {
expect(bounds.starty).toBe(0);
expect(bounds.stopx ).toBe( conf.width*2 + conf.actorMargin);
expect(bounds.stopy ).toBe( 2*conf.messageMargin + conf.height + conf.boxMargin);
expect(bounds.stopy ).toBe( 2*conf.messageMargin + conf.height + conf.boxMargin +10+ 2*conf.noteMargin);
});
@ -467,7 +472,7 @@ describe('when rendering a sequenceDiagram',function() {
expect(bounds.starty).toBe(0);
expect(bounds.stopx ).toBe(0 + conf.width*2 + conf.actorMargin);
expect(bounds.stopy ).toBe(0 + 2*conf.messageMargin + conf.height + conf.boxMargin);
expect(bounds.stopy ).toBe(0 + 2*conf.messageMargin + conf.height + 3*conf.boxMargin + conf.boxTextMargin);
});
});

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

@ -18,6 +18,7 @@ var conf = {
height:65,
// Margin around loop boxes
boxMargin:10,
boxTextMargin:15,
noteMargin:10,
// Space between messages
@ -72,15 +73,23 @@ exports.bounds = {
},
insert:function(startx,starty,stopx,stopy){
this.updateVal(exports.bounds.data,'startx',startx,Math.min);
this.updateVal(exports.bounds.data,'starty',starty,Math.min);
this.updateVal(exports.bounds.data,'stopx' ,stopx ,Math.max);
this.updateVal(exports.bounds.data,'stopy' ,stopy ,Math.max);
var _startx, _starty, _stopx, _stopy;
_startx = Math.min(startx,stopx);
_stopx = Math.max(startx,stopx);
_starty = Math.min(starty,stopy);
_stopy = Math.max(starty,stopy);
this.updateVal(exports.bounds.data,'startx',_startx,Math.min);
this.updateVal(exports.bounds.data,'starty',_starty,Math.min);
this.updateVal(exports.bounds.data,'stopx' ,_stopx ,Math.max);
this.updateVal(exports.bounds.data,'stopy' ,_stopy ,Math.max);
this.updateLoops(_startx,_starty,_stopx,_stopy);
this.updateLoops(startx,starty,stopx,stopy);
},
newLoop:function(){
this.list.push({startx:undefined,starty:undefined,stopx:undefined,stopy:undefined});
newLoop:function(title){
this.list.push({startx:undefined,starty:this.verticalPos,stopx:undefined,stopy:undefined, title:title});
},
endLoop:function(){
var loop = this.list.pop();
@ -127,12 +136,13 @@ var drawNote = function(elem, startx, verticalPos, msg){
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);
};
/**
* Draws an actor in the diagram with the attaced line
* @param center - The center of the the actor
* @param pos The position if the actor in the liost of actors
* @param pos The position if the actor in the list of actors
* @param description The text in the box
*/
exports.drawLoop = function(elem,bounds){
@ -144,14 +154,31 @@ exports.drawLoop = function(elem,bounds){
.attr("x2", stopx )
.attr("y2", stopy )
.attr("stroke-width", 2)
.attr("stroke", "#339999");
.attr("stroke", "#339933");
};
drawLoopLine(bounds.startx, bounds.starty, bounds.stopx , bounds.starty);
drawLoopLine(bounds.stopx , bounds.starty, bounds.stopx , bounds.stopy );
drawLoopLine(bounds.startx, bounds.stopy , bounds.stopx , bounds.stopy );
drawLoopLine(bounds.startx, bounds.starty, bounds.startx, bounds.stopy );
var txt = svgDraw.getTextObj();
txt.text = "Loop";
txt.x = bounds.startx;
txt.y = bounds.starty;
txt.labelMargin = 1.5 * conf.boxMargin;
svgDraw.drawLabel(g,txt);
txt = svgDraw.getTextObj();
txt.text = bounds.title;
txt.x = bounds.startx + (bounds.stopx - bounds.startx)/2;
txt.y = bounds.starty + 1.5 * conf.boxMargin;
txt.anchor = 'middle';
svgDraw.drawText(g,txt);
};
/**
* Setup arrow head and define the marker. The result is appended to the svg.
*/
@ -179,6 +206,7 @@ var insertArrowHead = function(elem){
var drawMessage = function(elem, startx, stopx, verticalPos, msg){
var g = elem.append("g");
var txtCenter = startx + (stopx-startx)/2;
//Make an SVG Container
//Draw the line
if(msg.type !== 2) {
@ -212,7 +240,6 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
.attr("y", verticalPos - 10)
.style("text-anchor", "middle")
.text(msg.message);
exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos());
}
else{
@ -318,6 +345,7 @@ module.exports.draw = function (text, id) {
switch(msg.type){
case sq.yy.LINETYPE.NOTE:
exports.bounds.bumpVerticalPos(conf.boxMargin);
startx = actors[msg.from].x;
stopx = actors[msg.to].x;
@ -331,14 +359,15 @@ module.exports.draw = function (text, id) {
}
break;
case sq.yy.LINETYPE.LOOP_START:
//var loop = exports.bounds.newLoop();
exports.bounds.newLoop();
exports.bounds.bumpVerticalPos(conf.boxMargin);
exports.bounds.newLoop(msg.message);
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin);
break;
case sq.yy.LINETYPE.LOOP_END:
var loopData = exports.bounds.endLoop();
//var loopData = loopList.pop();
//loopData.stopy = exports.bounds.getVerticalPos();
exports.drawLoop(diagram, loopData);
exports.bounds.bumpVerticalPos(conf.boxMargin);
break;
default:
exports.bounds.bumpVerticalPos(conf.messageMargin);

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

@ -19,7 +19,8 @@ exports.drawText = function(elem , textData){
var textElem = elem.append('text');
textElem.attr('x', textData.x);
textElem.attr('y', textData.y);
textElem.style('text-anchor', 'start');
textElem.style('text-anchor', textData.anchor);
textElem.style('fill', textData.fill);
textData.text.split('<br>').forEach(function(rowText){
var span = textElem.append('tspan');
@ -31,14 +32,37 @@ exports.drawText = function(elem , textData){
return textElem;
};
exports.drawLabel = function(elem , txtObject){
var rectData = exports.getNoteRect();
rectData.x = txtObject.x;
rectData.y = txtObject.y;
rectData.width = 50;
rectData.height = 20;
rectData.fill = '#339933';
rectData.stroke = 'none';
//rectData.color = 'white';
var label = exports.drawRect(elem, rectData);
txtObject.y = txtObject.y + txtObject.labelMargin;
txtObject.x = txtObject.x + 0.5*txtObject.labelMargin;
txtObject.fill = 'white';
exports.drawText(elem, txtObject);
//return textElem;
};
exports.getTextObj = function(){
var rect = {
x: 0,
y: 0,
'fill':'black',
'text-anchor': 'start',
style: '#666',
width: 100,
height: 100,
textMargin:0,
rx: 0,
ry: 0
};
@ -52,6 +76,7 @@ exports.getNoteRect = function(){
fill: '#EDF2AE',
stroke: '#666',
width: 100,
anchor:'start',
height: 100,
rx: 0,
ry: 0