updates for v4.21.0 (#3560)

docs/data/dataset.html

@@ -312,7 +312,7 @@ var data = new vis.DataSet([data] [, options])
       <td>Object | Array</td>
       <td>
         Get a single item, multiple items, or all items from the DataSet.
-        Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. When no item is found, <code>null</code> is returned when a single item was requested, and and empty Array is returned in case of multiple id's.
+        Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>. The available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. When a single id is requested and not found <code>null</code> is returned. When multiple ids are requested and not found an Array containing <code>null</code>s is returned.
       </td>
     </tr>
 

docs/graph2d/index.html

@@ -1200,7 +1200,7 @@ function (option, path) {
             <td>none</td>
             <td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
                 <ul>
-                    <li><code>animate: boolean or number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
+                    <li><code>animation: boolean | {duration: number, easingFunction: string}</code><br>If true (default), the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'.</li>
                 </ul>
             </td>
         </tr>

docs/graph3d/index.html

@@ -441,6 +441,24 @@ var options = {
         both have the same, maximum with.</td>
     </tr>
 
+    <tr>
+      <td>onclick</td>
+      <td>function</td>
+      <td>none</td>
+      <td>Event handler for a click event with signature <code>function onclick(point)</code>.<br>
+        Parameter <code>point</code> contains data for the nearest graph element relative to the click in
+        the line of sight. It is an object with the fields:
+        <ul>
+        <li><code>id   </code> - id of nearest node to the click</li>
+        <li><code>x    </code> - x-coordinate in graph units</li>
+        <li><code>y    </code> - y-coordinate in graph units</li>
+        <li><code>z    </code> - z-coordinate in graph units</li>
+        <li><code>style</code> - if present, the data value for this point</li>
+        </ul>
+        
+        </td>
+    </tr>
+
     <tr>
       <td>showAnimationControls</td>
       <td>boolean</td>

docs/network/edges.html

@@ -279,13 +279,13 @@ network.setOptions(options);
             <td class="indent2">arrows.to.type</td>
             <td>String</td>
             <td><code>arrow</code></td>
-            <td>The type of endpoint. Default is <code>arrow</code>. Also possible is <code>circle</code>.</td>
+            <td>The type of endpoint. Possible values are: <code>arrow</code>, <code>bar</code>, <code>circle</code>. The default is <code>arrow</code>.
         </tr>
         <tr parent="arrows" class="hidden">
             <td class="indent">arrows.middle</td>
             <td>Object or Boolean</td>
             <td><code>Object</code></td>
-            <td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td>
+            <td>Similar to the 'to' object, but with an arrowhead in the center of the edge. The direction of the arrow can be flipped by using a negative value for <code>arrows.middle.scaleFactor</code>.</td>
         </tr>
         <tr parent="arrows" class="hidden">
             <td class="indent">arrows.from</td>

docs/network/index.html

@@ -645,7 +645,20 @@ var locales = {
             <tr class="hidden" parent="getBaseEdge">
                 <td class="midMethods">Returns: Value</td>
                 <td>When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in <code>data.edges</code><br/>
-                    ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId.
+                    ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId.<br><br>
+                    <b>This method is deprecated. Please use <code>getBaseEdges()</code> instead.</b>
+                </td>
+            </tr>
+            <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBaseEdges', this);">
+                <td colspan="2"><span parent="getBaseEdges" class="right-caret" id="method_getBaseEdges"></span>
+                  getBaseEdges(<code>String clusteredEdgeId</code>)
+                </td>
+            </tr>
+            <tr class="hidden" parent="getBaseEdges">
+                <td class="midMethods">Returns: Array</td>
+                <td>For the given <code>clusteredEdgeId</code>, this method will return all the original base edge id's provided in <code>data.edges</code>.
+                    For a non-clustered (i.e. 'base') edge, <code>clusteredEdgeId</code> is returned.<br/><br/>
+                    Only the base edge id's are returned. All clustered edges id's under <code>clusteredEdgeId</code> are skipped, but scanned recursively to return their base id's.<br/>
                 </td>
             </tr>
             <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateEdge', this);">
@@ -1180,9 +1193,11 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
                 <th>Type</th>
                 <th>Description</th>
             </tr>
-            <tr><td>joinCondition(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)</td>
+            <tr><td>joinCondition(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)<br>or<br>joinCondition(<br>&nbsp;&nbsp;<code>parentNodeOptions:&nbsp;Object,</code><br>&nbsp;&nbsp;<code>childNodeOptions:&nbsp;Object</code><br>)</td>
                 <td>Function</td>
-                <td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are
+                <td><i>Optional for all but the cluster method. </i> <br>
+                    <code>clusterByConnection</code> is the only function that will pass 2 nodeOptions objects as arguments to the joinCondition callback.<br>
+                    The cluster module loops over all nodes that are
                     selected to be in the cluster and calls this function with their data as argument.
                     If this function returns true, this node will be added to the cluster. You have access to all
                     options
@@ -1206,6 +1221,7 @@ var options = {
 
 network.clustering.cluster(options);
 </pre>
+                    <code>clusterByConnection</code><b> will pass 2 nodeOptions objects as arguments to the joinCondition callback.</b>
                 </td>
             </tr>
             <tr><td>processProperties(<br>&nbsp;&nbsp;<code>clusterOptions:&nbsp;Object</code>,<br>
@@ -1297,7 +1313,7 @@ var options = {
                 </td>
                 <td>Fired when the user clicks the mouse or taps on a touchscreen device. Passes an object with properties structured as:
 
-                <pre class="prettyprint lang-js">{
+<pre class="prettyprint lang-js">{
   nodes: [Array of selected nodeIds],
   edges: [Array of selected edgeIds],
   event: [Object] original click event,
@@ -1307,6 +1323,24 @@ var options = {
   }
 }
 </pre>
+
+This is the structure common to all events. Specifically for the click event, the following property is added:
+
+<pre class="prettyprint lang-js">{
+...
+  items: [Array of click items],
+}</pre>
+
+Where the click items can be:
+<pre class="prettyprint lang-js">
+  {nodeId:NodeId}            // node with given id clicked on
+  {nodeId:NodeId labelId:0}  // label of node with given id clicked on
+  {edgeId:EdgeId}            // edge with given id clicked on
+  {edge:EdgeId, labelId:0}   // label of edge with given id clicked on
+</pre>
+
+The order of the <code>items</code> array is descending in z-order.
+Thus, to get the topmost item, get the value at index 0.
                 </td>
             </tr>
             <tr><td id="event_doubleClick">doubleClick</td>

docs/network/nodes.html

@@ -834,7 +834,7 @@ network.setOptions(options);
                 <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
                 Always scalable are:
                 <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
-                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
+                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and
                 <code>icon</code>. Keep in mind that when using scaling, the <code>size</code> option is neglected.
             </td>
         </tr>
@@ -975,7 +975,7 @@ mySize = minSize + diff * scale;
                 <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
                 The ones with the label outside of it are: <code>image</code>, <code>circularImage</code>,
                 <code>diamond</code>, <code>dot</code>, <code>star</code>, <code>triangle</code>,
-                <code>triangleDown</code>, <code>square</code> and <code>icon</code>.
+                <code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and <code>icon</code>.
             </td>
         </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','shapeProperties', this);">
@@ -1031,7 +1031,7 @@ mySize = minSize + diff * scale;
             <td><code>25</code></td>
             <td>The size is used to determine the size of node shapes that do not have the label inside of them. These
                 shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
-                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
+                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and
                 <code>icon</code></td>
         </tr>
         <tr>

docs/timeline/index.html

@@ -342,6 +342,14 @@ var items = new vis.DataSet([
         Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
       </td>
     </tr>
+    <tr>
+      <td>limitSize</td>
+      <td>Boolean</td>
+      <td>no</td>
+      <td>Some browsers cannot handle very large DIVs so by default range DIVs can be truncated outside the visible area.
+        Setting this to <code>false</code> will cause the creation of full-size DIVs.
+      </td>
+    </tr>
     <tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);">
       <td><span parent="itemEditable" class="right-caret"></span> editable</td>
       <td>Boolean or Object</td>
@@ -454,6 +462,16 @@ var groups = [
         By default, groups are ordered by first-come, first-show.
       </td>
     </tr>
+    <tr>
+      <td>subgroupStack</td>
+      <td>Object or Boolean</td>
+      <td>none</td>
+      <td>Enables stacking within individual subgroups. Example: <code>{'subgroup0': true, 'subgroup1': false, 'subgroup2': true}</code> 
+          For each subgroup where stacking is enabled, items will be stacked on top of each other within that subgroup such that they do no overlap.
+          If set to <code>true</code> all subgroups will be stacked.
+          If a value was specified for the <code>order</code> parameter in the options, that ordering will be used when stacking the items.
+      </td>
+    </tr>
     <tr>
       <td>title</td>
       <td>String</td>
@@ -561,7 +579,7 @@ function (option, path) {
       <td><span parent="editable" class="right-caret"></span> editable</td>
       <td>boolean or Object</td>
       <td><code>false</code></td>
-      <td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code><code>true</code></code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
+      <td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
         See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
       </td>
     </tr>
@@ -732,7 +750,7 @@ function (option, path) {
       <td>Boolean</td>
       <td>false</td>
       <td>This option allows you to scroll horizontally to move backwards and forwards in the time range.
-       Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>. Notice that defining this option as <code>true</code> will override <code>verticalScroll</code> scroll event but not eliminate the vertical scrollbar.
+       Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>.
       </td>
     </tr>
 
@@ -883,10 +901,10 @@ function (option, path) {
       <td>onAdd</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code>true</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onAddGroup</td>
       <td>function</td>
@@ -894,23 +912,31 @@ function (option, path) {
       <td>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>.
       </td>
     </tr>
+    
+    <tr>
+        <td>onDropObjectOnItem</td>
+        <td>function</td>
+        <td>none</td>
+        <td>Callback function triggered when an object containing <code>target:'item'</code> in its drag data is dropped in to a timeline item.
+        </td>
+    </tr>
 
     <tr>
-      <td>onUpdate</td>
+      <td>onInitialDrawComplete</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when the timeline is initially drawn. This function fires once per timeline creation.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMove</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMoveGroup</td>
       <td>function</td>
@@ -918,23 +944,23 @@ function (option, path) {
       <td>Callback function triggered when a group has been moved: after the user has dragged the group to an other position. The signature and semantics are the same as for <code>onMove</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMoving</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onRemove</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code>true</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onRemoveGroup</td>
       <td>function</td>
@@ -942,7 +968,15 @@ function (option, path) {
       <td>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>.
       </td>
     </tr>
-
+    
+    <tr>
+      <td>onUpdate</td>
+      <td>function</td>
+      <td>none</td>
+      <td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
+      </td>
+    </tr>
+    
     <tr>
       <td>order</td>
       <td>function</td>
@@ -1028,7 +1062,7 @@ function (option, path) {
       <td>By default, the timeline shows both minor and major date labels on the
         time axis.
         For example the minor labels show minutes and the major labels show hours.
-        When <code>showMajorLabels</code> is <code><code>false</code></code>, no major labels
+        When <code>showMajorLabels</code> is <code>false</code>, no major labels
         are shown.</td>
     </tr>
 
@@ -1039,7 +1073,7 @@ function (option, path) {
       <td>By default, the timeline shows both minor and major date labels on the
         time axis.
         For example the minor labels show minutes and the major labels show hours.
-        When <code>showMinorLabels</code> is <code><code>false</code></code>, no minor labels
+        When <code>showMinorLabels</code> is <code>false</code>, no minor labels
         are shown. When both <code>showMajorLabels</code> and
         <code>showMinorLabels</code> are false, no horizontal axis will be
         visible.</td>
@@ -1199,7 +1233,7 @@ function (option, path) {
       <td><code>true</code></td>
       <td>
         Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
-        Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
+        Only applicable when option <code>moveable</code> is set <code>true</code>.
       </td>
     </tr>
 
@@ -1209,7 +1243,7 @@ function (option, path) {
       <td><code>''</code></td>
       <td>Specifies whether the Timeline is only zoomed when an additional key is down.
       	Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
-        Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
+        Only applicable when option <code>moveable</code> is set <code>true</code>.
       </td>
     </tr>
 
@@ -1750,7 +1784,7 @@ timeline.off('select', onSelect);
 
   <h2 id="Editing_Items">Editing Items</h2>
   <p>
-    When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code><code>true</code></code>), the user can:
+    When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can:
   </p>
   <ul>
     <li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li>
@@ -1805,6 +1839,7 @@ var items = new vis.DataSet([
   <ul>
     <li><code>onAdd(item, callback)</code> Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.</li>
     <li><code>onUpdate(item, callback)</code> Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.</li>
+    <li><code>onDropObjectOnItem(objectData, item)</code> Fired when an object is dropped in to an existing timeline item.</li>
     <li><code>onMove(item, callback)</code> Fired when an item has been moved. If not implemented, the move action will be accepted.</li>
     <li><code>onMoving(item, callback)</code> Fired repeatedly while an item is being moved (dragged). Can be used to adjust the items start, end, and/or group to allowed regions.</li>
     <li><code>onRemove(item, callback)</code> Fired when an item is about to be deleted. If not implemented, the item will be always removed.</li>
@@ -2113,6 +2148,15 @@ var options = {
 &lt;/style&gt;
 </pre>
 
+ <h3 id="Performance_Tips">Performance  Tips</h3>
+ <p>Defining a timeline with many items and/or groups might affect initial loading time and general performance.
+   Here are some tips to improve performance and avoid slow loading time:</p>
+ <ul>
+   <li>Define items and group with <code>DataSets</code></li>
+   <li>Avoid applying heavy CSS on items (such as <code>box-shadow</code>, gradient background colors, etc.)</li>
+   <li>Defining a <code>start</code> and an <code>end</code> in the timeline options.
+   This will improve initial loading time.</li>
+ </ul>
 </div>
 
 <!-- Bootstrap core JavaScript

examples/graph3d/04_animation.html

@@ -51,8 +51,7 @@
         keepAspectRatio: true,
         verticalRatio: 0.5,
         animationInterval: 100, // milliseconds
-        animationPreload: true,
-        filterValue: 'time'
+        animationPreload: true
       };
 
       // create our graph

examples/graph3d/10_styling.html

@@ -58,7 +58,7 @@
         keepAspectRatio: true,
         verticalRatio: 0.5
       };
-
+  
       var camera = graph ? graph.getCameraPosition() : null;
 
       // create our graph

examples/graph3d/playground/playground.js

@@ -304,7 +304,7 @@ function getDataType() {
 /**
  * Retrieve the datatable from the entered contents of the csv text
  * @param {boolean} [skipValue] | if true, the 4th element is a filter value
- * @return {vis DataSet}
+ * @return {vis.DataSet}
  */
 function getDataCsv() {
   var csv = document.getElementById("csvTextarea").value;
@@ -366,7 +366,7 @@ function trim(text) {
 
 /**
  * Retrieve the datatable from the entered contents of the javascript text
- * @return {vis Dataset}
+ * @return {vis.DataSet}
  */
 function getDataJson() {
   var json = document.getElementById("jsonTextarea").value;
@@ -378,7 +378,7 @@ function getDataJson() {
 
 /**
  * Retrieve the datatable from the entered contents of the javascript text
- * @return {vis Dataset}
+ * @return {vis.DataSet}
  */
 function getDataJavascript() {
   var js = document.getElementById("javascriptTextarea").value;
@@ -391,7 +391,7 @@ function getDataJavascript() {
 
 /**
  * Retrieve the datatable from the entered contents of the datasource text
- * @return {vis Dataset}
+ * @return {vis.DataSet}
  */
 function getDataDatasource() {
 }
@@ -400,7 +400,7 @@ function getDataDatasource() {
  * Retrieve a JSON object with all options
  */
 function getOptions() {
-  return {
+  var options = {
     width:              document.getElementById("width").value,
     height:             document.getElementById("height").value,
     style:              document.getElementById("style").value,
@@ -413,8 +413,8 @@ function getOptions() {
     showLegend:        (document.getElementById("showLegend").checked != false),
     showShadow:        (document.getElementById("showShadow").checked != false),
     keepAspectRatio:   (document.getElementById("keepAspectRatio").checked != false),
-    verticalRatio:      document.getElementById("verticalRatio").value,
-    animationInterval:  document.getElementById("animationInterval").value,
+    verticalRatio:      Number(document.getElementById("verticalRatio").value) || undefined,
+    animationInterval:  Number(document.getElementById("animationInterval").value) || undefined,
     xLabel:             document.getElementById("xLabel").value,
     yLabel:             document.getElementById("yLabel").value,
     zLabel:             document.getElementById("zLabel").value,
@@ -423,8 +423,8 @@ function getOptions() {
     animationPreload:  (document.getElementById("animationPreload").checked != false),
     animationAutoStart:(document.getElementById("animationAutoStart").checked != false),
 
-    xCenter:           Number(document.getElementById("xCenter").value) || undefined,
-    yCenter:           Number(document.getElementById("yCenter").value) || undefined,
+    xCenter:           document.getElementById("xCenter").value,
+    yCenter:           document.getElementById("yCenter").value,
 
     xMin:              Number(document.getElementById("xMin").value) || undefined,
     xMax:              Number(document.getElementById("xMax").value) || undefined,
@@ -442,6 +442,8 @@ function getOptions() {
     xBarWidth:         Number(document.getElementById("xBarWidth").value) || undefined,
     yBarWidth:         Number(document.getElementById("yBarWidth").value) || undefined
   };
+
+  return options;
 }
 
 /**

examples/network/data/dotLanguage/dotEdgeStyles.html

@@ -0,0 +1,197 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | DOT edge styles</title>
+
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+  <script src="../../../../dist/vis.js"></script>
+  <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body, html {
+      font: 10pt sans;
+      line-height: 1.5em;;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      color: #4d4d4d;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    #header {
+      margin: 0;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+
+    #contents {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    #left, #right {
+      position: absolute;
+      width: 50%;
+      height: 100%;
+      margin: 0;
+      padding: 10px;
+      box-sizing: border-box;
+      display: inline-block;
+    }
+
+    #left {
+      top: 0;
+      left: 0;
+    }
+
+    #right {
+      top: 0;
+      right: 0;
+    }
+
+    #error {
+      color: red;
+    }
+
+    #data {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #d3d3d3;
+      box-sizing: border-box;
+      resize: none;
+    }
+
+    #draw, #reset {
+      padding: 5px 15px;
+    }
+
+    #mynetwork {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #d3d3d3;
+      box-sizing: border-box;
+    }
+
+    a:hover {
+      color: red;
+    }
+
+  </style>
+  
+</head>
+<body>
+
+<div id="header">
+  <h1>DOT edge styles</h1>
+
+  <div>
+    <p>
+      Example of edge styles support
+    </p>
+
+    <ul>
+      <li> label: text displayed on the edge</li>
+      <li> color: edge color</li>
+      <li> style: edge style is solid(default), dashed or dotted</li>
+    </ul>
+  </div>
+
+  <div>
+    <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
+    <button id="reset" title="Reset the DOT graph">Reset</button>
+    <span id="error"></span>
+  </div>
+</div>
+
+<div id="contents">
+  <div id="left">
+    <textarea id="data">
+    </textarea>
+  </div>
+  <div id="right">
+    <div id="mynetwork"></div>
+  </div>
+</div>
+
+<script type="text/javascript">
+  var dotDefault = "digraph {\n" +
+    " Parent -> C1[label=\"default\"];  // Default style is solid \n" +
+    " Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
+    " Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
+    " Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
+    "}";
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var options = {
+    physics: {
+      stabilization: false,
+      barnesHut: {
+        springLength: 200
+      }
+    }
+  };
+  var data = {};
+  var network = new vis.Network(container, data, options);
+
+  $('#draw').click(draw);
+  $('#reset').click(reset);
+
+  $(window).resize(resize);
+  $(window).load(draw);
+
+  $('#data').keydown(function (event) {
+    if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
+      draw();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  });
+
+  function resize() {
+    $('#contents').height($('body').height() - $('#header').height() - 30);
+  }
+
+  function draw () {
+    try {
+      resize();
+      $('#error').html('');
+
+      // Provide a string with data in DOT language
+      data = vis.network.convertDot($('#data').val());
+
+      network.setData(data);
+    }
+    catch (err) {
+      // set the cursor at the position where the error occurred
+      var match = /\(char (.*)\)/.exec(err);
+      if (match) {
+        var pos = Number(match[1]);
+        var textarea = $('#data')[0];
+        if(textarea.setSelectionRange) {
+          textarea.focus();
+          textarea.setSelectionRange(pos, pos);
+        }
+      }
+
+      // show an error message
+      $('#error').html(err.toString());
+    }
+  }
+
+  function reset() {
+    $('#data').val(dotDefault);
+    draw();
+  }
+
+  window.onload = function() {
+    reset();
+  }
+</script>
+</body>
+</html>

examples/network/edgeStyles/arrowTypes.html

@@ -17,7 +17,8 @@
 <body>
 
 <p>
-  There two type of liner endings. The classical "arrow" (default) and "circle".
+  The types of endpoints are: <code>'arrow' 'circle' 'bar'</code>.
+  The default is <code>'arrow'</code>.
 </p>
 
 <div id="mynetwork"></div>
@@ -25,9 +26,10 @@
 <script type="text/javascript">
   // create an array with nodes
   var nodes = new vis.DataSet([
-    {id: 1, label: 'X'},
-    {id: 2, label: 'Y'},
-    {id: 3, label: 'Z'}
+    {id: 1, label: 'A'},
+    {id: 2, label: 'B'},
+    {id: 3, label: 'C'},
+    {id: 4, label: 'D'}
   ]);
 
   // create an array with edges
@@ -35,9 +37,16 @@
     {from: 1, to: 2, arrows:'to'},
     {from: 2, to: 3, arrows:{
       to: {
+        enabled: true,
         type: 'circle'
       }
     }},
+    {from: 3, to: 4, arrows:{
+      to: {
+        enabled: true,
+        type: 'bar'
+      }
+    }},
   ]);
 
   // create a network
@@ -46,7 +55,20 @@
     nodes: nodes,
     edges: edges
   };
-  var options = {};
+
+  var options = {
+/*
+    // Enable this to make the endpoints smaller/larger
+    edges: {
+      arrows: {
+        to: {
+          scaleFactor: 5
+        }
+      }
+    }
+*/
+  };
+
   var network = new vis.Network(container, data, options);
 </script>
 

examples/network/events/interactionEvents.html

@@ -48,7 +48,14 @@
         nodes: nodes,
         edges: edges
     };
-    var options = {interaction:{hover:true}};
+
+    var options = {
+			interaction:{hover:true},
+			manipulation: {
+				enabled: true
+			}
+		};
+
     var network = new vis.Network(container, data, options);
 
     network.on("click", function (params) {
@@ -65,8 +72,10 @@
         document.getElementById('eventSpan').innerHTML = '<h2>oncontext (right click) event:</h2>' + JSON.stringify(params, null, 4);
     });
     network.on("dragStart", function (params) {
+        // There's no point in displaying this event on screen, it gets immediately overwritten
         params.event = "[original event]";
-        document.getElementById('eventSpan').innerHTML = '<h2>dragStart event:</h2>' + JSON.stringify(params, null, 4);
+        console.log('dragStart Event:', params);
+        console.log('dragStart event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
     });
     network.on("dragging", function (params) {
         params.event = "[original event]";
@@ -75,6 +84,8 @@
     network.on("dragEnd", function (params) {
         params.event = "[original event]";
         document.getElementById('eventSpan').innerHTML = '<h2>dragEnd event:</h2>' + JSON.stringify(params, null, 4);
+        console.log('dragEnd Event:', params);
+        console.log('dragEnd event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
     });
     network.on("zoom", function (params) {
         document.getElementById('eventSpan').innerHTML = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4);

examples/network/exampleApplications/disassemblerExample.html

@@ -9,59 +9,16 @@
   </style>
   <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
   <script src="../../../dist/vis.js"></script>
+  <script src="disassemblerExample.js"></script>
  </head>
 <body>
 <p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from
 a program you wish to analyze.</p>
 <p><div id="mynetwork"></div><br /></p>
 <script type="text/javascript">
-var opts = {
-  manipulation: false,
-  height: '90%',
-  layout: {
-    hierarchical: {
-      enabled: true,
-      levelSeparation: 300
-    }
-  },
-  physics: {
-    hierarchicalRepulsion: {
-      nodeDistance: 300
-    }
-  }
-};
-
-nodes = [
- {'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov    DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov    DWORD PTR ss:[ebp + 0x00], esi\ntest   bl, 0x02\nje     0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
- {'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest   bl, 0x01\nje     0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
- {'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov    ecx, DWORD PTR ss:[esp + 0x1c]\npush   ecx\ncall   0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
- {'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov    eax, 0x00000002\nmov    ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov    DWORD PTR fs:[0x00000000], ecx\npop    ecx\npop    esi\npop    ebp\npop    ebx\nadd    esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
- {'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov    edi, edi\npush   ebp\nmov    ebp, esp\npop    ebp\njmp    0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
- {'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand    ebx, 0xfd<-0x03>\nlea    ecx, [esp + 0x34]\nmov    DWORD PTR ss:[esp + 0x10], ebx\ncall   0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
- {'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush   0xff<-0x01>\npush   0x0042fa64\nmov    eax, DWORD PTR fs:[0x00000000]\npush   eax\npush   ecx\npush   ebx\npush   ebp\npush   esi\npush   edi\nmov    eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor    eax, esp\npush   eax\nlea    eax, [esp + 0x18]\nmov    DWORD PTR fs:[0x00000000], eax\nmov    esi, ecx\nmov    DWORD PTR ss:[esp + 0x14], esi\npush   esi\nmov    DWORD PTR ss:[esp + 0x24], 0x00000004\ncall   0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
- {'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp    DWORD PTR ss:[esp + 0x30], 0x10\njb     0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
- {'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd    esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
-]
-edges = [
-{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
-]
-
 var container = document.getElementById('mynetwork');
 var data = {'nodes': nodes, 'edges': edges}
-var gph = new vis.Network(container, data, opts);
+var gph = new vis.Network(container, data, options);
 </script>
 </body>
 </html>

examples/network/exampleApplications/disassemblerExample.js

@@ -0,0 +1,53 @@
+var options = {
+  manipulation: false,
+  height: '90%',
+  layout: {
+    hierarchical: {
+      enabled: true,
+      levelSeparation: 300
+    }
+  },
+  physics: {
+    hierarchicalRepulsion: {
+      nodeDistance: 300
+    }
+  }
+};
+
+var nodes = [
+ {'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov    DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov    DWORD PTR ss:[ebp + 0x00], esi\ntest   bl, 0x02\nje     0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest   bl, 0x01\nje     0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov    ecx, DWORD PTR ss:[esp + 0x1c]\npush   ecx\ncall   0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov    eax, 0x00000002\nmov    ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov    DWORD PTR fs:[0x00000000], ecx\npop    ecx\npop    esi\npop    ebp\npop    ebx\nadd    esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov    edi, edi\npush   ebp\nmov    ebp, esp\npop    ebp\njmp    0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand    ebx, 0xfd<-0x03>\nlea    ecx, [esp + 0x34]\nmov    DWORD PTR ss:[esp + 0x10], ebx\ncall   0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush   0xff<-0x01>\npush   0x0042fa64\nmov    eax, DWORD PTR fs:[0x00000000]\npush   eax\npush   ecx\npush   ebx\npush   ebp\npush   esi\npush   edi\nmov    eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor    eax, esp\npush   eax\nlea    eax, [esp + 0x18]\nmov    DWORD PTR fs:[0x00000000], eax\nmov    esi, ecx\nmov    DWORD PTR ss:[esp + 0x14], esi\npush   esi\nmov    DWORD PTR ss:[esp + 0x24], 0x00000004\ncall   0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp    DWORD PTR ss:[esp + 0x30], 0x10\njb     0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd    esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+];
+
+
+//
+// Note: there are a couple of node id's present here which do not exist
+// - cfg_0x00417563 
+// - cfg_0x00403489
+// - cfg_0x0042f03f
+//
+// The edges with these id's will not load into the Network instance.
+//
+var edges = [
+{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+];

examples/network/labels/labelAlignment.html

@@ -9,7 +9,7 @@
   <style type="text/css">
     #mynetwork {
       width: 600px;
-      height: 600px;
+      height: 400px;
       border: 1px solid lightgray;
     }
     p {
@@ -25,8 +25,12 @@
 <p>Text-alignment within node labels can be 'left' or 'center', other font alignments not implemented.</p>
 <p>Label alignment (placement of label &quot;box&quot;) for nodes (top, bottom, left, right, inside) is
 planned but not in vis yet.</p>
+<p>The click event is captured and displayed to illustrate how the clicking on labels works.
+You can drag the nodes over each other to see how this influences the click event values.
+</p>
 
 <div id="mynetwork"></div>
+<pre id="eventSpan"></pre>
 
 <script type="text/javascript">
   // create an array with nodes
@@ -53,8 +57,13 @@ planned but not in vis yet.
     nodes: nodes,
     edges: edges
   };
-  var options = {};
+  var options = {physics:false};
   var network = new vis.Network(container, data, options);
+
+    network.on("click", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
+    });
 </script>
 
 </body>

examples/network/other/changingClusteredEdgesNodes.html

@@ -27,9 +27,9 @@
 
 
 <p>
-Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li>
+Demonstrating getBaseEdges, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li>
 <li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li>
-<li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li>
+<li>Clicking on an edge will also show the results of getBaseEdges and getClusteredEdge</li>
 </ul>
 </p>
 
@@ -94,7 +94,7 @@ Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode.
             var obj = {};
             obj.clicked_id = params.edges[0];
             network.clustering.updateEdge(params.edges[0], {color : '#aa0000'});
-            obj.base_edge = network.clustering.getBaseEdge(params.edges[0]);
+            obj.base_edges = network.clustering.getBaseEdges(params.edges[0]);
             obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]);
             document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4);
         }

examples/network/other/manipulationEditEdgeNoDrag.html

@@ -113,12 +113,12 @@
           addNode: function (data, callback) {
             // filling in the popup DOM elements
             document.getElementById('node-operation').innerHTML = "Add Node";
-            editNode(data, callback);
+            editNode(data, clearNodePopUp, callback);
           },
           editNode: function (data, callback) {
             // filling in the popup DOM elements
             document.getElementById('node-operation').innerHTML = "Edit Node";
-            editNode(data, callback);
+            editNode(data, cancelNodeEdit, callback);
           },
           addEdge: function (data, callback) {
             if (data.from == data.to) {
@@ -142,13 +142,14 @@
       network = new vis.Network(container, data, options);
     }
 
-    function editNode(data, callback) {
+    function editNode(data, cancelAction, callback) {
       document.getElementById('node-label').value = data.label;
       document.getElementById('node-saveButton').onclick = saveNodeData.bind(this, data, callback);
-      document.getElementById('node-cancelButton').onclick = clearNodePopUp.bind();
+      document.getElementById('node-cancelButton').onclick = cancelAction.bind(this, callback);
       document.getElementById('node-popUp').style.display = 'block';
     }
 
+    // Callback passed as parameter is ignored
     function clearNodePopUp() {
       document.getElementById('node-saveButton').onclick = null;
       document.getElementById('node-cancelButton').onclick = null;

examples/timeline/groups/subgroups.html

@@ -21,12 +21,68 @@
         .vis-item.vis-background.marker {
             border-left: 2px solid green;
         }
+
+        table {
+            border: 1px solid gray;
+        }
+
+        td {            
+            text-align: center
+        }
+
+        code {
+            padding: 2px 4px;
+            font-size: 90%;
+            color: #c7254e;
+            background-color: #f9f2f4;
+            border-radius: 4px;
+        }
     </style>
 </head>
 <body>
 
-<p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p>
-<button onclick="toggleStackSubgroups()">Toggle stackSubgroups</button>
+<p>This example shows the workings of the subgroups. Subgroups can be stacked on each other, and the items within each subgroup can be stacked.</p>
+<p>When stacking is on for the whole timeline, all items in the timeline will be stacked with respect to each other <em>unless</em> the <code>stackSubgroups</code> option is set to <code>true</code>
+   and at least one subgroup has stacking enabled. In that case the subgroups will be stacked with respect to each other and the elements in each subgroup will be stacked based on the individual
+   stacking settings for each subgroup.
+</p>
+<table>
+    <thead>
+        <tr>
+            <th>Option</th>
+            <th>Status</th>
+            <th>Toggle</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr >
+            <td>Stacking</td>
+            <td id="stackingStatus">false</td>
+            <td><button onclick="toggleStacking()">Toggle</button></td>
+        </tr>
+        <tr>
+            <td>stackSubgroups</td>
+            <td id="stackSubgroupsStatus">true</td>
+            <td><button onclick="toggleStackSubgroups()">Toggle</button></td>
+        </tr>
+        <tr>
+            <td>Stack Subgroup 0</td>
+            <td id="stacksg_1">false</td>
+            <td><button onclick="toggleSubgroupStack('sg_1')">Toggle</button></td>
+        </tr>
+        <tr>
+            <td>Stack Subgroup 1</td>
+            <td id="stacksg_2">false</td>
+            <td><button onclick="toggleSubgroupStack('sg_2')">Toggle</button></td>
+        </tr>
+        <tr>
+            <td>Stack Subgroup 2</td>
+            <td id="stacksg_3">false</td>
+            <td><button onclick="toggleSubgroupStack('sg_3')">Toggle</button></td>
+        </tr>
+    </tbody>
+</table>
+<br/>
 
 <div id="visualization"></div>
 
@@ -39,7 +95,7 @@
         type: { start: 'ISODate', end: 'ISODate' }
     });
     var groups = new vis.DataSet([{
-        id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}
+        id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}, subgroupStack: {'sg_1': false, 'sg_2': false, 'sg_3': false }
     },{
         id: 'foo', content:'foo', subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
     }]);
@@ -51,16 +107,26 @@
 
         {id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0},
         {id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0},
-        {id: 1, content: 'subgroup0', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
-        {id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
-        {id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
-        {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
+        {id: 1, content: 'subgroup0_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
+        {id: 2, content: 'subgroup0_2', start: '2014-01-22T12:00:01', end: '2014-01-25T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
+
+        {id: 'SG_2_1', start: '2014-02-01', end: '2014-02-02', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
+        {id: 'SG_2_2', start: '2014-02-2', end: '2014-02-03', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
+        {id: 3, content: 'subgroup1_1', start: '2014-01-27T02:00:00', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
+        {id: 4, content: 'subgroup1_2', start: '2014-01-28', end: '2014-02-02',group:'bar', subgroup:'sg_2', subgroupOrder:1},
+
+        {id: 'SG_3_1',start: '2014-01-23', end: '2014-01-25', type: 'background', group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"a"},
+        {id: 'SG_3_2', start: '2014-01-26', end: '2014-01-28', type: 'background', className: 'positive',group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"b"},
+        {id: 5, content: 'subgroup2_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
+        {id: 6, content: 'subgroup2_2', start: '2014-01-26T12:00:01', end: '2014-01-29T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
 
         {id: 'background', start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
         {id: 'background_all', start: '2014-01-31', end: '2014-02-02', type: 'background', className: 'positive'},
     ]);
 
     var container = document.getElementById('visualization');
+    var stackingStatus = document.getElementById('stackingStatus');
+    var stackSubgroupsStatus = document.getElementById('stackSubgroupsStatus');
     var options = {
         // orientation:'top'
         start: '2014-01-10',
@@ -72,10 +138,24 @@
 
     var timeline = new vis.Timeline(container, items, groups, options);
 
+    function toggleStacking() {
+        options.stack = !options.stack;
+        stackingStatus.innerHTML = options.stack.toString();
+        timeline.setOptions(options);
+    }
+
     function toggleStackSubgroups() {
         options.stackSubgroups = !options.stackSubgroups;
+        stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();
         timeline.setOptions(options);
     }
+
+    function toggleSubgroupStack(subgroup) {
+        groups.get("bar").subgroupStack[subgroup] = !groups.get("bar").subgroupStack[subgroup];
+        document.getElementById('stack' + subgroup).innerHTML = groups.get("bar").subgroupStack[subgroup].toString();
+        timeline.setGroups(groups);        
+    }
+
 </script>
 </body>
 </html>

examples/timeline/interaction/eventListeners.html

@@ -34,7 +34,8 @@
 
     var container = document.getElementById('visualization');
     var options = {
-      editable: true
+      editable: true,
+      onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); },
     };
     var timeline = new vis.Timeline(container, items, options);
 

examples/timeline/interaction/setSelection.html

@@ -26,6 +26,21 @@
 </p>
 <div id="visualization"></div>
 
+<br/>
+<p>If the height of the timeline is limited some items may be vertically offscreen. This demo uses <code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that focusing on an item will 
+cause the timeline to scroll vertically to the item that is being focused on. You can use the buttons below select a random item either above or below the currently selected item.
+</p>
+<button id="prevFocus">Select Item Above</button>
+<button id="nextFocus">Select Item Below</button>
+<br/>
+
+<p>If focusing on multiple items only the first item will be scrolled to. Try entering several ids and hitting <em>select</em>.</p>
+<p>
+Select item(s): <input type="text" id="selectionVertical" value="g1_5, g2_3"><input type="button" id="selectVertical" value="Select"><br>
+</p>
+
+<div id="vertical-visualization"></div>
+
 <script>
   // create a dataset with items
   // we specify the type of the fields `start` and `end` here to be strings
@@ -61,6 +76,99 @@
     });
     timeline.setSelection(ids, {focus: focus.checked});
   };
+
+  function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
+  };
+
+  // Vertical scroll example
+  var groups = [];
+  var items = [];
+  var groupItems = {};
+
+  for (var g = 0; g < 10; g++) {
+    groups.push({
+      id: g,
+      content: "Group " + g
+    });
+
+    groupItems[g] = [];
+
+    for (var i = 0; i < 30; i++) {
+      items.push({
+        id: "g" + g + "_" + i,
+        content: "g" + g + "_" + i,
+        group: g,
+        start: "2014-" + (g + 1) + "-" + getRandomInt(1, 20)
+      });
+
+      groupItems[g].push(items[items.length - 1]);
+    }
+  }
+
+  var container2 = document.getElementById('vertical-visualization');
+  var options = {
+    editable: false,
+    stack: true,
+    height: 300,
+    verticalScroll: true,
+    groupOrder: 'id'
+  };
+
+  var timeline2 = new vis.Timeline(container2, items, groups, options);
+
+  var groupIndex = 0;
+  var itemIndex = 0;
+
+  var moveToItem = function(direction) {
+    itemIndex += direction;
+    groupIndex += direction;
+
+    if (groupIndex < 0) {
+      groupIndex = groups.length - 1;
+    } else if (groupIndex >= groups.length) {
+      groupIndex = 0;
+    }
+
+    var items = groupItems[groupIndex];
+
+    if (itemIndex < 0) {
+      itemIndex = items.length - 1;
+    } else if (itemIndex >= items.length) {
+      itemIndex = 0;
+    }
+
+    var id = items[itemIndex].id;
+
+    timeline2.setSelection(id, {focus: true});
+  }
+
+  var nextFocus = document.getElementById('nextFocus');
+  var prevFocus = document.getElementById('prevFocus');
+  var selectionVertical = document.getElementById('selectionVertical');
+  var selectVertical = document.getElementById('selectVertical');
+
+  selectVertical.onclick = function () {
+    var ids = selectionVertical.value.split(',').map(function (value) {
+      return value.trim();
+    });
+    timeline2.setSelection(ids, {focus: focus.checked});
+  };
+
+  nextFocus.onclick = function() {
+    moveToItem(1);
+  };
+
+  prevFocus.onclick = function() {
+    moveToItem(-1);
+  };
+
+  // Set the initial focus
+  setTimeout(function() {
+    moveToItem(0);
+  }, 500);
 </script>
 </body>
 </html>

examples/timeline/other/drag&drop.html

@@ -27,6 +27,27 @@
       font-size: inherit;
       cursor: move;
     }
+    li.object-item {
+      list-style: none;
+      width: 150px;
+      color: #1A1A1A;
+      background-color: #D5DDF6;
+      border: 1px solid #97B0F8;
+      border-radius: 2px;
+      margin-bottom: 5px;
+      padding: 5px 12px;
+    }
+    li.object-item:before {
+      content: "≣";
+      font-family: Arial, sans-serif;
+      display: inline-block;
+      font-size: inherit;
+      cursor: move;
+    }
+    .items-panel {
+      display: flex;
+      justify-content: space-around;
+    }
   </style>
 </head>
 
@@ -37,23 +58,33 @@
 <p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set  the item's information as you want this way.</p>
 
 <div id="mytimeline" ></div>
-<div>
-  <h3>Items:</h3>
-  <ul class="items">
-    <li draggable="true" class="item">
-      item 1 - box
-    </li>
-    <li draggable="true" class="item">
-      item 2 - point
-    </li>
-    <li draggable="true" class="item">
-      item 3 - range
-    </li>
-    <li draggable="true" class="item">
-      item 3 - range - fixed times - <br>
-      (start: now, end: now + 10 min)
+
+<div class='items-panel'>
+  <div class='side'>
+    <h3>Items:</h3>
+    <ul class="items">
+      <li draggable="true" class="item">
+        item 1 - box
+      </li>
+      <li draggable="true" class="item">
+        item 2 - point
+      </li>
+      <li draggable="true" class="item">
+        item 3 - range
+      </li>
+      <li draggable="true" class="item">
+        item 3 - range - fixed times - <br>
+        (start: now, end: now + 10 min)
+      </li>
+    </ul>
+  </div>
+
+  <div class='side'>
+    <h3>Object with "target:'item'":</h3>
+    <li draggable="true" class="object-item">
+      object with target:'item'
     </li>
-  </ul>
+  </div>
 </div>
 
 <script>
@@ -99,7 +130,11 @@
     start: new Date(),
     end: new Date(1000*60*60*24 + (new Date()).valueOf()),
     editable: true,
-    orientation: 'top'
+    orientation: 'top',
+    onDropObjectOnItem: function(objectData, item, callback) {
+      if (!item) { return; }
+      alert('dropped object with content: "' + objectData.content + '" to item: "' + item.content + '"');
+    }
   };
 
   // create a Timeline
@@ -107,7 +142,7 @@
   timeline1 = new vis.Timeline(container, items, groups, options);
 
   function handleDragStart(event) {
-    dragSrcEl = event.target;
+    var dragSrcEl = event.target;
 
     event.dataTransfer.effectAllowed = 'move';
     var itemType = event.target.innerHTML.split('-')[1].trim();
@@ -122,17 +157,34 @@
       item.start = new Date();
       item.end = new Date(1000*60*10 + (new Date()).valueOf());
     }
-
     event.dataTransfer.setData("text", JSON.stringify(item));
   }
 
+  function handleObjectItemDragStart(event) {
+    var dragSrcEl = event.target;
+    
+    event.dataTransfer.effectAllowed = 'move';
+    var objectItem = {
+      content: 'objectItemData',
+      target: 'item'
+    };
+    event.dataTransfer.setData("text", JSON.stringify(objectItem));
+  }
+
   var items = document.querySelectorAll('.items .item');
 
+  var objectItems = document.querySelectorAll('.object-item');
+
   for (var i = items.length - 1; i >= 0; i--) {
     var item = items[i];
     item.addEventListener('dragstart', handleDragStart.bind(this), false);
   }
 
+  for (var i = objectItems.length - 1; i >= 0; i--) {
+    var objectItem = objectItems[i];
+    objectItem.addEventListener('dragstart', handleObjectItemDragStart.bind(this), false);
+  }
+
 </script>
 
 </body>

examples/timeline/other/stressPerformance.html

@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!-- 
+  This example is used mainly for developers to test performance issues by controlling number of groups, 
+  number of items and their types.
+ -->
+<html>
+
+<head>
+  <title>Timeline | Stress Performance 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>
+  <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 = {
+    width: '100%',
+    showCurrentTime: false,
+    stack: true,
+    selectable: true,
+    editable: true,
+  };
+
+  var timeline = new vis.Timeline(container);
+  timeline.setOptions(options);
+  timeline.setGroups(groups);
+  timeline.setItems(items);
+</script>
+
+</html>

index.html

@@ -29,7 +29,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -37,7 +37,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.20.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
+                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.21.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
                 document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
                 document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
             }
@@ -205,13 +205,13 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js" target="_blank">vis.min.js</a> <br>
-                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" target="_blank">vis.min.js</a> <br>
+                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="https://github.com/almende/vis/archive/v4.20.0.zip">v4.20.0.zip</a>
+                        <a href="https://github.com/almende/vis/archive/v4.21.0.zip">v4.21.0.zip</a>
                     </p>
                 </div>
             </div>