mermaid/src/diagrams/gitGraph/gitGraphRenderer.js

226 lines
7.8 KiB
JavaScript
Raw Normal View History

var db = require('./gitGraphAst');
2016-03-31 10:40:35 +05:30
var _ = require('lodash');
var gitGraphParser = require('./parser/gitGraph');
2016-03-29 08:33:38 +05:30
var d3 = require('../../d3');
var Logger = require('../../logger');
var log = new Logger.Log();
2016-03-31 10:40:35 +05:30
var allCommitsDict = {};
2016-03-30 14:36:39 +05:30
exports.setConf = function (config) {
}
2016-03-29 08:33:38 +05:30
2016-03-31 10:40:35 +05:30
function svgCreateDefs(svg) {
svg.append("defs")
.append("circle")
.attr("id", "def-commit")
.attr("r", 15)
.attr("cx", 0)
.attr("cy", 0);
svg.select("defs")
.append("line")
.attr("id", "def-arrow-rl")
.attr("x1", 25)
.attr("y1", 0)
.attr("x2", -25)
.attr("y2", 0)
.attr("marker-end", "url(#triangle)");
}
function svgAddArrowMarker(svg) {
svg.append("marker")
.attr({
"id": "triangle",
"refX": "5",
"refY": "5",
"markerUnits": "strokeWidth",
"fill": "#666",
"markerWidth": "4",
"markerHeight": "3",
"orient": "auto",
"viewBox": "0,0,10,10"
})
.append("svg:path")
.attr("d", "M 0 0 L 10 5 L 0 10 z");
}
function svgDrawLine(svg, points) {
var lineGen = d3.svg.line()
.x(function(d) { return d.x })
.y(function(d) {return d.y})
2016-03-31 14:18:24 +05:30
.interpolate("basis");
2016-03-31 10:40:35 +05:30
svg
.append("svg:path")
.attr("d", lineGen(points))
.style("stroke", "grey")
.style("stroke-width", "2")
.style("fill", "none");
}
function svgDrawLineForCommits(svg, fromId, toId) {
log.debug("svgDrawLineForCommits: ", fromId, toId);
var fromBbox = svg.select("#node-" + fromId).node().getBBox();
var toBbox = svg.select("#node-" + toId).node().getBBox();
log.debug("svgDrawLineForCommits: ", fromBbox, toBbox);
svgDrawLine(svg, [
{"x": fromBbox.x, "y": fromBbox.y + fromBbox.height/2 },
2016-03-31 14:18:24 +05:30
{"x": toBbox.x + (fromBbox.x - toBbox.x)/2, "y": fromBbox.y + fromBbox.height/2 },
{"x": toBbox.x + (fromBbox.x - toBbox.x)/2, "y": toBbox.y + toBbox.height/2 },
2016-03-31 10:40:35 +05:30
{"x": toBbox.x + toBbox.width, "y": toBbox.y + toBbox.height/2 }
]);
}
function renderCommitHistory(svg, commitid, branches, direction, branchNum) {
var commit;
branchNum = branchNum || 1;
if (_.isString(commitid)) {
do {
commit = allCommitsDict[commitid];
log.debug("in renderCommitHistory", commit.id, commit.seq);
if (svg.select("#node-" + commitid).size() > 0) return;
svg
.append("g")
.attr("class", "commit")
.attr("id", function() { return "node-" + commit.id; })
.append("use")
.attr("transform", function() {
return "translate(" + (commit.seq * 100 + 50 )+ ", " + (branchNum * 50)+")";
})
.attr("xlink:href", "#def-commit")
.attr("fill", "yellow")
.attr("stroke", "grey")
.attr("stroke-width", "2");
if (commit.parent && commit.seq > 0) {
log.debug("drawing line: ", commit.id, commit.seq);
var parent = allCommitsDict[commit.parent] || allCommitsDict[commit.parent[0]];
log.debug("parentid: ", parent.id);
var parentNode = svg.select("#node-" + parent.id);
log.debug("parent:", parentNode.size());
var pathInfo = [
{x: commit.seq *100 + 35, y: branchNum* 50},
{x: parent.seq *100 + 65, y: branchNum* 50}
];
if (parentNode.node()) {
var rect = parentNode.node().getBBox();
2016-03-31 14:18:24 +05:30
//log.debug("parent BBox", rect);
var endX = rect.x + rect.width;
var endY = rect.y + rect.height/2;
pathInfo[1] = {
x: endX + (pathInfo[0].x - endX)/2,
y: pathInfo[0].y
};
pathInfo.push({
x : endX + (pathInfo[0].x - endX)/2,
y : endY
});
pathInfo.push({
x : endX,
y : endY
});
log.debug("pathinfo:", pathInfo);
2016-03-31 10:40:35 +05:30
}
svgDrawLine(svg, pathInfo);
}
commitid = commit.parent
} while (commitid && allCommitsDict[commitid]);
}
if (_.isArray(commitid)) {
log.debug("found merge commmit", commitid);
renderCommitHistory(svg, commitid[0], branches, direction, branchNum);
renderCommitHistory(svg, commitid[1], branches, direction, ++branchNum);
2016-03-31 14:18:24 +05:30
//confusing but works... commit should still refer to original commit.
2016-03-31 10:40:35 +05:30
// commitid has been modified as commitid = commit.parent;
svgDrawLineForCommits(svg, commit.id, commitid[1]);
}
}
2016-03-29 08:33:38 +05:30
exports.draw = function (txt, id, ver) {
2016-03-30 14:36:39 +05:30
try {
var parser;
parser = gitGraphParser.parser;
parser.yy = db;
2016-03-29 08:33:38 +05:30
log.debug('in gitgraph renderer', txt, id, ver);
// Parse the graph definition
parser.parse(txt + "\n");
2016-03-30 14:36:39 +05:30
var direction = db.getDirection();
2016-03-29 20:55:22 +05:30
var commits = db.getCommitsArray();
2016-03-31 10:40:35 +05:30
allCommitsDict = db.getCommits();
var branches = db.getBranchesAsObjArray();
var commit = _.maxBy(commits, 'seq');
2016-03-30 14:36:39 +05:30
var svg = d3.select('#' + id);
2016-03-31 10:40:35 +05:30
svgAddArrowMarker(svg);
svgCreateDefs(svg);
var count = commits.length;
2016-03-29 08:33:38 +05:30
2016-03-31 10:40:35 +05:30
renderCommitHistory(svg, commit.id, branches, direction);
/*
*var nodes = svg
* .selectAll("g.commit")
* .data(commits)
* .enter()
* .append("g")
* .attr("class", "commit")
* .attr("id", function (d) {
* return d.id;
* })
* .attr("transform", function (d, i) {
* if (direction == "TB" || direction == "BT")
* return "translate(50," + (50 + i * 100) + ")";
* if (direction == "LR")
* return "translate(" + (50 + (count -i) * 100) + ", 50)";
* });
*/
2016-03-30 14:36:39 +05:30
/*
2016-03-31 10:40:35 +05:30
*var lines = svg.selectAll("g.arrows")
* .data(commits)
* .enter()
* .append("g")
* .append("line")
* .attr("transform", function(d, i) {
* if (direction == "TB" || direction == "BT")
* return "translate(50," + (70 + (i * 100)) + ")";
* if (direction == "LR")
* return "translate(" + (70 + (i * 100)) + ", 50)";
* })
* .attr({
* "x1": direction == "LR" ? 60:0,
* "y1": direction == "LR" ? 0:0,
* "x2": direction == "LR" ? 0:0,
* "y2": direction == "LR" ? 0:60
* })
* .attr("marker-end", "url(#triangle)")
* .attr("stroke", "black")
* .attr("stroke-width", "3")
*/
2016-03-29 08:33:38 +05:30
2016-03-31 10:40:35 +05:30
/*
*var circles = svg.selectAll("g.commit")
* .append("circle")
* .attr("r", 15)
* .attr("fill", "yellow")
* .attr("stroke", "grey");
*var textContainer = svg.selectAll("g.commit")
* .append("g")
* .attr("transform", function () {
* if (direction == "LR") return "translate(-30, 35)";
* if (direction == "BT" || direction == "TB") return "translate(200, 0)";
* })
* .attr("class", "commit-label");
*textContainer
* .append("text")
* .text(function (c) {
* return c.id + "," + c.seq;
* });
*/
2016-03-29 08:33:38 +05:30
2016-03-30 14:36:39 +05:30
svg.attr('height', 900);
svg.attr('width', 1200);
} catch (e) {
log.error("Error while rendering gitgraph");
log.error(e.message);
}
2016-03-29 08:33:38 +05:30
};