Browse Source

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
codeClimate
yotamberk 8 years ago
committed by Alexander Wunschik
parent
commit
878f0c53f3
3 changed files with 18 additions and 29 deletions
  1. +0
    -6
      examples/timeline/groups/verticalItemsHide.html
  2. +1
    -1
      lib/timeline/component/BackgroundGroup.js
  3. +17
    -22
      lib/timeline/component/Group.js

+ 0
- 6
examples/timeline/groups/verticalItemsHide.html View File

@ -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'
};

+ 1
- 1
lib/timeline/component/BackgroundGroup.js View File

@ -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;

+ 17
- 22
lib/timeline/component/Group.js View File

@ -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;

Loading…
Cancel
Save