From 134ec9c8d0f6d620540ec14247adf10434b04604 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Thu, 16 Jun 2022 11:26:28 +0200 Subject: [PATCH] Remove duplicated logic from PointerInteraction --- src/ol/MapBrowserEvent.js | 17 +++++++++-- src/ol/MapBrowserEventHandler.js | 48 +++++++++++++++++++++----------- src/ol/interaction/Pointer.js | 36 ++---------------------- 3 files changed, 49 insertions(+), 52 deletions(-) diff --git a/src/ol/MapBrowserEvent.js b/src/ol/MapBrowserEvent.js index 95d2063b3c..dab8ab991d 100644 --- a/src/ol/MapBrowserEvent.js +++ b/src/ol/MapBrowserEvent.js @@ -15,9 +15,17 @@ class MapBrowserEvent extends MapEvent { * @param {import("./PluggableMap.js").default} map Map. * @param {EVENT} originalEvent Original event. * @param {boolean} [opt_dragging] Is the map currently being dragged? - * @param {?import("./PluggableMap.js").FrameState} [opt_frameState] Frame state. + * @param {import("./PluggableMap.js").FrameState} [opt_frameState] Frame state. + * @param {Array} [opt_activePointers] Active pointers. */ - constructor(type, map, originalEvent, opt_dragging, opt_frameState) { + constructor( + type, + map, + originalEvent, + opt_dragging, + opt_frameState, + opt_activePointers + ) { super(type, map, opt_frameState); /** @@ -48,6 +56,11 @@ class MapBrowserEvent extends MapEvent { * @api */ this.dragging = opt_dragging !== undefined ? opt_dragging : false; + + /** + * @type {Array|undefined} + */ + this.activePointers = opt_activePointers; } /** diff --git a/src/ol/MapBrowserEventHandler.js b/src/ol/MapBrowserEventHandler.js index e34350897f..aa52b2f2cf 100644 --- a/src/ol/MapBrowserEventHandler.js +++ b/src/ol/MapBrowserEventHandler.js @@ -9,6 +9,7 @@ import PointerEventType from './pointer/EventType.js'; import Target from './events/Target.js'; import {PASSIVE_EVENT_LISTENERS} from './has.js'; import {VOID} from './functions.js'; +import {getValues} from './obj.js'; import {listen, unlistenByKey} from './events.js'; class MapBrowserEventHandler extends Target { @@ -67,10 +68,10 @@ class MapBrowserEventHandler extends Target { const element = this.map_.getViewport(); /** - * @type {number} + * @type {Array} * @private */ - this.activePointers_ = 0; + this.activePointers_ = []; /** * @type {!Object} @@ -104,7 +105,7 @@ class MapBrowserEventHandler extends Target { this.relayedListenerKey_ = listen( element, PointerEventType.POINTERMOVE, - this.relayEvent_, + this.relayMoveEvent_, this ); @@ -176,9 +177,6 @@ class MapBrowserEventHandler extends Target { event.type == MapBrowserEventType.POINTERCANCEL ) { delete this.trackedTouches_[id]; - } else if (event.type == MapBrowserEventType.POINTERDOWN) { - this.trackedTouches_[id] = event; - } else if (event.type == MapBrowserEventType.POINTERMOVE) { for (const pointerId in this.trackedTouches_) { if (this.trackedTouches_[pointerId].target !== event.target) { // Some platforms assign a new pointerId when the target changes. @@ -189,8 +187,13 @@ class MapBrowserEventHandler extends Target { break; } } + } else if ( + event.type == MapBrowserEventType.POINTERDOWN || + event.type == MapBrowserEventType.POINTERMOVE + ) { + this.trackedTouches_[id] = event; } - this.activePointers_ = Object.keys(this.trackedTouches_).length; + this.activePointers_ = getValues(this.trackedTouches_); } /** @@ -203,7 +206,10 @@ class MapBrowserEventHandler extends Target { const newEvent = new MapBrowserEvent( MapBrowserEventType.POINTERUP, this.map_, - pointerEvent + pointerEvent, + undefined, + undefined, + this.activePointers_ ); this.dispatchEvent(newEvent); @@ -222,7 +228,7 @@ class MapBrowserEventHandler extends Target { this.emulateClick_(this.down_); } - if (this.activePointers_ === 0) { + if (this.activePointers_.length === 0) { this.dragListenerKeys_.forEach(unlistenByKey); this.dragListenerKeys_.length = 0; this.dragging_ = false; @@ -246,12 +252,15 @@ class MapBrowserEventHandler extends Target { * @private */ handlePointerDown_(pointerEvent) { - this.emulateClicks_ = this.activePointers_ === 0; + this.emulateClicks_ = this.activePointers_.length === 0; this.updateActivePointers_(pointerEvent); const newEvent = new MapBrowserEvent( MapBrowserEventType.POINTERDOWN, this.map_, - pointerEvent + pointerEvent, + undefined, + undefined, + this.activePointers_ ); this.dispatchEvent(newEvent); @@ -315,29 +324,36 @@ class MapBrowserEventHandler extends Target { // To avoid a 'false' touchmove event to be dispatched, we test if the pointer // moved a significant distance. if (this.isMoving_(pointerEvent)) { + this.updateActivePointers_(pointerEvent); this.dragging_ = true; const newEvent = new MapBrowserEvent( MapBrowserEventType.POINTERDRAG, this.map_, pointerEvent, - this.dragging_ + this.dragging_, + undefined, + this.activePointers_ ); this.dispatchEvent(newEvent); } } /** - * Wrap and relay a pointer event. Note that this requires that the type - * string for the MapBrowserEvent matches the PointerEvent type. + * Wrap and relay a pointermove event. * @param {PointerEvent} pointerEvent Pointer * event. * @private */ - relayEvent_(pointerEvent) { + relayMoveEvent_(pointerEvent) { this.originalPointerMoveEvent_ = pointerEvent; const dragging = !!(this.down_ && this.isMoving_(pointerEvent)); this.dispatchEvent( - new MapBrowserEvent(pointerEvent.type, this.map_, pointerEvent, dragging) + new MapBrowserEvent( + MapBrowserEventType.POINTERMOVE, + this.map_, + pointerEvent, + dragging + ) ); } diff --git a/src/ol/interaction/Pointer.js b/src/ol/interaction/Pointer.js index 51d268e144..493d1b31b0 100644 --- a/src/ol/interaction/Pointer.js +++ b/src/ol/interaction/Pointer.js @@ -3,7 +3,6 @@ */ import Interaction from './Interaction.js'; import MapBrowserEventType from '../MapBrowserEventType.js'; -import {getValues} from '../obj.js'; /** * @typedef {Object} Options @@ -80,12 +79,6 @@ class PointerInteraction extends Interaction { */ this.handlingDownUpSequence = false; - /** - * @type {!Object} - * @private - */ - this.trackedPointers_ = {}; - /** * @type {Array} * @protected @@ -189,19 +182,8 @@ class PointerInteraction extends Interaction { * @private */ updateTrackedPointers_(mapBrowserEvent) { - if (isPointerDraggingEvent(mapBrowserEvent)) { - const event = mapBrowserEvent.originalEvent; - - const id = event.pointerId.toString(); - if (mapBrowserEvent.type == MapBrowserEventType.POINTERUP) { - delete this.trackedPointers_[id]; - } else if (mapBrowserEvent.type == MapBrowserEventType.POINTERDOWN) { - this.trackedPointers_[id] = event; - } else if (id in this.trackedPointers_) { - // update only when there was a pointerdown event for this pointer - this.trackedPointers_[id] = event; - } - this.targetPointers = getValues(this.trackedPointers_); + if (mapBrowserEvent.activePointers) { + this.targetPointers = mapBrowserEvent.activePointers; } } } @@ -221,18 +203,4 @@ export function centroid(pointerEvents) { return [clientX / length, clientY / length]; } -/** - * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Event. - * @return {boolean} Whether the event is a pointerdown, pointerdrag - * or pointerup event. - */ -function isPointerDraggingEvent(mapBrowserEvent) { - const type = mapBrowserEvent.type; - return ( - type === MapBrowserEventType.POINTERDOWN || - type === MapBrowserEventType.POINTERDRAG || - type === MapBrowserEventType.POINTERUP - ); -} - export default PointerInteraction;