Use pointer events everywhere

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<import("./control/Control.js").default>}
@@ -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;

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.POINTERMOVE, this.handleMouseMove, this)
-        listen(viewport, EventType.TOUCHSTART, this.handleMouseMove, this)
       );
       if (this.renderOnMouseOut_) {
         this.listenerKeys.push(
-          listen(viewport, EventType.MOUSEOUT, this.handleMouseOut, this),
+          listen(viewport, EventType.POINTEROUT, this.handleMouseOut, this)
-          listen(viewport, EventType.TOUCHEND, this.handleMouseOut, this)
         );
       }
     }

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'
 };

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) {

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('&nbsp;');
 
-        target.dispatchEvent(new MouseEvent('mousemove'));
+        target.dispatchEvent(new PointerEvent('pointermove'));
-        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('&nbsp;');
       });
 
@@ -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'));
+        target.dispatchEvent(new PointerEvent('pointermove'));
-        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('20,-30');
       });
     });

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, {
+      const event = new MapBrowserEvent('wheel', map, {
-        type: 'mousewheel',
+        type: 'wheel',
         target: map.getViewport(),
         preventDefault: Event.prototype.preventDefault
       });
@@ -130,47 +130,24 @@ describe('ol.interaction.MouseWheelZoom', function() {
         map.handleMapBrowserEvent(event);
       });
 
-      if (SAFARI) {
+      it.only('works on all browsers (wheel)', function(done) {
-        it('works on Safari (wheel)', function(done) {
+        map.once('postrender', function() {
-          map.once('postrender', function() {
+          const call = view.animate.getCall(0);
-            const call = view.animate.getCall(0);
+          expect(call.args[0].resolution).to.be(2);
-            expect(call.args[0].resolution).to.be(2);
+          expect(call.args[0].anchor).to.eql([0, 0]);
-            expect(call.args[0].anchor).to.eql([0, 0]);
+          done();
-            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);
         });
-      }
 
-      if (!SAFARI) {
+        const event = new MapBrowserEvent('wheel', map, {
-        it('works on other browsers (wheel)', function(done) {
+          type: 'wheel',
-          map.once('postrender', function() {
+          deltaY: 120,
-            const call = view.animate.getCall(0);
+          target: map.getViewport(),
-            expect(call.args[0].resolution).to.be(2);
+          preventDefault: Event.prototype.preventDefault
-            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);
         });
-      }
+        event.coordinate = [0, 0];
+
+        map.handleMapBrowserEvent(event);
+      });
 
     });