Move interaction event handlers to class methods

src/ol/interaction/DragBox.js

@@ -115,11 +115,7 @@ class DragBox extends PointerInteraction {
    */
   constructor(opt_options) {
 
-    super({
+    super();
-      handleDownEvent: handleDownEvent,
-      handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent
-    });
 
     const options = opt_options ? opt_options : {};
 
@@ -159,7 +155,22 @@ class DragBox extends PointerInteraction {
     * @type {EndCondition}
     */
     this.boxEndCondition_ = options.boxEndCondition ?
-      options.boxEndCondition : defaultBoxEndCondition;
+      options.boxEndCondition : this.defaultBoxEndCondition;
+  }
+
+  /**
+   * The default condition for determining whether the boxend event
+   * should fire.
+   * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent The originating MapBrowserEvent
+   *     leading to the box end.
+   * @param {import("../pixel.js").Pixel} startPixel The starting pixel of the box.
+   * @param {import("../pixel.js").Pixel} endPixel The end pixel of the box.
+   * @return {boolean} Whether or not the boxend condition should be fired.
+   */
+  defaultBoxEndCondition(mapBrowserEvent, startPixel, endPixel) {
+    const width = endPixel[0] - startPixel[0];
+    const height = endPixel[1] - startPixel[1];
+    return width * width + height * height >= this.minArea_;
   }
 
   /**
@@ -170,31 +181,11 @@ class DragBox extends PointerInteraction {
   getGeometry() {
     return this.box_.getGeometry();
   }
-}
-
 
   /**
- * The default condition for determining whether the boxend event
+   * @inheritDoc
- * should fire.
- * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent The originating MapBrowserEvent
- *     leading to the box end.
- * @param {import("../pixel.js").Pixel} startPixel The starting pixel of the box.
- * @param {import("../pixel.js").Pixel} endPixel The end pixel of the box.
- * @return {boolean} Whether or not the boxend condition should be fired.
- * @this {DragBox}
    */
-function defaultBoxEndCondition(mapBrowserEvent, startPixel, endPixel) {
+  handleDragEvent(mapBrowserEvent) {
-  const width = endPixel[0] - startPixel[0];
-  const height = endPixel[1] - startPixel[1];
-  return width * width + height * height >= this.minArea_;
-}
-
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @this {DragBox}
- */
-function handleDragEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return;
     }
@@ -205,13 +196,10 @@ function handleDragEvent(mapBrowserEvent) {
       mapBrowserEvent.coordinate, mapBrowserEvent));
   }
 
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @return {boolean} Stop drag sequence?
- * @this {DragBox}
    */
-function handleUpEvent(mapBrowserEvent) {
+  handleUpEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return true;
     }
@@ -226,13 +214,10 @@ function handleUpEvent(mapBrowserEvent) {
     return false;
   }
 
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @return {boolean} Start drag sequence?
- * @this {DragBox}
    */
-function handleDownEvent(mapBrowserEvent) {
+  handleDownEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return false;
     }
@@ -249,6 +234,7 @@ function handleDownEvent(mapBrowserEvent) {
       return false;
     }
   }
+}
 
 
 export default DragBox;

src/ol/interaction/DragPan.js

@@ -30,9 +30,6 @@ class DragPan extends PointerInteraction {
   constructor(opt_options) {
 
     super({
-      handleDownEvent: handleDownEvent,
-      handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent,
       stopDown: FALSE
     });
 
@@ -73,14 +70,10 @@ class DragPan extends PointerInteraction {
 
   }
 
-}
-
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @this {DragPan}
    */
-function handleDragEvent(mapBrowserEvent) {
+  handleDragEvent(mapBrowserEvent) {
     if (!this.panning_) {
       this.panning_ = true;
       this.getMap().getView().setHint(ViewHint.INTERACTING, 1);
@@ -112,13 +105,10 @@ function handleDragEvent(mapBrowserEvent) {
     this.lastPointersCount_ = targetPointers.length;
   }
 
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @return {boolean} Stop drag sequence?
- * @this {DragPan}
    */
-function handleUpEvent(mapBrowserEvent) {
+  handleUpEvent(mapBrowserEvent) {
     const map = mapBrowserEvent.map;
     const view = map.getView();
     if (this.targetPointers.length === 0) {
@@ -153,13 +143,10 @@ function handleUpEvent(mapBrowserEvent) {
     }
   }
 
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @return {boolean} Start drag sequence?
- * @this {DragPan}
    */
-function handleDownEvent(mapBrowserEvent) {
+  handleDownEvent(mapBrowserEvent) {
     if (this.targetPointers.length > 0 && this.condition_(mapBrowserEvent)) {
       const map = mapBrowserEvent.map;
       const view = map.getView();
@@ -179,6 +166,6 @@ function handleDownEvent(mapBrowserEvent) {
       return false;
     }
   }
-
+}
 
 export default DragPan;

src/ol/interaction/DragRotate.js

@@ -38,9 +38,6 @@ class DragRotate extends PointerInteraction {
     const options = opt_options ? opt_options : {};
 
     super({
-      handleDownEvent: handleDownEvent,
-      handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent,
       stopDown: FALSE
     });
 
@@ -64,14 +61,10 @@ class DragRotate extends PointerInteraction {
 
   }
 
-}
-
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @this {DragRotate}
    */
-function handleDragEvent(mapBrowserEvent) {
+  handleDragEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return;
     }
@@ -95,11 +88,9 @@ function handleDragEvent(mapBrowserEvent) {
 
 
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @return {boolean} Stop drag sequence?
- * @this {DragRotate}
    */
-function handleUpEvent(mapBrowserEvent) {
+  handleUpEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return true;
     }
@@ -114,11 +105,9 @@ function handleUpEvent(mapBrowserEvent) {
 
 
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @return {boolean} Start drag sequence?
- * @this {DragRotate}
    */
-function handleDownEvent(mapBrowserEvent) {
+  handleDownEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return false;
     }
@@ -132,5 +121,6 @@ function handleDownEvent(mapBrowserEvent) {
       return false;
     }
   }
+}
 
 export default DragRotate;

src/ol/interaction/DragRotateAndZoom.js

@@ -38,11 +38,7 @@ class DragRotateAndZoom extends PointerInteraction {
 
     const options = opt_options ? opt_options : {};
 
-    super({
+    super(options);
-      handleDownEvent: handleDownEvent,
-      handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent
-    });
 
     /**
      * @private
@@ -76,14 +72,10 @@ class DragRotateAndZoom extends PointerInteraction {
 
   }
 
-}
-
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @this {DragRotateAndZoom}
    */
-function handleDragEvent(mapBrowserEvent) {
+  handleDragEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return;
     }
@@ -111,13 +103,10 @@ function handleDragEvent(mapBrowserEvent) {
     this.lastMagnitude_ = magnitude;
   }
 
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @return {boolean} Stop drag sequence?
- * @this {DragRotateAndZoom}
    */
-function handleUpEvent(mapBrowserEvent) {
+  handleUpEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return true;
     }
@@ -132,13 +121,10 @@ function handleUpEvent(mapBrowserEvent) {
     return false;
   }
 
-
   /**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
+   * @inheritDoc
- * @return {boolean} Start drag sequence?
- * @this {DragRotateAndZoom}
    */
-function handleDownEvent(mapBrowserEvent) {
+  handleDownEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return false;
     }
@@ -152,5 +138,6 @@ function handleDownEvent(mapBrowserEvent) {
       return false;
     }
   }
+}
 
 export default DragRotateAndZoom;

src/ol/interaction/Pointer.js

@@ -1,43 +1,12 @@
 /**
  * @module ol/interaction/Pointer
  */
-import {FALSE, VOID} from '../functions.js';
 import MapBrowserEventType from '../MapBrowserEventType.js';
 import MapBrowserPointerEvent from '../MapBrowserPointerEvent.js';
 import Interaction from '../interaction/Interaction.js';
 import {getValues} from '../obj.js';
 
 
-/**
- * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
- * @this {PointerInteraction}
- */
-const handleDragEvent = VOID;
-
-
-/**
- * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
- * @return {boolean} Capture dragging.
- * @this {PointerInteraction}
- */
-const handleUpEvent = FALSE;
-
-
-/**
- * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
- * @return {boolean} Capture dragging.
- * @this {PointerInteraction}
- */
-const handleDownEvent = FALSE;
-
-
-/**
- * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
- * @this {PointerInteraction}
- */
-const handleMoveEvent = VOID;
-
-
 /**
  * @typedef {Object} Options
  * @property {function(MapBrowserPointerEvent):boolean} [handleDownEvent]
@@ -58,7 +27,7 @@ const handleMoveEvent = VOID;
  * @property {function(MapBrowserPointerEvent):boolean} [handleUpEvent]
  *  Function handling "up" events. If the function returns `false` then the
  * current drag sequence is stopped.
- * @property {function(boolean):boolean} stopDown
+ * @property {function(boolean):boolean} [stopDown]
  * Should the down event be propagated to other interactions, or should be
  * stopped?
  */
@@ -92,28 +61,28 @@ class PointerInteraction extends Interaction {
      * @private
      */
     this.handleDownEvent_ = options.handleDownEvent ?
-      options.handleDownEvent : handleDownEvent;
+      options.handleDownEvent : this.handleDownEvent;
 
     /**
      * @type {function(MapBrowserPointerEvent)}
      * @private
      */
     this.handleDragEvent_ = options.handleDragEvent ?
-      options.handleDragEvent : handleDragEvent;
+      options.handleDragEvent : this.handleDragEvent;
 
     /**
      * @type {function(MapBrowserPointerEvent)}
      * @private
      */
     this.handleMoveEvent_ = options.handleMoveEvent ?
-      options.handleMoveEvent : handleMoveEvent;
+      options.handleMoveEvent : this.handleMoveEvent;
 
     /**
      * @type {function(MapBrowserPointerEvent):boolean}
      * @private
      */
     this.handleUpEvent_ = options.handleUpEvent ?
-      options.handleUpEvent : handleUpEvent;
+      options.handleUpEvent : this.handleUpEvent;
 
     /**
      * @type {boolean}
@@ -143,6 +112,40 @@ class PointerInteraction extends Interaction {
 
   }
 
+  /**
+   * Handle pointer down events.
+   * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
+   * @return {boolean} If the event was consumed.
+   * @protected
+   */
+  handleDownEvent(mapBrowserEvent) {
+    return false;
+  }
+
+  /**
+   * Handle pointer drag events.
+   * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
+   * @protected
+   */
+  handleDragEvent(mapBrowserEvent) {}
+
+  /**
+   * Handle pointer move events.
+   * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
+   * @protected
+   */
+  handleMoveEvent(mapBrowserEvent) {}
+
+  /**
+   * Handle pointer up events.
+   * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
+   * @return {boolean} If the event was consumed.
+   * @protected
+   */
+  handleUpEvent(mapBrowserEvent) {
+    return false;
+  }
+
   /**
    * @param {MapBrowserPointerEvent} mapBrowserEvent Event.
    * @private