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

Box rendering

This commit is contained in:
knsv 2014-12-20 09:18:12 +01:00
parent 000ffbb622
commit 69c84df367
3 changed files with 62 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -363,7 +363,7 @@ describe('when rendering a sequenceDiagram',function() {
// 10 comes from mock of text height
expect(bounds.stopy ).toBe( conf.height + conf.boxMargin + 2*conf.noteMargin +10);
});
iit('it should handle one actor and a note to the right', function () {
it('it should handle one actor and a note to the right', function () {
sd.bounds.init();
var str = 'sequenceDiagram\n' +
'participant Alice\n' +
@ -388,10 +388,10 @@ describe('when rendering a sequenceDiagram',function() {
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.actorMargin);
expect(bounds.stopy ).toBe(conf.diagramMarginY + conf.messageMargin + conf.height);
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx ).toBe(conf.width*2 + conf.actorMargin);
expect(bounds.stopy ).toBe(0 + conf.messageMargin + conf.height);
});
@ -405,10 +405,10 @@ describe('when rendering a sequenceDiagram',function() {
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.actorMargin);
expect(bounds.stopy ).toBe(conf.diagramMarginY + 2*conf.messageMargin + conf.height);
expect(bounds.startx).toBe(0);
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);
});
@ -424,13 +424,13 @@ describe('when rendering a sequenceDiagram',function() {
sd.draw(str,'tst');
var bounds = sd.bounds.getBounds();
expect(bounds.startx).toBe(conf.diagramMarginX);
expect(bounds.starty).toBe(conf.diagramMarginY);
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
var expStopX = conf.diagramMarginX + conf.messageMargin +conf.width+ (conf.width/2) + conf.noteMargin + conf.width;
var expStopX = conf.actorMargin +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);
expect(bounds.stopy ).toBe(2*conf.messageMargin + conf.height + conf.boxMargin);
});
it('it should draw two actors notes to the left', function () {
@ -444,11 +444,11 @@ describe('when rendering a sequenceDiagram',function() {
sd.draw(str,'tst');
var bounds = sd.bounds.getBounds();
expect(bounds.startx).toBe(conf.diagramMarginX - conf.width + conf.actorMargin);
expect(bounds.starty).toBe(conf.diagramMarginY);
expect(bounds.startx).toBe( -(conf.width/2)-(conf.actorMargin/2));
expect(bounds.starty).toBe(0);
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.actorMargin);
expect(bounds.stopy ).toBe(conf.diagramMarginY + 3*conf.messageMargin + conf.height);
expect(bounds.stopx ).toBe( conf.width*2 + conf.actorMargin);
expect(bounds.stopy ).toBe( 2*conf.messageMargin + conf.height + conf.boxMargin);
});
@ -464,11 +464,11 @@ describe('when rendering a sequenceDiagram',function() {
sd.draw(str,'tst');
var bounds = sd.bounds.getBounds();
expect(bounds.startx).toBe(conf.diagramMarginX);
expect(bounds.starty).toBe(conf.diagramMarginY);
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.actorMargin);
expect(bounds.stopy ).toBe(conf.diagramMarginY + 3*conf.messageMargin + conf.height + conf.boxMargin);
expect(bounds.stopx ).toBe(0 + conf.width*2 + conf.actorMargin);
expect(bounds.stopy ).toBe(0 + 2*conf.messageMargin + conf.height + conf.boxMargin);
});
});

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

@ -46,7 +46,6 @@ exports.bounds = {
},
updateVal : function (obj,key,val,fun){
if(typeof obj[key] === 'undefined'){
//console.log('Setting startx',startx);
obj[key] = val;
}else{
obj[key] = fun(val,obj[key]);
@ -112,32 +111,17 @@ var drawNote = function(elem, startx, verticalPos, msg){
rect.y = verticalPos;
rect.width = conf.width;
//svgDraw.drawRect(elem, rect);
var g = elem.append("g");
//svgDraw.drawRect(g, rect);
var rectElem = svgDraw.drawRect(g, rect);
var rectElem = g.append("rect");
rectElem.attr("x", startx);
rectElem.attr("y", verticalPos);
rectElem.attr("fill", '#EDF2AE');
rectElem.attr("stroke", '#666');
rectElem.attr("width", conf.width);
rectElem.attr("height", 100);
rectElem.attr("rx", 0);
rectElem.attr("ry", 0);
var textObj = svgDraw.getTextObj();
textObj.x = startx;
textObj.y = verticalPos+conf.noteMargin;
textObj.textMargin = conf.noteMargin;
textObj.dy = '1em';
textObj.text = msg.message;
var textElem = g.append("text");
textElem.attr("x", startx);
textElem.attr("y", verticalPos+conf.noteMargin);
textElem.style("text-anchor", "start");
msg.message.split('<br>').forEach(function(rowText){
var span = textElem.append("tspan");
span.attr("x", startx +conf.noteMargin);
span.attr("dy", '1em');
span.text(rowText);
});
var textElem = svgDraw.drawText(g,textObj);
var textHeight = textElem[0][0].getBBox().height;
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2*conf.noteMargin + textHeight);
@ -288,7 +272,7 @@ module.exports.drawActors = function(diagram, actors, actorKeys){
var key = actorKeys[i];
// Add some rendering data to the object
actors[key].x = i*conf.messageMargin +i*conf.width;
actors[key].x = i*conf.actorMargin +i*conf.width;
actors[key].y = 0;
actors[key].width = conf.diagramMarginY;
actors[key].height = conf.diagramMarginY;
@ -341,7 +325,6 @@ module.exports.draw = function (text, id) {
if(msg.placement !== 0){
// Right of
console.log(exports.bounds.getVerticalPos());
drawNote(diagram, startx + (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
}else{

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

@ -2,10 +2,9 @@
* Created by knut on 14-12-20.
*/
exports.drawRect = function(elem , rectData){
var g = elem.append("g");
var rectElem = g.append("rect");
var rectElem = elem.append("rect");
rectElem.attr("x", rectData.x);
rectElem.attr("y", rectData.x);
rectElem.attr("y", rectData.y);
rectElem.attr("fill", rectData.fill);
rectElem.attr("stroke", rectData.stroke);
rectElem.attr("width", rectData.width);
@ -16,6 +15,36 @@ exports.drawRect = function(elem , rectData){
return rectElem;
};
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');
textData.text.split('<br>').forEach(function(rowText){
var span = textElem.append('tspan');
span.attr('x', textData.x +textData.textMargin);
span.attr('dy', textData.dy);
span.text(rowText);
});
return textElem;
};
exports.getTextObj = function(){
var rect = {
x: 0,
y: 0,
'text-anchor': 'start',
style: '#666',
width: 100,
height: 100,
rx: 0,
ry: 0
};
return rect;
};
exports.getNoteRect = function(){
var rect = {
x: 0,