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();
   }
-}
 
-
+  /**
-/**
+   * @inheritDoc
- * 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.
- * @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;
     }
@@ -203,15 +194,12 @@ function handleDragEvent(mapBrowserEvent) {
 
     this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXDRAG,
       mapBrowserEvent.coordinate, mapBrowserEvent));
-}
+  }
 
-
+  /**
-/**
+   * @inheritDoc
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Stop drag sequence?
- * @this {DragBox}
    */
-function handleUpEvent(mapBrowserEvent) {
+  handleUpEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return true;
     }
@@ -224,15 +212,12 @@ function handleUpEvent(mapBrowserEvent) {
         mapBrowserEvent.coordinate, mapBrowserEvent));
     }
     return false;
-}
+  }
 
-
+  /**
-/**
+   * @inheritDoc
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Start drag sequence?
- * @this {DragBox}
    */
-function handleDownEvent(mapBrowserEvent) {
+  handleDownEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return false;
     }
@@ -248,6 +233,7 @@ function handleDownEvent(mapBrowserEvent) {
     } else {
       return false;
     }
+  }
 }
 
 

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 {
 
   }
 
-}
+  /**
-
+   * @inheritDoc
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @this {DragPan}
    */
-function handleDragEvent(mapBrowserEvent) {
+  handleDragEvent(mapBrowserEvent) {
     if (!this.panning_) {
       this.panning_ = true;
       this.getMap().getView().setHint(ViewHint.INTERACTING, 1);
@@ -110,15 +103,12 @@ function handleDragEvent(mapBrowserEvent) {
     }
     this.lastCentroid = centroid;
     this.lastPointersCount_ = targetPointers.length;
-}
+  }
 
-
+  /**
-/**
+   * @inheritDoc
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @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) {
@@ -151,15 +141,12 @@ function handleUpEvent(mapBrowserEvent) {
       this.lastCentroid = null;
       return true;
     }
-}
+  }
 
-
+  /**
-/**
+   * @inheritDoc
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @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();
@@ -178,7 +165,7 @@ function handleDownEvent(mapBrowserEvent) {
     } else {
       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 {
 
   }
 
-}
+  /**
-
+   * @inheritDoc
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @this {DragRotate}
    */
-function handleDragEvent(mapBrowserEvent) {
+  handleDragEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return;
     }
@@ -91,15 +84,13 @@ function handleDragEvent(mapBrowserEvent) {
       rotateWithoutConstraints(view, rotation - delta);
     }
     this.lastAngle_ = theta;
-}
+  }
 
 
-/**
+  /**
- * @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;
     }
@@ -110,15 +101,13 @@ function handleUpEvent(mapBrowserEvent) {
     const rotation = view.getRotation();
     rotate(view, rotation, undefined, this.duration_);
     return false;
-}
+  }
 
 
-/**
+  /**
- * @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;
     }
@@ -131,6 +120,7 @@ function handleDownEvent(mapBrowserEvent) {
     } else {
       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 {
 
   }
 
-}
+  /**
-
+   * @inheritDoc
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @this {DragRotateAndZoom}
    */
-function handleDragEvent(mapBrowserEvent) {
+  handleDragEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return;
     }
@@ -109,15 +101,12 @@ function handleDragEvent(mapBrowserEvent) {
       this.lastScaleDelta_ = this.lastMagnitude_ / magnitude;
     }
     this.lastMagnitude_ = magnitude;
-}
+  }
 
-
+  /**
-/**
+   * @inheritDoc
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Stop drag sequence?
- * @this {DragRotateAndZoom}
    */
-function handleUpEvent(mapBrowserEvent) {
+  handleUpEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return true;
     }
@@ -130,15 +119,12 @@ function handleUpEvent(mapBrowserEvent) {
     zoom(view, view.getResolution(), undefined, this.duration_, direction);
     this.lastScaleDelta_ = 0;
     return false;
-}
+  }
 
-
+  /**
-/**
+   * @inheritDoc
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Start drag sequence?
- * @this {DragRotateAndZoom}
    */
-function handleDownEvent(mapBrowserEvent) {
+  handleDownEvent(mapBrowserEvent) {
     if (!mouseOnly(mapBrowserEvent)) {
       return false;
     }
@@ -151,6 +137,7 @@ function handleDownEvent(mapBrowserEvent) {
     } else {
       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