Fixed vertical drag issue while pinching

src/timeline/Range.js

@@ -27,6 +27,10 @@ function Range(body, options) {
   };
   this.options = util.extend({}, this.defaultOptions);
 
+  this.props = {
+    touch: {}
+  };
+
   // drag listeners for dragging
   this.body.emitter.on('dragstart', this._onDragStart.bind(this));
   this.body.emitter.on('drag',      this._onDrag.bind(this));
@@ -260,9 +264,6 @@ Range.conversion = function (start, end, width) {
   }
 };
 
-// global (private) object to store drag params
-var touchParams = {};
-
 /**
  * Start dragging horizontally or vertically
  * @param {Event} event
@@ -274,10 +275,10 @@ Range.prototype._onDragStart = function(event) {
 
   // 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 (touchParams.ignore) return;
+  if (!this.props.touch.allowDragging) return;
 
-  touchParams.start = this.start;
-  touchParams.end = this.end;
+  this.props.touch.start = this.start;
+  this.props.touch.end = this.end;
 
   if (this.body.dom.root) {
     this.body.dom.root.style.cursor = 'move';
@@ -298,14 +299,15 @@ Range.prototype._onDrag = function (event) {
 
   // 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 (touchParams.ignore) return;
+  if (!this.props.touch.allowDragging) return;
+  console.log('onDrag range');
 
   var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
-      interval = (touchParams.end - touchParams.start),
+      interval = (this.props.touch.end - this.props.touch.start),
       width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
       diffRange = -delta / width * interval;
 
-  this._applyRange(touchParams.start + diffRange, touchParams.end + diffRange);
+  this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
 
   this.body.emitter.emit('rangechange', {
     start: new Date(this.start),
@@ -324,7 +326,7 @@ Range.prototype._onDragEnd = function (event) {
 
   // 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 (touchParams.ignore) return;
+  if (!this.props.touch.allowDragging) return;
 
   if (this.body.dom.root) {
     this.body.dom.root.style.cursor = 'auto';
@@ -391,17 +393,10 @@ Range.prototype._onMouseWheel = function(event) {
  * @private
  */
 Range.prototype._onTouch = function (event) {
-  touchParams.start = this.start;
-  touchParams.end = this.end;
-  touchParams.ignore = false;
-  touchParams.center = null;
-
-  // don't move the range when dragging a selected event
-  // TODO: it's not so neat to have to know about ItemSet here
-  var item = ItemSet.itemFromTarget(event);
-  if (item && item.selected && this.options.editable) {
-    touchParams.ignore = true;
-  }
+  this.props.touch.start = this.start;
+  this.props.touch.end = this.end;
+  this.props.touch.allowDragging = true;
+  this.props.touch.center = null;
 };
 
 /**
@@ -409,7 +404,7 @@ Range.prototype._onTouch = function (event) {
  * @private
  */
 Range.prototype._onHold = function () {
-  touchParams.ignore = true;
+  this.props.touch.allowDragging = false;
 };
 
 /**
@@ -421,19 +416,19 @@ Range.prototype._onPinch = function (event) {
   // only allow zooming when configured as zoomable and moveable
   if (!(this.options.zoomable && this.options.moveable)) return;
 
-  touchParams.ignore = true;
+  this.props.touch.allowDragging = false;
 
   if (event.gesture.touches.length > 1) {
-    if (!touchParams.center) {
-      touchParams.center = getPointer(event.gesture.center, this.body.dom.center);
+    if (!this.props.touch.center) {
+      this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
     }
 
     var scale = 1 / event.gesture.scale,
-        initDate = this._pointerToDate(touchParams.center);
+        initDate = this._pointerToDate(this.props.touch.center);
 
     // calculate new start and end
-    var newStart = parseInt(initDate + (touchParams.start - initDate) * scale);
-    var newEnd = parseInt(initDate + (touchParams.end - initDate) * scale);
+    var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
+    var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
 
     // apply new range
     this.setRange(newStart, newEnd);

src/timeline/Timeline.js

@@ -135,6 +135,8 @@ Timeline.prototype._create = function (container) {
 
   this.on('rangechange', this.redraw.bind(this));
   this.on('change', this.redraw.bind(this));
+  this.on('touch', this._onTouch.bind(this));
+  this.on('pinch', this._onPinch.bind(this));
   this.on('dragstart', this._onDragStart.bind(this));
   this.on('drag', this._onDrag.bind(this));
 
@@ -147,7 +149,7 @@ Timeline.prototype._create = function (container) {
 
   var me = this;
   var events = [
-    'pinch',
+    'touch', 'pinch',
     'tap', 'doubletap', 'hold',
     'dragstart', 'drag', 'dragend',
     'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
@@ -176,6 +178,7 @@ Timeline.prototype._create = function (container) {
     border: {},
     scrollTop: 0
   };
+  this.touch = {}; // store state information needed for touch events
 
   // attach the root panel to the provided container
   if (!container) throw new Error('No container provided');
@@ -688,13 +691,31 @@ Timeline.prototype._stopAutoResize = function () {
   // TODO: remove event listener on window.resize
 };
 
+/**
+ * Start moving the timeline vertically
+ * @param {Event} event
+ * @private
+ */
+Timeline.prototype._onTouch = function (event) {
+  this.touch.allowDragging = true;
+};
+
+/**
+ * Start moving the timeline vertically
+ * @param {Event} event
+ * @private
+ */
+Timeline.prototype._onPinch = function (event) {
+  this.touch.allowDragging = false;
+};
+
 /**
  * Start moving the timeline vertically
  * @param {Event} event
  * @private
  */
 Timeline.prototype._onDragStart = function (event) {
-  touchParams.initialScrollTop = this.props.scrollTop;
+  this.touch.initialScrollTop = this.props.scrollTop;
 };
 
 /**
@@ -703,15 +724,14 @@ Timeline.prototype._onDragStart = function (event) {
  * @private
  */
 Timeline.prototype._onDrag = function (event) {
-/* TODO: no dragging when pinching
   // 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 (touchParams.pinching) return;
-*/
+  if (!this.touch.allowDragging) return;
+
   var delta = event.gesture.deltaY;
 
   var oldScrollTop = this._getScrollTop();
-  var newScrollTop = this._setScrollTop(touchParams.initialScrollTop + delta);
+  var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
 
   if (newScrollTop != oldScrollTop) {
     this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
@@ -750,6 +770,3 @@ Timeline.prototype._setScrollTop = function (scrollTop) {
 Timeline.prototype._getScrollTop = function () {
   return this.props.scrollTop;
 };
-
-// global (private) object to store drag params
-var touchParams = {};

test/timeline.html

@@ -28,10 +28,10 @@
   </select>
 </div>
 <script>
-  var orientation = document.getElementById('orientation');
-  orientation.onchange = function () {
+  var o = document.getElementById('orientation');
+  o.onchange = function () {
     timeline.setOptions({
-      orientation: orientation.value
+      orientation: o.value
     });
   };
 </script>

test/timeline_groups.html

@@ -31,10 +31,10 @@
   </select>
 </div>
 <script>
-  var orientation = document.getElementById('orientation');
-  orientation.onchange = function () {
+  var o = document.getElementById('orientation');
+  o.onchange = function () {
     timeline.setOptions({
-      orientation: orientation.value
+      orientation: o.value
     });
   };
 </script>
@@ -79,7 +79,7 @@
       updateGroup: true
     },
     //stack: false,
-    //height: 200,
+    height: 200,
     groupOrder: 'content'
   };