refactoring pointer interactions

src/ol/interaction/paninteraction.js

@@ -13,8 +13,7 @@ goog.require('ol.interaction.PointerInteraction');
 
 
 /**
- * Allows the user to pan the map by touching and dragging
+ * Allows the user to pan the map by dragging the map.
- * on a touch screen.
  * @constructor
  * @extends {ol.interaction.PointerInteraction}
  * @param {olx.interaction.PanOptions=} opt_options Options.
@@ -64,8 +63,9 @@ goog.inherits(ol.interaction.Pan, ol.interaction.PointerInteraction);
  * @inheritDoc
  */
 ol.interaction.Pan.prototype.handlePointerDrag = function(mapBrowserEvent) {
-  goog.asserts.assert(this.targetTouches.length >= 1);
+  goog.asserts.assert(this.targetPointers.length >= 1);
-  var centroid = ol.interaction.PointerInteraction.centroid(this.targetTouches);
+  var centroid =
+      ol.interaction.PointerInteraction.centroid(this.targetPointers);
   if (!goog.isNull(this.lastCentroid)) {
     if (this.kinetic_) {
       this.kinetic_.update(centroid[0], centroid[1]);
@@ -96,7 +96,7 @@ ol.interaction.Pan.prototype.handlePointerUp =
   var map = mapBrowserEvent.map;
   var view2D = map.getView().getView2D();
   goog.asserts.assertInstanceof(view2D, ol.View2D);
-  if (this.targetTouches.length === 0) {
+  if (this.targetPointers.length === 0) {
     if (!this.noKinetic_ && this.kinetic_ && this.kinetic_.end()) {
       var distance = this.kinetic_.getDistance();
       var angle = this.kinetic_.getAngle();
@@ -126,7 +126,7 @@ ol.interaction.Pan.prototype.handlePointerUp =
  */
 ol.interaction.Pan.prototype.handlePointerDown =
     function(mapBrowserEvent) {
-  if (this.targetTouches.length > 0 && this.condition_(mapBrowserEvent)) {
+  if (this.targetPointers.length > 0 && this.condition_(mapBrowserEvent)) {
     var map = mapBrowserEvent.map;
     var view2D = map.getView().getView2D();
     goog.asserts.assertInstanceof(view2D, ol.View2D);
@@ -140,9 +140,9 @@ ol.interaction.Pan.prototype.handlePointerDown =
     if (this.kinetic_) {
       this.kinetic_.begin();
     }
-    // No kinetic as soon as more than one fingers on the screen is
+    // No kinetic as soon as more than one pointer on the screen is
     // detected. This is to prevent nasty pans after pinch.
-    this.noKinetic_ = this.targetTouches.length > 1;
+    this.noKinetic_ = this.targetPointers.length > 1;
     return true;
   } else {
     return false;

src/ol/interaction/pointerinteraction.js

@@ -13,7 +13,7 @@ goog.require('ol.interaction.Interaction');
 
 
 /**
- * Base class for touch interactions.
+ * Base class for pointer interactions.
  * @constructor
  * @extends {ol.interaction.Interaction}
  */
@@ -28,32 +28,32 @@ ol.interaction.PointerInteraction = function() {
   this.handled_ = false;
 
   /**
-   * @type {Object}
+   * @type {Object.<number, ol.pointer.PointerEvent>}
    * @private
    */
-  this.trackedTouches_ = {};
+  this.trackedPointers_ = {};
 
   /**
-   * @type {Array.<Object>}
+   * @type {Array.<ol.pointer.PointerEvent>}
    * @protected
    */
-  this.targetTouches = [];
+  this.targetPointers = [];
 
 };
 goog.inherits(ol.interaction.PointerInteraction, ol.interaction.Interaction);
 
 
 /**
- * @param {Array.<Object>} touches TouchEvents.
+ * @param {Array.<ol.pointer.PointerEvent>} pointerEvents
  * @return {ol.Pixel} Centroid pixel.
  */
-ol.interaction.PointerInteraction.centroid = function(touches) {
+ol.interaction.PointerInteraction.centroid = function(pointerEvents) {
-  var length = touches.length;
+  var length = pointerEvents.length;
   var clientX = 0;
   var clientY = 0;
   for (var i = 0; i < length; i++) {
-    clientX += touches[i].clientX;
+    clientX += pointerEvents[i].clientX;
-    clientY += touches[i].clientY;
+    clientY += pointerEvents[i].clientY;
   }
   return [clientX / length, clientY / length];
 };
@@ -65,7 +65,8 @@ ol.interaction.PointerInteraction.centroid = function(touches) {
  *     or pointerup event.
  * @private
  */
-ol.interaction.PointerInteraction.isTouchEvent_ = function(mapBrowserEvent) {
+ol.interaction.PointerInteraction.prototype.isPointerDraggingEvent_ =
+    function(mapBrowserEvent) {
   var type = mapBrowserEvent.type;
   return (
       type === ol.MapBrowserEvent.EventType.POINTERDOWN ||
@@ -78,21 +79,21 @@ ol.interaction.PointerInteraction.isTouchEvent_ = function(mapBrowserEvent) {
  * @param {ol.MapBrowserPointerEvent} mapBrowserEvent Event.
  * @private
  */
-ol.interaction.PointerInteraction.prototype.updateTrackedTouches_ =
+ol.interaction.PointerInteraction.prototype.updateTrackedPointers_ =
     function(mapBrowserEvent) {
-  if (ol.interaction.PointerInteraction.isTouchEvent_(mapBrowserEvent)) {
+  if (this.isPointerDraggingEvent_(mapBrowserEvent)) {
     var event = mapBrowserEvent.pointerEvent;
 
     if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERUP) {
-      delete this.trackedTouches_[event.pointerId];
+      delete this.trackedPointers_[event.pointerId];
     } else if (mapBrowserEvent.type ==
         ol.MapBrowserEvent.EventType.POINTERDOWN) {
-      this.trackedTouches_[event.pointerId] = event;
+      this.trackedPointers_[event.pointerId] = event;
-    } else if (event.pointerId in this.trackedTouches_) {
+    } else if (event.pointerId in this.trackedPointers_) {
       // update only when there was a pointerdown event for this pointer
-      this.trackedTouches_[event.pointerId] = event;
+      this.trackedPointers_[event.pointerId] = event;
     }
-    this.targetTouches = goog.object.getValues(this.trackedTouches_);
+    this.targetPointers = goog.object.getValues(this.trackedPointers_);
   }
 };
 
@@ -133,7 +134,7 @@ ol.interaction.PointerInteraction.prototype.handleMapBrowserEvent =
       /** @type {ol.MapBrowserPointerEvent} */ (mapBrowserEvent);
 
   var view = mapBrowserEvent.map.getView();
-  this.updateTrackedTouches_(mapBrowserPointerEvent);
+  this.updateTrackedPointers_(mapBrowserPointerEvent);
   if (this.handled_) {
     if (mapBrowserPointerEvent.type ==
         ol.MapBrowserEvent.EventType.POINTERDRAG) {

src/ol/interaction/rotateinteraction.js

@@ -69,11 +69,11 @@ goog.inherits(ol.interaction.Rotate, ol.interaction.PointerInteraction);
  */
 ol.interaction.Rotate.prototype.handlePointerDrag =
     function(mapBrowserEvent) {
-  goog.asserts.assert(this.targetTouches.length >= 2);
+  goog.asserts.assert(this.targetPointers.length >= 2);
   var rotationDelta = 0.0;
 
-  var touch0 = this.targetTouches[0];
+  var touch0 = this.targetPointers[0];
-  var touch1 = this.targetTouches[1];
+  var touch1 = this.targetPointers[1];
 
   // angle between touches
   var angle = Math.atan2(
@@ -97,7 +97,8 @@ ol.interaction.Rotate.prototype.handlePointerDrag =
   // FIXME: should be the intersection point between the lines:
   //     touch0,touch1 and previousTouch0,previousTouch1
   var viewportPosition = goog.style.getClientPosition(map.getViewport());
-  var centroid = ol.interaction.PointerInteraction.centroid(this.targetTouches);
+  var centroid =
+      ol.interaction.PointerInteraction.centroid(this.targetPointers);
   centroid[0] -= viewportPosition.x;
   centroid[1] -= viewportPosition.y;
   this.anchor_ = map.getCoordinateFromPixel(centroid);
@@ -119,7 +120,7 @@ ol.interaction.Rotate.prototype.handlePointerDrag =
  */
 ol.interaction.Rotate.prototype.handlePointerUp =
     function(mapBrowserEvent) {
-  if (this.targetTouches.length < 2) {
+  if (this.targetPointers.length < 2) {
     var map = mapBrowserEvent.map;
     // FIXME works for View2D only
     var view = map.getView().getView2D();
@@ -141,7 +142,7 @@ ol.interaction.Rotate.prototype.handlePointerUp =
  */
 ol.interaction.Rotate.prototype.handlePointerDown =
     function(mapBrowserEvent) {
-  if (this.targetTouches.length >= 2) {
+  if (this.targetPointers.length >= 2) {
     var map = mapBrowserEvent.map;
     this.anchor_ = null;
     this.lastAngle_ = undefined;

src/ol/interaction/zoominteraction.js

@@ -57,11 +57,11 @@ goog.inherits(ol.interaction.Zoom, ol.interaction.PointerInteraction);
  */
 ol.interaction.Zoom.prototype.handlePointerDrag =
     function(mapBrowserEvent) {
-  goog.asserts.assert(this.targetTouches.length >= 2);
+  goog.asserts.assert(this.targetPointers.length >= 2);
   var scaleDelta = 1.0;
 
-  var touch0 = this.targetTouches[0];
+  var touch0 = this.targetPointers[0];
-  var touch1 = this.targetTouches[1];
+  var touch1 = this.targetPointers[1];
   var dx = touch0.clientX - touch1.clientX;
   var dy = touch0.clientY - touch1.clientY;
 
@@ -83,7 +83,8 @@ ol.interaction.Zoom.prototype.handlePointerDrag =
 
   // scale anchor point.
   var viewportPosition = goog.style.getClientPosition(map.getViewport());
-  var centroid = ol.interaction.PointerInteraction.centroid(this.targetTouches);
+  var centroid =
+      ol.interaction.PointerInteraction.centroid(this.targetPointers);
   centroid[0] -= viewportPosition.x;
   centroid[1] -= viewportPosition.y;
   this.anchor_ = map.getCoordinateFromPixel(centroid);
@@ -101,7 +102,7 @@ ol.interaction.Zoom.prototype.handlePointerDrag =
  */
 ol.interaction.Zoom.prototype.handlePointerUp =
     function(mapBrowserEvent) {
-  if (this.targetTouches.length < 2) {
+  if (this.targetPointers.length < 2) {
     var map = mapBrowserEvent.map;
     // FIXME works for View2D only
     var view = map.getView().getView2D();
@@ -124,7 +125,7 @@ ol.interaction.Zoom.prototype.handlePointerUp =
  */
 ol.interaction.Zoom.prototype.handlePointerDown =
     function(mapBrowserEvent) {
-  if (this.targetTouches.length >= 2) {
+  if (this.targetPointers.length >= 2) {
     var map = mapBrowserEvent.map;
     this.anchor_ = null;
     this.lastDistance_ = undefined;