Fixed #186: ranges in the Timeline sometimes overlapping when dragging the Timeline

HISTORY.md

@@ -15,6 +15,7 @@ http://visjs.org
           overflow: visible;
         }
 - Fixed the height of background and foreground panels of groups.
+- Fixed ranges in the Timeline sometimes overlapping when dragging the Timeline.
 
 ### Network
 

dist/vis.js

@@ -9188,7 +9188,15 @@ Group.prototype.redraw = function(range, margin, restack) {
       min = Math.min(min, item.top);
       max = Math.max(max, (item.top + item.height));
     });
-    height = (max - min) + margin.axis + margin.item;
+    if (min > margin.axis) {
+      // there is an empty gap between the lowest item and the axis
+      var offset = min - margin.axis;
+      max -= offset;
+      util.forEach(visibleItems, function (item) {
+        item.top -= offset;
+      });
+    }
+    height = max + margin.item / 2;
   }
   else {
     height = margin.axis + margin.item;
@@ -19634,7 +19642,7 @@ function Network (container, data, options) {
         background: '#FFFFC6'
       }
     },
-    dragGraph: true,
+    dragNetwork: true,
     dragNodes: true,
     zoomable: true,
     hover: false
@@ -19977,11 +19985,16 @@ Network.prototype.setOptions = function (options) {
     if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
     if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
     if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
-    if (options.dragGraph !== undefined)       {this.constants.dragGraph = options.dragGraph;}
+    if (options.dragNetwork !== undefined)     {this.constants.dragNetwork = options.dragNetwork;}
     if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
     if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
     if (options.hover !== undefined)           {this.constants.hover = options.hover;}
 
+    // TODO: deprecated since version 3.0.0. Cleanup some day
+    if (options.dragGraph !== undefined) {
+      throw new Error('Option dragGraph is renamed to dragNetwork');
+    }
+
     if (options.labels !== undefined)  {
       for (prop in options.labels) {
         if (options.labels.hasOwnProperty(prop)) {
@@ -20435,7 +20448,7 @@ Network.prototype._handleOnDrag = function(event) {
     }
   }
   else {
-    if (this.constants.dragGraph == true) {
+    if (this.constants.dragNetwork == true) {
       // move the network
       var diffX = pointer.x - this.drag.pointer.x;
       var diffY = pointer.y - this.drag.pointer.y;

src/timeline/component/Group.js

@@ -157,7 +157,15 @@ Group.prototype.redraw = function(range, margin, restack) {
       min = Math.min(min, item.top);
       max = Math.max(max, (item.top + item.height));
     });
-    height = (max - min) + margin.axis + margin.item;
+    if (min > margin.axis) {
+      // there is an empty gap between the lowest item and the axis
+      var offset = min - margin.axis;
+      max -= offset;
+      util.forEach(visibleItems, function (item) {
+        item.top -= offset;
+      });
+    }
+    height = max + margin.item / 2;
   }
   else {
     height = margin.axis + margin.item;