flowRenderer.js

Created by knut on 14-12-11.

 
var graph = require('./graphDb');
var flow = require('./parser/flow');
var dot = require('./parser/dot');
var d3 = require('../../d3');
var dagreD3 = require('./dagre-d3');
var log = require('../../logger').create();

var conf = {
};
module.exports.setConf = function(cnf){
    var keys = Object.keys(cnf);
    var i;
    for(i=0;i<keys.length;i++){
        conf[keys[i]] = cnf[keys[i]];
    }
};

Function that adds the vertices found in the graph definition to the graph to be rendered.

Params
vert Object containing the vertices.
g The graph that is to be drawn. 
exports.addVertices = function (vert, g) {
    var keys = Object.keys(vert);

    var styleFromStyleArr = function(styleStr,arr){
        var i;

Create a compound style definition from the style definitions found for the node in the graph definition

 
        for (i = 0; i < arr.length; i++) {
            if (typeof arr[i] !== 'undefined') {
                styleStr = styleStr + arr[i] + ';';
            }
        }

        return styleStr;
    };

Iterate through each item in the vertice object (containing all the vertices found) in the graph definition

 
    keys.forEach(function (id) {
        var vertice = vert[id];
        var verticeText;

        var i;

Variable for storing the classes for the vertice

Type
string 
        var classStr = '';

log.debug(vertice.classes);

 

        if(vertice.classes.length >0){
            classStr = vertice.classes.join(" ");
        }

Variable for storing the extracted style for the vertice

Type
string 
        var style = '';

Create a compound style definition from the style definitions found for the node in the graph definition

 
        style = styleFromStyleArr(style, vertice.styles);

Use vertice id as text in the box if no text is provided by the graph definition

 
        if (typeof vertice.text === 'undefined') {
            verticeText = vertice.id;
        }
        else {
            verticeText = vertice.text;
        }

        var labelTypeStr = '';
        if(conf.htmlLabels) {
            labelTypeStr = 'html';
        } else {
            verticeText = verticeText.replace(/<br>/g, "\n");
            labelTypeStr = 'text';
        }

        var radious = 0;
        var _shape = '';

Set the shape based parameters

 
        switch(vertice.type){
            case 'round':
                radious = 5;
                _shape = 'rect';
                break;
            case 'square':
                _shape = 'rect';
                break;
            case 'diamond':
                _shape = 'question';
                break;
            case 'odd':
                _shape = 'rect_left_inv_arrow';
                break;
            case 'odd_right':
                _shape = 'rect_left_inv_arrow';
                break;
            case 'circle':
                _shape = 'circle';
                break;
            default:
                _shape = 'rect';
        }

Add the node

 
        g.setNode(vertice.id, {labelType: labelTypeStr, shape:_shape, label: verticeText, rx: radious, ry: radious, class: classStr, style: style, id:vertice.id});
    });
};

Add edges to graph based on parsed graph defninition

Params
edges Object The edges to add to the graph
g Object The graph object 
exports.addEdges = function (edges, g) {
    var cnt=0;
    var aHead;
    
    var defaultStyle;
    if(typeof edges.defaultStyle !== 'undefined'){
        defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';');

    }

    edges.forEach(function (edge) {
        cnt++;

Set link type for rendering

 
        if(edge.type === 'arrow_open'){
            aHead = 'none';
        }
        else{
            aHead = 'normal';
        }

        var style = '';


        if(typeof edge.style !== 'undefined'){
            edge.style.forEach(function(s){
                style = style + s +';';
            });
        }
        else{
            switch(edge.stroke){
                case 'normal':
                    style = 'fill:none';
                    if(typeof defaultStyle !== 'undefined'){
                        style = defaultStyle;
                    }
                    break;
                case 'dotted':
                    style = 'stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;';
                    break;
                case 'thick':
                    style = 'stroke: #333; stroke-width: 3.5px;fill:none';
                    break;
            }
        }

Add the edge to the graph

 
        if (typeof edge.text === 'undefined') {
            if(typeof edge.style === 'undefined'){
                g.setEdge(edge.start, edge.end,{ style: style, arrowhead: aHead},cnt);
            }else{
                g.setEdge(edge.start, edge.end, {
                    style: style, arrowheadStyle: "fill: #333", arrowhead: aHead
                },cnt);
            }
        }

Edge with text

 
        else {
            var edgeText = edge.text.replace(/<br>/g, "\n");
            if(typeof edge.style === 'undefined'){
                if (conf.htmlLabels){
                    g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
                }else{
                    g.setEdge(edge.start, edge.end,{labelType: "text", style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: edgeText, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
                }
             }else{
                g.setEdge(edge.start, edge.end, {
                    labelType: "text", style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
                },cnt);
            }
        }
    });
};

Returns the all the styles from classDef statements in the graph definition.

Returns
object classDef styles 
exports.getClasses = function (text, isDot) {
    var parser;
    graph.clear();
    if(isDot){
        parser = dot.parser;

    }else{
        parser = flow.parser;
    }
    parser.yy = graph;

Parse the graph definition

 
    parser.parse(text);

    var classDefStylesObj = {};
    var classDefStyleStr = '';

    var classes = graph.getClasses();

Add default class if undefined

 
    if(typeof(classes.default) === 'undefined') {
        classes.default = {id:'default'};
        classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
        classes.default.clusterStyles = ['rx:4px','fill: rgb(255, 255, 222)','rx: 4px','stroke: rgb(170, 170, 51)','stroke-width: 1px'];
        classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
        classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
    }
    return classes;
};

Draws a flowchart in the tag with id: id based on the graph definition in text.

Params
text
id 
exports.draw = function (text, id,isDot) {
    log.debug('Drawing flowchart');
    var parser;
    graph.clear();
    if(isDot){
        parser = dot.parser;

    }else{
        parser = flow.parser;
    }
    parser.yy = graph;

Parse the graph definition

 
    try{

        parser.parse(text);
    }
    catch(err){

    }

Fetch the default direction, use TD if none was found

 
    var dir;
    dir = graph.getDirection();
    if(typeof dir === 'undefined'){
        dir='TD';
    }

Create the input mermaid.graph

 
    var g = new dagreD3.graphlib.Graph({
        multigraph:true,
        compound: true
    })
        .setGraph({
            rankdir: dir,
            marginx: 20,
            marginy: 20

        })
        .setDefaultEdgeLabel(function () {
            return {};
        });

    var subG;
    var subGraphs = graph.getSubGraphs();
    var i = 0;
    for(i=subGraphs.length-1;i>=0;i--){
        subG = subGraphs[i];
        graph.addVertex(subG.id,undefined,undefined,undefined);
    }

Fetch the verices/nodes and edges/links from the parsed graph definition

 
    var vert = graph.getVertices();

log.debug(vert);

 
    var edges = graph.getEdges();

    i = 0;
    var j;
    for(i=subGraphs.length-1;i>=0;i--){
        subG = subGraphs[i];

        d3.selectAll('cluster').append('text');

        for(j=0;j<subG.nodes.length;j++){

log.debug('Setting node',subG.nodes[j],' to subgraph '+id);

 
            g.setParent(subG.nodes[j],subG.id);
        }
    }
    exports.addVertices(vert, g);
    exports.addEdges(edges, g);

Create the renderer

 
    var render = new dagreD3.render();

Add custom shape for rhombus type of boc (decision)

 
    render.shapes().question = function (parent, bbox, node) {
        var w = bbox.width,
            h = bbox.height,
            s = (w + h) * 0.8,
            points = [
                {x: s / 2, y: 0},
                {x: s, y: -s / 2},
                {x: s / 2, y: -s},
                {x: 0, y: -s / 2}
            ];
        var shapeSvg = parent.insert("polygon", ":first-child")
            .attr("points", points.map(function (d) {
                return d.x + "," + d.y;
            }).join(" "))
            .attr("rx", 5)
            .attr("ry", 5)
            .attr("transform", "translate(" + (-s / 2) + "," + (s * 2 / 4) + ")");
        node.intersect = function (point) {
            return dagreD3.intersect.polygon(node, points, point);
        };
        return shapeSvg;
    };

Add custom shape for box with inverted arrow on left side

 
    render.shapes().rect_left_inv_arrow = function (parent, bbox, node) {
        var w = bbox.width,
            h = bbox.height,
            points = [
                {x: -h/2, y: 0},
                {x: w, y: 0},
                {x: w, y: -h},
                {x: -h/2, y: -h},
                {x: 0, y: -h/2},
            ];
        var shapeSvg = parent.insert("polygon", ":first-child")
            .attr("points", points.map(function (d) {
                return d.x + "," + d.y;
            }).join(" "))
            .attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
        node.intersect = function (point) {
            return dagreD3.intersect.polygon(node, points, point);
        };
        return shapeSvg;
    };

Add custom shape for box with inverted arrow on right side

 
    render.shapes().rect_right_inv_arrow = function (parent, bbox, node) {
        var w = bbox.width,
            h = bbox.height,
            points = [
                {x: 0, y: 0},
                {x: w+h/2, y: 0},
                {x: w, y: -h/2},
                {x: w+h/2, y: -h},
                {x: 0, y: -h},
            ];
        var shapeSvg = parent.insert("polygon", ":first-child")
            .attr("points", points.map(function (d) {
                return d.x + "," + d.y;
            }).join(" "))
            .attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
        node.intersect = function (point) {
            return dagreD3.intersect.polygon(node, points, point);
        };
        return shapeSvg;
    };

Add our custom arrow - an empty arrowhead

 
    render.arrows().none = function normal(parent, id, edge, type) {
        var marker = parent.append("marker")
            .attr("id", id)
            .attr("viewBox", "0 0 10 10")
            .attr("refX", 9)
            .attr("refY", 5)
            .attr("markerUnits", "strokeWidth")
            .attr("markerWidth", 8)
            .attr("markerHeight", 6)
            .attr("orient", "auto");

        var path = marker.append("path")
            .attr("d", "M 0 0 L 0 0 L 0 0 z");
        dagreD3.util.applyStyle(path, edge[type + "Style"]);
    };

Set up an SVG group so that we can translate the final graph.

 
    var svg = d3.select("#" + id);
    svgGroup = d3.select("#" + id + " g");

Run the renderer. This is what draws the final graph.

 
    render(d3.select("#" + id + " g"), g);
    var svgb = document.querySelector("#" + id);

var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value; var width = document.querySelectorAll('.clusters rect')[0].width.baseVal.value; var cluster = d3.selectAll('.cluster'); var te = cluster.append('text'); te.attr('x', xPos+width/2); te.attr('y', 12); //te.stroke('black'); te.attr('id', 'apa12'); te.style('text-anchor', 'middle'); te.text('Title for cluster');

 
    if(conf.useMaxWidth) {

Center the graph

 
        svg.attr("height", '100%');
        svg.attr("width", conf.width);

svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);

 
        svg.attr("viewBox", '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
        svg.attr('style', 'max-width:' + (g.graph().width + 20) + 'px;');
    }
    else{

Center the graph

 
        svg.attr("height", g.graph().height );
        if(typeof conf.width === 'undefined'){
            svg.attr("width", g.graph().width );
        }else{
            svg.attr("width", conf.width );
        }

svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);

 
        svg.attr("viewBox",  '0 0 ' + (g.graph().width+20) + ' ' + (g.graph().height+20));    }

Index nodes

 
    graph.indexNodes('sunGraph'+i);
    
    for(i=0;i<subGraphs.length;i++){
        var pos = graph.getDepthFirstPos(i);
        subG = subGraphs[i];

        if (subG.title !== 'undefined') {
            var clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect');

log.debug('looking up: #' + id + ' #' + subG.id)

 
            var clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);

            var xPos = clusterRects[0].x.baseVal.value;
            var yPos = clusterRects[0].y.baseVal.value;
            var width = clusterRects[0].width.baseVal.value;
            var cluster = d3.select(clusterEl[0]);
            var te = cluster.append('text');
            te.attr('x', xPos + width / 2);
            te.attr('y', yPos + 14);
            te.attr('fill', 'black');
            te.attr('stroke', 'none');
            te.attr('id', id + 'Text');
            te.style('text-anchor', 'middle');

            if(typeof subG.title === 'undefined'){
                te.text('Undef');
            }else{

te.text(subGraphs[subGraphs.length-i-1].title);

 
                te.text(subG.title);

            }
        }
    }
};