From a92e116a2133cc627f4c21cafbd20425457f0260 Mon Sep 17 00:00:00 2001 From: Raghu Rajagopalan Date: Fri, 1 Apr 2016 14:17:21 +0530 Subject: [PATCH] remove magic nos in renderer --- dist/www/javascripts/lib/mermaid.js | 49 +++++++++++++---------- src/diagrams/gitGraph/gitGraphRenderer.js | 48 +++++++++++++--------- testgitgraph.mm | 10 ++++- 3 files changed, 65 insertions(+), 42 deletions(-) diff --git a/dist/www/javascripts/lib/mermaid.js b/dist/www/javascripts/lib/mermaid.js index 71efe818c..07ffc836b 100644 --- a/dist/www/javascripts/lib/mermaid.js +++ b/dist/www/javascripts/lib/mermaid.js @@ -53632,6 +53632,14 @@ var Logger = require('../../logger'); var log = new Logger.Log(); var allCommitsDict = {}; +var branchNum; +var config = { + nodeWidth: 75, + lineStrokeWidth: 4, + branchLineHeight: 50, + lineColor: "grey", + leftMargin: 50 +}; exports.setConf = function (config) {}; function svgCreateDefs(svg) { @@ -53655,7 +53663,7 @@ function svgDrawLine(svg, points, interpolate) { return Math.round(d.y); }).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 function getElementCoords(element, coords) { @@ -53677,20 +53685,20 @@ function svgDrawLineForCommits(svg, 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 > 100) { - var lineStart = { x: fromBbox.left - 100, y: toBbox.top + toBbox.height / 2 }; + 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 - 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 { svgDrawLine(svg, [{ "x": fromBbox.left, "y": fromBbox.top + fromBbox.height / 2 }, { - "x": fromBbox.left - 50, + "x": fromBbox.left - config.nodeWidth / 2, "y": fromBbox.top + fromBbox.height / 2 }, { - "x": fromBbox.left - 50, + "x": fromBbox.left - config.nodeWidth / 2, "y": toBbox.top + toBbox.height / 2 }, { "x": toBbox.left + toBbox.width, @@ -53703,25 +53711,22 @@ function cloneNode(svg, selector) { return svg.select(selector).node().cloneNode(true); } -function renderCommitHistory(svg, commitid, branches, direction, branchNum) { +function renderCommitHistory(svg, commitid, branches, direction) { 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; + if (svg.select("#node-" + commitid).size() > 0) { + return; + } svg.append(function () { return cloneNode(svg, "#def-commit"); }).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"); + }).attr("transform", function () { + return "translate(" + (commit.seq * config.nodeWidth + config.leftMargin) + ", " + branchNum * config.branchLineHeight + ")"; + }).attr("fill", "yellow").attr("stroke", "grey").attr("stroke-width", "2"); commitid = commit.parent; } while (commitid && allCommitsDict[commitid]); @@ -53729,8 +53734,9 @@ function renderCommitHistory(svg, commitid, branches, direction, branchNum) { if (_.isArray(commitid)) { log.debug("found merge commmit", commitid); - renderCommitHistory(svg, commitid[0], branches, direction, branchNum); - renderCommitHistory(svg, commitid[1], branches, direction, ++branchNum); + renderCommitHistory(svg, commitid[0], branches, direction); + branchNum++; + renderCommitHistory(svg, commitid[1], branches, direction); } } @@ -53761,17 +53767,16 @@ exports.draw = function (txt, id, ver) { allCommitsDict = db.getCommits(); var branches = db.getBranchesAsObjArray(); var svg = d3.select('#' + id); - svgAddArrowMarker(svg); svgCreateDefs(svg); - var branchNum = 1; + branchNum = 1; _.each(branches, function (v, k) { - renderCommitHistory(svg, v.commit.id, branches, direction, branchNum); + renderCommitHistory(svg, v.commit.id, branches, direction); renderLines(svg, v.commit); branchNum++; }); svg.attr('height', 900); - svg.attr('width', 1200); + svg.attr('width', 2500); } catch (e) { log.error("Error while rendering gitgraph"); log.error(e.message); diff --git a/src/diagrams/gitGraph/gitGraphRenderer.js b/src/diagrams/gitGraph/gitGraphRenderer.js index 511a2ae9b..0381e7a92 100644 --- a/src/diagrams/gitGraph/gitGraphRenderer.js +++ b/src/diagrams/gitGraph/gitGraphRenderer.js @@ -6,10 +6,19 @@ var Logger = require('../../logger'); var log = new Logger.Log(); var allCommitsDict = {}; +var branchNum; +var config = { + nodeWidth: 75, + lineStrokeWidth: 4, + branchLineHeight: 50, + lineColor: "grey", + leftMargin: 50 +} exports.setConf = function(config) { } + function svgCreateDefs(svg) { svg.append("defs") .append("g") @@ -52,8 +61,8 @@ function svgDrawLine(svg, points, interpolate) { svg .append("svg:path") .attr("d", lineGen(points)) - .style("stroke", "grey") - .style("stroke-width", "4") + .style("stroke", config.lineColor) + .style("stroke-width", config.lineStrokeWidth) .style("fill", "none"); } // 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 toBbox = getElementCoords(svg.select("#node-" + toId + " circle")); //log.debug("svgDrawLineForCommits: ", fromBbox, toBbox); - if (fromBbox.left - toBbox.left > 100) { - var lineStart = { x: fromBbox.left - 100, y: toBbox.top + toBbox.height/2}; + 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 - 50, y: fromBbox.top + fromBbox.height/2}, - {x: fromBbox.left - 50, y: lineStart.y}, + {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 - 50, + "x": fromBbox.left - config.nodeWidth/2, "y": fromBbox.top + fromBbox.height / 2 }, { - "x": fromBbox.left - 50, + "x": fromBbox.left - config.nodeWidth/2, "y": toBbox.top + toBbox.height / 2 }, { "x": toBbox.left + toBbox.width, @@ -106,14 +115,15 @@ function cloneNode(svg, selector) { return svg.select(selector).node().cloneNode(true); } -function renderCommitHistory(svg, commitid, branches, direction, branchNum) { +function renderCommitHistory(svg, commitid, branches, direction) { 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; + if (svg.select("#node-" + commitid).size() > 0) { + return; + } svg .append(function() { return cloneNode(svg, "#def-commit"); @@ -122,11 +132,10 @@ function renderCommitHistory(svg, commitid, branches, direction, branchNum) { .attr("id", function() { return "node-" + commit.id; }) - //.append("use") .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("stroke", "grey") .attr("stroke-width", "2"); @@ -137,8 +146,9 @@ function renderCommitHistory(svg, commitid, branches, direction, branchNum) { if (_.isArray(commitid)) { log.debug("found merge commmit", commitid); - renderCommitHistory(svg, commitid[0], branches, direction, branchNum); - renderCommitHistory(svg, commitid[1], branches, direction, ++branchNum); + renderCommitHistory(svg, commitid[0], branches, direction); + branchNum++; + renderCommitHistory(svg, commitid[1], branches, direction); } } @@ -170,15 +180,15 @@ exports.draw = function(txt, id, ver) { var branches = db.getBranchesAsObjArray(); var svg = d3.select('#' + id); svgCreateDefs(svg); - var branchNum = 1; + branchNum = 1; _.each(branches, function(v, k) { - renderCommitHistory(svg, v.commit.id, branches, direction, branchNum); + renderCommitHistory(svg, v.commit.id, branches, direction); renderLines(svg, v.commit); branchNum++; }) svg.attr('height', 900); - svg.attr('width', 1200); + 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 b3b599b8a..08943ebd0 100644 --- a/testgitgraph.mm +++ b/testgitgraph.mm @@ -14,5 +14,13 @@ gitGraph : commit merge newbranch commit - checkout newbranch + merge other + commit + branch bug + checkout bug + commit + commit + checkout master + commit + checkout bug merge master