Use pepjs instead of our own pointerevent polyfill

src/ol/MapBrowserEventHandler.js

@@ -1,13 +1,14 @@
 /**
  * @module ol/MapBrowserEventHandler
  */
+
+import 'pepjs';
 import {DEVICE_PIXEL_RATIO} from './has.js';
 import MapBrowserEventType from './MapBrowserEventType.js';
 import MapBrowserPointerEvent from './MapBrowserPointerEvent.js';
 import {listen, unlistenByKey} from './events.js';
 import EventTarget from './events/Target.js';
 import PointerEventType from './pointer/EventType.js';
-import PointerEventHandler from './pointer/PointerEventHandler.js';
 
 class MapBrowserEventHandler extends EventTarget {
 
@@ -54,12 +55,13 @@ class MapBrowserEventHandler extends EventTarget {
     /**
      * The most recent "down" type event (or null if none have occurred).
      * Set on pointerdown.
-     * @type {import("./pointer/PointerEvent.js").default}
+     * @type {PointerEvent}
      * @private
      */
     this.down_ = null;
 
     const element = this.map_.getViewport();
+    element.setAttribute('touch-action', 'none');
 
     /**
      * @type {number}
@@ -73,29 +75,13 @@ class MapBrowserEventHandler extends EventTarget {
      */
     this.trackedTouches_ = {};
 
-    /**
-     * Event handler which generates pointer events for
-     * the viewport element.
-     *
-     * @type {PointerEventHandler}
-     * @private
-     */
-    this.pointerEventHandler_ = new PointerEventHandler(element);
-
-    /**
-     * Event handler which generates pointer events for
-     * the document (used when dragging).
-     *
-     * @type {PointerEventHandler}
-     * @private
-     */
-    this.documentPointerEventHandler_ = null;
+    this.element_ = element;
 
     /**
      * @type {?import("./events.js").EventsKey}
      * @private
      */
-    this.pointerdownListenerKey_ = listen(this.pointerEventHandler_,
+    this.pointerdownListenerKey_ = listen(element,
       PointerEventType.POINTERDOWN,
       this.handlePointerDown_, this);
 
@@ -103,14 +89,14 @@ class MapBrowserEventHandler extends EventTarget {
      * @type {?import("./events.js").EventsKey}
      * @private
      */
-    this.relayedListenerKey_ = listen(this.pointerEventHandler_,
+    this.relayedListenerKey_ = listen(element,
       PointerEventType.POINTERMOVE,
       this.relayEvent_, this);
 
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -139,7 +125,7 @@ class MapBrowserEventHandler extends EventTarget {
   /**
    * Keeps track on how many pointers are currently active.
    *
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -156,7 +142,7 @@ class MapBrowserEventHandler extends EventTarget {
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -181,13 +167,11 @@ class MapBrowserEventHandler extends EventTarget {
       this.dragListenerKeys_.length = 0;
       this.dragging_ = false;
       this.down_ = null;
-      this.documentPointerEventHandler_.dispose();
-      this.documentPointerEventHandler_ = null;
     }
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @return {boolean} If the left mouse button was pressed.
    * @private
@@ -197,7 +181,7 @@ class MapBrowserEventHandler extends EventTarget {
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -210,18 +194,11 @@ class MapBrowserEventHandler extends EventTarget {
     this.down_ = pointerEvent;
 
     if (this.dragListenerKeys_.length === 0) {
-      /* Set up a pointer event handler on the `document`,
-       * which is required when the pointer is moved outside
-       * the viewport when dragging.
-       */
-      this.documentPointerEventHandler_ =
-          new PointerEventHandler(document);
-
       this.dragListenerKeys_.push(
-        listen(this.documentPointerEventHandler_,
+        listen(document,
           MapBrowserEventType.POINTERMOVE,
           this.handlePointerMove_, this),
-        listen(this.documentPointerEventHandler_,
+        listen(document,
           MapBrowserEventType.POINTERUP,
           this.handlePointerUp_, this),
         /* Note that the listener for `pointercancel is set up on
@@ -237,7 +214,7 @@ class MapBrowserEventHandler extends EventTarget {
          * only receive a `touchcancel` from `pointerEventHandler_`, because it is
          * only registered there.
          */
-        listen(this.pointerEventHandler_,
+        listen(this.element_,
           MapBrowserEventType.POINTERCANCEL,
           this.handlePointerUp_, this)
       );
@@ -245,7 +222,7 @@ class MapBrowserEventHandler extends EventTarget {
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -265,7 +242,7 @@ class MapBrowserEventHandler extends EventTarget {
   /**
    * Wrap and relay a pointer event.  Note that this requires that the type
    * string for the MapBrowserPointerEvent matches the PointerEvent type.
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -276,7 +253,7 @@ class MapBrowserEventHandler extends EventTarget {
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @return {boolean} Is moving.
    * @private
@@ -303,14 +280,7 @@ class MapBrowserEventHandler extends EventTarget {
     this.dragListenerKeys_.forEach(unlistenByKey);
     this.dragListenerKeys_.length = 0;
 
-    if (this.documentPointerEventHandler_) {
-      this.documentPointerEventHandler_.dispose();
-      this.documentPointerEventHandler_ = null;
-    }
-    if (this.pointerEventHandler_) {
-      this.pointerEventHandler_.dispose();
-      this.pointerEventHandler_ = null;
-    }
+    this.element_ = null;
     super.disposeInternal();
   }
 }