Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Add edge styles support for DOT lib #3348

Merged
merged 3 commits into from
Aug 18, 2017
Merged

Add edge styles support for DOT lib #3348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e78c61
Add support for edge style
yasufum Aug 7, 2017
97b33d3
Add example for edge styles
yasufum Aug 7, 2017
cb1ed1e
Correct typo and remove TODO description
yasufum Aug 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 197 additions & 0 deletions examples/network/data/dotLanguage/dotEdgeStyles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
<!doctype html>
<html>
<head>
<title>Network | DOT edge styles</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}

#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}

#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}

#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}

#left {
top: 0;
left: 0;
}

#right {
top: 0;
right: 0;
}

#error {
color: red;
}

#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}

#draw, #reset {
padding: 5px 15px;
}

#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}

a:hover {
color: red;
}

</style>

</head>
<body>

<div id="header">
<h1>DOT edge styles</h1>

<div>
<p>
Example of edge styles support
</p>

<ul>
<li> label: text displayed on the edge</li>
<li> color: edge color</li>
<li> style: edge style is solid(default), dashed or dotted</li>
</ul>
</div>

<div>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<button id="reset" title="Reset the DOT graph">Reset</button>
<span id="error"></span>
</div>
</div>

<div id="contents">
<div id="left">
<textarea id="data">
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>

<script type="text/javascript">
var dotDefault = "digraph {\n" +
" Parent -> C1[label=\"default\"]; // Default style is solid \n" +
" Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
" Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
" Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
"}";

// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);

$('#draw').click(draw);
$('#reset').click(reset);

$(window).resize(resize);
$(window).load(draw);

$('#data').keydown(function (event) {
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
draw();
event.stopPropagation();
event.preventDefault();
}
});

function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}

function draw () {
try {
resize();
$('#error').html('');

// Provide a string with data in DOT language
data = vis.network.convertDot($('#data').val());

network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}

// show an error message
$('#error').html(err.toString());
}
}

function reset() {
$('#data').val(dotDefault);
draw();
}

window.onload = function() {
reset();
}
</script>
</body>
</html>
15 changes: 14 additions & 1 deletion lib/network/dotparser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ var NODE_ATTR_MAPPING = {
};
var EDGE_ATTR_MAPPING = Object.create(NODE_ATTR_MAPPING);
EDGE_ATTR_MAPPING.color = 'color.color';
EDGE_ATTR_MAPPING.style = 'dashes';

// token types enumeration
var TOKENTYPE = {
Expand Down Expand Up @@ -682,6 +683,13 @@ function parseEdge(graph, from) {
function parseAttributeList() {
var attr = null;

// edge styles of dot and vis
var edgeStyles = {
'dashed': true,
'solid': false,
'dotted': [1, 5]
};

while (token === '[') {
getToken();
attr = {};
Expand All @@ -701,6 +709,12 @@ function parseAttributeList() {
throw newSyntaxError('Attribute value expected');
}
var value = token;

// convert from dot style to vis
if (name === 'style') {
value = edgeStyles[value];
}

setValue(attr, name, value); // name can be a path

getToken();
Expand Down Expand Up @@ -885,7 +899,6 @@ 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) {
Expand Down