From 20af47e85937e3e095e47be9469b0b5b0dc25d8a Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Thu, 9 Jul 2015 15:46:53 +0200
Subject: [PATCH] Fixed #239: Do not zoom/move the window when the mouse is on
 the left panel with group labels

---
 HISTORY.md            |  2 ++
 lib/timeline/Range.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/HISTORY.md b/HISTORY.md
index aad678ec..f007ac32 100644
--- a/HISTORY.md
+++ b/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
diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js
index 2fc5ef73..11c33093 100644
--- a/lib/timeline/Range.js
+++ b/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