mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-24 17:59:39 +02:00
Auto fix standard style voilations
This commit is contained in:
Tyler Long
4
src/diagrams/flowchart/d3.js
vendored
4
src/diagrams/flowchart/d3.js
vendored
@@ -1,6 +1,6 @@
|
||||
/* global window */
|
||||
|
||||
/*var d3;
|
||||
/* var d3;
|
||||
|
||||
if (require) {
|
||||
try {
|
||||
@@ -12,4 +12,4 @@ if (!d3) {
|
||||
d3 = window.d3;
|
||||
}
|
||||
|
||||
module.exports = d3;*/
|
||||
module.exports = d3; */
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
/* global window */
|
||||
var Logger = require('../../logger');
|
||||
var log = Logger.Log;
|
||||
var Logger = require('../../logger')
|
||||
var log = Logger.Log
|
||||
|
||||
var dagreD3;
|
||||
//log.debug('setting up dagre-d3');
|
||||
var dagreD3
|
||||
// log.debug('setting up dagre-d3');
|
||||
if (require) {
|
||||
try {
|
||||
dagreD3 = require('dagre-d3');
|
||||
//log.debug('Got it (dagre-d3)');
|
||||
} catch (e) {log.debug('Could not load dagre-d3');}
|
||||
dagreD3 = require('dagre-d3')
|
||||
// log.debug('Got it (dagre-d3)');
|
||||
} catch (e) { log.debug('Could not load dagre-d3') }
|
||||
}
|
||||
|
||||
if (!dagreD3) {
|
||||
dagreD3 = window.dagreD3;
|
||||
dagreD3 = window.dagreD3
|
||||
}
|
||||
|
||||
module.exports = dagreD3;
|
||||
module.exports = dagreD3
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
/**
|
||||
* 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 Logger = require('../../logger');
|
||||
var log = Logger.Log;
|
||||
|
||||
var graph = require('./graphDb')
|
||||
var flow = require('./parser/flow')
|
||||
var dot = require('./parser/dot')
|
||||
var d3 = require('../../d3')
|
||||
var dagreD3 = require('./dagre-d3')
|
||||
var Logger = require('../../logger')
|
||||
var log = Logger.Log
|
||||
|
||||
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]];
|
||||
}
|
||||
};
|
||||
}
|
||||
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.
|
||||
@@ -26,124 +25,119 @@ module.exports.setConf = function(cnf){
|
||||
* @param g The graph that is to be drawn.
|
||||
*/
|
||||
exports.addVertices = function (vert, g) {
|
||||
var keys = Object.keys(vert);
|
||||
var keys = Object.keys(vert)
|
||||
|
||||
var styleFromStyleArr = function(styleStr,arr){
|
||||
var i;
|
||||
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] + ';';
|
||||
}
|
||||
}
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
if (typeof arr[i] !== 'undefined') {
|
||||
styleStr = styleStr + arr[i] + ';'
|
||||
}
|
||||
}
|
||||
|
||||
return styleStr;
|
||||
};
|
||||
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;
|
||||
keys.forEach(function (id) {
|
||||
var vertice = vert[id]
|
||||
var verticeText
|
||||
|
||||
/**
|
||||
* Variable for storing the classes for the vertice
|
||||
* @type {string}
|
||||
*/
|
||||
var classStr = '';
|
||||
var classStr = ''
|
||||
|
||||
//log.debug(vertice.classes);
|
||||
// log.debug(vertice.classes);
|
||||
|
||||
if(vertice.classes.length >0){
|
||||
classStr = vertice.classes.join(' ');
|
||||
}
|
||||
if (vertice.classes.length > 0) {
|
||||
classStr = vertice.classes.join(' ')
|
||||
}
|
||||
|
||||
/**
|
||||
* Variable for storing the extracted style for the vertice
|
||||
* @type {string}
|
||||
*/
|
||||
var style = '';
|
||||
var style = ''
|
||||
// Create a compound style definition from the style definitions found for the node in the graph definition
|
||||
style = styleFromStyleArr(style, vertice.styles);
|
||||
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;
|
||||
}
|
||||
if (typeof vertice.text === 'undefined') {
|
||||
verticeText = vertice.id
|
||||
} else {
|
||||
verticeText = vertice.text
|
||||
}
|
||||
|
||||
var labelTypeStr = ''
|
||||
if (conf.htmlLabels) {
|
||||
labelTypeStr = 'html'
|
||||
verticeText = verticeText.replace(/fa:fa[\w\-]+/g, function (s) {
|
||||
return '<i class="fa ' + s.substring(3) + '"></i>'
|
||||
})
|
||||
} else {
|
||||
var svg_label = document.createElementNS('http://www.w3.org/2000/svg', 'text')
|
||||
|
||||
var rows = verticeText.split(/<br>/)
|
||||
|
||||
var labelTypeStr = '';
|
||||
if(conf.htmlLabels) {
|
||||
labelTypeStr = 'html';
|
||||
verticeText = verticeText.replace(/fa:fa[\w\-]+/g,function(s){
|
||||
return '<i class="fa '+ s.substring(3)+'"></i>';
|
||||
});
|
||||
var j = 0
|
||||
for (j = 0; j < rows.length; j++) {
|
||||
var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
|
||||
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve')
|
||||
tspan.setAttribute('dy', '1em')
|
||||
tspan.setAttribute('x', '1')
|
||||
tspan.textContent = rows[j]
|
||||
svg_label.appendChild(tspan)
|
||||
}
|
||||
|
||||
} else {
|
||||
var svg_label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
labelTypeStr = 'svg'
|
||||
verticeText = svg_label
|
||||
|
||||
var rows = verticeText.split(/<br>/);
|
||||
// verticeText = verticeText.replace(/<br\/>/g, '\n');
|
||||
// labelTypeStr = 'text';
|
||||
}
|
||||
|
||||
var j = 0;
|
||||
for(j=0;j<rows.length;j++){
|
||||
var tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
|
||||
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
|
||||
tspan.setAttribute('dy', '1em');
|
||||
tspan.setAttribute('x', '1');
|
||||
tspan.textContent = rows[j];
|
||||
svg_label.appendChild(tspan);
|
||||
}
|
||||
|
||||
labelTypeStr = 'svg';
|
||||
verticeText = svg_label;
|
||||
|
||||
|
||||
//verticeText = verticeText.replace(/<br\/>/g, '\n');
|
||||
//labelTypeStr = 'text';
|
||||
}
|
||||
|
||||
var radious = 0;
|
||||
var _shape = '';
|
||||
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;
|
||||
case 'ellipse':
|
||||
_shape = 'ellipse';
|
||||
break;
|
||||
case 'group':
|
||||
_shape = 'rect';
|
||||
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
|
||||
case 'ellipse':
|
||||
_shape = 'ellipse'
|
||||
break
|
||||
case 'group':
|
||||
_shape = 'rect'
|
||||
// Need to create a text node if using svg labels, see #367
|
||||
verticeText = conf.htmlLabels ? '' : document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
break;
|
||||
default:
|
||||
_shape = 'rect';
|
||||
}
|
||||
verticeText = conf.htmlLabels ? '' : document.createElementNS('http://www.w3.org/2000/svg', 'text')
|
||||
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});
|
||||
});
|
||||
};
|
||||
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
|
||||
@@ -151,267 +145,260 @@ exports.addVertices = function (vert, g) {
|
||||
* @param {Object} g The graph object
|
||||
*/
|
||||
exports.addEdges = function (edges, g) {
|
||||
var cnt=0;
|
||||
|
||||
var defaultStyle;
|
||||
if(typeof edges.defaultStyle !== 'undefined'){
|
||||
defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';');
|
||||
}
|
||||
var cnt = 0
|
||||
|
||||
edges.forEach(function (edge) {
|
||||
cnt++;
|
||||
var edgeData = {};
|
||||
var defaultStyle
|
||||
if (typeof edges.defaultStyle !== 'undefined') {
|
||||
defaultStyle = edges.defaultStyle.toString().replace(/,/g, ';')
|
||||
}
|
||||
|
||||
edges.forEach(function (edge) {
|
||||
cnt++
|
||||
var edgeData = {}
|
||||
|
||||
// Set link type for rendering
|
||||
if(edge.type === 'arrow_open'){
|
||||
edgeData.arrowhead = 'none';
|
||||
}
|
||||
else{
|
||||
edgeData.arrowhead = 'normal';
|
||||
}
|
||||
if (edge.type === 'arrow_open') {
|
||||
edgeData.arrowhead = 'none'
|
||||
} else {
|
||||
edgeData.arrowhead = 'normal'
|
||||
}
|
||||
|
||||
var style = '';
|
||||
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
|
||||
}
|
||||
}
|
||||
edgeData.style = 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;
|
||||
}
|
||||
}
|
||||
edgeData.style = style;
|
||||
|
||||
if (typeof edge.interpolate !== 'undefined') {
|
||||
edgeData.lineInterpolate = edge.interpolate;
|
||||
if (typeof edge.interpolate !== 'undefined') {
|
||||
edgeData.lineInterpolate = edge.interpolate
|
||||
} else {
|
||||
if (typeof edges.defaultInterpolate !== 'undefined') {
|
||||
edgeData.lineInterpolate = edges.defaultInterpolate
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof edge.text === 'undefined') {
|
||||
if (typeof edge.style !== 'undefined') {
|
||||
edgeData.arrowheadStyle = 'fill: #333'
|
||||
}
|
||||
} else {
|
||||
edgeData.arrowheadStyle = 'fill: #333'
|
||||
if (typeof edge.style === 'undefined') {
|
||||
edgeData.labelpos = 'c'
|
||||
if (conf.htmlLabels) {
|
||||
edgeData.labelType = 'html'
|
||||
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>'
|
||||
} else {
|
||||
if (typeof edges.defaultInterpolate !== 'undefined') {
|
||||
edgeData.lineInterpolate = edges.defaultInterpolate;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof edge.text === 'undefined') {
|
||||
if (typeof edge.style !== 'undefined') {
|
||||
edgeData.arrowheadStyle = 'fill: #333';
|
||||
}
|
||||
} else {
|
||||
edgeData.arrowheadStyle = 'fill: #333';
|
||||
if(typeof edge.style === 'undefined') {
|
||||
edgeData.labelpos = 'c';
|
||||
if (conf.htmlLabels) {
|
||||
edgeData.labelType = 'html';
|
||||
edgeData.label = '<span class="edgeLabel">'+edge.text+'</span>';
|
||||
} else {
|
||||
edgeData.labelType = 'text';
|
||||
edgeData.style = 'stroke: #333; stroke-width: 1.5px;fill:none';
|
||||
edgeData.label = edge.text.replace(/<br>/g, '\n');
|
||||
}
|
||||
} else {
|
||||
edgeData.label = edge.text.replace(/<br>/g, '\n');
|
||||
}
|
||||
edgeData.labelType = 'text'
|
||||
edgeData.style = 'stroke: #333; stroke-width: 1.5px;fill:none'
|
||||
edgeData.label = edge.text.replace(/<br>/g, '\n')
|
||||
}
|
||||
} else {
|
||||
edgeData.label = edge.text.replace(/<br>/g, '\n')
|
||||
}
|
||||
}
|
||||
// Add the edge to the graph
|
||||
g.setEdge(edge.start, edge.end, edgeData, cnt);
|
||||
});
|
||||
};
|
||||
g.setEdge(edge.start, edge.end, edgeData, 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;
|
||||
var parser
|
||||
graph.clear()
|
||||
if (isDot) {
|
||||
parser = dot.parser
|
||||
} else {
|
||||
parser = flow.parser
|
||||
}
|
||||
parser.yy = graph
|
||||
|
||||
// Parse the graph definition
|
||||
parser.parse(text);
|
||||
parser.parse(text)
|
||||
|
||||
var classes = graph.getClasses();
|
||||
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.styles = [];
|
||||
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;
|
||||
};
|
||||
if (typeof (classes.default) === 'undefined') {
|
||||
classes.default = {id: 'default'}
|
||||
// classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
|
||||
classes.default.styles = []
|
||||
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;
|
||||
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){
|
||||
log.debug('Parsing failed');
|
||||
}
|
||||
try {
|
||||
parser.parse(text)
|
||||
} catch (err) {
|
||||
log.debug('Parsing failed')
|
||||
}
|
||||
|
||||
// Fetch the default direction, use TD if none was found
|
||||
var dir;
|
||||
dir = graph.getDirection();
|
||||
if(typeof dir === 'undefined'){
|
||||
dir='TD';
|
||||
}
|
||||
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
|
||||
})
|
||||
var g = new dagreD3.graphlib.Graph({
|
||||
multigraph: true,
|
||||
compound: true
|
||||
})
|
||||
.setGraph({
|
||||
rankdir: dir,
|
||||
marginx: 20,
|
||||
marginy: 20
|
||||
rankdir: dir,
|
||||
marginx: 20,
|
||||
marginy: 20
|
||||
|
||||
})
|
||||
.setDefaultEdgeLabel(function () {
|
||||
return {};
|
||||
});
|
||||
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,subG.title,'group',undefined);
|
||||
}
|
||||
var subG
|
||||
var subGraphs = graph.getSubGraphs()
|
||||
var i = 0
|
||||
for (i = subGraphs.length - 1; i >= 0; i--) {
|
||||
subG = subGraphs[i]
|
||||
graph.addVertex(subG.id, subG.title, 'group', undefined)
|
||||
}
|
||||
|
||||
// Fetch the verices/nodes and edges/links from the parsed graph definition
|
||||
var vert = graph.getVertices();
|
||||
var vert = graph.getVertices()
|
||||
|
||||
//log.debug(vert);
|
||||
var edges = graph.getEdges();
|
||||
// log.debug(vert);
|
||||
var edges = graph.getEdges()
|
||||
|
||||
i = 0;
|
||||
var j;
|
||||
for(i=subGraphs.length-1;i>=0;i--){
|
||||
subG = subGraphs[i];
|
||||
i = 0
|
||||
var j
|
||||
for (i = subGraphs.length - 1; i >= 0; i--) {
|
||||
subG = subGraphs[i]
|
||||
|
||||
d3.selectAll('cluster').append('text');
|
||||
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
exports.addVertices(vert, g)
|
||||
exports.addEdges(edges, g)
|
||||
|
||||
// Create the renderer
|
||||
var render = new dagreD3.render();
|
||||
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 = [
|
||||
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')
|
||||
]
|
||||
var shapeSvg = parent.insert('polygon', ':first-child')
|
||||
.attr('points', points.map(function (d) {
|
||||
return d.x + ',' + d.y;
|
||||
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;
|
||||
};
|
||||
.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},
|
||||
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')
|
||||
{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;
|
||||
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;
|
||||
};
|
||||
.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 = [
|
||||
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: 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')
|
||||
]
|
||||
var shapeSvg = parent.insert('polygon', ':first-child')
|
||||
.attr('points', points.map(function (d) {
|
||||
return d.x + ',' + d.y;
|
||||
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;
|
||||
};
|
||||
.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')
|
||||
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)
|
||||
@@ -419,45 +406,45 @@ exports.draw = function (text, id,isDot) {
|
||||
.attr('markerUnits', 'strokeWidth')
|
||||
.attr('markerWidth', 8)
|
||||
.attr('markerHeight', 6)
|
||||
.attr('orient', 'auto');
|
||||
.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']);
|
||||
};
|
||||
var path = marker.append('path')
|
||||
.attr('d', 'M 0 0 L 0 0 L 0 0 z')
|
||||
dagreD3.util.applyStyle(path, edge[type + 'Style'])
|
||||
}
|
||||
|
||||
// Override normal arrowhead defined in d3. Remove style & add class to allow css styling.
|
||||
render.arrows().normal = 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")
|
||||
render.arrows().normal = 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 10 5 L 0 10 z")
|
||||
.attr("class", "arrowheadPath")
|
||||
.style("stroke-width", 1)
|
||||
.style("stroke-dasharray", "1,0");
|
||||
};
|
||||
var path = marker.append('path')
|
||||
.attr('d', 'M 0 0 L 10 5 L 0 10 z')
|
||||
.attr('class', 'arrowheadPath')
|
||||
.style('stroke-width', 1)
|
||||
.style('stroke-dasharray', '1,0')
|
||||
}
|
||||
|
||||
// Set up an SVG group so that we can translate the final graph.
|
||||
var svg = d3.select('#' + id);
|
||||
//svgGroup = d3.select('#' + id + ' g');
|
||||
var svg = d3.select('#' + id)
|
||||
// svgGroup = d3.select('#' + id + ' g');
|
||||
|
||||
// Run the renderer. This is what draws the final graph.
|
||||
var element = d3.select('#' + id + ' g');
|
||||
render(element, g);
|
||||
var element = d3.select('#' + id + ' g')
|
||||
render(element, g)
|
||||
|
||||
//var tip = d3.tip().html(function(d) { return d; });
|
||||
element.selectAll('g.node')
|
||||
.attr('title', function(){
|
||||
return graph.getTooltip(this.id);
|
||||
});
|
||||
// var tip = d3.tip().html(function(d) { return d; });
|
||||
element.selectAll('g.node')
|
||||
.attr('title', function () {
|
||||
return graph.getTooltip(this.id)
|
||||
})
|
||||
|
||||
/*
|
||||
var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value;
|
||||
@@ -471,79 +458,75 @@ exports.draw = function (text, id,isDot) {
|
||||
te.style('text-anchor', 'middle');
|
||||
te.text('Title for cluster');
|
||||
*/
|
||||
if(conf.useMaxWidth) {
|
||||
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;');
|
||||
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)
|
||||
}
|
||||
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)); }
|
||||
|
||||
// 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('subGraph'+i);
|
||||
|
||||
for(i=0;i<subGraphs.length;i++){
|
||||
subG = subGraphs[i];
|
||||
graph.indexNodes('subGraph' + 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);
|
||||
for (i = 0; i < subGraphs.length; i++) {
|
||||
subG = subGraphs[i]
|
||||
|
||||
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 (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)
|
||||
|
||||
if(typeof subG.title === 'undefined'){
|
||||
te.text('Undef');
|
||||
}else{
|
||||
//te.text(subGraphs[subGraphs.length-i-1].title);
|
||||
te.text(subG.title);
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add label rects for non html labels
|
||||
if(!conf.htmlLabels){
|
||||
var labels = document.querySelectorAll('#' + id +' .edgeLabel .label');
|
||||
var i;
|
||||
for(i=0;i<labels.length;i++){
|
||||
var label = labels[i];
|
||||
if (!conf.htmlLabels) {
|
||||
var labels = document.querySelectorAll('#' + id + ' .edgeLabel .label')
|
||||
var i
|
||||
for (i = 0; i < labels.length; i++) {
|
||||
var label = labels[i]
|
||||
|
||||
// Get dimensions of label
|
||||
var dim = label.getBBox();
|
||||
var dim = label.getBBox()
|
||||
|
||||
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
rect.setAttribute('rx',0);
|
||||
rect.setAttribute('ry',0);
|
||||
rect.setAttribute('width',dim.width);
|
||||
rect.setAttribute('height',dim.height);
|
||||
rect.setAttribute('style','fill:#e8e8e8;');
|
||||
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
|
||||
rect.setAttribute('rx', 0)
|
||||
rect.setAttribute('ry', 0)
|
||||
rect.setAttribute('width', dim.width)
|
||||
rect.setAttribute('height', dim.height)
|
||||
rect.setAttribute('style', 'fill:#e8e8e8;')
|
||||
|
||||
label.insertBefore(rect, label.firstChild);
|
||||
}
|
||||
label.insertBefore(rect, label.firstChild)
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
/**
|
||||
* Created by knut on 14-11-03.
|
||||
*/
|
||||
var Logger = require('../../logger');
|
||||
var log = Logger.Log;
|
||||
var utils = require('../../utils');
|
||||
var Logger = require('../../logger')
|
||||
var log = Logger.Log
|
||||
var utils = require('../../utils')
|
||||
|
||||
var d3 = require('../../d3');
|
||||
var vertices = {};
|
||||
var edges = [];
|
||||
var classes = [];
|
||||
var subGraphs = [];
|
||||
var tooltips = {};
|
||||
var subCount=0;
|
||||
var direction;
|
||||
var d3 = require('../../d3')
|
||||
var vertices = {}
|
||||
var edges = []
|
||||
var classes = []
|
||||
var subGraphs = []
|
||||
var tooltips = {}
|
||||
var subCount = 0
|
||||
var direction
|
||||
// Functions to be run after graph rendering
|
||||
var funs = [];
|
||||
var funs = []
|
||||
/**
|
||||
* Function called by parser when a node definition has been found
|
||||
* @param id
|
||||
@@ -23,42 +23,42 @@ var funs = [];
|
||||
* @param style
|
||||
*/
|
||||
exports.addVertex = function (id, text, type, style) {
|
||||
var txt;
|
||||
|
||||
if(typeof id === 'undefined'){
|
||||
return;
|
||||
}
|
||||
if(id.trim().length === 0){
|
||||
return;
|
||||
}
|
||||
var txt
|
||||
|
||||
if (typeof id === 'undefined') {
|
||||
return
|
||||
}
|
||||
if (id.trim().length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if (typeof vertices[id] === 'undefined') {
|
||||
vertices[id] = {id: id, styles: [], classes: []}
|
||||
}
|
||||
if (typeof text !== 'undefined') {
|
||||
txt = text.trim()
|
||||
|
||||
if (typeof vertices[id] === 'undefined') {
|
||||
vertices[id] = {id: id, styles: [], classes:[]};
|
||||
}
|
||||
if (typeof text !== 'undefined') {
|
||||
txt = text.trim();
|
||||
|
||||
// strip quotes if string starts and exnds with a quote
|
||||
if(txt[0] === '"' && txt[txt.length-1] === '"'){
|
||||
txt = txt.substring(1,txt.length-1);
|
||||
}
|
||||
if (txt[0] === '"' && txt[txt.length - 1] === '"') {
|
||||
txt = txt.substring(1, txt.length - 1)
|
||||
}
|
||||
|
||||
vertices[id].text = txt;
|
||||
vertices[id].text = txt
|
||||
}
|
||||
if (typeof type !== 'undefined') {
|
||||
vertices[id].type = type
|
||||
}
|
||||
if (typeof type !== 'undefined') {
|
||||
vertices[id].type = type
|
||||
}
|
||||
if (typeof style !== 'undefined') {
|
||||
if (style !== null) {
|
||||
style.forEach(function (s) {
|
||||
vertices[id].styles.push(s)
|
||||
})
|
||||
}
|
||||
if (typeof type !== 'undefined') {
|
||||
vertices[id].type = type;
|
||||
}
|
||||
if (typeof type !== 'undefined') {
|
||||
vertices[id].type = type;
|
||||
}
|
||||
if (typeof style !== 'undefined') {
|
||||
if (style !== null) {
|
||||
style.forEach(function (s) {
|
||||
vertices[id].styles.push(s);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Function called by parser when a link/edge definition has been found
|
||||
@@ -68,25 +68,25 @@ exports.addVertex = function (id, text, type, style) {
|
||||
* @param linktext
|
||||
*/
|
||||
exports.addLink = function (start, end, type, linktext) {
|
||||
log.info('Got edge...', start, end);
|
||||
var edge = {start: start, end: end, type: undefined, text: ''};
|
||||
linktext = type.text;
|
||||
log.info('Got edge...', start, end)
|
||||
var edge = {start: start, end: end, type: undefined, text: ''}
|
||||
linktext = type.text
|
||||
|
||||
if (typeof linktext !== 'undefined') {
|
||||
edge.text = linktext.trim()
|
||||
|
||||
if (typeof linktext !== 'undefined') {
|
||||
edge.text = linktext.trim();
|
||||
|
||||
// strip quotes if string starts and exnds with a quote
|
||||
if(edge.text[0] === '"' && edge.text[edge.text.length-1] === '"'){
|
||||
edge.text = edge.text.substring(1,edge.text.length-1);
|
||||
}
|
||||
if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
|
||||
edge.text = edge.text.substring(1, edge.text.length - 1)
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof type !== 'undefined') {
|
||||
edge.type = type.type;
|
||||
edge.stroke = type.stroke;
|
||||
}
|
||||
edges.push(edge);
|
||||
};
|
||||
if (typeof type !== 'undefined') {
|
||||
edge.type = type.type
|
||||
edge.stroke = type.stroke
|
||||
}
|
||||
edges.push(edge)
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates a link's line interpolation algorithm
|
||||
@@ -94,12 +94,12 @@ exports.addLink = function (start, end, type, linktext) {
|
||||
* @param interpolate
|
||||
*/
|
||||
exports.updateLinkInterpolate = function (pos, interp) {
|
||||
if(pos === 'default'){
|
||||
edges.defaultInterpolate = interp;
|
||||
}else{
|
||||
edges[pos].interpolate = interp;
|
||||
}
|
||||
};
|
||||
if (pos === 'default') {
|
||||
edges.defaultInterpolate = interp
|
||||
} else {
|
||||
edges[pos].interpolate = interp
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates a link with a style
|
||||
@@ -107,315 +107,304 @@ exports.updateLinkInterpolate = function (pos, interp) {
|
||||
* @param style
|
||||
*/
|
||||
exports.updateLink = function (pos, style) {
|
||||
if(pos === 'default'){
|
||||
edges.defaultStyle = style;
|
||||
}else{
|
||||
if(utils.isSubstringInArray('fill', style) === -1) {
|
||||
style.push('fill:none');
|
||||
}
|
||||
edges[pos].style = style;
|
||||
if (pos === 'default') {
|
||||
edges.defaultStyle = style
|
||||
} else {
|
||||
if (utils.isSubstringInArray('fill', style) === -1) {
|
||||
style.push('fill:none')
|
||||
}
|
||||
};
|
||||
edges[pos].style = style
|
||||
}
|
||||
}
|
||||
|
||||
exports.addClass = function (id, style) {
|
||||
if (typeof classes[id] === 'undefined') {
|
||||
classes[id] = {id: id, styles: []};
|
||||
}
|
||||
if (typeof classes[id] === 'undefined') {
|
||||
classes[id] = {id: id, styles: []}
|
||||
}
|
||||
|
||||
if (typeof style !== 'undefined') {
|
||||
if (style !== null) {
|
||||
style.forEach(function (s) {
|
||||
classes[id].styles.push(s);
|
||||
});
|
||||
}
|
||||
if (typeof style !== 'undefined') {
|
||||
if (style !== null) {
|
||||
style.forEach(function (s) {
|
||||
classes[id].styles.push(s)
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by parser when a graph definition is found, stores the direction of the chart.
|
||||
* @param dir
|
||||
*/
|
||||
exports.setDirection = function (dir) {
|
||||
direction = dir;
|
||||
};
|
||||
direction = dir
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by parser when a graph definition is found, stores the direction of the chart.
|
||||
* @param dir
|
||||
*/
|
||||
exports.setClass = function (id,className) {
|
||||
if(id.indexOf(',')>0){
|
||||
id.split(',').forEach(function(id2){
|
||||
if(typeof vertices[id2] !== 'undefined'){
|
||||
vertices[id2].classes.push(className);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
if(typeof vertices[id] !== 'undefined'){
|
||||
vertices[id].classes.push(className);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var setTooltip = function(id,tooltip){
|
||||
if(typeof tooltip !== 'undefined'){
|
||||
tooltips[id]=tooltip;
|
||||
}
|
||||
};
|
||||
|
||||
var setClickFun = function(id, functionName){
|
||||
if(typeof functionName === 'undefined'){
|
||||
return;
|
||||
}
|
||||
exports.setClass = function (id, className) {
|
||||
if (id.indexOf(',') > 0) {
|
||||
id.split(',').forEach(function (id2) {
|
||||
if (typeof vertices[id2] !== 'undefined') {
|
||||
vertices[id2].classes.push(className)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (typeof vertices[id] !== 'undefined') {
|
||||
funs.push(function (element) {
|
||||
var elem = d3.select(element).select('#'+id);
|
||||
if (elem !== null) {
|
||||
elem.on('click', function () {
|
||||
eval(functionName + '(\'' + id + '\')'); // jshint ignore:line
|
||||
});
|
||||
}
|
||||
});
|
||||
vertices[id].classes.push(className)
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
var setLink = function(id, linkStr){
|
||||
if(typeof linkStr === 'undefined'){
|
||||
return;
|
||||
}
|
||||
if (typeof vertices[id] !== 'undefined') {
|
||||
funs.push(function (element) {
|
||||
var elem = d3.select(element).select('#'+id);
|
||||
if (elem !== null) {
|
||||
elem.on('click', function () {
|
||||
window.open(linkStr,'newTab'); // jshint ignore:line
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
exports.getTooltip = function(id){
|
||||
return tooltips[id];
|
||||
};
|
||||
var setTooltip = function (id, tooltip) {
|
||||
if (typeof tooltip !== 'undefined') {
|
||||
tooltips[id] = tooltip
|
||||
}
|
||||
}
|
||||
|
||||
var setClickFun = function (id, functionName) {
|
||||
if (typeof functionName === 'undefined') {
|
||||
return
|
||||
}
|
||||
if (typeof vertices[id] !== 'undefined') {
|
||||
funs.push(function (element) {
|
||||
var elem = d3.select(element).select('#' + id)
|
||||
if (elem !== null) {
|
||||
elem.on('click', function () {
|
||||
eval(functionName + '(\'' + id + '\')') // jshint ignore:line
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
var setLink = function (id, linkStr) {
|
||||
if (typeof linkStr === 'undefined') {
|
||||
return
|
||||
}
|
||||
if (typeof vertices[id] !== 'undefined') {
|
||||
funs.push(function (element) {
|
||||
var elem = d3.select(element).select('#' + id)
|
||||
if (elem !== null) {
|
||||
elem.on('click', function () {
|
||||
window.open(linkStr, 'newTab') // jshint ignore:line
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
exports.getTooltip = function (id) {
|
||||
return tooltips[id]
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by parser when a graph definition is found, stores the direction of the chart.
|
||||
* @param dir
|
||||
*/
|
||||
exports.setClickEvent = function (id,functionName, link,tooltip) {
|
||||
if(id.indexOf(',')>0){
|
||||
id.split(',').forEach(function(id2) {
|
||||
setTooltip(id2,tooltip);
|
||||
setClickFun(id2, functionName);
|
||||
setLink(id2, link);
|
||||
});
|
||||
}else{
|
||||
setTooltip(id,tooltip);
|
||||
setClickFun(id, functionName);
|
||||
setLink(id, link);
|
||||
}
|
||||
};
|
||||
exports.setClickEvent = function (id, functionName, link, tooltip) {
|
||||
if (id.indexOf(',') > 0) {
|
||||
id.split(',').forEach(function (id2) {
|
||||
setTooltip(id2, tooltip)
|
||||
setClickFun(id2, functionName)
|
||||
setLink(id2, link)
|
||||
})
|
||||
} else {
|
||||
setTooltip(id, tooltip)
|
||||
setClickFun(id, functionName)
|
||||
setLink(id, link)
|
||||
}
|
||||
}
|
||||
|
||||
exports.bindFunctions = function(element){
|
||||
funs.forEach(function(fun){
|
||||
fun(element);
|
||||
});
|
||||
};
|
||||
exports.bindFunctions = function (element) {
|
||||
funs.forEach(function (fun) {
|
||||
fun(element)
|
||||
})
|
||||
}
|
||||
exports.getDirection = function () {
|
||||
return direction;
|
||||
};
|
||||
return direction
|
||||
}
|
||||
/**
|
||||
* Retrieval function for fetching the found nodes after parsing has completed.
|
||||
* @returns {{}|*|vertices}
|
||||
*/
|
||||
exports.getVertices = function () {
|
||||
return vertices;
|
||||
};
|
||||
return vertices
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieval function for fetching the found links after parsing has completed.
|
||||
* @returns {{}|*|edges}
|
||||
*/
|
||||
exports.getEdges = function () {
|
||||
return edges;
|
||||
};
|
||||
return edges
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieval function for fetching the found class definitions after parsing has completed.
|
||||
* @returns {{}|*|classes}
|
||||
*/
|
||||
exports.getClasses = function () {
|
||||
return classes;
|
||||
};
|
||||
return classes
|
||||
}
|
||||
|
||||
var setupToolTips = function(element){
|
||||
|
||||
var tooltipElem = d3.select('.mermaidTooltip');
|
||||
if(tooltipElem[0][0] === null){
|
||||
tooltipElem = d3.select('body')
|
||||
var setupToolTips = function (element) {
|
||||
var tooltipElem = d3.select('.mermaidTooltip')
|
||||
if (tooltipElem[0][0] === null) {
|
||||
tooltipElem = d3.select('body')
|
||||
.append('div')
|
||||
.attr('class', 'mermaidTooltip')
|
||||
.style('opacity', 0);
|
||||
}
|
||||
.style('opacity', 0)
|
||||
}
|
||||
|
||||
var svg = d3.select(element).select('svg');
|
||||
var svg = d3.select(element).select('svg')
|
||||
|
||||
var nodes = svg.selectAll('g.node');
|
||||
nodes
|
||||
.on('mouseover', function() {
|
||||
var el = d3.select(this);
|
||||
var title = el.attr('title');
|
||||
var nodes = svg.selectAll('g.node')
|
||||
nodes
|
||||
.on('mouseover', function () {
|
||||
var el = d3.select(this)
|
||||
var title = el.attr('title')
|
||||
// Dont try to draw a tooltip if no data is provided
|
||||
if(title === null){
|
||||
return;
|
||||
}
|
||||
var rect = this.getBoundingClientRect();
|
||||
if (title === null) {
|
||||
return
|
||||
}
|
||||
var rect = this.getBoundingClientRect()
|
||||
|
||||
tooltipElem.transition()
|
||||
tooltipElem.transition()
|
||||
.duration(200)
|
||||
.style('opacity', '.9');
|
||||
tooltipElem.html(el.attr('title'))
|
||||
.style('left', (rect.left+(rect.right-rect.left)/2) + 'px')
|
||||
.style('top', (rect.top-14+document.body.scrollTop) + 'px');
|
||||
el.classed('hover',true);
|
||||
|
||||
.style('opacity', '.9')
|
||||
tooltipElem.html(el.attr('title'))
|
||||
.style('left', (rect.left + (rect.right - rect.left) / 2) + 'px')
|
||||
.style('top', (rect.top - 14 + document.body.scrollTop) + 'px')
|
||||
el.classed('hover', true)
|
||||
})
|
||||
.on('mouseout', function() {
|
||||
tooltipElem.transition()
|
||||
.on('mouseout', function () {
|
||||
tooltipElem.transition()
|
||||
.duration(500)
|
||||
.style('opacity', 0);
|
||||
var el = d3.select(this);
|
||||
el.classed('hover',false);
|
||||
});
|
||||
};
|
||||
funs.push(setupToolTips);
|
||||
.style('opacity', 0)
|
||||
var el = d3.select(this)
|
||||
el.classed('hover', false)
|
||||
})
|
||||
}
|
||||
funs.push(setupToolTips)
|
||||
|
||||
/**
|
||||
* Clears the internal graph db so that a new graph can be parsed.
|
||||
*/
|
||||
exports.clear = function () {
|
||||
vertices = {};
|
||||
classes = {};
|
||||
edges = [];
|
||||
funs = [];
|
||||
funs.push(setupToolTips);
|
||||
subGraphs = [];
|
||||
subCount = 0;
|
||||
tooltips = [];
|
||||
};
|
||||
vertices = {}
|
||||
classes = {}
|
||||
edges = []
|
||||
funs = []
|
||||
funs.push(setupToolTips)
|
||||
subGraphs = []
|
||||
subCount = 0
|
||||
tooltips = []
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @returns {string}
|
||||
*/
|
||||
exports.defaultStyle = function () {
|
||||
return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';
|
||||
};
|
||||
return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;'
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears the internal graph db so that a new graph can be parsed.
|
||||
*/
|
||||
exports.addSubGraph = function (list, title) {
|
||||
function uniq(a) {
|
||||
var prims = {'boolean':{}, 'number':{}, 'string':{}}, objs = [];
|
||||
function uniq (a) {
|
||||
var prims = {'boolean': {}, 'number': {}, 'string': {}}, objs = []
|
||||
|
||||
return a.filter(function(item) {
|
||||
var type = typeof item;
|
||||
if(item===' '){
|
||||
return false;
|
||||
}
|
||||
if(type in prims)
|
||||
return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
|
||||
else
|
||||
return objs.indexOf(item) >= 0 ? false : objs.push(item);
|
||||
});
|
||||
return a.filter(function (item) {
|
||||
var type = typeof item
|
||||
if (item === ' ') {
|
||||
return false
|
||||
}
|
||||
if (type in prims) { return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true) } else { return objs.indexOf(item) >= 0 ? false : objs.push(item) }
|
||||
})
|
||||
}
|
||||
|
||||
var nodeList = []
|
||||
|
||||
nodeList = uniq(nodeList.concat.apply(nodeList, list))
|
||||
|
||||
var subGraph = {id: 'subGraph' + subCount, nodes: nodeList, title: title}
|
||||
// log.debug('subGraph:' + subGraph.title + subGraph.id);
|
||||
// log.debug(subGraph.nodes);
|
||||
subGraphs.push(subGraph)
|
||||
subCount = subCount + 1
|
||||
return subGraph.id
|
||||
}
|
||||
|
||||
var getPosForId = function (id) {
|
||||
var i
|
||||
for (i = 0; i < subGraphs.length; i++) {
|
||||
if (subGraphs[i].id === id) {
|
||||
// log.debug('Found pos for ',id,' ',i);
|
||||
return i
|
||||
}
|
||||
|
||||
var nodeList = [];
|
||||
|
||||
nodeList = uniq(nodeList.concat.apply(nodeList,list));
|
||||
|
||||
|
||||
var subGraph = {id:'subGraph'+subCount, nodes:nodeList,title:title};
|
||||
//log.debug('subGraph:' + subGraph.title + subGraph.id);
|
||||
//log.debug(subGraph.nodes);
|
||||
subGraphs.push(subGraph);
|
||||
subCount = subCount + 1;
|
||||
return subGraph.id;
|
||||
};
|
||||
|
||||
var getPosForId = function(id){
|
||||
var i;
|
||||
for(i=0;i<subGraphs.length;i++){
|
||||
if(subGraphs[i].id===id){
|
||||
//log.debug('Found pos for ',id,' ',i);
|
||||
return i;
|
||||
}
|
||||
}
|
||||
//log.debug('No pos found for ',id,' ',i);
|
||||
return -1;
|
||||
};
|
||||
var secCount = -1;
|
||||
var posCrossRef = [];
|
||||
}
|
||||
// log.debug('No pos found for ',id,' ',i);
|
||||
return -1
|
||||
}
|
||||
var secCount = -1
|
||||
var posCrossRef = []
|
||||
var indexNodes = function (id, pos) {
|
||||
var nodes = subGraphs[pos].nodes;
|
||||
secCount = secCount + 1;
|
||||
if(secCount>2000){
|
||||
return;
|
||||
|
||||
}
|
||||
//var nPos = getPosForId(subGraphs[pos].id);
|
||||
posCrossRef[secCount]=pos;
|
||||
var nodes = subGraphs[pos].nodes
|
||||
secCount = secCount + 1
|
||||
if (secCount > 2000) {
|
||||
return
|
||||
}
|
||||
// var nPos = getPosForId(subGraphs[pos].id);
|
||||
posCrossRef[secCount] = pos
|
||||
// Check if match
|
||||
if(subGraphs[pos].id === id){
|
||||
return {
|
||||
result:true,
|
||||
count:0
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
var count = 0;
|
||||
var posCount = 1;
|
||||
while(count<nodes.length){
|
||||
var childPos = getPosForId(nodes[count]);
|
||||
// Ignore regular nodes (pos will be -1)
|
||||
if(childPos>=0){
|
||||
var res = indexNodes(id,childPos);
|
||||
if(res.result){
|
||||
return {
|
||||
result:true,
|
||||
count:posCount+res.count
|
||||
};
|
||||
}else{
|
||||
posCount = posCount + res.count;
|
||||
}
|
||||
}
|
||||
count = count +1;
|
||||
}
|
||||
|
||||
if (subGraphs[pos].id === id) {
|
||||
return {
|
||||
result:false,
|
||||
count:posCount
|
||||
};
|
||||
|
||||
};
|
||||
result: true,
|
||||
count: 0
|
||||
}
|
||||
}
|
||||
|
||||
var count = 0
|
||||
var posCount = 1
|
||||
while (count < nodes.length) {
|
||||
var childPos = getPosForId(nodes[count])
|
||||
// Ignore regular nodes (pos will be -1)
|
||||
if (childPos >= 0) {
|
||||
var res = indexNodes(id, childPos)
|
||||
if (res.result) {
|
||||
return {
|
||||
result: true,
|
||||
count: posCount + res.count
|
||||
}
|
||||
} else {
|
||||
posCount = posCount + res.count
|
||||
}
|
||||
}
|
||||
count = count + 1
|
||||
}
|
||||
|
||||
return {
|
||||
result: false,
|
||||
count: posCount
|
||||
}
|
||||
}
|
||||
|
||||
exports.getDepthFirstPos = function (pos) {
|
||||
return posCrossRef[pos];
|
||||
};
|
||||
return posCrossRef[pos]
|
||||
}
|
||||
exports.indexNodes = function () {
|
||||
secCount = -1;
|
||||
if(subGraphs.length>0){
|
||||
indexNodes('none',subGraphs.length-1,0);
|
||||
}
|
||||
};
|
||||
secCount = -1
|
||||
if (subGraphs.length > 0) {
|
||||
indexNodes('none', subGraphs.length - 1, 0)
|
||||
}
|
||||
}
|
||||
|
||||
exports.getSubGraphs = function () {
|
||||
return subGraphs;
|
||||
};
|
||||
return subGraphs
|
||||
}
|
||||
|
||||
exports.parseError = function(err,hash){
|
||||
global.mermaidAPI.parseError(err,hash);
|
||||
};
|
||||
exports.parseError = function (err, hash) {
|
||||
global.mermaidAPI.parseError(err, hash)
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user