Remove duplicated logic from PointerInteraction

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<PointerEvent>} [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<PointerEvent>|undefined}
+     */
+    this.activePointers = opt_activePointers;
   }
 
   /**

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<PointerEvent>}
      * @private
      */
-    this.activePointers_ = 0;
+    this.activePointers_ = [];
 
     /**
      * @type {!Object<number, Event>}
@@ -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
+   * Wrap and relay a pointermove event.
-   * string for the MapBrowserEvent matches the PointerEvent type.
    * @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
+      )
     );
   }
 

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<string, PointerEvent>}
-     * @private
-     */
-    this.trackedPointers_ = {};
-
     /**
      * @type {Array<PointerEvent>}
      * @protected
@@ -189,19 +182,8 @@ class PointerInteraction extends Interaction {
    * @private
    */
   updateTrackedPointers_(mapBrowserEvent) {
-    if (isPointerDraggingEvent(mapBrowserEvent)) {
+    if (mapBrowserEvent.activePointers) {
-      const event = mapBrowserEvent.originalEvent;
+      this.targetPointers = mapBrowserEvent.activePointers;
-
-      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_);
     }
   }
 }
@@ -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;