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

Improve tests and fix singleclick

Browse Source
This commit is contained in:
Andreas Hocevar
2020-10-21 16:40:16 +02:00
parent 63a784531d
commit de1b4ddb97
2 changed files with 109 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/ol/MapBrowserEventHandler.js
View File

@@ -31,6 +31,12 @@ class MapBrowserEventHandler extends EventTarget {
*/
this.clickTimeoutId_;
/**
* Emulate dblclick and singleclick. Will be true when only one pointer is active.
* @type {boolean}
*/
this.emulateClicks_ = false;
/**
* @type {boolean}
* @private
@@ -137,7 +143,7 @@ class MapBrowserEventHandler extends EventTarget {
pointerEvent
);
this.dispatchEvent(newEvent);
} else if (this.activePointers_ === 0) {
} else {
// click
this.clickTimeoutId_ = setTimeout(
/** @this {MapBrowserEventHandler} */
@@ -197,6 +203,7 @@ class MapBrowserEventHandler extends EventTarget {
// We only fire click, singleclick, and doubleclick if nobody has called
// event.stopPropagation() or event.preventDefault().
if (
this.emulateClicks_ &&
!newEvent.propagationStopped &&
!this.dragging_ &&
this.isMouseActionButton_(pointerEvent)
@@ -228,6 +235,7 @@ class MapBrowserEventHandler extends EventTarget {
* @private
*/
handlePointerDown_(pointerEvent) {
this.emulateClicks_ = this.activePointers_ === 0;
this.updateActivePointers_(pointerEvent);
const newEvent = new MapBrowserEvent(
MapBrowserEventType.POINTERDOWN,

133
test/spec/ol/MapBrowserEventHandler.test.js
View File

@@ -1,6 +1,6 @@
import Event from '../../../src/ol/events/Event.js';
import Map from '../../../src/ol/Map.js';
import MapBrowserEventHandler from '../../../src/ol/MapBrowserEventHandler.js';
import OlEvent from '../../../src/ol/events/Event.js';
import {DEVICE_PIXEL_RATIO} from '../../../src/ol/has.js';
import {listen} from '../../../src/ol/events.js';
@@ -37,7 +37,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('emulates click', function () {
const event = new Event();
const event = new OlEvent();
event.type = 'pointerdown';
(event.target = target), (event.clientX = 0);
event.clientY = 0;
@@ -46,7 +46,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('emulates singleclick', function () {
const event = new Event();
const event = new OlEvent();
event.type = 'pointerdown';
event.target = target;
event.clientX = 0;
@@ -65,7 +65,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('emulates dblclick', function () {
const event = new Event();
const event = new OlEvent();
event.type = 'pointerdown';
event.target = target;
event.clientX = 0;
@@ -82,26 +82,6 @@ describe('ol/MapBrowserEventHandler', function () {
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.calledOnce).to.be.ok();
});
it('does not emulate dblclick when multiple pointers are involved', function () {
const event = new Event();
event.type = 'pointerdown';
event.target = target;
event.clientX = 0;
event.clientY = 0;
handler.activePointers_ = 1;
handler.emulateClick_(event);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.not.be.ok();
handler.emulateClick_(event);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.not.be.ok();
clock.tick(250);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.not.be.ok();
});
});
describe('#down_', function () {
@@ -115,7 +95,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('is an event after handlePointerDown_ has been called', function () {
const event = new Event('pointerdown');
const event = new OlEvent('pointerdown');
handler.handlePointerDown_(event);
expect(handler.down_).to.be(event);
});
@@ -128,7 +108,7 @@ describe('ol/MapBrowserEventHandler', function () {
beforeEach(function () {
defaultHandler = new MapBrowserEventHandler(new Map({}));
moveToleranceHandler = new MapBrowserEventHandler(new Map({}), 8);
pointerdownAt0 = new Event();
pointerdownAt0 = new OlEvent();
pointerdownAt0.type = 'pointerdown';
pointerdownAt0.clientX = 0;
pointerdownAt0.clientY = 0;
@@ -137,7 +117,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('is not moving if distance is 0', function () {
pointerdownAt0 = new Event();
pointerdownAt0 = new OlEvent();
pointerdownAt0.type = 'pointerdown';
pointerdownAt0.clientX = 0;
pointerdownAt0.clientY = 0;
@@ -145,7 +125,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('is moving if distance is 2', function () {
const pointerdownAt2 = new Event();
const pointerdownAt2 = new OlEvent();
pointerdownAt2.type = 'pointerdown';
pointerdownAt2.clientX = DEVICE_PIXEL_RATIO + 1;
pointerdownAt2.clientY = DEVICE_PIXEL_RATIO + 1;
@@ -153,7 +133,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('is moving with negative distance', function () {
const pointerdownAt2 = new Event();
const pointerdownAt2 = new OlEvent();
pointerdownAt2.type = 'pointerdown';
pointerdownAt2.clientX = -(DEVICE_PIXEL_RATIO + 1);
pointerdownAt2.clientY = -(DEVICE_PIXEL_RATIO + 1);
@@ -161,7 +141,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('is not moving if distance is less than move tolerance', function () {
const pointerdownAt2 = new Event();
const pointerdownAt2 = new OlEvent();
pointerdownAt2.type = 'pointerdown';
pointerdownAt2.clientX = DEVICE_PIXEL_RATIO + 1;
pointerdownAt2.clientY = DEVICE_PIXEL_RATIO + 1;
@@ -169,7 +149,7 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('is moving if distance is greater than move tolerance', function () {
const pointerdownAt9 = new Event();
const pointerdownAt9 = new OlEvent();
pointerdownAt9.type = 'pointerdown';
pointerdownAt9.clientX = DEVICE_PIXEL_RATIO * 8 + 1;
pointerdownAt9.clientY = DEVICE_PIXEL_RATIO * 8 + 1;
@@ -177,13 +157,13 @@ describe('ol/MapBrowserEventHandler', function () {
});
it('is moving when moving back close to the down pixel', function () {
const pointermoveAt9 = new Event();
const pointermoveAt9 = new OlEvent();
pointermoveAt9.type = 'pointermove';
pointermoveAt9.clientX = DEVICE_PIXEL_RATIO * 8 + 1;
pointermoveAt9.clientY = DEVICE_PIXEL_RATIO * 8 + 1;
moveToleranceHandler.handlePointerMove_(pointermoveAt9);
expect(moveToleranceHandler.isMoving_(pointermoveAt9)).to.be(true);
const pointermoveAt2 = new Event();
const pointermoveAt2 = new OlEvent();
pointermoveAt2.type = 'pointermove';
pointermoveAt2.clientX = DEVICE_PIXEL_RATIO + 1;
pointermoveAt2.clientY = DEVICE_PIXEL_RATIO + 1;
@@ -208,4 +188,91 @@ describe('ol/MapBrowserEventHandler', function () {
expect(event.preventDefault.callCount).to.be(1);
});
});
describe('dblclick', function () {
let clock;
let handler;
let clickSpy;
let singleclickSpy;
let dblclickSpy;
let target;
let element, down1, down2, up1, up2;
beforeEach(function () {
clock = sinon.useFakeTimers();
target = document.createElement('div');
handler = new MapBrowserEventHandler(
new Map({
target: target,
})
);
element = handler.element_;
down1 = new Event('pointerdown', {target: element});
down1.clientX = 0;
down1.clientY = 0;
down1.button = 0;
down1.pointerId = 1;
down2 = new Event('pointerdown', {target: element});
down2.clientX = 0;
down2.clientY = 0;
down2.button = 0;
down2.pointerId = 2;
up1 = new Event('pointerup', {target: element});
up1.clientX = 0;
up1.clientY = 0;
up1.button = 0;
up1.pointerId = 1;
up2 = new Event('pointerup', {target: element});
up2.clientX = 0;
up2.clientY = 0;
up2.button = 0;
up2.pointerId = 2;
clickSpy = sinon.spy();
listen(handler, 'click', clickSpy);
singleclickSpy = sinon.spy();
listen(handler, 'singleclick', singleclickSpy);
dblclickSpy = sinon.spy();
listen(handler, 'dblclick', dblclickSpy);
});
afterEach(function () {
clock.restore();
});
it('emulates dblclick', function () {
element.dispatchEvent(down1);
document.dispatchEvent(up1);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.not.be.ok();
element.dispatchEvent(down2);
document.dispatchEvent(up2);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.be.ok();
clock.tick(250);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.be.ok();
});
it('does not emulate dblclick and singleclick when multiple pointers are active', function () {
element.dispatchEvent(down1);
element.dispatchEvent(down2);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.not.be.ok();
document.dispatchEvent(up1);
document.dispatchEvent(up2);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.not.be.ok();
clock.tick(250);
expect(singleclickSpy.called).to.not.be.ok();
expect(dblclickSpy.called).to.not.be.ok();
});
});
});