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

Mirror actors below sequence diagram possible as described in issue #106

Browse Source
This commit is contained in:
knsv
2015-01-25 14:24:58 +01:00
parent d3d44ec806
commit a38a156d3b
9 changed files with 347 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -477,6 +477,7 @@ describe('when checking the bounds in a sequenceDiagram',function() {
expect(bounds.stopy ).toBe(loop.stopy);
});
});
describe('when rendering a sequenceDiagram',function() {
var parseError, _d3, conf;
beforeEach(function () {
@@ -669,5 +670,81 @@ describe('when rendering a sequenceDiagram',function() {
expect(bounds.stopx ).toBe(0 + conf.width*2 + conf.actorMargin);
expect(bounds.stopy ).toBe(0 + 2*conf.messageMargin + conf.height + 3*conf.boxMargin + conf.boxTextMargin);
});
});
describe('when rendering a sequenceDiagram with actor mirror activated',function() {
var parseError, _d3, conf;
beforeEach(function () {
sq.yy = require('./sequenceDb');
sq.yy.clear();
parseError = function(err, hash) {
console.log('Syntax error:' + err);
console.log(hash);
};
sq.yy.parseError = parseError;
newD3 = function() {
var o = {
append: function (type) {
return newD3();
},
attr: function (key, val) {
return this;
},
style: function (key, val) {
return this;
},
text: function (txt) {
return this;
},
0:{
0: {
getBBox: function () {
return {
height: 10,
width: 20
};
}
}
}
};
return o;
};
conf = {
diagramMarginX:50,
diagramMarginY:10,
actorMargin:50,
width:150,
// Height of actor boxes
height:65,
boxMargin:10,
messageMargin:40,
boxTextMargin:15,
noteMargin:25,
mirrorActors:true,
// Depending on css styling this might need adjustment
// Prolongs the edge of the diagram downwards
bottomMarginAdj:1
};
sd.setConf(conf);
});
it('it should handle one actor', function () {
sd.bounds.init();
var str = 'sequenceDiagram\n' +
'participant Alice\n';
sq.parse(str);
sd.draw(str,'tst');
var bounds = sd.bounds.getBounds();
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx ).toBe( conf.width);
expect(bounds.stopy ).toBe(2*conf.height+2*conf.boxMargin);
});
});

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

@@ -22,7 +22,12 @@ var conf = {
noteMargin:10,
// Space between messages
messageMargin:35
messageMargin:35,
//mirror actors under diagram
mirrorActors:false,
// Depending on css styling this might need adjustment
// Prolongs the edge of the diagram downwards
bottomMarginAdj:1
};
exports.bounds = {
@@ -211,7 +216,7 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
};
module.exports.drawActors = function(diagram, actors, actorKeys){
module.exports.drawActors = function(diagram, actors, actorKeys,verticalPos){
var i;
// Draw the actors
for(i=0;i<actorKeys.length;i++){
@@ -219,13 +224,13 @@ module.exports.drawActors = function(diagram, actors, actorKeys){
// Add some rendering data to the object
actors[key].x = i*conf.actorMargin +i*conf.width;
actors[key].y = 0;
actors[key].y = verticalPos;
actors[key].width = conf.diagramMarginY;
actors[key].height = conf.diagramMarginY;
// Draw the box with the attached line
svgDraw.drawActor(diagram, actors[key].x, actors[key].description, conf);
exports.bounds.insert(actors[key].x, 0, actors[key].x + conf.width, conf.height);
svgDraw.drawActor(diagram, actors[key].x, verticalPos, actors[key].description, conf);
exports.bounds.insert(actors[key].x, verticalPos, actors[key].x + conf.width, conf.height);
}
@@ -236,7 +241,11 @@ module.exports.drawActors = function(diagram, actors, actorKeys){
module.exports.setConf = function(cnf){
conf = cnf;
var keys = Object.keys(cnf);
keys.forEach(function(key){
conf[key] = cnf[key];
});
};
/**
* Draws a flowchart in the tag with id: id based on the graph definition in text.
@@ -258,7 +267,7 @@ module.exports.draw = function (text, id) {
var actorKeys = sq.yy.getActorKeys();
var messages = sq.yy.getMessages();
module.exports.drawActors(diagram, actors, actorKeys);
module.exports.drawActors(diagram, actors, actorKeys, 0);
// The arrow head definition is attached to the svg once
svgDraw.insertArrowHead(diagram);
@@ -334,9 +343,20 @@ module.exports.draw = function (text, id) {
}
});
if(conf.mirrorActors){
// Draw actors below diagram
exports.bounds.bumpVerticalPos(conf.boxMargin*2);
module.exports.drawActors(diagram, actors, actorKeys, exports.bounds.getVerticalPos());
}
var box = exports.bounds.getBounds();
var height = box.stopy-box.starty+2*conf.diagramMarginY;
var height = box.stopy - box.starty + 2*conf.diagramMarginY;
if(conf.mirrorActors){
height = height - conf.boxMargin + conf.bottomMarginAdj;
}
var width = box.stopx-box.startx+2*conf.diagramMarginX;
diagram.attr("height",height);

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

@@ -67,20 +67,23 @@ exports.drawLabel = function(elem , txtObject){
* @param pos The position if the actor in the liost of actors
* @param description The text in the box
*/
exports.drawActor = function(elem, left,description,conf){
exports.drawActor = function(elem, left, verticalPos, description,conf){
var center = left + (conf.width/2);
var g = elem.append("g");
g.append("line")
.attr("x1", center)
.attr("y1", 5)
.attr("x2", center)
.attr("y2", 2000)
.attr("class", 'actor-line')
.attr("stroke-width", '0.5px')
.attr("stroke", '#999');
if(verticalPos === 0) {
g.append("line")
.attr("x1", center)
.attr("y1", 5)
.attr("x2", center)
.attr("y2", 2000)
.attr("class", 'actor-line')
.attr("stroke-width", '0.5px')
.attr("stroke", '#999');
}
var rect = exports.getNoteRect();
rect.x = left;
rect.y = verticalPos;
rect.fill = '#eaeaea';
rect.width = conf.width;
rect.height = conf.height;
@@ -91,7 +94,7 @@ exports.drawActor = function(elem, left,description,conf){
g.append("text") // text label for the x axis
.attr("x", center)
.attr("y", (conf.height/2)+5)
.attr("y", verticalPos + (conf.height/2)+5)
.attr('class','actor')
.style("text-anchor", "middle")
.text(description)