mermaid/src/diagrams/gitGraph/gitGraphRenderer.js

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 = {};
var branchNum;
var config = {
    nodeSpacing: 75,
    nodeFillColor: 'yellow',
    nodeStrokeWidth: 2,
    nodeStrokeColor: 'grey',
    lineStrokeWidth: 4,
    branchOffset: 50,
    lineColor: 'grey',
    leftMargin: 50,
    branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
    nodeRadius: 15,
    nodeLabel: {
        width: 75,
        height: 100,
        x: -25,
        y: 15
    }
}
var apiConfig = {};
exports.setConf = function(c) {
    apiConfig = c;
}


function svgCreateDefs(svg) {
    svg
        .append('defs')
        .append('g')
        .attr('id', 'def-commit')
        .append('circle')
        .attr('r', config.nodeRadius)
        .attr('cx', 0)
        .attr('cy', 0);
    svg.select('#def-commit')
        .append('foreignObject')
        .attr('width', config.nodeLabel.width)
        .attr('height', config.nodeLabel.height)
        .attr('x', config.nodeLabel.x)
        .attr('y', config.nodeLabel.y)
        .attr('class', 'node-label')
        .attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
        .append('xhtml:p')
        .html('');
}


function svgDrawLine(svg, points, colorIdx, interpolate) {
    interpolate = interpolate || 'basis';
    var color = config.branchColors[colorIdx % config.branchColors.length];
    var lineGen = d3.svg.line()
        .x(function(d) {
            return Math.round(d.x)
        })
        .y(function(d) {
            return Math.round(d.y)
        })
        .interpolate(interpolate);

    svg
        .append('svg:path')
        .attr('d', lineGen(points))
        .style('stroke', color)
        .style('stroke-width', config.lineStrokeWidth)
        .style('fill', 'none');
}
// Pass in the element and its pre-transform coords
function getElementCoords(element, coords) {
    coords = coords || element.node().getBBox();
    var ctm = element.node().getCTM(),
        xn = ctm.e + coords.x * ctm.a,
        yn = ctm.f + coords.y * ctm.d;
    //log.debug(ctm, coords);
    return {
        left: xn,
        top: yn,
        width: coords.width,
        height: coords.height
    };
}

function svgDrawLineForCommits(svg, fromId, toId, direction, color) {
    log.debug('svgDrawLineForCommits: ', fromId, toId);
    var fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle'));
    var toBbox = getElementCoords(svg.select('#node-' + toId + ' circle'));
    //log.debug('svgDrawLineForCommits: ', fromBbox, toBbox);
    switch (direction) {
        case 'LR':
            // (toBbox)
            //  +--------
            //          + (fromBbox)
            if (fromBbox.left - toBbox.left > config.nodeSpacing) {
                var lineStart = { x: fromBbox.left - config.nodeSpacing, y: toBbox.top  + toBbox.height/2};
                var lineEnd ={ x: toBbox.left + toBbox.width, y: toBbox.top + toBbox.height/2 };
                svgDrawLine(svg, [lineStart , lineEnd], color, 'linear')
                svgDrawLine(svg, [
                    {x: fromBbox.left, y: fromBbox.top + fromBbox.height/2},
                    {x: fromBbox.left - config.nodeSpacing/2, y: fromBbox.top + fromBbox.height/2},
                    {x: fromBbox.left - config.nodeSpacing/2, y: lineStart.y},
                lineStart], color);
            } else {
                svgDrawLine(svg, [{
                    'x': fromBbox.left,
                    'y': fromBbox.top + fromBbox.height / 2
                }, {
                    'x': fromBbox.left - config.nodeSpacing/2,
                    'y': fromBbox.top + fromBbox.height / 2
                }, {
                    'x': fromBbox.left - config.nodeSpacing/2,
                    'y': toBbox.top + toBbox.height / 2
                }, {
                    'x': toBbox.left + toBbox.width,
                    'y': toBbox.top + toBbox.height / 2
                }], color);
            }
            break;
        case 'BT':
            //      +           (fromBbox)
            //      |
            //      |
            //              +   (toBbox)
            if (toBbox.top - fromBbox.top > config.nodeSpacing) {
                lineStart = { x: toBbox.left + toBbox.width/2, y: fromBbox.top  + fromBbox.height + config.nodeSpacing};
                lineEnd ={ x: toBbox.left + toBbox.width/2, y: toBbox.top };
                svgDrawLine(svg, [lineStart , lineEnd], color, 'linear')
                svgDrawLine(svg, [
                    {x: fromBbox.left + fromBbox.width/2, y: fromBbox.top + fromBbox.height},
                    {x: fromBbox.left + fromBbox.width/2, y: fromBbox.top + fromBbox.height + config.nodeSpacing/2},
                    {x: toBbox.left + toBbox.width/2, y: lineStart.y - config.nodeSpacing/2},
                lineStart], color);
            } else {
                svgDrawLine(svg, [{
                    'x': fromBbox.left + fromBbox.width/2,
                    'y': fromBbox.top + fromBbox.height
                }, {
                    'x': fromBbox.left + fromBbox.width/2,
                    'y': fromBbox.top + config.nodeSpacing/2
                }, {
                    'x': toBbox.left + toBbox.width/2,
                    'y': toBbox.top - config.nodeSpacing/2
                }, {
                    'x': toBbox.left + toBbox.width/2,
                    'y': toBbox.top
                }], color);
            }
            break;
    }
}

function cloneNode(svg, selector) {
    return svg.select(selector).node().cloneNode(true);
}

function renderCommitHistory(svg, commitid, branches, direction) {
    var commit;
    var numCommits = Object.keys(allCommitsDict).length;
    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(function() {
                    return cloneNode(svg, '#def-commit');
                })
                .attr('class', 'commit')
                .attr('id', function() {
                    return 'node-' + commit.id;
                })
                .attr('transform', function() {
                    switch (direction) {
                        case 'LR':
                            return 'translate(' + (commit.seq * config.nodeSpacing + config.leftMargin) + ', '
                                + (branchNum * config.branchOffset) + ')';
                        case 'BT':
                            return 'translate(' + (branchNum * config.branchOffset + config.leftMargin) + ', '
                                + ((numCommits - commit.seq) * config.nodeSpacing) + ')';
                    }
                })
                .attr('fill', config.nodeFillColor)
                .attr('stroke', config.nodeStrokeColor)
                .attr('stroke-width', config.nodeStrokeWidth);

            var branch = _.find(branches, ['commit', commit]);
            if (branch) {
                log.debug('found branch ', branch.name);
                svg.select('#node-' + commit.id + ' p')
                    .append('xhtml:span')
                    .attr('class', 'branch-label')
                    .text(branch.name + ', ');
            }
            svg.select('#node-' + commit.id + ' p')
                .append('xhtml:span')
                .attr('class', 'commit-id')
                .text(commit.id);
            if (commit.message !== '' && direction === 'BT') {
                svg.select('#node-' + commit.id + ' p')
                    .append('xhtml:span')
                    .attr('class', 'commit-msg')
                    .text( ', ' + commit.message);
            }
            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);
    }
}

function renderLines(svg, commit, direction, branchColor) {
    branchColor = branchColor || 0;
    while (commit.seq > 0 && !commit.lineDrawn) {
        if (_.isString(commit.parent)) {
            svgDrawLineForCommits(svg, commit.id, commit.parent, direction, branchColor);
            commit.lineDrawn = true;
            commit = allCommitsDict[commit.parent];
        } else if (_.isArray(commit.parent)) {
            svgDrawLineForCommits(svg, commit.id, commit.parent[0], direction, branchColor)
            svgDrawLineForCommits(svg, commit.id, commit.parent[1], direction, branchColor + 1)
            renderLines(svg, allCommitsDict[commit.parent[1]], direction, branchColor + 1);
            commit.lineDrawn = true;
            commit = allCommitsDict[commit.parent[0]];
        }
    }
}

exports.draw = function(txt, id, ver) {
    try {
        var parser;
        parser = gitGraphParser.parser;
        parser.yy = db;

        log.debug('in gitgraph renderer', txt, id, ver);
        // Parse the graph definition
        parser.parse(txt + '\n');

        config = _.extend(config, apiConfig, db.getOptions());
        log.debug('effective options', config);
        var direction = db.getDirection();
        allCommitsDict = db.getCommits();
        var branches = db.getBranchesAsObjArray();
        if (direction === 'BT') {
            config.nodeLabel.x =  branches.length * config.branchOffset;
            config.nodeLabel.width =  '100%';
            config.nodeLabel.y = -1 * 2* config.nodeRadius;
        }
        var svg = d3.select('#' + id);
        svgCreateDefs(svg);
        branchNum = 1;
        _.each(branches, function(v) {
            renderCommitHistory(svg, v.commit.id, branches, direction);
            renderLines(svg, v.commit, direction);
            branchNum++;
        });
    } catch (e) {
        log.error('Error while rendering gitgraph');
        log.error(e.message);
    }
};