Browse Source

Implemented attribute mapping for DOT language attributes

flowchartTest
jos 9 years ago
parent
commit
23b9a91740
4 changed files with 87 additions and 7 deletions
  1. +1
    -1
      examples/network/categories/data/dotLanguage/data/cellular_automata.gv.txt
  2. +2
    -2
      examples/network/categories/data/dotLanguage/data/computer_network.gv.txt
  3. +10
    -2
      examples/network/categories/data/dotLanguage/dotPlayground.html
  4. +74
    -2
      lib/network/dotparser.js

+ 1
- 1
examples/network/categories/data/dotLanguage/data/cellular_automata.gv.txt View File

@ -3,7 +3,7 @@ digraph G {
// unrecognized attributes are ignored // unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15] node[width=.25,height=.375,fontsize=15]
node [shape=filled fillcolor=#F1AAF0]
node [shape=filled color=#FF00FF fillcolor=#F1AAF0]
0-> 0 ; 0-> 0 ;
1-> 1 ; 1-> 1 ;
2-> 2 ; 2-> 2 ;

+ 2
- 2
examples/network/categories/data/dotLanguage/data/computer_network.gv.txt View File

@ -1,7 +1,7 @@
digraph topology digraph topology
{ {
node[shape=circle fontSize=12]
edge[length=170 fontSize=12]
node[shape=circle fontsize=12]
edge[length=170 fontsize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"]; "10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"]; "10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"]; "10.0.255.1" -> "10.0.255.2"[label="1.000"];

+ 10
- 2
examples/network/categories/data/dotLanguage/dotPlayground.html View File

@ -10,6 +10,7 @@
<style type="text/css"> <style type="text/css">
body, html { body, html {
font: 10pt sans; font: 10pt sans;
line-height: 1.5em;;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
@ -65,12 +66,21 @@
resize: none; resize: none;
} }
#draw {
padding: 5px 15px;
}
#mynetwork { #mynetwork {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
box-sizing: border-box; box-sizing: border-box;
} }
a:hover {
color: red;
}
</style> </style>
<script src="../../../../googleAnalytics.js"></script> <script src="../../../../googleAnalytics.js"></script>
</head> </head>
@ -101,11 +111,9 @@
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>. The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
</p> </p>
<div> <div>
<br>
<button id="draw">Draw</button> <button id="draw">Draw</button>
<span id="error"></span> <span id="error"></span>
</div> </div>
</div> </div>
<div id="contents"> <div id="contents">

+ 74
- 2
lib/network/dotparser.js View File

@ -16,6 +16,18 @@ function parseDOT (data) {
return parseGraph(); return parseGraph();
} }
// mapping of attributes from DOT (the keys) to vis.js (the values)
var ATTR_MAPPING = {
'fontsize': 'font.size',
'fontcolor': 'font.color',
'labelfontcolor': 'font.color',
'fontname': 'font.face',
'color': ['color.border', 'color.background'],
'fillcolor': 'color.background',
'tooltip': 'title',
'labeltooltip': 'title'
};
// token types enumeration // token types enumeration
var TOKENTYPE = { var TOKENTYPE = {
NULL : 0, NULL : 0,
@ -726,6 +738,63 @@ function forEach2(array1, array2, fn) {
} }
} }
/**
* Set a nested property on an object
* When nested objects are missing, they will be created.
* For example setProp({}, 'font.color', 'red') will return {font: {color: 'red'}}
* @param {Object} object
* @param {string} path A dot separated string like 'font.color'
* @param {*} value Value for the property
* @return {Object} Returns the original object, allows for chaining.
*/
function setProp(object, path, value) {
var names = path.split('.');
var prop = names.pop();
// traverse over the nested objects
var obj = object;
for (var i = 0; i < names.length; i++) {
var name = names[i];
if (!(name in obj)) {
obj[name] = {};
}
obj = obj[name];
}
// set the property value
obj[prop] = value;
return object;
}
/**
* Convert an object with DOT attributes to their vis.js equivalents.
* @param {Object} attr Object with DOT attributes
* @return {Object} Returns an object with vis.js attributes
*/
function convertAttr (attr) {
var converted = {};
for (var prop in attr) {
if (attr.hasOwnProperty(prop)) {
var mapping = ATTR_MAPPING[prop];
if (Array.isArray(mapping)) {
mapping.forEach(function (mapping_i) {
setProp(converted, mapping_i, attr[prop]);
})
}
else if (typeof mapping === 'string') {
setProp(converted, mapping, attr[prop]);
}
else {
setProp(converted, prop, attr[prop]);
}
}
}
return converted;
}
/** /**
* Convert a string containing a graph in DOT language into a map containing * Convert a string containing a graph in DOT language into a map containing
* with nodes and edges in the format of graph. * with nodes and edges in the format of graph.
@ -748,7 +817,7 @@ function DOTToGraph (data) {
id: dotNode.id, id: dotNode.id,
label: String(dotNode.label || dotNode.id) label: String(dotNode.label || dotNode.id)
}; };
merge(graphNode, dotNode.attr);
merge(graphNode, convertAttr(dotNode.attr));
if (graphNode.image) { if (graphNode.image) {
graphNode.shape = 'image'; graphNode.shape = 'image';
} }
@ -768,7 +837,7 @@ function DOTToGraph (data) {
from: dotEdge.from, from: dotEdge.from,
to: dotEdge.to to: dotEdge.to
}; };
merge(graphEdge, dotEdge.attr);
merge(graphEdge, convertAttr(dotEdge.attr));
graphEdge.arrows = (dotEdge.type === '->') ? 'to' : undefined; graphEdge.arrows = (dotEdge.type === '->') ? 'to' : undefined;
return graphEdge; return graphEdge;
@ -785,6 +854,9 @@ function DOTToGraph (data) {
} }
} }
// TODO: support of solid/dotted/dashed edges (attr = 'style')
// TODO: support for attributes 'dir' and 'arrowhead' (edge arrows)
if (dotEdge.to instanceof Object) { if (dotEdge.to instanceof Object) {
to = dotEdge.to.nodes; to = dotEdge.to.nodes;
} }

Loading…
Cancel
Save