GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Sequence diagram loop margins

Browse Source 
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