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

examples/timeline/groups/verticalItemsHide.html

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

lib/timeline/component/Group.js

@@ -180,9 +180,16 @@ 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;
+  this.right = foreground.offsetLeft;
+  this.width = foreground.offsetWidth;
+
+  this.isVisible = this._isGroupVisible(range, margin);
   // reposition visible items vertically
   if (typeof this.itemSet.options.order === 'function') {
     // a custom order function
@@ -556,20 +563,7 @@ Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, ra
     // reposition item horizontally
     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;
 };
 

lib/timeline/component/item/BackgroundItem.js

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

lib/timeline/component/item/BoxItem.js

@@ -42,9 +42,22 @@ BoxItem.prototype = new Item (null, null, null);
  */
 BoxItem.prototype.isVisible = function(range) {
   // 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;
 };
 
 /**

lib/timeline/component/item/Item.js

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

lib/timeline/component/item/PointItem.js

@@ -43,9 +43,10 @@ PointItem.prototype = new Item (null, null, null);
  */
 PointItem.prototype.isVisible = function(range) {
   // 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);
 };
 
 /**

lib/timeline/component/item/RangeItem.js

@@ -43,14 +43,8 @@ RangeItem.prototype.baseClassName = 'vis-item vis-range';
  */
 RangeItem.prototype.isVisible = function(range) {
   // 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