From 6a674a0a40c044d86e92afd83c778014479f4ce9 Mon Sep 17 00:00:00 2001 From: Raghu Rajagopalan Date: Tue, 26 Apr 2016 22:52:52 +0530 Subject: [PATCH] add support for BT rendering --- src/diagrams/gitGraph/gitGraphRenderer.js | 130 +++++++++++++++------- testgitgraph.mm | 4 +- 2 files changed, 90 insertions(+), 44 deletions(-) diff --git a/src/diagrams/gitGraph/gitGraphRenderer.js b/src/diagrams/gitGraph/gitGraphRenderer.js index 79a21fc15..5a375b5b8 100644 --- a/src/diagrams/gitGraph/gitGraphRenderer.js +++ b/src/diagrams/gitGraph/gitGraphRenderer.js @@ -8,11 +8,12 @@ var log = new Logger.Log(); var allCommitsDict = {}; var branchNum; var config = { - nodeWidth: 75, + nodeSpacing: 75, lineStrokeWidth: 4, - branchLineHeight: 50, + branchOffset: 50, lineColor: 'grey', leftMargin: 50, + nodeRadius: 15, nodeLabel: { width: 75, height: 100, @@ -32,7 +33,7 @@ function svgCreateDefs(svg) { .append('g') .attr('id', 'def-commit') .append('circle') - .attr('r', 15) + .attr('r', config.nodeRadius) .attr('cx', 0) .attr('cy', 0); svg.select('#def-commit') @@ -81,34 +82,68 @@ function getElementCoords(element, coords) { }; } -function svgDrawLineForCommits(svg, fromId, toId) { +function svgDrawLineForCommits(svg, fromId, toId, direction) { log.debug('svgDrawLineForCommits: ', fromId, toId); var fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle')); var toBbox = getElementCoords(svg.select('#node-' + toId + ' circle')); //log.debug('svgDrawLineForCommits: ', fromBbox, toBbox); - if (fromBbox.left - toBbox.left > config.nodeWidth) { - var lineStart = { x: fromBbox.left - config.nodeWidth, 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, [ - {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.nodeWidth/2, y: lineStart.y}, - lineStart]); - } else { - svgDrawLine(svg, [{ - '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.nodeWidth/2, - 'y': toBbox.top + toBbox.height / 2 - }, { - 'x': toBbox.left + toBbox.width, - 'y': toBbox.top + toBbox.height / 2 - }]); + switch (direction) { + 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 }; + svgDrawLine(svg, [lineStart , lineEnd], 'linear') + svgDrawLine(svg, [ + {x: fromBbox.left, y: fromBbox.top + fromBbox.height/2}, + {x: fromBbox.left - config.nodeSpacing/2, y: fromBbox.top + fromBbox.height/2}, + {x: fromBbox.left - config.nodeSpacing/2, y: lineStart.y}, + lineStart]); + } else { + svgDrawLine(svg, [{ + 'x': fromBbox.left, + 'y': fromBbox.top + fromBbox.height / 2 + }, { + 'x': fromBbox.left - config.nodeSpacing/2, + 'y': fromBbox.top + fromBbox.height / 2 + }, { + 'x': fromBbox.left - config.nodeSpacing/2, + 'y': toBbox.top + toBbox.height / 2 + }, { + 'x': toBbox.left + toBbox.width, + '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; } } @@ -118,12 +153,13 @@ function cloneNode(svg, selector) { function renderCommitHistory(svg, commitid, branches, direction) { var commit; + var numCommits = Object.keys(allCommitsDict).length; if (_.isString(commitid)) { do { commit = allCommitsDict[commitid]; log.debug('in renderCommitHistory', commit.id, commit.seq); if (svg.select('#node-' + commitid).size() > 0) { - return; + return; } svg .append(function() { @@ -134,8 +170,14 @@ function renderCommitHistory(svg, commitid, branches, direction) { return 'node-' + commit.id; }) .attr('transform', function() { - return 'translate(' + (commit.seq * config.nodeWidth + config.leftMargin) + ', ' - + (branchNum * config.branchLineHeight) + ')'; + switch (direction) { + 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('stroke', 'grey') @@ -148,10 +190,10 @@ function renderCommitHistory(svg, commitid, branches, direction) { log.debug('found branch ', branch.name); // don't try to select foreignObject - doesn't work. // instead select by class name and it works. - svg.select('#node-' + commit.id + ' .node-label') - .append('xhtml:p') - .attr('class', 'branch-label') - .text(branch.name); + svg.select('#node-' + commit.id + ' p') + .append('xhtml:span') + .attr('class', 'branch-label') + .text( ' ' + branch.name); } commitid = commit.parent } 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) { if (_.isString(commit.parent)) { - svgDrawLineForCommits(svg, commit.id, commit.parent); + svgDrawLineForCommits(svg, commit.id, commit.parent, direction); commit = allCommitsDict[commit.parent]; } else if (_.isArray(commit.parent)) { - svgDrawLineForCommits(svg, commit.id, commit.parent[0]) - svgDrawLineForCommits(svg, commit.id, commit.parent[1]) - renderLines(svg, allCommitsDict[commit.parent[1]]); + svgDrawLineForCommits(svg, commit.id, commit.parent[0], direction) + svgDrawLineForCommits(svg, commit.id, commit.parent[1], direction) + renderLines(svg, allCommitsDict[commit.parent[1]], direction); commit = allCommitsDict[commit.parent[0]]; } } @@ -192,6 +234,10 @@ exports.draw = function(txt, id, ver) { config = _.extend(config, apiConfig, db.getOptions()); log.debug('effective options', config); var direction = db.getDirection(); + if (direction === 'BT') { + config.nodeLabel.x += 200; + config.nodeLabel.y = -1 * 2* config.nodeRadius; + } allCommitsDict = db.getCommits(); var branches = db.getBranchesAsObjArray(); var svg = d3.select('#' + id); @@ -199,12 +245,12 @@ exports.draw = function(txt, id, ver) { branchNum = 1; _.each(branches, function(v) { renderCommitHistory(svg, v.commit.id, branches, direction); - renderLines(svg, v.commit); + renderLines(svg, v.commit, direction); branchNum++; }) - svg.attr('height', 900); - svg.attr('width', 2500); + //svg.attr('height', 2500); + //svg.attr('width', 2500); } catch (e) { log.error('Error while rendering gitgraph'); log.error(e.message); diff --git a/testgitgraph.mm b/testgitgraph.mm index 48effa222..4c5e844c1 100644 --- a/testgitgraph.mm +++ b/testgitgraph.mm @@ -1,7 +1,7 @@ -gitGraph : +gitGraph BT: options {"key": "value", -"nodeWidth": 150 +"nodeSpacing": 150 } end commit