Improvements to support group visibility (see #2315) (#2334)

* Add hidden groups height calculations
* Fix jittering groups
* Remove non-existant parameter
* Cleanup example
* Remove console.log

examples/timeline/groups/verticalItemsHide.html

@@ -106,12 +106,6 @@
     maxHeight: 400,
     start: new Date(),
     end: new Date(1000*60*60*24 + (new Date()).valueOf()),
-    editable: true,
-    margin: {
-      item: 10, // minimal margin between items
-      axis: 5   // minimal margin between items and the axis
-    },
-    orientation: 'top'
   };
 
 

lib/timeline/component/BackgroundGroup.js

@@ -28,7 +28,7 @@ BackgroundGroup.prototype = Object.create(Group.prototype);
 BackgroundGroup.prototype.redraw = function(range, margin, restack) {
   var resized = false;
 
-  this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+  this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range);
 
   // calculate actual size
   this.width = this.dom.background.offsetWidth;

lib/timeline/component/Group.js

@@ -27,6 +27,7 @@ function Group (groupId, data, itemSet) {
 
   this.items = {};        // items filtered by groupId of this group
   this.visibleItems = []; // items currently visible in window
+  this.itemsInRange = []; // items currently in range
   this.orderedItems = {
     byStart: [],
     byEnd: []
@@ -183,8 +184,6 @@ Group.prototype.redraw = function(range, margin, restack) {
   // recalculate the height of the subgroups
   this._calculateSubGroupHeights();
 
-  this.isVisible = this._isGroupVisible(range, margin);
-
   // calculate actual size and position
   var foreground = this.dom.foreground;
   this.top = foreground.offsetTop;
@@ -217,12 +216,12 @@ Group.prototype.redraw = function(range, margin, restack) {
       stack.stack(customOrderedItems, margin, true /* restack=true */);
     }
 
-    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+    this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range);
   }
   else {
     // no custom order function, lazy stacking
 
-    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+    this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range);
     if (this.itemSet.options.stack) { // TODO: ugly way to access options...
       stack.stack(this.visibleItems, margin, restack);
     }
@@ -231,10 +230,6 @@ Group.prototype.redraw = function(range, margin, restack) {
     }
   }
 	
-  if (!this.isVisible && this.height) {
-    return resized = false;
-  }
-
   // recalculate the height of the group
   var height = this._calculateHeight(margin);
 
@@ -257,6 +252,13 @@ Group.prototype.redraw = function(range, margin, restack) {
   for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
     var item = this.visibleItems[i];
     item.repositionY(margin);
+    if (!this.isVisible && this.groupId != "__background__") {
+      if (item.displayed) item.hide();
+    }
+  }
+
+  if (!this.isVisible && this.height) {
+    return resized = false;
   }
 
   return resized;
@@ -301,11 +303,11 @@ Group.prototype._isGroupVisible = function (range, margin) {
 Group.prototype._calculateHeight = function (margin) {
   // recalculate the height of the group
   var height;
-  var visibleItems = this.visibleItems;
-  if (visibleItems.length > 0) {
-    var min = visibleItems[0].top;
-    var max = visibleItems[0].top + visibleItems[0].height;
-    util.forEach(visibleItems, function (item) {
+  var itemsInRange = this.visibleItems;
+  if (itemsInRange.length > 0) {
+    var min = itemsInRange[0].top;
+    var max = itemsInRange[0].top + itemsInRange[0].height;
+    util.forEach(itemsInRange, function (item) {
       min = Math.min(min, item.top);
       max = Math.max(max, (item.top + item.height));
     });
@@ -313,7 +315,7 @@ Group.prototype._calculateHeight = function (margin) {
       // there is an empty gap between the lowest item and the axis
       var offset = min - margin.axis;
       max -= offset;
-      util.forEach(visibleItems, function (item) {
+      util.forEach(itemsInRange, function (item) {
         item.top -= offset;
       });
     }
@@ -499,16 +501,9 @@ Group.prototype.order = function() {
  * @return {Item[]} visibleItems                            The new visible items.
  * @private
  */
-Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, range) {
+Group.prototype._updateItemsInRange = function(orderedItems, oldVisibleItems, range) {
   var visibleItems = [];
   var visibleItemsLookup = {}; // we keep this to quickly look up if an item already exists in the list without using indexOf on visibleItems
-  if (!this.isVisible && this.groupId != "__background__") {
-    for (var i = 0; i < oldVisibleItems.length; i++) {
-      var item = oldVisibleItems[i];
-      if (item.displayed) item.hide();
-    }
-    return visibleItems;
-  } 
 
   var interval = (range.end - range.start) / 4;
   var lowerBound = range.start - interval;