marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 16:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

draw activation boxes

Browse Source
This commit is contained in:
Szymon Stasik
2016-03-11 16:44:45 +01:00
parent 2452532557
commit 614e9f4b87
2 changed files with 85 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,7 @@ var conf = {
diagramMarginY:10, diagramMarginY:10,
// Margin between actors // Margin between actors
actorMargin:50, actorMargin:50,
// Width of actor moxes // Width of actor boxes
width:150, width:150,
// Height of actor boxes // Height of actor boxes
height:65, height:65,
@@ -29,7 +29,10 @@ var conf = {
mirrorActors:false, mirrorActors:false,
// Depending on css styling this might need adjustment // Depending on css styling this might need adjustment
// Prolongs the edge of the diagram downwards // Prolongs the edge of the diagram downwards
bottomMarginAdj:1 bottomMarginAdj:1,
// width of activation box
activationWidth:10
}; };
//var bb = getBBox('path'); //var bb = getBBox('path');
@@ -42,11 +45,11 @@ exports.bounds = {
}, },
verticalPos:0, verticalPos:0,
list: [], sequenceItems: [],
activations: [], activations: [],
init : function(){ init : function(){
this.list = []; this.sequenceItems = [];
this.activations = [], this.activations = [];
this.data = { this.data = {
startx:undefined, startx:undefined,
stopx :undefined, stopx :undefined,
@@ -62,24 +65,31 @@ exports.bounds = {
obj[key] = fun(val,obj[key]); obj[key] = fun(val,obj[key]);
} }
}, },
updateLoops:function(startx,starty,stopx,stopy){ updateBounds:function(startx,starty,stopx,stopy){
var _self = this; var _self = this;
var cnt = 0; var cnt = 0;
this.list.forEach(function(loop){ function updateFn(type) { return function updateItemBounds(item) {
cnt++; cnt++;
// The loop list is a stack so the biggest margins in the beginning of the list // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
var n = _self.list.length-cnt+1; var n = _self.sequenceItems.length-cnt+1;
_self.updateVal(loop, 'startx',startx - n*conf.boxMargin, Math.min); _self.updateVal(item, 'starty',starty - n*conf.boxMargin, Math.min);
_self.updateVal(loop, 'starty',starty - n*conf.boxMargin, Math.min); _self.updateVal(item, 'stopy' ,stopy + n*conf.boxMargin, Math.max);
_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, '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,'stopx' ,stopx + n*conf.boxMargin ,Math.max);
_self.updateVal(exports.bounds.data,'stopy' ,stopy + n*conf.boxMargin ,Math.max); if (!(type == 'activation')) {
}); _self.updateVal(item, 'startx',startx - n*conf.boxMargin, Math.min);
_self.updateVal(item, 'stopx' ,stopx + n*conf.boxMargin, Math.max);
_self.updateVal(exports.bounds.data, 'starty', starty - n * conf.boxMargin, Math.min);
_self.updateVal(exports.bounds.data, 'stopy', stopy + n * conf.boxMargin, Math.max);
}
}}
this.sequenceItems.forEach(updateFn());
this.activations.forEach(updateFn('activation'));
}, },
insert:function(startx,starty,stopx,stopy){ insert:function(startx,starty,stopx,stopy){
@@ -95,32 +105,34 @@ exports.bounds = {
this.updateVal(exports.bounds.data,'stopx' ,_stopx ,Math.max); this.updateVal(exports.bounds.data,'stopx' ,_stopx ,Math.max);
this.updateVal(exports.bounds.data,'stopy' ,_stopy ,Math.max); this.updateVal(exports.bounds.data,'stopy' ,_stopy ,Math.max);
this.updateLoops(_startx,_starty,_stopx,_stopy); this.updateBounds(_startx,_starty,_stopx,_stopy);
}, },
newActivation:function(message){ newActivation:function(message, diagram){
console.debug("new activation", message); var actorRect = sq.yy.getActors()[message.from.actor];
this.activations.push({startx:undefined,starty:this.verticalPos,stopx:undefined,stopy:undefined, actor: message.from.actor}); var stackedSize = actorActivations(message.from.actor).length;
var x = actorRect.x + conf.width/2 + (stackedSize-1)*conf.activationWidth/2;
this.activations.push({startx:x,starty:this.verticalPos,stopx:x+conf.activationWidth,stopy:undefined,
actor: message.from.actor,
anchored: svgDraw.anchorElement(diagram)
});
}, },
endActivation:function(){ endActivation:function(){
var activation = this.activations.pop(); var activation = this.activations.pop();
console.debug("render end activation", activation);
//loop.stopy = exports.bounds.getVerticalPos();
return activation; return activation;
}, },
newLoop:function(title){ newLoop:function(title){
this.list.push({startx:undefined,starty:this.verticalPos,stopx:undefined,stopy:undefined, title:title}); this.sequenceItems.push({startx:undefined,starty:this.verticalPos,stopx:undefined,stopy:undefined, title:title});
}, },
endLoop:function(){ endLoop:function(){
var loop = this.list.pop(); var loop = this.sequenceItems.pop();
//loop.stopy = exports.bounds.getVerticalPos();
return loop; return loop;
}, },
addElseToLoop:function(message){ addElseToLoop:function(message){
var loop = this.list.pop(); var loop = this.sequenceItems.pop();
loop.elsey = exports.bounds.getVerticalPos(); loop.elsey = exports.bounds.getVerticalPos();
loop.elseText = message; loop.elseText = message;
this.list.push(loop); this.sequenceItems.push(loop);
}, },
bumpVerticalPos:function(bump){ bumpVerticalPos:function(bump){
this.verticalPos = this.verticalPos + bump; this.verticalPos = this.verticalPos + bump;
@@ -266,7 +278,7 @@ module.exports.drawActors = function(diagram, actors, actorKeys,verticalPos){
// Add some rendering data to the object // Add some rendering data to the object
actors[key].x = i*conf.actorMargin +i*conf.width; actors[key].x = i*conf.actorMargin +i*conf.width;
actors[key].y = verticalPos; actors[key].y = verticalPos;
actors[key].width = conf.diagramMarginY; actors[key].width = conf.diagramMarginX;
actors[key].height = conf.diagramMarginY; actors[key].height = conf.diagramMarginY;
// Draw the box with the attached line // Draw the box with the attached line
@@ -288,6 +300,23 @@ module.exports.setConf = function(cnf){
conf[key] = cnf[key]; conf[key] = cnf[key];
}); });
}; };
var actorActivations = function(actor) {
return module.exports.bounds.activations.filter(function(activation) {
return activation.actor == actor;
});
};
var actorFlowVerticaBounds = function(actor) {
// handle multiple stacked activations for same actor
var actors = sq.yy.getActors();
var activations = actorActivations(actor);
var left = activations.reduce(function(acc,activation) { return Math.min(acc,activation.startx)}, actors[actor].x + conf.width/2);
var right = activations.reduce(function(acc,activation) { return Math.max(acc,activation.stopx)}, actors[actor].x + conf.width/2);
return [left,right];
};
/** /**
* 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
@@ -341,17 +370,15 @@ module.exports.draw = function (text, id) {
} }
break; break;
case sq.yy.LINETYPE.ACTIVE_START: case sq.yy.LINETYPE.ACTIVE_START:
console.info('ACTIVE_START', msg);
// exports.bounds.bumpVerticalPos(conf.boxMargin); // exports.bounds.bumpVerticalPos(conf.boxMargin);
exports.bounds.newActivation(msg); exports.bounds.newActivation(msg, diagram);
// exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin); // exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin);
break; break;
case sq.yy.LINETYPE.ACTIVE_END: case sq.yy.LINETYPE.ACTIVE_END:
console.info('ACTIVE_END', msg);
var activationData = exports.bounds.endActivation(); var activationData = exports.bounds.endActivation();
svgDraw.drawActivation(diagram, activationData, exports.bounds.getVerticalPos(), conf);
// svgDraw.drawActivation(diagram, activationData, conf); exports.bounds.insert(activationData.startx, exports.bounds.getVerticalPos() -10, activationData.stopx, exports.bounds.getVerticalPos());
// exports.bounds.bumpVerticalPos(conf.boxMargin);
break; break;
case sq.yy.LINETYPE.LOOP_START: case sq.yy.LINETYPE.LOOP_START:
exports.bounds.bumpVerticalPos(conf.boxMargin); exports.bounds.bumpVerticalPos(conf.boxMargin);
@@ -394,15 +421,22 @@ module.exports.draw = function (text, id) {
exports.bounds.bumpVerticalPos(conf.boxMargin); exports.bounds.bumpVerticalPos(conf.boxMargin);
break; break;
default: default:
try {
exports.bounds.bumpVerticalPos(conf.messageMargin); exports.bounds.bumpVerticalPos(conf.messageMargin);
startx = actors[msg.from].x + conf.width/2; var fromBounds = actorFlowVerticaBounds(msg.from);
stopx = actors[msg.to].x + conf.width/2; var toBounds = actorFlowVerticaBounds(msg.to);
var forward = fromBounds[0] < toBounds[0];
startx = fromBounds[forward?1:0];
stopx = toBounds[forward?0:1];
drawMessage(diagram, startx, stopx, exports.bounds.getVerticalPos(), msg); drawMessage(diagram, startx, stopx, exports.bounds.getVerticalPos(), msg);
} catch (e) {
console.error('error while drawing message', e);
}
} }
}); });
if(conf.mirrorActors){ if(conf.mirrorActors){
// Draw actors below diagram // Draw actors below diagram
exports.bounds.bumpVerticalPos(conf.boxMargin*2); exports.bounds.bumpVerticalPos(conf.boxMargin*2);

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

@@ -121,52 +121,24 @@ exports.drawActor = function(elem, left, verticalPos, description,conf){
; ;
}; };
exports.anchorElement = function(elem) {
return elem.append('g');
};
/** /**
* 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 elem - element to append activation rect
* @param pos The position if the actor in the list of actors * @param bounds - activation box bounds
* @param description The text in the box * @param verticalPos - precise y cooridnate of bottom activation box edge
*/ */
exports.drawActivation = function(elem,bounds,conf){ exports.drawActivation = function(elem,bounds,verticalPos){
var rect = exports.getNoteRect(); var rect = exports.getNoteRect();
rect.x = left; var g = bounds.anchored;
rect.y = verticalPos; rect.x = bounds.startx;
rect.fill = '#ffffff'; rect.y = bounds.starty;
rect.width = conf.width; rect.fill = 'white';
rect.height = conf.height; rect.width = bounds.stopx - bounds.startx;
rect.class = 'actor'; rect.height = verticalPos - bounds.starty;
exports.drawRect(g, rect); exports.drawRect(g, rect);
// drawBox(bounds.startx, bounds.starty, bounds.stopx , bounds.starty);
// drawBox(bounds.stopx , bounds.starty, bounds.stopx , bounds.stopy );
// drawBox(bounds.startx, bounds.stopy , bounds.stopx , bounds.stopy );
// drawBox(bounds.startx, bounds.starty, bounds.startx, bounds.stopy );
// var txt = exports.getTextObj();
// txt.text = labelText;
// txt.x = bounds.startx;
// txt.y = bounds.starty;
// txt.labelMargin = 1.5 * 10; // This is the small box that says "loop"
// txt.class = 'labelText'; // Its size & position are fixed.
// txt.fill = 'white';
//
// exports.drawLabel(g,txt);
//
// txt = exports.getTextObj();
// txt.text = '[ ' + bounds.title + ' ]';
// txt.x = bounds.startx + (bounds.stopx - bounds.startx)/2;
// txt.y = bounds.starty + 1.5 * conf.boxMargin;
// txt.anchor = 'middle';
// txt.class = 'loopText';
//
// exports.drawText(g,txt);
//
// if(typeof bounds.elseText !== 'undefined') {
// txt.text = '[ ' + bounds.elseText + ' ]';
// txt.y = bounds.elsey + 1.5 * conf.boxMargin;
// exports.drawText(g, txt);
// }
}; };
/** /**