From c2bc3317c3ff8e687101628b711f09efc22f815f Mon Sep 17 00:00:00 2001 From: Raghu Rajagopalan Date: Wed, 30 Mar 2016 14:36:39 +0530 Subject: [PATCH] WIP - basic arrows. --- dist/www/javascripts/lib/mermaid.js | 42 +++++++++-- src/diagrams/gitGraph/gitGraphRenderer.js | 91 +++++++++++++++++------ testgitgraph.mm | 2 +- 3 files changed, 105 insertions(+), 30 deletions(-) diff --git a/dist/www/javascripts/lib/mermaid.js b/dist/www/javascripts/lib/mermaid.js index fa7427b3d..396adb068 100644 --- a/dist/www/javascripts/lib/mermaid.js +++ b/dist/www/javascripts/lib/mermaid.js @@ -53591,6 +53591,7 @@ exports.draw = function (txt, id, ver) { log.debug('in gitgraph renderer', txt, id, ver); // Parse the graph definition parser.parse(txt + "\n"); + var direction = db.getDirection(); var commits = db.getCommitsArray(); log.debug("# of commits: " + commits.length); //log.debug("id: " + commits[0].id); @@ -53599,13 +53600,36 @@ exports.draw = function (txt, id, ver) { //log.debug("length:", Object.keys(db.getCommits()).length); // Fetch the default direction, use TD if none was found var svg = d3.select('#' + id); - - var nodes = svg.selectAll("g").data(commits).enter().append("g").attr("class", "commit").attr("id", function (d) { + // + // + // + 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 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) { - return "translate(" + (50 + i * 100) + ", 50)"; + if (direction == "TB" || direction == "BT") return "translate(50," + (50 + i * 100) + ")"; + if (direction == "LR") return "translate(" + (50 + i * 100) + ", 50)"; }); + 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" ? 0 : 0, + "y1": direction == "LR" ? 0 : 0, + "x2": direction == "LR" ? 60 : 0, + "y2": direction == "LR" ? 0 : 60 + }).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) @@ -53615,17 +53639,21 @@ exports.draw = function (txt, id, ver) { //.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", "translate(-40, 35)").attr("class", "commit-label"); + 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; + return c.id + "," + c.seq; }); + /* var box = exports.bounds.getBounds(); var height = box.stopy-box.starty+2*conf.diagramMarginY; var width = box.stopx-box.startx+2*conf.diagramMarginX;*/ - svg.attr('height', 100); - svg.attr('width', 400); + svg.attr('height', 900); + svg.attr('width', 1200); //svg.attr('viewBox', '0 0 300 150'); } catch (e) { log.error("Error while rendering gitgraph"); diff --git a/src/diagrams/gitGraph/gitGraphRenderer.js b/src/diagrams/gitGraph/gitGraphRenderer.js index 684e8c12b..3fbc98c5a 100644 --- a/src/diagrams/gitGraph/gitGraphRenderer.js +++ b/src/diagrams/gitGraph/gitGraphRenderer.js @@ -1,16 +1,15 @@ - var db = require('./gitGraphAst'); var gitGraphParser = require('./parser/gitGraph'); var d3 = require('../../d3'); var Logger = require('../../logger'); var log = new Logger.Log(); -exports.setConf = function(config) { +exports.setConf = function (config) { } exports.draw = function (txt, id, ver) { - try{ + try { var parser; parser = gitGraphParser.parser; parser.yy = db; @@ -18,6 +17,7 @@ exports.draw = function (txt, id, ver) { log.debug('in gitgraph renderer', txt, id, ver); // Parse the graph definition parser.parse(txt + "\n"); + var direction = db.getDirection(); var commits = db.getCommitsArray(); log.debug("# of commits: " + commits.length); //log.debug("id: " + commits[0].id); @@ -25,19 +25,60 @@ exports.draw = function (txt, id, ver) { //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); - + var svg = d3.select('#' + id); + // + // + // + 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 nodes = svg - .selectAll("g") - .data(commits) - .enter() - .append("g") - .attr("class", "commit") - .attr("id", function(d){return d.id;}) - .attr("transform", function(d,i){ - return "translate(" + (50 + i*100) + ", 50)"; - }); + .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 + i * 100) + ", 50)"; + }); + 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" ? 0:0, + "y1": direction == "LR" ? 0:0, + "x2": direction == "LR" ? 60:0, + "y2": direction == "LR" ? 0:60 + }) + .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) @@ -52,22 +93,28 @@ exports.draw = function (txt, id, ver) { .attr("fill", "yellow") .attr("stroke", "grey"); var textContainer = svg.selectAll("g.commit") - .append("g") - .attr("transform", "translate(-40, 35)") - .attr("class", "commit-label"); + .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; }); + .append("text") + .text(function (c) { + return c.id + "," + c.seq; + }); + /* var box = exports.bounds.getBounds(); var height = box.stopy-box.starty+2*conf.diagramMarginY; var width = box.stopx-box.startx+2*conf.diagramMarginX;*/ - svg.attr('height',100); - svg.attr('width', 400); + svg.attr('height', 900); + svg.attr('width', 1200); //svg.attr('viewBox', '0 0 300 150'); - }catch(e) { + } catch (e) { log.error("Error while rendering gitgraph"); log.error(e.message); } diff --git a/testgitgraph.mm b/testgitgraph.mm index c56562450..177bd144d 100644 --- a/testgitgraph.mm +++ b/testgitgraph.mm @@ -1,4 +1,4 @@ -gitGraph: +gitGraph TB: commit branch newbranch checkout newbranch