Browse Source

Fix Vertical visibility for all item types (#2143)

* 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
* Fix commented out lines in examples
* Fix vertical visibility bug
codeClimate
yotamberk 8 years ago
committed by Alexander Wunschik
parent
commit
932dfb1754
7 changed files with 36 additions and 31 deletions
  1. +4
    -0
      examples/timeline/groups/verticalItemsHide.html
  2. +9
    -15
      lib/timeline/component/Group.js
  3. +1
    -1
      lib/timeline/component/item/BackgroundItem.js
  4. +16
    -3
      lib/timeline/component/item/BoxItem.js
  5. +0
    -1
      lib/timeline/component/item/Item.js
  6. +4
    -3
      lib/timeline/component/item/PointItem.js
  7. +2
    -8
      lib/timeline/component/item/RangeItem.js

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

@ -72,6 +72,7 @@
// create items // create items
var items = new vis.DataSet(); var items = new vis.DataSet();
var types = [ 'box', 'point', 'range', 'background']
var order = 1; var order = 1;
var truck = 1; var truck = 1;
for (var j = 0; j < 25; j++) { for (var j = 0; j < 25; j++) {
@ -83,11 +84,14 @@
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date); var end = new Date(date);
var type = types[Math.floor(4 * Math.random())]
items.add({ items.add({
id: order, id: order,
group: truck, group: truck,
start: start, start: start,
end: end, end: end,
type: type,
content: 'Order ' + order content: 'Order ' + order
}); });

+ 9
- 15
lib/timeline/component/Group.js View File

@ -180,9 +180,16 @@ Group.prototype.redraw = function(range, margin, restack) {
// recalculate the height of the subgroups // recalculate the height of the subgroups
this._calculateSubGroupHeights(); this._calculateSubGroupHeights();
this.isVisible = this._isGroupVisible(range, margin); this.isVisible = this._isGroupVisible(range, margin);
// calculate actual size and position
var foreground = this.dom.foreground;
this.top = foreground.offsetTop;
this.right = foreground.offsetLeft;
this.width = foreground.offsetWidth;
this.isVisible = this._isGroupVisible(range, margin);
// reposition visible items vertically // reposition visible items vertically
if (typeof this.itemSet.options.order === 'function') { if (typeof this.itemSet.options.order === 'function') {
// a custom order function // a custom order function
@ -556,20 +563,7 @@ Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, ra
// reposition item horizontally // reposition item horizontally
item.repositionX(); item.repositionX();
} }
// debug
//console.log("new line")
//if (this.groupId == null) {
// for (i = 0; i < orderedItems.byStart.length; i++) {
// item = orderedItems.byStart[i].data;
// console.log('start',i,initialPosByStart, item.start.valueOf(), item.content, item.start >= lowerBound && item.start <= upperBound,i == initialPosByStart ? "<------------------- HEREEEE" : "")
// }
// for (i = 0; i < orderedItems.byEnd.length; i++) {
// item = orderedItems.byEnd[i].data;
// console.log('rangeEnd',i,initialPosByEnd, item.end.valueOf(), item.content, item.end >= range.start && item.end <= range.end,i == initialPosByEnd ? "<------------------- HEREEEE" : "")
// }
//}
return visibleItems; return visibleItems;
}; };

+ 1
- 1
lib/timeline/component/item/BackgroundItem.js View File

@ -47,7 +47,7 @@ BackgroundItem.prototype.stack = false;
*/ */
BackgroundItem.prototype.isVisible = function(range) { BackgroundItem.prototype.isVisible = function(range) {
// determine visibility // determine visibility
return (this.data.start < range.end) && (this.data.end > range.start);
return (this.data.start < range.end) && (this.data.end > range.start);
}; };
/** /**

+ 16
- 3
lib/timeline/component/item/BoxItem.js View File

@ -42,9 +42,22 @@ BoxItem.prototype = new Item (null, null, null);
*/ */
BoxItem.prototype.isVisible = function(range) { BoxItem.prototype.isVisible = function(range) {
// determine visibility // determine visibility
// TODO: account for the real width of the item. Right now we just add 1/4 to the window
var interval = (range.end - range.start) / 4;
return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
var isVisible;
var align = this.options.align;
var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
var widthInMs = this.width * msPerPixel;
if (align == 'right') {
isVisible = (this.data.start.getTime() > range.start ) && (this.data.start.getTime() - widthInMs < range.end);
}
else if (align == 'left') {
isVisible = (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start.getTime() < range.end);
}
else {
// default or 'center'
isVisible = (this.data.start.getTime() + widthInMs/2 > range.start ) && (this.data.start.getTime() - widthInMs/2 < range.end);
}
return isVisible;
}; };
/** /**

+ 0
- 1
lib/timeline/component/item/Item.js View File

@ -99,7 +99,6 @@ Item.prototype.setParent = function(parent) {
* @returns {boolean} True if visible * @returns {boolean} True if visible
*/ */
Item.prototype.isVisible = function(range) { Item.prototype.isVisible = function(range) {
// Should be implemented by Item implementations
return false; return false;
}; };

+ 4
- 3
lib/timeline/component/item/PointItem.js View File

@ -43,9 +43,10 @@ PointItem.prototype = new Item (null, null, null);
*/ */
PointItem.prototype.isVisible = function(range) { PointItem.prototype.isVisible = function(range) {
// determine visibility // determine visibility
// TODO: account for the real width of the item. Right now we just add 1/4 to the window
var interval = (range.end - range.start) / 4;
return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
var widthInMs = this.width * msPerPixel;
return (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start < range.end);
}; };
/** /**

+ 2
- 8
lib/timeline/component/item/RangeItem.js View File

@ -43,14 +43,8 @@ RangeItem.prototype.baseClassName = 'vis-item vis-range';
*/ */
RangeItem.prototype.isVisible = function(range) { RangeItem.prototype.isVisible = function(range) {
// determine visibility // determine visibility
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;};
return (this.data.start < range.end) && (this.data.end > range.start);
};
/** /**
* Repaint the item * Repaint the item

Loading…
Cancel
Save