From 94e6dc4e4e88747ece1ba5a3975118659703c6bd Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 7 Nov 2016 11:10:00 -0700 Subject: [PATCH 1/5] Keep track of scroll mode --- src/ol/interaction/mousewheelzoom.js | 122 ++++++++++++++++----------- 1 file changed, 74 insertions(+), 48 deletions(-) diff --git a/src/ol/interaction/mousewheelzoom.js b/src/ol/interaction/mousewheelzoom.js index 59f2971fb4..351048850a 100644 --- a/src/ol/interaction/mousewheelzoom.js +++ b/src/ol/interaction/mousewheelzoom.js @@ -66,6 +66,12 @@ ol.interaction.MouseWheelZoom = function(opt_options) { */ this.timeoutId_ = undefined; + /** + * @private + * @type {ol.interaction.MouseWheelZoom.Mode|undefined} + */ + this.mode_ = undefined; + }; ol.inherits(ol.interaction.MouseWheelZoom, ol.interaction.Interaction); @@ -74,57 +80,70 @@ ol.inherits(ol.interaction.MouseWheelZoom, ol.interaction.Interaction); * Handles the {@link ol.MapBrowserEvent map browser event} (if it was a * mousewheel-event) and eventually zooms the map. * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event. - * @return {boolean} `false` to stop event propagation. + * @return {boolean} Allow event propagation. * @this {ol.interaction.MouseWheelZoom} * @api */ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) { - var stopEvent = false; - if (mapBrowserEvent.type == ol.events.EventType.WHEEL || - mapBrowserEvent.type == ol.events.EventType.MOUSEWHEEL) { - var map = mapBrowserEvent.map; - var wheelEvent = /** @type {WheelEvent} */ (mapBrowserEvent.originalEvent); - - if (this.useAnchor_) { - this.lastAnchor_ = mapBrowserEvent.coordinate; - } - - // Delta normalisation inspired by - // https://github.com/mapbox/mapbox-gl-js/blob/001c7b9/js/ui/handler/scroll_zoom.js - //TODO There's more good stuff in there for inspiration to improve this interaction. - var delta; - if (mapBrowserEvent.type == ol.events.EventType.WHEEL) { - delta = wheelEvent.deltaY; - if (ol.has.FIREFOX && - wheelEvent.deltaMode === WheelEvent.DOM_DELTA_PIXEL) { - delta /= ol.has.DEVICE_PIXEL_RATIO; - } - if (wheelEvent.deltaMode === WheelEvent.DOM_DELTA_LINE) { - delta *= 40; - } - } else if (mapBrowserEvent.type == ol.events.EventType.MOUSEWHEEL) { - delta = -wheelEvent.wheelDeltaY; - if (ol.has.SAFARI) { - delta /= 3; - } - } - - this.delta_ += delta; - - if (this.startTime_ === undefined) { - this.startTime_ = Date.now(); - } - - var timeLeft = Math.max(this.timeout_ - (Date.now() - this.startTime_), 0); - - clearTimeout(this.timeoutId_); - this.timeoutId_ = setTimeout( - this.doZoom_.bind(this, map), timeLeft); - - mapBrowserEvent.preventDefault(); - stopEvent = true; + var type = mapBrowserEvent.type; + if (type !== ol.events.EventType.WHEEL && type !== ol.events.EventType.MOUSEWHEEL) { + return true; } - return !stopEvent; + + mapBrowserEvent.preventDefault(); + + var map = mapBrowserEvent.map; + var wheelEvent = /** @type {WheelEvent} */ (mapBrowserEvent.originalEvent); + + if (this.useAnchor_) { + this.lastAnchor_ = mapBrowserEvent.coordinate; + } + + // Delta normalisation inspired by + // https://github.com/mapbox/mapbox-gl-js/blob/001c7b9/js/ui/handler/scroll_zoom.js + //TODO There's more good stuff in there for inspiration to improve this interaction. + var delta; + if (mapBrowserEvent.type == ol.events.EventType.WHEEL) { + delta = wheelEvent.deltaY; + if (ol.has.FIREFOX && + wheelEvent.deltaMode === WheelEvent.DOM_DELTA_PIXEL) { + delta /= ol.has.DEVICE_PIXEL_RATIO; + } + if (wheelEvent.deltaMode === WheelEvent.DOM_DELTA_LINE) { + delta *= 40; + } + } else if (mapBrowserEvent.type == ol.events.EventType.MOUSEWHEEL) { + delta = -wheelEvent.wheelDeltaY; + if (ol.has.SAFARI) { + delta /= 3; + } + } + + if (delta === 0) { + return false; + } + + var now = Date.now(); + + if (this.startTime_ === undefined) { + this.startTime_ = now; + } + + if (!this.mode_ || now - this.startTime_ > 400) { + this.mode_ = Math.abs(delta) < 4 ? + ol.interaction.MouseWheelZoom.Mode.TRACKPAD : + ol.interaction.MouseWheelZoom.Mode.WHEEL; + } + + this.delta_ += delta; + + var timeLeft = Math.max(this.timeout_ - (now - this.startTime_), 0); + + clearTimeout(this.timeoutId_); + this.timeoutId_ = setTimeout( + this.doZoom_.bind(this, map), timeLeft); + + return false; }; @@ -134,14 +153,12 @@ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) { */ ol.interaction.MouseWheelZoom.prototype.doZoom_ = function(map) { var view = map.getView(); - if (!view.getAnimating()) { var maxDelta = ol.MOUSEWHEELZOOM_MAXDELTA; var delta = ol.math.clamp(this.delta_, -maxDelta, maxDelta); ol.interaction.Interaction.zoomByDelta(map, view, -delta, this.lastAnchor_, this.duration_); } - this.delta_ = 0; this.lastAnchor_ = null; this.startTime_ = undefined; @@ -161,3 +178,12 @@ ol.interaction.MouseWheelZoom.prototype.setMouseAnchor = function(useAnchor) { this.lastAnchor_ = null; } }; + + +/** + * @enum {string} + */ +ol.interaction.MouseWheelZoom.Mode = { + TRACKPAD: 'trackpad', + WHEEL: 'wheel' +}; From 7dd7eb1b6f0b602b56d8f817dfcc74c824d65e7a Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 11 Nov 2016 13:34:13 -0700 Subject: [PATCH 2/5] Adjust resolution then animate to next --- src/ol/interaction/mousewheelzoom.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/ol/interaction/mousewheelzoom.js b/src/ol/interaction/mousewheelzoom.js index 351048850a..b1db8d50b9 100644 --- a/src/ol/interaction/mousewheelzoom.js +++ b/src/ol/interaction/mousewheelzoom.js @@ -1,6 +1,7 @@ goog.provide('ol.interaction.MouseWheelZoom'); goog.require('ol'); +goog.require('ol.easing'); goog.require('ol.events.EventType'); goog.require('ol.has'); goog.require('ol.interaction.Interaction'); @@ -135,6 +136,24 @@ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) { ol.interaction.MouseWheelZoom.Mode.WHEEL; } + if (this.mode_ === ol.interaction.MouseWheelZoom.Mode.TRACKPAD) { + var view = map.getView(); + view.cancelAnimations(); + var resolution = view.getResolution() * Math.pow(2, delta / 300); + if (this.lastAnchor_) { + var center = view.calculateCenterZoom(resolution, this.lastAnchor_); + view.setCenter(center); + } + view.setResolution(resolution); + view.animate({ + resolution: view.constrainResolution(resolution, delta > 0 ? -1 : 1), + easing: ol.easing.easeOut, + anchor: this.lastAnchor_ + }); + this.startTime_ = now; + return false; + } + this.delta_ += delta; var timeLeft = Math.max(this.timeout_ - (now - this.startTime_), 0); @@ -159,6 +178,7 @@ ol.interaction.MouseWheelZoom.prototype.doZoom_ = function(map) { ol.interaction.Interaction.zoomByDelta(map, view, -delta, this.lastAnchor_, this.duration_); } + this.mode_ = undefined; this.delta_ = 0; this.lastAnchor_ = null; this.startTime_ = undefined; From e2be8611ef35d687f94284bbd298ce6fb1fca1eb Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 11 Nov 2016 19:14:16 -0700 Subject: [PATCH 3/5] Unconstrainted zooming --- src/ol/interaction/mousewheelzoom.js | 47 +++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/src/ol/interaction/mousewheelzoom.js b/src/ol/interaction/mousewheelzoom.js index b1db8d50b9..159e7a2c8f 100644 --- a/src/ol/interaction/mousewheelzoom.js +++ b/src/ol/interaction/mousewheelzoom.js @@ -73,6 +73,20 @@ ol.interaction.MouseWheelZoom = function(opt_options) { */ this.mode_ = undefined; + /** + * The number of delta values per zoom level + * @private + * @type {number} + */ + this.trackpadDeltaPerZoom_ = 300; + + /** + * The zoom factor by which scroll zooming is allowed to exceed the limits. + * @private + * @type {number} + */ + this.trackpadZoomBuffer_ = 1.5; + }; ol.inherits(ol.interaction.MouseWheelZoom, ol.interaction.Interaction); @@ -138,18 +152,37 @@ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) { if (this.mode_ === ol.interaction.MouseWheelZoom.Mode.TRACKPAD) { var view = map.getView(); - view.cancelAnimations(); - var resolution = view.getResolution() * Math.pow(2, delta / 300); + var resolution = view.getResolution() * Math.pow(2, delta / this.trackpadDeltaPerZoom_); + var minResolution = view.getMinResolution(); + var maxResolution = view.getMaxResolution(); + var rebound = 0; + if (resolution < minResolution) { + resolution = Math.max(resolution, minResolution / this.trackpadZoomBuffer_); + rebound = 1; + } else if (resolution > maxResolution) { + resolution = Math.min(resolution, maxResolution * this.trackpadZoomBuffer_); + rebound = -1; + } if (this.lastAnchor_) { var center = view.calculateCenterZoom(resolution, this.lastAnchor_); view.setCenter(center); } view.setResolution(resolution); - view.animate({ - resolution: view.constrainResolution(resolution, delta > 0 ? -1 : 1), - easing: ol.easing.easeOut, - anchor: this.lastAnchor_ - }); + if (rebound > 0) { + view.animate({ + resolution: minResolution, + easing: ol.easing.easeOut, + anchor: this.lastAnchor_, + duration: 500 + }); + } else if (rebound < 0) { + view.animate({ + resolution: maxResolution, + easing: ol.easing.easeOut, + anchor: this.lastAnchor_, + duration: 500 + }); + } this.startTime_ = now; return false; } From e6f8288d368a72517d22a1e6b0fbf5c412bb88d2 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 12 Nov 2016 11:34:54 -0700 Subject: [PATCH 4/5] Cancel and restart animation when wheel zooming --- src/ol/interaction/mousewheelzoom.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ol/interaction/mousewheelzoom.js b/src/ol/interaction/mousewheelzoom.js index 159e7a2c8f..c5acd21cfc 100644 --- a/src/ol/interaction/mousewheelzoom.js +++ b/src/ol/interaction/mousewheelzoom.js @@ -192,8 +192,7 @@ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) { var timeLeft = Math.max(this.timeout_ - (now - this.startTime_), 0); clearTimeout(this.timeoutId_); - this.timeoutId_ = setTimeout( - this.doZoom_.bind(this, map), timeLeft); + this.timeoutId_ = setTimeout(this.handleWheelZoom_.bind(this, map), timeLeft); return false; }; @@ -203,14 +202,15 @@ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) { * @private * @param {ol.Map} map Map. */ -ol.interaction.MouseWheelZoom.prototype.doZoom_ = function(map) { +ol.interaction.MouseWheelZoom.prototype.handleWheelZoom_ = function(map) { var view = map.getView(); - if (!view.getAnimating()) { - var maxDelta = ol.MOUSEWHEELZOOM_MAXDELTA; - var delta = ol.math.clamp(this.delta_, -maxDelta, maxDelta); - ol.interaction.Interaction.zoomByDelta(map, view, -delta, this.lastAnchor_, - this.duration_); + if (view.getAnimating()) { + view.cancelAnimations(); } + var maxDelta = ol.MOUSEWHEELZOOM_MAXDELTA; + var delta = ol.math.clamp(this.delta_, -maxDelta, maxDelta); + ol.interaction.Interaction.zoomByDelta(map, view, -delta, this.lastAnchor_, + this.duration_); this.mode_ = undefined; this.delta_ = 0; this.lastAnchor_ = null; From 489d37d3846ce96a7567b2ea0e80db00c731f8e5 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 12 Nov 2016 12:05:24 -0700 Subject: [PATCH 5/5] Use representative wheel delta values in the tests --- src/ol/interaction/mousewheelzoom.js | 1 - .../ol/interaction/mousewheelzoom.test.js | 39 +++++++++++-------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/ol/interaction/mousewheelzoom.js b/src/ol/interaction/mousewheelzoom.js index c5acd21cfc..04acd0388d 100644 --- a/src/ol/interaction/mousewheelzoom.js +++ b/src/ol/interaction/mousewheelzoom.js @@ -116,7 +116,6 @@ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) { // Delta normalisation inspired by // https://github.com/mapbox/mapbox-gl-js/blob/001c7b9/js/ui/handler/scroll_zoom.js - //TODO There's more good stuff in there for inspiration to improve this interaction. var delta; if (mapBrowserEvent.type == ol.events.EventType.WHEEL) { delta = wheelEvent.deltaY; diff --git a/test/spec/ol/interaction/mousewheelzoom.test.js b/test/spec/ol/interaction/mousewheelzoom.test.js index c2aebc5e06..f76f0469a3 100644 --- a/test/spec/ol/interaction/mousewheelzoom.test.js +++ b/test/spec/ol/interaction/mousewheelzoom.test.js @@ -7,14 +7,17 @@ goog.require('ol.View'); goog.require('ol.events.Event'); goog.require('ol.has'); goog.require('ol.interaction.Interaction'); +goog.require('ol.interaction.MouseWheelZoom'); describe('ol.interaction.MouseWheelZoom', function() { - var map; + var map, interaction; beforeEach(function() { + interaction = new ol.interaction.MouseWheelZoom(); map = new ol.Map({ target: createMapDiv(100, 100), + interactions: [interaction], view: new ol.View({ center: [0, 0], resolutions: [2, 1, 0.5], @@ -23,8 +26,11 @@ describe('ol.interaction.MouseWheelZoom', function() { }); map.renderSync(); }); + afterEach(function() { disposeMap(map); + map = null; + interaction = null; }); describe('timeout duration', function() { @@ -58,14 +64,12 @@ describe('ol.interaction.MouseWheelZoom', function() { }); describe('handleEvent()', function() { - it('[wheel] works on Firefox in DOM_DELTA_PIXEL mode', function(done) { + + it('works on Firefox in DOM_DELTA_PIXEL mode (trackpad)', function(done) { var origHasFirefox = ol.has.FIREFOX; ol.has.FIREFOX = true; - var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta'); map.once('postrender', function() { - expect(spy.getCall(0).args[2]).to.be(-1); - expect(spy.getCall(0).args[3]).to.eql([0, 0]); - ol.interaction.Interaction.zoomByDelta.restore(); + expect(interaction.mode_).to.be(ol.interaction.MouseWheelZoom.Mode.TRACKPAD); ol.has.FIREFOX = origHasFirefox; done(); }); @@ -79,14 +83,12 @@ describe('ol.interaction.MouseWheelZoom', function() { event.coordinate = [0, 0]; map.handleMapBrowserEvent(event); }); - it('[wheel] works in DOM_DELTA_PIXEL mode', function(done) { + + it('works in DOM_DELTA_PIXEL mode (trackpad)', function(done) { var origHasFirefox = ol.has.FIREFOX; ol.has.FIREFOX = false; - var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta'); map.once('postrender', function() { - expect(spy.getCall(0).args[2]).to.be(-1); - expect(spy.getCall(0).args[3]).to.eql([0, 0]); - ol.interaction.Interaction.zoomByDelta.restore(); + expect(interaction.mode_).to.be(ol.interaction.MouseWheelZoom.Mode.TRACKPAD); ol.has.FIREFOX = origHasFirefox; done(); }); @@ -100,7 +102,8 @@ describe('ol.interaction.MouseWheelZoom', function() { event.coordinate = [0, 0]; map.handleMapBrowserEvent(event); }); - it('[wheel] works in DOM_DELTA_LINE mode', function(done) { + + it('works in DOM_DELTA_LINE mode (wheel)', function(done) { var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta'); map.once('postrender', function() { expect(spy.getCall(0).args[2]).to.be(-1); @@ -111,14 +114,15 @@ describe('ol.interaction.MouseWheelZoom', function() { var event = new ol.MapBrowserEvent('wheel', map, { type: 'wheel', deltaMode: WheelEvent.DOM_DELTA_LINE, - deltaY: 1 / 40, + deltaY: 3.714599609375, target: map.getViewport(), preventDefault: ol.events.Event.prototype.preventDefault }); event.coordinate = [0, 0]; map.handleMapBrowserEvent(event); }); - it('[mousewheel] works on Safari', function(done) { + + it('works on Safari (wheel)', function(done) { var origHasSafari = ol.has.SAFARI; ol.has.SAFARI = true; var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta'); @@ -131,14 +135,15 @@ describe('ol.interaction.MouseWheelZoom', function() { }); var event = new ol.MapBrowserEvent('mousewheel', map, { type: 'mousewheel', - wheelDeltaY: -3, + wheelDeltaY: -50, target: map.getViewport(), preventDefault: ol.events.Event.prototype.preventDefault }); event.coordinate = [0, 0]; map.handleMapBrowserEvent(event); }); - it('[mousewheel] works on other browsers', function(done) { + + it('works on other browsers (wheel)', function(done) { var origHasSafari = ol.has.SAFARI; ol.has.SAFARI = false; var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta'); @@ -151,7 +156,7 @@ describe('ol.interaction.MouseWheelZoom', function() { }); var event = new ol.MapBrowserEvent('mousewheel', map, { type: 'mousewheel', - wheelDeltaY: -1, + wheelDeltaY: -120, target: map.getViewport(), preventDefault: ol.events.Event.prototype.preventDefault });