Added additional tests for sequence diagram rendering. Removed some log output
This commit is contained in:
parent
8fa47dac37
commit
0dc8aa32c6
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -452,6 +452,15 @@ describe('when parsing ',function(){
|
||||||
expect(vert['C'].type).toBe('round');
|
expect(vert['C'].type).toBe('round');
|
||||||
expect(vert['C'].text).toBe('Chimpansen hoppar åäö <br> - ÅÄÖ');
|
expect(vert['C'].text).toBe('Chimpansen hoppar åäö <br> - ÅÄÖ');
|
||||||
});
|
});
|
||||||
|
xit('should handle text in vertices with åäö, minus and space and br',function(){
|
||||||
|
var res = flow.parser.parse('graph TD; A[Object(foo,bar)]-->B(Thing);');
|
||||||
|
|
||||||
|
var vert = flow.parser.yy.getVertices();
|
||||||
|
var edges = flow.parser.yy.getEdges();
|
||||||
|
|
||||||
|
expect(vert['C'].type).toBe('round');
|
||||||
|
expect(vert['C'].text).toBe(' A[Object(foo,bar)]-->B(Thing);');
|
||||||
|
});
|
||||||
it('should handle text in vertices with unicode chars',function(){
|
it('should handle text in vertices with unicode chars',function(){
|
||||||
var res = flow.parser.parse('graph TD;A-->C(Начало);');
|
var res = flow.parser.parse('graph TD;A-->C(Начало);');
|
||||||
|
|
||||||
|
|
|
@ -2,28 +2,9 @@
|
||||||
* Created by knut on 14-11-18.
|
* Created by knut on 14-11-18.
|
||||||
*/
|
*/
|
||||||
var sq = require('./parser/sequenceDiagram').parser;
|
var sq = require('./parser/sequenceDiagram').parser;
|
||||||
|
var sd = require('./sequenceRenderer');
|
||||||
|
|
||||||
//console.log(sq.parse('a12:d12\na24:d24'));
|
var str;
|
||||||
|
|
||||||
str = 'a12:d12\n\na24:d24';
|
|
||||||
//console.log(str);
|
|
||||||
//console.log(sq.parse(str));
|
|
||||||
//console.log(sq.parse('[]\n[]'));
|
|
||||||
|
|
||||||
str = 'bfs:queue\n\nbfs3:queue\n';
|
|
||||||
str = str + 'bfs:message=someNode.setLevel\n';
|
|
||||||
str = str + 'bfs:message2=someNode.setLevel2';
|
|
||||||
//console.log(str);
|
|
||||||
//console.log(sq.parse(str));
|
|
||||||
|
|
||||||
str = 'bfs:BFS\n';
|
|
||||||
str = str + 'someNode:SomeNode\n';
|
|
||||||
str = str + 'bfs:queue.new\n';
|
|
||||||
str = str + 'bfs:someNode.setLevel';
|
|
||||||
//console.log(str);
|
|
||||||
//console.log(sq.parse(str));
|
|
||||||
|
|
||||||
|
|
||||||
describe('when parsing a sequenceDiagram',function() {
|
describe('when parsing a sequenceDiagram',function() {
|
||||||
var parseError;
|
var parseError;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
|
@ -96,12 +77,12 @@ describe('when parsing a sequenceDiagram',function() {
|
||||||
|
|
||||||
it('it should handle loop statements a sequenceDiagram', function () {
|
it('it should handle loop statements a sequenceDiagram', function () {
|
||||||
var str = 'sequenceDiagram\n' +
|
var str = 'sequenceDiagram\n' +
|
||||||
'Alice->Bob: Hello Bob, how are you?\n\n' +
|
'Alice->Bob: Hello Bob, how are you?\n\n' +
|
||||||
'%% Comment\n' +
|
'%% Comment\n' +
|
||||||
'Note right of Bob: Bob thinks\n' +
|
'Note right of Bob: Bob thinks\n' +
|
||||||
'loop Multiple happy responses\n\n' +
|
'loop Multiple happy responses\n\n' +
|
||||||
'Bob-->Alice: I am good thanks!\n' +
|
'Bob-->Alice: I am good thanks!\n' +
|
||||||
'end\n';
|
'end';
|
||||||
|
|
||||||
sq.parse(str);
|
sq.parse(str);
|
||||||
var actors = sq.yy.getActors();
|
var actors = sq.yy.getActors();
|
||||||
|
@ -114,28 +95,167 @@ describe('when parsing a sequenceDiagram',function() {
|
||||||
|
|
||||||
expect(messages[0].from).toBe('Alice');
|
expect(messages[0].from).toBe('Alice');
|
||||||
expect(messages[3].from).toBe('Bob');
|
expect(messages[3].from).toBe('Bob');
|
||||||
});
|
|
||||||
|
|
||||||
it('it should handle loop statements a sequenceDiagram', function () {
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
describe('when rendering a sequenceDiagram',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;
|
||||||
|
|
||||||
|
function newD3() {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _d3 = {
|
||||||
|
select:function(){
|
||||||
|
return new newD3();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
d3 = _d3;
|
||||||
|
|
||||||
|
conf = {
|
||||||
|
diagramMarginX:50,
|
||||||
|
diagramMarginY:10,
|
||||||
|
margin:50,
|
||||||
|
width:150,
|
||||||
|
// Height of actor boxes
|
||||||
|
height:65,
|
||||||
|
loopMargin:10,
|
||||||
|
messageMargin:40,
|
||||||
|
noteMargin:25
|
||||||
|
};
|
||||||
|
sd.setConf(conf);
|
||||||
|
});
|
||||||
|
it('it should handle two actors', function () {
|
||||||
|
sd.bounds.init();
|
||||||
|
sd.bounds.newLoop(0);
|
||||||
var str = 'sequenceDiagram\n' +
|
var str = 'sequenceDiagram\n' +
|
||||||
'Alice->Bob: Hello Bob, how are you?\n\n' +
|
'Alice->Bob: Hello Bob, how are you?\n';
|
||||||
'%% Comment\n' +
|
|
||||||
'Note right of Bob: Bob thinks\n' +
|
|
||||||
'loop Multiple happy responses\n\n' +
|
|
||||||
'Bob-->Alice: I am good thanks!\n' +
|
|
||||||
'end';
|
|
||||||
|
|
||||||
sq.parse(str);
|
sq.parse(str);
|
||||||
var actors = sq.yy.getActors();
|
sd.draw(str,'tst');
|
||||||
expect(actors.Alice).ToBdescription = 'Alice';
|
|
||||||
actors.Bob.description = 'Bob';
|
|
||||||
|
|
||||||
var messages = sq.yy.getMessages();
|
var bounds = sd.bounds.getBounds();
|
||||||
|
expect(bounds.startx).toBe(conf.diagramMarginX);
|
||||||
|
expect(bounds.starty).toBe(conf.diagramMarginY);
|
||||||
|
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.margin);
|
||||||
|
expect(bounds.stopy ).toBe(conf.diagramMarginY + conf.messageMargin + conf.height);
|
||||||
|
|
||||||
expect(messages.length).toBe(5);
|
|
||||||
|
|
||||||
expect(messages[0].from).toBe('Alice');
|
|
||||||
expect(messages[3].from).toBe('Bob');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('it should draw two actors and two messages', function () {
|
||||||
|
sd.bounds.init();
|
||||||
|
sd.bounds.newLoop(0);
|
||||||
|
var str = 'sequenceDiagram\n' +
|
||||||
|
'Alice->Bob: Hello Bob, how are you?\n'+
|
||||||
|
'Bob->Alice: Fine!\n';
|
||||||
|
|
||||||
|
sq.parse(str);
|
||||||
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
|
var bounds = sd.bounds.getBounds();
|
||||||
|
expect(bounds.startx).toBe(conf.diagramMarginX);
|
||||||
|
expect(bounds.starty).toBe(conf.diagramMarginY);
|
||||||
|
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.margin);
|
||||||
|
expect(bounds.stopy ).toBe(conf.diagramMarginY + 2*conf.messageMargin + conf.height);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('it should draw two actors notes to the right', function () {
|
||||||
|
sd.bounds.init();
|
||||||
|
sd.bounds.newLoop(0);
|
||||||
|
var str = 'sequenceDiagram\n' +
|
||||||
|
'Alice->Bob: Hello Bob, how are you?\n'+
|
||||||
|
'Note right of Bob: Bob thinks\n' +
|
||||||
|
'Bob->Alice: Fine!\n';
|
||||||
|
|
||||||
|
sq.parse(str);
|
||||||
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
|
var bounds = sd.bounds.getBounds();
|
||||||
|
expect(bounds.startx).toBe(conf.diagramMarginX);
|
||||||
|
expect(bounds.starty).toBe(conf.diagramMarginY);
|
||||||
|
|
||||||
|
var expStopX = conf.diagramMarginX + conf.messageMargin +conf.width+ (conf.width/2) + conf.noteMargin + conf.width;
|
||||||
|
|
||||||
|
expect(bounds.stopx ).toBe(expStopX);
|
||||||
|
expect(bounds.stopy ).toBe(conf.diagramMarginY + 3*conf.messageMargin + conf.height);
|
||||||
|
|
||||||
|
});
|
||||||
|
it('it should draw two actors notes to the left', function () {
|
||||||
|
sd.bounds.init();
|
||||||
|
sd.bounds.newLoop(0);
|
||||||
|
var str = 'sequenceDiagram\n' +
|
||||||
|
'Alice->Bob: Hello Bob, how are you?\n'+
|
||||||
|
'Note left of Alice: Bob thinks\n' +
|
||||||
|
'Bob->Alice: Fine!\n';
|
||||||
|
|
||||||
|
sq.parse(str);
|
||||||
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
|
var bounds = sd.bounds.getBounds();
|
||||||
|
expect(bounds.startx).toBe(conf.diagramMarginX - conf.width + conf.margin);
|
||||||
|
expect(bounds.starty).toBe(conf.diagramMarginY);
|
||||||
|
|
||||||
|
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.margin);
|
||||||
|
expect(bounds.stopy ).toBe(conf.diagramMarginY + 3*conf.messageMargin + conf.height);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
it('it should draw two loops', function () {
|
||||||
|
sd.bounds.init();
|
||||||
|
sd.bounds.newLoop(0);
|
||||||
|
var str = 'sequenceDiagram\n' +
|
||||||
|
'Alice->Bob: Hello Bob, how are you?\n'+
|
||||||
|
'loop Cheers\n' +
|
||||||
|
'Bob->Alice: Fine!\n' +
|
||||||
|
'end';
|
||||||
|
|
||||||
|
sq.parse(str);
|
||||||
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
|
var bounds = sd.bounds.getBounds();
|
||||||
|
expect(bounds.startx).toBe(conf.diagramMarginX);
|
||||||
|
expect(bounds.starty).toBe(conf.diagramMarginY);
|
||||||
|
|
||||||
|
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.margin);
|
||||||
|
expect(bounds.stopy ).toBe(conf.diagramMarginY + 3*conf.messageMargin + conf.height);
|
||||||
|
|
||||||
|
});
|
||||||
});
|
});
|
|
@ -6,6 +6,85 @@
|
||||||
var sq = require('./parser/sequenceDiagram').parser;
|
var sq = require('./parser/sequenceDiagram').parser;
|
||||||
sq.yy = require('./sequenceDb');
|
sq.yy = require('./sequenceDb');
|
||||||
|
|
||||||
|
exports.bounds = {
|
||||||
|
data:{
|
||||||
|
startx:undefined,
|
||||||
|
stopx :undefined,
|
||||||
|
starty:undefined,
|
||||||
|
stopy :undefined,
|
||||||
|
},
|
||||||
|
verticalPos:0,
|
||||||
|
|
||||||
|
list: [],
|
||||||
|
init : function(){
|
||||||
|
this.list = [];
|
||||||
|
this.data = {
|
||||||
|
startx:undefined,
|
||||||
|
stopx :undefined,
|
||||||
|
starty:undefined,
|
||||||
|
stopy :undefined,
|
||||||
|
};
|
||||||
|
this.verticalPos =0;
|
||||||
|
},
|
||||||
|
applyMin:function(minVal, margin){
|
||||||
|
var minValue = minVal;
|
||||||
|
this.list.forEach(function(loop){
|
||||||
|
if(typeof loop.startx === 'undefined'){
|
||||||
|
loop.startx = minValue - margin;
|
||||||
|
}else{
|
||||||
|
loop.startx = Math.min(minValue - margin,loop.startx);
|
||||||
|
}
|
||||||
|
minValue = loop.startx;
|
||||||
|
});
|
||||||
|
return minValue;
|
||||||
|
},
|
||||||
|
applyMax:function(maxVal, margin){
|
||||||
|
var maxValue = maxVal;
|
||||||
|
this.list.forEach(function(loop){
|
||||||
|
if(typeof loop.stopx === 'undefined'){
|
||||||
|
loop.stopx = maxValue + margin;
|
||||||
|
}else{
|
||||||
|
loop.stopx = Math.max(maxValue + margin,loop.stopx);
|
||||||
|
}
|
||||||
|
maxValue = loop.stopx;
|
||||||
|
});
|
||||||
|
|
||||||
|
return maxValue;
|
||||||
|
},
|
||||||
|
insert:function(startx,starty,stopx,stopy){
|
||||||
|
var updateVal = function (key,val,fun){
|
||||||
|
if(typeof exports.bounds.data[key] === 'undefined'){
|
||||||
|
//console.log('Setting startx',startx);
|
||||||
|
exports.bounds.data[key] = val;
|
||||||
|
}else{
|
||||||
|
exports.bounds.data[key] = fun(val,exports.bounds.data[key]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
updateVal('startx',startx,Math.min);
|
||||||
|
updateVal('starty',starty,Math.min);
|
||||||
|
updateVal('stopx' ,stopx ,Math.max);
|
||||||
|
updateVal('stopy' ,stopy ,Math.max);
|
||||||
|
|
||||||
|
//updateLoops();
|
||||||
|
},
|
||||||
|
newLoop:function(){
|
||||||
|
this.list.push({startx:undefined,starty:exports.bounds.getVerticalPos(),stopx:undefined,stopy:undefined});
|
||||||
|
},
|
||||||
|
endLoop:function(){
|
||||||
|
var loop = this.list.pop();
|
||||||
|
loop.stopy = exports.bounds.getVerticalPos();
|
||||||
|
},
|
||||||
|
bumpVerticalPos:function(bump){
|
||||||
|
this.verticalPos = this.verticalPos + bump;
|
||||||
|
},
|
||||||
|
getVerticalPos:function(){
|
||||||
|
return this.verticalPos;
|
||||||
|
},
|
||||||
|
getBounds:function(){
|
||||||
|
return this.data;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draws an actor in the diagram with the attaced line
|
* Draws an actor in the diagram with the attaced line
|
||||||
* @param center - The center of the the actor
|
* @param center - The center of the the actor
|
||||||
|
@ -15,11 +94,11 @@ sq.yy = require('./sequenceDb');
|
||||||
var drawNote = function(elem, startX, verticalPos, msg){
|
var drawNote = function(elem, startX, verticalPos, msg){
|
||||||
var g = elem.append("g");
|
var g = elem.append("g");
|
||||||
var rectElem = g.append("rect")
|
var rectElem = g.append("rect")
|
||||||
.attr("x", startX + 25)
|
.attr("x", startX + conf.noteMargin)
|
||||||
.attr("y", verticalPos -25)
|
.attr("y", verticalPos - conf.noteMargin)
|
||||||
.attr("fill", '#EDF2AE')
|
.attr("fill", '#EDF2AE')
|
||||||
.attr("stroke", '#666')
|
.attr("stroke", '#666')
|
||||||
.attr("width", 150)
|
.attr("width", conf.width)
|
||||||
.attr("height", 100)
|
.attr("height", 100)
|
||||||
.attr("rx", 0)
|
.attr("rx", 0)
|
||||||
.attr("ry", 0);
|
.attr("ry", 0);
|
||||||
|
@ -34,10 +113,14 @@ var drawNote = function(elem, startX, verticalPos, msg){
|
||||||
.text(rowText);
|
.text(rowText);
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log('textElem.height');
|
exports.bounds.insert(startX + conf.noteMargin, verticalPos -conf.noteMargin, startX + conf.noteMargin + conf.width, verticalPos -conf.noteMargin + textElem[0][0].getBBox().height+20);
|
||||||
console.log(textElem[0][0].getBBox());
|
|
||||||
|
//console.log('textElem.height');
|
||||||
|
//console.log(textElem[0][0].getBBox());
|
||||||
rectElem.attr('height',textElem[0][0].getBBox().height+20);
|
rectElem.attr('height',textElem[0][0].getBBox().height+20);
|
||||||
|
|
||||||
|
exports.bounds.verticalPos = verticalPos + textElem[0][0].getBBox().height - 10;
|
||||||
|
|
||||||
return verticalPos + textElem[0][0].getBBox().height - 10;
|
return verticalPos + textElem[0][0].getBBox().height - 10;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -103,15 +186,102 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
||||||
.attr("y", verticalPos - 10)
|
.attr("y", verticalPos - 10)
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text(msg.message);
|
.text(msg.message);
|
||||||
|
|
||||||
|
//console.log('Setting message bounds');
|
||||||
|
exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos());
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
g.append("text") // text label for the x axis
|
var textElem = g.append("text")
|
||||||
.attr("x", txtCenter)
|
.attr("x", txtCenter)
|
||||||
.attr("y", verticalPos - 10)
|
.attr("y", exports.bounds.getVerticalPos() - 10)
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text(msg.message);
|
.text(msg.message);
|
||||||
|
var box = textElem[0][0].getBBox();
|
||||||
|
|
||||||
|
exports.bounds.insert(box.x, exports.bounds.getVerticalPos() -10, box.x+box.width, exports.bounds.getVerticalPos()-10 + box.height);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 description The text in the box
|
||||||
|
*/
|
||||||
|
var drawActor = function(elem, center, pos, description,i){
|
||||||
|
var g = elem.append("g");
|
||||||
|
g.append("line")
|
||||||
|
.attr("x1", center)
|
||||||
|
.attr("y1", conf.diagramMarginY)
|
||||||
|
.attr("x2", center)
|
||||||
|
.attr("y2", 2000)
|
||||||
|
.attr("stroke-width", '0.5px')
|
||||||
|
.attr("stroke", '#999');
|
||||||
|
|
||||||
|
g.append("rect")
|
||||||
|
.attr("x", conf.diagramMarginX + pos*conf.messageMargin +i*150)
|
||||||
|
.attr("y", conf.diagramMarginY)
|
||||||
|
.attr("fill", '#eaeaea')
|
||||||
|
.attr("stroke", '#666')
|
||||||
|
.attr("width", conf.width)
|
||||||
|
.attr("height", conf.height)
|
||||||
|
.attr("rx", 3)
|
||||||
|
.attr("ry", 3);
|
||||||
|
g.append("text") // text label for the x axis
|
||||||
|
.attr("x", conf.diagramMarginX + pos*conf.messageMargin +i*conf.width + 75)
|
||||||
|
.attr("y", conf.diagramMarginY+37.5)
|
||||||
|
.style("text-anchor", "middle")
|
||||||
|
.text(description)
|
||||||
|
;
|
||||||
|
|
||||||
|
exports.bounds.insert(conf.diagramMarginX + pos*conf.margin +i*150, conf.diagramMarginY, conf.diagramMarginX + pos*conf.margin +i*150 + conf.width, conf.diagramMarginY + conf.height);
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports.drawActors = function(diagram, actors, actorKeys){
|
||||||
|
var i;
|
||||||
|
// Draw the actors
|
||||||
|
for(i=0;i<actorKeys.length;i++){
|
||||||
|
var key = actorKeys[i];
|
||||||
|
|
||||||
|
// Add some rendering data to the object
|
||||||
|
actors[key].x = conf.diagramMarginX + i*conf.messageMargin +i*conf.width;
|
||||||
|
actors[key].y = conf.diagramMarginY;
|
||||||
|
actors[key].width = conf.diagramMarginY;
|
||||||
|
actors[key].height = conf.diagramMarginY;
|
||||||
|
|
||||||
|
var center = actors[key].x + (conf.width/2);
|
||||||
|
|
||||||
|
// Keep track of width for with setting on the svg
|
||||||
|
//maxX = Math.max(maxX,actors[key].x);
|
||||||
|
|
||||||
|
// Draw the box with the attached line
|
||||||
|
drawActor(diagram, center,i, actors[key].description, i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a margin between the actor boxes and the first arrow
|
||||||
|
exports.bounds.bumpVerticalPos(conf.diagramMarginY + conf.height);
|
||||||
|
};
|
||||||
|
|
||||||
|
var conf = {
|
||||||
|
|
||||||
|
diagramMarginX:50,
|
||||||
|
diagramMarginY:10,
|
||||||
|
// Margin between actors
|
||||||
|
margin:50,
|
||||||
|
// Width of actor moxes
|
||||||
|
width:150,
|
||||||
|
// Height of actor boxes
|
||||||
|
height:65,
|
||||||
|
// Margin around loop boxes
|
||||||
|
loopMargin:10,
|
||||||
|
|
||||||
|
noteMargin:25,
|
||||||
|
// Space between messages
|
||||||
|
messageMargin:40
|
||||||
|
};
|
||||||
|
module.exports.setConf = function(cnf){
|
||||||
|
conf = cnf;
|
||||||
|
};
|
||||||
/**
|
/**
|
||||||
* Draws a flowchart in the tag with id: id based on the graph definition in text.
|
* Draws a flowchart in the tag with id: id based on the graph definition in text.
|
||||||
* @param text
|
* @param text
|
||||||
|
@ -121,49 +291,8 @@ module.exports.draw = function (text, id) {
|
||||||
sq.yy.clear();
|
sq.yy.clear();
|
||||||
sq.parse(text);
|
sq.parse(text);
|
||||||
|
|
||||||
// Intial config for margins etc
|
|
||||||
var startMargin = 50;
|
|
||||||
var margin = 50;
|
|
||||||
var width = 150;
|
|
||||||
var height = 65;
|
|
||||||
var yStartMargin = 10;
|
|
||||||
var diagram = d3.select('#'+id);
|
var diagram = d3.select('#'+id);
|
||||||
|
|
||||||
/**
|
|
||||||
* 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 description The text in the box
|
|
||||||
*/
|
|
||||||
var drawActor = function(elem, center, pos, description){
|
|
||||||
var g = elem.append("g");
|
|
||||||
g.append("line")
|
|
||||||
.attr("x1", center)
|
|
||||||
.attr("y1", yStartMargin)
|
|
||||||
.attr("x2", center)
|
|
||||||
.attr("y2", 2000)
|
|
||||||
.attr("stroke-width", '0.5px')
|
|
||||||
.attr("stroke", '#999');
|
|
||||||
|
|
||||||
g.append("rect")
|
|
||||||
.attr("x", startMargin + pos*margin +i*150)
|
|
||||||
.attr("y", yStartMargin)
|
|
||||||
.attr("fill", '#eaeaea')
|
|
||||||
.attr("stroke", '#666')
|
|
||||||
.attr("width", width)
|
|
||||||
.attr("height", height)
|
|
||||||
.attr("rx", 3)
|
|
||||||
.attr("ry", 3);
|
|
||||||
g.append("text") // text label for the x axis
|
|
||||||
.attr("x", startMargin + pos*margin +i*width + 75)
|
|
||||||
.attr("y", yStartMargin+37.5)
|
|
||||||
.style("text-anchor", "middle")
|
|
||||||
.text(description)
|
|
||||||
;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Fetch data from the parsing
|
// Fetch data from the parsing
|
||||||
var actors = sq.yy.getActors();
|
var actors = sq.yy.getActors();
|
||||||
var actorKeys = sq.yy.getActorKeys();
|
var actorKeys = sq.yy.getActorKeys();
|
||||||
|
@ -171,62 +300,55 @@ module.exports.draw = function (text, id) {
|
||||||
|
|
||||||
var i, maxX = 0, minX=0;
|
var i, maxX = 0, minX=0;
|
||||||
|
|
||||||
// Draw the actors
|
module.exports.drawActors(diagram, actors, actorKeys);
|
||||||
for(i=0;i<actorKeys.length;i++){
|
|
||||||
var key = actorKeys[i];
|
|
||||||
|
|
||||||
// Add some rendering data to the object
|
|
||||||
actors[key].x = startMargin + i*margin +i*150;
|
|
||||||
actors[key].y = yStartMargin;
|
|
||||||
actors[key].width = yStartMargin;
|
|
||||||
actors[key].height = yStartMargin;
|
|
||||||
|
|
||||||
var center = actors[key].x + (width/2);
|
|
||||||
|
|
||||||
// Keep track of width for with setting on the svg
|
|
||||||
maxX = Math.max(maxX,actors[key].x);
|
|
||||||
|
|
||||||
// Draw the box with the attached line
|
|
||||||
drawActor(diagram, center,i, actors[key].description);
|
|
||||||
}
|
|
||||||
maxX = maxX + width;
|
|
||||||
|
|
||||||
|
|
||||||
// The arrow head definition is attached to the svg once
|
// The arrow head definition is attached to the svg once
|
||||||
insertArrowHead(diagram);
|
insertArrowHead(diagram);
|
||||||
|
|
||||||
// Draw the messages/signals
|
// Draw the messages/signals
|
||||||
var verticalPos = startMargin + 30;
|
|
||||||
messages.forEach(function(msg){
|
messages.forEach(function(msg){
|
||||||
|
|
||||||
verticalPos = verticalPos + 40;
|
exports.bounds.bumpVerticalPos(conf.messageMargin);
|
||||||
var startx = actors[msg.from].x + width/2;
|
var startx;
|
||||||
var stopx = actors[msg.to].x + width/2;
|
var stopx;
|
||||||
|
switch(msg.type){
|
||||||
|
case sq.yy.LINETYPE.NOTE:
|
||||||
|
startx = actors[msg.from].x + conf.width/2;
|
||||||
|
stopx = actors[msg.to].x + conf.width/2;
|
||||||
|
|
||||||
console.log(msg);
|
if(msg.placement !== 0){
|
||||||
if(msg.type === 2){
|
// Right of
|
||||||
console.log('VP before:',verticalPos);
|
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg);
|
||||||
if(msg.placement !== 0){
|
|
||||||
// Right of
|
|
||||||
verticalPos = drawNote(diagram, startx, verticalPos, msg);
|
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
// Left of
|
// Left of
|
||||||
verticalPos = drawNote(diagram, startx - 200, verticalPos, msg);
|
drawNote(diagram, startx - conf.width - conf.margin, exports.bounds.getVerticalPos(), msg);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case sq.yy.LINETYPE.LOOP_START:
|
||||||
|
//var loop = exports.bounds.newLoop();
|
||||||
|
exports.bounds.newLoop();
|
||||||
|
break;
|
||||||
|
case sq.yy.LINETYPE.LOOP_END:
|
||||||
|
exports.bounds.endLoop();
|
||||||
|
//var loopData = loopList.pop();
|
||||||
|
//loopData.stopy = exports.bounds.getVerticalPos();
|
||||||
|
//drawLoop(loopData,10);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
startx = actors[msg.from].x + conf.width/2;
|
||||||
|
stopx = actors[msg.to].x + conf.width/2;
|
||||||
|
|
||||||
|
drawMessage(diagram, startx, stopx, exports.bounds.getVerticalPos(), msg);
|
||||||
// Keep track of width for with setting on the svg
|
// Keep track of width for with setting on the svg
|
||||||
minX = Math.min(minX,startx -200);
|
maxX = Math.max(maxX,startx + 176);
|
||||||
|
exports.bounds.applyMax(maxX,conf.loopMargin);
|
||||||
|
|
||||||
}
|
|
||||||
console.log('VP after:',verticalPos);
|
|
||||||
} else {
|
|
||||||
drawMessage(diagram, startx, stopx, verticalPos, msg);
|
|
||||||
// Keep track of width for with setting on the svg
|
|
||||||
maxX = Math.max(maxX,startx + 176);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
diagram.attr("height", verticalPos + 40);
|
// TODO fetch from bounds
|
||||||
|
diagram.attr("height", exports.bounds.getVerticalPos() + 40);
|
||||||
diagram.attr("width", maxX );
|
diagram.attr("width", maxX );
|
||||||
diagram.attr("viewBox", minX + ' 0 '+maxX+ ' ' +(verticalPos + 40));
|
diagram.attr("viewBox", minX + ' 0 '+maxX+ ' ' +(exports.bounds.getVerticalPos() + 40));
|
||||||
};
|
};
|
||||||
|
|
|
@ -50,7 +50,6 @@ var init = function () {
|
||||||
|
|
||||||
switch(graphType){
|
switch(graphType){
|
||||||
case 'graph':
|
case 'graph':
|
||||||
console.log('FC');
|
|
||||||
classes = flowRenderer.getClasses(txt, false);
|
classes = flowRenderer.getClasses(txt, false);
|
||||||
flowRenderer.draw(txt, id, false);
|
flowRenderer.draw(txt, id, false);
|
||||||
utils.cloneCssStyles(element.firstChild, classes);
|
utils.cloneCssStyles(element.firstChild, classes);
|
||||||
|
|
Loading…
Reference in New Issue