moved brute force calc in update. restored examples

dist/vis.js

@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version @@version
- * @date    @@date
+ * @version 0.7.5-SNAPSHOT
+ * @date    2014-04-29
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -4772,7 +4772,7 @@ function ItemSet(backgroundPanel, axisPanel, options) {
     byStart: [],
     byEnd: []
   };
-  this.systemLoaded = false;
+//  this.systemLoaded = false;
   this.visibleItems = []; // visible, ordered items
   this.selection = [];  // list with the ids of all selected nodes
   this.queue = {};      // queue with id/actions: 'add', 'update', 'delete'
@@ -4999,7 +4999,7 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
 
   if (high == 0) {guess = -1;}
   else if (high == 1) {
-    if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end + interval)) {
+    if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end)) {
       guess =  0;
     }
     else {
@@ -5009,7 +5009,7 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
   else {
     high -= 1;
     while (found == false) {
-      if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end + interval)) {
+      if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end)) {
         found = true;
       }
       else {
@@ -5034,6 +5034,33 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
   return guess;
 }
 
+
+ItemSet.prototype._checkIfInvisible = function _checkIfInvisible(item) {
+  if (item.isVisible(this.range)) {
+    if (!item.displayed) item.show();
+    item.repositionX();
+    if (this.visibleItems.indexOf(item) == -1) {
+      this.visibleItems.push(item);
+    }
+    return false;
+  }
+  else {
+    return true;
+  }
+};
+
+ItemSet.prototype._checkIfVisible = function _checkIfVisible(item, visibleItems) {
+  if (item.isVisible(this.range)) {
+    if (!item.displayed) item.show();
+    // reposition item horizontally
+    item.repositionX();
+    visibleItems.push(item);
+  }
+  else {
+    if (item.displayed) item.hide();
+  }
+};
+
 /**
  * Repaint the component
  * @return {boolean} Returns true if the component is resized
@@ -5056,30 +5083,20 @@ ItemSet.prototype.repaint = function repaint() {
 
   var newVisibleItems = [];
   var item;
-  var range = this.range;
   var orderedItems = this.orderedItems;
 
   // first check if the items that were in view previously are still in view.
   // this handles the case for the ItemRange that is both before and after the current one.
   if (this.visibleItems.length > 0) {
     for (var i = 0; i < this.visibleItems.length; i++) {
-      item = this.visibleItems[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-        // reposition item horizontally
-        item.repositionX();
-
-        newVisibleItems.push(item);
-      }
-      else {
-        if (item.displayed) item.hide();
-      }
+      this._checkIfVisible(this.visibleItems[i],newVisibleItems);
     }
   }
+  this.visibleItems = newVisibleItems;
 
   // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
-  if (newVisibleItems.length == 0) {var initialPosByStart = this._binarySearch(false);}
-  else                             {var initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);}
+  if (this.visibleItems.length == 0) {var initialPosByStart = this._binarySearch(false);}
+  else                               {var initialPosByStart = orderedItems.byStart.indexOf(this.visibleItems[0]);}
 
   // use visible search to find a visible ItemRange (only based on endTime)
   var initialPosByEnd = this._binarySearch(true);
@@ -5087,96 +5104,23 @@ ItemSet.prototype.repaint = function repaint() {
   // if we found a initial ID to use, trace it up and down until we meet an invisible item.
   if (initialPosByStart != -1) {
     for (var i = initialPosByStart; i >= 0; i--) {
-
-      item = orderedItems.byStart[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        item.repositionX();
-        if (newVisibleItems.indexOf(item) == -1) {
-          newVisibleItems.push(item);
-        }
-      }
-      else {
-        break;
-      }
+      if (this._checkIfInvisible(orderedItems.byStart[i])) {break;}
     }
-
-    // and up
     for (var i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
-      item = orderedItems.byStart[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        item.repositionX();
-        if (newVisibleItems.indexOf(item) == -1) {
-          newVisibleItems.push(item);
-        }
-      }
-      else {
-        break;
-      }
+      if (this._checkIfInvisible(orderedItems.byStart[i])) {break;}
     }
   }
 
   // if we found a initial ID to use, trace it up and down until we meet an invisible item.
   if (initialPosByEnd != -1) {
     for (var i = initialPosByEnd; i >= 0; i--) {
-      item = orderedItems.byEnd[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        // reposition item horizontally
-        item.repositionX();
-        if (newVisibleItems.indexOf(item) == -1) {
-          newVisibleItems.push(item);
-        }
-      }
-      else {
-        break;
-      }
+      if (this._checkIfInvisible(orderedItems.byEnd[i])) {break;}
     }
-
-    // and up
     for (var i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
-      item = orderedItems.byEnd[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        // reposition item horizontally
-        item.repositionX();
-        if (newVisibleItems.indexOf(item) == -1) {
-          newVisibleItems.push(item);
-        }
-      }
-      else {
-        break;
-      }
-    }
-  }
-
-  if (!this.systemLoaded) {
-    // initial setup is brute force all the ranged items;
-    // TODO: implement this in the onUpdate function to only load the new items.
-    for (var i = 0; i < orderedItems.byEnd.length; i++) {
-      item = orderedItems.byEnd[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        // reposition item horizontally
-        item.repositionX();
-
-        newVisibleItems.push(item);
-      }
-      else {
-        if (item.displayed) item.hide();
-      }
+      if (this._checkIfInvisible(orderedItems.byEnd[i])) {break;}
     }
-    this.systemLoaded = true;
   }
 
-  this.visibleItems = newVisibleItems;
-
   // reposition visible items vertically
   //this.stack.order(this.visibleItems); // TODO: improve ordering
   var force = this.stackDirty || zoomed; // force re-stacking of all items if true
@@ -5372,10 +5316,13 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
     }
 
     me.items[id] = item;
+    if (type == 'range') {
+      me._checkIfVisible(item,this.visibleItems);
+    }
   });
 
   this._order();
-  this.systemLoaded = false;
+//  this.systemLoaded = false;
   this.stackDirty = true; // force re-stacking of all items next repaint
   this.emit('change');
 };
@@ -7816,7 +7763,7 @@ Timeline.prototype._onAddItem = function (event) {
   }
   else {
     // add item
-    var xAbs = vis.util.getAbsoluteLeft(this.rootPanel.frame);
+    var xAbs = vis.util.getAbsoluteLeft(this.contentPanel.frame);
     var x = event.gesture.center.pageX - xAbs;
     var newItem = {
       start: this.timeAxis.snap(this._toTime(x)),

examples/timeline/01_basic.html

@@ -21,26 +21,11 @@
     {id: 1, content: 'item 1', start: '2014-04-20'},
     {id: 2, content: 'item 2', start: '2014-04-14'},
     {id: 3, content: 'item 3', start: '2014-04-18'},
+    {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
     {id: 5, content: 'item 5', start: '2014-04-25'},
-    {id: 6, content: 'item 6', start: '2014-04-27'},
-      {id: 7, content: 'item 3', start: '2014-06-18'},
-      {id: 8, content: 'item 5', start: '2014-06-25'},
-      {id: 9, content: 'item 6', start: '2014-06-27'},
-      {id: 10, content: 'item 3', start: '2014-06-18'},
-      {id: 11, content: 'item 5', start: '2014-06-25'},
-      {id: 12, content: 'item 6', start: '2014-01-27'},
-      {id: 13, content: 'item 3', start: '2014-01-18'},
-      {id: 14, content: 'item 5', start: '2014-01-25'},
-      {id: 15, content: 'item 6', start: '2014-02-27'},
-      {id: 16, content: 'item 3', start: '2014-02-18'},
-      {id: 17, content: 'item 5', start: '2014-02-25'},
-      {id: 18, content: 'item 6', start: '2014-09-27'},
-    {id: 24, content: 'item 4', start: '2014-05-16', end: '2015-06-19'}
+    {id: 6, content: 'item 6', start: '2014-04-27'}
   ];
-  var options = {
-      start: '2014-02-10',
-      end: '2014-05-10'
-        };
+  var options = {};
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>

examples/timeline/03_much_data.html

@@ -22,7 +22,7 @@
 </h1>
 <p>
     <label for="count">Number of items</label>
-    <input id="count" value="100">
+    <input id="count" value="10000">
     <input id="draw" type="button" value="draw">
 </p>
 <div id="visualization"></div>

src/timeline/component/ItemSet.js

@@ -43,7 +43,7 @@ function ItemSet(backgroundPanel, axisPanel, options) {
     byStart: [],
     byEnd: []
   };
-  this.systemLoaded = false;
+//  this.systemLoaded = false;
   this.visibleItems = []; // visible, ordered items
   this.selection = [];  // list with the ids of all selected nodes
   this.queue = {};      // queue with id/actions: 'add', 'update', 'delete'
@@ -270,7 +270,7 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
 
   if (high == 0) {guess = -1;}
   else if (high == 1) {
-    if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end + interval)) {
+    if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end)) {
       guess =  0;
     }
     else {
@@ -280,7 +280,7 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
   else {
     high -= 1;
     while (found == false) {
-      if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end + interval)) {
+      if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end)) {
         found = true;
       }
       else {
@@ -305,6 +305,33 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
   return guess;
 }
 
+
+ItemSet.prototype._checkIfInvisible = function _checkIfInvisible(item) {
+  if (item.isVisible(this.range)) {
+    if (!item.displayed) item.show();
+    item.repositionX();
+    if (this.visibleItems.indexOf(item) == -1) {
+      this.visibleItems.push(item);
+    }
+    return false;
+  }
+  else {
+    return true;
+  }
+};
+
+ItemSet.prototype._checkIfVisible = function _checkIfVisible(item, visibleItems) {
+  if (item.isVisible(this.range)) {
+    if (!item.displayed) item.show();
+    // reposition item horizontally
+    item.repositionX();
+    visibleItems.push(item);
+  }
+  else {
+    if (item.displayed) item.hide();
+  }
+};
+
 /**
  * Repaint the component
  * @return {boolean} Returns true if the component is resized
@@ -327,30 +354,20 @@ ItemSet.prototype.repaint = function repaint() {
 
   var newVisibleItems = [];
   var item;
-  var range = this.range;
   var orderedItems = this.orderedItems;
 
   // first check if the items that were in view previously are still in view.
   // this handles the case for the ItemRange that is both before and after the current one.
   if (this.visibleItems.length > 0) {
     for (var i = 0; i < this.visibleItems.length; i++) {
-      item = this.visibleItems[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-        // reposition item horizontally
-        item.repositionX();
-
-        newVisibleItems.push(item);
-      }
-      else {
-        if (item.displayed) item.hide();
-      }
+      this._checkIfVisible(this.visibleItems[i],newVisibleItems);
     }
   }
+  this.visibleItems = newVisibleItems;
 
   // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
-  if (newVisibleItems.length == 0) {var initialPosByStart = this._binarySearch(false);}
-  else                             {var initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);}
+  if (this.visibleItems.length == 0) {var initialPosByStart = this._binarySearch(false);}
+  else                               {var initialPosByStart = orderedItems.byStart.indexOf(this.visibleItems[0]);}
 
   // use visible search to find a visible ItemRange (only based on endTime)
   var initialPosByEnd = this._binarySearch(true);
@@ -358,96 +375,23 @@ ItemSet.prototype.repaint = function repaint() {
   // if we found a initial ID to use, trace it up and down until we meet an invisible item.
   if (initialPosByStart != -1) {
     for (var i = initialPosByStart; i >= 0; i--) {
-
-      item = orderedItems.byStart[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        item.repositionX();
-        if (newVisibleItems.indexOf(item) == -1) {
-          newVisibleItems.push(item);
-        }
-      }
-      else {
-        break;
-      }
+      if (this._checkIfInvisible(orderedItems.byStart[i])) {break;}
     }
-
-    // and up
     for (var i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
-      item = orderedItems.byStart[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        item.repositionX();
-        if (newVisibleItems.indexOf(item) == -1) {
-          newVisibleItems.push(item);
-        }
-      }
-      else {
-        break;
-      }
+      if (this._checkIfInvisible(orderedItems.byStart[i])) {break;}
     }
   }
 
   // if we found a initial ID to use, trace it up and down until we meet an invisible item.
   if (initialPosByEnd != -1) {
     for (var i = initialPosByEnd; i >= 0; i--) {
-      item = orderedItems.byEnd[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        // reposition item horizontally
-        item.repositionX();
-        if (newVisibleItems.indexOf(item) == -1) {
-          newVisibleItems.push(item);
-        }
-      }
-      else {
-        break;
-      }
+      if (this._checkIfInvisible(orderedItems.byEnd[i])) {break;}
     }
-
-    // and up
     for (var i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
-      item = orderedItems.byEnd[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        // reposition item horizontally
-        item.repositionX();
-        if (newVisibleItems.indexOf(item) == -1) {
-          newVisibleItems.push(item);
-        }
-      }
-      else {
-        break;
-      }
-    }
-  }
-
-  if (!this.systemLoaded) {
-    // initial setup is brute force all the ranged items;
-    // TODO: implement this in the onUpdate function to only load the new items.
-    for (var i = 0; i < orderedItems.byEnd.length; i++) {
-      item = orderedItems.byEnd[i];
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-
-        // reposition item horizontally
-        item.repositionX();
-
-        newVisibleItems.push(item);
-      }
-      else {
-        if (item.displayed) item.hide();
-      }
+      if (this._checkIfInvisible(orderedItems.byEnd[i])) {break;}
     }
-    this.systemLoaded = true;
   }
 
-  this.visibleItems = newVisibleItems;
-
   // reposition visible items vertically
   //this.stack.order(this.visibleItems); // TODO: improve ordering
   var force = this.stackDirty || zoomed; // force re-stacking of all items if true
@@ -643,10 +587,13 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
     }
 
     me.items[id] = item;
+    if (type == 'range') {
+      me._checkIfVisible(item,this.visibleItems);
+    }
   });
 
   this._order();
-  this.systemLoaded = false;
+//  this.systemLoaded = false;
   this.stackDirty = true; // force re-stacking of all items next repaint
   this.emit('change');
 };