Merge pull request #547 from elemoine/touch-anchor

Anchors are incorrect in touch interactions

src/ol/interaction/touchrotateinteraction.js

@@ -4,6 +4,7 @@ goog.provide('ol.interaction.TouchRotate');
 
 goog.require('goog.asserts');
 goog.require('goog.style');
+goog.require('ol.Coordinate');
 goog.require('ol.View');
 goog.require('ol.ViewHint');
 goog.require('ol.interaction.Interaction');
@@ -27,6 +28,12 @@ ol.interaction.TouchRotate = function(opt_threshold) {
 
   goog.base(this);
 
+  /**
+   * @private
+   * @type {ol.Coordinate}
+   */
+  this.anchor_ = null;
+
   /**
    * @private
    * @type {number|undefined}
@@ -93,14 +100,14 @@ ol.interaction.TouchRotate.prototype.handleTouchMove =
   var centroid = ol.interaction.Touch.centroid(this.targetTouches);
   centroid.x -= viewportPosition.x;
   centroid.y -= viewportPosition.y;
-  var anchor = map.getCoordinateFromPixel(centroid);
+  this.anchor_ = map.getCoordinateFromPixel(centroid);
 
   // rotate
   if (this.rotating_) {
     var view = map.getView().getView2D();
     map.requestRenderFrame();
     ol.interaction.Interaction.rotateWithoutConstraints(map, view,
-        view.getRotation() + rotationDelta, anchor);
+        view.getRotation() + rotationDelta, this.anchor_);
   }
 };
 
@@ -115,7 +122,7 @@ ol.interaction.TouchRotate.prototype.handleTouchEnd =
     var view = map.getView().getView2D();
     if (this.rotating_) {
       ol.interaction.Interaction.rotate(
-          map, view, view.getRotation(), undefined,
+          map, view, view.getRotation(), this.anchor_,
           ol.interaction.TOUCHROTATE_ANIMATION_DURATION);
     }
     view.setHint(ol.ViewHint.INTERACTING, -1);
@@ -134,6 +141,7 @@ ol.interaction.TouchRotate.prototype.handleTouchStart =
   if (this.targetTouches.length >= 2) {
     var map = mapBrowserEvent.map;
     var view = map.getView();
+    this.anchor_ = null;
     this.lastAngle_ = undefined;
     this.rotating_ = false;
     this.rotationDelta_ = 0.0;

src/ol/interaction/touchzoominteraction.js

@@ -4,6 +4,7 @@ goog.provide('ol.interaction.TouchZoom');
 
 goog.require('goog.asserts');
 goog.require('goog.style');
+goog.require('ol.Coordinate');
 goog.require('ol.View');
 goog.require('ol.ViewHint');
 goog.require('ol.interaction.Interaction');
@@ -25,6 +26,12 @@ ol.interaction.TouchZoom = function() {
 
   goog.base(this);
 
+  /**
+   * @private
+   * @type {ol.Coordinate}
+   */
+  this.anchor_ = null;
+
   /**
    * @private
    * @type {number|undefined}
@@ -73,12 +80,12 @@ ol.interaction.TouchZoom.prototype.handleTouchMove =
   var centroid = ol.interaction.Touch.centroid(this.targetTouches);
   centroid.x -= viewportPosition.x;
   centroid.y -= viewportPosition.y;
-  var anchor = map.getCoordinateFromPixel(centroid);
+  this.anchor_ = map.getCoordinateFromPixel(centroid);
 
   // scale, bypass the resolution constraint
   map.requestRenderFrame();
   ol.interaction.Interaction.zoomWithoutConstraints(
-      map, view, view.getResolution() * scaleDelta, anchor);
+      map, view, view.getResolution() * scaleDelta, this.anchor_);
 
 };
 
@@ -95,8 +102,8 @@ ol.interaction.TouchZoom.prototype.handleTouchEnd =
     // direction not to zoom out/in if user was pinching in/out.
     // Direction is > 0 if pinching out, and < 0 if pinching in.
     var direction = this.lastScaleDelta_ - 1;
-    ol.interaction.Interaction.zoom(map, view, view.getResolution(), undefined,
+    ol.interaction.Interaction.zoom(map, view, view.getResolution(),
-        ol.interaction.TOUCHZOOM_ANIMATION_DURATION, direction);
+        this.anchor_, ol.interaction.TOUCHZOOM_ANIMATION_DURATION, direction);
     view.setHint(ol.ViewHint.INTERACTING, -1);
     return false;
   } else {
@@ -113,6 +120,7 @@ ol.interaction.TouchZoom.prototype.handleTouchStart =
   if (this.targetTouches.length >= 2) {
     var map = mapBrowserEvent.map;
     var view = map.getView();
+    this.anchor_ = null;
     this.lastDistance_ = undefined;
     this.lastScaleDelta_ = 1;
     map.requestRenderFrame();