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

Commit

Permalink
Add arrow types for EndPoints.js (#3839)
Browse files Browse the repository at this point in the history 
* Add arrowhead support

As described in TODO, dotparser.js does not support 'arrowhead'
attribubte of edge.
This update is for adding 'dot' and 'tee'(bar) styles.

* Add example for arrow styles

* Add box arrowhead

To support box arrowhead of graphviz, add Box endpoint class in
EndPoints.js and box attribute in dotparser.js.

* Add diamond arrowhead

To support diamond arrowhead of graphviz, add Diamond endpoint
class in EndPoints.js and diamond attribute in dotparser.js.

* Add crow arrowhead

To support crow arrowhead of graphviz, add Crow endpoint
class in EndPoints.js and crow attribute in dotparser.js.

* Add normal arrowhead

To support normal arrowhead of graphviz, add Triangle endpoint
class in EndPoints.js and normal attribute in dotparser.js.

* Add curve arrowhead

To support curve arrowhead of graphviz, add Curve endpoint
class in EndPoints.js and curve attribute in dotparser.js.

* Add inverted curve arrowhead

To support inverted curve arrowhead of graphviz, add InvertedCurve
endpoint class in EndPoints.js and icurve attribute in
dotparser.js.

* Add vee arrowhead

To support vee arrowhead of graphviz, add Vee endpoint class in
EndPoints.js and vee attribute in dotparser.js.

* Add arrowhead examples

* Fix bug for accessing null attribute

In createEdge(), accessing 'attr' causes an error if the edge has no
attribute and the value is null.
This update fixes bug for accessing null 'attr'.

* Update description for arrows.to.type option

Add followingn options for 'arrows.to.type'.

* box
* crow
* curve
* diamond
* inv_curve
* triangle
* inv_triangle
* vee

* Update edgeStyle example for arrow types

Add arrow types for the example.

'box', 'crow', 'curve', 'inv_curve', 'diamond', 'triangle',
'inv_triangle', 'vee'
  • Loading branch information
@geminoa @yotamberk
geminoa authored and yotamberk committed Mar 31, 2018
1 parent 58e31ed commit 2cf2904
Show file tree
Hide file tree
Showing 5 changed files with 385 additions and 45 deletions.
2 changes: 1 addition & 1 deletion docs/network/edges.html
View file
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
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
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
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

0 comments on commit 2cf2904

Please sign in to comment.