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

Add arrow types for EndPoints.js #3839

Merged
merged 13 commits into from
Mar 31, 2018
Merged

Add arrow types for EndPoints.js #3839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
08729c6
Add arrowhead support
geminoa Feb 24, 2018
c9b2200
Add example for arrow styles
geminoa Feb 24, 2018
41187b2
Add box arrowhead
geminoa Feb 24, 2018
36c1d86
Add diamond arrowhead
geminoa Feb 24, 2018
a5379ec
Add crow arrowhead
geminoa Feb 24, 2018
b5c5ed6
Add normal arrowhead
geminoa Feb 24, 2018
98752d4
Add curve arrowhead
geminoa Feb 24, 2018
5e63aed
Add inverted curve arrowhead
geminoa Feb 24, 2018
f74518e
Add vee arrowhead
geminoa Feb 24, 2018
da73adb
Add arrowhead examples
geminoa Feb 24, 2018
78e362b
Fix bug for accessing null attribute
geminoa Feb 24, 2018
426cbdf
Update description for arrows.to.type option
geminoa Feb 24, 2018
53b2c91
Update edgeStyle example for arrow types
geminoa Feb 24, 2018
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
2 changes: 1 addition & 1 deletion docs/network/edges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ <h3>Options</h3>
<td class="indent2">arrows.to.type</td>
<td>String</td>
<td><code>arrow</code></td>
<td>The type of endpoint. Possible values are: <code>arrow</code>, <code>bar</code>, <code>circle</code>. The default is <code>arrow</code>.
<td>The type of endpoint. Possible values are: <code>arrow</code>, <code>bar</code>, <code>circle</code>, <code>box</code>, <code>crow</code>, <code>curve</code>, <code>diamond</code>, <code>inv_curve</code>, <code>triangle</code>, <code>inv_triangle</code>, <code>vee</code>. The default is <code>arrow</code>.
</tr>
<tr parent="arrows" class="hidden">
<td class="indent">arrows.middle</td>
Expand Down
74 changes: 54 additions & 20 deletions examples/network/data/dotLanguage/dotEdgeStyles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,22 @@

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

#left {
width: 40%;
height: 80%;
top: 0;
left: 0;
}

#right {
width: 60%;
height: 100%;
top: 0;
right: 0;
}
Expand Down Expand Up @@ -82,7 +84,7 @@
}

</style>

</head>
<body>

Expand All @@ -91,40 +93,72 @@ <h1>DOT edge styles</h1>

<div>
<p>
Example of edge styles support
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>
<table border=1>
<tr>
<th>Attributes</th><th>Desriptions</th>
</tr>
<tr>
<td align="center">label</td><td>Text displayed on the edge</td>
</tr>
<tr>
<td align="center">color</td><td>Edge color</td>
</tr>
<tr>
<td align="center">style</td>
<td>Edge style (solid, dashed, dotted)</td>
</tr>
<tr>
<td align="center">arrowhead</td>
<td>Arrow style (dot, box, crow, curve, icurve, normal, inv, diamond, tee, vee)</td>
</tr>
</table>
</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>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<button id="reset" title="Reset the DOT graph">Reset</button>
</div>
<div>
<span id="error"></span>
</div>
</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" +
"}";
var dotDefault = 'digraph {\n' +
' // Parent nodes\n' +
' lines[label="LINES"]; \n' +
' ahs[label="ARROW HEADS"]; \n' +
'\n' +
' // Line styles\n' +
' lines -- solid[label="solid pink", color="pink"]; \n' +
' lines -- dashed[label="dashed green", style="dashed", color="green"]; \n' +
' lines -- dotted[label="dotted purple", style="dotted", color="purple"]; \n' +
'\n' +
' // Arrowhead styles\n' +
' ahs -> dot[label="dot", arrowhead=dot]; \n' +
' ahs -> box[label="box", arrowhead=box]; \n' +
' ahs -> crow[label="crow", arrowhead=crow]; \n' +
' ahs -> curve[label="curve", arrowhead=curve]; \n' +
' ahs -> icurve[label="icurve", arrowhead=icurve]; \n' +
' ahs -> normal[label="normal", arrowhead=normal]; \n' +
' ahs -> inv[label="inv", arrowhead=inv]; \n' +
' ahs -> diamond[label="diamond", arrowhead=diamond]; \n' +
' ahs -> tee[label="tee", arrowhead=tee]; \n' +
' ahs -> vee[label="vee", arrowhead=vee]; \n' +
'}';

// create a network
var container = document.getElementById('mynetwork');
Expand Down
65 changes: 43 additions & 22 deletions examples/network/edgeStyles/arrowTypes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,66 @@
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
height: 540px;
border: 1px solid lightgray;
}
</style>
</head>
<body>

<p>
The types of endpoints are: <code>'arrow' 'circle' 'bar'</code>.
The types of endpoints.
The default is <code>'arrow'</code>.
</p>
<p id="arrow_type_list"></p>

<div id="mynetwork"></div>

<script type="text/javascript">
var arrow_types = [
'arrow', 'bar', 'circle', 'box', 'crow', 'curve', 'inv_curve',
'diamond', 'triangle', 'inv_triangle', 'vee'
];

// update list of arrow types in html body
var nof_types = arrow_types.length;
var list_contents = [];
for(var i = 0; i < nof_types; i++) {
list_contents.push("<code>'" + arrow_types[i] + "'</code>");
}
var mylist = document.getElementById("arrow_type_list");
mylist.innerHTML = list_contents.join(", ");

// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'A'},
{id: 2, label: 'B'},
{id: 3, label: 'C'},
{id: 4, label: 'D'}
]);
var node_attrs = new Array();
var nodes = arrow_types.slice();
nodes.push("end");
console.log(nodes);
var nof_nodes = nodes.length;
for(var i = 0; i < nof_nodes; i++) {
node_attrs[i] = {
id: i+1,
label: nodes[i]
};
}

var nodes = new vis.DataSet(node_attrs);

// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2, arrows:'to'},
{from: 2, to: 3, arrows:{
to: {
enabled: true,
type: 'circle'
}
}},
{from: 3, to: 4, arrows:{
to: {
enabled: true,
type: 'bar'
var edge_attrs = new Array();
var nof_edges = nof_nodes - 1;
for(var i = 0; i < nof_edges; i++) {
edge_attrs[i] = {
from: i+1, to: i+2, arrows: {
to: {
enabled: true,
type: arrow_types[i]
}
}
}},
]);
}
}

var edges = new vis.DataSet(edge_attrs);

// create a network
var container = document.getElementById('mynetwork');
Expand Down
41 changes: 39 additions & 2 deletions lib/network/dotparser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,14 @@ function createEdge(graph, from, to, type, attr) {
}
edge.attr = merge(edge.attr || {}, attr); // merge attributes

// Move arrows attribute from attr to edge temporally created in
// parseAttributeList().
if (attr != null) {
if (attr.hasOwnProperty('arrows')) {
edge['arrows'] = {to: {enabled: true, type: attr.arrows.type}};
attr['arrows'] = null;
}
}
return edge;
}

Expand Down Expand Up @@ -715,6 +723,29 @@ function parseAttributeList() {
value = edgeStyles[value];
}

// Define arrow types.
// vis.js currently supports types defined in 'arrowTypes'.
// Details of arrow shapes are described in
// http://www.graphviz.org/content/arrow-shapes
var arrowTypes = {
dot: 'circle',
box: 'box',
crow: 'crow',
curve: 'curve',
icurve: 'inv_curve',
normal: 'triangle',
inv: 'inv_triangle',
diamond: 'diamond',
tee: 'bar',
vee: 'vee'
};

if (name === 'arrowhead') {
var arrowType = arrowTypes[value];
name = 'arrows';
value = {to: {enabled:true, type: arrowType}};
}

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

getToken();
Expand Down Expand Up @@ -883,7 +914,13 @@ function DOTToGraph (data) {
to: dotEdge.to
};
merge(graphEdge, convertAttr(dotEdge.attr, EDGE_ATTR_MAPPING));
graphEdge.arrows = (dotEdge.type === '->') ? 'to' : undefined;

// Add arrows attribute to default styled arrow.
// The reason why default style is not added in parseAttributeList() is
// because only default is cleared before here.
if (graphEdge.arrows == null && dotEdge.type === '->') {
graphEdge.arrows = 'to';
}

return graphEdge;
};
Expand All @@ -899,7 +936,7 @@ function DOTToGraph (data) {
}
}

// TODO: support for attributes 'dir' and 'arrowhead' (edge arrows)
// TODO: support for attributes 'dir' (edge arrows)

if (dotEdge.to instanceof Object) {
to = dotEdge.to.nodes;
Expand Down
Loading