Temporarily fixed stacking in a primitive way

src/timeline/Controller.js

@@ -22,10 +22,10 @@ function Controller () {
     }
     else {
       if (!reflowTimer) {
-        reflowTimer = setTimeout(function () {
+        reflowTimer = requestAnimationFrame(function () {
           reflowTimer = null;
           me.reflow();
-        }, 0);
+        });
       }
     }
   });
@@ -42,10 +42,10 @@ function Controller () {
     }
     else {
       if (!repaintTimer) {
-        repaintTimer = setTimeout(function () {
+        repaintTimer = requestAnimationFrame(function () {
           repaintTimer = null;
           me.repaint();
-        }, 0);
+        });
       }
     }
   });

src/timeline/Stack.js

@@ -55,59 +55,40 @@ Stack.prototype.setOptions = function setOptions (options) {
 };
 
 /**
- * Order a map with items
- * @param {Object<String, Item>} items
- * @return {{asc: Item[], desc: Item[]}} sorted items
+ * Order an array with items using a predefined order function for items
+ * @param {Item[]} items
  */
 Stack.prototype.order = function order(items) {
-  var ordered = [];
-
-  // convert map to array
-  for (var id in items) {
-    if (items.hasOwnProperty(id)) ordered.push(items[id]);
-  }
-
-  /* FIXME: fix option order
   //order the items
   var order = this.options.order || this.defaultOptions.order;
   if (!(typeof order === 'function')) {
     throw new Error('Option order must be a function');
   }
-  ordered.sort(order);
-  */
-
-  // TODO: fix ordering, doesn't work correctly for ItemRange
-  ordered.sort(function (a, b) {
-    var aCenter = ('end' in a.data) ? (a.data.start + a.data.end) / 2 : a.data.start,
-        bCenter = ('end' in b.data) ? (b.data.start + b.data.end) / 2 : b.data.start;
-
-    return aCenter - bCenter;
-  });
-
-
-  /* TODO: cleanup
-  var asc = array.concat(),
-      desc= array.concat();
+  items.sort(order);
+};
 
-  // sort ascending
-  asc.sort(function (a, b) {
+/**
+ * Order items by their start data
+ * @param {Item[]} items
+ */
+Stack.prototype.orderByStart = function orderByStart(items) {
+  items.sort(function (a, b) {
     return a.data.start - b.data.start;
   });
+};
 
-  // sort descending
-  desc.sort(function (a, b) {
-    var aTime = 'end' in a.data ? a.data.end : a.data.start,
-        bTime = 'end' in b.data ? b.data.end : b.data.start;
+/**
+ * Order items by their end date. If they have no end date, their start date
+ * is used.
+ * @param {Item[]} items
+ */
+Stack.prototype.orderByEnd = function orderByEnd(items) {
+  items.sort(function (a, b) {
+    var aTime = ('end' in a.data) ? a.data.end : a.data.start,
+        bTime = ('end' in b.data) ? b.data.end : b.data.start;
 
-    return bTime - aTime;
+    return aTime - bTime;
   });
-
-  return {
-    asc: asc,
-    desc: desc
-  };
-  */
-  return ordered;
 };
 
 /**

src/timeline/component/ItemSet.js

@@ -56,10 +56,13 @@ function ItemSet(parent, depends, options) {
   };
 
   this.items = {};        // object with an Item for every data item
-  this.orderedItems = []; // ordered items
+  this.orderedItems = {
+    byStart: [],
+    byEnd: []
+  };
   this.visibleItems = []; // visible, ordered items
-  this.visibleItemsStart = 0; // start index of visible items in this.orderedItems
-  this.visibleItemsEnd = 0;   // start index of visible items in this.orderedItems
+  this.visibleItemsStart = 0; // start index of visible items in this.orderedItems // TODO: cleanup
+  this.visibleItemsEnd = 0;   // start index of visible items in this.orderedItems // TODO: cleanup
   this.selection = [];  // list with the ids of all selected nodes
   this.queue = {};      // queue with id/actions: 'add', 'update', 'delete'
   this.stack = new Stack(this, Object.create(this.options));
@@ -292,59 +295,80 @@ ItemSet.prototype.repaint = function repaint() {
     changed += update(this.dom.axis.style, 'top', this.top + 'px');
   }
 
-  // find start of visible items
-  var start = Math.min(this.visibleItemsStart, Math.max(this.orderedItems.length - 1, 0));
-  var item = this.orderedItems[start];
-  while (item && item.isVisible(this.range) && start > 0) {
-    start--;
-    item = this.orderedItems[start];
-  }
-  while (item && !item.isVisible(this.range)) {
-    if (item.displayed) item.hide();
+  // check whether zoomed (in that case we need to re-stack everything)
+  var visibleInterval = this.range.end - this.range.start;
+  var zoomed = this.visibleInterval != visibleInterval;
+  this.visibleInterval = visibleInterval;
 
+  /*
+  // find the first visible item
+  // TODO: use faster search, not linear
+  var byEnd = this.orderedItems.byEnd;
+  var start = 0;
+  var item = null;
+  while ((item = byEnd[start]) &&
+      (('end' in item.data) ? item.data.end : item.data.start) < this.range.start) {
     start++;
-    item = this.orderedItems[start];
   }
-  this.visibleItemsStart = start;
 
-  // find end of visible items
-  var end = Math.max(Math.min(this.visibleItemsEnd, this.orderedItems.length), this.visibleItemsStart);
-  item = this.orderedItems[end];
-  while (item && item.isVisible(this.range)) {
+  // find the last visible item
+  // TODO: use faster search, not linear
+  var byStart = this.orderedItems.byStart;
+  var end = 0;
+  while ((item = byStart[end]) && item.data.start < this.range.end) {
     end++;
-    item = this.orderedItems[end];
   }
-  item = this.orderedItems[end - 1];
-  while (item && !item.isVisible(this.range) && end > 0) {
-    if (item.displayed) item.hide();
-
-    end--;
-    item = this.orderedItems[end - 1];
-  }
-  this.visibleItemsEnd = end;
 
   console.log('visible items', start, end); // TODO: cleanup
+  console.log('visible item ids', byStart[start] && byStart[start].id, byEnd[end-1] && byEnd[end-1].id); // TODO: cleanup
 
-  this.visibleItems = this.orderedItems.slice(start, end);
-
-  // check whether zoomed (in that case we need to re-stack everything)
-  var visibleInterval = this.range.end - this.range.start;
-  var zoomed = this.visibleInterval != visibleInterval;
-  this.visibleInterval = visibleInterval;
+  this.visibleItems = [];
+  var i = start;
+  item = byStart[i];
+  var lastItem = byEnd[end];
+  while (item && item !== lastItem) {
+    this.visibleItems.push(item);
+    item = byStart[++i];
+  }
+  this.stack.order(this.visibleItems);
 
   // show visible items
   for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
-    var item = this.visibleItems[i];
+    item = this.visibleItems[i];
 
     if (!item.displayed) item.show();
-    if (zoomed) item.top = null; // reset stacking position
+    item.top = null; // reset stacking position
 
     // reposition item horizontally
     item.repositionX();
   }
+   */
+
+  // simple, brute force calculation of visible items
+  // TODO: replace with a faster, more sophisticated solution
+  this.visibleItems = [];
+  for (var id in this.items) {
+    if (this.items.hasOwnProperty(id)) {
+      var item = this.items[id];
+      if (item.isVisible(this.range)) {
+        if (!item.displayed) item.show();
+
+        // reset stacking position
+        if (zoomed) item.top = null;
+
+        // reposition item horizontally
+        item.repositionX();
+
+        this.visibleItems.push(item);
+      }
+      else {
+        if (item.displayed) item.hide();
+      }
+    }
+  }
 
   // reposition visible items vertically
-  // TODO: improve stacking, when moving the timeline to the right, update stacking in backward order
+  this.stack.order(this.visibleItems);
   this.stack.stack(this.visibleItems);
   for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
     this.visibleItems[i].repositionY();
@@ -630,8 +654,17 @@ ItemSet.prototype._onRemove = function _onRemove(ids) {
  * @private
  */
 ItemSet.prototype._order = function _order() {
+  var array = util.toArray(this.items);
+  this.orderedItems.byStart = array;
+  this.orderedItems.byEnd = [].concat(array);
+
   // reorder the items
-  this.orderedItems = this.stack.order(this.items);
+  this.stack.orderByStart(this.orderedItems.byStart);
+  this.stack.orderByEnd(this.orderedItems.byEnd);
+
+  // TODO: cleanup
+  //console.log('byStart', this.orderedItems.byStart.map(function (item) {return item.id}))
+  //console.log('byEnd', this.orderedItems.byEnd.map(function (item) {return item.id}))
 }
 
 /**

src/timeline/component/item/Item.js

@@ -22,7 +22,6 @@ function Item (parent, data, options, defaultOptions) {
   this.left = null;
   this.width = null;
   this.height = null;
-  this.offset = 0; // TODO: is offset still used or redundant?
 }
 
 /**
@@ -90,15 +89,6 @@ Item.prototype.repositionY = function repositionY() {
   // should be implemented by the item
 };
 
-/**
- * Give the item a display offset in pixels
- * @param {Number} offset    Offset on screen in pixels
- */
-// TODO: is setOffset redundant?
-Item.prototype.setOffset = function setOffset(offset) {
-  this.offset = offset;
-};
-
 /**
  * Repaint a delete button on the top right of the item when the item is selected
  * @param {HTMLElement} anchor

src/timeline/component/item/ItemBox.js

@@ -172,7 +172,7 @@ ItemBox.prototype.hide = function hide() {
  * @Override
  */
 ItemBox.prototype.repositionX = function repositionX() {
-  var start = this.parent.toScreen(this.data.start) + this.offset,
+  var start = this.parent.toScreen(this.data.start),
       align = this.options.align || this.defaultOptions.align,
       left,
       box = this.dom.box,

src/timeline/component/item/ItemPoint.js

@@ -163,7 +163,7 @@ ItemPoint.prototype.hide = function hide() {
  * @Override
  */
 ItemPoint.prototype.repositionX = function repositionX() {
-  var start = this.parent.toScreen(this.data.start) + this.offset;
+  var start = this.parent.toScreen(this.data.start);
 
   this.left = start - this.props.dot.width / 2;
 

src/timeline/component/item/ItemRange.js

@@ -154,8 +154,8 @@ ItemRange.prototype.hide = function hide() {
 ItemRange.prototype.repositionX = function repositionX() {
   var props = this.props,
       parentWidth = this.parent.width,
-      start = this.parent.toScreen(this.data.start) + this.offset,
-      end = this.parent.toScreen(this.data.end) + this.offset,
+      start = this.parent.toScreen(this.data.start),
+      end = this.parent.toScreen(this.data.end),
       padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding,
       contentLeft;
 

src/timeline/component/item/ItemRangeOverflow.js

@@ -29,8 +29,8 @@ ItemRangeOverflow.prototype.baseClassName = 'item rangeoverflow';
  */
 ItemRangeOverflow.prototype.repositionX = function repositionX() {
   var parentWidth = this.parent.width,
-      start = this.parent.toScreen(this.data.start) + this.offset,
-      end = this.parent.toScreen(this.data.end) + this.offset,
+      start = this.parent.toScreen(this.data.start),
+      end = this.parent.toScreen(this.data.end),
       padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding,
       contentLeft;
 

src/util.js

@@ -440,6 +440,22 @@ util.forEach = function forEach (object, callback) {
   }
 };
 
+/**
+ * Convert an object into an array: all objects properties are put into the
+ * array. The resulting array is unordered.
+ * @param {Object} object
+ * @param {Array} array
+ */
+util.toArray = function toArray(object) {
+  var array = [];
+
+  for (var prop in object) {
+    if (object.hasOwnProperty(prop)) array.push(object[prop]);
+  }
+
+  return array;
+}
+
 /**
  * Update a property in an object
  * @param {Object} object