From eedd022ac2be0370eccfccc40eb409a86912453f Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Wed, 18 Oct 2017 13:45:35 +0200
Subject: [PATCH 01/10] Network: Add new Hexagon shape to shape examples
 (#3577)

This shape was added recently and was not showcased anywhere. Hereby added.
---
 examples/network/nodeStyles/shapes.html                  | 4 +++-
 examples/network/nodeStyles/shapesWithDashedBorders.html | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/network/nodeStyles/shapes.html b/examples/network/nodeStyles/shapes.html
index d60901f6..bf1a5c85 100644
--- a/examples/network/nodeStyles/shapes.html
+++ b/examples/network/nodeStyles/shapes.html
@@ -32,6 +32,7 @@
         {id: 9,  label: 'triangleDown', shape: 'triangleDown'},
         {id: 10, label: 'text',    shape: 'text'},
         {id: 11, label: 'star',    shape: 'star'},
+        {id: 12, label: 'hexagon', shape: 'hexagon'},
         {id: 21, font:{size:30},          label: 'big circle',  shape: 'circle' },
         {id: 22, font:{size:30},          label: 'big ellipse', shape: 'ellipse'},
         {id: 23, font:{size:30},          label: 'ellipse with a long label text', shape: 'ellipse'},
@@ -43,7 +44,8 @@
         {id: 29, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
         {id: 30, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
         {id: 31, font:{size:30},          label: 'big text',    shape: 'text'},
-        {id: 32, font:{size:30}, size:40, label: 'big star',    shape: 'star'}
+        {id: 32, font:{size:30}, size:40, label: 'big star',    shape: 'star'},
+        {id: 33, font:{size:30}, size:40, label: 'big hexagon', shape: 'hexagon'},
       ];
 
       edges = [
diff --git a/examples/network/nodeStyles/shapesWithDashedBorders.html b/examples/network/nodeStyles/shapesWithDashedBorders.html
index a129782e..b0eb2de0 100644
--- a/examples/network/nodeStyles/shapesWithDashedBorders.html
+++ b/examples/network/nodeStyles/shapesWithDashedBorders.html
@@ -32,6 +32,7 @@
         {id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
         {id: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:true}},
         {id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
+        {id: 12, font:{size:30}, size:40, label: 'hexagon', shape: 'hexagon', shapeProperties:{borderDashes:[5,5]}},
       ];
 
       edges = [

From d53042af10614d0f96c181746d44ddf1e0cc18e3 Mon Sep 17 00:00:00 2001
From: Pascal Gula <pascal.gula@gmail.com>
Date: Wed, 18 Oct 2017 13:46:44 +0200
Subject: [PATCH 02/10] Removing duplicate line (#3578)

Removing duplicate line
---
 lib/timeline/Core.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 134c1580..d3f73764 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -76,7 +76,6 @@ Core.prototype._create = function (container) {
   this.dom.root.appendChild(this.dom.rightContainer);
   this.dom.root.appendChild(this.dom.top);
   this.dom.root.appendChild(this.dom.bottom);
-  this.dom.root.appendChild(this.dom.bottom);
   this.dom.root.appendChild(this.dom.rollingModeBtn);
 
   this.dom.centerContainer.appendChild(this.dom.center);

From 3c48a38db586336dce13624bba3638068bfe8a12 Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Wed, 18 Oct 2017 13:47:44 +0200
Subject: [PATCH 03/10] Network: Fix documentation for event `stabilized`
 (#3582)

Fixes #3468.

Rather than changing the code, this resolves the issue by adjusting the documentation for event `stabilized`.
---
 docs/network/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/network/index.html b/docs/network/index.html
index 2ade8795..28199c4e 100644
--- a/docs/network/index.html
+++ b/docs/network/index.html
@@ -1487,7 +1487,7 @@ Thus, to get the topmost item, get the value at index 0.
                 </td>
             <tr><td id="event_stabilized">stabilized</td>
                 <td>Object</td>
-                <td>Fired when the network has stabilized or when the <code>stopSimulation()</code> has been called. The amount of iterations it took could be used to tweak the maximum amount of iterations needed to stabilize the network. Passes an object with properties structured as:
+                <td>Fired when the network has stabilized, when the amount of iterations defined in the options has been reached, or when the <code>stopSimulation()</code> has been called. The amount of iterations it took could be used to tweak the maximum amount of iterations needed to stabilize the network. Passes an object with properties structured as:
 <pre class="prettyprint lang-js">{
   iterations: Number // iterations it took
 }</pre>

From ca8598399ed114be58313dd4abd2ec30f2ee58e1 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Wed, 18 Oct 2017 14:48:19 +0300
Subject: [PATCH 04/10] Loading screen template (#3537)

* initial trial

* Add onInitialDrawComplete

* Add docs

* Add to eventListeners examples

* Keeping things DRY

* Remove callback insertion

* Remove call

* Add initial loading screen

* Fix real initial draw call

* Remove activateOnInitialDraw method

* Add loading screen option

* Add docs

* Remove onInitialDrawComplete double doc

* Simplify example

* Simplify stressPerformance example

* Remove extra line
---
 docs/timeline/index.html                      |  7 +++
 examples/timeline/other/loadingScreen.html    | 58 +++++++++++++++++++
 .../timeline/other/stressPerformance.html     | 13 +----
 lib/timeline/Core.js                          |  6 +-
 lib/timeline/Timeline.js                      | 23 +++++++-
 lib/timeline/component/css/timeline.css       | 10 +++-
 lib/timeline/component/css/timeline.js        | 19 ++++++
 lib/timeline/optionsTimeline.js               |  1 +
 8 files changed, 122 insertions(+), 15 deletions(-)
 create mode 100644 examples/timeline/other/loadingScreen.html
 create mode 100644 lib/timeline/component/css/timeline.js

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 0b6f46c0..03e53cfe 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -773,6 +773,13 @@ function (option, path) {
       <td>If true, range of all items in the Timeline is draggable without being selected. If false, range is only draggable for the selected item(s). Only applicable when option <code>itemsAlwaysDraggable.item</code> is set <code>true</code>. </td>
     </tr>
 
+    <tr>
+      <td>loadingScreenTemplate</td>
+      <td>function</td>
+      <td>none</td>
+      <td>A template function used to generate the timeline initial loading screen. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+    </tr>
+
     <tr>
       <td>locale</td>
       <td>String</td>
diff --git a/examples/timeline/other/loadingScreen.html b/examples/timeline/other/loadingScreen.html
new file mode 100644
index 00000000..80ca4aa8
--- /dev/null
+++ b/examples/timeline/other/loadingScreen.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Timeline | Loading screen example</title>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <h1>Timeline with loading screen</h1>
+  <div id="visualization"></div>
+</body>
+
+<script>
+  var now = moment();
+  var groupCount = 20;
+  var itemCount = 400;
+
+  // create a data set with groups
+  var groups = new vis.DataSet();
+  for (var g = 0; g < groupCount; g++) {
+    groups.add({
+      id: g,
+      content: "group " + g
+    });
+  }
+
+  var types = ['point', 'range', 'box', 'background']
+  // create a dataset with items
+  var items = new vis.DataSet();
+  for (var i = 0; i < itemCount; i++) {
+    var start = now.clone().add(Math.random() * 180, 'days');
+    var end = start.clone().add(Math.random() * 30, 'days');
+    var group = Math.floor(Math.random() * groupCount);
+    items.add({
+      id: i,
+      type: types[Math.floor(Math.random() * types.length)],
+      group: group,
+      content: '' + i,
+      start: start,
+      end: end
+    });
+  }
+
+  // create visualization
+  var container = document.getElementById('visualization');
+  var options = {
+    loadingScreenTemplate: function() {
+      return '<h1>Loading...</h1>'
+    }
+  };
+
+  var timeline = new vis.Timeline(container, items, groups, options);
+</script>
+
+</html>
\ No newline at end of file
diff --git a/examples/timeline/other/stressPerformance.html b/examples/timeline/other/stressPerformance.html
index 94906e06..d26f4117 100644
--- a/examples/timeline/other/stressPerformance.html
+++ b/examples/timeline/other/stressPerformance.html
@@ -49,18 +49,9 @@
 
   // create visualization
   var container = document.getElementById('visualization');
-  var options = {
-    width: '100%',
-    showCurrentTime: false,
-    stack: true,
-    selectable: true,
-    editable: true,
-  };
+  var options = {};
 
-  var timeline = new vis.Timeline(container);
-  timeline.setOptions(options);
-  timeline.setGroups(groups);
-  timeline.setItems(items);
+  var timeline = new vis.Timeline(container, items, groups, options);
 </script>
 
 </html>
\ No newline at end of file
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index d3f73764..376eacb7 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -27,6 +27,7 @@ Core.prototype._create = function (container) {
   this.dom = {};
 
   this.dom.container = container;
+  this.dom.container.style.position = 'relative';
 
   this.dom.root                 = document.createElement('div');
   this.dom.background           = document.createElement('div');
@@ -47,6 +48,7 @@ Core.prototype._create = function (container) {
   this.dom.shadowTopRight       = document.createElement('div');
   this.dom.shadowBottomRight    = document.createElement('div');
   this.dom.rollingModeBtn       = document.createElement('div');
+  this.dom.loadingScreen        = document.createElement('div');
 
   this.dom.root.className                 = 'vis-timeline';
   this.dom.background.className           = 'vis-panel vis-background';
@@ -67,6 +69,7 @@ Core.prototype._create = function (container) {
   this.dom.shadowTopRight.className       = 'vis-shadow vis-top';
   this.dom.shadowBottomRight.className    = 'vis-shadow vis-bottom';
   this.dom.rollingModeBtn.className       = 'vis-rolling-mode-btn';
+  this.dom.loadingScreen.className        = 'vis-loading-screen';
 
   this.dom.root.appendChild(this.dom.background);
   this.dom.root.appendChild(this.dom.backgroundVertical);
@@ -87,7 +90,7 @@ Core.prototype._create = function (container) {
   this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
   this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
   this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
-
+  
   // size properties of each of the panels
   this.props = {
     root: {},
@@ -333,6 +336,7 @@ Core.prototype._create = function (container) {
   // attach the root panel to the provided container
   if (!container) throw new Error('No container provided');
   container.appendChild(this.dom.root);
+  container.appendChild(this.dom.loadingScreen);
 };
 
 /**
diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index 60974393..184c4891 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -78,6 +78,26 @@ function Timeline (container, items, groups, options) {
 
   this.options.rollingMode = options && options.rollingMode;
   this.options.onInitialDrawComplete = options && options.onInitialDrawComplete;
+  this.options.loadingScreenTemplate = options && options.loadingScreenTemplate;
+
+  // Prepare loading screen
+  var loadingScreenFragment = document.createElement('div');
+  if (this.options.loadingScreenTemplate) {
+    var templateFunction = this.options.loadingScreenTemplate.bind(this);
+    var loadingScreen = templateFunction(this.dom.loadingScreen);
+    if ((loadingScreen instanceof Object) && !(loadingScreen instanceof Element)) {
+      templateFunction(loadingScreenFragment)
+    } else {
+      if (loadingScreen instanceof Element) {
+        loadingScreenFragment.innerHTML = '';
+        loadingScreenFragment.appendChild(loadingScreen);
+      }
+      else if (loadingScreen != undefined) {
+        loadingScreenFragment.innerHTML = loadingScreen;
+      }
+    }
+  }
+  this.dom.loadingScreen.appendChild(loadingScreenFragment);
 
   // all components listed here will be repainted automatically
   this.components = [];
@@ -183,6 +203,7 @@ function Timeline (container, items, groups, options) {
     if (!me.initialDrawDone && me.initialRangeChangeDone) {
       me.initialDrawDone = true;
       me.dom.root.style.visibility = 'visible';
+      me.dom.loadingScreen.parentNode.removeChild(me.dom.loadingScreen);
       if (me.options.onInitialDrawComplete) {
         setTimeout(() => {
           return me.options.onInitialDrawComplete();
@@ -438,7 +459,7 @@ Timeline.prototype.focus = function(id, options) {
         me._redraw();
       }
     };
-    
+
     // Enforces the final vertical scroll position
     var setFinalVerticalPosition = function() {
       var finalVerticalScroll = getItemVerticalScroll(me, item);
diff --git a/lib/timeline/component/css/timeline.css b/lib/timeline/component/css/timeline.css
index a45d467c..e8ad0e5f 100644
--- a/lib/timeline/component/css/timeline.css
+++ b/lib/timeline/component/css/timeline.css
@@ -2,10 +2,16 @@
 .vis-timeline {
   position: relative;
   border: 1px solid #bfbfbf;
-
   overflow: hidden;
   padding: 0;
   margin: 0;
-
   box-sizing: border-box;
 }
+
+.vis-loading-screen {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
\ No newline at end of file
diff --git a/lib/timeline/component/css/timeline.js b/lib/timeline/component/css/timeline.js
new file mode 100644
index 00000000..fd3d3bd5
--- /dev/null
+++ b/lib/timeline/component/css/timeline.js
@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  'vis-timeline': {
+    'position': 'relative',
+    'border': [{ 'unit': 'px', 'value': 1 }, { 'unit': 'string', 'value': 'solid' }, { 'unit': 'string', 'value': '#bfbfbf' }],
+    'overflow': 'hidden',
+    'padding': [{ 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }],
+    'margin': [{ 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }],
+    'boxSizing': 'border-box'
+  },
+  'vis-loading-screen': {
+    'width': [{ 'unit': '%H', 'value': 1 }],
+    'height': [{ 'unit': '%V', 'value': 1 }],
+    'position': 'absolute',
+    'top': [{ 'unit': 'px', 'value': 0 }],
+    'left': [{ 'unit': 'px', 'value': 0 }]
+  }
+});
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 820b6b3e..e13e6ae6 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -142,6 +142,7 @@ let allOptions = {
   snap: {'function': 'function', 'null': 'null'},
   start: {date, number, string, moment},
   template: {'function': 'function'},
+  loadingScreenTemplate: {'function': 'function'},
   groupTemplate: {'function': 'function'},
   visibleFrameTemplate: {string, 'function': 'function'},
   showTooltips: { 'boolean': bool},

From 197f36a6ff8747d5927e316420ebcc16a5ebd903 Mon Sep 17 00:00:00 2001
From: macleodbroad-wf <macleodbroad-wf@users.noreply.github.com>
Date: Fri, 20 Oct 2017 06:59:21 -0400
Subject: [PATCH 05/10] =?UTF-8?q?Adds=20code=20coverage=20report=20the=20o?=
 =?UTF-8?q?utput=20of=20`npm=20test`=20and=20adds=20detailed=20=E2=80=A6?=
 =?UTF-8?q?=20(#3575)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Adds code coverage report the output of `npm test` and adds detailed html code coverage report using the command `npm run-script test-cov`

* Switch over to using functions in lib/ rather than dist/, so that code coverage stats are complete.

* Import vis at the top level to keep ItemSet passing

* Remove requirement for dist/vis in TimelineItemSet
---
 package.json                 |  4 +++-
 test/DataSet.test.js         |  8 +++----
 test/DataView.test.js        |  7 +++---
 test/Graph3d.test.js         |  5 ++--
 test/Label.test.js           | 34 ++++++++++++++--------------
 test/Network.test.js         | 44 ++++++++++++++++++------------------
 test/PointItem.test.js       |  6 ++---
 test/TestSupport.js          |  9 ++++----
 test/TimeStep.test.js        |  8 +++----
 test/TimelineItemSet.test.js | 31 +++++++++++++------------
 test/TimelineRange.test.js   |  8 +++----
 11 files changed, 80 insertions(+), 84 deletions(-)

diff --git a/package.json b/package.json
index dd09a2ed..be72b0af 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
   ],
   "main": "./dist/vis.js",
   "scripts": {
-    "test": "mocha --compilers js:babel-core/register",
+    "test": "nyc mocha --compilers js:babel-core/register",
+    "test-cov": "nyc --reporter=html mocha --compilers js:babel-core/register",
     "build": "gulp",
     "lint": "gulp lint",
     "watch": "gulp watch",
@@ -63,6 +64,7 @@
     "merge-stream": "^1.0.1",
     "mocha": "^3.4.2",
     "mocha-jsdom": "^1.1.0",
+    "nyc": "^11.2.1",
     "rimraf": "^2.6.1",
     "test-console": "^1.0.0",
     "uglify-js": "^2.8.29",
diff --git a/test/DataSet.test.js b/test/DataSet.test.js
index cd7e2ed0..2d88c054 100644
--- a/test/DataSet.test.js
+++ b/test/DataSet.test.js
@@ -1,8 +1,8 @@
 var assert = require('assert');
-var vis = require('../dist/vis');
-var moment = vis.moment;
-var DataSet = vis.DataSet;
-var Queue = vis.Queue;
+
+var DataSet = require('../lib/DataSet');
+var Queue = require('../lib/Queue');
+
 // TODO: test the source code immediately, but this is ES6
 
 var now = new Date();
diff --git a/test/DataView.test.js b/test/DataView.test.js
index 11d481c3..d6d558fa 100644
--- a/test/DataView.test.js
+++ b/test/DataView.test.js
@@ -1,8 +1,7 @@
 var assert = require('assert');
-var vis = require('../dist/vis');
-var moment = vis.moment;
-var DataSet = vis.DataSet;
-var DataView = vis.DataView;
+
+var DataSet = require('../lib/DataSet');
+var DataView = require('../lib/DataView');
 // TODO: test the source code immediately, but this is ES6
 
 // TODO: improve DataView tests, split up in one test per function
diff --git a/test/Graph3d.test.js b/test/Graph3d.test.js
index f14136cc..c9bf2c5a 100644
--- a/test/Graph3d.test.js
+++ b/test/Graph3d.test.js
@@ -1,6 +1,5 @@
 var assert = require('assert');
-var vis = require('../dist/vis');
-var Graph3d = vis.Graph3d;
+var Graph3d = require('../lib/graph3d/Graph3d');
 var jsdom_global = require('jsdom-global');
 var canvasMockify = require('./canvas-mock');
 var stdout = require('test-console').stdout;
@@ -56,7 +55,7 @@ describe('Graph3d', function () {
       style: 'dot'
     };
 
-    var graph = new vis.Graph3d(this.container, data, options);
+    var graph = new Graph3d(this.container, data, options);
     assert.equal(graph.style, DOT_STYLE, "Style not set to expected 'dot'");
 
     graph.setOptions({ style: 'bar'});  // Call should just work, no exception thrown
diff --git a/test/Label.test.js b/test/Label.test.js
index 7a7421f0..f2dbe90a 100644
--- a/test/Label.test.js
+++ b/test/Label.test.js
@@ -8,14 +8,14 @@
  *   Currently, only "size[px] name color" is valid, always 3 items with this exact spacing.
  *   All other combinations should either be rejected as error or handled gracefully.
  */
-var assert = require('assert')
+var assert = require('assert');
 var Label = require('../lib/network/modules/components/shared/Label').default;
 var NodesHandler = require('../lib/network/modules/NodesHandler').default;
 var util = require('../lib/util');
 var jsdom_global = require('jsdom-global');
 var canvasMockify = require('./canvas-mock');
-var vis = require('../dist/vis');
-var Network = vis.network;
+var DataSet = require('../lib/DataSet');
+var Network = require('../lib/network/Network');
 
 
 /**************************************************************
@@ -477,7 +477,7 @@ describe('Node Labels', function() {
     // create a network
     var container = document.getElementById('mynetwork');
     var data = {
-        nodes: new vis.DataSet(dataNodes),
+        nodes: new DataSet(dataNodes),
         edges: []
     };
   
@@ -501,7 +501,7 @@ describe('Node Labels', function() {
       util.deepExtend(options, newOptions);
     }
   
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
     return [network, data, options];
   }
 
@@ -678,8 +678,8 @@ describe('Edge Labels', function() {
     // create a network
     var container = document.getElementById('mynetwork');
     var data = {
-        nodes: new vis.DataSet(dataNodes),
-        edges: new vis.DataSet(dataEdges),
+        nodes: new DataSet(dataNodes),
+        edges: new DataSet(dataEdges),
     };
   
     var options = {
@@ -694,7 +694,7 @@ describe('Edge Labels', function() {
       util.deepExtend(options, newOptions);
     }
   
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
     return [network, data, options];
   }
 
@@ -823,8 +823,8 @@ describe('Shorthand Font Options', function() {
     // create a network
     var container = document.getElementById('mynetwork');
     var data = {
-        nodes: new vis.DataSet(dataNodes),
-        edges: new vis.DataSet(dataEdges),
+        nodes: new DataSet(dataNodes),
+        edges: new DataSet(dataEdges),
     };
 
     var options = {
@@ -847,7 +847,7 @@ describe('Shorthand Font Options', function() {
       }
     };
   
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
     return [network, data];
   }
 
@@ -1114,7 +1114,7 @@ describe('Shorthand Font Options', function() {
     // create a network
     var container = document.getElementById('mynetwork');
     var data = {
-        nodes: new vis.DataSet(dataNodes),
+        nodes: new DataSet(dataNodes),
         edges: []
     };
   
@@ -1145,7 +1145,7 @@ describe('Shorthand Font Options', function() {
       },
     };
   
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
 
     assert.equal(modBold(1).color, 'red');  // Group value
     assert(fontOption(1).multi);            // Group value
@@ -1487,7 +1487,7 @@ describe('Shorthand Font Options', function() {
         enabled: false
       }
     };
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
 
     var nodes_expected = [
       { nodeId: 100, minWdt:  -1, maxWdt: 200, minHgt:  -1, valign: 'middle'},
@@ -1614,12 +1614,12 @@ describe('Shorthand Font Options', function() {
     // Kept in for regression testing.
     var container = document.getElementById('mynetwork');
     var data = {
-      nodes: new vis.DataSet(nodes),
-      edges: new vis.DataSet(edges)
+      nodes: new DataSet(nodes),
+      edges: new DataSet(edges)
     };
 
     var options = {};
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
 
     done();
   });
diff --git a/test/Network.test.js b/test/Network.test.js
index b9f191c4..425621e6 100644
--- a/test/Network.test.js
+++ b/test/Network.test.js
@@ -12,8 +12,8 @@
  */
 var fs = require('fs');
 var assert = require('assert');
-var vis = require('../dist/vis');
-var Network = vis.network;
+var DataSet = require('../lib/DataSet');
+var Network = require('../lib/network/Network');
 var stdout = require('test-console').stdout;
 var Validator = require("./../lib/shared/Validator").default;
 var jsdom_global = require('jsdom-global');
@@ -78,7 +78,7 @@ function createSampleNetwork(options) {
   var NumInitialNodes = 8;
   var NumInitialEdges = 6;
 
-  var nodes = new vis.DataSet([
+  var nodes = new DataSet([
       {id: 1, label: '1'},
       {id: 2, label: '2'},
       {id: 3, label: '3'},
@@ -88,7 +88,7 @@ function createSampleNetwork(options) {
       {id: 13, label: '13'},
       {id: 14, label: '14'},
   ]);
-  var edges = new vis.DataSet([
+  var edges = new DataSet([
       {from: 1, to: 2},
       {from: 2, to: 3},
       {from: 3, to: 4},
@@ -117,7 +117,7 @@ function createSampleNetwork(options) {
 
   options = merge(defaultOptions, options);
 
-  var network = new vis.Network(container, data, options);
+  var network = new Network(container, data, options);
 
   assertNumNodes(network, NumInitialNodes);
   assertNumEdges(network, NumInitialEdges);
@@ -409,7 +409,7 @@ describe('Network', function () {
     var container = document.getElementById('mynetwork');
 
     for (var n = 0; n < awkwardData.length; ++n) {
-      var network = new vis.Network(container, awkwardData[n], {});  // Should not throw
+      var network = new Network(container, awkwardData[n], {});  // Should not throw
     }
   });
 
@@ -517,14 +517,14 @@ describe('Edge', function () {
    * Support routine for next unit test
    */
   function createDataforColorChange() {
-    var nodes = new vis.DataSet([
+    var nodes = new DataSet([
       {id: 1, label: 'Node 1' }, // group:'Group1'},
       {id: 2, label: 'Node 2', group:'Group2'},
       {id: 3, label: 'Node 3'},
     ]);
 
     // create an array with edges
-    var edges = new vis.DataSet([
+    var edges = new DataSet([
       {id: 1, from: 1, to: 2},
       {id: 2, from: 1, to: 3, color: { inherit: 'to'}},
       {id: 3, from: 3, to: 3, color: { color: '#00FF00'}},
@@ -556,7 +556,7 @@ describe('Edge', function () {
     };
 
     // Test passing options on init.
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
     var edges = network.body.edges;
     assert.equal(edges[1].options.color.inherit, 'to');   // new default
     assert.equal(edges[2].options.color.inherit, 'to');   // set in edge
@@ -574,7 +574,7 @@ describe('Edge', function () {
     assert.equal(edges[4].options.color.inherit, 'from');  // set in edge
 
     // Check no options
-    network = new vis.Network(container, data, {});
+    network = new Network(container, data, {});
     edges = network.body.edges;
     assert.equal(edges[1].options.color.inherit, 'from');  // default
     assert.equal(edges[2].options.color.inherit, 'to');    // set in edge
@@ -605,7 +605,7 @@ describe('Edge', function () {
     var data =  createDataforColorChange();
 
     // Check no options
-    var network = new vis.Network(container, data, {});
+    var network = new Network(container, data, {});
     var edges = network.body.edges;
     assert.equal(edges[1].options.color.inherit, 'from');  // default
     assert.equal(edges[2].options.color.inherit, 'to');    // set in edge
@@ -636,7 +636,7 @@ describe('Edge', function () {
     };
 
     // Test passing options on init.
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
     var edges = network.body.edges;
     assert.equal(edges[1].options.color.color, color);
     assert.equal(edges[1].options.color.inherit, false);  // Explicit color, so no inherit
@@ -655,7 +655,7 @@ describe('Edge', function () {
     assert.equal(edges[4].options.color.color, defaultColor);
 
     // Check no options
-    network = new vis.Network(container, data, {});
+    network = new Network(container, data, {});
     edges = network.body.edges;
     // At this point, color has not changed yet
     assert.equal(edges[1].options.color.color, defaultColor);
@@ -680,10 +680,10 @@ describe('Edge', function () {
   it('has reconnected edges', function () {
     var node1 = {id:1, label:"test1"};
     var node2 = {id:2, label:"test2"};
-    var nodes = new vis.DataSet([node1, node2]);
+    var nodes = new DataSet([node1, node2]);
   
     var edge = {id:1, from: 1, to:2};
-    var edges = new vis.DataSet([edge]);
+    var edges = new DataSet([edge]);
 
     var data = {
         nodes: nodes,
@@ -691,7 +691,7 @@ describe('Edge', function () {
     };    
 
     var container = document.getElementById('mynetwork');
-    var network = new vis.Network(container, data);
+    var network = new Network(container, data);
 
     //remove node causing edge to become disconnected
     nodes.remove(node2.id);
@@ -893,7 +893,7 @@ describe('Clustering', function () {
    */
   function createOutlierGraph() {
     // create an array with nodes
-    var nodes = new vis.DataSet([
+    var nodes = new DataSet([
       {id: 1, label: '1', group:'Group1'},
       {id: 2, label: '2', group:'Group2'},
       {id: 3, label: '3', group:'Group3'},
@@ -902,7 +902,7 @@ describe('Clustering', function () {
     ]);
 
     // create an array with edges
-    var edges = new vis.DataSet([
+    var edges = new DataSet([
       {from: 1, to: 3},
       {from: 1, to: 2},
       {from: 2, to: 4},
@@ -924,7 +924,7 @@ describe('Clustering', function () {
       }
     };
 
-    var network = new vis.Network (container, data, options);
+    var network = new Network (container, data, options);
 
     return network;
   }
@@ -1320,8 +1320,8 @@ describe('runs example ', function () {
 
     // create a network
     var data = {
-      nodes: new vis.DataSet(nodes),
-      edges: new vis.DataSet(edges)
+      nodes: new DataSet(nodes),
+      edges: new DataSet(edges)
     };
 
     if (noPhysics) {
@@ -1330,7 +1330,7 @@ describe('runs example ', function () {
       options.physics = false;
     }
 
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
     return network;
   };
 
diff --git a/test/PointItem.test.js b/test/PointItem.test.js
index 463c3f9a..9d2c333d 100644
--- a/test/PointItem.test.js
+++ b/test/PointItem.test.js
@@ -1,10 +1,8 @@
 var assert = require('assert');
-var vis = require('../dist/vis');
 var jsdom = require('mocha-jsdom');
-var moment = vis.moment;
-var timeline = vis.timeline;
+var moment = require('../lib/module/moment');
 var PointItem = require("../lib/timeline/component/item/PointItem");
-var Range = timeline.Range;
+var Range = require('../lib/timeline/Range');
 var TestSupport = require('./TestSupport');
 
 describe('Timeline PointItem', function () {
diff --git a/test/TestSupport.js b/test/TestSupport.js
index 1de998b6..06381cdf 100644
--- a/test/TestSupport.js
+++ b/test/TestSupport.js
@@ -1,5 +1,4 @@
-var vis = require('../dist/vis');
-var DataSet = vis.DataSet;
+var DataSet = require('../lib/DataSet');
 
 module.exports = {
   buildMockItemSet: function() {
@@ -35,8 +34,8 @@ module.exports = {
       },
       hiddenDates: [],
       util: {}
-    }
-    body.dom.rollingModeBtn = document.createElement('div')
+    };
+    body.dom.rollingModeBtn = document.createElement('div');
     return body
   }
-}
+};
diff --git a/test/TimeStep.test.js b/test/TimeStep.test.js
index de5210bb..7f3aa5a2 100644
--- a/test/TimeStep.test.js
+++ b/test/TimeStep.test.js
@@ -1,9 +1,7 @@
 var assert = require('assert');
-var vis = require('../dist/vis');
-var jsdom = require('mocha-jsdom')
-var moment = vis.moment;
-var timeline = vis.timeline;
-var TimeStep = timeline.TimeStep;
+var jsdom = require('mocha-jsdom');
+var moment = require('../lib/module/moment');
+var TimeStep = require('../lib/timeline/TimeStep');
 var TestSupport = require('./TestSupport');
 
 describe('TimeStep', function () {
diff --git a/test/TimelineItemSet.test.js b/test/TimelineItemSet.test.js
index 8892c49e..baf597ed 100644
--- a/test/TimelineItemSet.test.js
+++ b/test/TimelineItemSet.test.js
@@ -1,15 +1,19 @@
 var assert = require('assert');
+var DataSet = require('../lib/DataSet');
+var DateUtil = require('../lib/timeline/DateUtil');
+var Range = require('../lib/timeline/Range');
+var ItemSet = require('../lib/timeline/component/ItemSet');
+
 
 describe('Timeline ItemSet', function () {
   before(function () {
-    delete require.cache[require.resolve('../dist/vis')]
     this.jsdom = require('jsdom-global')();
-    this.vis = require('../dist/vis');
-    var TestSupport = require('./TestSupport');
-    var rangeBody = TestSupport.buildSimpleTimelineRangeBody();
-    this.testrange = new this.vis.timeline.Range(rangeBody);
+    this.TestSupport = require('./TestSupport');
+
+    var rangeBody = this.TestSupport.buildSimpleTimelineRangeBody();
+    this.testrange = new Range(rangeBody);
     this.testrange.setRange(new Date(2017, 1, 26, 13, 26, 3, 320), new Date(2017, 1, 26, 13, 26, 4, 320), false, false, null);
-    this.testitems =  new this.vis.DataSet({
+    this.testitems =  new DataSet({
       type: {
         start: 'Date',
         end: 'Date'
@@ -18,11 +22,11 @@ describe('Timeline ItemSet', function () {
     // add single items with different date types
     this.testitems.add({id: 1, content: 'Item 1', start: new Date(2017, 1, 26, 13, 26, 3, 600), type: 'point'});
     this.testitems.add({id: 2, content: 'Item 2', start: new Date(2017, 1, 26, 13, 26, 5, 600), type: 'point'});
-  })
+  });
 
   after(function () {
     this.jsdom();
-  })
+  });
 
   var getBasicBody = function() {
     var body = {
@@ -56,20 +60,20 @@ describe('Timeline ItemSet', function () {
       },
       util: {
       }
-    }
+    };
     return body;
   };
 
   it('should initialise with minimal data', function () {
     var body = getBasicBody();
-    var itemset = new this.vis.timeline.components.ItemSet(body, {});
+    var itemset = new ItemSet(body, {});
     assert(itemset);
   });
 
   it('should redraw() and have the right classNames', function () {
     var body = getBasicBody();
     body.range = this.testrange;
-    var itemset = new this.vis.timeline.components.ItemSet(body, {});
+    var itemset = new ItemSet(body, {});
     itemset.redraw();
     assert.equal(itemset.dom.frame.className, 'vis-itemset');
     assert.equal(itemset.dom.background.className, 'vis-background');
@@ -80,14 +84,13 @@ describe('Timeline ItemSet', function () {
 
   it('should start with no items', function () {
     var body = getBasicBody();
-    var itemset = new this.vis.timeline.components.ItemSet(body, {});
+    var itemset = new ItemSet(body, {});
     assert.equal(itemset.getItems(), null);
   });
 
   it('should store items correctly', function() {
     var body = getBasicBody();
     body.range = this.testrange;
-    var DateUtil = this.vis.timeline.DateUtil;
     body.util.toScreen = function(time) {
       return DateUtil.toScreen({
         body: {
@@ -100,7 +103,7 @@ describe('Timeline ItemSet', function () {
         }
       }, time, 900)
     };
-    var itemset = new this.vis.timeline.components.ItemSet(body, {});
+    var itemset = new ItemSet(body, {});
     itemset.setItems(this.testitems);
     assert.equal(itemset.getItems().length, 2);
     assert.deepEqual(itemset.getItems(), this.testitems);
diff --git a/test/TimelineRange.test.js b/test/TimelineRange.test.js
index f73d84df..933e5f99 100644
--- a/test/TimelineRange.test.js
+++ b/test/TimelineRange.test.js
@@ -1,9 +1,7 @@
 var assert = require('assert');
-var vis = require('../dist/vis');
-var jsdom = require('mocha-jsdom')
-var moment = vis.moment;
-var timeline = vis.timeline;
-var Range = timeline.Range;
+var jsdom = require('mocha-jsdom');
+var moment = require('../lib/module/moment');
+var Range = require('../lib/timeline/Range');
 var TestSupport = require('./TestSupport');
 
 describe('Timeline Range', function () {

From bc446e0e9a786ce269b138f81fddcb25fcd6eb3c Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Fri, 20 Oct 2017 12:59:41 +0200
Subject: [PATCH 06/10] Network: Cleanup @typedef's in jsdoc comments (#3569)

* Interim save cleanup typedefs

* Completed transferral of *the* big typedef

* Transferred all typedefs to typedefs.js
---
 lib/network/modules/components/Edge.js        |  4 +-
 .../components/edges/BezierEdgeDynamic.js     |  2 +-
 .../components/edges/BezierEdgeStatic.js      |  2 +-
 .../components/edges/CubicBezierEdge.js       |  2 +-
 .../modules/components/edges/StraightEdge.js  |  4 +-
 .../modules/components/edges/util/EdgeBase.js |  8 +-
 .../components/edges/util/EndPoints.js        | 22 -----
 .../modules/components/nodes/shapes/Box.js    |  2 +-
 .../modules/components/nodes/shapes/Circle.js |  2 +-
 .../components/nodes/shapes/CircularImage.js  |  2 +-
 .../components/nodes/shapes/Database.js       |  2 +-
 .../components/nodes/shapes/Diamond.js        |  2 +-
 .../modules/components/nodes/shapes/Dot.js    |  2 +-
 .../components/nodes/shapes/Ellipse.js        |  2 +-
 .../components/nodes/shapes/Hexagon.js        |  4 +-
 .../modules/components/nodes/shapes/Icon.js   |  4 +-
 .../modules/components/nodes/shapes/Image.js  |  2 +-
 .../modules/components/nodes/shapes/Square.js |  2 +-
 .../modules/components/nodes/shapes/Star.js   |  2 +-
 .../modules/components/nodes/shapes/Text.js   |  2 +-
 .../components/nodes/shapes/Triangle.js       |  2 +-
 .../components/nodes/shapes/TriangleDown.js   |  2 +-
 .../components/nodes/util/CircleImageBase.js  |  4 +-
 .../modules/components/nodes/util/NodeBase.js | 14 +--
 .../components/nodes/util/ShapeBase.js        |  2 +-
 .../components/shared/ComponentUtil.js        | 20 ----
 .../modules/components/shared/Label.js        | 27 +-----
 lib/network/typedefs.js                       | 97 +++++++++++++++++++
 28 files changed, 136 insertions(+), 106 deletions(-)
 create mode 100644 lib/network/typedefs.js

diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js
index 653eb9f6..7cc0f8f2 100644
--- a/lib/network/modules/components/Edge.js
+++ b/lib/network/modules/components/Edge.js
@@ -241,7 +241,7 @@ class Edge {
 
   /**
    *
-   * @returns {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}}
+   * @returns {ArrowOptions}
    */
   getFormattingValues() {
     let toArrow = (this.options.arrows.to === true) || (this.options.arrows.to.enabled === true)
@@ -545,7 +545,7 @@ class Edge {
    *
    * @param {CanvasRenderingContext2D} ctx
    * @param {Object} arrowData
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   drawArrows(ctx, arrowData, values) {
     if (values.fromArrow) {
diff --git a/lib/network/modules/components/edges/BezierEdgeDynamic.js b/lib/network/modules/components/edges/BezierEdgeDynamic.js
index 02640e8d..4a330094 100644
--- a/lib/network/modules/components/edges/BezierEdgeDynamic.js
+++ b/lib/network/modules/components/edges/BezierEdgeDynamic.js
@@ -122,7 +122,7 @@ class BezierEdgeDynamic extends BezierEdgeBase {
   /**
    * Draw a line between two nodes
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @param {Node} viaNode
    * @private
    */
diff --git a/lib/network/modules/components/edges/BezierEdgeStatic.js b/lib/network/modules/components/edges/BezierEdgeStatic.js
index 39cb9939..4f219c11 100644
--- a/lib/network/modules/components/edges/BezierEdgeStatic.js
+++ b/lib/network/modules/components/edges/BezierEdgeStatic.js
@@ -19,7 +19,7 @@ class BezierEdgeStatic extends BezierEdgeBase {
   /**
    * Draw a line between two nodes
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @param {Node} viaNode
    * @private
    */
diff --git a/lib/network/modules/components/edges/CubicBezierEdge.js b/lib/network/modules/components/edges/CubicBezierEdge.js
index 1ac243f5..ee362128 100644
--- a/lib/network/modules/components/edges/CubicBezierEdge.js
+++ b/lib/network/modules/components/edges/CubicBezierEdge.js
@@ -19,7 +19,7 @@ class CubicBezierEdge extends CubicBezierEdgeBase {
   /**
    * Draw a line between two nodes
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @param {Array.<Node>} viaNodes
    * @private
    */
diff --git a/lib/network/modules/components/edges/StraightEdge.js b/lib/network/modules/components/edges/StraightEdge.js
index 073a08ef..42368b3d 100644
--- a/lib/network/modules/components/edges/StraightEdge.js
+++ b/lib/network/modules/components/edges/StraightEdge.js
@@ -18,7 +18,7 @@ class StraightEdge extends EdgeBase {
   /**
    * Draw a line between two nodes
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @private
    */
   _line(ctx, values) {
@@ -100,4 +100,4 @@ class StraightEdge extends EdgeBase {
 
 }
 
-export default StraightEdge;
\ No newline at end of file
+export default StraightEdge;
diff --git a/lib/network/modules/components/edges/util/EdgeBase.js b/lib/network/modules/components/edges/util/EdgeBase.js
index 59b1e67a..8987c740 100644
--- a/lib/network/modules/components/edges/util/EdgeBase.js
+++ b/lib/network/modules/components/edges/util/EdgeBase.js
@@ -322,7 +322,7 @@ class EdgeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @param {boolean} selected - Unused
    * @param {boolean} hover - Unused
    * @returns {string}
@@ -544,7 +544,7 @@ class EdgeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @param {boolean} selected
    * @param {boolean} hover
    * @param {Object} arrowData
@@ -568,7 +568,7 @@ class EdgeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   enableShadow(ctx, values) {
     if (values.shadow === true) {
@@ -582,7 +582,7 @@ class EdgeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   disableShadow(ctx, values) {
     if (values.shadow === true) {
diff --git a/lib/network/modules/components/edges/util/EndPoints.js b/lib/network/modules/components/edges/util/EndPoints.js
index 291d4067..9a7261d5 100644
--- a/lib/network/modules/components/edges/util/EndPoints.js
+++ b/lib/network/modules/components/edges/util/EndPoints.js
@@ -25,28 +25,6 @@
  *   `edgeStyles/arrowTypes`.
  * ============================================================================= */
 
-// NOTE: When a typedef is isolated in a separate comment block, an actual description is generated for it,
-//       using the rest of the commenting in the code block. Usage of typedef in other comments then
-//       link to there. TIL.
-//
-//       Also noteworthy, all typedef's set up in this manner are collected in a single, global page 'global.html'.
-//       In other words, it doesn't matter *where* the typedef's are defined in the code.
-//
-//
-// TODO: add descriptive commenting to given typedef's
-
-/**
- * @typedef {{type:string, point:Point, angle:number, length:number}} ArrowData
- *
- * Object containing instantiation data for a given endpoint.
- */
-
-/**
- * @typedef {{x:number, y:number}} Point
- * 
- * A point in view-coordinates.
- */
-
 /**
  * Common methods for endpoints
  *
diff --git a/lib/network/modules/components/nodes/shapes/Box.js b/lib/network/modules/components/nodes/shapes/Box.js
index 981fc93d..40d4375c 100644
--- a/lib/network/modules/components/nodes/shapes/Box.js
+++ b/lib/network/modules/components/nodes/shapes/Box.js
@@ -41,7 +41,7 @@ class Box extends NodeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this.resize(ctx, selected, hover);
diff --git a/lib/network/modules/components/nodes/shapes/Circle.js b/lib/network/modules/components/nodes/shapes/Circle.js
index 07c02174..643b57e4 100644
--- a/lib/network/modules/components/nodes/shapes/Circle.js
+++ b/lib/network/modules/components/nodes/shapes/Circle.js
@@ -45,7 +45,7 @@ class Circle extends CircleImageBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this.resize(ctx, selected, hover);
diff --git a/lib/network/modules/components/nodes/shapes/CircularImage.js b/lib/network/modules/components/nodes/shapes/CircularImage.js
index c30c6512..04b719ca 100644
--- a/lib/network/modules/components/nodes/shapes/CircularImage.js
+++ b/lib/network/modules/components/nodes/shapes/CircularImage.js
@@ -53,7 +53,7 @@ class CircularImage extends CircleImageBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this.switchImages(selected);
diff --git a/lib/network/modules/components/nodes/shapes/Database.js b/lib/network/modules/components/nodes/shapes/Database.js
index f9a17dab..b25bc3f3 100644
--- a/lib/network/modules/components/nodes/shapes/Database.js
+++ b/lib/network/modules/components/nodes/shapes/Database.js
@@ -42,7 +42,7 @@ class Database extends NodeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this.resize(ctx, selected, hover);
diff --git a/lib/network/modules/components/nodes/shapes/Diamond.js b/lib/network/modules/components/nodes/shapes/Diamond.js
index 8292e3bd..832afc70 100644
--- a/lib/network/modules/components/nodes/shapes/Diamond.js
+++ b/lib/network/modules/components/nodes/shapes/Diamond.js
@@ -24,7 +24,7 @@ class Diamond extends ShapeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this._drawShape(ctx, 'diamond', 4, x, y, selected, hover, values);
diff --git a/lib/network/modules/components/nodes/shapes/Dot.js b/lib/network/modules/components/nodes/shapes/Dot.js
index 9c4ac5ac..1cde7813 100644
--- a/lib/network/modules/components/nodes/shapes/Dot.js
+++ b/lib/network/modules/components/nodes/shapes/Dot.js
@@ -24,7 +24,7 @@ class Dot extends ShapeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this._drawShape(ctx, 'circle', 2, x, y, selected, hover, values);
diff --git a/lib/network/modules/components/nodes/shapes/Ellipse.js b/lib/network/modules/components/nodes/shapes/Ellipse.js
index b625ff68..feb934f7 100644
--- a/lib/network/modules/components/nodes/shapes/Ellipse.js
+++ b/lib/network/modules/components/nodes/shapes/Ellipse.js
@@ -40,7 +40,7 @@ class Ellipse extends NodeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this.resize(ctx, selected, hover);
diff --git a/lib/network/modules/components/nodes/shapes/Hexagon.js b/lib/network/modules/components/nodes/shapes/Hexagon.js
index 6f4618ff..e7359f4f 100644
--- a/lib/network/modules/components/nodes/shapes/Hexagon.js
+++ b/lib/network/modules/components/nodes/shapes/Hexagon.js
@@ -24,7 +24,7 @@ class Hexagon extends ShapeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this._drawShape(ctx, 'hexagon', 4, x, y, selected, hover, values);
@@ -41,4 +41,4 @@ class Hexagon extends ShapeBase {
   }
 }
 
-export default Hexagon;
\ No newline at end of file
+export default Hexagon;
diff --git a/lib/network/modules/components/nodes/shapes/Icon.js b/lib/network/modules/components/nodes/shapes/Icon.js
index e2a170df..ae74817a 100644
--- a/lib/network/modules/components/nodes/shapes/Icon.js
+++ b/lib/network/modules/components/nodes/shapes/Icon.js
@@ -43,7 +43,7 @@ class Icon extends NodeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this.resize(ctx, selected, hover);
@@ -88,7 +88,7 @@ class Icon extends NodeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover - Unused
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   _icon(ctx, x, y, selected, hover, values) {
     let iconSize = Number(this.options.icon.size);
diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js
index 5bb5607c..1aa2a958 100644
--- a/lib/network/modules/components/nodes/shapes/Image.js
+++ b/lib/network/modules/components/nodes/shapes/Image.js
@@ -52,7 +52,7 @@ class Image extends CircleImageBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this.switchImages(selected);
diff --git a/lib/network/modules/components/nodes/shapes/Square.js b/lib/network/modules/components/nodes/shapes/Square.js
index c7d52c83..b61b7e5b 100644
--- a/lib/network/modules/components/nodes/shapes/Square.js
+++ b/lib/network/modules/components/nodes/shapes/Square.js
@@ -24,7 +24,7 @@ class Square extends ShapeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this._drawShape(ctx, 'square', 2, x, y, selected, hover, values);
diff --git a/lib/network/modules/components/nodes/shapes/Star.js b/lib/network/modules/components/nodes/shapes/Star.js
index 007f9330..d9bf4fb3 100644
--- a/lib/network/modules/components/nodes/shapes/Star.js
+++ b/lib/network/modules/components/nodes/shapes/Star.js
@@ -24,7 +24,7 @@ class Star extends ShapeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this._drawShape(ctx, 'star', 4, x, y, selected, hover, values);
diff --git a/lib/network/modules/components/nodes/shapes/Text.js b/lib/network/modules/components/nodes/shapes/Text.js
index 12c0f059..824bfcf3 100644
--- a/lib/network/modules/components/nodes/shapes/Text.js
+++ b/lib/network/modules/components/nodes/shapes/Text.js
@@ -40,7 +40,7 @@ class Text extends NodeBase {
    * @param {number} y height
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this.resize(ctx, selected, hover);
diff --git a/lib/network/modules/components/nodes/shapes/Triangle.js b/lib/network/modules/components/nodes/shapes/Triangle.js
index 4079ff5a..9c67b0da 100644
--- a/lib/network/modules/components/nodes/shapes/Triangle.js
+++ b/lib/network/modules/components/nodes/shapes/Triangle.js
@@ -24,7 +24,7 @@ class Triangle extends ShapeBase {
    * @param {number} y
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this._drawShape(ctx, 'triangle', 3, x, y, selected, hover, values);
diff --git a/lib/network/modules/components/nodes/shapes/TriangleDown.js b/lib/network/modules/components/nodes/shapes/TriangleDown.js
index 0f740d16..f87c3d07 100644
--- a/lib/network/modules/components/nodes/shapes/TriangleDown.js
+++ b/lib/network/modules/components/nodes/shapes/TriangleDown.js
@@ -24,7 +24,7 @@ class TriangleDown extends ShapeBase {
    * @param {number} y
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
     this._drawShape(ctx, 'triangleDown', 3, x, y, selected, hover, values);
diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js
index 5393cce5..b70c419a 100644
--- a/lib/network/modules/components/nodes/util/CircleImageBase.js
+++ b/lib/network/modules/components/nodes/util/CircleImageBase.js
@@ -124,7 +124,7 @@ class CircleImageBase extends NodeBase {
    * @param {CanvasRenderingContext2D} ctx
    * @param {number} x width
    * @param {number} y height
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @private
    */
   _drawRawCircle(ctx, x, y, values) {
@@ -136,7 +136,7 @@ class CircleImageBase extends NodeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @private
    */
   _drawImageAtPosition(ctx, values) {
diff --git a/lib/network/modules/components/nodes/util/NodeBase.js b/lib/network/modules/components/nodes/util/NodeBase.js
index e2348517..4217c4f3 100644
--- a/lib/network/modules/components/nodes/util/NodeBase.js
+++ b/lib/network/modules/components/nodes/util/NodeBase.js
@@ -70,7 +70,7 @@ class NodeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   enableShadow(ctx, values) {
     if (values.shadow) {
@@ -84,7 +84,7 @@ class NodeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   disableShadow(ctx, values) {
     if (values.shadow) {
@@ -98,7 +98,7 @@ class NodeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   enableBorderDashes(ctx, values) {
     if (values.borderDashes !== false) {
@@ -120,7 +120,7 @@ class NodeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   disableBorderDashes(ctx, values) {
     if (values.borderDashes !== false) {
@@ -157,7 +157,7 @@ class NodeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   initContextForDraw(ctx, values) {
     var borderWidth = values.borderWidth / this.body.view.scale;
@@ -170,7 +170,7 @@ class NodeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   performStroke(ctx, values) {
     var borderWidth = values.borderWidth / this.body.view.scale;
@@ -191,7 +191,7 @@ class NodeBase {
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    */
   performFill(ctx, values) {
     // draw shadow if enabled
diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js
index 087e1bfd..d1d79e9c 100644
--- a/lib/network/modules/components/nodes/util/ShapeBase.js
+++ b/lib/network/modules/components/nodes/util/ShapeBase.js
@@ -41,7 +41,7 @@ class ShapeBase extends NodeBase {
    * @param {number} y
    * @param {boolean} selected
    * @param {boolean} hover
-   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   * @param {ArrowOptions} values
    * @private
    */
   _drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover, values) {
diff --git a/lib/network/modules/components/shared/ComponentUtil.js b/lib/network/modules/components/shared/ComponentUtil.js
index 9555920f..532c8a2c 100644
--- a/lib/network/modules/components/shared/ComponentUtil.js
+++ b/lib/network/modules/components/shared/ComponentUtil.js
@@ -1,23 +1,3 @@
-/**
- * Definitions for param's in jsdoc.
- * These are more or less global within Network. Putting them here until I can figure out
- * where to really put them
- * 
- * @typedef {string|number} Id
- * @typedef {Id} NodeId
- * @typedef {Id} EdgeId
- * @typedef {Id} LabelId
- *
- * @typedef {{x: number, y: number}} point
- * @typedef {{left: number, top: number, width: number, height: number}} rect
- * @typedef {{x: number, y:number, angle: number}} rotationPoint
- *   - point to rotate around and the angle in radians to rotate. angle == 0 means no rotation
- * @typedef {{nodeId:NodeId}} nodeClickItem
- * @typedef {{nodeId:NodeId, labelId:LabelId}} nodeLabelClickItem
- * @typedef {{edgeId:EdgeId}} edgeClickItem
- * @typedef {{edgeId:EdgeId, labelId:LabelId}} edgeLabelClickItem
- */
-
 let util = require("../../../../util");
 
 /**
diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js
index 1e400212..bf769a04 100644
--- a/lib/network/modules/components/shared/Label.js
+++ b/lib/network/modules/components/shared/Label.js
@@ -2,32 +2,6 @@ let util = require('../../../../util');
 let ComponentUtil = require('./ComponentUtil').default;
 let LabelSplitter = require('./LabelSplitter').default;
 
-/**
- * @typedef {'bold'|'ital'|'boldital'|'mono'|'normal'} MultiFontStyle
- *
- * The allowed specifiers of multi-fonts.
- */
-
-/**
- * @typedef {{color:string, size:number, face:string, mod:string, vadjust:number}} MultiFontOptions
- *
- * The full set of options of a given multi-font.
- */
-
-/**
- * @typedef {Array.<object>} Pile
- *
- * Sequence of option objects, the order is significant.
- * The sequence is used to determine the value of a given option.
- *
- * Usage principles:
- *
- *  - All search is done in the sequence of the pile.
- *  - As soon as a value is found, the searching stops.
- *  - prototypes are totally ignored. The idea is to add option objects used as prototypes
- *    to the pile, in the correct order.
- */
-
 
 /**
  * List of special styles for multi-fonts
@@ -35,6 +9,7 @@ let LabelSplitter = require('./LabelSplitter').default;
  */
 const multiFontStyle = ['bold', 'ital', 'boldital', 'mono'];
 
+
 /**
  * A Label to be used for Nodes or Edges.
  */
diff --git a/lib/network/typedefs.js b/lib/network/typedefs.js
new file mode 100644
index 00000000..ed6a3712
--- /dev/null
+++ b/lib/network/typedefs.js
@@ -0,0 +1,97 @@
+// NOTE: When a typedef is isolated in a separate comment block, an actual description is generated for it,
+//       using the rest of the commenting in the code block. Usage of typedef in other comments then
+//       link to there. TIL.
+//
+//       Also noteworthy, all typedef's set up in this manner are collected in a single, global page 'global.html'.
+//       In other words, it doesn't matter *where* the typedef's are defined in the code.
+//
+//
+// TODO: add descriptive commenting to given typedef's
+
+/**
+ * @typedef {{type:string, point:Point, angle:number, length:number}} ArrowData
+ *
+ * Object containing instantiation data for a given endpoint.
+ */
+
+/**
+ * @typedef {{x:number, y:number}} Point
+ * 
+ * A point in view-coordinates.
+ */
+
+/**
+ * @typedef {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} ArrowOptions
+ */
+
+/**
+ * @typedef {string|number} Id
+ */
+
+/**
+ * @typedef {Id} NodeId
+ */
+
+/**
+ * @typedef {Id} EdgeId
+ */
+
+/**
+ * @typedef {Id} LabelId
+ */
+
+/**
+ * @typedef {{x: number, y: number}} point
+ */
+
+/**
+ * @typedef {{left: number, top: number, width: number, height: number}} rect
+ */
+
+/**
+ * @typedef {{x: number, y:number, angle: number}} rotationPoint
+ *
+ * point to rotate around and the angle in radians to rotate. angle == 0 means no rotation
+ */
+
+/**
+ * @typedef {{nodeId:NodeId}} nodeClickItem
+ */
+
+/**
+ * @typedef {{nodeId:NodeId, labelId:LabelId}} nodeLabelClickItem
+ */
+
+/**
+ * @typedef {{edgeId:EdgeId}} edgeClickItem
+ */
+
+/**
+ * @typedef {{edgeId:EdgeId, labelId:LabelId}} edgeLabelClickItem
+ */
+
+/**
+ * @typedef {'bold'|'ital'|'boldital'|'mono'|'normal'} MultiFontStyle
+ *
+ * The allowed specifiers of multi-fonts.
+ */
+
+/**
+ * @typedef {{color:string, size:number, face:string, mod:string, vadjust:number}} MultiFontOptions
+ *
+ * The full set of options of a given multi-font.
+ */
+
+/**
+ * @typedef {Array.<object>} Pile
+ *
+ * Sequence of option objects, the order is significant.
+ * The sequence is used to determine the value of a given option.
+ *
+ * Usage principles:
+ *
+ *  - All search is done in the sequence of the pile.
+ *  - As soon as a value is found, the searching stops.
+ *  - prototypes are totally ignored. The idea is to add option objects used as prototypes
+ *    to the pile, in the correct order.
+ */

From 7110549e74f6c137b460e3a1a13659911e661761 Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Fri, 20 Oct 2017 13:00:08 +0200
Subject: [PATCH 07/10] Network: DRY code in Label for parsing markup (#3565)

* Network: DRY code in Label for parsing markup

This gets rid of a major eyesore for me. The accumulator object was identical for HTML and  Markdown.

In addition, the parsing has been refactored. Common elements have been DRY'd and the logic of the parsing has been made more comprehensible.

* Added suggestion @mbroad wrt regexp precompile

* Fixed linting
---
 .../components/shared/LabelSplitter.js        | 536 +++++++++++-------
 test/Label.test.js                            |   1 +
 2 files changed, 323 insertions(+), 214 deletions(-)

diff --git a/lib/network/modules/components/shared/LabelSplitter.js b/lib/network/modules/components/shared/LabelSplitter.js
index 168d9966..75ad77b6 100644
--- a/lib/network/modules/components/shared/LabelSplitter.js
+++ b/lib/network/modules/components/shared/LabelSplitter.js
@@ -1,6 +1,274 @@
 let LabelAccumulator = require('./LabelAccumulator').default;
 let ComponentUtil = require('./ComponentUtil').default;
 
+// Hash of prepared regexp's for tags
+var tagPattern = {
+  // HTML
+  '<b>': /<b>/,
+  '<i>': /<i>/,
+  '<code>': /<code>/,
+  '</b>': /<\/b>/,
+  '</i>': /<\/i>/,
+  '</code>': /<\/code>/,
+  // Markdown
+  '*': /\*/,  // bold
+  '_': /\_/,   // ital
+  '`': /`/,   // mono
+  'afterBold': /[^\*]/,
+  'afterItal': /[^_]/,
+  'afterMono': /[^`]/,
+};
+
+
+/**
+ * Internal helper class for parsing the markup tags for HTML and Markdown.
+ *
+ * NOTE: Sequences of tabs and spaces are reduced to single space.
+ *       Scan usage of `this.spacing` within method
+ */
+class MarkupAccumulator {
+
+  /**
+   * Create an instance
+   *
+   * @param {string} text  text to parse for markup
+   */
+  constructor(text) {
+    this.text = text;
+    this.bold = false;
+    this.ital = false;
+    this.mono = false;
+    this.spacing = false;
+    this.position = 0;
+    this.buffer = "";
+    this.modStack = [];
+
+    this.blocks = [];
+  }
+
+
+  /**
+   * Return the mod label currently on the top of the stack
+   *
+   * @returns {string}  label of topmost mod 
+   * @private
+   */
+  mod() {
+    return (this.modStack.length === 0) ? 'normal' : this.modStack[0];
+  }
+
+
+  /**
+   * Return the mod label currently active
+   * 
+   * @returns {string}  label of active mod 
+   * @private
+   */
+  modName() {
+    if (this.modStack.length === 0)
+      return 'normal';
+    else if (this.modStack[0] === 'mono')
+      return 'mono';
+    else {
+      if (this.bold && this.ital) {
+        return 'boldital';
+      } else if (this.bold) {
+        return 'bold';
+      } else if (this.ital) {
+        return 'ital';
+      }
+    }
+  }
+
+
+  /**
+   * @private
+   */
+  emitBlock() {
+    if (this.spacing) {
+      this.add(" ");
+      this.spacing = false;
+    }
+    if (this.buffer.length > 0) {
+      this.blocks.push({ text: this.buffer, mod: this.modName() });
+      this.buffer = "";
+    }
+  }
+
+
+  /**
+   * Output text to buffer
+   *
+   * @param {string} text  text to add
+   * @private
+   */
+  add(text) {
+    if (text === " ") {
+      this.spacing = true;
+    }
+    if (this.spacing) {
+      this.buffer += " ";
+      this.spacing = false;
+    }
+    if (text != " ") {
+      this.buffer += text;
+    }
+  }
+
+
+  /**
+   * Handle parsing of whitespace
+   *
+   * @param {string} ch  the character to check
+   * @returns {boolean} true if the character was processed as whitespace, false otherwise
+   */
+  parseWS(ch) {
+    if (/[ \t]/.test(ch)) {
+      if (!this.mono) {
+        this.spacing = true;
+      } else {
+        this.add(ch);
+      }
+      return true;
+    }
+
+    return false;
+  }
+
+
+  /**
+   * @param {string} tagName  label for block type to set
+   * @private
+   */
+  setTag(tagName) {
+    this.emitBlock();
+    this[tagName] = true;
+    this.modStack.unshift(tagName);
+  }
+
+
+  /**
+   * @param {string} tagName  label for block type to unset
+   * @private
+   */
+  unsetTag(tagName) {
+    this.emitBlock();
+    this[tagName] = false;
+    this.modStack.shift();
+  }
+
+
+  /**
+   * @param {string} tagName label for block type we are currently processing
+   * @param {string|RegExp} tag string to match in text
+   * @returns {boolean} true if the tag was processed, false otherwise
+   */
+  parseStartTag(tagName, tag) {
+    // Note: if 'mono' passed as tagName, there is a double check here. This is OK
+    if (!this.mono && !this[tagName] && this.match(tag)) {
+      this.setTag(tagName);
+      return true;
+    }
+
+    return false;
+  }
+
+
+  /**
+   * @param {string|RegExp} tag
+   * @param {number} [advance=true] if set, advance current position in text
+   * @returns {boolean} true if match at given position, false otherwise
+   * @private
+   */
+  match(tag, advance = true) {
+    let [regExp, length] = this.prepareRegExp(tag);
+    let matched = regExp.test(this.text.substr(this.position, length));
+
+    if (matched && advance) {
+      this.position += length - 1;
+    }
+
+    return matched;
+  }
+
+
+  /**
+   * @param {string} tagName label for block type we are currently processing
+   * @param {string|RegExp} tag string to match in text
+   * @param {RegExp} [nextTag] regular expression to match for characters *following* the current tag 
+   * @returns {boolean} true if the tag was processed, false otherwise
+   */
+  parseEndTag(tagName, tag, nextTag) {
+    let checkTag = (this.mod() === tagName);
+    if (tagName === 'mono') {  // special handling for 'mono'
+     checkTag = checkTag && this.mono;
+    } else {
+     checkTag = checkTag && !this.mono;
+    }
+
+    if (checkTag && this.match(tag)) {
+      if (nextTag !== undefined) {
+        // Purpose of the following match is to prevent a direct unset/set of a given tag
+        // E.g. '*bold **still bold*' => '*bold still bold*'
+        if ((this.position === this.text.length-1) || this.match(nextTag, false)) {
+          this.unsetTag(tagName);
+        }
+      } else {
+        this.unsetTag(tagName);
+      }
+
+      return true;
+    }
+
+    return false;
+  }
+
+
+  /**
+   * @param {string|RegExp} tag  string to match in text
+   * @param {value} value  string to replace tag with, if found at current position
+   * @returns {boolean} true if the tag was processed, false otherwise
+   */
+  replace(tag, value) {
+    if (this.match(tag)) {
+      this.add(value);
+      this.position += length - 1;
+      return true;
+    }
+
+    return false;
+  }
+
+
+  /**
+   * Create a regular expression for the tag if it isn't already one.
+   *
+   * @param {string|RegExp} tag  string to match in text
+   * @returns {[RegExp, number]}  regular expression to use and length of input string to match
+   * @private
+   */
+  prepareRegExp(tag) {
+    let length;
+    let regExp;
+    if (tag instanceof RegExp) {
+      regExp = tag;
+      length = 1;   // ASSUMPTION: regexp only tests one character
+    } else {
+      // use prepared regexp if present
+      var prepared = tagPattern[tag];
+      if (prepared !== undefined) {
+        regExp = prepared;
+      } else {
+        regExp = new RegExp(tag);
+      }
+
+      length = tag.length;
+    }
+
+    return [regExp, length];
+  }
+}
+
 
 /**
  * Helper class for Label which explodes the label text into lines and blocks within lines
@@ -159,123 +427,43 @@ class LabelSplitter {
    * @returns {Array}
    */
   splitHtmlBlocks(text) {
-    let blocks = [];
-
-    // TODO: consolidate following + methods/closures with splitMarkdownBlocks()
-    // NOTE: sequences of tabs and spaces are reduced to single space; scan usage of `this.spacing` within method
-    let s = {
-      bold: false,
-      ital: false,
-      mono: false,
-      spacing: false,
-      position: 0,
-      buffer: "",
-      modStack: []
-    };
+    let s = new MarkupAccumulator(text);
 
-    s.mod = function() {
-      return (this.modStack.length === 0) ? 'normal' : this.modStack[0];
-    };
+    let parseEntities = (ch) => {
+      if (/&/.test(ch)) {
+        let parsed = s.replace(s.text, '&lt;', '<')
+          || s.replace(s.text, '&amp;', '&');
 
-    s.modName = function() {
-      if (this.modStack.length === 0)
-        return 'normal';
-      else if (this.modStack[0] === 'mono')
-        return 'mono';
-      else {
-        if (s.bold && s.ital) {
-          return 'boldital';
-        } else if (s.bold) {
-          return 'bold';
-        } else if (s.ital) {
-          return 'ital';
+        if (!parsed) {
+          s.add("&");
         }
-      }
-    };
 
-    s.emitBlock = function(override=false) {  // eslint-disable-line no-unused-vars
-      if (this.spacing) {
-        this.add(" ");
-        this.spacing = false;
-      }
-      if (this.buffer.length > 0) {
-        blocks.push({ text: this.buffer, mod: this.modName() });
-        this.buffer = "";
+        return true;
       }
-    };
 
-    s.add = function(text) {
-      if (text === " ") {
-        s.spacing = true;
-      }
-      if (s.spacing) {
-        this.buffer += " ";
-        this.spacing = false;
-      }
-      if (text != " ") {
-        this.buffer += text;
-      }
+      return false;
     };
 
-    while (s.position < text.length) {
-      let ch = text.charAt(s.position);
-      if (/[ \t]/.test(ch)) {
-        if (!s.mono) {
-          s.spacing = true;
-        } else {
-          s.add(ch);
-        }
-      } else if (/</.test(ch)) {
-        if (!s.mono && !s.bold && /<b>/.test(text.substr(s.position,3))) {
-          s.emitBlock();
-          s.bold = true;
-          s.modStack.unshift("bold");
-          s.position += 2;
-        } else if (!s.mono && !s.ital && /<i>/.test(text.substr(s.position,3))) {
-          s.emitBlock();
-          s.ital = true;
-          s.modStack.unshift("ital");
-          s.position += 2;
-        } else if (!s.mono && /<code>/.test(text.substr(s.position,6))) {
-          s.emitBlock();
-          s.mono = true;
-          s.modStack.unshift("mono");
-          s.position += 5;
-        } else if (!s.mono && (s.mod() === 'bold') && /<\/b>/.test(text.substr(s.position,4))) {
-          s.emitBlock();
-          s.bold = false;
-          s.modStack.shift();
-          s.position += 3;
-        } else if (!s.mono && (s.mod() === 'ital') && /<\/i>/.test(text.substr(s.position,4))) {
-          s.emitBlock();
-          s.ital = false;
-          s.modStack.shift();
-          s.position += 3;
-        } else if ((s.mod() === 'mono') && /<\/code>/.test(text.substr(s.position,7))) {
-          s.emitBlock();
-          s.mono = false;
-          s.modStack.shift();
-          s.position += 6;
-        } else {
-          s.add(ch);
-        }
-      } else if (/&/.test(ch)) {
-        if (/&lt;/.test(text.substr(s.position,4))) {
-          s.add("<");
-          s.position += 3;
-        } else if (/&amp;/.test(text.substr(s.position,5))) {
-          s.add("&");
-          s.position += 4;
-        } else {
-          s.add("&");
-        }
-      } else {
+    while (s.position < s.text.length) {
+      let ch = s.text.charAt(s.position);
+
+      let parsed = s.parseWS(ch)
+        || (/</.test(ch) && ( 
+             s.parseStartTag('bold', '<b>')
+          || s.parseStartTag('ital', '<i>')
+          || s.parseStartTag('mono', '<code>')
+          || s.parseEndTag('bold', '</b>')
+          || s.parseEndTag('ital', '</i>')
+          || s.parseEndTag('mono', '</code>')))
+        || parseEntities(ch);
+
+      if (!parsed) {
         s.add(ch);
       }
       s.position++
     }
     s.emitBlock();
-    return blocks;
+    return s.blocks;
   }
 
 
@@ -285,129 +473,49 @@ class LabelSplitter {
    * @returns {Array}
    */
   splitMarkdownBlocks(text) {
-    let blocks = [];
-
-    // TODO: consolidate following + methods/closures with splitHtmlBlocks()
-    // NOTE: sequences of tabs and spaces are reduced to single space; scan usage of `this.spacing` within method
-    let s = {
-      bold: false,
-      ital: false,
-      mono: false,
-      beginable: true,
-      spacing: false,
-      position: 0,
-      buffer: "",
-      modStack: []
-    };
-
-    s.mod = function() {
-      return (this.modStack.length === 0) ? 'normal' : this.modStack[0];
-    };
-
-    s.modName = function() {
-      if (this.modStack.length === 0)
-        return 'normal';
-      else if (this.modStack[0] === 'mono')
-        return 'mono';
-      else {
-        if (s.bold && s.ital) {
-          return 'boldital';
-        } else if (s.bold) {
-          return 'bold';
-        } else if (s.ital) {
-          return 'ital';
-        }
-      }
-    };
-
-    s.emitBlock = function(override=false) {  // eslint-disable-line no-unused-vars
-      if (this.spacing) {
-        this.add(" ");
-        this.spacing = false;
-      }
-      if (this.buffer.length > 0) {
-        blocks.push({ text: this.buffer, mod: this.modName() });
-        this.buffer = "";
-      }
-    };
+    let s = new MarkupAccumulator(text); 
+    let beginable = true;
 
-    s.add = function(text) {
-      if (text === " ") {
-        s.spacing = true;
-      }
-      if (s.spacing) {
-        this.buffer += " ";
-        this.spacing = false;
-      }
-      if (text != " ") {
-        this.buffer += text;
-      }
-    };
-
-    while (s.position < text.length) {
-      let ch = text.charAt(s.position);
-      if (/[ \t]/.test(ch)) {
-        if (!s.mono) {
-          s.spacing = true;
-        } else {
-          s.add(ch);
-        }
-        s.beginable = true
-      } else if (/\\/.test(ch)) {
-        if (s.position < text.length+1) {
+    let parseOverride = (ch) => {
+      if (/\\/.test(ch)) {
+        if (s.position < this.text.length + 1) {
           s.position++;
-          ch = text.charAt(s.position);
+          ch = this.text.charAt(s.position);
           if (/ \t/.test(ch)) {
             s.spacing = true;
           } else {
             s.add(ch);
-            s.beginable = false;
+            beginable = false;
           }
         }
-      } else if (!s.mono && !s.bold && (s.beginable || s.spacing) && /\*/.test(ch)) {
-        s.emitBlock();
-        s.bold = true;
-        s.modStack.unshift("bold");
-      } else if (!s.mono && !s.ital && (s.beginable || s.spacing) && /\_/.test(ch)) {
-        s.emitBlock();
-        s.ital = true;
-        s.modStack.unshift("ital");
-      } else if (!s.mono && (s.beginable || s.spacing) && /`/.test(ch)) {
-        s.emitBlock();
-        s.mono = true;
-        s.modStack.unshift("mono");
-      } else if (!s.mono && (s.mod() === "bold") && /\*/.test(ch)) {
-        if ((s.position === text.length-1) || /[.,_` \t\n]/.test(text.charAt(s.position+1))) {
-          s.emitBlock();
-          s.bold = false;
-          s.modStack.shift();
-        } else {
-          s.add(ch);
-        }
-      } else if (!s.mono && (s.mod() === "ital") && /\_/.test(ch)) {
-        if ((s.position === text.length-1) || /[.,*` \t\n]/.test(text.charAt(s.position+1))) {
-          s.emitBlock();
-          s.ital = false;
-          s.modStack.shift();
-        } else {
-          s.add(ch);
-        }
-      } else if (s.mono && (s.mod() === "mono") && /`/.test(ch)) {
-        if ((s.position === text.length-1) || (/[.,*_ \t\n]/.test(text.charAt(s.position+1)))) {
-          s.emitBlock();
-          s.mono = false;
-          s.modStack.shift();
-        } else {
-          s.add(ch);
-        }
-      } else {
+
+        return true
+      }
+
+      return false;
+    }
+
+    while (s.position < s.text.length) {
+      let ch = s.text.charAt(s.position);
+
+      let parsed = s.parseWS(ch)
+        || parseOverride(ch)
+        || ((beginable || s.spacing) && (
+             s.parseStartTag('bold', '*')
+          || s.parseStartTag('ital', '_')
+          || s.parseStartTag('mono', '`')))
+        || s.parseEndTag('bold', '*', 'afterBold')
+        || s.parseEndTag('ital', '_', 'afterItal')
+        || s.parseEndTag('mono', '`', 'afterMono');
+
+      if (!parsed) {
         s.add(ch);
-        s.beginable = false;
+        beginable = false;
       }
       s.position++
     }
     s.emitBlock();
-    return blocks;
+    return s.blocks;
   }
 
 
diff --git a/test/Label.test.js b/test/Label.test.js
index f2dbe90a..8f2cf52a 100644
--- a/test/Label.test.js
+++ b/test/Label.test.js
@@ -2,6 +2,7 @@
  * TODO - add tests for:
  * ====
  *
+ * - html entities
  * - html unclosed or unopened tags
  * - html tag combinations with no font defined (e.g. bold within mono) 
  * - Unit tests for bad font shorthands.

From 0a6f25737d4f2962d262a1f03c0f84a200eb5d46 Mon Sep 17 00:00:00 2001
From: Ivo Silva <knokit@gmail.com>
Date: Fri, 20 Oct 2017 13:01:05 +0200
Subject: [PATCH 08/10] Week scale - enhance and add to auto-scaling (#3549)

* Move majorLables to 1st week in the month, for 'week' scale

* next() always adds 1 week to current date
* show 1st week in the month as majorLabel

* Add 'week' to auto-scale

* Update week scale example

* Revert "Move majorLables to 1st week in the month, for 'week' scale"

This reverts commit 52df3c3ac54c52abe9386d376924823ac79a6ce0.

* Correct value of week's minimumStep
---
 examples/timeline/styling/weekStyling.html | 29 +++++++++++++++++++---
 lib/timeline/TimeStep.js                   |  4 +--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/examples/timeline/styling/weekStyling.html b/examples/timeline/styling/weekStyling.html
index 9a3a919e..53663ac0 100644
--- a/examples/timeline/styling/weekStyling.html
+++ b/examples/timeline/styling/weekStyling.html
@@ -26,7 +26,21 @@
     of moment.js including locales.</p>
 <p>To set a locale for the timeline, specify the option
     <code>{locale: STRING}</code>.</p>
-<p>To set the scale to use week numbers, use for example <code>{scale: 'week', step: 1}</code>.</p>
+<p>
+  To set the scale to use week numbers, use the following options:
+  <code>
+    {
+      timeAxis: {
+        scale: 'week',
+        step: 1
+      },
+      format: {
+        minorLabels: {week: 'w'}
+      }
+    }
+  </code>
+</p>
+
 <p>The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js
     objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week
     numbers will be calculated according to the US week calendar numbering scheme.</p>
@@ -93,7 +107,16 @@
     }
 
     // Configuration for the Timeline
-    var options = {timeAxis: {scale: 'week', step: 1}, locale: 'de'};
+    var options = {
+      locale: 'de',
+      timeAxis: {
+        scale: 'week',
+        step: 1
+      },
+      format: {
+        minorLabels: {week: 'w'}
+      }
+    };
 
     // Create a Timeline
     var timeline = new vis.Timeline(container, items, groups, options);
@@ -108,4 +131,4 @@
     select.onchange();
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js
index f72fd1c0..1b3c1111 100644
--- a/lib/timeline/TimeStep.js
+++ b/lib/timeline/TimeStep.js
@@ -73,7 +73,7 @@ TimeStep.FORMAT = {
     hour:       'HH:mm',
     weekday:    'ddd D',
     day:        'D',
-    week:       'w',
+    week:       'D',
     month:      'MMM',
     year:       'YYYY'
   },
@@ -340,7 +340,7 @@ TimeStep.prototype.setMinimumStep = function(minimumStep) {
   if (stepYear > minimumStep)             {this.scale = 'year';        this.step = 1;}
   if (stepMonth*3 > minimumStep)          {this.scale = 'month';       this.step = 3;}
   if (stepMonth > minimumStep)            {this.scale = 'month';       this.step = 1;}
-  if (stepDay*5 > minimumStep)            {this.scale = 'day';         this.step = 5;}
+  if (stepDay*7 > minimumStep)            {this.scale = 'week';        this.step = 1;}
   if (stepDay*2 > minimumStep)            {this.scale = 'day';         this.step = 2;}
   if (stepDay > minimumStep)              {this.scale = 'day';         this.step = 1;}
   if (stepDay/2 > minimumStep)            {this.scale = 'weekday';     this.step = 1;}

From 24d61cb2284b77f9671b9a111ff5d88e385d80fc Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Fri, 20 Oct 2017 13:01:37 +0200
Subject: [PATCH 09/10] Add template for document generation with 'jsdoc'.
 (#3497)

* Add template for document generation with 'jsdoc'.

In essence, it defines the subdirectory `docs` as a `jsdoc` template. Benefits:

- allows the usage of partials, in order to DRY common parts of the html files.
- makes available the jsdoc-comments, for addition into the documentation.
- enables extraction of data from the source code. For example, the list of edge endpoints `['arrow', 'bar', 'circle']` can now be extracted from the source and inserted into the documentation on generation.

In this initial version, the only file that has been changed is `docs/data/dataset.html`.
In here, partials have been added to illustrate how common page elements can be DRY'd.

The template has been set up in such a way, that resource files will be copied and that html files can pass through unchanged if no special template tags (`<?js...?>`) are used. This allows for a gradual transition of the html files to templates.

**Usage:**  `gulp docs`

- The result files are placed in subdirectory `gen/docs/`.

**NOTE:** The release procedure will have to be adjusted by adding this gulp command.
The docs-files will then have to be taken from `gen/docs`.

* Edits to docs/README

* Adjusted layout of README.md

* Further edits to README.md

* Removed pre tags again in  README.md - don't work in code block

* Linted the gulpfile

* Added proof of concept for docs generation from source
---
 .gitignore               |   1 +
 docs/README.md           | 231 +++++++++++++++++++++++++++++++++++++++
 docs/data/dataset.html   |  87 +--------------
 docs/network/index.html  |  18 +++
 docs/publish.js          | 118 ++++++++++++++++++++
 docs/tmpl/html-head.tmpl |  40 +++++++
 docs/tmpl/navbar.tmpl    |  49 +++++++++
 gulpfile.js              |  37 ++++++-
 jsdoc.json               |   3 +
 lib/network/Network.js   |  20 ++++
 package.json             |   1 +
 11 files changed, 523 insertions(+), 82 deletions(-)
 create mode 100644 docs/README.md
 create mode 100644 docs/publish.js
 create mode 100644 docs/tmpl/html-head.tmpl
 create mode 100644 docs/tmpl/navbar.tmpl
 create mode 100644 jsdoc.json

diff --git a/.gitignore b/.gitignore
index d9a5e809..b56f5ddd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ npm-debug.log
 # temporary files
 .*.sw[op]
 .commits.tmp
+gen/
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 00000000..d64a0332
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,231 @@
+# Command line usage example
+
+```
+jsdoc -c jsdoc.json -r -t docs -d gen/docs lib
+```
+
+- `-c`: use this config file for `jsdoc`
+- `-r`: Recurse into subdirectories of the specified source directories
+- `-t`: Use template in path `docs`
+- `-d`: Generated html files put in `gen/docs`
+- Source files to parse are taken from directory `lib`
+
+
+## Notes
+
+The template generation is set up so that:
+
+  - Files ending in `.tmpl` are skipped
+  - All non-html files are plain copied
+  - html-files *can* contain `<?js ?>` tags, but this is not required
+
+
+## Intention
+
+The `docs` directory is treated as a `jsdoc` template, in which the html-files are the template files. This allows for a gradual adaptation of the html-files to templates; unchanged html-files will pass through `jsdoc` unchanged.
+
+The added value of using `jsdoc` for documentation generation, is that the complete documentation information, as collected by `jsdoc` from the source, is available for usage. This way, it's possible to insert technical notes from the source code into the documentation.
+
+----
+
+# Usage of and Notes on Source Code
+
+This section contains notes on the usage of `jsdoc` functionality, to aid with the handling of its generated data.
+
+
+## Parameters of `publish()`
+
+### Parameter `taffyData`
+
+  A table containing *all* data collected from the source code, related to jsdoc generation. See below for more info and example outputs.
+
+### Parameter `opt`
+
+Example of `opt` variable:
+
+```js
+{
+  "_":["../github/vis/lib/network/"],
+  "configure":"jsdoc.json",
+  "recurse":true,
+  "template":"/home/wim/projects/jsdoc/default",
+  "destination":"./out/",
+  "encoding":"utf8"
+}
+```
+
+### Parameter `tutorial`
+
+This does not appear to be of use for the generation of `vis.js` documentation.
+
+Example of `tutorial` variable:
+
+```js
+{
+  "longname":"",
+  "name":"",
+  "title":"",
+  "content":"",
+  "parent":null,
+  "children":[],
+  "_tutorials":{}
+}
+```
+
+## Global variable `env`
+
+This contains addition info for the current execution of `jsdoc`. Example of `env` variable:
+
+```js
+{
+  "run":{"start":"2017-09-16T05:06:45.621Z","finish":null},
+  "args":["-c","jsdoc.json","-r","-t","default","../github/vis/lib/network/"],
+  "conf":{
+    "plugins":["/usr/lib/node_modules/jsdoc/plugins/markdown.js"],
+    "recurseDepth":10,
+    "source":{"includePattern":".+\\.js(doc|x)?$","excludePattern":""},
+    "sourceType":"module",
+    "tags":{"allowUnknownTags":true,"dictionaries":["jsdoc","closure"]},
+    "templates":{"monospaceLinks":false,"cleverLinks":false}
+  },
+  "dirname":"/usr/lib/node_modules/jsdoc",
+  "pwd":"/home/wim/projects/jsdoc",
+  "opts":{ <<same as parameter 'opt' above>> },
+  "sourceFiles":[ <<list of full path names of all js-source files used as input>> ],
+  "version":{"number":"3.5.4","revision":"Fri, 04 Aug 2017 22:05:27 GMT"}
+}
+```
+
+
+## taffyData
+
+This is a parameter to `publish()`. It's a table containing *all* data collected from the source code, related to jsdoc generation.
+
+I can't find any way to return a list of fields for the data items in the taffyDB docs, therefore below there are examples of items, for better understanding of usage.
+
+Example usage:
+
+```js
+  var data = taffyData;
+  var tmp = data().filter({name:'Label'}).get();
+```
+
+Returns an array with all items with `name === 'Label'`. Example output of one of these items, for a class:
+
+*In these examples, block comment endings are redacted to ' * /'*
+
+```js
+{
+  "comment":"/**\n * A Label to be used for Nodes or Edges.\n * /",
+  "meta":{
+    "range":[3770,41303],
+    "filename":"Label.js",
+    "lineno":167,
+    "columnno":0,
+    "path":"/home/wim/projects/github/vis/lib/network/modules/components/shared",
+    "code":{
+      "id":"astnode100065034",
+      "name":"Label",
+      "type":"ClassDeclaration",
+      "paramnames":["body","options","edgelabel"]
+    }
+  },
+  "classdesc":"
+A Label to be used for Nodes or Edges.
+
+",
+  "name":"Label",
+  "longname":"Label",
+  "kind":"class",
+  "scope":"global",
+  "params":[
+    {"type":{"names":["Object"]},"name":"body"},
+    {"type":{"names":["Object"]},"name":"options"},
+    {"type":{"names":["boolean"]},"optional":true,"defaultvalue":false,"name":"edgelabel"}
+  ],
+  "___id":"T000002R005289",
+  "___s":true
+}
+```
+
+Example of item for an instance method:
+
+```js
+  var tmp = data().filter({name:'_drawText'}).get();
+```
+
+Full output returned:
+
+```js
+[{
+  "comment":"/**\n *\n * @param {CanvasRenderingContext2D} ctx\n * @param {boolean} selected\n * @param {boolean} hover\n * @param {number} x\n * @param {number} y\n * @param {string} [baseline='middle']\n * @private\n * /",
+  "meta":{
+    "range":[20060,22269],
+    "filename":"Label.js",
+    "lineno":652,
+    "columnno":2,
+    "path":"/home/wim/projects/github/vis/lib/network/modules/components/shared",
+    "code":{
+      "id":"astnode100066427",
+      "name":"Label#_drawText",
+      "type":"MethodDefinition",
+      "paramnames":["ctx","selected","hover","x","y","baseline"]
+    },
+    "vars":{"":null}
+  },
+  "params":[
+    {"type":{"names":["CanvasRenderingContext2D"]},"name":"ctx"},
+    {"type":{"names":["boolean"]},"name":"selected"},
+    {"type":{"names":["boolean"]},"name":"hover"},
+    {"type":{"names":["number"]},"name":"x"},
+    {"type":{"names":["number"]},"name":"y"},
+    {"type":{"names":["string"]},"optional":true,"defaultvalue":"'middle'","name":"baseline"}
+  ],
+  "access":"private",
+  "name":"_drawText",
+  "longname":"Label#_drawText",
+  "kind":"function",
+  "memberof":"Label",
+  "scope":"instance",
+  "___id":"T000002R005388",
+  "___s":true
+}]
+```
+
+## `jsdoc` template rendering
+
+See `function createRenderer(fromDir, data)` in code for usage.
+
+There are two calls for rendering templates:
+ 
+  - `var html = renderer.render(inFile, docData);`
+  - `var html = renderer.partial(inFile, docData);`
+ 
+The difference is that `render()` will use a default layout template, if present, which will encapsulate all html. This can be set by:
+ 
+```js
+  renderer.layout = 'path/to/default/layout.tmpl'; 
+```
+ 
+Parameter `docData` is a hash which is used to pass parameters into a template. The standard way of using this appear to be:
+
+```
+<?js
+  var data = obj;   // Whatever docData is
+  var self = this;
+?>
+```
+ 
+But it also appear to be possible to use the elements of docData directly:
+
+```js
+var docData = {
+  myTitle: 'Hello, pussycat!'
+};
+```
+ 
+Within the template:
+
+```
+  <?js= myTitle ?>
+```
diff --git a/docs/data/dataset.html b/docs/data/dataset.html
index 4c8a958c..b78fb2fe 100644
--- a/docs/data/dataset.html
+++ b/docs/data/dataset.html
@@ -1,86 +1,11 @@
-<!DOCTYPE html>
-<html lang="en"><head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="">
-  <meta name="author" content="">
-  <link rel="icon" HREF="favicon.ico">
-  <title>DataSet - vis.js - A dynamic, browser based visualization library.</title>
-
-  <!-- Bootstrap core CSS -->
-  <link href="../css/bootstrap.css" rel="stylesheet">
-  <!-- Tipue vendor css -->
-  <link href="../css/tipuesearch.css" rel="stylesheet">
-
-  <link href="../css/style.css" rel="stylesheet">
-
-
-  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-  <!--[if lt IE 9]>
-  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-  <![endif]-->
-
-
-  <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
-  <script type="text/javascript" src="../js/googleAnalytics.js"></script>
-  <script type="text/javascript" src="../js/prettify/prettify.js"></script>
-
-  <script src="../js/smooth-scroll.min.js"></script>
-  <script language="JavaScript">
-    smoothScroll.init();
-  </script>
-
-  <script type="text/javascript" src="../js/toggleTable.js"></script>
+<?js
+  var self = this;
+  var title = 'DataSet - vis.js - A dynamic, browser based visualization library.';
+?>
+<?js= self.partial('tmpl/html-head.tmpl', title) ?>
 </head>
 <body onload="prettyPrint();">
-
-<div class="navbar-wrapper">
-    <div class="container">
-        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
-            <div class="container">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
-                            aria-expanded="false" aria-controls="navbar">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
-                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
-                </div>
-                <div id="navbar" class="navbar-collapse collapse">
-                    <ul class="nav navbar-nav">
-                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
-                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
-                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
-                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
-                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
-                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
-                    </ul>
-                    <form class="navbar-form navbar-right" role="search">
-                        <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords">
-                        <button type="submit" class="btn btn-default">Go!</button>
-                    </form>
-                    <div id="search-results-wrapper" class="panel panel-default">
-                      <div class="panel-body">
-                        <div id="tipue_search_content"></div>
-                      </div>
-                    </div>
-                    <div id="keyword-info" class="panel panel-success">
-                      <div class="panel-body">
-                          Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence!
-                      </div>
-                    </div>
-                </div>
-            </div>
-        </nav>
-    </div>
-</div>
-
-<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+<?js= self.partial('tmpl/navbar.tmpl', title) ?>
 <div class="container full">
 
   <h1>DataSet</h1>
diff --git a/docs/network/index.html b/docs/network/index.html
index 28199c4e..23ce1cfb 100644
--- a/docs/network/index.html
+++ b/docs/network/index.html
@@ -1,3 +1,6 @@
+<?js
+  var self = this;
+?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -609,6 +612,21 @@ var locales = {
                     The options object is explained in full <a data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }" href="#optionsObject">below</a>.
                 </td>
             </tr>
+
+<?js
+  var comment = self.getComment("Network#findNode");
+?>
+            <tr class="collapsible toggle" onclick="toggleTable('methodTable','findNodeNew', this);">
+                <td colspan="2"><span parent="findNode" class="right-caret" id="method_findNodeNew"></span> 
+                    <?js= comment.prototype ?>  <b>This comes from the source!</b>
+            </tr>
+            <tr class="hidden" parent="findNodeNew">
+                <td class="midMethods">Returns: <?js= comment.returns ?></td>
+                <td>
+                   <?js= comment.description ?>
+                </td>
+            </tr>
+
             <tr class="collapsible toggle" onclick="toggleTable('methodTable','findNode', this);">
                 <td colspan="2"><span parent="findNode" class="right-caret" id="method_findNode"></span> findNode(
                     <code>String/Number nodeId</code>)
diff --git a/docs/publish.js b/docs/publish.js
new file mode 100644
index 00000000..f500e366
--- /dev/null
+++ b/docs/publish.js
@@ -0,0 +1,118 @@
+/*==============================================================================
+  Demo template, showing how documentation can be generated for `vis.js`.
+
+  ------------------------------------------------------------------------------
+  ## Notes on `jsdoc` code
+
+  // claim some special filenames in advance, so the All-Powerful Overseer of Filename Uniqueness
+  // doesn't try to hand them out later
+  indexUrl = helper.getUniqueFilename('index');
+  // don't call registerLink() on this one! 'index' is also a valid longname
+
+  globalUrl = helper.getUniqueFilename('global');
+  helper.registerLink('global', globalUrl);
+
+  ============================================================================== */
+'use strict';
+//var taffy = require('taffydb').taffy;  // not really required here, left for reference
+
+// Internal modules of `jsdoc` are available here.
+// This is not the complete list, there may be more useful stuff in jsdoc
+// For all modules scan in: '/usr/lib/node_modules/jsdoc/lib/jsdoc/' (or similar on your system)
+var fs = require('jsdoc/fs');
+var path = require('jsdoc/path');
+var template = require('jsdoc/template');
+
+
+/**
+ * Set up the template rendering engine.
+ */
+function createRenderer(fromDir, data) {
+  var renderer = new template.Template(fromDir);  // Param is the template source directory.
+                                                  // All template files are relative to this directory!
+  /**
+   * Example helper method
+   * 
+   * This can be called from within a template as follows:
+   * 
+   * ```
+   * <?js
+   *  var self = this;
+   * ?>
+   * ... 
+   * <?js= self.helper('hello!') ?>
+   * ```
+   * 
+   * /
+  renderer.helper = function(val) {
+    return 'this is a helper! ' + val;
+	};
+  */
+
+  /**
+   * Retrieves jsdoc info for the passed instance method.
+   */
+  renderer.getComment = function(methodName) {
+    var tmp = data().filter({longname: methodName}).get()[0];
+	  //console.log(JSON.stringify(tmp));
+
+    // Some restructuring, to adapt it to the docs layout
+    // This needs some work to make it handle 0 and > 1 parameters
+    var param = tmp.params[0];
+    var prototype = tmp.name + '(<code>' + param.type.names.join('|') + ' ' + param.name  + '</code>)';
+    var returns = tmp.returns[0].type.names;
+
+    return {
+      prototype: prototype,
+      returns: returns,
+      description: tmp.description
+    }
+	};
+
+  return renderer;
+}
+
+
+/**
+  Entry point for the template.
+
+  This is called from `jsdoc` during execution
+
+    @param {TAFFY} taffyData See <http://taffydb.com/>.
+    @param {object} opts
+    @param {Tutorial} tutorials
+ */
+exports.publish = function(taffyData, opts, tutorials) {
+  //console.log(JSON.stringify(opts, null, 2));
+
+  var fromDir = path.resolve(opts.template);
+  var toDir = path.join(opts.destination);
+  var renderer = createRenderer(fromDir, taffyData);
+
+  var docFiles = fs.ls(fromDir, 3);
+  docFiles.forEach(function(fileName) {
+    // Template filenames need to be relative to template source dir
+    var relName = path.relative(fromDir, fileName);
+    var outFile = path.join(toDir, relName);
+
+    if (/publish.js$/.test(fileName)) return;   // Skip self
+    if (/README.md$/.test(fileName)) return;   // Skip own README
+    if (/\.tmpl$/.test(fileName)) return;       // Skip .tmpl files; these are used as partials only
+
+    if (!/\.html$/.test(fileName)) {
+      // Just plain copy over non-html files
+      var tmpDir = fs.toDir(outFile);
+      fs.mkPath(tmpDir);
+      fs.copyFileSync(fileName, tmpDir);
+      return;
+    }
+   
+    // Render html files as templates 
+    //console.log(relName);
+    var html = renderer.partial(relName, {});
+    fs.mkPath(fs.toDir(outFile));
+    fs.writeFileSync(outFile, html, 'utf8');
+  });
+
+  //console.log(JSON.stringify(env, null, 2));
+};
diff --git a/docs/tmpl/html-head.tmpl b/docs/tmpl/html-head.tmpl
new file mode 100644
index 00000000..7fd3adb8
--- /dev/null
+++ b/docs/tmpl/html-head.tmpl
@@ -0,0 +1,40 @@
+<?js
+  var title = obj;
+  var self = this;
+?>
+<!DOCTYPE html>
+<html lang="en"><head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <link rel="icon" HREF="favicon.ico">
+  <title><?js= title ?></title>
+
+  <!-- Bootstrap core CSS -->
+  <link href="../css/bootstrap.css" rel="stylesheet">
+  <!-- Tipue vendor css -->
+  <link href="../css/tipuesearch.css" rel="stylesheet">
+
+  <link href="../css/style.css" rel="stylesheet">
+
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!--[if lt IE 9]>
+  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+  <![endif]-->
+
+
+  <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
+  <script type="text/javascript" src="../js/googleAnalytics.js"></script>
+  <script type="text/javascript" src="../js/prettify/prettify.js"></script>
+
+  <script src="../js/smooth-scroll.min.js"></script>
+  <script language="JavaScript">
+    smoothScroll.init();
+  </script>
+
+  <script type="text/javascript" src="../js/toggleTable.js"></script>
+<?js /* end tag '</head>' purposely missing here, so that more stuff can be added to header */ ?>
\ No newline at end of file
diff --git a/docs/tmpl/navbar.tmpl b/docs/tmpl/navbar.tmpl
new file mode 100644
index 00000000..b1f8da08
--- /dev/null
+++ b/docs/tmpl/navbar.tmpl
@@ -0,0 +1,49 @@
+<?js
+  var title = obj;
+  var self = this;
+?>
+<div class="navbar-wrapper">
+    <div class="container">
+        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
+                            aria-expanded="false" aria-controls="navbar">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
+                </div>
+                <div id="navbar" class="navbar-collapse collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
+                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
+                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
+                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
+                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
+                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
+                    </ul>
+                    <form class="navbar-form navbar-right" role="search">
+                        <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords">
+                        <button type="submit" class="btn btn-default">Go!</button>
+                    </form>
+                    <div id="search-results-wrapper" class="panel panel-default">
+                      <div class="panel-body">
+                        <div id="tipue_search_content"></div>
+                      </div>
+                    </div>
+                    <div id="keyword-info" class="panel panel-success">
+                      <div class="panel-body">
+                          Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence!
+                      </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </div>
+</div>
+
+<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 5e87f423..4076d81c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -10,6 +10,7 @@ var webpack = require('webpack');
 var uglify = require('uglify-js');
 var rimraf = require('rimraf');
 var argv = require('yargs').argv;
+var child_exec = require('child_process').exec;
 
 var ENTRY             = './index.js';
 var HEADER            = './lib/header.js';
@@ -29,7 +30,12 @@ var INDIVIDUAL_CSS_BUNDLES = [
   {entry: ['./lib/shared/**/*.css', './lib/network/**/*.css'], filename: 'vis-network.min.css'}
 ];
 
-// generate banner with today's date and correct version
+
+/**
+ * Generate banner with today's date and correct version
+ *
+ * @returns {string} banner text
+ */
 function createBanner() {
   var today = gutil.date(new Date(), 'yyyy-mm-dd'); // today, formatted as yyyy-mm-dd
   var version = require('./package.json').version;
@@ -39,6 +45,7 @@ function createBanner() {
       .replace('@@version', version);
 }
 
+
 var bannerPlugin = new webpack.BannerPlugin({
   banner: createBanner(),
   entryOnly: true,
@@ -92,6 +99,12 @@ var uglifyConfig = {
 // create a single instance of the compiler to allow caching
 var compiler = webpack(webpackConfig);
 
+/**
+ * Callback for handling errors for a compiler run
+ *
+ * @param {object} err
+ * @param {objects} stats
+ */
 function handleCompilerCallback (err, stats) {
   if (err) {
     gutil.log(err.toString());
@@ -232,5 +245,27 @@ gulp.task('lint', function () {
 });
 
 
+// Generate the documentation files
+gulp.task('docs', function(cb) {
+  var targetDir = 'gen/docs';
+
+  // Not sure if this is the best way to handle 'cb'; at least it works.
+  var hasError = false;
+  var onError = function(error) {
+    if (error !== undefined && error !== null) {
+      console.error('Error while running task: ' + error);
+      hasError = true;
+      cb();
+    }
+  }
+
+  rimraf(__dirname + '/' + targetDir, onError);  // Clean up previous generation
+
+  if (!hasError) {
+    var params = '-c ./jsdoc.json -r -t docs -d ' + targetDir;
+    child_exec('node ./node_modules/jsdoc/jsdoc.js ' + params + ' lib', undefined, cb);
+  }
+});
+
 // The default task (called when you run `gulp`)
 gulp.task('default', ['clean', 'bundle', 'minify']);
diff --git a/jsdoc.json b/jsdoc.json
new file mode 100644
index 00000000..df0756c6
--- /dev/null
+++ b/jsdoc.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["plugins/markdown"]
+}
diff --git a/lib/network/Network.js b/lib/network/Network.js
index 486a8a21..b45baf0a 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -470,7 +470,27 @@ Network.prototype.isActive = function () {
 Network.prototype.setSize             = function() {return this.canvas.setSize.apply(this.canvas,arguments);};
 Network.prototype.canvasToDOM         = function() {return this.canvas.canvasToDOM.apply(this.canvas,arguments);};
 Network.prototype.DOMtoCanvas         = function() {return this.canvas.DOMtoCanvas.apply(this.canvas,arguments);};
+
+
+/**
+ * Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of
+ * nodeIds showing where the node is.
+ *
+ * If any nodeId in the chain, especially the first passed in as a parameter, is not present in
+ * the current nodes list, an empty array is returned.
+ *
+ * Example:
+ * cluster 'A' contains cluster 'B',
+ * cluster 'B' contains cluster 'C',
+ * cluster 'C' contains node 'fred'.
+ * `jsnetwork.clustering.findNode('fred')` will return `['A','B','C','fred']`.
+ *
+ * @param {string|number} nodeId
+ * @returns {Array}
+ */
 Network.prototype.findNode            = function() {return this.clustering.findNode.apply(this.clustering,arguments);};
+
+
 Network.prototype.isCluster           = function() {return this.clustering.isCluster.apply(this.clustering,arguments);};
 Network.prototype.openCluster         = function() {return this.clustering.openCluster.apply(this.clustering,arguments);};
 Network.prototype.cluster             = function() {return this.clustering.cluster.apply(this.clustering,arguments);};
diff --git a/package.json b/package.json
index be72b0af..867be4a8 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "gulp-eslint": "^4.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.8",
+    "jsdoc": "^3.5.5",
     "jsdom": "9.12.0",
     "jsdom-global": "^2.1.1",
     "merge-stream": "^1.0.1",

From 88f0a6a4c65cfeac4fb8c37ed5efafe3b1ecb6e6 Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Fri, 20 Oct 2017 13:04:52 +0200
Subject: [PATCH 10/10] Network: force array order when sorting hierarchical
 levels (#3576)

* Network: force array order when sorting hierarchical levels

Fixes #340r34.

If coordinates are not available to sort within a hierarchical level, sort to array order instead.

The previous fix on this issue was not good enough to circumvent this quirk in the chromium sorting. This should bury it.

* Added TimSort for sorting in DirectionStrategy

* Added TimSort to LayoutEngine

* Fixed typo
---
 lib/network/modules/LayoutEngine.js            |  5 +++--
 .../modules/components/DirectionStrategy.js    | 18 ++++++++++++------
 package.json                                   |  3 ++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/lib/network/modules/LayoutEngine.js b/lib/network/modules/LayoutEngine.js
index ccee1a43..ad907ebd 100644
--- a/lib/network/modules/LayoutEngine.js
+++ b/lib/network/modules/LayoutEngine.js
@@ -1,4 +1,3 @@
-'use strict';
 /**
  * There's a mix-up with terms in the code. Following are the formal definitions:
  *
@@ -30,6 +29,8 @@
  * The layout is a way to arrange the nodes in the view; this can be done
  * on non-hierarchical networks as well. The converse is also possible.
  */
+'use strict';
+var TimSort =  require('timsort');
 let util = require('../../util');
 var NetworkUtil = require('../NetworkUtil').default;
 var {HorizontalStrategy, VerticalStrategy} = require('./components/DirectionStrategy.js');
@@ -1422,7 +1423,7 @@ class LayoutEngine {
       result.push(Number(size));
     });
 
-    result.sort(function(a, b) {
+    TimSort.sort(result, function(a, b) {
       return b - a;
     });
 
diff --git a/lib/network/modules/components/DirectionStrategy.js b/lib/network/modules/components/DirectionStrategy.js
index b72e127e..ac3151ce 100644
--- a/lib/network/modules/components/DirectionStrategy.js
+++ b/lib/network/modules/components/DirectionStrategy.js
@@ -3,6 +3,7 @@
  *
  * Strategy pattern for usage of direction methods for hierarchical layouts.
  */
+var TimSort =  require('timsort');
 
 
 /**
@@ -87,6 +88,15 @@ class DirectionInterface {
   /**
    * Sort array of nodes on the unfixed coordinates.
    *
+   * **Note:** chrome has non-stable sorting implementation, which
+   * has a tendency to change the order of the array items,
+   * even if the custom sort function returns 0.
+   *
+   * For this reason, an external sort implementation is used,
+   * which has the added benefit of being faster than the standard
+   * platforms implementation. This has been verified on `node.js`,
+   * `firefox` and `chrome` (all linux).
+   *
    * @param {Array.<Node>} nodeArray array of nodes to sort
    */
   sort(nodeArray) { this.fake_use(nodeArray); this.abstract(); }
@@ -156,9 +166,7 @@ class VerticalStrategy extends DirectionInterface {
 
   /** @inheritdoc */
   sort(nodeArray) {
-    nodeArray.sort(function(a, b) {
-      // Test on 'undefined' takes care of divergent behaviour in chrome
-      if (a.x === undefined || b.x === undefined) return 0;   // THIS HAPPENS
+    TimSort.sort(nodeArray, function(a, b) {
       return a.x - b.x;
     });
   }
@@ -221,9 +229,7 @@ class HorizontalStrategy extends DirectionInterface {
 
   /** @inheritdoc */
   sort(nodeArray) {
-    nodeArray.sort(function(a, b) {
-      // Test on 'undefined' takes care of divergent behaviour in chrome
-      if (a.y === undefined || b.y === undefined) return 0;   // THIS HAPPENS
+    TimSort.sort(nodeArray, function(a, b) {
       return a.y - b.y;
     });
   }
diff --git a/package.json b/package.json
index 867be4a8..de2515f5 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
     "hammerjs": "^2.0.8",
     "keycharm": "^0.2.0",
     "moment": "^2.18.1",
-    "propagating-hammerjs": "^1.4.6"
+    "propagating-hammerjs": "^1.4.6",
+    "timsort": "^0.3.0"
   },
   "devDependencies": {
     "async": "^2.5.0",