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

remove magic nos in renderer

Browse Source
This commit is contained in:
Raghu Rajagopalan
2016-04-01 14:17:21 +05:30
parent d8805ae4d7
commit a92e116a21
3 changed files with 65 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
dist/www/javascripts/lib/mermaid.js vendored
View File

@@ -53632,6 +53632,14 @@ var Logger = require('../../logger');
var log = new Logger.Log(); var log = new Logger.Log();
var allCommitsDict = {}; var allCommitsDict = {};
var branchNum;
var config = {
nodeWidth: 75,
lineStrokeWidth: 4,
branchLineHeight: 50,
lineColor: "grey",
leftMargin: 50
};
exports.setConf = function (config) {}; exports.setConf = function (config) {};
function svgCreateDefs(svg) { function svgCreateDefs(svg) {
@@ -53655,7 +53663,7 @@ function svgDrawLine(svg, points, interpolate) {
return Math.round(d.y); return Math.round(d.y);
}).interpolate(interpolate); }).interpolate(interpolate);
svg.append("svg:path").attr("d", lineGen(points)).style("stroke", "grey").style("stroke-width", "4").style("fill", "none"); svg.append("svg:path").attr("d", lineGen(points)).style("stroke", config.lineColor).style("stroke-width", config.lineStrokeWidth).style("fill", "none");
} }
// Pass in the element and its pre-transform coords // Pass in the element and its pre-transform coords
function getElementCoords(element, coords) { function getElementCoords(element, coords) {
@@ -53677,20 +53685,20 @@ function svgDrawLineForCommits(svg, 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 > 100) { if (fromBbox.left - toBbox.left > config.nodeWidth) {
var lineStart = { x: fromBbox.left - 100, y: toBbox.top + toBbox.height / 2 }; 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 }; 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, [{ x: fromBbox.left, y: fromBbox.top + fromBbox.height / 2 }, { x: fromBbox.left - 50, y: fromBbox.top + fromBbox.height / 2 }, { x: fromBbox.left - 50, y: lineStart.y }, lineStart]); 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 { } 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 - 50, "x": fromBbox.left - config.nodeWidth / 2,
"y": fromBbox.top + fromBbox.height / 2 "y": fromBbox.top + fromBbox.height / 2
}, { }, {
"x": fromBbox.left - 50, "x": fromBbox.left - config.nodeWidth / 2,
"y": toBbox.top + toBbox.height / 2 "y": toBbox.top + toBbox.height / 2
}, { }, {
"x": toBbox.left + toBbox.width, "x": toBbox.left + toBbox.width,
@@ -53703,25 +53711,22 @@ function cloneNode(svg, selector) {
return svg.select(selector).node().cloneNode(true); return svg.select(selector).node().cloneNode(true);
} }
function renderCommitHistory(svg, commitid, branches, direction, branchNum) { function renderCommitHistory(svg, commitid, branches, direction) {
var commit; var commit;
branchNum = branchNum || 1;
if (_.isString(commitid)) { if (_.isString(commitid)) {
do { do {
commit = allCommitsDict[commitid]; commit = allCommitsDict[commitid];
log.debug("in renderCommitHistory", commit.id, commit.seq); log.debug("in renderCommitHistory", commit.id, commit.seq);
if (svg.select("#node-" + commitid).size() > 0) return; if (svg.select("#node-" + commitid).size() > 0) {
return;
}
svg.append(function () { svg.append(function () {
return cloneNode(svg, "#def-commit"); return cloneNode(svg, "#def-commit");
}).attr("class", "commit").attr("id", function () { }).attr("class", "commit").attr("id", function () {
return "node-" + commit.id; return "node-" + commit.id;
}) }).attr("transform", function () {
//.append("use") return "translate(" + (commit.seq * config.nodeWidth + config.leftMargin) + ", " + branchNum * config.branchLineHeight + ")";
.attr("transform", function () { }).attr("fill", "yellow").attr("stroke", "grey").attr("stroke-width", "2");
return "translate(" + (commit.seq * 100 + 50) + ", " + branchNum * 50 + ")";
})
//.attr("xlink:href", "#def-commit")
.attr("fill", "yellow").attr("stroke", "grey").attr("stroke-width", "2");
commitid = commit.parent; commitid = commit.parent;
} while (commitid && allCommitsDict[commitid]); } while (commitid && allCommitsDict[commitid]);
@@ -53729,8 +53734,9 @@ function renderCommitHistory(svg, commitid, branches, direction, branchNum) {
if (_.isArray(commitid)) { if (_.isArray(commitid)) {
log.debug("found merge commmit", commitid); log.debug("found merge commmit", commitid);
renderCommitHistory(svg, commitid[0], branches, direction, branchNum); renderCommitHistory(svg, commitid[0], branches, direction);
renderCommitHistory(svg, commitid[1], branches, direction, ++branchNum); branchNum++;
renderCommitHistory(svg, commitid[1], branches, direction);
} }
} }
@@ -53761,17 +53767,16 @@ exports.draw = function (txt, id, ver) {
allCommitsDict = db.getCommits(); allCommitsDict = db.getCommits();
var branches = db.getBranchesAsObjArray(); var branches = db.getBranchesAsObjArray();
var svg = d3.select('#' + id); var svg = d3.select('#' + id);
svgAddArrowMarker(svg);
svgCreateDefs(svg); svgCreateDefs(svg);
var branchNum = 1; branchNum = 1;
_.each(branches, function (v, k) { _.each(branches, function (v, k) {
renderCommitHistory(svg, v.commit.id, branches, direction, branchNum); renderCommitHistory(svg, v.commit.id, branches, direction);
renderLines(svg, v.commit); renderLines(svg, v.commit);
branchNum++; branchNum++;
}); });
svg.attr('height', 900); svg.attr('height', 900);
svg.attr('width', 1200); 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);

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

@@ -6,10 +6,19 @@ var Logger = require('../../logger');
var log = new Logger.Log(); var log = new Logger.Log();
var allCommitsDict = {}; var allCommitsDict = {};
var branchNum;
var config = {
nodeWidth: 75,
lineStrokeWidth: 4,
branchLineHeight: 50,
lineColor: "grey",
leftMargin: 50
}
exports.setConf = function(config) { exports.setConf = function(config) {
} }
function svgCreateDefs(svg) { function svgCreateDefs(svg) {
svg.append("defs") svg.append("defs")
.append("g") .append("g")
@@ -52,8 +61,8 @@ function svgDrawLine(svg, points, interpolate) {
svg svg
.append("svg:path") .append("svg:path")
.attr("d", lineGen(points)) .attr("d", lineGen(points))
.style("stroke", "grey") .style("stroke", config.lineColor)
.style("stroke-width", "4") .style("stroke-width", config.lineStrokeWidth)
.style("fill", "none"); .style("fill", "none");
} }
// Pass in the element and its pre-transform coords // Pass in the element and its pre-transform coords
@@ -76,24 +85,24 @@ function svgDrawLineForCommits(svg, 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 > 100) { if (fromBbox.left - toBbox.left > config.nodeWidth) {
var lineStart = { x: fromBbox.left - 100, y: toBbox.top + toBbox.height/2}; 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 }; 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 - 50, y: fromBbox.top + fromBbox.height/2}, {x: fromBbox.left - config.nodeWidth/2, y: fromBbox.top + fromBbox.height/2},
{x: fromBbox.left - 50, y: lineStart.y}, {x: fromBbox.left - config.nodeWidth/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 - 50, "x": fromBbox.left - config.nodeWidth/2,
"y": fromBbox.top + fromBbox.height / 2 "y": fromBbox.top + fromBbox.height / 2
}, { }, {
"x": fromBbox.left - 50, "x": fromBbox.left - config.nodeWidth/2,
"y": toBbox.top + toBbox.height / 2 "y": toBbox.top + toBbox.height / 2
}, { }, {
"x": toBbox.left + toBbox.width, "x": toBbox.left + toBbox.width,
@@ -106,14 +115,15 @@ function cloneNode(svg, selector) {
return svg.select(selector).node().cloneNode(true); return svg.select(selector).node().cloneNode(true);
} }
function renderCommitHistory(svg, commitid, branches, direction, branchNum) { function renderCommitHistory(svg, commitid, branches, direction) {
var commit; var commit;
branchNum = branchNum || 1;
if (_.isString(commitid)) { if (_.isString(commitid)) {
do { do {
commit = allCommitsDict[commitid]; commit = allCommitsDict[commitid];
log.debug("in renderCommitHistory", commit.id, commit.seq); log.debug("in renderCommitHistory", commit.id, commit.seq);
if (svg.select("#node-" + commitid).size() > 0) return; if (svg.select("#node-" + commitid).size() > 0) {
return;
}
svg svg
.append(function() { .append(function() {
return cloneNode(svg, "#def-commit"); return cloneNode(svg, "#def-commit");
@@ -122,11 +132,10 @@ function renderCommitHistory(svg, commitid, branches, direction, branchNum) {
.attr("id", function() { .attr("id", function() {
return "node-" + commit.id; return "node-" + commit.id;
}) })
//.append("use")
.attr("transform", function() { .attr("transform", function() {
return "translate(" + (commit.seq * 100 + 50) + ", " + (branchNum * 50) + ")"; return "translate(" + (commit.seq * config.nodeWidth + config.leftMargin) + ", "
+ (branchNum * config.branchLineHeight) + ")";
}) })
//.attr("xlink:href", "#def-commit")
.attr("fill", "yellow") .attr("fill", "yellow")
.attr("stroke", "grey") .attr("stroke", "grey")
.attr("stroke-width", "2"); .attr("stroke-width", "2");
@@ -137,8 +146,9 @@ function renderCommitHistory(svg, commitid, branches, direction, branchNum) {
if (_.isArray(commitid)) { if (_.isArray(commitid)) {
log.debug("found merge commmit", commitid); log.debug("found merge commmit", commitid);
renderCommitHistory(svg, commitid[0], branches, direction, branchNum); renderCommitHistory(svg, commitid[0], branches, direction);
renderCommitHistory(svg, commitid[1], branches, direction, ++branchNum); branchNum++;
renderCommitHistory(svg, commitid[1], branches, direction);
} }
} }
@@ -170,15 +180,15 @@ exports.draw = function(txt, id, ver) {
var branches = db.getBranchesAsObjArray(); var branches = db.getBranchesAsObjArray();
var svg = d3.select('#' + id); var svg = d3.select('#' + id);
svgCreateDefs(svg); svgCreateDefs(svg);
var branchNum = 1; branchNum = 1;
_.each(branches, function(v, k) { _.each(branches, function(v, k) {
renderCommitHistory(svg, v.commit.id, branches, direction, branchNum); renderCommitHistory(svg, v.commit.id, branches, direction);
renderLines(svg, v.commit); renderLines(svg, v.commit);
branchNum++; branchNum++;
}) })
svg.attr('height', 900); svg.attr('height', 900);
svg.attr('width', 1200); 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);

10
testgitgraph.mm
View File

@@ -14,5 +14,13 @@ gitGraph :
commit commit
merge newbranch merge newbranch
commit commit
checkout newbranch merge other
commit
branch bug
checkout bug
commit
commit
checkout master
commit
checkout bug
merge master merge master