Hide vertically hidden ranged items in groups that are not visible

lib/timeline/component/Group.js

@@ -14,6 +14,7 @@ function Group (groupId, data, itemSet) {
   this.subgroupIndex = 0;
   this.subgroupOrderer = data && data.subgroupOrder;
   this.itemSet = itemSet;
+  this.isVisible = null;
 
   this.dom = {};
   this.props = {
@@ -180,6 +181,8 @@ Group.prototype.redraw = function(range, margin, restack) {
   // recalculate the height of the subgroups
   this._calculateSubGroupHeights();
 
+  this.isVisible = this._isGroupVisible(range);
+
   // reposition visible items vertically
   if (typeof this.itemSet.options.order === 'function') {
     // a custom order function
@@ -219,6 +222,10 @@ 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);
 
@@ -265,6 +272,17 @@ Group.prototype._calculateSubGroupHeights = function () {
   }
 };
 
+/**
+ * check if group is visible
+ * @private
+  */
+Group.prototype._isGroupVisible = function (range) {
+  var isVisible = 
+    (this.top < range.body.domProps.centerContainer.height - range.body.domProps.scrollTop) && 
+    (this.top + this.height > - range.body.domProps.scrollTop);
+  return isVisible;
+}
+
 /**
  * recalculate the height of the group
  * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
@@ -475,6 +493,15 @@ Group.prototype.order = function() {
 Group.prototype._updateVisibleItems = 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) {
+    for (i = 0; i < oldVisibleItems.length; i++) {
+      item = oldVisibleItems[i];
+      if (item.displayed) item.hide();
+    }
+    return visibleItems;
+  } 
+
   var interval = (range.end - range.start) / 4;
   var lowerBound = range.start - interval;
   var upperBound = range.end + interval;

lib/timeline/component/item/RangeItem.js

@@ -43,8 +43,14 @@ RangeItem.prototype.baseClassName = 'vis-item vis-range';
  */
 RangeItem.prototype.isVisible = function(range) {
   // determine visibility
-  return (this.data.start < range.end) && (this.data.end > range.start);
-};
+var isVisible = 
+// determine horizontal visibillity
+  (this.data.start < range.end) && 
+  (this.data.end > range.start) && 
+// determine verticaltal visibillity
+  (this.parent.top < range.body.domProps.centerContainer.height - range.body.domProps.scrollTop) && 
+  (this.parent.top + this.parent.height > - range.body.domProps.scrollTop)
+return isVisible;};
 
 /**
  * Repaint the item