From 2cf2904220e2bef555a27102e4d9d20171b67e18 Mon Sep 17 00:00:00 2001
From: geminoa <geminoa@gmail.com>
Date: Sun, 1 Apr 2018 03:55:51 +0900
Subject: [PATCH] Add arrow types for EndPoints.js (#3839)

* 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'
---
 docs/network/edges.html                       |   2 +-
 .../data/dotLanguage/dotEdgeStyles.html       |  74 ++++--
 examples/network/edgeStyles/arrowTypes.html   |  65 +++--
 lib/network/dotparser.js                      |  41 ++-
 .../components/edges/util/EndPoints.js        | 248 ++++++++++++++++++
 5 files changed, 385 insertions(+), 45 deletions(-)
diff --git a/docs/network/edges.html b/docs/network/edges.html
index 8efddbc5..da35bed0 100644
--- a/docs/network/edges.html
+++ b/docs/network/edges.html
@@ -232,7 +232,7 @@ network.setOptions(options);
             <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>
diff --git a/examples/network/data/dotLanguage/dotEdgeStyles.html b/examples/network/data/dotLanguage/dotEdgeStyles.html
index 9d5644b0..a27dac9b 100644
--- a/examples/network/data/dotLanguage/dotEdgeStyles.html
+++ b/examples/network/data/dotLanguage/dotEdgeStyles.html
@@ -36,8 +36,6 @@
 
     #left, #right {
       position: absolute;
-      width: 50%;
-      height: 100%;
       margin: 0;
       padding: 10px;
       box-sizing: border-box;
@@ -45,11 +43,15 @@
     }
 
     #left {
+      width: 40%;
+      height: 80%;
       top: 0;
       left: 0;
     }
 
     #right {
+      width: 60%;
+      height: 100%;
       top: 0;
       right: 0;
     }
@@ -82,7 +84,7 @@
     }
 
   </style>
-  
+
 </head>
 <body>
 
@@ -91,27 +93,43 @@
 
   <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>
@@ -119,12 +137,28 @@
 </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');
diff --git a/examples/network/edgeStyles/arrowTypes.html b/examples/network/edgeStyles/arrowTypes.html
index 4adcc1d2..77729ce4 100644
--- a/examples/network/edgeStyles/arrowTypes.html
+++ b/examples/network/edgeStyles/arrowTypes.html
@@ -9,7 +9,7 @@
   <style type="text/css">
     #mynetwork {
       width: 600px;
-      height: 400px;
+      height: 540px;
       border: 1px solid lightgray;
     }
   </style>
@@ -17,37 +17,58 @@
 <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');
diff --git a/lib/network/dotparser.js b/lib/network/dotparser.js
index 6b2740e1..2efd580b 100644
--- a/lib/network/dotparser.js
+++ b/lib/network/dotparser.js
@@ -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;
 }
 
@@ -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();
@@ -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;
     };
@@ -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;
diff --git a/lib/network/modules/components/edges/util/EndPoints.js b/lib/network/modules/components/edges/util/EndPoints.js
index 9a7261d5..cf8882eb 100644
--- a/lib/network/modules/components/edges/util/EndPoints.js
+++ b/lib/network/modules/components/edges/util/EndPoints.js
@@ -113,6 +113,153 @@ class Arrow extends EndPoint {
   }
 }
 
+/**
+ * Drawing methods for the crow endpoint.
+ * @extends EndPoint
+ */
+class Crow {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var points = [
+      { x:-1, y: 0},
+      { x:0, y: 0.3},
+      { x:-0.4, y: 0},
+      { x:0, y:-0.3},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
+
+/**
+ * Drawing methods for the curve endpoint.
+ * @extends EndPoint
+ */
+class Curve {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var point = {x:-0.4, y:0};
+    EndPoint.transform(point, arrowData);
+
+    // Update endpoint style for drawing transparent arc.
+    ctx.strokeStyle = ctx.fillStyle;
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+
+    // Define curve endpoint as semicircle.
+    var pi = Math.PI
+    var start_angle = arrowData.angle - pi/2;
+    var end_angle = arrowData.angle + pi/2;
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, arrowData.length*0.4, start_angle, end_angle, false);
+    ctx.stroke()
+  }
+}
+
+/**
+ * Drawing methods for the inverted curve endpoint.
+ * @extends EndPoint
+ */
+class InvertedCurve {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var point = {x:-0.3, y:0};
+    EndPoint.transform(point, arrowData);
+
+    // Update endpoint style for drawing transparent arc.
+    ctx.strokeStyle = ctx.fillStyle;
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+
+    // Define inverted curve endpoint as semicircle.
+    var pi = Math.PI
+    var start_angle = arrowData.angle + pi/2;
+    var end_angle = arrowData.angle + 3*pi/2;
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, arrowData.length*0.4, start_angle, end_angle, false);
+    ctx.stroke()
+  }
+}
+
+/**
+ * Drawing methods for the trinagle endpoint.
+ * @extends EndPoint
+ */
+class Triangle {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var points = [
+      { x:0.02, y:0},
+      { x:-1, y: 0.3},
+      { x:-1, y:-0.3},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
+
+/**
+ * Drawing methods for the inverted trinagle endpoint.
+ * @extends EndPoint
+ */
+class InvertedTriangle {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var points = [
+      { x:0, y:0.3},
+      { x:0, y: -0.3},
+      { x:-1, y:0},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
 
 /**
  * Drawing methods for the circle endpoint.
@@ -173,6 +320,83 @@ class Bar {
   }
 }
 
+/**
+ * Drawing methods for the box endpoint.
+ */
+class Box {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    var points = [
+      {x:0, y:0.3},
+      {x:0, y:-0.3},
+      {x:-0.6, y:-0.3},
+      {x:-0.6, y:0.3},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
+
+/**
+ * Drawing methods for the diamond endpoint.
+ */
+class Diamond {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    var points = [
+      {x:0, y:0},
+      {x:-0.5, y:-0.3},
+      {x:-1, y:0},
+      {x:-0.5, y:0.3},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
+
+/**
+ * Drawing methods for the vee endpoint.
+ * @extends EndPoint
+ */
+class Vee {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var points = [
+      { x:-1, y: 0.3},
+      { x:-0.5, y: 0},
+      { x:-1, y:-0.3},
+      { x:0, y: 0},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
 
 /**
  * Drawing methods for the endpoints.
@@ -196,9 +420,33 @@ class EndPoints {
     case 'circle':
       Circle.draw(ctx, arrowData);
       break;
+    case 'box':
+      Box.draw(ctx, arrowData);
+      break;
+    case 'crow':
+      Crow.draw(ctx, arrowData);
+      break;
+    case 'curve':
+      Curve.draw(ctx, arrowData);
+      break;
+    case 'diamond':
+      Diamond.draw(ctx, arrowData);
+      break;
+    case 'inv_curve':
+      InvertedCurve.draw(ctx, arrowData);
+      break;
+    case 'triangle':
+      Triangle.draw(ctx, arrowData);
+      break;
+    case 'inv_triangle':
+      InvertedTriangle.draw(ctx, arrowData);
+      break;
     case 'bar':
       Bar.draw(ctx, arrowData);
       break;
+    case 'vee':
+      Vee.draw(ctx, arrowData);
+      break;
     case 'arrow':  // fall-through
     default:
       Arrow.draw(ctx, arrowData);

Attributes	Desriptions
label	Text displayed on the edge
color	Edge color
style	Edge style (solid, dashed, dotted)
arrowhead	Arrow style (dot, box, crow, curve, icurve, normal, inv, diamond, tee, vee)