diff --git a/examples/timeline/groups/verticalItemsHide.html b/examples/timeline/groups/verticalItemsHide.html
new file mode 100644
index 00000000..a8a23cd4
--- /dev/null
+++ b/examples/timeline/groups/verticalItemsHide.html
@@ -0,0 +1,122 @@
+
+
+ Timeline | A lot of grouped data
+
+
+
+
+
+
+
+
+
+
+Timeline vertical visibility
+
+
+
+
+
visible items:
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index c11d7cce..4cc70248 100644
--- a/lib/timeline/component/Group.js
+++ b/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, margin);
+
// 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, margin) {
+ var isVisible =
+ (this.top <= range.body.domProps.centerContainer.height - range.body.domProps.scrollTop + margin.axis)
+ && (this.top + this.height + margin.axis >= - range.body.domProps.scrollTop);
+ return isVisible;
+}
+
/**
* recalculate the height of the group
* @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
@@ -475,10 +493,18 @@ 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 (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;
var upperBound = range.end + interval;
- var item, i;
// this function is used to do the binary search.
var searchFunction = function (value) {
@@ -491,7 +517,7 @@ Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, ra
// IMPORTANT: this handles the case for the items with startdate before the window and enddate after the window!
// also cleans up invisible items.
if (oldVisibleItems.length > 0) {
- for (i = 0; i < oldVisibleItems.length; i++) {
+ for (var i = 0; i < oldVisibleItems.length; i++) {
this._checkIfVisibleWithReference(oldVisibleItems[i], visibleItems, visibleItemsLookup, range);
}
}
@@ -524,8 +550,8 @@ Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, ra
// finally, we reposition all the visible items.
- for (i = 0; i < visibleItems.length; i++) {
- item = visibleItems[i];
+ for (var i = 0; i < visibleItems.length; i++) {
+ var item = visibleItems[i];
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
@@ -548,12 +574,9 @@ Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, ra
};
Group.prototype._traceVisible = function (initialPos, items, visibleItems, visibleItemsLookup, breakCondition) {
- var item;
- var i;
-
if (initialPos != -1) {
- for (i = initialPos; i >= 0; i--) {
- item = items[i];
+ for (var i = initialPos; i >= 0; i--) {
+ var item = items[i];
if (breakCondition(item)) {
break;
}
@@ -565,8 +588,8 @@ Group.prototype._traceVisible = function (initialPos, items, visibleItems, visib
}
}
- for (i = initialPos + 1; i < items.length; i++) {
- item = items[i];
+ for (var i = initialPos + 1; i < items.length; i++) {
+ var item = items[i];
if (breakCondition(item)) {
break;
}
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 694d21b6..f090f640 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/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 vertical 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