Fix private scope issues in ol/interaction/*

src/ol/interaction/DoubleClickZoom.js

@@ -20,9 +20,7 @@ class DoubleClickZoom extends Interaction {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    super({
+    super();
-      handleEvent: handleEvent,
-    });
 
     const options = opt_options ? opt_options : {};
 
@@ -38,16 +36,14 @@ class DoubleClickZoom extends Interaction {
      */
     this.duration_ = options.duration !== undefined ? options.duration : 250;
   }
-}
 
-/**
+  /**
    * Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a
    * doubleclick) and eventually zooms the map.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
    * @return {boolean} `false` to stop event propagation.
- * @this {DoubleClickZoom}
    */
-function handleEvent(mapBrowserEvent) {
+  handleEvent(mapBrowserEvent) {
     let stopEvent = false;
     if (mapBrowserEvent.type == MapBrowserEventType.DBLCLICK) {
       const browserEvent = /** @type {MouseEvent} */ (mapBrowserEvent.originalEvent);
@@ -60,6 +56,7 @@ function handleEvent(mapBrowserEvent) {
       stopEvent = true;
     }
     return !stopEvent;
+  }
 }
 
 export default DoubleClickZoom;

src/ol/interaction/DragAndDrop.js

@@ -172,10 +172,10 @@ class DragAndDrop extends Interaction {
     if (map) {
       const dropArea = this.target ? this.target : map.getViewport();
       this.dropListenKeys_ = [
-        listen(dropArea, EventType.DROP, handleDrop, this),
+        listen(dropArea, EventType.DROP, this.handleDrop, this),
-        listen(dropArea, EventType.DRAGENTER, handleStop, this),
+        listen(dropArea, EventType.DRAGENTER, this.handleStop, this),
-        listen(dropArea, EventType.DRAGOVER, handleStop, this),
+        listen(dropArea, EventType.DRAGOVER, this.handleStop, this),
-        listen(dropArea, EventType.DROP, handleStop, this),
+        listen(dropArea, EventType.DROP, this.handleStop, this),
       ];
     }
   }
@@ -234,13 +234,11 @@ class DragAndDrop extends Interaction {
       this.dropListenKeys_ = null;
     }
   }
-}
 
-/**
+  /**
    * @param {DragEvent} event Event.
- * @this {DragAndDrop}
    */
-function handleDrop(event) {
+  handleDrop(event) {
     const files = event.dataTransfer.files;
     for (let i = 0, ii = files.length; i < ii; ++i) {
       const file = files.item(i);
@@ -251,15 +249,16 @@ function handleDrop(event) {
       );
       reader.readAsText(file);
     }
-}
+  }
 
-/**
+  /**
    * @param {DragEvent} event Event.
    */
-function handleStop(event) {
+  handleStop(event) {
     event.stopPropagation();
     event.preventDefault();
     event.dataTransfer.dropEffect = 'copy';
+  }
 }
 
 export default DragAndDrop;

src/ol/interaction/DragBox.js

@@ -5,7 +5,6 @@
 import Event from '../events/Event.js';
 import PointerInteraction from './Pointer.js';
 import RenderBox from '../render/Box.js';
-import {VOID} from '../functions.js';
 import {mouseActionButton} from '../events/condition.js';
 
 /**
@@ -120,12 +119,9 @@ class DragBox extends PointerInteraction {
      */
     this.minArea_ = options.minArea !== undefined ? options.minArea : 64;
 
-    /**
+    if (options.onBoxEnd) {
-     * Function to execute just before `onboxend` is fired
+      this.onBoxEnd = options.onBoxEnd;
-     * @type {function(this:DragBox, import("../MapBrowserEvent.js").default): void}
+    }
-     * @private
-     */
-    this.onBoxEnd_ = options.onBoxEnd ? options.onBoxEnd : VOID;
 
     /**
      * @type {import("../pixel.js").Pixel}
@@ -203,7 +199,7 @@ class DragBox extends PointerInteraction {
         mapBrowserEvent.pixel
       )
     ) {
-      this.onBoxEnd_(mapBrowserEvent);
+      this.onBoxEnd(mapBrowserEvent);
       this.dispatchEvent(
         new DragBoxEvent(
           DragBoxEventType.BOXEND,
@@ -237,6 +233,12 @@ class DragBox extends PointerInteraction {
       return false;
     }
   }
+
+  /**
+   * Function to execute just before `onboxend` is fired
+   * @param {import("../MapBrowserEvent.js").default} event Event.
+   */
+  onBoxEnd(event) {}
 }
 
 export default DragBox;

src/ol/interaction/DragZoom.js

@@ -49,7 +49,6 @@ class DragZoom extends DragBox {
       condition: condition,
       className: options.className || 'ol-dragzoom',
       minArea: options.minArea,
-      onBoxEnd: onBoxEnd,
     });
 
     /**
@@ -64,12 +63,12 @@ class DragZoom extends DragBox {
      */
     this.out_ = options.out !== undefined ? options.out : false;
   }
-}
 
-/**
+  /**
- * @this {DragZoom}
+   * Function to execute just before `onboxend` is fired
+   * @param {import("../MapBrowserEvent.js").default} event Event.
    */
-function onBoxEnd() {
+  onBoxEnd(event) {
     const map = this.getMap();
     const view = /** @type {!import("../View.js").default} */ (map.getView());
     const size = /** @type {!import("../size.js").Size} */ (map.getSize());
@@ -98,6 +97,7 @@ function onBoxEnd() {
       duration: this.duration_,
       easing: easeOut,
     });
+  }
 }
 
 export default DragZoom;

src/ol/interaction/Interaction.js

@@ -31,13 +31,13 @@ import {easeOut, linear} from '../easing.js';
  */
 class Interaction extends BaseObject {
   /**
-   * @param {InteractionOptions} options Options.
+   * @param {InteractionOptions=} opt_options Options.
    */
-  constructor(options) {
+  constructor(opt_options) {
     super();
 
-    if (options.handleEvent) {
+    if (opt_options && opt_options.handleEvent) {
-      this.handleEvent = options.handleEvent;
+      this.handleEvent = opt_options.handleEvent;
     }
 
     /**

src/ol/interaction/KeyboardPan.js

@@ -37,9 +37,7 @@ class KeyboardPan extends Interaction {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    super({
+    super();
-      handleEvent: handleEvent,
-    });
 
     const options = opt_options || {};
 
@@ -76,9 +74,8 @@ class KeyboardPan extends Interaction {
     this.pixelDelta_ =
       options.pixelDelta !== undefined ? options.pixelDelta : 128;
   }
-}
 
-/**
+  /**
    * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a
    * `KeyEvent`, and decides the direction to pan to (if an arrow key was
    * pressed).
@@ -86,7 +83,7 @@ class KeyboardPan extends Interaction {
    * @return {boolean} `false` to stop event propagation.
    * @this {KeyboardPan}
    */
-function handleEvent(mapBrowserEvent) {
+  handleEvent(mapBrowserEvent) {
     let stopEvent = false;
     if (mapBrowserEvent.type == EventType.KEYDOWN) {
       const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent);
@@ -120,6 +117,7 @@ function handleEvent(mapBrowserEvent) {
       }
     }
     return !stopEvent;
+  }
 }
 
 export default KeyboardPan;

src/ol/interaction/KeyboardZoom.js

@@ -33,9 +33,7 @@ class KeyboardZoom extends Interaction {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    super({
+    super();
-      handleEvent: handleEvent,
-    });
 
     const options = opt_options ? opt_options : {};
 
@@ -57,9 +55,8 @@ class KeyboardZoom extends Interaction {
      */
     this.duration_ = options.duration !== undefined ? options.duration : 100;
   }
-}
 
-/**
+  /**
    * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a
    * `KeyEvent`, and decides whether to zoom in or out (depending on whether the
    * key pressed was '+' or '-').
@@ -67,7 +64,7 @@ class KeyboardZoom extends Interaction {
    * @return {boolean} `false` to stop event propagation.
    * @this {KeyboardZoom}
    */
-function handleEvent(mapBrowserEvent) {
+  handleEvent(mapBrowserEvent) {
     let stopEvent = false;
     if (
       mapBrowserEvent.type == EventType.KEYDOWN ||
@@ -80,7 +77,8 @@ function handleEvent(mapBrowserEvent) {
         (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0))
       ) {
         const map = mapBrowserEvent.map;
-      const delta = charCode == '+'.charCodeAt(0) ? this.delta_ : -this.delta_;
+        const delta =
+          charCode == '+'.charCodeAt(0) ? this.delta_ : -this.delta_;
         const view = map.getView();
         zoomByDelta(view, delta, undefined, this.duration_);
         mapBrowserEvent.preventDefault();
@@ -88,6 +86,7 @@ function handleEvent(mapBrowserEvent) {
       }
     }
     return !stopEvent;
+  }
 }
 
 export default KeyboardZoom;

src/ol/interaction/Select.js

@@ -153,9 +153,7 @@ class Select extends Interaction {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    super({
+    super();
-      handleEvent: handleEvent,
-    });
 
     const options = opt_options ? opt_options : {};
 
@@ -420,16 +418,15 @@ class Select extends Interaction {
   removeFeatureLayerAssociation_(feature) {
     delete this.featureLayerAssociation_[getUid(feature)];
   }
-}
 
-/**
+  /**
    * Handles the {@link module:ol/MapBrowserEvent map browser event} and may change the
    * selected state of features.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
    * @return {boolean} `false` to stop event propagation.
    * @this {Select}
    */
-function handleEvent(mapBrowserEvent) {
+  handleEvent(mapBrowserEvent) {
     if (!this.condition_(mapBrowserEvent)) {
       return true;
     }
@@ -524,6 +521,7 @@ function handleEvent(mapBrowserEvent) {
       );
     }
     return true;
+  }
 }
 
 /**

test/spec/ol/interaction/dragzoom.test.js

@@ -70,7 +70,7 @@ describe('ol.interaction.DragZoom', function () {
       box.geometry_ = polygonFromExtent(extent);
       interaction.box_ = box;
 
-      interaction.onBoxEnd_();
+      interaction.onBoxEnd();
       setTimeout(function () {
         const view = map.getView();
         const center = view.getCenterInternal();
@@ -93,7 +93,7 @@ describe('ol.interaction.DragZoom', function () {
 
       map.getView().setResolution(0.25);
       setTimeout(function () {
-        interaction.onBoxEnd_();
+        interaction.onBoxEnd();
         setTimeout(function () {
           const view = map.getView();
           const resolution = view.getResolution();