Move interaction event handlers to class methods

src/ol/interaction/DragBox.js

@@ -115,11 +115,7 @@ class DragBox extends PointerInteraction {
    */
   constructor(opt_options) {
 
-    super({
-      handleDownEvent: handleDownEvent,
-      handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent
-    });
+    super();
 
     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,83 +181,58 @@ class DragBox extends PointerInteraction {
   getGeometry() {
     return this.box_.getGeometry();
   }
-}
 
+  /**
+   * @inheritDoc
+   */
+  handleDragEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return;
+    }
 
-/**
- * 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) {
-  const width = endPixel[0] - startPixel[0];
-  const height = endPixel[1] - startPixel[1];
-  return width * width + height * height >= this.minArea_;
-}
+    this.box_.setPixels(this.startPixel_, mapBrowserEvent.pixel);
 
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @this {DragBox}
- */
-function handleDragEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
-    return;
-  }
-
-  this.box_.setPixels(this.startPixel_, mapBrowserEvent.pixel);
-
-  this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXDRAG,
-    mapBrowserEvent.coordinate, mapBrowserEvent));
-}
-
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Stop drag sequence?
- * @this {DragBox}
- */
-function handleUpEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
-    return true;
-  }
-
-  this.box_.setMap(null);
-
-  if (this.boxEndCondition_(mapBrowserEvent, this.startPixel_, mapBrowserEvent.pixel)) {
-    this.onBoxEnd_(mapBrowserEvent);
-    this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXEND,
+    this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXDRAG,
       mapBrowserEvent.coordinate, mapBrowserEvent));
   }
-  return false;
-}
 
+  /**
+   * @inheritDoc
+   */
+  handleUpEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return true;
+    }
 
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Start drag sequence?
- * @this {DragBox}
- */
-function handleDownEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
+    this.box_.setMap(null);
+
+    if (this.boxEndCondition_(mapBrowserEvent, this.startPixel_, mapBrowserEvent.pixel)) {
+      this.onBoxEnd_(mapBrowserEvent);
+      this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXEND,
+        mapBrowserEvent.coordinate, mapBrowserEvent));
+    }
     return false;
   }
 
-  if (mouseActionButton(mapBrowserEvent) &&
-      this.condition_(mapBrowserEvent)) {
-    this.startPixel_ = mapBrowserEvent.pixel;
-    this.box_.setMap(mapBrowserEvent.map);
-    this.box_.setPixels(this.startPixel_, this.startPixel_);
-    this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXSTART,
-      mapBrowserEvent.coordinate, mapBrowserEvent));
-    return true;
-  } else {
-    return false;
+  /**
+   * @inheritDoc
+   */
+  handleDownEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return false;
+    }
+
+    if (mouseActionButton(mapBrowserEvent) &&
+        this.condition_(mapBrowserEvent)) {
+      this.startPixel_ = mapBrowserEvent.pixel;
+      this.box_.setMap(mapBrowserEvent.map);
+      this.box_.setPixels(this.startPixel_, this.startPixel_);
+      this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXSTART,
+        mapBrowserEvent.coordinate, mapBrowserEvent));
+      return true;
+    } 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,112 +70,102 @@ class DragPan extends PointerInteraction {
 
   }
 
-}
-
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @this {DragPan}
- */
-function handleDragEvent(mapBrowserEvent) {
-  if (!this.panning_) {
-    this.panning_ = true;
-    this.getMap().getView().setHint(ViewHint.INTERACTING, 1);
-  }
-  const targetPointers = this.targetPointers;
-  const centroid = centroidFromPointers(targetPointers);
-  if (targetPointers.length == this.lastPointersCount_) {
-    if (this.kinetic_) {
-      this.kinetic_.update(centroid[0], centroid[1]);
+  /**
+   * @inheritDoc
+   */
+  handleDragEvent(mapBrowserEvent) {
+    if (!this.panning_) {
+      this.panning_ = true;
+      this.getMap().getView().setHint(ViewHint.INTERACTING, 1);
     }
-    if (this.lastCentroid) {
-      const deltaX = this.lastCentroid[0] - centroid[0];
-      const deltaY = centroid[1] - this.lastCentroid[1];
-      const map = mapBrowserEvent.map;
-      const view = map.getView();
-      let center = [deltaX, deltaY];
-      scaleCoordinate(center, view.getResolution());
-      rotateCoordinate(center, view.getRotation());
-      addCoordinate(center, view.getCenter());
-      center = view.constrainCenter(center);
-      view.setCenter(center);
-    }
-  } else if (this.kinetic_) {
-    // reset so we don't overestimate the kinetic energy after
-    // after one finger down, tiny drag, second finger down
-    this.kinetic_.begin();
-  }
-  this.lastCentroid = centroid;
-  this.lastPointersCount_ = targetPointers.length;
-}
-
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Stop drag sequence?
- * @this {DragPan}
- */
-function handleUpEvent(mapBrowserEvent) {
-  const map = mapBrowserEvent.map;
-  const view = map.getView();
-  if (this.targetPointers.length === 0) {
-    if (!this.noKinetic_ && this.kinetic_ && this.kinetic_.end()) {
-      const distance = this.kinetic_.getDistance();
-      const angle = this.kinetic_.getAngle();
-      const center = /** @type {!import("../coordinate.js").Coordinate} */ (view.getCenter());
-      const centerpx = map.getPixelFromCoordinate(center);
-      const dest = map.getCoordinateFromPixel([
-        centerpx[0] - distance * Math.cos(angle),
-        centerpx[1] - distance * Math.sin(angle)
-      ]);
-      view.animate({
-        center: view.constrainCenter(dest),
-        duration: 500,
-        easing: easeOut
-      });
-    }
-    if (this.panning_) {
-      this.panning_ = false;
-      view.setHint(ViewHint.INTERACTING, -1);
-    }
-    return false;
-  } else {
-    if (this.kinetic_) {
+    const targetPointers = this.targetPointers;
+    const centroid = centroidFromPointers(targetPointers);
+    if (targetPointers.length == this.lastPointersCount_) {
+      if (this.kinetic_) {
+        this.kinetic_.update(centroid[0], centroid[1]);
+      }
+      if (this.lastCentroid) {
+        const deltaX = this.lastCentroid[0] - centroid[0];
+        const deltaY = centroid[1] - this.lastCentroid[1];
+        const map = mapBrowserEvent.map;
+        const view = map.getView();
+        let center = [deltaX, deltaY];
+        scaleCoordinate(center, view.getResolution());
+        rotateCoordinate(center, view.getRotation());
+        addCoordinate(center, view.getCenter());
+        center = view.constrainCenter(center);
+        view.setCenter(center);
+      }
+    } else if (this.kinetic_) {
       // reset so we don't overestimate the kinetic energy after
-      // after one finger up, tiny drag, second finger up
+      // after one finger down, tiny drag, second finger down
       this.kinetic_.begin();
     }
-    this.lastCentroid = null;
-    return true;
+    this.lastCentroid = centroid;
+    this.lastPointersCount_ = targetPointers.length;
   }
-}
 
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Start drag sequence?
- * @this {DragPan}
- */
-function handleDownEvent(mapBrowserEvent) {
-  if (this.targetPointers.length > 0 && this.condition_(mapBrowserEvent)) {
+  /**
+   * @inheritDoc
+   */
+  handleUpEvent(mapBrowserEvent) {
     const map = mapBrowserEvent.map;
     const view = map.getView();
-    this.lastCentroid = null;
-    // stop any current animation
-    if (view.getAnimating()) {
-      view.setCenter(mapBrowserEvent.frameState.viewState.center);
+    if (this.targetPointers.length === 0) {
+      if (!this.noKinetic_ && this.kinetic_ && this.kinetic_.end()) {
+        const distance = this.kinetic_.getDistance();
+        const angle = this.kinetic_.getAngle();
+        const center = /** @type {!import("../coordinate.js").Coordinate} */ (view.getCenter());
+        const centerpx = map.getPixelFromCoordinate(center);
+        const dest = map.getCoordinateFromPixel([
+          centerpx[0] - distance * Math.cos(angle),
+          centerpx[1] - distance * Math.sin(angle)
+        ]);
+        view.animate({
+          center: view.constrainCenter(dest),
+          duration: 500,
+          easing: easeOut
+        });
+      }
+      if (this.panning_) {
+        this.panning_ = false;
+        view.setHint(ViewHint.INTERACTING, -1);
+      }
+      return false;
+    } else {
+      if (this.kinetic_) {
+        // reset so we don't overestimate the kinetic energy after
+        // after one finger up, tiny drag, second finger up
+        this.kinetic_.begin();
+      }
+      this.lastCentroid = null;
+      return true;
     }
-    if (this.kinetic_) {
-      this.kinetic_.begin();
+  }
+
+  /**
+   * @inheritDoc
+   */
+  handleDownEvent(mapBrowserEvent) {
+    if (this.targetPointers.length > 0 && this.condition_(mapBrowserEvent)) {
+      const map = mapBrowserEvent.map;
+      const view = map.getView();
+      this.lastCentroid = null;
+      // stop any current animation
+      if (view.getAnimating()) {
+        view.setCenter(mapBrowserEvent.frameState.viewState.center);
+      }
+      if (this.kinetic_) {
+        this.kinetic_.begin();
+      }
+      // No kinetic as soon as more than one pointer on the screen is
+      // detected. This is to prevent nasty pans after pinch.
+      this.noKinetic_ = this.targetPointers.length > 1;
+      return true;
+    } else {
+      return false;
     }
-    // No kinetic as soon as more than one pointer on the screen is
-    // detected. This is to prevent nasty pans after pinch.
-    this.noKinetic_ = this.targetPointers.length > 1;
-    return true;
-  } 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,73 +61,66 @@ class DragRotate extends PointerInteraction {
 
   }
 
-}
+  /**
+   * @inheritDoc
+   */
+  handleDragEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return;
+    }
 
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @this {DragRotate}
- */
-function handleDragEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
-    return;
-  }
-
-  const map = mapBrowserEvent.map;
-  const view = map.getView();
-  if (view.getConstraints().rotation === disable) {
-    return;
-  }
-  const size = map.getSize();
-  const offset = mapBrowserEvent.pixel;
-  const theta =
-      Math.atan2(size[1] / 2 - offset[1], offset[0] - size[0] / 2);
-  if (this.lastAngle_ !== undefined) {
-    const delta = theta - this.lastAngle_;
-    const rotation = view.getRotation();
-    rotateWithoutConstraints(view, rotation - delta);
-  }
-  this.lastAngle_ = theta;
-}
-
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Stop drag sequence?
- * @this {DragRotate}
- */
-function handleUpEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
-    return true;
-  }
-
-  const map = mapBrowserEvent.map;
-  const view = map.getView();
-  view.setHint(ViewHint.INTERACTING, -1);
-  const rotation = view.getRotation();
-  rotate(view, rotation, undefined, this.duration_);
-  return false;
-}
-
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Start drag sequence?
- * @this {DragRotate}
- */
-function handleDownEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
-    return false;
-  }
-
-  if (mouseActionButton(mapBrowserEvent) && this.condition_(mapBrowserEvent)) {
     const map = mapBrowserEvent.map;
-    map.getView().setHint(ViewHint.INTERACTING, 1);
-    this.lastAngle_ = undefined;
-    return true;
-  } else {
+    const view = map.getView();
+    if (view.getConstraints().rotation === disable) {
+      return;
+    }
+    const size = map.getSize();
+    const offset = mapBrowserEvent.pixel;
+    const theta =
+        Math.atan2(size[1] / 2 - offset[1], offset[0] - size[0] / 2);
+    if (this.lastAngle_ !== undefined) {
+      const delta = theta - this.lastAngle_;
+      const rotation = view.getRotation();
+      rotateWithoutConstraints(view, rotation - delta);
+    }
+    this.lastAngle_ = theta;
+  }
+
+
+  /**
+   * @inheritDoc
+   */
+  handleUpEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return true;
+    }
+
+    const map = mapBrowserEvent.map;
+    const view = map.getView();
+    view.setHint(ViewHint.INTERACTING, -1);
+    const rotation = view.getRotation();
+    rotate(view, rotation, undefined, this.duration_);
     return false;
   }
+
+
+  /**
+   * @inheritDoc
+   */
+  handleDownEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return false;
+    }
+
+    if (mouseActionButton(mapBrowserEvent) && this.condition_(mapBrowserEvent)) {
+      const map = mapBrowserEvent.map;
+      map.getView().setHint(ViewHint.INTERACTING, 1);
+      this.lastAngle_ = undefined;
+      return true;
+    } 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({
-      handleDownEvent: handleDownEvent,
-      handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent
-    });
+    super(options);
 
     /**
      * @private
@@ -76,80 +72,71 @@ class DragRotateAndZoom extends PointerInteraction {
 
   }
 
-}
+  /**
+   * @inheritDoc
+   */
+  handleDragEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return;
+    }
 
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @this {DragRotateAndZoom}
- */
-function handleDragEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
-    return;
+    const map = mapBrowserEvent.map;
+    const size = map.getSize();
+    const offset = mapBrowserEvent.pixel;
+    const deltaX = offset[0] - size[0] / 2;
+    const deltaY = size[1] / 2 - offset[1];
+    const theta = Math.atan2(deltaY, deltaX);
+    const magnitude = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    const view = map.getView();
+    if (view.getConstraints().rotation !== disable && this.lastAngle_ !== undefined) {
+      const angleDelta = theta - this.lastAngle_;
+      rotateWithoutConstraints(view, view.getRotation() - angleDelta);
+    }
+    this.lastAngle_ = theta;
+    if (this.lastMagnitude_ !== undefined) {
+      const resolution = this.lastMagnitude_ * (view.getResolution() / magnitude);
+      zoomWithoutConstraints(view, resolution);
+    }
+    if (this.lastMagnitude_ !== undefined) {
+      this.lastScaleDelta_ = this.lastMagnitude_ / magnitude;
+    }
+    this.lastMagnitude_ = magnitude;
   }
 
-  const map = mapBrowserEvent.map;
-  const size = map.getSize();
-  const offset = mapBrowserEvent.pixel;
-  const deltaX = offset[0] - size[0] / 2;
-  const deltaY = size[1] / 2 - offset[1];
-  const theta = Math.atan2(deltaY, deltaX);
-  const magnitude = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-  const view = map.getView();
-  if (view.getConstraints().rotation !== disable && this.lastAngle_ !== undefined) {
-    const angleDelta = theta - this.lastAngle_;
-    rotateWithoutConstraints(view, view.getRotation() - angleDelta);
-  }
-  this.lastAngle_ = theta;
-  if (this.lastMagnitude_ !== undefined) {
-    const resolution = this.lastMagnitude_ * (view.getResolution() / magnitude);
-    zoomWithoutConstraints(view, resolution);
-  }
-  if (this.lastMagnitude_ !== undefined) {
-    this.lastScaleDelta_ = this.lastMagnitude_ / magnitude;
-  }
-  this.lastMagnitude_ = magnitude;
-}
+  /**
+   * @inheritDoc
+   */
+  handleUpEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return true;
+    }
 
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Stop drag sequence?
- * @this {DragRotateAndZoom}
- */
-function handleUpEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
-    return true;
-  }
-
-  const map = mapBrowserEvent.map;
-  const view = map.getView();
-  view.setHint(ViewHint.INTERACTING, -1);
-  const direction = this.lastScaleDelta_ - 1;
-  rotate(view, view.getRotation());
-  zoom(view, view.getResolution(), undefined, this.duration_, direction);
-  this.lastScaleDelta_ = 0;
-  return false;
-}
-
-
-/**
- * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.
- * @return {boolean} Start drag sequence?
- * @this {DragRotateAndZoom}
- */
-function handleDownEvent(mapBrowserEvent) {
-  if (!mouseOnly(mapBrowserEvent)) {
+    const map = mapBrowserEvent.map;
+    const view = map.getView();
+    view.setHint(ViewHint.INTERACTING, -1);
+    const direction = this.lastScaleDelta_ - 1;
+    rotate(view, view.getRotation());
+    zoom(view, view.getResolution(), undefined, this.duration_, direction);
+    this.lastScaleDelta_ = 0;
     return false;
   }
 
-  if (this.condition_(mapBrowserEvent)) {
-    mapBrowserEvent.map.getView().setHint(ViewHint.INTERACTING, 1);
-    this.lastAngle_ = undefined;
-    this.lastMagnitude_ = undefined;
-    return true;
-  } else {
-    return false;
+  /**
+   * @inheritDoc
+   */
+  handleDownEvent(mapBrowserEvent) {
+    if (!mouseOnly(mapBrowserEvent)) {
+      return false;
+    }
+
+    if (this.condition_(mapBrowserEvent)) {
+      mapBrowserEvent.map.getView().setHint(ViewHint.INTERACTING, 1);
+      this.lastAngle_ = undefined;
+      this.lastMagnitude_ = undefined;
+      return true;
+    } else {
+      return false;
+    }
   }
 }
 

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