Rework away static members from pointer related classes

This commit is contained in:
Björn Harrtell
2018-02-24 16:24:53 +01:00
parent 3cbdb208c1
commit 6d1e8cb38b
6 changed files with 104 additions and 108 deletions

View File

@@ -66,26 +66,23 @@ inherits(MouseSource, EventSource);
/** /**
* @const
* @type {number} * @type {number}
*/ */
MouseSource.POINTER_ID = 1; export const POINTER_ID = 1;
/** /**
* @const
* @type {string} * @type {string}
*/ */
MouseSource.POINTER_TYPE = 'mouse'; const POINTER_TYPE = 'mouse';
/** /**
* Radius around touchend that swallows mouse events. * Radius around touchend that swallows mouse events.
* *
* @const
* @type {number} * @type {number}
*/ */
MouseSource.DEDUP_DIST = 25; const DEDUP_DIST = 25;
/** /**
@@ -120,8 +117,8 @@ MouseSource.prototype.isEventSimulatedFromTouch_ = function(inEvent) {
// simulated mouse events will be swallowed near a primary touchend // simulated mouse events will be swallowed near a primary touchend
const dx = Math.abs(x - t[0]); const dx = Math.abs(x - t[0]);
const dy = Math.abs(y - t[1]); const dy = Math.abs(y - t[1]);
if (dx <= MouseSource.DEDUP_DIST && if (dx <= DEDUP_DIST &&
dy <= MouseSource.DEDUP_DIST) { dy <= DEDUP_DIST) {
return true; return true;
} }
} }
@@ -137,7 +134,7 @@ MouseSource.prototype.isEventSimulatedFromTouch_ = function(inEvent) {
* @param {ol.pointer.PointerEventHandler} dispatcher Event handler. * @param {ol.pointer.PointerEventHandler} dispatcher Event handler.
* @return {Object} The copied event. * @return {Object} The copied event.
*/ */
MouseSource.prepareEvent = function(inEvent, dispatcher) { function prepareEvent(inEvent, dispatcher) {
const e = dispatcher.cloneEvent(inEvent, inEvent); const e = dispatcher.cloneEvent(inEvent, inEvent);
// forward mouse preventDefault // forward mouse preventDefault
@@ -147,12 +144,12 @@ MouseSource.prepareEvent = function(inEvent, dispatcher) {
pd(); pd();
}; };
e.pointerId = MouseSource.POINTER_ID; e.pointerId = POINTER_ID;
e.isPrimary = true; e.isPrimary = true;
e.pointerType = MouseSource.POINTER_TYPE; e.pointerType = POINTER_TYPE;
return e; return e;
}; }
/** /**
@@ -164,11 +161,11 @@ MouseSource.prototype.mousedown = function(inEvent) {
if (!this.isEventSimulatedFromTouch_(inEvent)) { if (!this.isEventSimulatedFromTouch_(inEvent)) {
// TODO(dfreedman) workaround for some elements not sending mouseup // TODO(dfreedman) workaround for some elements not sending mouseup
// http://crbug/149091 // http://crbug/149091
if (MouseSource.POINTER_ID.toString() in this.pointerMap) { if (POINTER_ID.toString() in this.pointerMap) {
this.cancel(inEvent); this.cancel(inEvent);
} }
const e = MouseSource.prepareEvent(inEvent, this.dispatcher); const e = prepareEvent(inEvent, this.dispatcher);
this.pointerMap[MouseSource.POINTER_ID.toString()] = inEvent; this.pointerMap[POINTER_ID.toString()] = inEvent;
this.dispatcher.down(e, inEvent); this.dispatcher.down(e, inEvent);
} }
}; };
@@ -181,7 +178,7 @@ MouseSource.prototype.mousedown = function(inEvent) {
*/ */
MouseSource.prototype.mousemove = function(inEvent) { MouseSource.prototype.mousemove = function(inEvent) {
if (!this.isEventSimulatedFromTouch_(inEvent)) { if (!this.isEventSimulatedFromTouch_(inEvent)) {
const e = MouseSource.prepareEvent(inEvent, this.dispatcher); const e = prepareEvent(inEvent, this.dispatcher);
this.dispatcher.move(e, inEvent); this.dispatcher.move(e, inEvent);
} }
}; };
@@ -194,10 +191,10 @@ MouseSource.prototype.mousemove = function(inEvent) {
*/ */
MouseSource.prototype.mouseup = function(inEvent) { MouseSource.prototype.mouseup = function(inEvent) {
if (!this.isEventSimulatedFromTouch_(inEvent)) { if (!this.isEventSimulatedFromTouch_(inEvent)) {
const p = this.pointerMap[MouseSource.POINTER_ID.toString()]; const p = this.pointerMap[POINTER_ID.toString()];
if (p && p.button === inEvent.button) { if (p && p.button === inEvent.button) {
const e = MouseSource.prepareEvent(inEvent, this.dispatcher); const e = prepareEvent(inEvent, this.dispatcher);
this.dispatcher.up(e, inEvent); this.dispatcher.up(e, inEvent);
this.cleanupMouse(); this.cleanupMouse();
} }
@@ -212,7 +209,7 @@ MouseSource.prototype.mouseup = function(inEvent) {
*/ */
MouseSource.prototype.mouseover = function(inEvent) { MouseSource.prototype.mouseover = function(inEvent) {
if (!this.isEventSimulatedFromTouch_(inEvent)) { if (!this.isEventSimulatedFromTouch_(inEvent)) {
const e = MouseSource.prepareEvent(inEvent, this.dispatcher); const e = prepareEvent(inEvent, this.dispatcher);
this.dispatcher.enterOver(e, inEvent); this.dispatcher.enterOver(e, inEvent);
} }
}; };
@@ -225,7 +222,7 @@ MouseSource.prototype.mouseover = function(inEvent) {
*/ */
MouseSource.prototype.mouseout = function(inEvent) { MouseSource.prototype.mouseout = function(inEvent) {
if (!this.isEventSimulatedFromTouch_(inEvent)) { if (!this.isEventSimulatedFromTouch_(inEvent)) {
const e = MouseSource.prepareEvent(inEvent, this.dispatcher); const e = prepareEvent(inEvent, this.dispatcher);
this.dispatcher.leaveOut(e, inEvent); this.dispatcher.leaveOut(e, inEvent);
} }
}; };
@@ -237,7 +234,7 @@ MouseSource.prototype.mouseout = function(inEvent) {
* @param {Event} inEvent The in event. * @param {Event} inEvent The in event.
*/ */
MouseSource.prototype.cancel = function(inEvent) { MouseSource.prototype.cancel = function(inEvent) {
const e = MouseSource.prepareEvent(inEvent, this.dispatcher); const e = prepareEvent(inEvent, this.dispatcher);
this.dispatcher.cancel(e, inEvent); this.dispatcher.cancel(e, inEvent);
this.cleanupMouse(); this.cleanupMouse();
}; };
@@ -247,6 +244,6 @@ MouseSource.prototype.cancel = function(inEvent) {
* Remove the mouse from the list of active pointers. * Remove the mouse from the list of active pointers.
*/ */
MouseSource.prototype.cleanupMouse = function() { MouseSource.prototype.cleanupMouse = function() {
delete this.pointerMap[MouseSource.POINTER_ID.toString()]; delete this.pointerMap[POINTER_ID.toString()];
}; };
export default MouseSource; export default MouseSource;

View File

@@ -57,22 +57,22 @@ const MsSource = function(dispatcher) {
* @type {!Object.<string, Event|Object>} * @type {!Object.<string, Event|Object>}
*/ */
this.pointerMap = dispatcher.pointerMap; this.pointerMap = dispatcher.pointerMap;
/**
* @const
* @type {Array.<string>}
*/
this.POINTER_TYPES = [
'',
'unavailable',
'touch',
'pen',
'mouse'
];
}; };
inherits(MsSource, EventSource); inherits(MsSource, EventSource);
/**
* @const
* @type {Array.<string>}
*/
const POINTER_TYPES = [
'',
'unavailable',
'touch',
'pen',
'mouse'
];
/** /**
* Creates a copy of the original event that will be used * Creates a copy of the original event that will be used
@@ -86,7 +86,7 @@ MsSource.prototype.prepareEvent_ = function(inEvent) {
let e = inEvent; let e = inEvent;
if (typeof inEvent.pointerType === 'number') { if (typeof inEvent.pointerType === 'number') {
e = this.dispatcher.cloneEvent(inEvent, inEvent); e = this.dispatcher.cloneEvent(inEvent, inEvent);
e.pointerType = this.POINTER_TYPES[inEvent.pointerType]; e.pointerType = POINTER_TYPES[inEvent.pointerType];
} }
return e; return e;

View File

@@ -195,6 +195,13 @@ const PointerEvent = function(type, originalEvent, opt_eventDict) {
inherits(PointerEvent, Event); inherits(PointerEvent, Event);
/**
* Is the `buttons` property supported?
* @type {boolean}
*/
const HAS_BUTTONS = false;
/** /**
* @private * @private
* @param {Object.<string, ?>} eventDict The event dictionary. * @param {Object.<string, ?>} eventDict The event dictionary.
@@ -223,7 +230,7 @@ PointerEvent.prototype.getButtons_ = function(eventDict) {
// //
// This is fixed with DOM Level 4's use of buttons // This is fixed with DOM Level 4's use of buttons
let buttons; let buttons;
if (eventDict.buttons || PointerEvent.HAS_BUTTONS) { if (eventDict.buttons || HAS_BUTTONS) {
buttons = eventDict.buttons; buttons = eventDict.buttons;
} else { } else {
switch (eventDict.which) { switch (eventDict.which) {
@@ -256,13 +263,6 @@ PointerEvent.prototype.getPressure_ = function(eventDict, buttons) {
}; };
/**
* Is the `buttons` property supported?
* @type {boolean}
*/
PointerEvent.HAS_BUTTONS = false;
/** /**
* Checks if the `buttons` property is supported. * Checks if the `buttons` property is supported.
*/ */

View File

@@ -80,6 +80,45 @@ const PointerEventHandler = function(element) {
inherits(PointerEventHandler, EventTarget); inherits(PointerEventHandler, EventTarget);
/**
* Properties to copy when cloning an event, with default values.
* @type {Array.<Array>}
*/
const CLONE_PROPS = [
// MouseEvent
['bubbles', false],
['cancelable', false],
['view', null],
['detail', null],
['screenX', 0],
['screenY', 0],
['clientX', 0],
['clientY', 0],
['ctrlKey', false],
['altKey', false],
['shiftKey', false],
['metaKey', false],
['button', 0],
['relatedTarget', null],
// DOM Level 3
['buttons', 0],
// PointerEvent
['pointerId', 0],
['width', 0],
['height', 0],
['pressure', 0],
['tiltX', 0],
['tiltY', 0],
['pointerType', ''],
['hwTimestamp', 0],
['isPrimary', false],
// event instance
['type', ''],
['target', null],
['currentTarget', null],
['which', 0]
];
/** /**
* Set up the event sources (mouse, touch and native pointers) * Set up the event sources (mouse, touch and native pointers)
@@ -204,9 +243,9 @@ PointerEventHandler.prototype.removeEvents_ = function(events) {
*/ */
PointerEventHandler.prototype.cloneEvent = function(event, inEvent) { PointerEventHandler.prototype.cloneEvent = function(event, inEvent) {
const eventCopy = {}; const eventCopy = {};
for (let i = 0, ii = PointerEventHandler.CLONE_PROPS.length; i < ii; i++) { for (let i = 0, ii = CLONE_PROPS.length; i < ii; i++) {
const p = PointerEventHandler.CLONE_PROPS[i][0]; const p = CLONE_PROPS[i][0];
eventCopy[p] = event[p] || inEvent[p] || PointerEventHandler.CLONE_PROPS[i][1]; eventCopy[p] = event[p] || inEvent[p] || CLONE_PROPS[i][1];
} }
return eventCopy; return eventCopy;
@@ -402,42 +441,4 @@ PointerEventHandler.prototype.disposeInternal = function() {
}; };
/**
* Properties to copy when cloning an event, with default values.
* @type {Array.<Array>}
*/
PointerEventHandler.CLONE_PROPS = [
// MouseEvent
['bubbles', false],
['cancelable', false],
['view', null],
['detail', null],
['screenX', 0],
['screenY', 0],
['clientX', 0],
['clientY', 0],
['ctrlKey', false],
['altKey', false],
['shiftKey', false],
['metaKey', false],
['button', 0],
['relatedTarget', null],
// DOM Level 3
['buttons', 0],
// PointerEvent
['pointerId', 0],
['width', 0],
['height', 0],
['pressure', 0],
['tiltX', 0],
['tiltY', 0],
['pointerType', ''],
['hwTimestamp', 0],
['isPrimary', false],
// event instance
['type', ''],
['target', null],
['currentTarget', null],
['which', 0]
];
export default PointerEventHandler; export default PointerEventHandler;

View File

@@ -34,7 +34,8 @@
import {inherits} from '../index.js'; import {inherits} from '../index.js';
import {remove} from '../array.js'; import {remove} from '../array.js';
import EventSource from '../pointer/EventSource.js'; import EventSource from '../pointer/EventSource.js';
import MouseSource from '../pointer/MouseSource.js'; import {POINTER_ID} from '../pointer/MouseSource.js';
/** /**
* @constructor * @constructor
@@ -80,33 +81,29 @@ const TouchSource = function(dispatcher, mouseSource) {
* @type {number|undefined} * @type {number|undefined}
*/ */
this.resetId_ = undefined; this.resetId_ = undefined;
/**
* Mouse event timeout: This should be long enough to
* ignore compat mouse events made by touch.
* @private
* @type {number}
*/
this.dedupTimeout_ = 2500;
}; };
inherits(TouchSource, EventSource); inherits(TouchSource, EventSource);
/** /**
* Mouse event timeout: This should be long enough to
* ignore compat mouse events made by touch.
* @const
* @type {number} * @type {number}
*/ */
TouchSource.DEDUP_TIMEOUT = 2500; const CLICK_COUNT_TIMEOUT = 200;
/** /**
* @const
* @type {number}
*/
TouchSource.CLICK_COUNT_TIMEOUT = 200;
/**
* @const
* @type {string} * @type {string}
*/ */
TouchSource.POINTER_TYPE = 'touch'; const POINTER_TYPE = 'touch';
/** /**
* @private * @private
@@ -126,7 +123,7 @@ TouchSource.prototype.isPrimaryTouch_ = function(inTouch) {
TouchSource.prototype.setPrimaryTouch_ = function(inTouch) { TouchSource.prototype.setPrimaryTouch_ = function(inTouch) {
const count = Object.keys(this.pointerMap).length; const count = Object.keys(this.pointerMap).length;
if (count === 0 || (count === 1 && if (count === 0 || (count === 1 &&
MouseSource.POINTER_ID.toString() in this.pointerMap)) { POINTER_ID.toString() in this.pointerMap)) {
this.firstTouchId_ = inTouch.identifier; this.firstTouchId_ = inTouch.identifier;
this.cancelResetClickCount_(); this.cancelResetClickCount_();
} }
@@ -151,7 +148,7 @@ TouchSource.prototype.removePrimaryPointer_ = function(inPointer) {
TouchSource.prototype.resetClickCount_ = function() { TouchSource.prototype.resetClickCount_ = function() {
this.resetId_ = setTimeout( this.resetId_ = setTimeout(
this.resetClickCountHandler_.bind(this), this.resetClickCountHandler_.bind(this),
TouchSource.CLICK_COUNT_TIMEOUT); CLICK_COUNT_TIMEOUT);
}; };
@@ -197,7 +194,7 @@ TouchSource.prototype.touchToPointer_ = function(browserEvent, inTouch) {
e.height = inTouch.webkitRadiusY || inTouch.radiusY || 0; e.height = inTouch.webkitRadiusY || inTouch.radiusY || 0;
e.pressure = inTouch.webkitForce || inTouch.force || 0.5; e.pressure = inTouch.webkitForce || inTouch.force || 0.5;
e.isPrimary = this.isPrimaryTouch_(inTouch); e.isPrimary = this.isPrimaryTouch_(inTouch);
e.pointerType = TouchSource.POINTER_TYPE; e.pointerType = POINTER_TYPE;
// make sure that the properties that are different for // make sure that the properties that are different for
// each `Touch` object are not copied from the BrowserEvent object // each `Touch` object are not copied from the BrowserEvent object
@@ -277,7 +274,7 @@ TouchSource.prototype.vacuumTouches_ = function(inEvent) {
// Never remove pointerId == 1, which is mouse. // Never remove pointerId == 1, which is mouse.
// Touch identifiers are 2 smaller than their pointerId, which is the // Touch identifiers are 2 smaller than their pointerId, which is the
// index in pointermap. // index in pointermap.
if (key != MouseSource.POINTER_ID && if (key != POINTER_ID &&
!this.findTouch_(touchList, key - 2)) { !this.findTouch_(touchList, key - 2)) {
d.push(value.out); d.push(value.out);
} }
@@ -444,7 +441,7 @@ TouchSource.prototype.dedupSynthMouse_ = function(inEvent) {
setTimeout(function() { setTimeout(function() {
// remove touch after timeout // remove touch after timeout
remove(lts, lt); remove(lts, lt);
}, TouchSource.DEDUP_TIMEOUT); }, this.dedupTimeout_);
} }
}; };
export default TouchSource; export default TouchSource;

View File

@@ -32,7 +32,11 @@ describe('ol.pointer.MouseSource', function() {
this.registerSource('mouse', mouseSource); this.registerSource('mouse', mouseSource);
if (TOUCH) { if (TOUCH) {
this.registerSource('touch', new TouchSource(this, mouseSource)); const touchSource = new TouchSource(this, mouseSource);
// set the timeout to a lower value, to speed up the tests
touchSource.dedupTimeout_ = 100;
this.registerSource('touch', touchSource);
} }
} }
@@ -74,9 +78,6 @@ describe('ol.pointer.MouseSource', function() {
}); });
it('dispatches real mouse events after timeout', function() { it('dispatches real mouse events after timeout', function() {
// set the timeout to a lower value, to speed up the tests
TouchSource.DEDUP_TIMEOUT = 100;
listen(handler, 'pointerdown', eventSpy); listen(handler, 'pointerdown', eventSpy);
// first simulate a touch event, then a mouse event // first simulate a touch event, then a mouse event