diff --git a/externs/olx.js b/externs/olx.js index e7fefe5804..3c58d0bba7 100644 --- a/externs/olx.js +++ b/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.|Array.|undefined), * renderer: (ol.renderer.Type|Array.|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.|Array.|undefined} diff --git a/src/ol/map.js b/src/ol/map.js index b042812dff..c20c7e1f87 100644 --- a/src/ol/map.js +++ b/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); diff --git a/src/ol/mapbrowsereventhandler.js b/src/ol/mapbrowsereventhandler.js index 6eea659ae2..ffab7855b3 100644 --- a/src/ol/mapbrowsereventhandler.js +++ b/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). diff --git a/test/spec/ol/mapbrowserevent.test.js b/test/spec/ol/mapbrowserevent.test.js index be7c1a5e8a..0f7426e3af 100644 --- a/test/spec/ol/mapbrowserevent.test.js +++ b/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); + }); + }); });