marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-17 19:24:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

add support for BT rendering

Browse Source
This commit is contained in:
Raghu Rajagopalan
2016-04-26 22:52:52 +05:30
parent a5a3bc8b7c
commit 6a674a0a40
2 changed files with 90 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/diagrams/gitGraph/gitGraphRenderer.js
View File

@@ -8,11 +8,12 @@ var log = new Logger.Log();
var allCommitsDict = {}; var allCommitsDict = {};
var branchNum; var branchNum;
var config = { var config = {
nodeWidth: 75, nodeSpacing: 75,
lineStrokeWidth: 4, lineStrokeWidth: 4,
branchLineHeight: 50, branchOffset: 50,
lineColor: 'grey', lineColor: 'grey',
leftMargin: 50, leftMargin: 50,
nodeRadius: 15,
nodeLabel: { nodeLabel: {
width: 75, width: 75,
height: 100, height: 100,
@@ -32,7 +33,7 @@ function svgCreateDefs(svg) {
.append('g') .append('g')
.attr('id', 'def-commit') .attr('id', 'def-commit')
.append('circle') .append('circle')
.attr('r', 15) .attr('r', config.nodeRadius)
.attr('cx', 0) .attr('cx', 0)
.attr('cy', 0); .attr('cy', 0);
svg.select('#def-commit') svg.select('#def-commit')
@@ -81,35 +82,69 @@ function getElementCoords(element, coords) {
}; };
} }
function svgDrawLineForCommits(svg, fromId, toId) { function svgDrawLineForCommits(svg, fromId, toId, direction) {
log.debug('svgDrawLineForCommits: ', fromId, toId); log.debug('svgDrawLineForCommits: ', fromId, toId);
var fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle')); var fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle'));
var toBbox = getElementCoords(svg.select('#node-' + toId + ' circle')); var toBbox = getElementCoords(svg.select('#node-' + toId + ' circle'));
//log.debug('svgDrawLineForCommits: ', fromBbox, toBbox); //log.debug('svgDrawLineForCommits: ', fromBbox, toBbox);
if (fromBbox.left - toBbox.left > config.nodeWidth) { switch (direction) {
var lineStart = { x: fromBbox.left - config.nodeWidth, y: toBbox.top + toBbox.height/2}; case 'LR':
if (fromBbox.left - toBbox.left > config.nodeSpacing) {
var lineStart = { x: fromBbox.left - config.nodeSpacing, y: toBbox.top + toBbox.height/2};
var lineEnd ={ x: toBbox.left + toBbox.width, y: toBbox.top + toBbox.height/2 }; var lineEnd ={ x: toBbox.left + toBbox.width, y: toBbox.top + toBbox.height/2 };
svgDrawLine(svg, [lineStart , lineEnd], 'linear') svgDrawLine(svg, [lineStart , lineEnd], 'linear')
svgDrawLine(svg, [ svgDrawLine(svg, [
{x: fromBbox.left, y: fromBbox.top + fromBbox.height/2}, {x: fromBbox.left, y: fromBbox.top + fromBbox.height/2},
{x: fromBbox.left - config.nodeWidth/2, y: fromBbox.top + fromBbox.height/2}, {x: fromBbox.left - config.nodeSpacing/2, y: fromBbox.top + fromBbox.height/2},
{x: fromBbox.left - config.nodeWidth/2, y: lineStart.y}, {x: fromBbox.left - config.nodeSpacing/2, y: lineStart.y},
lineStart]); lineStart]);
} else { } else {
svgDrawLine(svg, [{ svgDrawLine(svg, [{
'x': fromBbox.left, 'x': fromBbox.left,
'y': fromBbox.top + fromBbox.height / 2 'y': fromBbox.top + fromBbox.height / 2
}, { }, {
'x': fromBbox.left - config.nodeWidth/2, 'x': fromBbox.left - config.nodeSpacing/2,
'y': fromBbox.top + fromBbox.height / 2 'y': fromBbox.top + fromBbox.height / 2
}, { }, {
'x': fromBbox.left - config.nodeWidth/2, 'x': fromBbox.left - config.nodeSpacing/2,
'y': toBbox.top + toBbox.height / 2 'y': toBbox.top + toBbox.height / 2
}, { }, {
'x': toBbox.left + toBbox.width, 'x': toBbox.left + toBbox.width,
'y': toBbox.top + toBbox.height / 2 'y': toBbox.top + toBbox.height / 2
}]); }]);
} }
break;
case 'BT':
// + (fromBbox)
// |
// |
// + (toBbox)
if (toBbox.top - fromBbox.top > config.nodeSpacing) {
lineStart = { x: toBbox.left + toBbox.width/2, y: fromBbox.top + fromBbox.height + config.nodeSpacing};
lineEnd ={ x: toBbox.left + toBbox.width/2, y: toBbox.top };
svgDrawLine(svg, [lineStart , lineEnd], 'linear')
svgDrawLine(svg, [
{x: fromBbox.left + fromBbox.width/2, y: fromBbox.top + fromBbox.height},
{x: fromBbox.left + fromBbox.width/2, y: fromBbox.top + fromBbox.height + config.nodeSpacing/2},
{x: toBbox.left + toBbox.width/2, y: lineStart.y - config.nodeSpacing/2},
lineStart]);
} else {
svgDrawLine(svg, [{
'x': fromBbox.left + fromBbox.width/2,
'y': fromBbox.top + fromBbox.height
}, {
'x': fromBbox.left + fromBbox.width/2,
'y': fromBbox.top + config.nodeSpacing/2
}, {
'x': toBbox.left + toBbox.width/2,
'y': toBbox.top - config.nodeSpacing/2
}, {
'x': toBbox.left + toBbox.width/2,
'y': toBbox.top
}]);
}
break;
}
} }
function cloneNode(svg, selector) { function cloneNode(svg, selector) {
@@ -118,6 +153,7 @@ function cloneNode(svg, selector) {
function renderCommitHistory(svg, commitid, branches, direction) { function renderCommitHistory(svg, commitid, branches, direction) {
var commit; var commit;
var numCommits = Object.keys(allCommitsDict).length;
if (_.isString(commitid)) { if (_.isString(commitid)) {
do { do {
commit = allCommitsDict[commitid]; commit = allCommitsDict[commitid];
@@ -134,8 +170,14 @@ function renderCommitHistory(svg, commitid, branches, direction) {
return 'node-' + commit.id; return 'node-' + commit.id;
}) })
.attr('transform', function() { .attr('transform', function() {
return 'translate(' + (commit.seq * config.nodeWidth + config.leftMargin) + ', ' switch (direction) {
+ (branchNum * config.branchLineHeight) + ')'; case 'LR':
return 'translate(' + (commit.seq * config.nodeSpacing + config.leftMargin) + ', '
+ (branchNum * config.branchOffset) + ')';
case 'BT':
return 'translate(' + (branchNum * config.branchOffset + config.leftMargin) + ', '
+ ((numCommits - commit.seq) * config.nodeSpacing) + ')';
}
}) })
.attr('fill', 'yellow') .attr('fill', 'yellow')
.attr('stroke', 'grey') .attr('stroke', 'grey')
@@ -148,10 +190,10 @@ function renderCommitHistory(svg, commitid, branches, direction) {
log.debug('found branch ', branch.name); log.debug('found branch ', branch.name);
// don't try to select foreignObject - doesn't work. // don't try to select foreignObject - doesn't work.
// instead select by class name and it works. // instead select by class name and it works.
svg.select('#node-' + commit.id + ' .node-label') svg.select('#node-' + commit.id + ' p')
.append('xhtml:p') .append('xhtml:span')
.attr('class', 'branch-label') .attr('class', 'branch-label')
.text(branch.name); .text( ' ' + branch.name);
} }
commitid = commit.parent commitid = commit.parent
} while (commitid && allCommitsDict[commitid]); } while (commitid && allCommitsDict[commitid]);
@@ -165,15 +207,15 @@ function renderCommitHistory(svg, commitid, branches, direction) {
} }
} }
function renderLines(svg, commit) { function renderLines(svg, commit, direction) {
while (commit.seq > 0) { while (commit.seq > 0) {
if (_.isString(commit.parent)) { if (_.isString(commit.parent)) {
svgDrawLineForCommits(svg, commit.id, commit.parent); svgDrawLineForCommits(svg, commit.id, commit.parent, direction);
commit = allCommitsDict[commit.parent]; commit = allCommitsDict[commit.parent];
} else if (_.isArray(commit.parent)) { } else if (_.isArray(commit.parent)) {
svgDrawLineForCommits(svg, commit.id, commit.parent[0]) svgDrawLineForCommits(svg, commit.id, commit.parent[0], direction)
svgDrawLineForCommits(svg, commit.id, commit.parent[1]) svgDrawLineForCommits(svg, commit.id, commit.parent[1], direction)
renderLines(svg, allCommitsDict[commit.parent[1]]); renderLines(svg, allCommitsDict[commit.parent[1]], direction);
commit = allCommitsDict[commit.parent[0]]; commit = allCommitsDict[commit.parent[0]];
} }
} }
@@ -192,6 +234,10 @@ exports.draw = function(txt, id, ver) {
config = _.extend(config, apiConfig, db.getOptions()); config = _.extend(config, apiConfig, db.getOptions());
log.debug('effective options', config); log.debug('effective options', config);
var direction = db.getDirection(); var direction = db.getDirection();
if (direction === 'BT') {
config.nodeLabel.x += 200;
config.nodeLabel.y = -1 * 2* config.nodeRadius;
}
allCommitsDict = db.getCommits(); allCommitsDict = db.getCommits();
var branches = db.getBranchesAsObjArray(); var branches = db.getBranchesAsObjArray();
var svg = d3.select('#' + id); var svg = d3.select('#' + id);
@@ -199,12 +245,12 @@ exports.draw = function(txt, id, ver) {
branchNum = 1; branchNum = 1;
_.each(branches, function(v) { _.each(branches, function(v) {
renderCommitHistory(svg, v.commit.id, branches, direction); renderCommitHistory(svg, v.commit.id, branches, direction);
renderLines(svg, v.commit); renderLines(svg, v.commit, direction);
branchNum++; branchNum++;
}) })
svg.attr('height', 900); //svg.attr('height', 2500);
svg.attr('width', 2500); //svg.attr('width', 2500);
} catch (e) { } catch (e) {
log.error('Error while rendering gitgraph'); log.error('Error while rendering gitgraph');
log.error(e.message); log.error(e.message);

4
testgitgraph.mm
View File

@@ -1,7 +1,7 @@
gitGraph : gitGraph BT:
options options
{"key": "value", {"key": "value",
"nodeWidth": 150 "nodeSpacing": 150
} }
end end
commit commit