From 0ba6e164980b3ad684f47543674ba40bd94f0644 Mon Sep 17 00:00:00 2001 From: yotamberk Date: Tue, 13 Sep 2016 17:16:33 +0300 Subject: [PATCH] Hide vertically hidden ranged items in groups that are not visible (#2062) * Hide vertically hidden ranged items in groups that are not visible * Fix misspelling * Fix examples that do not contain groups * Add example for vertical hidden ranged items * Fix indent format in RangeItem * Fix example * Fix other examples after addition of vertical hiding range items in groups * Add case of zero margin axis --- .../timeline/groups/verticalItemsHide.html | 122 ++++++++++++++++++ lib/timeline/component/Group.js | 45 +++++-- lib/timeline/component/item/RangeItem.js | 10 +- 3 files changed, 164 insertions(+), 13 deletions(-) create mode 100644 examples/timeline/groups/verticalItemsHide.html 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