Merge pull request #6834 from notnotse/move-tolerance-option

Move tolerance option

externs/olx.js

@@ -292,6 +292,7 @@ olx.interaction.InteractionOptions.prototype.handleEvent;
  *     loadTilesWhileAnimating: (boolean|undefined),
  *     loadTilesWhileInteracting: (boolean|undefined),
  *     logo: (boolean|string|olx.LogoOptions|Element|undefined),
+ *     moveTolerance: (number|undefined),
  *     overlays: (ol.Collection.<ol.Overlay>|Array.<ol.Overlay>|undefined),
  *     renderer: (ol.renderer.Type|Array.<ol.renderer.Type>|undefined),
  *     target: (Element|string|undefined),
@@ -385,6 +386,17 @@ olx.MapOptions.prototype.loadTilesWhileInteracting;
 olx.MapOptions.prototype.logo;
 
 
+/**
+ * The minimum distance in pixels the cursor must move to be detected
+ * as a map move event instead of a click. Increasing this value can make it
+ * easier to click on the map.
+ * Default is `1`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.MapOptions.prototype.moveTolerance;
+
+
 /**
  * Overlays initially added to the map. By default, no overlays are added.
  * @type {ol.Collection.<ol.Overlay>|Array.<ol.Overlay>|undefined}

src/ol/map.js

@@ -278,7 +278,7 @@ ol.Map = function(options) {
    * @private
    * @type {ol.MapBrowserEventHandler}
    */
-  this.mapBrowserEventHandler_ = new ol.MapBrowserEventHandler(this);
+  this.mapBrowserEventHandler_ = new ol.MapBrowserEventHandler(this, options.moveTolerance);
   for (var key in ol.MapBrowserEventType) {
     ol.events.listen(this.mapBrowserEventHandler_, ol.MapBrowserEventType[key],
         this.handleMapBrowserEvent, this);

src/ol/mapbrowsereventhandler.js

@@ -12,10 +12,11 @@ goog.require('ol.pointer.PointerEventHandler');
 
 /**
  * @param {ol.Map} map The map with the viewport to listen to events on.
+ * @param {number|undefined} moveTolerance The minimal distance the pointer must travel to trigger a move.
  * @constructor
  * @extends {ol.events.EventTarget}
  */
-ol.MapBrowserEventHandler = function(map) {
+ol.MapBrowserEventHandler = function(map, moveTolerance) {
 
   ol.events.EventTarget.call(this);
 
@@ -48,7 +49,8 @@ ol.MapBrowserEventHandler = function(map) {
    * @type {number}
    * @private
    */
-  this.moveTolerance_ = ol.has.DEVICE_PIXEL_RATIO;
+  this.moveTolerance_ = moveTolerance ?
+      moveTolerance * ol.has.DEVICE_PIXEL_RATIO : ol.has.DEVICE_PIXEL_RATIO;
 
   /**
    * The most recent "down" type event (or null if none have occurred).

test/spec/ol/mapbrowserevent.test.js

@@ -115,4 +115,60 @@ describe('ol.MapBrowserEventHandler', function() {
     });
 
   });
+
+  describe('#isMoving_', function() {
+    var defaultHandler;
+    var moveToleranceHandler;
+    var pointerdownAt0;
+    beforeEach(function() {
+      defaultHandler = new ol.MapBrowserEventHandler(new ol.Map({}));
+      moveToleranceHandler = new ol.MapBrowserEventHandler(new ol.Map({}), 8);
+      pointerdownAt0 = new ol.pointer.PointerEvent('pointerdown', {}, {
+        clientX: 0,
+        clientY: 0
+      });
+      defaultHandler.handlePointerDown_(pointerdownAt0);
+      moveToleranceHandler.handlePointerDown_(pointerdownAt0);
+    });
+
+    it('is not moving if distance is 0', function() {
+      var pointerdownAt0 = new ol.pointer.PointerEvent('pointerdown', {}, {
+        clientX: 0,
+        clientY: 0
+      });
+      expect(defaultHandler.isMoving_(pointerdownAt0)).to.be(false);
+    });
+
+    it('is moving if distance is 2', function() {
+      var pointerdownAt2 = new ol.pointer.PointerEvent('pointerdown', {}, {
+        clientX: ol.has.DEVICE_PIXEL_RATIO + 1,
+        clientY: ol.has.DEVICE_PIXEL_RATIO + 1
+      });
+      expect(defaultHandler.isMoving_(pointerdownAt2)).to.be(true);
+    });
+
+    it('is moving with negative distance', function() {
+      var pointerdownAt2 = new ol.pointer.PointerEvent('pointerdown', {}, {
+        clientX: -(ol.has.DEVICE_PIXEL_RATIO + 1),
+        clientY: -(ol.has.DEVICE_PIXEL_RATIO + 1)
+      });
+      expect(defaultHandler.isMoving_(pointerdownAt2)).to.be(true);
+    });
+
+    it('is not moving if distance is less than move tolerance', function() {
+      var pointerdownAt2 = new ol.pointer.PointerEvent('pointerdown', {}, {
+        clientX: ol.has.DEVICE_PIXEL_RATIO + 1,
+        clientY: ol.has.DEVICE_PIXEL_RATIO + 1
+      });
+      expect(moveToleranceHandler.isMoving_(pointerdownAt2)).to.be(false);
+    });
+
+    it('is moving if distance is greater than move tolerance', function() {
+      var pointerdownAt9 = new ol.pointer.PointerEvent('pointerdown', {}, {
+        clientX: (ol.has.DEVICE_PIXEL_RATIO * 8) + 1,
+        clientY: (ol.has.DEVICE_PIXEL_RATIO * 8) + 1
+      });
+      expect(moveToleranceHandler.isMoving_(pointerdownAt9)).to.be(true);
+    });
+  });
 });