working but ugly

dist/www/javascripts/lib/mermaid.js

@@ -53543,7 +53543,7 @@ exports.clear = function () {
 };
 exports.getBranchesAsObjArray = function () {
     return _.map(branches, function (v, k) {
-        return { "name": k, "commitid": v };
+        return { "name": k, "commit": commits[v] };
     });
 };
 exports.getBranches = function () {
@@ -53575,13 +53575,100 @@ exports.getHead = function () {
 'use strict';
 
 var db = require('./gitGraphAst');
+var _ = require('lodash');
 var gitGraphParser = require('./parser/gitGraph');
 var d3 = require('../../d3');
 var Logger = require('../../logger');
 
 var log = new Logger.Log();
+var allCommitsDict = {};
 exports.setConf = function (config) {};
 
+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;
+    }).interpolate("linear");
+
+    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 }, { "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 parentNode = document.getElementById("node-"+parent.id);
+                //if (parentNode) {
+                //log.debug("parent  ", parentNode);
+                //log.debug("parent BBox", parentNode.);
+                //}
+                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().getBoundingClientRect()
+                    //log.debug("parent BCR", rect);
+                    var rect = parentNode.node().getBBox();
+                    log.debug("parent BBox", rect);
+                    pathInfo[1].x = rect.x + rect.width;
+                    pathInfo[1].y = rect.y + rect.height / 2;
+                }
+                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);
+        //confusing... commit should still refer to original commit.
+        // commitid has been modified as commitid = commit.parent;
+        svgDrawLineForCommits(svg, commit.id, commitid[1]);
+    }
+}
 exports.draw = function (txt, id, ver) {
     try {
         var parser;
@@ -53593,76 +53680,85 @@ exports.draw = function (txt, id, ver) {
         parser.parse(txt + "\n");
         var direction = db.getDirection();
         var commits = db.getCommitsArray();
-        log.debug("# of commits: " + commits.length);
+        allCommitsDict = db.getCommits();
-        //log.debug("id: " + commits[0].id);
+        var branches = db.getBranchesAsObjArray();
-        //log.debug(db.getCommits());
+        var commit = _.maxBy(commits, 'seq');
-        //log.debug("length:", commits.length);
-        //log.debug("length:", Object.keys(db.getCommits()).length);
-        // Fetch the default direction, use TD if none was found
         var svg = d3.select('#' + id);
-        //<marker id="triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#666" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
+        svgAddArrowMarker(svg);
-        //<path d="M 0 0 L 10 5 L 0 10 z"></path>
+        svgCreateDefs(svg);
-        //</marker>
-        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");
         var count = commits.length;
-        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)";
-        });
 
-        var lines = svg.selectAll("g.arrows").data(commits).enter().append("g").append("line").attr("transform", function (d, i) {
+        renderCommitHistory(svg, commit.id, branches, direction);
-            if (direction == "TB" || direction == "BT") return "translate(50," + (70 + i * 100) + ")";
+        /*
-            if (direction == "LR") return "translate(" + (70 + i * 100) + ", 50)";
+         *var nodes = svg
-        }).attr({
+         *    .selectAll("g.commit")
-            "x1": direction == "LR" ? 60 : 0,
+         *    .data(commits)
-            "y1": direction == "LR" ? 0 : 0,
+         *    .enter()
-            "x2": direction == "LR" ? 0 : 0,
+         *    .append("g")
-            "y2": direction == "LR" ? 0 : 60
+         *    .attr("class", "commit")
-        }).attr("marker-end", "url(#triangle)").attr("stroke", "black").attr("stroke-width", "3");
+         *    .attr("id", function (d) {
-        //g.append('text')      // text label for the x axis
+         *        return d.id;
-        //.attr('x', 100)
+         *    })
-        //.attr('y', 40)
+         *    .attr("transform", function (d, i) {
-        //.attr('class','version')
+         *        if (direction == "TB" || direction == "BT")
-        //.attr('font-size','32px')
+         *            return "translate(50," + (50 + i * 100) + ")";
-        //.style('text-anchor', 'middle')
+         *        if (direction == "LR")
-        //.text('mermaid raghu'+ ver);
+         *            return "translate(" + (50 + (count -i) * 100) + ", 50)";
-
+         *    });
-        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;
-        });
 
         /*
-        var box = exports.bounds.getBounds();
+         *var lines = svg.selectAll("g.arrows")
-         var height = box.stopy-box.starty+2*conf.diagramMarginY;
+         *    .data(commits)
-        var width  = box.stopx-box.startx+2*conf.diagramMarginX;*/
+         *    .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")
+         */
+
+        /*
+         *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;
+         *    });
+         */
 
         svg.attr('height', 900);
         svg.attr('width', 1200);
-        //svg.attr('viewBox', '0 0 300 150');
     } catch (e) {
         log.error("Error while rendering gitgraph");
         log.error(e.message);
     }
 };
 
-},{"../../d3":109,"../../logger":131,"./gitGraphAst":124,"./parser/gitGraph":126}],126:[function(require,module,exports){
+},{"../../d3":109,"../../logger":131,"./gitGraphAst":124,"./parser/gitGraph":126,"lodash":106}],126:[function(require,module,exports){
 (function (process){
 /* parser generated by jison 0.4.17 */
 /*

src/diagrams/gitGraph/gitGraphAst.js

@@ -163,7 +163,7 @@ exports.clear = function () {
 }
 exports.getBranchesAsObjArray = function() {
     return _.map(branches, function(v,k) {
-        return {"name": k, "commitid": v};
+        return {"name": k, "commit": commits[v]};
     });
 }
 exports.getBranches = function() { return branches; }

src/diagrams/gitGraph/gitGraphRenderer.js

@@ -1,13 +1,132 @@
 var db = require('./gitGraphAst');
+var _ = require('lodash');
 var gitGraphParser = require('./parser/gitGraph');
 var d3 = require('../../d3');
 var Logger = require('../../logger');
 
 var log = new Logger.Log();
+var allCommitsDict = {};
 exports.setConf = function (config) {
 
 }
 
+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})
+    .interpolate("linear");
+
+    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 },
+        {"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 parentNode = document.getElementById("node-"+parent.id);
+                //if (parentNode) {
+                    //log.debug("parent  ", parentNode);
+                    //log.debug("parent BBox", parentNode.);
+                //}
+                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().getBoundingClientRect()
+                    //log.debug("parent BCR", rect);
+                    var rect = parentNode.node().getBBox();
+                    log.debug("parent BBox", rect);
+                    pathInfo[1].x = rect.x + rect.width;
+                    pathInfo[1].y = rect.y + rect.height/2;
+                }
+                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);
+        //confusing... commit should still refer to original commit.
+        // commitid has been modified as commitid = commit.parent;
+        svgDrawLineForCommits(svg, commit.id, commitid[1]);
+    }
+}
 exports.draw = function (txt, id, ver) {
     try {
         var parser;
@@ -19,102 +138,78 @@ exports.draw = function (txt, id, ver) {
         parser.parse(txt + "\n");
         var direction = db.getDirection();
         var commits = db.getCommitsArray();
-        log.debug("# of commits: " + commits.length);
+        allCommitsDict = db.getCommits();
-        //log.debug("id: " + commits[0].id);
+        var branches = db.getBranchesAsObjArray();
-        //log.debug(db.getCommits());
+        var commit = _.maxBy(commits, 'seq');
-        //log.debug("length:", commits.length);
-        //log.debug("length:", Object.keys(db.getCommits()).length);
-        // Fetch the default direction, use TD if none was found
         var svg = d3.select('#' + id);
-        //<marker id="triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#666" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
+        svgAddArrowMarker(svg);
-        //<path d="M 0 0 L 10 5 L 0 10 z"></path>
+        svgCreateDefs(svg);
-        //</marker>
-        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");
         var count = commits.length;
-        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)";
-            });
 
-        var lines = svg.selectAll("g.arrows")
+        renderCommitHistory(svg, commit.id, branches, direction);
-            .data(commits)
+        /*
-            .enter()
+         *var nodes = svg
-            .append("g")
+         *    .selectAll("g.commit")
-            .append("line")
+         *    .data(commits)
-            .attr("transform", function(d, i) {
+         *    .enter()
-                if (direction == "TB" || direction == "BT")
+         *    .append("g")
-                    return "translate(50," + (70 + (i * 100)) + ")";
+         *    .attr("class", "commit")
-                if (direction == "LR")
+         *    .attr("id", function (d) {
-                    return "translate(" + (70 + (i * 100)) + ", 50)";
+         *        return d.id;
-            })
+         *    })
-            .attr({
+         *    .attr("transform", function (d, i) {
-                "x1": direction == "LR" ? 60:0,
+         *        if (direction == "TB" || direction == "BT")
-                "y1": direction == "LR" ? 0:0,
+         *            return "translate(50," + (50 + i * 100) + ")";
-                "x2": direction == "LR" ? 0:0,
+         *        if (direction == "LR")
-                "y2": direction == "LR" ? 0:60
+         *            return "translate(" + (50 + (count -i) * 100) + ", 50)";
-            })
+         *    });
-            .attr("marker-end", "url(#triangle)")
+         */
-            .attr("stroke", "black")
-            .attr("stroke-width", "3")
-        //g.append('text')      // text label for the x axis
-        //.attr('x', 100)
-        //.attr('y', 40)
-        //.attr('class','version')
-        //.attr('font-size','32px')
-        //.style('text-anchor', 'middle')
-        //.text('mermaid raghu'+ ver);
-
-        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;
-            });
 
         /*
-        var box = exports.bounds.getBounds();
+         *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")
+         */
 
-        var height = box.stopy-box.starty+2*conf.diagramMarginY;
+        /*
-        var width  = box.stopx-box.startx+2*conf.diagramMarginX;*/
+         *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;
+         *    });
+         */
 
         svg.attr('height', 900);
         svg.attr('width', 1200);
-        //svg.attr('viewBox', '0 0 300 150');
     } catch (e) {
         log.error("Error while rendering gitgraph");
         log.error(e.message);

testgitgraph.mm

@@ -1,12 +1,19 @@
 gitGraph :
+    commit
     commit
     branch newbranch
     checkout newbranch
     commit
     commit
+    branch other
+    checkout other
+    commit
+    commit
+    commit
     checkout master
     commit
     merge newbranch
     commit
     checkout newbranch
     merge master
+    merge other