released version 1.0.1

dist/vis.js

@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version 1.0.0
- * @date    2014-05-02
+ * @version 1.0.1
+ * @date    2014-05-09
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -417,7 +417,7 @@ util.extend = function (a, b) {
 util.equalArray = function (a, b) {
   if (a.length != b.length) return false;
 
-  for (var i = 1, len = a.length; i < len; i++) {
+  for (var i = 0, len = a.length; i < len; i++) {
     if (a[i] != b[i]) return false;
   }
 
@@ -2595,7 +2595,7 @@ stack.collision = function collision (a, b, margin) {
  * @param {Date} [end]           The end date
  * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
  */
-TimeStep = function(start, end, minimumStep) {
+function TimeStep(start, end, minimumStep) {
   // variables
   this.current = new Date();
   this._start = new Date();
@@ -2607,7 +2607,7 @@ TimeStep = function(start, end, minimumStep) {
 
   // initialize the range
   this.setRange(start, end, minimumStep);
-};
+}
 
 /// enum scale
 TimeStep.SCALE = {
@@ -5484,7 +5484,9 @@ ItemSet.prototype._updateItem = function _updateItem(item, itemData) {
   var oldGroupId = item.data.group;
 
   item.data = itemData;
-  item.repaint();
+  if (item.displayed) {
+    item.repaint();
+  }
 
   // update group
   if (oldGroupId != item.data.group) {
@@ -6677,9 +6679,10 @@ ItemRangeOverflow.prototype.repositionX = function repositionX() {
 
   this.left = start;
   var boxWidth = Math.max(end - start, 1);
-  this.width = (this.props.content.width < boxWidth) ?
-      boxWidth :
-      start + contentLeft + this.props.content.width;
+  this.width = boxWidth + this.props.content.width;
+  // Note: The calculation of width is an optimistic calculation, giving
+  //       a width which will not change when moving the Timeline
+  //       So no restacking needed, which is nicer for the eye
 
   this.dom.box.style.left = this.left + 'px';
   this.dom.box.style.width = boxWidth + 'px';
@@ -10779,10 +10782,10 @@ Popup.prototype.hide = function () {
  * @class Groups
  * This class can store groups and properties specific for groups.
  */
-Groups = function () {
+function Groups() {
   this.clear();
   this.defaultIndex = 0;
-};
+}
 
 
 /**
@@ -10860,11 +10863,11 @@ Groups.prototype.add = function (groupname, style) {
  * @class Images
  * This class loads images and keeps them stored.
  */
-Images = function () {
+function Images() {
   this.images = {};
 
   this.callback = undefined;
-};
+}
 
 /**
  * Set an onload callback function. This will be called each time an image
@@ -11541,10 +11544,12 @@ function switchConfigurations () {
     this.constants.physics.barnesHut.enabled = false;
   }
   else if (radioButton == "H") {
-    this.constants.hierarchicalLayout.enabled = true;
-    this.constants.physics.hierarchicalRepulsion.enabled = true;
-    this.constants.physics.barnesHut.enabled = false;
-    this._setupHierarchicalLayout();
+    if (this.constants.hierarchicalLayout.enabled == false) {
+      this.constants.hierarchicalLayout.enabled = true;
+      this.constants.physics.hierarchicalRepulsion.enabled = true;
+      this.constants.physics.barnesHut.enabled = false;
+      this._setupHierarchicalLayout();
+    }
   }
   else {
     this.constants.hierarchicalLayout.enabled = false;
@@ -13152,7 +13157,7 @@ var SectorMixin = {
 //      console.log("the node is part of the active sector");
 //    }
 //    else {
-//      console.log("I dont know what the fuck happened!!");
+//      console.log("I dont know what happened!!");
 //    }
 
     // when we switch to a new sector, we remove the node that will be expanded from the current nodes list.
@@ -16096,6 +16101,17 @@ Graph.prototype.setOptions = function (options) {
           }
         }
       }
+
+      if (options.physics.hierarchicalRepulsion) {
+        this.constants.hierarchicalLayout.enabled = true;
+        this.constants.physics.hierarchicalRepulsion.enabled = true;
+        this.constants.physics.barnesHut.enabled = false;
+        for (prop in options.physics.hierarchicalRepulsion) {
+          if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
+            this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
+          }
+        }
+      }
     }
 
     if (options.hierarchicalLayout) {
@@ -16499,6 +16515,7 @@ Graph.prototype._handleOnDrag = function(event) {
       this.drag.translation.y + diffY);
     this._redraw();
     this.moving = true;
+    this.start();
   }
 };
 
@@ -16608,6 +16625,13 @@ Graph.prototype._zoom = function(scale, pointer) {
   this.updateClustersDefault();
   this._redraw();
 
+  if (scaleOld < scale) {
+    this.emit("zoom", {direction:"+"});
+  }
+  else {
+    this.emit("zoom", {direction:"-"});
+  }
+
 
   return scale;
 };
@@ -17201,6 +17225,8 @@ Graph.prototype._setTranslation = function(offsetX, offsetY) {
   if (offsetY !== undefined) {
     this.translation.y = offsetY;
   }
+
+  this.emit('viewChanged');
 };
 
 /**
@@ -17273,6 +17299,27 @@ Graph.prototype._yToCanvas = function(y) {
   return y * this.scale + this.translation.y ;
 };
 
+
+/**
+ *
+ * @param {object} pos   = {x: number, y: number}
+ * @returns {{x: number, y: number}}
+ * @constructor
+ */
+Graph.prototype.DOMtoCanvas = function(pos) {
+  return {x:this._xToCanvas(pos.x),y:this._yToCanvas(pos.y)};
+}
+
+/**
+ *
+ * @param {object} pos   = {x: number, y: number}
+ * @returns {{x: number, y: number}}
+ * @constructor
+ */
+Graph.prototype.canvasToDOM = function(pos) {
+  return {x:this._canvasToX(pos.x),y:this._canvasToY(pos.y)};
+}
+
 /**
  * Redraw all nodes
  * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
@@ -22624,4 +22671,4 @@ module.exports = mousetrap;
 
 },{}]},{},[1])
 (1)
-});
+});

docs/graph.html

@@ -1999,7 +1999,18 @@ var options: {
             You can use this to stablize your graph once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
         </td>
     </tr>
-
+    <tr>
+        <td>DOMtoCanvas(pos)</td>
+        <td>object</td>
+        <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
+        </td>
+    </tr>
+    <tr>
+        <td>canvasToDOM(pos)</td>
+        <td>object</td>
+        <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
+        </td>
+    </tr>
   <tr>
     <td>on(event, callback)</td>
     <td>none</td>
@@ -2161,6 +2172,23 @@ graph.off('select', onSelect);
             </ul>
         </td>
     </tr>
+    <tr>
+        <td>viewChanged</td>
+        <td>Fired when the view has changed. This is when the graph has moved or zoomed.</td>
+        <td>
+            none
+        </td>
+    </tr>
+    <tr>
+        <td>zoom</td>
+        <td>Fired when the graph has zoomed.  This event can be used to trigger the .storePosition() function after stabilization.</td>
+        <td>
+            <ul>
+                <li><code>direction: </code> "+" or "-" </li>
+            </ul>
+        </td>
+    </tr>
+
 </table>
 
 

examples/timeline/08_edit_items.html

@@ -18,6 +18,7 @@
   <div id="log"></div>
 
   <script type="text/javascript">
+    // note that months are zero-based in the JavaScript Date object, so month 3 is April
     var items = new vis.DataSet([
       {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
       {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},

examples/timeline/09_order_groups.html

@@ -33,6 +33,7 @@
   ]);
 
   // create a dataset with items
+  // note that months are zero-based in the JavaScript Date object, so month 3 is April
   var items = new vis.DataSet([
     {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
     {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},

examples/timeline/10_limit_move_and_zoom.html

@@ -27,6 +27,7 @@
 
 <script>
   // create some items
+  // note that months are zero-based in the JavaScript Date object, so month 4 is May
   var items = [
     {'start': new Date(2012, 4, 25), 'content': 'First'},
     {'start': new Date(2012, 4, 26), 'content': 'Last'}

examples/timeline/11_points.html

@@ -22,6 +22,7 @@
 <script type="text/javascript">
   var container = document.getElementById('visualization');
 
+  // note that months are zero-based in the JavaScript Date object
   var items = [
     {start: new Date(1939,8,1),  content: 'German Invasion of Poland'},
     {start: new Date(1940,4,10), content: 'Battle of France and the Low Countries'},

examples/timeline/12_custom_styling.html

@@ -65,6 +65,8 @@
 
 <script type="text/javascript">
   var container = document.getElementById('visualization');
+
+  // note that months are zero-based in the JavaScript Date object
   var items = [
     {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">'},
     {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'},
@@ -75,6 +77,7 @@
     {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
     {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">'}
   ];
+
   var options = {
     editable: true,
     margin: {
@@ -82,6 +85,7 @@
       axis: 40
     }
   };
+
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>

examples/timeline/15_item_class_names.html

@@ -73,6 +73,7 @@
 
 <script type="text/javascript">
   // create data
+  // note that months are zero-based in the JavaScript Date object
   var data = [
     {
       'start': new Date(2012,7,19),

index.html

@@ -74,7 +74,7 @@ bower install vis
 <h3>download</h3>
 
 <a href="download/vis.zip">Click here to download vis.js</a>
-(version <span class="version">1.0.0</span>)
+(version <span class="version">1.0.1</span>)
 
 
 <h2 id="example">Example</h2>