Box rendering
This commit is contained in:
parent
000ffbb622
commit
69c84df367
|
@ -363,7 +363,7 @@ describe('when rendering a sequenceDiagram',function() {
|
||||||
// 10 comes from mock of text height
|
// 10 comes from mock of text height
|
||||||
expect(bounds.stopy ).toBe( conf.height + conf.boxMargin + 2*conf.noteMargin +10);
|
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();
|
sd.bounds.init();
|
||||||
var str = 'sequenceDiagram\n' +
|
var str = 'sequenceDiagram\n' +
|
||||||
'participant Alice\n' +
|
'participant Alice\n' +
|
||||||
|
@ -388,10 +388,10 @@ describe('when rendering a sequenceDiagram',function() {
|
||||||
sd.draw(str,'tst');
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
var bounds = sd.bounds.getBounds();
|
var bounds = sd.bounds.getBounds();
|
||||||
expect(bounds.startx).toBe(conf.diagramMarginX);
|
expect(bounds.startx).toBe(0);
|
||||||
expect(bounds.starty).toBe(conf.diagramMarginY);
|
expect(bounds.starty).toBe(0);
|
||||||
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.actorMargin);
|
expect(bounds.stopx ).toBe(conf.width*2 + conf.actorMargin);
|
||||||
expect(bounds.stopy ).toBe(conf.diagramMarginY + conf.messageMargin + conf.height);
|
expect(bounds.stopy ).toBe(0 + conf.messageMargin + conf.height);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -405,10 +405,10 @@ describe('when rendering a sequenceDiagram',function() {
|
||||||
sd.draw(str,'tst');
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
var bounds = sd.bounds.getBounds();
|
var bounds = sd.bounds.getBounds();
|
||||||
expect(bounds.startx).toBe(conf.diagramMarginX);
|
expect(bounds.startx).toBe(0);
|
||||||
expect(bounds.starty).toBe(conf.diagramMarginY);
|
expect(bounds.starty).toBe(0);
|
||||||
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.actorMargin);
|
expect(bounds.stopx ).toBe(0 + conf.width*2 + conf.actorMargin);
|
||||||
expect(bounds.stopy ).toBe(conf.diagramMarginY + 2*conf.messageMargin + conf.height);
|
expect(bounds.stopy ).toBe(0 + 2*conf.messageMargin + conf.height);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -424,13 +424,13 @@ describe('when rendering a sequenceDiagram',function() {
|
||||||
sd.draw(str,'tst');
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
var bounds = sd.bounds.getBounds();
|
var bounds = sd.bounds.getBounds();
|
||||||
expect(bounds.startx).toBe(conf.diagramMarginX);
|
expect(bounds.startx).toBe(0);
|
||||||
expect(bounds.starty).toBe(conf.diagramMarginY);
|
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.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 () {
|
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');
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
var bounds = sd.bounds.getBounds();
|
var bounds = sd.bounds.getBounds();
|
||||||
expect(bounds.startx).toBe(conf.diagramMarginX - conf.width + conf.actorMargin);
|
expect(bounds.startx).toBe( -(conf.width/2)-(conf.actorMargin/2));
|
||||||
expect(bounds.starty).toBe(conf.diagramMarginY);
|
expect(bounds.starty).toBe(0);
|
||||||
|
|
||||||
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.actorMargin);
|
expect(bounds.stopx ).toBe( conf.width*2 + conf.actorMargin);
|
||||||
expect(bounds.stopy ).toBe(conf.diagramMarginY + 3*conf.messageMargin + conf.height);
|
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');
|
sd.draw(str,'tst');
|
||||||
|
|
||||||
var bounds = sd.bounds.getBounds();
|
var bounds = sd.bounds.getBounds();
|
||||||
expect(bounds.startx).toBe(conf.diagramMarginX);
|
expect(bounds.startx).toBe(0);
|
||||||
expect(bounds.starty).toBe(conf.diagramMarginY);
|
expect(bounds.starty).toBe(0);
|
||||||
|
|
||||||
expect(bounds.stopx ).toBe(conf.diagramMarginX + conf.width*2 + conf.actorMargin);
|
expect(bounds.stopx ).toBe(0 + conf.width*2 + conf.actorMargin);
|
||||||
expect(bounds.stopy ).toBe(conf.diagramMarginY + 3*conf.messageMargin + conf.height + conf.boxMargin);
|
expect(bounds.stopy ).toBe(0 + 2*conf.messageMargin + conf.height + conf.boxMargin);
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
|
@ -46,7 +46,6 @@ exports.bounds = {
|
||||||
},
|
},
|
||||||
updateVal : function (obj,key,val,fun){
|
updateVal : function (obj,key,val,fun){
|
||||||
if(typeof obj[key] === 'undefined'){
|
if(typeof obj[key] === 'undefined'){
|
||||||
//console.log('Setting startx',startx);
|
|
||||||
obj[key] = val;
|
obj[key] = val;
|
||||||
}else{
|
}else{
|
||||||
obj[key] = fun(val,obj[key]);
|
obj[key] = fun(val,obj[key]);
|
||||||
|
@ -112,32 +111,17 @@ var drawNote = function(elem, startx, verticalPos, msg){
|
||||||
rect.y = verticalPos;
|
rect.y = verticalPos;
|
||||||
rect.width = conf.width;
|
rect.width = conf.width;
|
||||||
|
|
||||||
//svgDraw.drawRect(elem, rect);
|
|
||||||
|
|
||||||
var g = elem.append("g");
|
var g = elem.append("g");
|
||||||
//svgDraw.drawRect(g, rect);
|
var rectElem = svgDraw.drawRect(g, rect);
|
||||||
|
|
||||||
var rectElem = g.append("rect");
|
var textObj = svgDraw.getTextObj();
|
||||||
rectElem.attr("x", startx);
|
textObj.x = startx;
|
||||||
rectElem.attr("y", verticalPos);
|
textObj.y = verticalPos+conf.noteMargin;
|
||||||
rectElem.attr("fill", '#EDF2AE');
|
textObj.textMargin = conf.noteMargin;
|
||||||
rectElem.attr("stroke", '#666');
|
textObj.dy = '1em';
|
||||||
rectElem.attr("width", conf.width);
|
textObj.text = msg.message;
|
||||||
rectElem.attr("height", 100);
|
|
||||||
rectElem.attr("rx", 0);
|
|
||||||
rectElem.attr("ry", 0);
|
|
||||||
|
|
||||||
var textElem = g.append("text");
|
var textElem = svgDraw.drawText(g,textObj);
|
||||||
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 textHeight = textElem[0][0].getBBox().height;
|
var textHeight = textElem[0][0].getBBox().height;
|
||||||
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2*conf.noteMargin + textHeight);
|
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];
|
var key = actorKeys[i];
|
||||||
|
|
||||||
// Add some rendering data to the object
|
// 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].y = 0;
|
||||||
actors[key].width = conf.diagramMarginY;
|
actors[key].width = conf.diagramMarginY;
|
||||||
actors[key].height = conf.diagramMarginY;
|
actors[key].height = conf.diagramMarginY;
|
||||||
|
@ -341,7 +325,6 @@ module.exports.draw = function (text, id) {
|
||||||
|
|
||||||
if(msg.placement !== 0){
|
if(msg.placement !== 0){
|
||||||
// Right of
|
// Right of
|
||||||
console.log(exports.bounds.getVerticalPos());
|
|
||||||
drawNote(diagram, startx + (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
|
drawNote(diagram, startx + (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
|
|
|
@ -2,10 +2,9 @@
|
||||||
* Created by knut on 14-12-20.
|
* Created by knut on 14-12-20.
|
||||||
*/
|
*/
|
||||||
exports.drawRect = function(elem , rectData){
|
exports.drawRect = function(elem , rectData){
|
||||||
var g = elem.append("g");
|
var rectElem = elem.append("rect");
|
||||||
var rectElem = g.append("rect");
|
|
||||||
rectElem.attr("x", rectData.x);
|
rectElem.attr("x", rectData.x);
|
||||||
rectElem.attr("y", rectData.x);
|
rectElem.attr("y", rectData.y);
|
||||||
rectElem.attr("fill", rectData.fill);
|
rectElem.attr("fill", rectData.fill);
|
||||||
rectElem.attr("stroke", rectData.stroke);
|
rectElem.attr("stroke", rectData.stroke);
|
||||||
rectElem.attr("width", rectData.width);
|
rectElem.attr("width", rectData.width);
|
||||||
|
@ -16,6 +15,36 @@ exports.drawRect = function(elem , rectData){
|
||||||
return rectElem;
|
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(){
|
exports.getNoteRect = function(){
|
||||||
var rect = {
|
var rect = {
|
||||||
x: 0,
|
x: 0,
|
||||||
|
|
Loading…
Reference in New Issue