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

Styling of sequence diagrams from css classes

Browse Source
This commit is contained in:
knsv
2014-12-21 20:59:11 +01:00
parent 307c599a0e
commit 5fc873468d
9 changed files with 235 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -119,6 +119,7 @@ var drawNote = function(elem, startx, verticalPos, msg){
rect.x = startx;
rect.y = verticalPos;
rect.width = conf.width;
rect.class = 'note';
var g = elem.append("g");
var rectElem = svgDraw.drawRect(g, rect);
@@ -129,6 +130,7 @@ var drawNote = function(elem, startx, verticalPos, msg){
textObj.textMargin = conf.noteMargin;
textObj.dy = '1em';
textObj.text = msg.message;
textObj.class = 'noteText';
var textElem = svgDraw.drawText(g,textObj);
@@ -154,7 +156,8 @@ exports.drawLoop = function(elem,bounds){
.attr("x2", stopx )
.attr("y2", stopy )
.attr("stroke-width", 2)
.attr("stroke", "#339933");
.attr("stroke", "#526e52")
.attr('class','loopLine');
};
drawLoopLine(bounds.startx, bounds.starty, bounds.stopx , bounds.starty);
drawLoopLine(bounds.stopx , bounds.starty, bounds.stopx , bounds.stopy );
@@ -166,6 +169,8 @@ exports.drawLoop = function(elem,bounds){
txt.x = bounds.startx;
txt.y = bounds.starty;
txt.labelMargin = 1.5 * conf.boxMargin;
txt.class = 'labelText';
txt.fill = 'white';
svgDraw.drawLabel(g,txt);
@@ -174,6 +179,7 @@ exports.drawLoop = function(elem,bounds){
txt.x = bounds.startx + (bounds.stopx - bounds.startx)/2;
txt.y = bounds.starty + 1.5 * conf.boxMargin;
txt.anchor = 'middle';
txt.class = 'loopText';
svgDraw.drawText(g,txt);
};
@@ -209,49 +215,38 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
//Make an SVG Container
//Draw the line
if(msg.type !== 2) {
if (msg.type === 1) {
g.append("line")
.attr("x1", startx)
.attr("y1", verticalPos)
.attr("x2", stopx)
.attr("y2", verticalPos)
.attr("stroke-width", 2)
.attr("stroke", "black")
.style("stroke-dasharray", ("3, 3"))
.attr("class", "link")
.attr("marker-end", "url(#arrowhead)");
//.attr("d", diagonal);
}
else {
g.append("line")
.attr("x1", startx)
.attr("y1", verticalPos)
.attr("x2", stopx)
.attr("y2", verticalPos)
.attr("stroke-width", 2)
.attr("stroke", "black")
.attr("class", "link")
.attr("marker-end", "url(#arrowhead)");
}
g.append("text") // text label for the x axis
.attr("x", txtCenter)
.attr("y", verticalPos - 10)
.style("text-anchor", "middle")
.text(msg.message);
exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos());
if (msg.type === 1) {
g.append("line")
.attr("x1", startx)
.attr("y1", verticalPos)
.attr("x2", stopx)
.attr("y2", verticalPos)
.attr("stroke-width", 2)
.attr("stroke", "black")
.style("stroke-dasharray", ("3, 3"))
.attr("class", "messageLine1")
.attr("marker-end", "url(#arrowhead)");
//.attr("d", diagonal);
}
else{
var textElem = g.append("text")
.attr("x", txtCenter)
.attr("y", exports.bounds.getVerticalPos() - 10)
.style("text-anchor", "middle")
.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);
else {
g.append("line")
.attr("x1", startx)
.attr("y1", verticalPos)
.attr("x2", stopx)
.attr("y2", verticalPos)
.attr("stroke-width", 2)
.attr("stroke", "black")
.attr("class", "messageLine0")
.attr("marker-end", "url(#arrowhead)");
}
g.append("text") // text label for the x axis
.attr("x", txtCenter)
.attr("y", verticalPos - 7)
.style("text-anchor", "middle")
.attr("class", "messageText")
.text(msg.message);
exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos());
};
/**
@@ -268,6 +263,7 @@ var drawActor = function(elem, left,description){
.attr("y1", 5)
.attr("x2", center)
.attr("y2", 2000)
.attr("class", 'actor-line')
.attr("stroke-width", '0.5px')
.attr("stroke", '#999');
@@ -278,11 +274,13 @@ var drawActor = function(elem, left,description){
.attr("stroke", '#666')
.attr("width", conf.width)
.attr("height", conf.height)
.attr("class", 'actor')
.attr("rx", 3)
.attr("ry", 3);
g.append("text") // text label for the x axis
.attr("x", center)
.attr("y", (conf.height/2)+5)
.attr('class','actor')
.style("text-anchor", "middle")
.text(description)
;

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

@@ -12,6 +12,10 @@ exports.drawRect = function(elem , rectData){
rectElem.attr("rx", rectData.rx);
rectElem.attr("ry", rectData.ry);
if(typeof rectData.class !== 'undefined'){
rectElem.attr("class", rectData.class);
}
return rectElem;
};
@@ -20,7 +24,7 @@ exports.drawText = function(elem , textData){
textElem.attr('x', textData.x);
textElem.attr('y', textData.y);
textElem.style('text-anchor', textData.anchor);
textElem.style('fill', textData.fill);
textElem.attr('fill', textData.fill);
textData.text.split('<br>').forEach(function(rowText){
var span = textElem.append('tspan');
@@ -29,6 +33,10 @@ exports.drawText = function(elem , textData){
span.text(rowText);
});
if(typeof textData.class !== 'undefined'){
textElem.attr("class", textData.class);
}
return textElem;
};
@@ -38,8 +46,9 @@ exports.drawLabel = function(elem , txtObject){
rectData.y = txtObject.y;
rectData.width = 50;
rectData.height = 20;
rectData.fill = '#339933';
rectData.fill = '#526e52';
rectData.stroke = 'none';
rectData.class = 'labelBox';
//rectData.color = 'white';
var label = exports.drawRect(elem, rectData);
@@ -54,7 +63,7 @@ exports.drawLabel = function(elem , txtObject){
exports.getTextObj = function(){
var rect = {
var txt = {
x: 0,
y: 0,
'fill':'black',
@@ -66,7 +75,7 @@ exports.getTextObj = function(){
rx: 0,
ry: 0
};
return rect;
return txt;
};
exports.getNoteRect = function(){