ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use pointer events everywhere

Browse Source
This commit is contained in:
ahocevar
2019-08-31 22:49:40 +02:00
parent 1f5dfef200
commit d416866108
6 changed files with 37 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ol/PluggableMap.js
View File

@@ -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;

9
src/ol/control/MousePosition.js
View File

@@ -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)
);
}
}

9
src/ol/events/EventType.js
View File

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

9
src/ol/interaction/MouseWheelZoom.js
View File

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

26
test/spec/ol/control/mouseposition.test.js
View File

@@ -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'));
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('&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'));
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');
});
});

59
test/spec/ol/interaction/mousewheelzoom.test.js
View File

@@ -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);
});
});