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

Cleanup of sequence diagram rendering code (still experimental)

Browse Source 
Better handling of width. Instead uf using width 100% the width is set to the width of the graph. Should help issue #19.
This commit is contained in:
knsv
2014-12-05 10:19:07 +01:00
parent 8949166a17
commit 2b9e464798
7 changed files with 299 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/main.js
View File

@@ -267,7 +267,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 );
};
/**
@@ -295,7 +296,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>';

163
src/sequenceRenderer.js
View File

@@ -1,3 +1,4 @@
/* globals d3 */
/**
* Created by knut on 14-11-23.
*/
@@ -14,96 +15,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)
;
.text(description)
;
};
/**
* 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 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]);
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);
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)
@@ -112,11 +84,11 @@ 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)
@@ -124,7 +96,7 @@ module.exports.draw = function (text, id) {
.attr("stroke-width", 2)
.attr("stroke", "black")
.attr("class", "link")
.attr("marker-end", "url(#arrowhead)")
.attr("marker-end", "url(#arrowhead)");
//.attr("d", diagonal);
}
@@ -133,10 +105,51 @@ 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);
// 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);
});
cont.attr("height", verticalPos + 40);
diagram.attr("height", verticalPos + 40);
diagram.attr("width", maxX );
};