mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-22 00:40:22 +02:00
Auto fix standard style voilations
This commit is contained in:
Tyler Long
@@ -2,157 +2,160 @@
|
||||
* Created by knut on 14-11-23.
|
||||
*/
|
||||
|
||||
var sq = require('./parser/sequenceDiagram').parser;
|
||||
sq.yy = require('./sequenceDb');
|
||||
var svgDraw = require('./svgDraw');
|
||||
var d3 = require('../../d3');
|
||||
var Logger = require('../../logger');
|
||||
var log = Logger.Log;
|
||||
var sq = require('./parser/sequenceDiagram').parser
|
||||
sq.yy = require('./sequenceDb')
|
||||
var svgDraw = require('./svgDraw')
|
||||
var d3 = require('../../d3')
|
||||
var Logger = require('../../logger')
|
||||
var log = Logger.Log
|
||||
|
||||
var conf = {
|
||||
|
||||
diagramMarginX:50,
|
||||
diagramMarginY:30,
|
||||
diagramMarginX: 50,
|
||||
diagramMarginY: 30,
|
||||
// Margin between actors
|
||||
actorMargin:50,
|
||||
actorMargin: 50,
|
||||
// Width of actor boxes
|
||||
width:150,
|
||||
width: 150,
|
||||
// Height of actor boxes
|
||||
height:65,
|
||||
height: 65,
|
||||
// Margin around loop boxes
|
||||
boxMargin:10,
|
||||
boxTextMargin:5,
|
||||
noteMargin:10,
|
||||
boxMargin: 10,
|
||||
boxTextMargin: 5,
|
||||
noteMargin: 10,
|
||||
// Space between messages
|
||||
messageMargin:35,
|
||||
//mirror actors under diagram
|
||||
mirrorActors:false,
|
||||
messageMargin: 35,
|
||||
// mirror actors under diagram
|
||||
mirrorActors: false,
|
||||
// Depending on css styling this might need adjustment
|
||||
// Prolongs the edge of the diagram downwards
|
||||
bottomMarginAdj:1,
|
||||
bottomMarginAdj: 1,
|
||||
|
||||
// width of activation box
|
||||
activationWidth:10,
|
||||
activationWidth: 10,
|
||||
|
||||
//text placement as: tspan | fo | old only text as before
|
||||
textPlacement: 'tspan',
|
||||
};
|
||||
// text placement as: tspan | fo | old only text as before
|
||||
textPlacement: 'tspan'
|
||||
}
|
||||
|
||||
exports.bounds = {
|
||||
data:{
|
||||
startx:undefined,
|
||||
stopx :undefined,
|
||||
starty:undefined,
|
||||
stopy :undefined
|
||||
},
|
||||
verticalPos:0,
|
||||
data: {
|
||||
startx: undefined,
|
||||
stopx: undefined,
|
||||
starty: undefined,
|
||||
stopy: undefined
|
||||
},
|
||||
verticalPos: 0,
|
||||
|
||||
sequenceItems: [],
|
||||
activations: [],
|
||||
init : function(){
|
||||
this.sequenceItems = [];
|
||||
this.activations = [];
|
||||
this.data = {
|
||||
startx:undefined,
|
||||
stopx :undefined,
|
||||
starty:undefined,
|
||||
stopy :undefined
|
||||
};
|
||||
this.verticalPos =0;
|
||||
},
|
||||
updateVal : function (obj,key,val,fun){
|
||||
if(typeof obj[key] === 'undefined'){
|
||||
obj[key] = val;
|
||||
}else{
|
||||
obj[key] = fun(val,obj[key]);
|
||||
}
|
||||
},
|
||||
updateBounds:function(startx,starty,stopx,stopy){
|
||||
var _self = this;
|
||||
var cnt = 0;
|
||||
function updateFn(type) { return function updateItemBounds(item) {
|
||||
cnt++;
|
||||
// The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
|
||||
var n = _self.sequenceItems.length-cnt+1;
|
||||
|
||||
_self.updateVal(item, 'starty',starty - n*conf.boxMargin, Math.min);
|
||||
_self.updateVal(item, 'stopy' ,stopy + n*conf.boxMargin, Math.max);
|
||||
|
||||
_self.updateVal(exports.bounds.data, 'startx', startx - n * conf.boxMargin, Math.min);
|
||||
_self.updateVal(exports.bounds.data, 'stopx', stopx + 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){
|
||||
|
||||
var _startx, _starty, _stopx, _stopy;
|
||||
|
||||
_startx = Math.min(startx,stopx);
|
||||
_stopx = Math.max(startx,stopx);
|
||||
_starty = Math.min(starty,stopy);
|
||||
_stopy = Math.max(starty,stopy);
|
||||
|
||||
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.updateBounds(_startx,_starty,_stopx,_stopy);
|
||||
|
||||
},
|
||||
newActivation:function(message, diagram){
|
||||
var actorRect = sq.yy.getActors()[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+2,stopx:x+conf.activationWidth,stopy:undefined,
|
||||
actor: message.from.actor,
|
||||
anchored: svgDraw.anchorElement(diagram)
|
||||
});
|
||||
},
|
||||
endActivation:function(message){
|
||||
// find most recent activation for given actor
|
||||
var lastActorActivationIdx = this.activations
|
||||
.map(function(activation) { return activation.actor })
|
||||
.lastIndexOf(message.from.actor);
|
||||
var activation = this.activations.splice(lastActorActivationIdx, 1)[0];
|
||||
return activation;
|
||||
},
|
||||
newLoop:function(title){
|
||||
this.sequenceItems.push({startx:undefined,starty:this.verticalPos,stopx:undefined,stopy:undefined, title:title});
|
||||
},
|
||||
endLoop:function(){
|
||||
var loop = this.sequenceItems.pop();
|
||||
return loop;
|
||||
},
|
||||
addSectionToLoop: function(message) {
|
||||
var loop = this.sequenceItems.pop();
|
||||
loop.sections = loop.sections || [];
|
||||
loop.sectionTitles = loop.sectionTitles || [];
|
||||
loop.sections.push(exports.bounds.getVerticalPos());
|
||||
loop.sectionTitles.push(message);
|
||||
this.sequenceItems.push(loop);
|
||||
},
|
||||
bumpVerticalPos:function(bump){
|
||||
this.verticalPos = this.verticalPos + bump;
|
||||
this.data.stopy = this.verticalPos;
|
||||
},
|
||||
getVerticalPos:function(){
|
||||
return this.verticalPos;
|
||||
},
|
||||
getBounds:function(){
|
||||
return this.data;
|
||||
sequenceItems: [],
|
||||
activations: [],
|
||||
init: function () {
|
||||
this.sequenceItems = []
|
||||
this.activations = []
|
||||
this.data = {
|
||||
startx: undefined,
|
||||
stopx: undefined,
|
||||
starty: undefined,
|
||||
stopy: undefined
|
||||
}
|
||||
};
|
||||
this.verticalPos = 0
|
||||
},
|
||||
updateVal: function (obj, key, val, fun) {
|
||||
if (typeof obj[key] === 'undefined') {
|
||||
obj[key] = val
|
||||
} else {
|
||||
obj[key] = fun(val, obj[key])
|
||||
}
|
||||
},
|
||||
updateBounds: function (startx, starty, stopx, stopy) {
|
||||
var _self = this
|
||||
var cnt = 0
|
||||
function updateFn (type) {
|
||||
return function updateItemBounds (item) {
|
||||
cnt++
|
||||
// The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
|
||||
var n = _self.sequenceItems.length - cnt + 1
|
||||
|
||||
_self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min)
|
||||
_self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max)
|
||||
|
||||
_self.updateVal(exports.bounds.data, 'startx', startx - n * conf.boxMargin, Math.min)
|
||||
_self.updateVal(exports.bounds.data, 'stopx', stopx + 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) {
|
||||
var _startx, _starty, _stopx, _stopy
|
||||
|
||||
_startx = Math.min(startx, stopx)
|
||||
_stopx = Math.max(startx, stopx)
|
||||
_starty = Math.min(starty, stopy)
|
||||
_stopy = Math.max(starty, stopy)
|
||||
|
||||
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.updateBounds(_startx, _starty, _stopx, _stopy)
|
||||
},
|
||||
newActivation: function (message, diagram) {
|
||||
var actorRect = sq.yy.getActors()[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 + 2,
|
||||
stopx: x + conf.activationWidth,
|
||||
stopy: undefined,
|
||||
actor: message.from.actor,
|
||||
anchored: svgDraw.anchorElement(diagram)
|
||||
})
|
||||
},
|
||||
endActivation: function (message) {
|
||||
// find most recent activation for given actor
|
||||
var lastActorActivationIdx = this.activations
|
||||
.map(function (activation) { return activation.actor })
|
||||
.lastIndexOf(message.from.actor)
|
||||
var activation = this.activations.splice(lastActorActivationIdx, 1)[0]
|
||||
return activation
|
||||
},
|
||||
newLoop: function (title) {
|
||||
this.sequenceItems.push({startx: undefined, starty: this.verticalPos, stopx: undefined, stopy: undefined, title: title})
|
||||
},
|
||||
endLoop: function () {
|
||||
var loop = this.sequenceItems.pop()
|
||||
return loop
|
||||
},
|
||||
addSectionToLoop: function (message) {
|
||||
var loop = this.sequenceItems.pop()
|
||||
loop.sections = loop.sections || []
|
||||
loop.sectionTitles = loop.sectionTitles || []
|
||||
loop.sections.push(exports.bounds.getVerticalPos())
|
||||
loop.sectionTitles.push(message)
|
||||
this.sequenceItems.push(loop)
|
||||
},
|
||||
bumpVerticalPos: function (bump) {
|
||||
this.verticalPos = this.verticalPos + bump
|
||||
this.data.stopy = this.verticalPos
|
||||
},
|
||||
getVerticalPos: function () {
|
||||
return this.verticalPos
|
||||
},
|
||||
getBounds: function () {
|
||||
return this.data
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws an actor in the diagram with the attaced line
|
||||
@@ -160,43 +163,42 @@ 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, forceWidth){
|
||||
var rect = svgDraw.getNoteRect();
|
||||
rect.x = startx;
|
||||
rect.y = verticalPos;
|
||||
rect.width = forceWidth || conf.width;
|
||||
rect.class = 'note';
|
||||
var drawNote = function (elem, startx, verticalPos, msg, forceWidth) {
|
||||
var rect = svgDraw.getNoteRect()
|
||||
rect.x = startx
|
||||
rect.y = verticalPos
|
||||
rect.width = forceWidth || conf.width
|
||||
rect.class = 'note'
|
||||
|
||||
var g = elem.append('g');
|
||||
var rectElem = svgDraw.drawRect(g, rect);
|
||||
var g = elem.append('g')
|
||||
var rectElem = svgDraw.drawRect(g, rect)
|
||||
|
||||
var textObj = svgDraw.getTextObj();
|
||||
textObj.x = startx-4;
|
||||
textObj.y = verticalPos-13;
|
||||
textObj.textMargin = conf.noteMargin;
|
||||
textObj.dy = '1em';
|
||||
textObj.text = msg.message;
|
||||
textObj.class = 'noteText';
|
||||
var textObj = svgDraw.getTextObj()
|
||||
textObj.x = startx - 4
|
||||
textObj.y = verticalPos - 13
|
||||
textObj.textMargin = conf.noteMargin
|
||||
textObj.dy = '1em'
|
||||
textObj.text = msg.message
|
||||
textObj.class = 'noteText'
|
||||
|
||||
var textElem = svgDraw.drawText(g,textObj, rect.width-conf.noteMargin);
|
||||
var textElem = svgDraw.drawText(g, textObj, rect.width - conf.noteMargin)
|
||||
|
||||
var textHeight = textElem[0][0].getBBox().height;
|
||||
if(!forceWidth && textHeight > conf.width){
|
||||
textElem.remove();
|
||||
g = elem.append('g');
|
||||
var textHeight = textElem[0][0].getBBox().height
|
||||
if (!forceWidth && textHeight > conf.width) {
|
||||
textElem.remove()
|
||||
g = elem.append('g')
|
||||
|
||||
textElem = svgDraw.drawText(g,textObj, 2*rect.width-conf.noteMargin);
|
||||
textHeight = textElem[0][0].getBBox().height;
|
||||
rectElem.attr('width',2*rect.width);
|
||||
exports.bounds.insert(startx, verticalPos, startx + 2*rect.width, verticalPos + 2*conf.noteMargin + textHeight);
|
||||
}else{
|
||||
exports.bounds.insert(startx, verticalPos, startx + rect.width, verticalPos + 2*conf.noteMargin + textHeight);
|
||||
}
|
||||
|
||||
rectElem.attr('height',textHeight+ 2*conf.noteMargin);
|
||||
exports.bounds.bumpVerticalPos(textHeight+ 2*conf.noteMargin);
|
||||
};
|
||||
textElem = svgDraw.drawText(g, textObj, 2 * rect.width - conf.noteMargin)
|
||||
textHeight = textElem[0][0].getBBox().height
|
||||
rectElem.attr('width', 2 * rect.width)
|
||||
exports.bounds.insert(startx, verticalPos, startx + 2 * rect.width, verticalPos + 2 * conf.noteMargin + textHeight)
|
||||
} else {
|
||||
exports.bounds.insert(startx, verticalPos, startx + rect.width, verticalPos + 2 * conf.noteMargin + textHeight)
|
||||
}
|
||||
|
||||
rectElem.attr('height', textHeight + 2 * conf.noteMargin)
|
||||
exports.bounds.bumpVerticalPos(textHeight + 2 * conf.noteMargin)
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws a message
|
||||
@@ -207,124 +209,118 @@ var drawNote = function(elem, startx, verticalPos, msg, forceWidth){
|
||||
* @param txtCenter
|
||||
* @param msg
|
||||
*/
|
||||
var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
||||
var g = elem.append('g');
|
||||
var txtCenter = startx + (stopx-startx)/2;
|
||||
var drawMessage = function (elem, startx, stopx, verticalPos, msg) {
|
||||
var g = elem.append('g')
|
||||
var txtCenter = startx + (stopx - startx) / 2
|
||||
|
||||
var textElem = g.append('text') // text label for the x axis
|
||||
var textElem = 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);
|
||||
.text(msg.message)
|
||||
|
||||
var textWidth;
|
||||
var textWidth
|
||||
|
||||
if(typeof textElem[0][0].getBBox !== 'undefined'){
|
||||
textWidth = textElem[0][0].getBBox().width;
|
||||
}
|
||||
else{
|
||||
//textWidth = getBBox(textElem).width; //.getComputedTextLength()
|
||||
textWidth = textElem[0][0].getBoundingClientRect();
|
||||
//textWidth = textElem[0][0].getComputedTextLength();
|
||||
}
|
||||
if (typeof textElem[0][0].getBBox !== 'undefined') {
|
||||
textWidth = textElem[0][0].getBBox().width
|
||||
} else {
|
||||
// textWidth = getBBox(textElem).width; //.getComputedTextLength()
|
||||
textWidth = textElem[0][0].getBoundingClientRect()
|
||||
// textWidth = textElem[0][0].getComputedTextLength();
|
||||
}
|
||||
|
||||
var line;
|
||||
var line
|
||||
|
||||
if(startx===stopx){
|
||||
line = g.append('path')
|
||||
.attr('d', 'M ' +startx+ ','+verticalPos+' C ' +(startx+60)+ ','+(verticalPos-10)+' ' +(startx+60)+ ',' +
|
||||
(verticalPos+30)+' ' +startx+ ','+(verticalPos+20));
|
||||
if (startx === stopx) {
|
||||
line = g.append('path')
|
||||
.attr('d', 'M ' + startx + ',' + verticalPos + ' C ' + (startx + 60) + ',' + (verticalPos - 10) + ' ' + (startx + 60) + ',' +
|
||||
(verticalPos + 30) + ' ' + startx + ',' + (verticalPos + 20))
|
||||
|
||||
exports.bounds.bumpVerticalPos(30);
|
||||
var dx = Math.max(textWidth/2,100);
|
||||
exports.bounds.insert(startx-dx, exports.bounds.getVerticalPos() -10, stopx+dx, exports.bounds.getVerticalPos());
|
||||
}else{
|
||||
line = g.append('line');
|
||||
line.attr('x1', startx);
|
||||
line.attr('y1', verticalPos);
|
||||
line.attr('x2', stopx);
|
||||
line.attr('y2', verticalPos);
|
||||
exports.bounds.insert(startx, exports.bounds.getVerticalPos() -10, stopx, exports.bounds.getVerticalPos());
|
||||
}
|
||||
//Make an SVG Container
|
||||
//Draw the line
|
||||
if (msg.type === sq.yy.LINETYPE.DOTTED || msg.type === sq.yy.LINETYPE.DOTTED_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_OPEN) {
|
||||
line.style('stroke-dasharray', ('3, 3'));
|
||||
line.attr('class', 'messageLine1');
|
||||
}
|
||||
else {
|
||||
line.attr('class', 'messageLine0');
|
||||
}
|
||||
exports.bounds.bumpVerticalPos(30)
|
||||
var dx = Math.max(textWidth / 2, 100)
|
||||
exports.bounds.insert(startx - dx, exports.bounds.getVerticalPos() - 10, stopx + dx, exports.bounds.getVerticalPos())
|
||||
} else {
|
||||
line = g.append('line')
|
||||
line.attr('x1', startx)
|
||||
line.attr('y1', verticalPos)
|
||||
line.attr('x2', stopx)
|
||||
line.attr('y2', verticalPos)
|
||||
exports.bounds.insert(startx, exports.bounds.getVerticalPos() - 10, stopx, exports.bounds.getVerticalPos())
|
||||
}
|
||||
// Make an SVG Container
|
||||
// Draw the line
|
||||
if (msg.type === sq.yy.LINETYPE.DOTTED || msg.type === sq.yy.LINETYPE.DOTTED_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_OPEN) {
|
||||
line.style('stroke-dasharray', ('3, 3'))
|
||||
line.attr('class', 'messageLine1')
|
||||
} else {
|
||||
line.attr('class', 'messageLine0')
|
||||
}
|
||||
|
||||
var url = '';
|
||||
if(conf.arrowMarkerAbsolute){
|
||||
url = window.location.protocol+'//'+window.location.host+window.location.pathname +window.location.search;
|
||||
url = url.replace(/\(/g,'\\(');
|
||||
url = url.replace(/\)/g,'\\)');
|
||||
}
|
||||
var url = ''
|
||||
if (conf.arrowMarkerAbsolute) {
|
||||
url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search
|
||||
url = url.replace(/\(/g, '\\(')
|
||||
url = url.replace(/\)/g, '\\)')
|
||||
}
|
||||
|
||||
line.attr('stroke-width', 2);
|
||||
line.attr('stroke', 'black');
|
||||
line.style('fill', 'none'); // remove any fill colour
|
||||
if (msg.type === sq.yy.LINETYPE.SOLID || msg.type === sq.yy.LINETYPE.DOTTED){
|
||||
line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||
}
|
||||
line.attr('stroke-width', 2)
|
||||
line.attr('stroke', 'black')
|
||||
line.style('fill', 'none') // remove any fill colour
|
||||
if (msg.type === sq.yy.LINETYPE.SOLID || msg.type === sq.yy.LINETYPE.DOTTED) {
|
||||
line.attr('marker-end', 'url(' + url + '#arrowhead)')
|
||||
}
|
||||
|
||||
if (msg.type === sq.yy.LINETYPE.SOLID_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_CROSS){
|
||||
line.attr('marker-end', 'url(' + url + '#crosshead)');
|
||||
}
|
||||
if (msg.type === sq.yy.LINETYPE.SOLID_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_CROSS) {
|
||||
line.attr('marker-end', 'url(' + url + '#crosshead)')
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
module.exports.drawActors = function(diagram, actors, actorKeys,verticalPos){
|
||||
var i;
|
||||
module.exports.drawActors = function (diagram, actors, actorKeys, verticalPos) {
|
||||
var i
|
||||
// Draw the actors
|
||||
for(i=0;i<actorKeys.length;i++){
|
||||
var key = actorKeys[i];
|
||||
for (i = 0; i < actorKeys.length; i++) {
|
||||
var key = actorKeys[i]
|
||||
|
||||
// Add some rendering data to the object
|
||||
actors[key].x = i*conf.actorMargin +i*conf.width;
|
||||
actors[key].y = verticalPos;
|
||||
actors[key].width = conf.diagramMarginX;
|
||||
actors[key].height = conf.diagramMarginY;
|
||||
actors[key].x = i * conf.actorMargin + i * conf.width
|
||||
actors[key].y = verticalPos
|
||||
actors[key].width = conf.diagramMarginX
|
||||
actors[key].height = conf.diagramMarginY
|
||||
|
||||
// Draw the box with the attached line
|
||||
svgDraw.drawActor(diagram, actors[key].x, verticalPos, actors[key].description, conf);
|
||||
exports.bounds.insert(actors[key].x, verticalPos, actors[key].x + conf.width, conf.height);
|
||||
|
||||
}
|
||||
svgDraw.drawActor(diagram, actors[key].x, verticalPos, actors[key].description, conf)
|
||||
exports.bounds.insert(actors[key].x, verticalPos, actors[key].x + conf.width, conf.height)
|
||||
}
|
||||
|
||||
// Add a margin between the actor boxes and the first arrow
|
||||
//exports.bounds.bumpVerticalPos(conf.height+conf.messageMargin);
|
||||
exports.bounds.bumpVerticalPos(conf.height);
|
||||
};
|
||||
// exports.bounds.bumpVerticalPos(conf.height+conf.messageMargin);
|
||||
exports.bounds.bumpVerticalPos(conf.height)
|
||||
}
|
||||
|
||||
module.exports.setConf = function (cnf) {
|
||||
var keys = Object.keys(cnf)
|
||||
|
||||
module.exports.setConf = function(cnf){
|
||||
var keys = Object.keys(cnf);
|
||||
keys.forEach(function (key) {
|
||||
conf[key] = cnf[key]
|
||||
})
|
||||
}
|
||||
|
||||
keys.forEach(function(key){
|
||||
conf[key] = cnf[key];
|
||||
});
|
||||
};
|
||||
var actorActivations = function (actor) {
|
||||
return module.exports.bounds.activations.filter(function (activation) {
|
||||
return activation.actor == actor
|
||||
})
|
||||
}
|
||||
|
||||
var actorActivations = function(actor) {
|
||||
return module.exports.bounds.activations.filter(function(activation) {
|
||||
return activation.actor == actor;
|
||||
});
|
||||
};
|
||||
|
||||
var actorFlowVerticaBounds = function(actor) {
|
||||
var actorFlowVerticaBounds = function (actor) {
|
||||
// handle multiple stacked activations for same actor
|
||||
var actors = sq.yy.getActors();
|
||||
var activations = actorActivations(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];
|
||||
};
|
||||
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.
|
||||
@@ -332,184 +328,181 @@ var actorFlowVerticaBounds = function(actor) {
|
||||
* @param id
|
||||
*/
|
||||
module.exports.draw = function (text, id) {
|
||||
sq.yy.clear();
|
||||
sq.parse(text+'\n');
|
||||
sq.yy.clear()
|
||||
sq.parse(text + '\n')
|
||||
|
||||
exports.bounds.init();
|
||||
var diagram = d3.select('#'+id);
|
||||
exports.bounds.init()
|
||||
var diagram = d3.select('#' + id)
|
||||
|
||||
var startx;
|
||||
var stopx;
|
||||
var forceWidth;
|
||||
var startx
|
||||
var stopx
|
||||
var forceWidth
|
||||
|
||||
// Fetch data from the parsing
|
||||
var actors = sq.yy.getActors();
|
||||
var actorKeys = sq.yy.getActorKeys();
|
||||
var messages = sq.yy.getMessages();
|
||||
var title = sq.yy.getTitle();
|
||||
module.exports.drawActors(diagram, actors, actorKeys, 0);
|
||||
var actors = sq.yy.getActors()
|
||||
var actorKeys = sq.yy.getActorKeys()
|
||||
var messages = sq.yy.getMessages()
|
||||
var title = sq.yy.getTitle()
|
||||
module.exports.drawActors(diagram, actors, actorKeys, 0)
|
||||
|
||||
// The arrow head definition is attached to the svg once
|
||||
svgDraw.insertArrowHead(diagram);
|
||||
svgDraw.insertArrowCrossHead(diagram);
|
||||
svgDraw.insertArrowHead(diagram)
|
||||
svgDraw.insertArrowCrossHead(diagram)
|
||||
|
||||
function activeEnd(msg, verticalPos) {
|
||||
var activationData = exports.bounds.endActivation(msg);
|
||||
if(activationData.starty + 18 > verticalPos) {
|
||||
activationData.starty = verticalPos - 6;
|
||||
verticalPos += 12;
|
||||
}
|
||||
svgDraw.drawActivation(diagram, activationData, verticalPos, conf);
|
||||
|
||||
exports.bounds.insert(activationData.startx, verticalPos -10, activationData.stopx, verticalPos);
|
||||
function activeEnd (msg, verticalPos) {
|
||||
var activationData = exports.bounds.endActivation(msg)
|
||||
if (activationData.starty + 18 > verticalPos) {
|
||||
activationData.starty = verticalPos - 6
|
||||
verticalPos += 12
|
||||
}
|
||||
svgDraw.drawActivation(diagram, activationData, verticalPos, conf)
|
||||
|
||||
var lastMsg;
|
||||
exports.bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos)
|
||||
}
|
||||
|
||||
var lastMsg
|
||||
|
||||
// Draw the messages/signals
|
||||
messages.forEach(function(msg){
|
||||
var loopData;
|
||||
messages.forEach(function (msg) {
|
||||
var loopData
|
||||
|
||||
switch(msg.type){
|
||||
case sq.yy.LINETYPE.NOTE:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
switch (msg.type) {
|
||||
case sq.yy.LINETYPE.NOTE:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
|
||||
startx = actors[msg.from].x;
|
||||
stopx = actors[msg.to].x;
|
||||
startx = actors[msg.from].x
|
||||
stopx = actors[msg.to].x
|
||||
|
||||
if(msg.placement === sq.yy.PLACEMENT.RIGHTOF){
|
||||
drawNote(diagram, startx + (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
|
||||
|
||||
}else if(msg.placement === sq.yy.PLACEMENT.LEFTOF){
|
||||
drawNote(diagram, startx - (conf.width + conf.actorMargin)/2, exports.bounds.getVerticalPos(), msg);
|
||||
}else if(msg.to === msg.from) {
|
||||
if (msg.placement === sq.yy.PLACEMENT.RIGHTOF) {
|
||||
drawNote(diagram, startx + (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg)
|
||||
} else if (msg.placement === sq.yy.PLACEMENT.LEFTOF) {
|
||||
drawNote(diagram, startx - (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg)
|
||||
} else if (msg.to === msg.from) {
|
||||
// Single-actor over
|
||||
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg);
|
||||
}else{
|
||||
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg)
|
||||
} else {
|
||||
// Multi-actor over
|
||||
forceWidth = Math.abs(startx - stopx) + conf.actorMargin;
|
||||
drawNote(diagram, (startx + stopx + conf.width - forceWidth)/2, exports.bounds.getVerticalPos(), msg,
|
||||
forceWidth);
|
||||
}
|
||||
break;
|
||||
case sq.yy.LINETYPE.ACTIVE_START:
|
||||
exports.bounds.newActivation(msg, diagram);
|
||||
break;
|
||||
case sq.yy.LINETYPE.ACTIVE_END:
|
||||
activeEnd(msg, exports.bounds.getVerticalPos());
|
||||
break;
|
||||
case sq.yy.LINETYPE.LOOP_START:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
exports.bounds.newLoop(msg.message);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.LOOP_END:
|
||||
loopData = exports.bounds.endLoop();
|
||||
|
||||
svgDraw.drawLoop(diagram, loopData,'loop', conf);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.OPT_START:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
exports.bounds.newLoop(msg.message);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.OPT_END:
|
||||
loopData = exports.bounds.endLoop();
|
||||
|
||||
svgDraw.drawLoop(diagram, loopData, 'opt', conf);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.ALT_START:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
exports.bounds.newLoop(msg.message);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.ALT_ELSE:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
loopData = exports.bounds.addSectionToLoop(msg.message);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.ALT_END:
|
||||
loopData = exports.bounds.endLoop();
|
||||
|
||||
svgDraw.drawLoop(diagram, loopData,'alt', conf);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.PAR_START:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
exports.bounds.newLoop(msg.message);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.PAR_AND:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
loopData = exports.bounds.addSectionToLoop(msg.message);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
break;
|
||||
case sq.yy.LINETYPE.PAR_END:
|
||||
loopData = exports.bounds.endLoop();
|
||||
svgDraw.drawLoop(diagram, loopData, 'par', conf);
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin);
|
||||
break;
|
||||
default:
|
||||
try {
|
||||
lastMsg = msg;
|
||||
exports.bounds.bumpVerticalPos(conf.messageMargin);
|
||||
var fromBounds = actorFlowVerticaBounds(msg.from);
|
||||
var toBounds = actorFlowVerticaBounds(msg.to);
|
||||
var fromIdx = fromBounds[0] <= toBounds[0]?1:0;
|
||||
var toIdx = fromBounds[0] < toBounds[0]?0:1;
|
||||
startx = fromBounds[fromIdx];
|
||||
stopx = toBounds[toIdx];
|
||||
|
||||
var verticalPos = exports.bounds.getVerticalPos();
|
||||
drawMessage(diagram, startx, stopx, verticalPos, msg);
|
||||
var allBounds = fromBounds.concat(toBounds);
|
||||
exports.bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos);
|
||||
} catch (e) {
|
||||
console.error('error while drawing message', e);
|
||||
}
|
||||
forceWidth = Math.abs(startx - stopx) + conf.actorMargin
|
||||
drawNote(diagram, (startx + stopx + conf.width - forceWidth) / 2, exports.bounds.getVerticalPos(), msg,
|
||||
forceWidth)
|
||||
}
|
||||
});
|
||||
break
|
||||
case sq.yy.LINETYPE.ACTIVE_START:
|
||||
exports.bounds.newActivation(msg, diagram)
|
||||
break
|
||||
case sq.yy.LINETYPE.ACTIVE_END:
|
||||
activeEnd(msg, exports.bounds.getVerticalPos())
|
||||
break
|
||||
case sq.yy.LINETYPE.LOOP_START:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
exports.bounds.newLoop(msg.message)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.LOOP_END:
|
||||
loopData = exports.bounds.endLoop()
|
||||
|
||||
svgDraw.drawLoop(diagram, loopData, 'loop', conf)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.OPT_START:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
exports.bounds.newLoop(msg.message)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.OPT_END:
|
||||
loopData = exports.bounds.endLoop()
|
||||
|
||||
if(conf.mirrorActors){
|
||||
// Draw actors below diagram
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin*2);
|
||||
module.exports.drawActors(diagram, actors, actorKeys, exports.bounds.getVerticalPos());
|
||||
svgDraw.drawLoop(diagram, loopData, 'opt', conf)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.ALT_START:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
exports.bounds.newLoop(msg.message)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.ALT_ELSE:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
loopData = exports.bounds.addSectionToLoop(msg.message)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.ALT_END:
|
||||
loopData = exports.bounds.endLoop()
|
||||
|
||||
svgDraw.drawLoop(diagram, loopData, 'alt', conf)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.PAR_START:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
exports.bounds.newLoop(msg.message)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.PAR_AND:
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
loopData = exports.bounds.addSectionToLoop(msg.message)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
break
|
||||
case sq.yy.LINETYPE.PAR_END:
|
||||
loopData = exports.bounds.endLoop()
|
||||
svgDraw.drawLoop(diagram, loopData, 'par', conf)
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin)
|
||||
break
|
||||
default:
|
||||
try {
|
||||
lastMsg = msg
|
||||
exports.bounds.bumpVerticalPos(conf.messageMargin)
|
||||
var fromBounds = actorFlowVerticaBounds(msg.from)
|
||||
var toBounds = actorFlowVerticaBounds(msg.to)
|
||||
var fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0
|
||||
var toIdx = fromBounds[0] < toBounds[0] ? 0 : 1
|
||||
startx = fromBounds[fromIdx]
|
||||
stopx = toBounds[toIdx]
|
||||
|
||||
var verticalPos = exports.bounds.getVerticalPos()
|
||||
drawMessage(diagram, startx, stopx, verticalPos, msg)
|
||||
var allBounds = fromBounds.concat(toBounds)
|
||||
exports.bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos)
|
||||
} catch (e) {
|
||||
console.error('error while drawing message', e)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var box = exports.bounds.getBounds();
|
||||
if (conf.mirrorActors) {
|
||||
// Draw actors below diagram
|
||||
exports.bounds.bumpVerticalPos(conf.boxMargin * 2)
|
||||
module.exports.drawActors(diagram, actors, actorKeys, exports.bounds.getVerticalPos())
|
||||
}
|
||||
|
||||
var box = exports.bounds.getBounds()
|
||||
|
||||
// Adjust line height of actor lines now that the height of the diagram is known
|
||||
log.debug('For line height fix Querying: #' + id + ' .actor-line');
|
||||
var actorLines = d3.selectAll('#' + id + ' .actor-line');
|
||||
actorLines.attr('y2',box.stopy);
|
||||
log.debug('For line height fix Querying: #' + id + ' .actor-line')
|
||||
var actorLines = d3.selectAll('#' + id + ' .actor-line')
|
||||
actorLines.attr('y2', box.stopy)
|
||||
|
||||
var height = box.stopy - box.starty + 2 * conf.diagramMarginY
|
||||
|
||||
var height = box.stopy - box.starty + 2*conf.diagramMarginY;
|
||||
if (conf.mirrorActors) {
|
||||
height = height - conf.boxMargin + conf.bottomMarginAdj
|
||||
}
|
||||
|
||||
if(conf.mirrorActors){
|
||||
height = height - conf.boxMargin + conf.bottomMarginAdj;
|
||||
}
|
||||
var width = (box.stopx - box.startx) + (2 * conf.diagramMarginX)
|
||||
|
||||
var width = (box.stopx - box.startx) + (2 * conf.diagramMarginX);
|
||||
|
||||
if(title) {
|
||||
diagram.append('text')
|
||||
if (title) {
|
||||
diagram.append('text')
|
||||
.text(title)
|
||||
.attr('x', ( ( box.stopx-box.startx) / 2 ) - ( 2 * conf.diagramMarginX ) )
|
||||
.attr('y', -25);
|
||||
}
|
||||
.attr('x', ((box.stopx - box.startx) / 2) - (2 * conf.diagramMarginX))
|
||||
.attr('y', -25)
|
||||
}
|
||||
|
||||
if(conf.useMaxWidth) {
|
||||
diagram.attr('height', '100%');
|
||||
diagram.attr('width', '100%');
|
||||
diagram.attr('style', 'max-width:' + (width) + 'px;');
|
||||
}else{
|
||||
diagram.attr('height',height);
|
||||
diagram.attr('width', width );
|
||||
}
|
||||
var extraVertForTitle = title ? 40 : 0;
|
||||
diagram.attr('viewBox', (box.startx - conf.diagramMarginX) + ' -' + (conf.diagramMarginY + extraVertForTitle) + ' ' + width + ' ' + (height + extraVertForTitle));
|
||||
};
|
||||
if (conf.useMaxWidth) {
|
||||
diagram.attr('height', '100%')
|
||||
diagram.attr('width', '100%')
|
||||
diagram.attr('style', 'max-width:' + (width) + 'px;')
|
||||
} else {
|
||||
diagram.attr('height', height)
|
||||
diagram.attr('width', width)
|
||||
}
|
||||
var extraVertForTitle = title ? 40 : 0
|
||||
diagram.attr('viewBox', (box.startx - conf.diagramMarginX) + ' -' + (conf.diagramMarginY + extraVertForTitle) + ' ' + width + ' ' + (height + extraVertForTitle))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user