/** * 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;i0){ 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(/
/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 * @param {Object} edges The edges to add to the graph * @param {Object} g 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(/
/g, "\n"); if(typeof edge.style === 'undefined'){ if (conf.htmlLabels){ g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: ''+edge.text+'', 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. * @param text * @param 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