Skip to content

Commit

Permalink
Cleanup of sequence diagram rendering code (still experimental)
Browse files Browse the repository at this point in the history 
Better handling of width. Instead uf using width 100% the width is set to the width of the graph. Should help issue #19.
  • Loading branch information
@knsv
knsv committed Dec 5, 2014
1 parent 8949166 commit 2b9e464
Show file tree
Hide file tree
Showing 7 changed files with 295 additions and 235 deletions.
164 changes: 89 additions & 75 deletions dist/mermaid.full.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13327,7 +13327,8 @@ var draw = function (text, id,isDot) {
// Center the graph
var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
//svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", g.graph().height + 40);
svg.attr("height", g.graph().height );
svg.attr("width", g.graph().width );
};

/**
Expand Down Expand Up @@ -13355,7 +13356,7 @@ var init = function () {
txt = txt.replace(/</g,'&lt;');
txt = he.decode(txt).trim();

element.innerHTML = '<svg id="' + id + '" width="100%">' +
element.innerHTML = '<svg id="' + id + '">' +
'<g />' +
'</svg>';

Expand Down Expand Up @@ -15911,6 +15912,7 @@ exports.parseError = function(err, hash) {
console.log('Syntax error:' + err);
};
},{}],109:[function(require,module,exports){
/* globals d3 */
/**
* Created by knut on 14-11-23.
*/
Expand All @@ -15927,96 +15929,67 @@ module.exports.draw = function (text, id) {
sq.yy.clear();
sq.parse(text);

var actors = sq.yy.getActors();
var actorKeys = sq.yy.getActorKeys();

var i;
//console.log('Len = ' + )
for(i=0;i<actorKeys.length;i++){
var key = actorKeys[i];

//console.log('Doing key: '+key)

var startMargin = 50;
var margin = 50;
var width = 150;
var height = 65;
var yStartMargin = 10;

console.log('x=: '+(startMargin + i*margin +i*150))

var cont = d3.select('#'+id);
var g = cont.append("g");
actors[actorKeys[i]].x = startMargin + i*margin +i*150;
actors[actorKeys[i]].y = yStartMargin;
actors[actorKeys[i]].width = yStartMargin;
actors[actorKeys[i]].height = yStartMargin;

var center = actors[actorKeys[i]].x +(width/2);

// Intial config for margins etc
var startMargin = 50;
var margin = 50;
var width = 150;
var height = 65;
var yStartMargin = 10;
var diagram = d3.select('#'+id);
/**
* 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
*/
var drawActor = function(elem, center, pos, description){
var g = elem.append("g");
g.append("line")
.attr("x1", center)
.attr("y1", yStartMargin)
.attr("x2", center)
.attr("y2", 2000)
.attr("stroke-width", '0.5px')
.attr("stroke", '#999')
.attr("stroke", '#999');

g.append("rect")
.attr("x", startMargin + i*margin +i*150)
.attr("x", startMargin + pos*margin +i*150)
.attr("y", yStartMargin)
.attr("fill", '#eaeaea')
.attr("stroke", '#666')
.attr("width", width)
.attr("height", height)
.attr("rx", 3)
.attr("ry", 3)
.attr("ry", 3);
g.append("text") // text label for the x axis
.attr("x", startMargin + i*margin +i*width + 75)
.attr("x", startMargin + pos*margin +i*width + 75)
.attr("y", yStartMargin+37.5)
.style("text-anchor", "middle")
.text(actors[actorKeys[i]].description)
;


}


var messages = sq.yy.getMessages();

// Setup arrow head
// define marker
cont.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("refX", 5) /*must be smarter way to calculate shift*/
.attr("refY", 2)
.attr("markerWidth", 6)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead




var verticalPos = startMargin + 30;
messages.forEach(function(msg){

console.log('start',msg.from);
console.log('actor',actors[msg.from]);
.text(description)
;
};

verticalPos = verticalPos + 40;
var startx = actors[msg.from].x + width/2;
var stopx = actors[msg.to].x + width/2;
var txtCenter = startx + (stopx-startx)/2;
console.log('txtCenter',txtCenter);
console.log(txtCenter);
console.log(msg.message);
/**
* Setup arrow head and define the marker. The result is appended to the svg.
*/
var insertArrowHead = function(elem){
elem.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("refX", 5) /*must be smarter way to calculate shift*/
.attr("refY", 2)
.attr("markerWidth", 6)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
};

var drawMessage = function(elem, startx, stopx, verticalPos, txtCenter, msg){
var g = elem.append("g");
//Make an SVG Container
//Draw the line
if(msg.type===1){
var circle = g.append("line")
g.append("line")
.attr("x1", startx)
.attr("y1", verticalPos)
.attr("x2", stopx)
Expand All @@ -16025,19 +15998,19 @@ module.exports.draw = function (text, id) {
.attr("stroke", "black")
.style("stroke-dasharray", ("3, 3"))
.attr("class", "link")
.attr("marker-end", "url(#arrowhead)")
.attr("marker-end", "url(#arrowhead)");
//.attr("d", diagonal);
}
else{
var circle = g.append("line")
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)")
.attr("marker-end", "url(#arrowhead)");
//.attr("d", diagonal);
}

Expand All @@ -16046,12 +16019,53 @@ module.exports.draw = function (text, id) {
.attr("y", verticalPos-10)
.style("text-anchor", "middle")
.text(msg.message);
});
};

// Fetch data from the parsing
var actors = sq.yy.getActors();
var actorKeys = sq.yy.getActorKeys();
var messages = sq.yy.getMessages();

var i, maxX = 0;

// Draw the actors
for(i=0;i<actorKeys.length;i++){
var key = actorKeys[i];

// Add some rendering data to the object
actors[key].x = startMargin + i*margin +i*150;
actors[key].y = yStartMargin;
actors[key].width = yStartMargin;
actors[key].height = yStartMargin;

var center = actors[key].x + (width/2);

cont.attr("height", verticalPos + 40);
// 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);
}
maxX = maxX + width;


// The arrow head definition is attached to the svg once
insertArrowHead(diagram);

// Draw the messages/signals
var verticalPos = startMargin + 30;
messages.forEach(function(msg){

verticalPos = verticalPos + 40;
var startx = actors[msg.from].x + width/2;
var stopx = actors[msg.to].x + width/2;
var txtCenter = startx + (stopx-startx)/2;
drawMessage(diagram, startx, stopx, verticalPos, txtCenter, msg);

});

diagram.attr("height", verticalPos + 40);
diagram.attr("width", maxX );
};

},{"./parser/sequenceDiagram":107,"./sequenceDb":108}],110:[function(require,module,exports){
Expand Down
4 changes: 2 additions & 2 deletions dist/mermaid.full.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 2b9e464

Please sign in to comment.