From e79add2e77cb708cbc2c63f4be3e32d90e1265da Mon Sep 17 00:00:00 2001 From: ahocevar Date: Tue, 17 Jul 2018 21:09:06 +0200 Subject: [PATCH] Use extends, super and proper constructor jsdoc for ol/interaction --- src/ol/interaction/DoubleClickZoom.js | 21 ++---- src/ol/interaction/DragAndDrop.js | 38 ++++------ src/ol/interaction/DragBox.js | 55 ++++++-------- src/ol/interaction/DragPan.js | 23 ++---- src/ol/interaction/DragRotate.js | 24 ++---- src/ol/interaction/DragRotateAndZoom.js | 16 ++-- src/ol/interaction/DragZoom.js | 97 ++++++++++++------------- src/ol/interaction/Draw.js | 42 ++++------- src/ol/interaction/Extent.js | 42 +++++------ src/ol/interaction/Interaction.js | 17 ++--- src/ol/interaction/KeyboardPan.js | 16 ++-- src/ol/interaction/KeyboardZoom.js | 17 ++--- src/ol/interaction/Modify.js | 44 +++++------ src/ol/interaction/MouseWheelZoom.js | 16 ++-- src/ol/interaction/PinchRotate.js | 26 ++----- src/ol/interaction/PinchZoom.js | 25 ++----- src/ol/interaction/Pointer.js | 53 +++++++------- src/ol/interaction/Select.js | 40 +++++----- src/ol/interaction/Snap.js | 28 +++---- src/ol/interaction/Translate.js | 35 ++++----- 20 files changed, 273 insertions(+), 402 deletions(-) diff --git a/src/ol/interaction/DoubleClickZoom.js b/src/ol/interaction/DoubleClickZoom.js index 49146148ea..04f1fd5a16 100644 --- a/src/ol/interaction/DoubleClickZoom.js +++ b/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 diff --git a/src/ol/interaction/DragAndDrop.js b/src/ol/interaction/DragAndDrop.js index adde90c1b7..186d1798c9 100644 --- a/src/ol/interaction/DragAndDrop.js +++ b/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.=} 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.=} 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. diff --git a/src/ol/interaction/DragBox.js b/src/ol/interaction/DragBox.js index bfb1040ee3..60bf0b4063 100644 --- a/src/ol/interaction/DragBox.js +++ b/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, - this.startPixel_, mapBrowserEvent.pixel)) { - this.onBoxEnd(mapBrowserEvent); + if (this.boxEndCondition_(mapBrowserEvent, this.startPixel_, mapBrowserEvent.pixel)) { + this.onBoxEnd_(mapBrowserEvent); this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXEND, mapBrowserEvent.coordinate, mapBrowserEvent)); } diff --git a/src/ol/interaction/DragPan.js b/src/ol/interaction/DragPan.js index b714199432..386c15544d 100644 --- a/src/ol/interaction/DragPan.js +++ b/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; diff --git a/src/ol/interaction/DragRotate.js b/src/ol/interaction/DragRotate.js index 059e18e44a..bfa82a3189 100644 --- a/src/ol/interaction/DragRotate.js +++ b/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; diff --git a/src/ol/interaction/DragRotateAndZoom.js b/src/ol/interaction/DragRotateAndZoom.js index dc139da900..b751a871cf 100644 --- a/src/ol/interaction/DragRotateAndZoom.js +++ b/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. diff --git a/src/ol/interaction/DragZoom.js b/src/ol/interaction/DragZoom.js index ff0b2ade1e..a8dc5c28fa 100644 --- a/src/ol/interaction/DragZoom.js +++ b/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; diff --git a/src/ol/interaction/Draw.js b/src/ol/interaction/Draw.js index c5afd7c687..f6a8c592f3 100644 --- a/src/ol/interaction/Draw.js +++ b/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 diff --git a/src/ol/interaction/Extent.js b/src/ol/interaction/Extent.js index 1140dd1b1a..340ee6da42 100644 --- a/src/ol/interaction/Extent.js +++ b/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? diff --git a/src/ol/interaction/Interaction.js b/src/ol/interaction/Interaction.js index 7bd2e432f8..0a97db11de 100644 --- a/src/ol/interaction/Interaction.js +++ b/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) { - - BaseObject.call(this); + super(); /** * @private @@ -96,8 +93,6 @@ class Interaction { } } -inherits(Interaction, BaseObject); - /** * @param {module:ol/View} view View. diff --git a/src/ol/interaction/KeyboardPan.js b/src/ol/interaction/KeyboardPan.js index ca94db57e3..c6ee6e84a8 100644 --- a/src/ol/interaction/KeyboardPan.js +++ b/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 diff --git a/src/ol/interaction/KeyboardZoom.js b/src/ol/interaction/KeyboardZoom.js index e5b49053e8..496b85859d 100644 --- a/src/ol/interaction/KeyboardZoom.js +++ b/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 diff --git a/src/ol/interaction/Modify.js b/src/ol/interaction/Modify.js index 2cf7ba9f5d..cbcf947c3d 100644 --- a/src/ol/interaction/Modify.js +++ b/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.} 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.} features + * The features modified. + * @param {module:ol/MapBrowserPointerEvent} mapBrowserPointerEvent + * Associated {@link module:ol/MapBrowserPointerEvent}. + */ constructor(type, features, mapBrowserPointerEvent) { - - Event.call(this, type); + super(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. diff --git a/src/ol/interaction/MouseWheelZoom.js b/src/ol/interaction/MouseWheelZoom.js index e5ab1e3dce..038eabb829 100644 --- a/src/ol/interaction/MouseWheelZoom.js +++ b/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 diff --git a/src/ol/interaction/PinchRotate.js b/src/ol/interaction/PinchRotate.js index 8c06a4c0c2..d87290e197 100644 --- a/src/ol/interaction/PinchRotate.js +++ b/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; diff --git a/src/ol/interaction/PinchZoom.js b/src/ol/interaction/PinchZoom.js index 542770b9f6..257ea320fa 100644 --- a/src/ol/interaction/PinchZoom.js +++ b/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; diff --git a/src/ol/interaction/Pointer.js b/src/ol/interaction/Pointer.js index 928a026508..a1cc939eb8 100644 --- a/src/ol/interaction/Pointer.js +++ b/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.} * @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.} 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; +} diff --git a/src/ol/interaction/Select.js b/src/ol/interaction/Select.js index d209c69c64..3b2c1d5551 100644 --- a/src/ol/interaction/Select.js +++ b/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.} selected Selected features. - * @param {Array.} 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.} selected Selected features. + * @param {Array.} 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 diff --git a/src/ol/interaction/Snap.js b/src/ol/interaction/Snap.js index 85c9bff6fc..4d41460b5f 100644 --- a/src/ol/interaction/Snap.js +++ b/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. diff --git a/src/ol/interaction/Translate.js b/src/ol/interaction/Translate.js index e7d40ac29f..3d082ccf9e 100644 --- a/src/ol/interaction/Translate.js +++ b/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.} 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.} 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.