Fix pan issue #657

lib/timeline/Core.js

@@ -51,6 +51,8 @@ Core.prototype._create = function (container) {
   this.dom.shadowTopRight       = document.createElement('div');
   this.dom.shadowBottomRight    = document.createElement('div');
   this.dom.rollingModeBtn       = document.createElement('div');
+  this.dom.panningZoneLeft             = document.createElement('div');
+  this.dom.panningZoneRight            = document.createElement('div');
 
   this.dom.root.className                 = 'vis-timeline';
   this.dom.background.className           = 'vis-panel vis-background';
@@ -71,6 +73,8 @@ Core.prototype._create = function (container) {
   this.dom.shadowTopRight.className       = 'vis-shadow vis-top';
   this.dom.shadowBottomRight.className    = 'vis-shadow vis-bottom';
   this.dom.rollingModeBtn.className       = 'vis-rolling-mode-btn';
+  this.dom.panningZoneLeft.className             = 'panningZoneLeft';
+  this.dom.panningZoneRight.className            = 'panningZoneRight';
 
   this.dom.root.appendChild(this.dom.background);
   this.dom.root.appendChild(this.dom.backgroundVertical);
@@ -92,6 +96,8 @@ Core.prototype._create = function (container) {
   this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
   this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
   this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
+  this.dom.centerContainer.appendChild(this.dom.panningZoneLeft);
+  this.dom.centerContainer.appendChild(this.dom.panningZoneRight);
 
   // size properties of each of the panels
   this.props = {

lib/timeline/Timeline.js

@@ -83,6 +83,7 @@ function Timeline (container, items, groups, options) {
   this.components = [];
 
   this.body = {
+    getWindow: this.getWindow,
     dom: this.dom,
     domProps: this.props,
     emitter: {

lib/timeline/component/ItemSet.js

@@ -264,6 +264,49 @@ ItemSet.prototype._create = function(){
   this.body.dom.centerContainer.addEventListener('mousemove', this._onMouseMove.bind(this));
   // right-click on timeline 
   this.body.dom.centerContainer.addEventListener('contextmenu', this._onDragEnd.bind(this));
+  this.body.dom.centerContainer.addEventListener('mouseout', this._onMouseOut.bind(this));
+
+  this.dragEvent = null;
+
+  this.touchParams.mouseOnLeft = this.touchParams.mouseOnRight= this.touchParams.mouseIsLeaving = false; 
+
+  this.setMouseOnLeft = function(isOn){
+    this.touchParams.mouseOnLeft = isOn;
+    this.setMouseLeave(false);
+  }
+
+  this.setMouseOnRight = function(isOn){
+    this.touchParams.mouseOnRight = isOn;
+    this.setMouseLeave(false);
+  }
+
+  this.setMouseLeave = function(isLeaveNow){
+    this.touchParams.mouseIsLeaving = isLeaveNow;
+
+    if((this.touchParams.mouseOnLeft || this.touchParams.mouseOnRight) && isLeaveNow) {
+      if(this.dragEvent) ItemSet.prototype._onDragEnd.bind(this)(this.dragEvent);
+      this.touchParams.mouseOnLeft = this.touchParams.mouseOnRight = false;
+    }
+
+  }
+
+  var context = this;
+
+  this.body.dom.panningZoneLeft.onmouseenter = this.body.dom.leftContainer.onmouseenter = function(){
+    context.setMouseOnLeft(true);
+  }
+
+  this.body.dom.panningZoneLeft.onmouseleave = this.body.dom.leftContainer.onmouseleave = function(){
+    context.setMouseLeave(true);
+  }
+
+  this.body.dom.panningZoneRight.onmouseenter = this.body.dom.rightContainer.onmouseenter = function(){
+    context.setMouseOnRight(true);
+  }
+
+  this.body.dom.panningZoneRight.onmouseleave = this.body.dom.rightContainer.onmouseleave = function(){
+    context.setMouseLeave(true);
+  }
 
   this.body.dom.centerContainer.addEventListener('mousewheel', this._onMouseWheel.bind(this));
 
@@ -1441,6 +1484,35 @@ ItemSet.prototype._onDragStartAddItem = function (event) {
  * @private
  */
 ItemSet.prototype._onDrag = function (event) {
+  if((this.touchParams.mouseOnLeft || this.touchParams.mouseOnRight) && this.touchParams.itemProps){
+    this.dragEvent = event;
+
+    var range = this.body.getWindow();
+    var start = range.start.valueOf();
+    var end = range.end.valueOf();
+    var interval = end - start;
+
+    var distance = (interval * 2) / 100;
+
+    if ((this.options.rtl && this.touchParams.mouseOnLeft) || (!this.options.rtl && this.touchParams.mouseOnRight)) {
+      var newStart = start + distance;
+      var newEnd = end + distance;
+    }
+    else {
+      var newStart = start - distance;
+      var newEnd = end - distance;
+    }
+
+    this.body.range._applyRange(newStart, newEnd);
+
+    this.body.emitter.emit('rangechange', {
+      start: newStart,
+      end:   newEnd,
+      byUser: true,
+      event: util.elementsCensor(event)
+    });
+  }
+
   if (this.touchParams.itemProps) {
     event.stopPropagation();
 
@@ -1538,6 +1610,22 @@ ItemSet.prototype._onDrag = function (event) {
             var initialStart = util.convert(props.data.start, 'Date').valueOf();
             var start = new Date(initialStart + offset);
 
+              if (this.touchParams.mouseOnLeft || this.touchParams.mouseOnRight){
+
+                var range = this.body.getWindow();
+                var windowStart = range.start.valueOf();
+                var windowEnd = range.end.valueOf();
+                var itemWidth = 1000;
+
+                if ((this.options.rtl && this.touchParams.mouseOnLeft) || (!this.options.rtl && this.touchParams.mouseOnRight))
+                {
+                  if(props.item.data.end) itemWidth = props.item.data.end.valueOf() - props.item.data.start.valueOf();           
+                  start = windowEnd - itemWidth;
+                } else { 
+                  start = windowStart;
+                }
+              }
+
             if (itemData.end != undefined) {
               var initialEnd = util.convert(props.data.end, 'Date');
               var duration  = initialEnd.valueOf() - initialStart.valueOf();
@@ -1550,13 +1638,10 @@ ItemSet.prototype._onDrag = function (event) {
               // TODO: pass a Moment instead of a Date to snap(). (Breaking change)
               itemData.start = snap ? snap(start, scale, step) : start;
             }
-
-
           }
         }
       }
 
-
       if (updateGroupAllowed && (!props.dragLeft && !props.dragRight) && newGroupBase!=null) {
         if (itemData.group != undefined) {
           var newOffset = newGroupBase - props.groupOffset;

lib/timeline/component/css/panel.css

@@ -78,4 +78,20 @@
 .vis-panel .vis-shadow.vis-bottom {
   bottom: -1px;
   left: 0;
-}
+}
+
+.panningZoneLeft, .panningZoneRight{
+  width: 3%;
+  height: 100%;
+  z-index: 99;
+  position: absolute
+}
+
+.panningZoneLeft{
+  left: 0;
+
+}
+
+.panningZoneRight{
+  right: 0;
+}