Fix private scope issues in ol/interaction/*

This commit is contained in:
Andreas Hocevar
2020-04-14 16:59:50 +02:00
parent e14e41bcfb
commit 8ba051add3
9 changed files with 259 additions and 266 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}
/**

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}
/**

View File

@@ -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();