Use extends, super and proper constructor jsdoc for ol/interaction

src/ol/interaction/DoubleClickZoom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/DoubleClickZoom
  */
-import {inherits} from '../util.js';
 import MapBrowserEventType from '../MapBrowserEventType.js';
 import Interaction, {zoomByDelta} from '../interaction/Interaction.js';
 
@@ -16,15 +15,17 @@ import Interaction, {zoomByDelta} from '../interaction/Interaction.js';
 /**
  * @classdesc
  * Allows the user to zoom by double-clicking on the map.
- *
- * @constructor
- * @extends {module:ol/interaction/Interaction}
- * @param {module:ol/interaction/DoubleClickZoom~Options=} opt_options Options.
- * @api
  */
-class DoubleClickZoom {
+class DoubleClickZoom extends Interaction {
 
+  /**
+   * @param {module:ol/interaction/DoubleClickZoom~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
+    super({
+      handleEvent: handleEvent
+    });
 
     const options = opt_options ? opt_options : {};
 
@@ -34,10 +35,6 @@ class DoubleClickZoom {
      */
     this.delta_ = options.delta ? options.delta : 1;
 
-    Interaction.call(this, {
-      handleEvent: handleEvent
-    });
-
     /**
      * @private
      * @type {number}
@@ -48,8 +45,6 @@ class DoubleClickZoom {
 
 }
 
-inherits(DoubleClickZoom, Interaction);
-
 
 /**
  * Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a

src/ol/interaction/DragAndDrop.js

@@ -3,7 +3,6 @@
  */
 // FIXME should handle all geo-referenced data, not just vector data
 
-import {inherits} from '../util.js';
 import {TRUE} from '../functions.js';
 import {listen, unlistenByKey} from '../events.js';
 import Event from '../events/Event.js';
@@ -42,19 +41,18 @@ const DragAndDropEventType = {
  * @classdesc
  * Events emitted by {@link module:ol/interaction/DragAndDrop~DragAndDrop} instances are instances
  * of this type.
- *
- * @constructor
- * @extends {module:ol/events/Event}
- * @param {module:ol/interaction/DragAndDrop~DragAndDropEventType} type Type.
- * @param {File} file File.
- * @param {Array.<module:ol/Feature>=} opt_features Features.
- * @param {module:ol/proj/Projection=} opt_projection Projection.
  */
-class DragAndDropEvent {
+class DragAndDropEvent extends Event {
 
+  /**
+   * @param {module:ol/interaction/DragAndDrop~DragAndDropEventType} type Type.
+   * @param {File} file File.
+   * @param {Array.<module:ol/Feature>=} opt_features Features.
+   * @param {module:ol/proj/Projection=} opt_projection Projection.
+   */
   constructor(type, file, opt_features, opt_projection) {
 
-    Event.call(this, type);
+    super(type);
 
     /**
      * The features parsed from dropped data.
@@ -81,25 +79,23 @@ class DragAndDropEvent {
 
 }
 
-inherits(DragAndDropEvent, Event);
-
 
 /**
  * @classdesc
  * Handles input of vector data by drag and drop.
  *
- * @constructor
- * @extends {module:ol/interaction/Interaction}
  * @fires module:ol/interaction/DragAndDrop~DragAndDropEvent
- * @param {module:ol/interaction/DragAndDrop~Options=} opt_options Options.
- * @api
  */
-class DragAndDrop {
+class DragAndDrop extends Interaction {
+  /**
+   * @param {module:ol/interaction/DragAndDrop~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
-    Interaction.call(this, {
+    super({
       handleEvent: TRUE
     });
 
@@ -200,7 +196,7 @@ class DragAndDrop {
    * @inheritDoc
    */
   setActive(active) {
-    Interaction.prototype.setActive.call(this, active);
+    super.setActive(active);
     if (active) {
       this.registerListeners_();
     } else {
@@ -213,7 +209,7 @@ class DragAndDrop {
    */
   setMap(map) {
     this.unregisterListeners_();
-    Interaction.prototype.setMap.call(this, map);
+    super.setMap(map);
     if (this.getActive()) {
       this.registerListeners_();
     }
@@ -245,8 +241,6 @@ class DragAndDrop {
   }
 }
 
-inherits(DragAndDrop, Interaction);
-
 
 /**
  * @param {DragEvent} event Event.

src/ol/interaction/DragBox.js

@@ -3,7 +3,6 @@
  */
 // FIXME draw drag box
 import Event from '../events/Event.js';
-import {inherits} from '../util.js';
 import {always, mouseOnly, mouseActionButton} from '../events/condition.js';
 import {UNDEFINED} from '../functions.js';
 import PointerInteraction from '../interaction/Pointer.js';
@@ -29,6 +28,8 @@ import RenderBox from '../render/Box.js';
  * @property {module:ol/interaction/DragBox~EndCondition} [boxEndCondition] A function that takes a {@link module:ol/MapBrowserEvent~MapBrowserEvent} and two
  * {@link module:ol~Pixel}s to indicate whether a `boxend` event should be fired.
  * Default is `true` if the area of the box is bigger than the `minArea` option.
+ * @property {function(this:module:ol/interaction/DragBox, module:ol/MapBrowserEvent)} onBoxEnd Code to execute just
+ * before `boxend` is fired.
  */
 
 
@@ -63,17 +64,16 @@ const DragBoxEventType = {
  * @classdesc
  * Events emitted by {@link module:ol/interaction/DragBox~DragBox} instances are instances of
  * this type.
- *
- * @param {string} type The event type.
- * @param {module:ol/coordinate~Coordinate} coordinate The event coordinate.
- * @param {module:ol/MapBrowserEvent} mapBrowserEvent Originating event.
- * @extends {module:ol/events/Event}
- * @constructor
  */
-class DragBoxEvent {
+class DragBoxEvent extends Event {
 
+  /**
+   * @param {string} type The event type.
+   * @param {module:ol/coordinate~Coordinate} coordinate The event coordinate.
+   * @param {module:ol/MapBrowserEvent} mapBrowserEvent Originating event.
+   */
   constructor(type, coordinate, mapBrowserEvent) {
-    Event.call(this, type);
+    super(type);
 
     /**
      * The coordinate of the drag event.
@@ -94,8 +94,6 @@ class DragBoxEvent {
 
 }
 
-inherits(DragBoxEvent, Event);
-
 
 /**
  * @classdesc
@@ -108,16 +106,16 @@ inherits(DragBoxEvent, Event);
  *
  * This interaction is only supported for mouse devices.
  *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
  * @fires module:ol/interaction/DragBox~DragBoxEvent
- * @param {module:ol/interaction/DragBox~Options=} opt_options Options.
- * @api
  */
-class DragBox {
+class DragBox extends PointerInteraction {
+  /**
+   * @param {module:ol/interaction/DragBox~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
       handleUpEvent: handleUpEvent
@@ -137,6 +135,13 @@ class DragBox {
     */
     this.minArea_ = options.minArea !== undefined ? options.minArea : 64;
 
+    /**
+     * Function to execute just before `onboxend` is fired
+     * @type {{function(this:module:ol/interaction/DragBox, module:ol/MapBrowserEvent)}}
+     * @private
+     */
+    this.onBoxEnd_ = options.onBoxEnd ? options.onBoxEnd : UNDEFINED;
+
     /**
     * @type {module:ol~Pixel}
     * @private
@@ -167,8 +172,6 @@ class DragBox {
   }
 }
 
-inherits(DragBox, PointerInteraction);
-
 
 /**
  * The default condition for determining whether the boxend event
@@ -203,15 +206,6 @@ function handleDragEvent(mapBrowserEvent) {
 }
 
 
-/**
- * To be overridden by child classes.
- * FIXME: use constructor option instead of relying on overriding.
- * @param {module:ol/MapBrowserEvent} mapBrowserEvent Map browser event.
- * @protected
- */
-DragBox.prototype.onBoxEnd = UNDEFINED;
-
-
 /**
  * @param {module:ol/MapBrowserPointerEvent} mapBrowserEvent Event.
  * @return {boolean} Stop drag sequence?
@@ -224,9 +218,8 @@ function handleUpEvent(mapBrowserEvent) {
 
   this.box_.setMap(null);
 
-  if (this.boxEndCondition_(mapBrowserEvent,
+  if (this.boxEndCondition_(mapBrowserEvent, this.startPixel_, mapBrowserEvent.pixel)) {
-    this.startPixel_, mapBrowserEvent.pixel)) {
+    this.onBoxEnd_(mapBrowserEvent);
-    this.onBoxEnd(mapBrowserEvent);
     this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXEND,
       mapBrowserEvent.coordinate, mapBrowserEvent));
   }

src/ol/interaction/DragPan.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/DragPan
  */
-import {inherits} from '../util.js';
 import ViewHint from '../ViewHint.js';
 import {scale as scaleCoordinate, rotate as rotateCoordinate, add as addCoordinate} from '../coordinate.js';
 import {easeOut} from '../easing.js';
@@ -22,19 +21,19 @@ import PointerInteraction, {centroid as centroidFromPointers} from '../interacti
 /**
  * @classdesc
  * Allows the user to pan the map by dragging the map.
- *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- * @param {module:ol/interaction/DragPan~Options=} opt_options Options.
- * @api
  */
-class DragPan {
+class DragPan extends PointerInteraction {
+  /**
+   * @param {module:ol/interaction/DragPan~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent
+      handleUpEvent: handleUpEvent,
+      stopDown: FALSE
     });
 
     const options = opt_options ? opt_options : {};
@@ -71,8 +70,6 @@ class DragPan {
 
 }
 
-inherits(DragPan, PointerInteraction);
-
 
 /**
  * @param {module:ol/MapBrowserPointerEvent} mapBrowserEvent Event.
@@ -175,8 +172,4 @@ function handleDownEvent(mapBrowserEvent) {
 }
 
 
-/**
- * @inheritDoc
- */
-DragPan.prototype.shouldStopEvent = FALSE;
 export default DragPan;

src/ol/interaction/DragRotate.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/DragRotate
  */
-import {inherits} from '../util.js';
 import {disable} from '../rotationconstraint.js';
 import ViewHint from '../ViewHint.js';
 import {altShiftKeysOnly, mouseOnly, mouseActionButton} from '../events/condition.js';
@@ -27,22 +26,22 @@ import PointerInteraction from '../interaction/Pointer.js';
  * it to when the alt and shift keys are held down.
  *
  * This interaction is only supported for mouse devices.
- *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- * @param {module:ol/interaction/DragRotate~Options=} opt_options Options.
- * @api
  */
-class DragRotate {
+class DragRotate extends PointerInteraction {
 
+  /**
+   * @param {module:ol/interaction/DragRotate~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent
+      handleUpEvent: handleUpEvent,
+      stopDown: FALSE
     });
 
     /**
@@ -67,8 +66,6 @@ class DragRotate {
 
 }
 
-inherits(DragRotate, PointerInteraction);
-
 
 /**
  * @param {module:ol/MapBrowserPointerEvent} mapBrowserEvent Event.
@@ -136,9 +133,4 @@ function handleDownEvent(mapBrowserEvent) {
   }
 }
 
-
-/**
- * @inheritDoc
- */
-DragRotate.prototype.shouldStopEvent = FALSE;
 export default DragRotate;

src/ol/interaction/DragRotateAndZoom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/DragRotateAndZoom
  */
-import {inherits} from '../util.js';
 import {disable} from '../rotationconstraint.js';
 import ViewHint from '../ViewHint.js';
 import {shiftKeyOnly, mouseOnly} from '../events/condition.js';
@@ -28,19 +27,18 @@ import PointerInteraction from '../interaction/Pointer.js';
  * This interaction is only supported for mouse devices.
  *
  * And this interaction is not included in the default interactions.
- *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- * @param {module:ol/interaction/DragRotateAndZoom~Options=} opt_options Options.
- * @api
  */
-class DragRotateAndZoom {
+class DragRotateAndZoom extends PointerInteraction {
 
+  /**
+   * @param {module:ol/interaction/DragRotateAndZoom~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
       handleUpEvent: handleUpEvent
@@ -80,8 +78,6 @@ class DragRotateAndZoom {
 
 }
 
-inherits(DragRotateAndZoom, PointerInteraction);
-
 
 /**
  * @param {module:ol/MapBrowserPointerEvent} mapBrowserEvent Event.

src/ol/interaction/DragZoom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/DragZoom
  */
-import {inherits} from '../util.js';
 import {easeOut} from '../easing.js';
 import {shiftKeyOnly} from '../events/condition.js';
 import {createOrUpdateFromCoordinates, getBottomLeft, getCenter, getTopRight, scaleFromCenter} from '../extent.js';
@@ -29,18 +28,23 @@ import DragBox from '../interaction/DragBox.js';
  *
  * To change the style of the box, use CSS and the `.ol-dragzoom` selector, or
  * your custom one configured with `className`.
- *
- * @constructor
- * @extends {module:ol/interaction/DragBox}
- * @param {module:ol/interaction/DragZoom~Options=} opt_options Options.
- * @api
  */
-class DragZoom {
+class DragZoom extends DragBox {
+  /**
+   * @param {module:ol/interaction/DragZoom~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
     const options = opt_options ? opt_options : {};
 
     const condition = options.condition ? options.condition : shiftKeyOnly;
 
+    super({
+      condition: condition,
+      className: options.className || 'ol-dragzoom',
+      onBoxEnd: onBoxEnd
+    });
+
     /**
      * @private
      * @type {number}
@@ -52,54 +56,43 @@ class DragZoom {
      * @type {boolean}
      */
     this.out_ = options.out !== undefined ? options.out : false;
-
-    DragBox.call(this, {
-      condition: condition,
-      className: options.className || 'ol-dragzoom'
-    });
-
-  }
-
-  /**
-   * @inheritDoc
-   */
-  onBoxEnd() {
-    const map = this.getMap();
-
-    const view = /** @type {!module:ol/View} */ (map.getView());
-
-    const size = /** @type {!module:ol/size~Size} */ (map.getSize());
-
-    let extent = this.getGeometry().getExtent();
-
-    if (this.out_) {
-      const mapExtent = view.calculateExtent(size);
-      const boxPixelExtent = createOrUpdateFromCoordinates([
-        map.getPixelFromCoordinate(getBottomLeft(extent)),
-        map.getPixelFromCoordinate(getTopRight(extent))]);
-      const factor = view.getResolutionForExtent(boxPixelExtent, size);
-
-      scaleFromCenter(mapExtent, 1 / factor);
-      extent = mapExtent;
-    }
-
-    const resolution = view.constrainResolution(
-      view.getResolutionForExtent(extent, size));
-
-    let center = getCenter(extent);
-    center = view.constrainCenter(center);
-
-    view.animate({
-      resolution: resolution,
-      center: center,
-      duration: this.duration_,
-      easing: easeOut
-    });
-
   }
 }
 
-inherits(DragZoom, DragBox);
+
+/**
+ * @this {module:ol/interaction/DragZoom}
+ */
+function onBoxEnd() {
+  const map = this.getMap();
+  const view = /** @type {!module:ol/View} */ (map.getView());
+  const size = /** @type {!module:ol/size~Size} */ (map.getSize());
+  let extent = this.getGeometry().getExtent();
+
+  if (this.out_) {
+    const mapExtent = view.calculateExtent(size);
+    const boxPixelExtent = createOrUpdateFromCoordinates([
+      map.getPixelFromCoordinate(getBottomLeft(extent)),
+      map.getPixelFromCoordinate(getTopRight(extent))]);
+    const factor = view.getResolutionForExtent(boxPixelExtent, size);
+
+    scaleFromCenter(mapExtent, 1 / factor);
+    extent = mapExtent;
+  }
+
+  const resolution = view.constrainResolution(
+    view.getResolutionForExtent(extent, size));
+
+  let center = getCenter(extent);
+  center = view.constrainCenter(center);
+
+  view.animate({
+    resolution: resolution,
+    center: center,
+    duration: this.duration_,
+    easing: easeOut
+  });
+}
 
 
 export default DragZoom;

src/ol/interaction/Draw.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/Draw
  */
-import {inherits} from '../util.js';
 import EventType from '../events/EventType.js';
 import Feature from '../Feature.js';
 import MapBrowserEventType from '../MapBrowserEventType.js';
@@ -128,17 +127,15 @@ const DrawEventType = {
  * @classdesc
  * Events emitted by {@link module:ol/interaction/Draw~Draw} instances are
  * instances of this type.
- *
- * @constructor
- * @extends {module:ol/events/Event}
- * @param {module:ol/interaction/Draw~DrawEventType} type Type.
- * @param {module:ol/Feature} feature The feature drawn.
  */
-class DrawEvent {
+class DrawEvent extends Event {
-
+  /**
+   * @param {module:ol/interaction/Draw~DrawEventType} type Type.
+   * @param {module:ol/Feature} feature The feature drawn.
+   */
   constructor(type, feature) {
 
-    Event.call(this, type);
+    super(type);
 
     /**
      * The feature being drawn.
@@ -151,26 +148,25 @@ class DrawEvent {
 
 }
 
-inherits(DrawEvent, Event);
-
 
 /**
  * @classdesc
  * Interaction for drawing feature geometries.
  *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
  * @fires module:ol/interaction/Draw~DrawEvent
- * @param {module:ol/interaction/Draw~Options} options Options.
- * @api
  */
-class Draw {
+class Draw extends PointerInteraction {
+  /**
+   * @param {module:ol/interaction/Draw~Options} options Options.
+   * @api
+   */
   constructor(options) {
 
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleEvent: handleEvent,
-      handleUpEvent: handleUpEvent
+      handleUpEvent: handleUpEvent,
+      stopDown: FALSE
     });
 
     /**
@@ -441,7 +437,7 @@ class Draw {
    * @inheritDoc
    */
   setMap(map) {
-    PointerInteraction.prototype.setMap.call(this, map);
+    super.setMap(map);
     this.updateState_();
   }
 
@@ -801,8 +797,6 @@ class Draw {
   }
 }
 
-inherits(Draw, PointerInteraction);
-
 
 /**
  * @return {module:ol/style/Style~StyleFunction} Styles.
@@ -941,12 +935,6 @@ function handleUpEvent(event) {
 }
 
 
-/**
- * @inheritDoc
- */
-Draw.prototype.shouldStopEvent = FALSE;
-
-
 /**
  * Create a `geometryFunction` for `type: 'Circle'` that will create a regular
  * polygon with a user specified number of sides and start angle instead of an

src/ol/interaction/Extent.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/Extent
  */
-import {inherits} from '../util.js';
 import Feature from '../Feature.js';
 import MapBrowserEventType from '../MapBrowserEventType.js';
 import MapBrowserPointerEvent from '../MapBrowserPointerEvent.js';
@@ -51,15 +50,14 @@ const ExtentEventType = {
  * @classdesc
  * Events emitted by {@link module:ol/interaction/Extent~Extent} instances are
  * instances of this type.
- *
- * @constructor
- * @param {module:ol/extent~Extent} extent the new extent
- * @extends {module:ol/events/Event}
  */
-class ExtentInteractionEvent {
+class ExtentInteractionEvent extends Event {
 
+  /**
+   * @param {module:ol/extent~Extent} extent the new extent
+   */
   constructor(extent) {
-    Event.call(this, ExtentEventType.EXTENTCHANGED);
+    super(ExtentEventType.EXTENTCHANGED);
 
     /**
      * The current extent.
@@ -71,8 +69,6 @@ class ExtentInteractionEvent {
 
 }
 
-inherits(ExtentInteractionEvent, Event);
-
 
 /**
  * @classdesc
@@ -80,15 +76,22 @@ inherits(ExtentInteractionEvent, Event);
  * Once drawn, the vector box can be modified by dragging its vertices or edges.
  * This interaction is only supported for mouse devices.
  *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
  * @fires module:ol/interaction/Extent~Event
- * @param {module:ol/interaction/Extent~Options=} opt_options Options.
- * @api
  */
-class ExtentInteraction {
+class ExtentInteraction extends PointerInteraction {
+  /**
+   * @param {module:ol/interaction/Extent~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
+    super({
+      handleDownEvent: handleDownEvent,
+      handleDragEvent: handleDragEvent,
+      handleEvent: handleEvent,
+      handleUpEvent: handleUpEvent
+    });
+
     const options = opt_options || {};
 
     /**
@@ -138,13 +141,6 @@ class ExtentInteraction {
       opt_options = {};
     }
 
-    PointerInteraction.call(this, {
-      handleDownEvent: handleDownEvent,
-      handleDragEvent: handleDragEvent,
-      handleEvent: handleEvent,
-      handleUpEvent: handleUpEvent
-    });
-
     /**
      * Layer for the extentFeature
      * @type {module:ol/layer/Vector}
@@ -287,7 +283,7 @@ class ExtentInteraction {
   setMap(map) {
     this.extentOverlay_.setMap(map);
     this.vertexOverlay_.setMap(map);
-    PointerInteraction.prototype.setMap.call(this, map);
+    super.setMap(map);
   }
 
   /**
@@ -314,8 +310,6 @@ class ExtentInteraction {
   }
 }
 
-inherits(ExtentInteraction, PointerInteraction);
-
 /**
  * @param {module:ol/MapBrowserEvent} mapBrowserEvent Event.
  * @return {boolean} Propagate event?

src/ol/interaction/Interaction.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/Interaction
  */
-import {inherits} from '../util.js';
 import BaseObject from '../Object.js';
 import {easeOut, linear} from '../easing.js';
 import InteractionProperty from '../interaction/Property.js';
@@ -30,16 +29,14 @@ import {clamp} from '../math.js';
  * by a keyboard event not a button element event.
  * Although interactions do not have a DOM element, some of them do render
  * vectors and so are visible on the screen.
- *
- * @constructor
- * @param {module:ol/interaction/Interaction~InteractionOptions} options Options.
- * @extends {module:ol/Object}
- * @api
  */
-class Interaction {
+class Interaction extends BaseObject {
+  /**
+   * @param {module:ol/interaction/Interaction~InteractionOptions} options Options.
+   * @api
+   */
   constructor(options) {
-
+    super();
-    BaseObject.call(this);
 
     /**
      * @private
@@ -96,8 +93,6 @@ class Interaction {
   }
 }
 
-inherits(Interaction, BaseObject);
-
 
 /**
  * @param {module:ol/View} view View.

src/ol/interaction/KeyboardPan.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/KeyboardPan
  */
-import {inherits} from '../util.js';
 import {rotate as rotateCoordinate} from '../coordinate.js';
 import EventType from '../events/EventType.js';
 import KeyCode from '../events/KeyCode.js';
@@ -33,17 +32,15 @@ import Interaction, {pan} from '../interaction/Interaction.js';
  * element, focus will have to be on, and returned to, this element if the keys
  * are to function.
  * See also {@link module:ol/interaction/KeyboardZoom~KeyboardZoom}.
- *
- * @constructor
- * @extends {module:ol/interaction/Interaction}
- * @param {module:ol/interaction/KeyboardPan~Options=} opt_options Options.
- * @api
  */
-class KeyboardPan {
+class KeyboardPan extends Interaction {
-
+  /**
+   * @param {module:ol/interaction/KeyboardPan~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    Interaction.call(this, {
+    super({
       handleEvent: handleEvent
     });
 
@@ -83,7 +80,6 @@ class KeyboardPan {
 
 }
 
-inherits(KeyboardPan, Interaction);
 
 /**
  * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a

src/ol/interaction/KeyboardZoom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/KeyboardZoom
  */
-import {inherits} from '../util.js';
 import EventType from '../events/EventType.js';
 import {targetNotEditable} from '../events/condition.js';
 import Interaction, {zoomByDelta} from '../interaction/Interaction.js';
@@ -29,17 +28,15 @@ import Interaction, {zoomByDelta} from '../interaction/Interaction.js';
  * element, focus will have to be on, and returned to, this element if the keys
  * are to function.
  * See also {@link moudle:ol/interaction/KeyboardPan~KeyboardPan}.
- *
- * @constructor
- * @param {module:ol/interaction/KeyboardZoom~Options=} opt_options Options.
- * @extends {module:ol/interaction/Interaction}
- * @api
  */
-class KeyboardZoom {
+class KeyboardZoom extends Interaction {
-
+  /**
+   * @param {module:ol/interaction/KeyboardZoom~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    Interaction.call(this, {
+    super({
       handleEvent: handleEvent
     });
 
@@ -67,8 +64,6 @@ class KeyboardZoom {
 
 }
 
-inherits(KeyboardZoom, Interaction);
-
 
 /**
  * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a

src/ol/interaction/Modify.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/interaction/Modify
  */
-import {getUid, inherits} from '../util.js';
+import {getUid} from '../util.js';
 import Collection from '../Collection.js';
 import CollectionEventType from '../CollectionEventType.js';
 import Feature from '../Feature.js';
@@ -105,20 +105,17 @@ const ModifyEventType = {
  * @classdesc
  * Events emitted by {@link module:ol/interaction/Modify~Modify} instances are
  * instances of this type.
- *
- * @constructor
- * @extends {module:ol/events/Event}
- * @param {ModifyEventType} type Type.
- * @param {module:ol/Collection.<module:ol/Feature>} features
- * The features modified.
- * @param {module:ol/MapBrowserPointerEvent} mapBrowserPointerEvent
- * Associated {@link module:ol/MapBrowserPointerEvent}.
  */
-export class ModifyEvent {
+export class ModifyEvent extends Event {
-
+  /**
+   * @param {ModifyEventType} type Type.
+   * @param {module:ol/Collection.<module:ol/Feature>} features
+   * The features modified.
+   * @param {module:ol/MapBrowserPointerEvent} mapBrowserPointerEvent
+   * Associated {@link module:ol/MapBrowserPointerEvent}.
+   */
   constructor(type, features, mapBrowserPointerEvent) {
-
+    super(type);
-    Event.call(this, type);
 
     /**
      * The features being modified.
@@ -138,8 +135,6 @@ export class ModifyEvent {
 
 }
 
-inherits(ModifyEvent, Event);
-
 
 /**
  * @classdesc
@@ -153,17 +148,16 @@ inherits(ModifyEvent, Event);
  * By default, the interaction will allow deletion of vertices when the `alt`
  * key is pressed.  To configure the interaction with a different condition
  * for deletion, use the `deleteCondition` option.
- *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- * @param {module:ol/interaction/Modify~Options} options Options.
  * @fires module:ol/interaction/Modify~ModifyEvent
- * @api
  */
-class Modify {
+class Modify extends PointerInteraction {
+  /**
+   * @param {module:ol/interaction/Modify~Options} options Options.
+   * @api
+   */
   constructor(options) {
 
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
       handleEvent: handleEvent,
@@ -417,7 +411,7 @@ class Modify {
       this.overlay_.getSource().removeFeature(this.vertexFeature_);
       this.vertexFeature_ = null;
     }
-    PointerInteraction.prototype.setActive.call(this, active);
+    super.setActive(active);
   }
 
   /**
@@ -425,7 +419,7 @@ class Modify {
    */
   setMap(map) {
     this.overlay_.setMap(map);
-    PointerInteraction.prototype.setMap.call(this, map);
+    super.setMap(this, map);
   }
 
   /**
@@ -970,8 +964,6 @@ class Modify {
   }
 }
 
-inherits(Modify, PointerInteraction);
-
 
 /**
  * @param {module:ol/interaction/Modify~SegmentData} a The first segment data.

src/ol/interaction/MouseWheelZoom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/MouseWheelZoom
  */
-import {inherits} from '../util.js';
 import ViewHint from '../ViewHint.js';
 import {always} from '../events/condition.js';
 import {easeOut} from '../easing.js';
@@ -47,16 +46,15 @@ export const Mode = {
 /**
  * @classdesc
  * Allows the user to zoom the map by scrolling the mouse wheel.
- *
- * @constructor
- * @extends {module:ol/interaction/Interaction}
- * @param {module:ol/interaction/MouseWheelZoom~Options=} opt_options Options.
- * @api
  */
-class MouseWheelZoom {
+class MouseWheelZoom extends Interaction {
+  /**
+   * @param {module:ol/interaction/MouseWheelZoom~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    Interaction.call(this, {
+    super({
       handleEvent: handleEvent
     });
 
@@ -192,8 +190,6 @@ class MouseWheelZoom {
   }
 }
 
-inherits(MouseWheelZoom, Interaction);
-
 
 /**
  * Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a

src/ol/interaction/PinchRotate.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/PinchRotate
  */
-import {inherits} from '../util.js';
 import ViewHint from '../ViewHint.js';
 import {FALSE} from '../functions.js';
 import {rotate, rotateWithoutConstraints} from '../interaction/Interaction.js';
@@ -21,20 +20,19 @@ import {disable} from '../rotationconstraint.js';
  * @classdesc
  * Allows the user to rotate the map by twisting with two fingers
  * on a touch screen.
- *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- * @param {module:ol/interaction/PinchRotate~Options=} opt_options Options.
- * @api
  */
-class PinchRotate {
+class PinchRotate extends PointerInteraction {
-
+  /**
+   * @param {module:ol/interaction/PinchRotate~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent
+      handleUpEvent: handleUpEvent,
+      stopDown: FALSE
     });
 
     const options = opt_options || {};
@@ -79,8 +77,6 @@ class PinchRotate {
 
 }
 
-inherits(PinchRotate, PointerInteraction);
-
 
 /**
  * @param {module:ol/MapBrowserPointerEvent} mapBrowserEvent Event.
@@ -174,10 +170,4 @@ function handleDownEvent(mapBrowserEvent) {
   }
 }
 
-
-/**
- * @inheritDoc
- */
-PinchRotate.prototype.shouldStopEvent = FALSE;
-
 export default PinchRotate;

src/ol/interaction/PinchZoom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/PinchZoom
  */
-import {inherits} from '../util.js';
 import ViewHint from '../ViewHint.js';
 import {FALSE} from '../functions.js';
 import {zoom, zoomWithoutConstraints} from '../interaction/Interaction.js';
@@ -20,20 +19,19 @@ import PointerInteraction, {centroid as centroidFromPointers} from '../interacti
  * @classdesc
  * Allows the user to zoom the map by pinching with two fingers
  * on a touch screen.
- *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- * @param {module:ol/interaction/PinchZoom~Options=} opt_options Options.
- * @api
  */
-class PinchZoom {
+class PinchZoom extends PointerInteraction {
-
+  /**
+   * @param {module:ol/interaction/PinchZoom~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
-      handleUpEvent: handleUpEvent
+      handleUpEvent: handleUpEvent,
+      stopDown: FALSE
     });
 
     const options = opt_options ? opt_options : {};
@@ -72,8 +70,6 @@ class PinchZoom {
 
 }
 
-inherits(PinchZoom, PointerInteraction);
-
 
 /**
  * @param {module:ol/MapBrowserPointerEvent} mapBrowserEvent Event.
@@ -174,9 +170,4 @@ function handleDownEvent(mapBrowserEvent) {
   }
 }
 
-
-/**
- * @inheritDoc
- */
-PinchZoom.prototype.shouldStopEvent = FALSE;
 export default PinchZoom;

src/ol/interaction/Pointer.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/Pointer
  */
-import {inherits} from '../util.js';
 import {FALSE, UNDEFINED} from '../functions.js';
 import MapBrowserEventType from '../MapBrowserEventType.js';
 import MapBrowserPointerEvent from '../MapBrowserPointerEvent.js';
@@ -59,6 +58,9 @@ const handleMoveEvent = UNDEFINED;
  * @property {(function(module:ol/MapBrowserPointerEvent):boolean)} [handleUpEvent]
  *  Function handling "up" events. If the function returns `false` then the
  * current drag sequence is stopped.
+ * @property {function(boolean):boolean} stopDown
+ * Should the down event be propagated to other interactions, or should be
+ * stopped?
  */
 
 
@@ -71,18 +73,17 @@ const handleMoveEvent = UNDEFINED;
  * started. During a drag sequence the `handleDragEvent` user function is
  * called on `move` events. The drag sequence ends when the `handleUpEvent`
  * user function is called and returns `false`.
- *
- * @constructor
- * @param {module:ol/interaction/Pointer~Options=} opt_options Options.
- * @extends {module:ol/interaction/Interaction}
- * @api
  */
-class PointerInteraction {
+class PointerInteraction extends Interaction {
+  /**
+   * @param {module:ol/interaction/Pointer~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
-    Interaction.call(this, {
+    super({
       handleEvent: options.handleEvent || handleEvent
     });
 
@@ -120,6 +121,14 @@ class PointerInteraction {
      */
     this.handlingDownUpSequence = false;
 
+    /**
+     * This function is used to determine if "down" events should be propagated
+     * to other interactions or should be stopped.
+     * @type {function(boolean):boolean}
+     * @protected
+     */
+    this.stopDown = options.stopDown ? options.stopDown : stopDown;
+
     /**
      * @type {!Object.<string, module:ol/pointer/PointerEvent>}
      * @private
@@ -156,26 +165,8 @@ class PointerInteraction {
     }
   }
 
-  /**
-   * This method is used to determine if "down" events should be propagated to
-   * other interactions or should be stopped.
-   *
-   * The method receives the return code of the "handleDownEvent" function.
-   *
-   * By default this function is the "identity" function. It's overridden in
-   * child classes.
-   *
-   * @param {boolean} handled Was the event handled by the interaction?
-   * @return {boolean} Should the event be stopped?
-   * @protected
-   */
-  shouldStopEvent(handled) {
-    return handled;
-  }
 }
 
-inherits(PointerInteraction, Interaction);
-
 
 /**
  * @param {Array.<module:ol/pointer/PointerEvent>} pointerEvents List of events.
@@ -233,7 +224,7 @@ export function handleEvent(mapBrowserEvent) {
     if (mapBrowserEvent.type == MapBrowserEventType.POINTERDOWN) {
       const handled = this.handleDownEvent_(mapBrowserEvent);
       this.handlingDownUpSequence = handled;
-      stopEvent = this.shouldStopEvent(handled);
+      stopEvent = this.stopDown(handled);
     } else if (mapBrowserEvent.type == MapBrowserEventType.POINTERMOVE) {
       this.handleMoveEvent_(mapBrowserEvent);
     }
@@ -243,3 +234,11 @@ export function handleEvent(mapBrowserEvent) {
 
 
 export default PointerInteraction;
+
+/**
+ * @param {boolean} handled Was the event handled by the interaction?
+ * @return {boolean} Should the `down` event be stopped?
+ */
+function stopDown(handled) {
+  return handled;
+}

src/ol/interaction/Select.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/interaction/Select
  */
-import {getUid, inherits} from '../util.js';
+import {getUid} from '../util.js';
 import CollectionEventType from '../CollectionEventType.js';
 import {extend, includes} from '../array.js';
 import {listen} from '../events.js';
@@ -101,19 +101,17 @@ const SelectEventType = {
  * @classdesc
  * Events emitted by {@link module:ol/interaction/Select~Select} instances are instances of
  * this type.
- *
- * @param {SelectEventType} type The event type.
- * @param {Array.<module:ol/Feature>} selected Selected features.
- * @param {Array.<module:ol/Feature>} deselected Deselected features.
- * @param {module:ol/MapBrowserEvent} mapBrowserEvent Associated
- *     {@link module:ol/MapBrowserEvent}.
- * @extends {module:ol/events/Event}
- * @constructor
  */
-class SelectEvent {
+class SelectEvent extends Event {
-
+  /**
+   * @param {SelectEventType} type The event type.
+   * @param {Array.<module:ol/Feature>} selected Selected features.
+   * @param {Array.<module:ol/Feature>} deselected Deselected features.
+   * @param {module:ol/MapBrowserEvent} mapBrowserEvent Associated
+   *     {@link module:ol/MapBrowserEvent}.
+   */
   constructor(type, selected, deselected, mapBrowserEvent) {
-    Event.call(this, type);
+    super(type);
 
     /**
      * Selected features array.
@@ -140,8 +138,6 @@ class SelectEvent {
 
 }
 
-inherits(SelectEvent, Event);
-
 
 /**
  * @classdesc
@@ -155,16 +151,16 @@ inherits(SelectEvent, Event);
  *
  * Selected features are added to an internal unmanaged layer.
  *
- * @constructor
- * @extends {module:ol/interaction/Interaction}
- * @param {module:ol/interaction/Select~Options=} opt_options Options.
  * @fires SelectEvent
- * @api
  */
-class Select {
+class Select extends Interaction {
+  /**
+   * @param {module:ol/interaction/Select~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    Interaction.call(this, {
+    super({
       handleEvent: handleEvent
     });
 
@@ -336,7 +332,7 @@ class Select {
     if (currentMap) {
       selectedFeatures.forEach(currentMap.unskipFeature.bind(currentMap));
     }
-    Interaction.prototype.setMap.call(this, map);
+    super.setMap(map);
     this.featureOverlay_.setMap(map);
     if (map) {
       selectedFeatures.forEach(map.skipFeature.bind(map));
@@ -375,8 +371,6 @@ class Select {
   }
 }
 
-inherits(Select, Interaction);
-
 
 /**
  * Handles the {@link module:ol/MapBrowserEvent map browser event} and may change the

src/ol/interaction/Snap.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/interaction/Snap
  */
-import {getUid, inherits} from '../util.js';
+import {getUid} from '../util.js';
 import {CollectionEvent} from '../Collection.js';
 import CollectionEventType from '../CollectionEventType.js';
 import {distance as coordinateDistance, squaredDistance as squaredCoordinateDistance, closestOnCircle, closestOnSegment, squaredDistanceToSegment} from '../coordinate.js';
@@ -62,19 +62,19 @@ import RBush from '../structs/RBush.js';
  *     var snap = new Snap({
  *       source: source
  *     });
- *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- * @param {module:ol/interaction/Snap~Options=} opt_options Options.
- * @api
  */
-class Snap {
+class Snap extends PointerInteraction {
+  /**
+   * @param {module:ol/interaction/Snap~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
 
-    PointerInteraction.call(this, {
+    super({
       handleEvent: handleEvent,
       handleDownEvent: TRUE,
-      handleUpEvent: handleUpEvent
+      handleUpEvent: handleUpEvent,
+      stopDown: FALSE
     });
 
     const options = opt_options ? opt_options : {};
@@ -325,7 +325,7 @@ class Snap {
       keys.length = 0;
       features.forEach(this.forEachFeatureRemove_.bind(this));
     }
-    PointerInteraction.prototype.setMap.call(this, map);
+    super.setMap(map);
 
     if (map) {
       if (this.features_) {
@@ -585,14 +585,6 @@ class Snap {
   }
 }
 
-inherits(Snap, PointerInteraction);
-
-
-/**
- * @inheritDoc
- */
-Snap.prototype.shouldStopEvent = FALSE;
-
 
 /**
  * Handle all pointer events events.

src/ol/interaction/Translate.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/interaction/Translate
  */
-import {inherits} from '../util.js';
 import Collection from '../Collection.js';
 import {getChangeEventType} from '../Object.js';
 import {listen} from '../events.js';
@@ -56,18 +55,16 @@ const TranslateEventType = {
  * @classdesc
  * Events emitted by {@link module:ol/interaction/Translate~Translate} instances
  * are instances of this type.
- *
- * @constructor
- * @extends {module:ol/events/Event}
- * @param {module:ol/interaction/Translate~TranslateEventType} type Type.
- * @param {module:ol/Collection.<module:ol/Feature>} features The features translated.
- * @param {module:ol/coordinate~Coordinate} coordinate The event coordinate.
  */
-export class TranslateEvent {
+export class TranslateEvent extends Event {
-
+  /**
+   * @param {module:ol/interaction/Translate~TranslateEventType} type Type.
+   * @param {module:ol/Collection.<module:ol/Feature>} features The features translated.
+   * @param {module:ol/coordinate~Coordinate} coordinate The event coordinate.
+   */
   constructor(type, features, coordinate) {
 
-    Event.call(this, type);
+    super(type);
 
     /**
      * The features being translated.
@@ -88,22 +85,20 @@ export class TranslateEvent {
 
 }
 
-inherits(TranslateEvent, Event);
-
 
 /**
  * @classdesc
  * Interaction for translating (moving) features.
  *
- * @constructor
- * @extends {module:ol/interaction/Pointer}
  * @fires module:ol/interaction/Translate~TranslateEvent
- * @param {module:ol/interaction/Translate~Options=} opt_options Options.
- * @api
  */
-class Translate {
+class Translate extends PointerInteraction {
+  /**
+   * @param {module:ol/interaction/Translate~Options=} opt_options Options.
+   * @api
+   */
   constructor(opt_options) {
-    PointerInteraction.call(this, {
+    super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
       handleMoveEvent: handleMoveEvent,
@@ -211,7 +206,7 @@ class Translate {
    */
   setMap(map) {
     const oldMap = this.getMap();
-    PointerInteraction.prototype.setMap.call(this, map);
+    super.setMap(map);
     this.updateState_(oldMap);
   }
 
@@ -239,8 +234,6 @@ class Translate {
   }
 }
 
-inherits(Translate, PointerInteraction);
-
 
 /**
  * @param {module:ol/MapBrowserPointerEvent} event Event.