Work with loop rendering for sequence diagrams
This commit is contained in:
knsv
parent
69c84df367
commit
7bb75c16da
|
|
@ -15894,6 +15894,24 @@ exports.parseError = function(err, hash) {
|
|||
|
||||
var sq = require('./parser/sequenceDiagram').parser;
|
||||
sq.yy = require('./sequenceDb');
|
||||
var svgDraw = require('./svgDraw');
|
||||
var conf = {
|
||||
|
||||
diagramMarginX:50,
|
||||
diagramMarginY:10,
|
||||
// Margin between actors
|
||||
actorMargin:50,
|
||||
// Width of actor moxes
|
||||
width:150,
|
||||
// Height of actor boxes
|
||||
height:65,
|
||||
// Margin around loop boxes
|
||||
boxMargin:10,
|
||||
|
||||
noteMargin:10,
|
||||
// Space between messages
|
||||
messageMargin:40
|
||||
};
|
||||
|
||||
exports.bounds = {
|
||||
data:{
|
||||
|
|
@ -15915,56 +15933,52 @@ exports.bounds = {
|
|||
};
|
||||
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;
|
||||
updateVal : function (obj,key,val,fun){
|
||||
if(typeof obj[key] === 'undefined'){
|
||||
obj[key] = val;
|
||||
}else{
|
||||
obj[key] = fun(val,obj[key]);
|
||||
}
|
||||
},
|
||||
applyMax:function(maxVal, margin){
|
||||
var maxValue = maxVal;
|
||||
updateLoops:function(startx,starty,stopx,stopy){
|
||||
var _self = this;
|
||||
var cnt = 0;
|
||||
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;
|
||||
});
|
||||
cnt++;
|
||||
// The loop list is a stack so the biggest margins in the beginning of the list
|
||||
var n = _self.list.length-cnt+1;
|
||||
|
||||
return maxValue;
|
||||
_self.updateVal(loop, 'startx',startx - n*conf.boxMargin, Math.min);
|
||||
_self.updateVal(loop, 'starty',starty - n*conf.boxMargin, Math.min);
|
||||
_self.updateVal(loop, 'stopx' ,stopx + n*conf.boxMargin, Math.max);
|
||||
_self.updateVal(loop, 'stopy' ,stopy + n*conf.boxMargin, Math.max);
|
||||
|
||||
_self.updateVal(exports.bounds.data,'startx',startx - n*conf.boxMargin ,Math.min);
|
||||
_self.updateVal(exports.bounds.data,'starty',starty - n*conf.boxMargin ,Math.min);
|
||||
_self.updateVal(exports.bounds.data,'stopx' ,stopx + n*conf.boxMargin ,Math.max);
|
||||
_self.updateVal(exports.bounds.data,'stopy' ,stopy + n*conf.boxMargin ,Math.max);
|
||||
});
|
||||
},
|
||||
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();
|
||||
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);
|
||||
},
|
||||
newLoop:function(){
|
||||
this.list.push({startx:undefined,starty:exports.bounds.getVerticalPos(),stopx:undefined,stopy:undefined});
|
||||
this.list.push({startx:undefined,starty:undefined,stopx:undefined,stopy:undefined});
|
||||
},
|
||||
endLoop:function(){
|
||||
var loop = this.list.pop();
|
||||
loop.stopy = exports.bounds.getVerticalPos();
|
||||
//loop.stopy = exports.bounds.getVerticalPos();
|
||||
return loop;
|
||||
},
|
||||
bumpVerticalPos:function(bump){
|
||||
this.verticalPos = this.verticalPos + bump;
|
||||
this.data.stopy = this.verticalPos;
|
||||
},
|
||||
getVerticalPos:function(){
|
||||
return this.verticalPos;
|
||||
|
|
@ -15980,39 +15994,52 @@ exports.bounds = {
|
|||
* @param pos The position if the actor in the liost of actors
|
||||
* @param description The text in the box
|
||||
*/
|
||||
var drawNote = function(elem, startX, verticalPos, msg){
|
||||
var drawNote = function(elem, startx, verticalPos, msg){
|
||||
var rect = svgDraw.getNoteRect();
|
||||
rect.x = startx;
|
||||
rect.y = verticalPos;
|
||||
rect.width = conf.width;
|
||||
|
||||
var g = elem.append("g");
|
||||
var rectElem = g.append("rect")
|
||||
.attr("x", startX + conf.noteMargin)
|
||||
.attr("y", verticalPos - conf.noteMargin)
|
||||
.attr("fill", '#EDF2AE')
|
||||
.attr("stroke", '#666')
|
||||
.attr("width", conf.width)
|
||||
.attr("height", 100)
|
||||
.attr("rx", 0)
|
||||
.attr("ry", 0);
|
||||
var textElem = g.append("text")
|
||||
.attr("x", startX + 10)
|
||||
.attr("y", verticalPos - 15)
|
||||
.style("text-anchor", "start");
|
||||
msg.message.split('<br>').forEach(function(rowText){
|
||||
textElem.append("tspan")
|
||||
.attr("x", startX + 35 )
|
||||
.attr("dy", '1em')
|
||||
.text(rowText);
|
||||
});
|
||||
var rectElem = svgDraw.drawRect(g, rect);
|
||||
|
||||
exports.bounds.insert(startX + conf.noteMargin, verticalPos -conf.noteMargin, startX + conf.noteMargin + conf.width, verticalPos -conf.noteMargin + textElem[0][0].getBBox().height+20);
|
||||
var textObj = svgDraw.getTextObj();
|
||||
textObj.x = startx;
|
||||
textObj.y = verticalPos+conf.noteMargin;
|
||||
textObj.textMargin = conf.noteMargin;
|
||||
textObj.dy = '1em';
|
||||
textObj.text = msg.message;
|
||||
|
||||
//console.log('textElem.height');
|
||||
//console.log(textElem[0][0].getBBox());
|
||||
rectElem.attr('height',textElem[0][0].getBBox().height+20);
|
||||
var textElem = svgDraw.drawText(g,textObj);
|
||||
|
||||
exports.bounds.verticalPos = verticalPos + textElem[0][0].getBBox().height - 10;
|
||||
var textHeight = textElem[0][0].getBBox().height;
|
||||
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2*conf.noteMargin + textHeight);
|
||||
|
||||
return verticalPos + textElem[0][0].getBBox().height - 10;
|
||||
rectElem.attr('height',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 description The text in the box
|
||||
*/
|
||||
exports.drawLoop = function(elem,bounds){
|
||||
var g = elem.append("g");
|
||||
var drawLoopLine = function(startx,starty,stopx,stopy){
|
||||
g.append("line")
|
||||
.attr("x1", startx)
|
||||
.attr("y1", starty)
|
||||
.attr("x2", stopx )
|
||||
.attr("y2", stopy )
|
||||
.attr("stroke-width", 2)
|
||||
.attr("stroke", "#339999");
|
||||
};
|
||||
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 );
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||
|
|
@ -16067,7 +16094,6 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
|||
.attr("stroke", "black")
|
||||
.attr("class", "link")
|
||||
.attr("marker-end", "url(#arrowhead)");
|
||||
//.attr("d", diagonal);
|
||||
}
|
||||
|
||||
g.append("text") // text label for the x axis
|
||||
|
|
@ -16097,19 +16123,20 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
|||
* @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 drawActor = function(elem, left,description){
|
||||
var center = left + (conf.width/2);
|
||||
var g = elem.append("g");
|
||||
g.append("line")
|
||||
.attr("x1", center)
|
||||
.attr("y1", conf.diagramMarginY)
|
||||
.attr("y1", 5)
|
||||
.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("x", left)
|
||||
.attr("y", 0)
|
||||
.attr("fill", '#eaeaea')
|
||||
.attr("stroke", '#666')
|
||||
.attr("width", conf.width)
|
||||
|
|
@ -16117,13 +16144,13 @@ var drawActor = function(elem, center, pos, description,i){
|
|||
.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)
|
||||
.attr("x", center)
|
||||
.attr("y", (conf.height/2)+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);
|
||||
exports.bounds.insert(left, 0, left + conf.width, conf.height);
|
||||
};
|
||||
|
||||
module.exports.drawActors = function(diagram, actors, actorKeys){
|
||||
|
|
@ -16133,41 +16160,21 @@ module.exports.drawActors = function(diagram, actors, actorKeys){
|
|||
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].x = i*conf.actorMargin +i*conf.width;
|
||||
actors[key].y = 0;
|
||||
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);
|
||||
drawActor(diagram, actors[key].x, actors[key].description);
|
||||
}
|
||||
|
||||
// Add a margin between the actor boxes and the first arrow
|
||||
exports.bounds.bumpVerticalPos(conf.diagramMarginY + conf.height);
|
||||
//exports.bounds.bumpVerticalPos(conf.height+conf.messageMargin);
|
||||
exports.bounds.bumpVerticalPos(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;
|
||||
};
|
||||
|
|
@ -16179,7 +16186,7 @@ module.exports.setConf = function(cnf){
|
|||
module.exports.draw = function (text, id) {
|
||||
sq.yy.clear();
|
||||
sq.parse(text);
|
||||
|
||||
exports.bounds.init();
|
||||
var diagram = d3.select('#'+id);
|
||||
|
||||
// Fetch data from the parsing
|
||||
|
|
@ -16187,8 +16194,6 @@ module.exports.draw = function (text, id) {
|
|||
var actorKeys = sq.yy.getActorKeys();
|
||||
var messages = sq.yy.getMessages();
|
||||
|
||||
var i, maxX = 0, minX=0;
|
||||
|
||||
module.exports.drawActors(diagram, actors, actorKeys);
|
||||
|
||||
// The arrow head definition is attached to the svg once
|
||||
|
|
@ -16197,21 +16202,22 @@ module.exports.draw = function (text, id) {
|
|||
// Draw the messages/signals
|
||||
messages.forEach(function(msg){
|
||||
|
||||
exports.bounds.bumpVerticalPos(conf.messageMargin);
|
||||
|
||||
var startx;
|
||||
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;
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
startx = actors[msg.from].x;
|
||||
stopx = actors[msg.to].x;
|
||||
|
||||
if(msg.placement !== 0){
|
||||
// Right of
|
||||
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg);
|
||||
drawNote(diagram, startx + (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
|
||||
|
||||
}else{
|
||||
// Left of
|
||||
drawNote(diagram, startx - conf.width - conf.margin, exports.bounds.getVerticalPos(), msg);
|
||||
drawNote(diagram, startx - (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
|
||||
}
|
||||
break;
|
||||
case sq.yy.LINETYPE.LOOP_START:
|
||||
|
|
@ -16219,30 +16225,94 @@ module.exports.draw = function (text, id) {
|
|||
exports.bounds.newLoop();
|
||||
break;
|
||||
case sq.yy.LINETYPE.LOOP_END:
|
||||
exports.bounds.endLoop();
|
||||
var loopData = exports.bounds.endLoop();
|
||||
//var loopData = loopList.pop();
|
||||
//loopData.stopy = exports.bounds.getVerticalPos();
|
||||
//drawLoop(loopData,10);
|
||||
exports.drawLoop(diagram, loopData);
|
||||
break;
|
||||
default:
|
||||
exports.bounds.bumpVerticalPos(conf.messageMargin);
|
||||
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
|
||||
maxX = Math.max(maxX,startx + 176);
|
||||
exports.bounds.applyMax(maxX,conf.loopMargin);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// TODO fetch from bounds
|
||||
diagram.attr("height", exports.bounds.getVerticalPos() + 40);
|
||||
diagram.attr("width", maxX );
|
||||
diagram.attr("viewBox", minX + ' 0 '+maxX+ ' ' +(exports.bounds.getVerticalPos() + 40));
|
||||
var box = exports.bounds.getBounds();
|
||||
|
||||
var height = box.stopy-box.starty+2*conf.diagramMarginY;
|
||||
var width = box.stopx-box.startx+2*conf.diagramMarginX;
|
||||
|
||||
diagram.attr("height",height);
|
||||
diagram.attr("width", width );
|
||||
diagram.attr("viewBox", (box.startx-conf.diagramMarginX) + ' -' +conf.diagramMarginY + ' ' + width + ' ' + height);
|
||||
};
|
||||
|
||||
},{"./parser/sequenceDiagram":107,"./sequenceDb":108}],110:[function(require,module,exports){
|
||||
},{"./parser/sequenceDiagram":107,"./sequenceDb":108,"./svgDraw":110}],110:[function(require,module,exports){
|
||||
/**
|
||||
* Created by knut on 14-12-20.
|
||||
*/
|
||||
exports.drawRect = function(elem , rectData){
|
||||
var rectElem = elem.append("rect");
|
||||
rectElem.attr("x", rectData.x);
|
||||
rectElem.attr("y", rectData.y);
|
||||
rectElem.attr("fill", rectData.fill);
|
||||
rectElem.attr("stroke", rectData.stroke);
|
||||
rectElem.attr("width", rectData.width);
|
||||
rectElem.attr("height", rectData.height);
|
||||
rectElem.attr("rx", rectData.rx);
|
||||
rectElem.attr("ry", rectData.ry);
|
||||
|
||||
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,
|
||||
y: 0,
|
||||
fill: '#EDF2AE',
|
||||
stroke: '#666',
|
||||
width: 100,
|
||||
height: 100,
|
||||
rx: 0,
|
||||
ry: 0
|
||||
};
|
||||
return rect;
|
||||
};
|
||||
|
||||
},{}],111:[function(require,module,exports){
|
||||
(function (global){
|
||||
var graph = require('./diagrams/flowchart/graphDb');
|
||||
var flow = require('./diagrams/flowchart/parser/flow');
|
||||
|
|
@ -16368,7 +16438,7 @@ global.mermaid = {
|
|||
}
|
||||
};
|
||||
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
||||
},{"../package.json":102,"./diagrams/flowchart/flowRenderer":103,"./diagrams/flowchart/graphDb":104,"./diagrams/flowchart/parser/flow":106,"./diagrams/sequenceDiagram/sequenceRenderer":109,"./utils":111,"he":100}],111:[function(require,module,exports){
|
||||
},{"../package.json":102,"./diagrams/flowchart/flowRenderer":103,"./diagrams/flowchart/graphDb":104,"./diagrams/flowchart/parser/flow":106,"./diagrams/sequenceDiagram/sequenceRenderer":109,"./utils":112,"he":100}],112:[function(require,module,exports){
|
||||
/**
|
||||
* Created by knut on 14-11-23.
|
||||
*/
|
||||
|
|
@ -16454,4 +16524,4 @@ module.exports.cloneCssStyles = function(svg, classes){
|
|||
}
|
||||
};
|
||||
|
||||
},{}]},{},[110])
|
||||
},{}]},{},[111])
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -15862,6 +15862,24 @@ exports.parseError = function(err, hash) {
|
|||
|
||||
var sq = require('./parser/sequenceDiagram').parser;
|
||||
sq.yy = require('./sequenceDb');
|
||||
var svgDraw = require('./svgDraw');
|
||||
var conf = {
|
||||
|
||||
diagramMarginX:50,
|
||||
diagramMarginY:10,
|
||||
// Margin between actors
|
||||
actorMargin:50,
|
||||
// Width of actor moxes
|
||||
width:150,
|
||||
// Height of actor boxes
|
||||
height:65,
|
||||
// Margin around loop boxes
|
||||
boxMargin:10,
|
||||
|
||||
noteMargin:10,
|
||||
// Space between messages
|
||||
messageMargin:40
|
||||
};
|
||||
|
||||
exports.bounds = {
|
||||
data:{
|
||||
|
|
@ -15883,56 +15901,52 @@ exports.bounds = {
|
|||
};
|
||||
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;
|
||||
updateVal : function (obj,key,val,fun){
|
||||
if(typeof obj[key] === 'undefined'){
|
||||
obj[key] = val;
|
||||
}else{
|
||||
obj[key] = fun(val,obj[key]);
|
||||
}
|
||||
},
|
||||
applyMax:function(maxVal, margin){
|
||||
var maxValue = maxVal;
|
||||
updateLoops:function(startx,starty,stopx,stopy){
|
||||
var _self = this;
|
||||
var cnt = 0;
|
||||
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;
|
||||
});
|
||||
cnt++;
|
||||
// The loop list is a stack so the biggest margins in the beginning of the list
|
||||
var n = _self.list.length-cnt+1;
|
||||
|
||||
return maxValue;
|
||||
_self.updateVal(loop, 'startx',startx - n*conf.boxMargin, Math.min);
|
||||
_self.updateVal(loop, 'starty',starty - n*conf.boxMargin, Math.min);
|
||||
_self.updateVal(loop, 'stopx' ,stopx + n*conf.boxMargin, Math.max);
|
||||
_self.updateVal(loop, 'stopy' ,stopy + n*conf.boxMargin, Math.max);
|
||||
|
||||
_self.updateVal(exports.bounds.data,'startx',startx - n*conf.boxMargin ,Math.min);
|
||||
_self.updateVal(exports.bounds.data,'starty',starty - n*conf.boxMargin ,Math.min);
|
||||
_self.updateVal(exports.bounds.data,'stopx' ,stopx + n*conf.boxMargin ,Math.max);
|
||||
_self.updateVal(exports.bounds.data,'stopy' ,stopy + n*conf.boxMargin ,Math.max);
|
||||
});
|
||||
},
|
||||
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();
|
||||
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);
|
||||
},
|
||||
newLoop:function(){
|
||||
this.list.push({startx:undefined,starty:exports.bounds.getVerticalPos(),stopx:undefined,stopy:undefined});
|
||||
this.list.push({startx:undefined,starty:undefined,stopx:undefined,stopy:undefined});
|
||||
},
|
||||
endLoop:function(){
|
||||
var loop = this.list.pop();
|
||||
loop.stopy = exports.bounds.getVerticalPos();
|
||||
//loop.stopy = exports.bounds.getVerticalPos();
|
||||
return loop;
|
||||
},
|
||||
bumpVerticalPos:function(bump){
|
||||
this.verticalPos = this.verticalPos + bump;
|
||||
this.data.stopy = this.verticalPos;
|
||||
},
|
||||
getVerticalPos:function(){
|
||||
return this.verticalPos;
|
||||
|
|
@ -15948,39 +15962,52 @@ exports.bounds = {
|
|||
* @param pos The position if the actor in the liost of actors
|
||||
* @param description The text in the box
|
||||
*/
|
||||
var drawNote = function(elem, startX, verticalPos, msg){
|
||||
var drawNote = function(elem, startx, verticalPos, msg){
|
||||
var rect = svgDraw.getNoteRect();
|
||||
rect.x = startx;
|
||||
rect.y = verticalPos;
|
||||
rect.width = conf.width;
|
||||
|
||||
var g = elem.append("g");
|
||||
var rectElem = g.append("rect")
|
||||
.attr("x", startX + conf.noteMargin)
|
||||
.attr("y", verticalPos - conf.noteMargin)
|
||||
.attr("fill", '#EDF2AE')
|
||||
.attr("stroke", '#666')
|
||||
.attr("width", conf.width)
|
||||
.attr("height", 100)
|
||||
.attr("rx", 0)
|
||||
.attr("ry", 0);
|
||||
var textElem = g.append("text")
|
||||
.attr("x", startX + 10)
|
||||
.attr("y", verticalPos - 15)
|
||||
.style("text-anchor", "start");
|
||||
msg.message.split('<br>').forEach(function(rowText){
|
||||
textElem.append("tspan")
|
||||
.attr("x", startX + 35 )
|
||||
.attr("dy", '1em')
|
||||
.text(rowText);
|
||||
});
|
||||
var rectElem = svgDraw.drawRect(g, rect);
|
||||
|
||||
exports.bounds.insert(startX + conf.noteMargin, verticalPos -conf.noteMargin, startX + conf.noteMargin + conf.width, verticalPos -conf.noteMargin + textElem[0][0].getBBox().height+20);
|
||||
var textObj = svgDraw.getTextObj();
|
||||
textObj.x = startx;
|
||||
textObj.y = verticalPos+conf.noteMargin;
|
||||
textObj.textMargin = conf.noteMargin;
|
||||
textObj.dy = '1em';
|
||||
textObj.text = msg.message;
|
||||
|
||||
//console.log('textElem.height');
|
||||
//console.log(textElem[0][0].getBBox());
|
||||
rectElem.attr('height',textElem[0][0].getBBox().height+20);
|
||||
var textElem = svgDraw.drawText(g,textObj);
|
||||
|
||||
exports.bounds.verticalPos = verticalPos + textElem[0][0].getBBox().height - 10;
|
||||
var textHeight = textElem[0][0].getBBox().height;
|
||||
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2*conf.noteMargin + textHeight);
|
||||
|
||||
return verticalPos + textElem[0][0].getBBox().height - 10;
|
||||
rectElem.attr('height',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 description The text in the box
|
||||
*/
|
||||
exports.drawLoop = function(elem,bounds){
|
||||
var g = elem.append("g");
|
||||
var drawLoopLine = function(startx,starty,stopx,stopy){
|
||||
g.append("line")
|
||||
.attr("x1", startx)
|
||||
.attr("y1", starty)
|
||||
.attr("x2", stopx )
|
||||
.attr("y2", stopy )
|
||||
.attr("stroke-width", 2)
|
||||
.attr("stroke", "#339999");
|
||||
};
|
||||
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 );
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||
|
|
@ -16035,7 +16062,6 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
|||
.attr("stroke", "black")
|
||||
.attr("class", "link")
|
||||
.attr("marker-end", "url(#arrowhead)");
|
||||
//.attr("d", diagonal);
|
||||
}
|
||||
|
||||
g.append("text") // text label for the x axis
|
||||
|
|
@ -16065,19 +16091,20 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
|||
* @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 drawActor = function(elem, left,description){
|
||||
var center = left + (conf.width/2);
|
||||
var g = elem.append("g");
|
||||
g.append("line")
|
||||
.attr("x1", center)
|
||||
.attr("y1", conf.diagramMarginY)
|
||||
.attr("y1", 5)
|
||||
.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("x", left)
|
||||
.attr("y", 0)
|
||||
.attr("fill", '#eaeaea')
|
||||
.attr("stroke", '#666')
|
||||
.attr("width", conf.width)
|
||||
|
|
@ -16085,13 +16112,13 @@ var drawActor = function(elem, center, pos, description,i){
|
|||
.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)
|
||||
.attr("x", center)
|
||||
.attr("y", (conf.height/2)+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);
|
||||
exports.bounds.insert(left, 0, left + conf.width, conf.height);
|
||||
};
|
||||
|
||||
module.exports.drawActors = function(diagram, actors, actorKeys){
|
||||
|
|
@ -16101,41 +16128,21 @@ module.exports.drawActors = function(diagram, actors, actorKeys){
|
|||
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].x = i*conf.actorMargin +i*conf.width;
|
||||
actors[key].y = 0;
|
||||
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);
|
||||
drawActor(diagram, actors[key].x, actors[key].description);
|
||||
}
|
||||
|
||||
// Add a margin between the actor boxes and the first arrow
|
||||
exports.bounds.bumpVerticalPos(conf.diagramMarginY + conf.height);
|
||||
//exports.bounds.bumpVerticalPos(conf.height+conf.messageMargin);
|
||||
exports.bounds.bumpVerticalPos(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;
|
||||
};
|
||||
|
|
@ -16147,7 +16154,7 @@ module.exports.setConf = function(cnf){
|
|||
module.exports.draw = function (text, id) {
|
||||
sq.yy.clear();
|
||||
sq.parse(text);
|
||||
|
||||
exports.bounds.init();
|
||||
var diagram = d3.select('#'+id);
|
||||
|
||||
// Fetch data from the parsing
|
||||
|
|
@ -16155,8 +16162,6 @@ module.exports.draw = function (text, id) {
|
|||
var actorKeys = sq.yy.getActorKeys();
|
||||
var messages = sq.yy.getMessages();
|
||||
|
||||
var i, maxX = 0, minX=0;
|
||||
|
||||
module.exports.drawActors(diagram, actors, actorKeys);
|
||||
|
||||
// The arrow head definition is attached to the svg once
|
||||
|
|
@ -16165,21 +16170,22 @@ module.exports.draw = function (text, id) {
|
|||
// Draw the messages/signals
|
||||
messages.forEach(function(msg){
|
||||
|
||||
exports.bounds.bumpVerticalPos(conf.messageMargin);
|
||||
|
||||
var startx;
|
||||
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;
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
startx = actors[msg.from].x;
|
||||
stopx = actors[msg.to].x;
|
||||
|
||||
if(msg.placement !== 0){
|
||||
// Right of
|
||||
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg);
|
||||
drawNote(diagram, startx + (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
|
||||
|
||||
}else{
|
||||
// Left of
|
||||
drawNote(diagram, startx - conf.width - conf.margin, exports.bounds.getVerticalPos(), msg);
|
||||
drawNote(diagram, startx - (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
|
||||
}
|
||||
break;
|
||||
case sq.yy.LINETYPE.LOOP_START:
|
||||
|
|
@ -16187,30 +16193,94 @@ module.exports.draw = function (text, id) {
|
|||
exports.bounds.newLoop();
|
||||
break;
|
||||
case sq.yy.LINETYPE.LOOP_END:
|
||||
exports.bounds.endLoop();
|
||||
var loopData = exports.bounds.endLoop();
|
||||
//var loopData = loopList.pop();
|
||||
//loopData.stopy = exports.bounds.getVerticalPos();
|
||||
//drawLoop(loopData,10);
|
||||
exports.drawLoop(diagram, loopData);
|
||||
break;
|
||||
default:
|
||||
exports.bounds.bumpVerticalPos(conf.messageMargin);
|
||||
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
|
||||
maxX = Math.max(maxX,startx + 176);
|
||||
exports.bounds.applyMax(maxX,conf.loopMargin);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// TODO fetch from bounds
|
||||
diagram.attr("height", exports.bounds.getVerticalPos() + 40);
|
||||
diagram.attr("width", maxX );
|
||||
diagram.attr("viewBox", minX + ' 0 '+maxX+ ' ' +(exports.bounds.getVerticalPos() + 40));
|
||||
var box = exports.bounds.getBounds();
|
||||
|
||||
var height = box.stopy-box.starty+2*conf.diagramMarginY;
|
||||
var width = box.stopx-box.startx+2*conf.diagramMarginX;
|
||||
|
||||
diagram.attr("height",height);
|
||||
diagram.attr("width", width );
|
||||
diagram.attr("viewBox", (box.startx-conf.diagramMarginX) + ' -' +conf.diagramMarginY + ' ' + width + ' ' + height);
|
||||
};
|
||||
|
||||
},{"./parser/sequenceDiagram":107,"./sequenceDb":108}],110:[function(require,module,exports){
|
||||
},{"./parser/sequenceDiagram":107,"./sequenceDb":108,"./svgDraw":110}],110:[function(require,module,exports){
|
||||
/**
|
||||
* Created by knut on 14-12-20.
|
||||
*/
|
||||
exports.drawRect = function(elem , rectData){
|
||||
var rectElem = elem.append("rect");
|
||||
rectElem.attr("x", rectData.x);
|
||||
rectElem.attr("y", rectData.y);
|
||||
rectElem.attr("fill", rectData.fill);
|
||||
rectElem.attr("stroke", rectData.stroke);
|
||||
rectElem.attr("width", rectData.width);
|
||||
rectElem.attr("height", rectData.height);
|
||||
rectElem.attr("rx", rectData.rx);
|
||||
rectElem.attr("ry", rectData.ry);
|
||||
|
||||
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,
|
||||
y: 0,
|
||||
fill: '#EDF2AE',
|
||||
stroke: '#666',
|
||||
width: 100,
|
||||
height: 100,
|
||||
rx: 0,
|
||||
ry: 0
|
||||
};
|
||||
return rect;
|
||||
};
|
||||
|
||||
},{}],111:[function(require,module,exports){
|
||||
(function (global){
|
||||
var graph = require('./diagrams/flowchart/graphDb');
|
||||
var flow = require('./diagrams/flowchart/parser/flow');
|
||||
|
|
@ -16336,7 +16406,7 @@ global.mermaid = {
|
|||
}
|
||||
};
|
||||
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
||||
},{"../package.json":102,"./diagrams/flowchart/flowRenderer":103,"./diagrams/flowchart/graphDb":104,"./diagrams/flowchart/parser/flow":106,"./diagrams/sequenceDiagram/sequenceRenderer":109,"./utils":111,"he":100}],111:[function(require,module,exports){
|
||||
},{"../package.json":102,"./diagrams/flowchart/flowRenderer":103,"./diagrams/flowchart/graphDb":104,"./diagrams/flowchart/parser/flow":106,"./diagrams/sequenceDiagram/sequenceRenderer":109,"./utils":112,"he":100}],112:[function(require,module,exports){
|
||||
/**
|
||||
* Created by knut on 14-11-23.
|
||||
*/
|
||||
|
|
@ -16422,4 +16492,4 @@ module.exports.cloneCssStyles = function(svg, classes){
|
|||
}
|
||||
};
|
||||
|
||||
},{}]},{},[110])
|
||||
},{}]},{},[111])
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -459,7 +459,6 @@ describe('when rendering a sequenceDiagram',function() {
|
|||
'loop Cheers\n' +
|
||||
'Bob->Alice: Fine!\n' +
|
||||
'end';
|
||||
|
||||
sq.parse(str);
|
||||
sd.draw(str,'tst');
|
||||
|
||||
|
|
|
|||
|
|
@ -205,7 +205,6 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
|||
.attr("stroke", "black")
|
||||
.attr("class", "link")
|
||||
.attr("marker-end", "url(#arrowhead)");
|
||||
//.attr("d", diagonal);
|
||||
}
|
||||
|
||||
g.append("text") // text label for the x axis
|
||||
|
|
@ -214,7 +213,6 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
|||
.style("text-anchor", "middle")
|
||||
.text(msg.message);
|
||||
|
||||
//console.log('Setting message bounds');
|
||||
exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos());
|
||||
}
|
||||
else{
|
||||
|
|
|
|||
Loading…
Reference in New Issue