Skip to content

Commit d95155a

Browse files
yasufumPrimoz Susa
yasufum
authored and
Primoz Susa
committed
Add edge styles support for DOT lib (visjs#3348)
* Add support for edge style * Update for TODO: support of solid/dotted/dashed edges (attr = 'style') * Edge styles are defined as var edgeStyles in parseAttributeList(). * Add example for edge styles Add an editable example for playing DOT edge styles * Correct typo and remove TODO description * Correct typo of filename from 'dotEdgeSytles.html' to 'dotEdgeStyles.html'. * Remove TODO description of the issue for edge style
1 parent 000d0e5 commit d95155a

File tree

2 files changed

+211
-1
lines changed

2 files changed

+211
-1
lines changed

‎examples/network/data/dotLanguage/dotEdgeStyles.html

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Network | DOT edge styles</title>
5+
6+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
7+
<script src="../../../../dist/vis.js"></script>
8+
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
9+
10+
<style type="text/css">
11+
body, html {
12+
font: 10pt sans;
13+
line-height: 1.5em;;
14+
width: 100%;
15+
height: 100%;
16+
padding: 0;
17+
margin: 0;
18+
color: #4d4d4d;
19+
box-sizing: border-box;
20+
overflow: hidden;
21+
}
22+
23+
#header {
24+
margin: 0;
25+
padding: 10px;
26+
box-sizing: border-box;
27+
}
28+
29+
#contents {
30+
height: 100%;
31+
margin: 0;
32+
padding: 0;
33+
box-sizing: border-box;
34+
position: relative;
35+
}
36+
37+
#left, #right {
38+
position: absolute;
39+
width: 50%;
40+
height: 100%;
41+
margin: 0;
42+
padding: 10px;
43+
box-sizing: border-box;
44+
display: inline-block;
45+
}
46+
47+
#left {
48+
top: 0;
49+
left: 0;
50+
}
51+
52+
#right {
53+
top: 0;
54+
right: 0;
55+
}
56+
57+
#error {
58+
color: red;
59+
}
60+
61+
#data {
62+
width: 100%;
63+
height: 100%;
64+
border: 1px solid #d3d3d3;
65+
box-sizing: border-box;
66+
resize: none;
67+
}
68+
69+
#draw, #reset {
70+
padding: 5px 15px;
71+
}
72+
73+
#mynetwork {
74+
width: 100%;
75+
height: 100%;
76+
border: 1px solid #d3d3d3;
77+
box-sizing: border-box;
78+
}
79+
80+
a:hover {
81+
color: red;
82+
}
83+
84+
</style>
85+
86+
</head>
87+
<body>
88+
89+
<div id="header">
90+
<h1>DOT edge styles</h1>
91+
92+
<div>
93+
<p>
94+
Example of edge styles support
95+
</p>
96+
97+
<ul>
98+
<li> label: text displayed on the edge</li>
99+
<li> color: edge color</li>
100+
<li> style: edge style is solid(default), dashed or dotted</li>
101+
</ul>
102+
</div>
103+
104+
<div>
105+
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
106+
<button id="reset" title="Reset the DOT graph">Reset</button>
107+
<span id="error"></span>
108+
</div>
109+
</div>
110+
111+
<div id="contents">
112+
<div id="left">
113+
<textarea id="data">
114+
</textarea>
115+
</div>
116+
<div id="right">
117+
<div id="mynetwork"></div>
118+
</div>
119+
</div>
120+
121+
<script type="text/javascript">
122+
var dotDefault = "digraph {\n" +
123+
" Parent -> C1[label=\"default\"]; // Default style is solid \n" +
124+
" Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
125+
" Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
126+
" Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
127+
"}";
128+
129+
// create a network
130+
var container = document.getElementById('mynetwork');
131+
var options = {
132+
physics: {
133+
stabilization: false,
134+
barnesHut: {
135+
springLength: 200
136+
}
137+
}
138+
};
139+
var data = {};
140+
var network = new vis.Network(container, data, options);
141+
142+
$('#draw').click(draw);
143+
$('#reset').click(reset);
144+
145+
$(window).resize(resize);
146+
$(window).load(draw);
147+
148+
$('#data').keydown(function (event) {
149+
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
150+
draw();
151+
event.stopPropagation();
152+
event.preventDefault();
153+
}
154+
});
155+
156+
function resize() {
157+
$('#contents').height($('body').height() - $('#header').height() - 30);
158+
}
159+
160+
function draw () {
161+
try {
162+
resize();
163+
$('#error').html('');
164+
165+
// Provide a string with data in DOT language
166+
data = vis.network.convertDot($('#data').val());
167+
168+
network.setData(data);
169+
}
170+
catch (err) {
171+
// set the cursor at the position where the error occurred
172+
var match = /\(char (.*)\)/.exec(err);
173+
if (match) {
174+
var pos = Number(match[1]);
175+
var textarea = $('#data')[0];
176+
if(textarea.setSelectionRange) {
177+
textarea.focus();
178+
textarea.setSelectionRange(pos, pos);
179+
}
180+
}
181+
182+
// show an error message
183+
$('#error').html(err.toString());
184+
}
185+
}
186+
187+
function reset() {
188+
$('#data').val(dotDefault);
189+
draw();
190+
}
191+
192+
window.onload = function() {
193+
reset();
194+
}
195+
</script>
196+
</body>
197+
</html>

‎lib/network/dotparser.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ var NODE_ATTR_MAPPING = {
5252
};
5353
var EDGE_ATTR_MAPPING = Object.create(NODE_ATTR_MAPPING);
5454
EDGE_ATTR_MAPPING.color = 'color.color';
55+
EDGE_ATTR_MAPPING.style = 'dashes';
5556

5657
// token types enumeration
5758
var TOKENTYPE = {
@@ -682,6 +683,13 @@ function parseEdge(graph, from) {
682683
function parseAttributeList() {
683684
var attr = null;
684685

686+
// edge styles of dot and vis
687+
var edgeStyles = {
688+
'dashed': true,
689+
'solid': false,
690+
'dotted': [1, 5]
691+
};
692+
685693
while (token === '[') {
686694
getToken();
687695
attr = {};
@@ -701,6 +709,12 @@ function parseAttributeList() {
701709
throw newSyntaxError('Attribute value expected');
702710
}
703711
var value = token;
712+
713+
// convert from dot style to vis
714+
if (name === 'style') {
715+
value = edgeStyles[value];
716+
}
717+
704718
setValue(attr, name, value); // name can be a path
705719

706720
getToken();
@@ -885,7 +899,6 @@ function DOTToGraph (data) {
885899
}
886900
}
887901

888-
// TODO: support of solid/dotted/dashed edges (attr = 'style')
889902
// TODO: support for attributes 'dir' and 'arrowhead' (edge arrows)
890903

891904
if (dotEdge.to instanceof Object) {

0 commit comments

Comments
 (0)