Fixed #239: Do not zoom/move the window when the mouse is on the left panel with group labels

HISTORY.md

@@ -19,6 +19,8 @@ http://visjs.org
 - Fixed #1071: HTML contents of a group not cleared when the contents is updated.
 - Fixed #1033: Moved item data not updated in DataSet when using an asynchronous
   `onMove` handler.
+- Fixed #239: Do not zoom/move the window when the mouse is on the left panel
+  with group labels. 
 
 
 ## 2015-07-03, version 4.4.0

lib/timeline/Range.js

@@ -360,9 +360,13 @@ Range.conversion = function (start, end, width, totalHidden) {
 Range.prototype._onDragStart = function(event) {
   this.deltaDifference = 0;
   this.previousDelta = 0;
+
   // only allow dragging when configured as movable
   if (!this.options.moveable) return;
 
+  // only start dragging when the mouse is inside the current range
+  if (!this._isInsideRange(event)) return;
+
   // refuse to drag when we where pinching to prevent the timeline make a jump
   // when releasing the fingers in opposite order from the touch screen
   if (!this.props.touch.allowDragging) return;
@@ -382,6 +386,8 @@ Range.prototype._onDragStart = function(event) {
  * @private
  */
 Range.prototype._onDrag = function (event) {
+  if (!this.props.touch.dragging) return;
+
   // only allow dragging when configured as movable
   if (!this.options.moveable) return;
 
@@ -433,6 +439,8 @@ Range.prototype._onDrag = function (event) {
  * @private
  */
 Range.prototype._onDragEnd = function (event) {
+  if (!this.props.touch.dragging) return;
+
   // only allow dragging when configured as movable
   if (!this.options.moveable) return;
 
@@ -464,6 +472,9 @@ Range.prototype._onMouseWheel = function(event) {
   // only allow zooming when configured as zoomable and moveable
   if (!(this.options.zoomable && this.options.moveable)) return;
 
+  // only zoom when the mouse is inside the current range
+  if (!this._isInsideRange(event)) return;
+
   // retrieve delta
   var delta = 0;
   if (event.wheelDelta) { /* IE/Opera. */
@@ -561,6 +572,23 @@ Range.prototype._onPinch = function (event) {
   this.endToFront = true; // revert to default
 };
 
+/**
+ * Test whether the mouse from a mouse event is inside the visible window,
+ * between the current start and end date
+ * @param {Object} event
+ * @return {boolean} Returns true when inside the visible window
+ * @private
+ */
+Range.prototype._isInsideRange = function(event) {
+  // calculate the time where the mouse is, check whether inside
+  // and no scroll action should happen.
+  var clientX = event.center ? event.center.x : event.clientX;
+  var x = clientX - util.getAbsoluteLeft(this.body.dom.centerContainer);
+  var time = this.body.util.toTime(x);
+
+  return time >= this.start && time <= this.end;
+};
+
 /**
  * Helper function to calculate the center date for zooming
  * @param {{x: Number, y: Number}} pointer