From d416866108a71c9dbe43e77005b0cfb91ab59111 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Sat, 31 Aug 2019 22:49:40 +0200 Subject: [PATCH] Use pointer events everywhere --- src/ol/PluggableMap.js | 2 - src/ol/control/MousePosition.js | 9 ++- src/ol/events/EventType.js | 9 --- src/ol/interaction/MouseWheelZoom.js | 9 +-- test/spec/ol/control/mouseposition.test.js | 26 ++++---- .../ol/interaction/mousewheelzoom.test.js | 59 ++++++------------- 6 files changed, 37 insertions(+), 77 deletions(-) diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index b9aada6414..f5f11708e8 100644 --- a/src/ol/PluggableMap.js +++ b/src/ol/PluggableMap.js @@ -287,7 +287,6 @@ class PluggableMap extends BaseObject { listen(this.viewport_, EventType.CONTEXTMENU, this.handleBrowserEvent, this); listen(this.viewport_, EventType.WHEEL, this.handleBrowserEvent, this); - listen(this.viewport_, EventType.MOUSEWHEEL, this.handleBrowserEvent, this); /** * @type {Collection} @@ -524,7 +523,6 @@ class PluggableMap extends BaseObject { this.mapBrowserEventHandler_.dispose(); unlisten(this.viewport_, EventType.CONTEXTMENU, this.handleBrowserEvent, this); unlisten(this.viewport_, EventType.WHEEL, this.handleBrowserEvent, this); - unlisten(this.viewport_, EventType.MOUSEWHEEL, this.handleBrowserEvent, this); if (this.handleResize_ !== undefined) { removeEventListener(EventType.RESIZE, this.handleResize_, false); this.handleResize_ = undefined; diff --git a/src/ol/control/MousePosition.js b/src/ol/control/MousePosition.js index 0ca9922e9d..8d62189b95 100644 --- a/src/ol/control/MousePosition.js +++ b/src/ol/control/MousePosition.js @@ -2,10 +2,11 @@ * @module ol/control/MousePosition */ import {listen} from '../events.js'; -import EventType from '../events/EventType.js'; +import EventType from '../pointer/EventType.js'; import {getChangeEventType} from '../Object.js'; import Control from './Control.js'; import {getTransformFromProjections, identityTransform, get as getProjection} from '../proj.js'; +import 'pepjs'; /** @@ -170,13 +171,11 @@ class MousePosition extends Control { if (map) { const viewport = map.getViewport(); this.listenerKeys.push( - listen(viewport, EventType.MOUSEMOVE, this.handleMouseMove, this), - listen(viewport, EventType.TOUCHSTART, this.handleMouseMove, this) + listen(viewport, EventType.POINTERMOVE, this.handleMouseMove, this) ); if (this.renderOnMouseOut_) { this.listenerKeys.push( - listen(viewport, EventType.MOUSEOUT, this.handleMouseOut, this), - listen(viewport, EventType.TOUCHEND, this.handleMouseOut, this) + listen(viewport, EventType.POINTEROUT, this.handleMouseOut, this) ); } } diff --git a/src/ol/events/EventType.js b/src/ol/events/EventType.js index 51bab21c1c..a67f0d880b 100644 --- a/src/ol/events/EventType.js +++ b/src/ol/events/EventType.js @@ -31,15 +31,6 @@ export default { KEYDOWN: 'keydown', KEYPRESS: 'keypress', LOAD: 'load', - MOUSEDOWN: 'mousedown', - MOUSEMOVE: 'mousemove', - MOUSEOUT: 'mouseout', - MOUSEUP: 'mouseup', - MOUSEWHEEL: 'mousewheel', - MSPOINTERDOWN: 'MSPointerDown', RESIZE: 'resize', - TOUCHSTART: 'touchstart', - TOUCHMOVE: 'touchmove', - TOUCHEND: 'touchend', WHEEL: 'wheel' }; diff --git a/src/ol/interaction/MouseWheelZoom.js b/src/ol/interaction/MouseWheelZoom.js index 41caa45c78..b89741e7f1 100644 --- a/src/ol/interaction/MouseWheelZoom.js +++ b/src/ol/interaction/MouseWheelZoom.js @@ -3,7 +3,7 @@ */ import {always} from '../events/condition.js'; import EventType from '../events/EventType.js'; -import {DEVICE_PIXEL_RATIO, FIREFOX, SAFARI} from '../has.js'; +import {DEVICE_PIXEL_RATIO, FIREFOX} from '../has.js'; import Interaction, {zoomByDelta} from './Interaction.js'; import {clamp} from '../math.js'; @@ -153,7 +153,7 @@ class MouseWheelZoom extends Interaction { return true; } const type = mapBrowserEvent.type; - if (type !== EventType.WHEEL && type !== EventType.MOUSEWHEEL) { + if (type !== EventType.WHEEL) { return true; } @@ -178,11 +178,6 @@ class MouseWheelZoom extends Interaction { if (wheelEvent.deltaMode === WheelEvent.DOM_DELTA_LINE) { delta *= 40; } - } else if (mapBrowserEvent.type == EventType.MOUSEWHEEL) { - delta = -wheelEvent.wheelDeltaY; - if (SAFARI) { - delta /= 3; - } } if (delta === 0) { diff --git a/test/spec/ol/control/mouseposition.test.js b/test/spec/ol/control/mouseposition.test.js index b1560fab6c..211d472f14 100644 --- a/test/spec/ol/control/mouseposition.test.js +++ b/test/spec/ol/control/mouseposition.test.js @@ -1,7 +1,7 @@ import Map from '../../../../src/ol/Map.js'; import MousePosition from '../../../../src/ol/control/MousePosition.js'; import View from '../../../../src/ol/View.js'; -import EventType from '../../../../src/ol/events/EventType.js'; +import EventType from '../../../../src/ol/pointer/EventType.js'; describe('ol/control/MousePosition', function() { @@ -57,7 +57,7 @@ describe('ol/control/MousePosition', function() { const viewport = map.getViewport(); // calculated in case body has top < 0 (test runner with small window) const position = viewport.getBoundingClientRect(); - const evt = new MouseEvent(type, { + const evt = new PointerEvent(type, { clientX: position.left + x + width / 2, clientY: position.top + y + height / 2 }); @@ -74,13 +74,13 @@ describe('ol/control/MousePosition', function() { const element = document.querySelector('.ol-mouse-position', map.getTarget()); - simulateEvent(EventType.MOUSEOUT, width + 1, height + 1); + simulateEvent(EventType.POINTEROUT, width + 1, height + 1); expect(element.innerHTML).to.be('some text'); - simulateEvent(EventType.MOUSEMOVE, 20, 30); + simulateEvent(EventType.POINTERMOVE, 20, 30); expect(element.innerHTML).to.be('20,-30'); - simulateEvent(EventType.MOUSEOUT, width + 1, height + 1); + simulateEvent(EventType.POINTEROUT, width + 1, height + 1); expect(element.innerHTML).to.be('some text'); }); @@ -91,14 +91,14 @@ describe('ol/control/MousePosition', function() { const element = document.querySelector('.ol-mouse-position', map.getTarget()); - simulateEvent(EventType.MOUSEOUT, width + 1, height + 1); + simulateEvent(EventType.POINTEROUT, width + 1, height + 1); expect(element.innerHTML).to.be(' '); - target.dispatchEvent(new MouseEvent('mousemove')); - simulateEvent(EventType.MOUSEMOVE, 20, 30); + target.dispatchEvent(new PointerEvent('pointermove')); + simulateEvent(EventType.POINTERMOVE, 20, 30); expect(element.innerHTML).to.be('20,-30'); - simulateEvent(EventType.MOUSEOUT, width + 1, height + 1); + simulateEvent(EventType.POINTEROUT, width + 1, height + 1); expect(element.innerHTML).to.be(' '); }); @@ -111,14 +111,14 @@ describe('ol/control/MousePosition', function() { const element = document.querySelector('.ol-mouse-position', map.getTarget()); - simulateEvent(EventType.MOUSEOUT, width + 1, height + 1); + simulateEvent(EventType.POINTEROUT, width + 1, height + 1); expect(element.innerHTML).to.be(''); - target.dispatchEvent(new MouseEvent('mousemove')); - simulateEvent(EventType.MOUSEMOVE, 20, 30); + target.dispatchEvent(new PointerEvent('pointermove')); + simulateEvent(EventType.POINTERMOVE, 20, 30); expect(element.innerHTML).to.be('20,-30'); - simulateEvent(EventType.MOUSEOUT, width + 1, height + 1); + simulateEvent(EventType.POINTEROUT, width + 1, height + 1); expect(element.innerHTML).to.be('20,-30'); }); }); diff --git a/test/spec/ol/interaction/mousewheelzoom.test.js b/test/spec/ol/interaction/mousewheelzoom.test.js index a75f0080a7..11e132c85c 100644 --- a/test/spec/ol/interaction/mousewheelzoom.test.js +++ b/test/spec/ol/interaction/mousewheelzoom.test.js @@ -2,7 +2,7 @@ import Map from '../../../../src/ol/Map.js'; import MapBrowserEvent from '../../../../src/ol/MapBrowserEvent.js'; import View from '../../../../src/ol/View.js'; import Event from '../../../../src/ol/events/Event.js'; -import {DEVICE_PIXEL_RATIO, FIREFOX, SAFARI} from '../../../../src/ol/has.js'; +import {DEVICE_PIXEL_RATIO, FIREFOX} from '../../../../src/ol/has.js'; import MouseWheelZoom, {Mode} from '../../../../src/ol/interaction/MouseWheelZoom.js'; @@ -42,8 +42,8 @@ describe('ol.interaction.MouseWheelZoom', function() { }); it('works with the default value', function(done) { - const event = new MapBrowserEvent('mousewheel', map, { - type: 'mousewheel', + const event = new MapBrowserEvent('wheel', map, { + type: 'wheel', target: map.getViewport(), preventDefault: Event.prototype.preventDefault }); @@ -130,47 +130,24 @@ describe('ol.interaction.MouseWheelZoom', function() { map.handleMapBrowserEvent(event); }); - if (SAFARI) { - it('works on Safari (wheel)', function(done) { - map.once('postrender', function() { - const call = view.animate.getCall(0); - expect(call.args[0].resolution).to.be(2); - expect(call.args[0].anchor).to.eql([0, 0]); - done(); - }); - - const event = new MapBrowserEvent('mousewheel', map, { - type: 'mousewheel', - wheelDeltaY: -50, - target: map.getViewport(), - preventDefault: Event.prototype.preventDefault - }); - event.coordinate = [0, 0]; - - map.handleMapBrowserEvent(event); + it.only('works on all browsers (wheel)', function(done) { + map.once('postrender', function() { + const call = view.animate.getCall(0); + expect(call.args[0].resolution).to.be(2); + expect(call.args[0].anchor).to.eql([0, 0]); + done(); }); - } - if (!SAFARI) { - it('works on other browsers (wheel)', function(done) { - map.once('postrender', function() { - const call = view.animate.getCall(0); - expect(call.args[0].resolution).to.be(2); - expect(call.args[0].anchor).to.eql([0, 0]); - done(); - }); - - const event = new MapBrowserEvent('mousewheel', map, { - type: 'mousewheel', - wheelDeltaY: -120, - target: map.getViewport(), - preventDefault: Event.prototype.preventDefault - }); - event.coordinate = [0, 0]; - - map.handleMapBrowserEvent(event); + const event = new MapBrowserEvent('wheel', map, { + type: 'wheel', + deltaY: 120, + target: map.getViewport(), + preventDefault: Event.prototype.preventDefault }); - } + event.coordinate = [0, 0]; + + map.handleMapBrowserEvent(event); + }); });