diff --git a/src/ol/interaction/DoubleClickZoom.js b/src/ol/interaction/DoubleClickZoom.js index 75cdb7c847..271a4e1c02 100644 --- a/src/ol/interaction/DoubleClickZoom.js +++ b/src/ol/interaction/DoubleClickZoom.js @@ -20,9 +20,7 @@ class DoubleClickZoom extends Interaction { * @param {Options=} opt_options Options. */ constructor(opt_options) { - super({ - handleEvent: handleEvent, - }); + super(); const options = opt_options ? opt_options : {}; @@ -38,28 +36,27 @@ 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) { - let stopEvent = false; - if (mapBrowserEvent.type == MapBrowserEventType.DBLCLICK) { - const browserEvent = /** @type {MouseEvent} */ (mapBrowserEvent.originalEvent); - const map = mapBrowserEvent.map; - const anchor = mapBrowserEvent.coordinate; - const delta = browserEvent.shiftKey ? -this.delta_ : this.delta_; - const view = map.getView(); - zoomByDelta(view, delta, anchor, this.duration_); - mapBrowserEvent.preventDefault(); - stopEvent = true; + /** + * 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. + */ + handleEvent(mapBrowserEvent) { + let stopEvent = false; + if (mapBrowserEvent.type == MapBrowserEventType.DBLCLICK) { + const browserEvent = /** @type {MouseEvent} */ (mapBrowserEvent.originalEvent); + const map = mapBrowserEvent.map; + const anchor = mapBrowserEvent.coordinate; + const delta = browserEvent.shiftKey ? -this.delta_ : this.delta_; + const view = map.getView(); + zoomByDelta(view, delta, anchor, this.duration_); + mapBrowserEvent.preventDefault(); + stopEvent = true; + } + return !stopEvent; } - return !stopEvent; } export default DoubleClickZoom; diff --git a/src/ol/interaction/DragAndDrop.js b/src/ol/interaction/DragAndDrop.js index 1927b0ea22..3736e8c633 100644 --- a/src/ol/interaction/DragAndDrop.js +++ b/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.DRAGENTER, handleStop, this), - listen(dropArea, EventType.DRAGOVER, handleStop, this), - listen(dropArea, EventType.DROP, handleStop, this), + listen(dropArea, EventType.DROP, this.handleDrop, this), + listen(dropArea, EventType.DRAGENTER, this.handleStop, this), + listen(dropArea, EventType.DRAGOVER, this.handleStop, this), + listen(dropArea, EventType.DROP, this.handleStop, this), ]; } } @@ -234,32 +234,31 @@ class DragAndDrop extends Interaction { this.dropListenKeys_ = null; } } -} -/** - * @param {DragEvent} event Event. - * @this {DragAndDrop} - */ -function handleDrop(event) { - const files = event.dataTransfer.files; - for (let i = 0, ii = files.length; i < ii; ++i) { - const file = files.item(i); - const reader = new FileReader(); - reader.addEventListener( - EventType.LOAD, - this.handleResult_.bind(this, file) - ); - reader.readAsText(file); + /** + * @param {DragEvent} event Event. + */ + handleDrop(event) { + const files = event.dataTransfer.files; + for (let i = 0, ii = files.length; i < ii; ++i) { + const file = files.item(i); + const reader = new FileReader(); + reader.addEventListener( + EventType.LOAD, + this.handleResult_.bind(this, file) + ); + reader.readAsText(file); + } + } + + /** + * @param {DragEvent} event Event. + */ + handleStop(event) { + event.stopPropagation(); + event.preventDefault(); + event.dataTransfer.dropEffect = 'copy'; } } -/** - * @param {DragEvent} event Event. - */ -function handleStop(event) { - event.stopPropagation(); - event.preventDefault(); - event.dataTransfer.dropEffect = 'copy'; -} - export default DragAndDrop; diff --git a/src/ol/interaction/DragBox.js b/src/ol/interaction/DragBox.js index 3281bb6477..ce5c213448 100644 --- a/src/ol/interaction/DragBox.js +++ b/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; - /** - * Function to execute just before `onboxend` is fired - * @type {function(this:DragBox, import("../MapBrowserEvent.js").default): void} - * @private - */ - this.onBoxEnd_ = options.onBoxEnd ? options.onBoxEnd : VOID; + if (options.onBoxEnd) { + this.onBoxEnd = options.onBoxEnd; + } /** * @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; diff --git a/src/ol/interaction/DragZoom.js b/src/ol/interaction/DragZoom.js index 6894f028f4..68e3361226 100644 --- a/src/ol/interaction/DragZoom.js +++ b/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,40 +63,41 @@ class DragZoom extends DragBox { */ this.out_ = options.out !== undefined ? options.out : false; } -} -/** - * @this {DragZoom} - */ -function onBoxEnd() { - const map = this.getMap(); - const view = /** @type {!import("../View.js").default} */ (map.getView()); - const size = /** @type {!import("../size.js").Size} */ (map.getSize()); - let extent = this.getGeometry().getExtent(); + /** + * Function to execute just before `onboxend` is fired + * @param {import("../MapBrowserEvent.js").default} event Event. + */ + onBoxEnd(event) { + const map = this.getMap(); + const view = /** @type {!import("../View.js").default} */ (map.getView()); + const size = /** @type {!import("../size.js").Size} */ (map.getSize()); + let extent = this.getGeometry().getExtent(); - if (this.out_) { - const mapExtent = view.calculateExtentInternal(size); - const boxPixelExtent = createOrUpdateFromCoordinates([ - map.getPixelFromCoordinateInternal(getBottomLeft(extent)), - map.getPixelFromCoordinateInternal(getTopRight(extent)), - ]); - const factor = view.getResolutionForExtentInternal(boxPixelExtent, size); + if (this.out_) { + const mapExtent = view.calculateExtentInternal(size); + const boxPixelExtent = createOrUpdateFromCoordinates([ + map.getPixelFromCoordinateInternal(getBottomLeft(extent)), + map.getPixelFromCoordinateInternal(getTopRight(extent)), + ]); + const factor = view.getResolutionForExtentInternal(boxPixelExtent, size); - scaleFromCenter(mapExtent, 1 / factor); - extent = mapExtent; + scaleFromCenter(mapExtent, 1 / factor); + extent = mapExtent; + } + + const resolution = view.getConstrainedResolution( + view.getResolutionForExtentInternal(extent, size) + ); + const center = view.getConstrainedCenter(getCenter(extent), resolution); + + view.animateInternal({ + resolution: resolution, + center: center, + duration: this.duration_, + easing: easeOut, + }); } - - const resolution = view.getConstrainedResolution( - view.getResolutionForExtentInternal(extent, size) - ); - const center = view.getConstrainedCenter(getCenter(extent), resolution); - - view.animateInternal({ - resolution: resolution, - center: center, - duration: this.duration_, - easing: easeOut, - }); } export default DragZoom; diff --git a/src/ol/interaction/Interaction.js b/src/ol/interaction/Interaction.js index 9ba73c4b3b..55c3f240c0 100644 --- a/src/ol/interaction/Interaction.js +++ b/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) { - this.handleEvent = options.handleEvent; + if (opt_options && opt_options.handleEvent) { + this.handleEvent = opt_options.handleEvent; } /** diff --git a/src/ol/interaction/KeyboardPan.js b/src/ol/interaction/KeyboardPan.js index 87869db424..be54b99c78 100644 --- a/src/ol/interaction/KeyboardPan.js +++ b/src/ol/interaction/KeyboardPan.js @@ -37,9 +37,7 @@ class KeyboardPan extends Interaction { * @param {Options=} opt_options Options. */ constructor(opt_options) { - super({ - handleEvent: handleEvent, - }); + super(); const options = opt_options || {}; @@ -76,50 +74,50 @@ 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). - * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event. - * @return {boolean} `false` to stop event propagation. - * @this {KeyboardPan} - */ -function handleEvent(mapBrowserEvent) { - let stopEvent = false; - if (mapBrowserEvent.type == EventType.KEYDOWN) { - const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent); - const keyCode = keyEvent.keyCode; - if ( - this.condition_(mapBrowserEvent) && - (keyCode == KeyCode.DOWN || - keyCode == KeyCode.LEFT || - keyCode == KeyCode.RIGHT || - keyCode == KeyCode.UP) - ) { - const map = mapBrowserEvent.map; - const view = map.getView(); - const mapUnitsDelta = view.getResolution() * this.pixelDelta_; - let deltaX = 0, - deltaY = 0; - if (keyCode == KeyCode.DOWN) { - deltaY = -mapUnitsDelta; - } else if (keyCode == KeyCode.LEFT) { - deltaX = -mapUnitsDelta; - } else if (keyCode == KeyCode.RIGHT) { - deltaX = mapUnitsDelta; - } else { - deltaY = mapUnitsDelta; + /** + * 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). + * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event. + * @return {boolean} `false` to stop event propagation. + * @this {KeyboardPan} + */ + handleEvent(mapBrowserEvent) { + let stopEvent = false; + if (mapBrowserEvent.type == EventType.KEYDOWN) { + const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent); + const keyCode = keyEvent.keyCode; + if ( + this.condition_(mapBrowserEvent) && + (keyCode == KeyCode.DOWN || + keyCode == KeyCode.LEFT || + keyCode == KeyCode.RIGHT || + keyCode == KeyCode.UP) + ) { + const map = mapBrowserEvent.map; + const view = map.getView(); + const mapUnitsDelta = view.getResolution() * this.pixelDelta_; + let deltaX = 0, + deltaY = 0; + if (keyCode == KeyCode.DOWN) { + deltaY = -mapUnitsDelta; + } else if (keyCode == KeyCode.LEFT) { + deltaX = -mapUnitsDelta; + } else if (keyCode == KeyCode.RIGHT) { + deltaX = mapUnitsDelta; + } else { + deltaY = mapUnitsDelta; + } + const delta = [deltaX, deltaY]; + rotateCoordinate(delta, view.getRotation()); + pan(view, delta, this.duration_); + mapBrowserEvent.preventDefault(); + stopEvent = true; } - const delta = [deltaX, deltaY]; - rotateCoordinate(delta, view.getRotation()); - pan(view, delta, this.duration_); - mapBrowserEvent.preventDefault(); - stopEvent = true; } + return !stopEvent; } - return !stopEvent; } export default KeyboardPan; diff --git a/src/ol/interaction/KeyboardZoom.js b/src/ol/interaction/KeyboardZoom.js index 875ab80d88..37ba540309 100644 --- a/src/ol/interaction/KeyboardZoom.js +++ b/src/ol/interaction/KeyboardZoom.js @@ -33,9 +33,7 @@ class KeyboardZoom extends Interaction { * @param {Options=} opt_options Options. */ constructor(opt_options) { - super({ - handleEvent: handleEvent, - }); + super(); const options = opt_options ? opt_options : {}; @@ -57,37 +55,38 @@ 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 '-'). - * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event. - * @return {boolean} `false` to stop event propagation. - * @this {KeyboardZoom} - */ -function handleEvent(mapBrowserEvent) { - let stopEvent = false; - if ( - mapBrowserEvent.type == EventType.KEYDOWN || - mapBrowserEvent.type == EventType.KEYPRESS - ) { - const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent); - const charCode = keyEvent.charCode; + /** + * 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 '-'). + * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event. + * @return {boolean} `false` to stop event propagation. + * @this {KeyboardZoom} + */ + handleEvent(mapBrowserEvent) { + let stopEvent = false; if ( - this.condition_(mapBrowserEvent) && - (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0)) + mapBrowserEvent.type == EventType.KEYDOWN || + mapBrowserEvent.type == EventType.KEYPRESS ) { - const map = mapBrowserEvent.map; - const delta = charCode == '+'.charCodeAt(0) ? this.delta_ : -this.delta_; - const view = map.getView(); - zoomByDelta(view, delta, undefined, this.duration_); - mapBrowserEvent.preventDefault(); - stopEvent = true; + const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent); + const charCode = keyEvent.charCode; + if ( + this.condition_(mapBrowserEvent) && + (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0)) + ) { + const map = mapBrowserEvent.map; + const delta = + charCode == '+'.charCodeAt(0) ? this.delta_ : -this.delta_; + const view = map.getView(); + zoomByDelta(view, delta, undefined, this.duration_); + mapBrowserEvent.preventDefault(); + stopEvent = true; + } } + return !stopEvent; } - return !stopEvent; } export default KeyboardZoom; diff --git a/src/ol/interaction/Select.js b/src/ol/interaction/Select.js index 28b490ab33..82addd7c35 100644 --- a/src/ol/interaction/Select.js +++ b/src/ol/interaction/Select.js @@ -153,9 +153,7 @@ class Select extends Interaction { * @param {Options=} opt_options Options. */ constructor(opt_options) { - super({ - handleEvent: handleEvent, - }); + super(); const options = opt_options ? opt_options : {}; @@ -420,110 +418,110 @@ 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) { - if (!this.condition_(mapBrowserEvent)) { - return true; - } - const add = this.addCondition_(mapBrowserEvent); - const remove = this.removeCondition_(mapBrowserEvent); - const toggle = this.toggleCondition_(mapBrowserEvent); - const set = !add && !remove && !toggle; - const map = mapBrowserEvent.map; - const features = this.getFeatures(); - const deselected = []; - const selected = []; - if (set) { - // Replace the currently selected feature(s) with the feature(s) at the - // pixel, or clear the selected feature(s) if there is no feature at - // the pixel. - clear(this.featureLayerAssociation_); - map.forEachFeatureAtPixel( - mapBrowserEvent.pixel, - /** - * @param {import("../Feature.js").FeatureLike} feature Feature. - * @param {import("../layer/Layer.js").default} layer Layer. - * @return {boolean|undefined} Continue to iterate over the features. - */ - function (feature, layer) { - if (this.filter_(feature, layer)) { - selected.push(feature); - this.addFeatureLayerAssociation_(feature, layer); - return !this.multi_; - } - }.bind(this), - { - layerFilter: this.layerFilter_, - hitTolerance: this.hitTolerance_, - } - ); - for (let i = features.getLength() - 1; i >= 0; --i) { - const feature = features.item(i); - const index = selected.indexOf(feature); - if (index > -1) { - // feature is already selected - selected.splice(index, 1); - } else { - features.remove(feature); - deselected.push(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} + */ + handleEvent(mapBrowserEvent) { + if (!this.condition_(mapBrowserEvent)) { + return true; } - if (selected.length !== 0) { - features.extend(selected); - } - } else { - // Modify the currently selected feature(s). - map.forEachFeatureAtPixel( - mapBrowserEvent.pixel, - /** - * @param {import("../Feature.js").FeatureLike} feature Feature. - * @param {import("../layer/Layer.js").default} layer Layer. - * @return {boolean|undefined} Continue to iterate over the features. - */ - function (feature, layer) { - if (this.filter_(feature, layer)) { - if ((add || toggle) && !includes(features.getArray(), feature)) { + const add = this.addCondition_(mapBrowserEvent); + const remove = this.removeCondition_(mapBrowserEvent); + const toggle = this.toggleCondition_(mapBrowserEvent); + const set = !add && !remove && !toggle; + const map = mapBrowserEvent.map; + const features = this.getFeatures(); + const deselected = []; + const selected = []; + if (set) { + // Replace the currently selected feature(s) with the feature(s) at the + // pixel, or clear the selected feature(s) if there is no feature at + // the pixel. + clear(this.featureLayerAssociation_); + map.forEachFeatureAtPixel( + mapBrowserEvent.pixel, + /** + * @param {import("../Feature.js").FeatureLike} feature Feature. + * @param {import("../layer/Layer.js").default} layer Layer. + * @return {boolean|undefined} Continue to iterate over the features. + */ + function (feature, layer) { + if (this.filter_(feature, layer)) { selected.push(feature); this.addFeatureLayerAssociation_(feature, layer); - } else if ( - (remove || toggle) && - includes(features.getArray(), feature) - ) { - deselected.push(feature); - this.removeFeatureLayerAssociation_(feature); + return !this.multi_; } - return !this.multi_; + }.bind(this), + { + layerFilter: this.layerFilter_, + hitTolerance: this.hitTolerance_, + } + ); + for (let i = features.getLength() - 1; i >= 0; --i) { + const feature = features.item(i); + const index = selected.indexOf(feature); + if (index > -1) { + // feature is already selected + selected.splice(index, 1); + } else { + features.remove(feature); + deselected.push(feature); } - }.bind(this), - { - layerFilter: this.layerFilter_, - hitTolerance: this.hitTolerance_, } - ); - for (let j = deselected.length - 1; j >= 0; --j) { - features.remove(deselected[j]); + if (selected.length !== 0) { + features.extend(selected); + } + } else { + // Modify the currently selected feature(s). + map.forEachFeatureAtPixel( + mapBrowserEvent.pixel, + /** + * @param {import("../Feature.js").FeatureLike} feature Feature. + * @param {import("../layer/Layer.js").default} layer Layer. + * @return {boolean|undefined} Continue to iterate over the features. + */ + function (feature, layer) { + if (this.filter_(feature, layer)) { + if ((add || toggle) && !includes(features.getArray(), feature)) { + selected.push(feature); + this.addFeatureLayerAssociation_(feature, layer); + } else if ( + (remove || toggle) && + includes(features.getArray(), feature) + ) { + deselected.push(feature); + this.removeFeatureLayerAssociation_(feature); + } + return !this.multi_; + } + }.bind(this), + { + layerFilter: this.layerFilter_, + hitTolerance: this.hitTolerance_, + } + ); + for (let j = deselected.length - 1; j >= 0; --j) { + features.remove(deselected[j]); + } + features.extend(selected); } - features.extend(selected); + if (selected.length > 0 || deselected.length > 0) { + this.dispatchEvent( + new SelectEvent( + SelectEventType.SELECT, + selected, + deselected, + mapBrowserEvent + ) + ); + } + return true; } - if (selected.length > 0 || deselected.length > 0) { - this.dispatchEvent( - new SelectEvent( - SelectEventType.SELECT, - selected, - deselected, - mapBrowserEvent - ) - ); - } - return true; } /** diff --git a/test/spec/ol/interaction/dragzoom.test.js b/test/spec/ol/interaction/dragzoom.test.js index 1e9139bf92..0edc19bac4 100644 --- a/test/spec/ol/interaction/dragzoom.test.js +++ b/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();