Move interaction event handlers to class methods
This commit is contained in:
Kevin Schmidt
@@ -54,11 +54,9 @@ class MouseWheelZoom extends Interaction {
|
||||
*/
|
||||
constructor(opt_options) {
|
||||
|
||||
super({
|
||||
handleEvent: handleEvent
|
||||
});
|
||||
const options = opt_options ? opt_options : {};
|
||||
|
||||
const options = opt_options || {};
|
||||
super(/** @type {import("./Interaction.js").InteractionOptions} */ (options));
|
||||
|
||||
/**
|
||||
* @private
|
||||
@@ -157,6 +155,127 @@ class MouseWheelZoom extends Interaction {
|
||||
view.setHint(ViewHint.INTERACTING, -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a mousewheel-event) and eventually
|
||||
* zooms the map.
|
||||
* @override
|
||||
*/
|
||||
handleEvent(mapBrowserEvent) {
|
||||
if (!this.condition_(mapBrowserEvent)) {
|
||||
return true;
|
||||
}
|
||||
const type = mapBrowserEvent.type;
|
||||
if (type !== EventType.WHEEL && type !== EventType.MOUSEWHEEL) {
|
||||
return true;
|
||||
}
|
||||
|
||||
mapBrowserEvent.preventDefault();
|
||||
|
||||
const map = mapBrowserEvent.map;
|
||||
const wheelEvent = /** @type {WheelEvent} */ (mapBrowserEvent.originalEvent);
|
||||
|
||||
if (this.useAnchor_) {
|
||||
this.lastAnchor_ = mapBrowserEvent.coordinate;
|
||||
}
|
||||
|
||||
// Delta normalisation inspired by
|
||||
// https://github.com/mapbox/mapbox-gl-js/blob/001c7b9/js/ui/handler/scroll_zoom.js
|
||||
let delta;
|
||||
if (mapBrowserEvent.type == EventType.WHEEL) {
|
||||
delta = wheelEvent.deltaY;
|
||||
if (FIREFOX &&
|
||||
wheelEvent.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
|
||||
delta /= DEVICE_PIXEL_RATIO;
|
||||
}
|
||||
if (wheelEvent.deltaMode === WheelEvent.DOM_DELTA_LINE) {
|
||||
delta *= 40;
|
||||
}
|
||||
} else if (mapBrowserEvent.type == EventType.MOUSEWHEEL) {
|
||||
delta = -wheelEvent.wheelDeltaY;
|
||||
if (SAFARI) {
|
||||
delta /= 3;
|
||||
}
|
||||
}
|
||||
|
||||
if (delta === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
|
||||
if (this.startTime_ === undefined) {
|
||||
this.startTime_ = now;
|
||||
}
|
||||
|
||||
if (!this.mode_ || now - this.startTime_ > this.trackpadEventGap_) {
|
||||
this.mode_ = Math.abs(delta) < 4 ?
|
||||
Mode.TRACKPAD :
|
||||
Mode.WHEEL;
|
||||
}
|
||||
|
||||
if (this.mode_ === Mode.TRACKPAD) {
|
||||
const view = map.getView();
|
||||
if (this.trackpadTimeoutId_) {
|
||||
clearTimeout(this.trackpadTimeoutId_);
|
||||
} else {
|
||||
view.setHint(ViewHint.INTERACTING, 1);
|
||||
}
|
||||
this.trackpadTimeoutId_ = setTimeout(this.decrementInteractingHint_.bind(this), this.trackpadEventGap_);
|
||||
let resolution = view.getResolution() * Math.pow(2, delta / this.trackpadDeltaPerZoom_);
|
||||
const minResolution = view.getMinResolution();
|
||||
const maxResolution = view.getMaxResolution();
|
||||
let rebound = 0;
|
||||
if (resolution < minResolution) {
|
||||
resolution = Math.max(resolution, minResolution / this.trackpadZoomBuffer_);
|
||||
rebound = 1;
|
||||
} else if (resolution > maxResolution) {
|
||||
resolution = Math.min(resolution, maxResolution * this.trackpadZoomBuffer_);
|
||||
rebound = -1;
|
||||
}
|
||||
if (this.lastAnchor_) {
|
||||
const center = view.calculateCenterZoom(resolution, this.lastAnchor_);
|
||||
view.setCenter(view.constrainCenter(center));
|
||||
}
|
||||
view.setResolution(resolution);
|
||||
|
||||
if (rebound === 0 && this.constrainResolution_) {
|
||||
view.animate({
|
||||
resolution: view.constrainResolution(resolution, delta > 0 ? -1 : 1),
|
||||
easing: easeOut,
|
||||
anchor: this.lastAnchor_,
|
||||
duration: this.duration_
|
||||
});
|
||||
}
|
||||
|
||||
if (rebound > 0) {
|
||||
view.animate({
|
||||
resolution: minResolution,
|
||||
easing: easeOut,
|
||||
anchor: this.lastAnchor_,
|
||||
duration: 500
|
||||
});
|
||||
} else if (rebound < 0) {
|
||||
view.animate({
|
||||
resolution: maxResolution,
|
||||
easing: easeOut,
|
||||
anchor: this.lastAnchor_,
|
||||
duration: 500
|
||||
});
|
||||
}
|
||||
this.startTime_ = now;
|
||||
return false;
|
||||
}
|
||||
|
||||
this.delta_ += delta;
|
||||
|
||||
const timeLeft = Math.max(this.timeout_ - (now - this.startTime_), 0);
|
||||
|
||||
clearTimeout(this.timeoutId_);
|
||||
this.timeoutId_ = setTimeout(this.handleWheelZoom_.bind(this, map), timeLeft);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {import("../PluggableMap.js").default} map Map.
|
||||
@@ -190,129 +309,4 @@ class MouseWheelZoom extends Interaction {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a
|
||||
* mousewheel-event) and eventually zooms the map.
|
||||
* @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
|
||||
* @return {boolean} Allow event propagation.
|
||||
* @this {MouseWheelZoom}
|
||||
*/
|
||||
function handleEvent(mapBrowserEvent) {
|
||||
if (!this.condition_(mapBrowserEvent)) {
|
||||
return true;
|
||||
}
|
||||
const type = mapBrowserEvent.type;
|
||||
if (type !== EventType.WHEEL && type !== EventType.MOUSEWHEEL) {
|
||||
return true;
|
||||
}
|
||||
|
||||
mapBrowserEvent.preventDefault();
|
||||
|
||||
const map = mapBrowserEvent.map;
|
||||
const wheelEvent = /** @type {WheelEvent} */ (mapBrowserEvent.originalEvent);
|
||||
|
||||
if (this.useAnchor_) {
|
||||
this.lastAnchor_ = mapBrowserEvent.coordinate;
|
||||
}
|
||||
|
||||
// Delta normalisation inspired by
|
||||
// https://github.com/mapbox/mapbox-gl-js/blob/001c7b9/js/ui/handler/scroll_zoom.js
|
||||
let delta;
|
||||
if (mapBrowserEvent.type == EventType.WHEEL) {
|
||||
delta = wheelEvent.deltaY;
|
||||
if (FIREFOX &&
|
||||
wheelEvent.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
|
||||
delta /= DEVICE_PIXEL_RATIO;
|
||||
}
|
||||
if (wheelEvent.deltaMode === WheelEvent.DOM_DELTA_LINE) {
|
||||
delta *= 40;
|
||||
}
|
||||
} else if (mapBrowserEvent.type == EventType.MOUSEWHEEL) {
|
||||
delta = -wheelEvent.wheelDeltaY;
|
||||
if (SAFARI) {
|
||||
delta /= 3;
|
||||
}
|
||||
}
|
||||
|
||||
if (delta === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
|
||||
if (this.startTime_ === undefined) {
|
||||
this.startTime_ = now;
|
||||
}
|
||||
|
||||
if (!this.mode_ || now - this.startTime_ > this.trackpadEventGap_) {
|
||||
this.mode_ = Math.abs(delta) < 4 ?
|
||||
Mode.TRACKPAD :
|
||||
Mode.WHEEL;
|
||||
}
|
||||
|
||||
if (this.mode_ === Mode.TRACKPAD) {
|
||||
const view = map.getView();
|
||||
if (this.trackpadTimeoutId_) {
|
||||
clearTimeout(this.trackpadTimeoutId_);
|
||||
} else {
|
||||
view.setHint(ViewHint.INTERACTING, 1);
|
||||
}
|
||||
this.trackpadTimeoutId_ = setTimeout(this.decrementInteractingHint_.bind(this), this.trackpadEventGap_);
|
||||
let resolution = view.getResolution() * Math.pow(2, delta / this.trackpadDeltaPerZoom_);
|
||||
const minResolution = view.getMinResolution();
|
||||
const maxResolution = view.getMaxResolution();
|
||||
let rebound = 0;
|
||||
if (resolution < minResolution) {
|
||||
resolution = Math.max(resolution, minResolution / this.trackpadZoomBuffer_);
|
||||
rebound = 1;
|
||||
} else if (resolution > maxResolution) {
|
||||
resolution = Math.min(resolution, maxResolution * this.trackpadZoomBuffer_);
|
||||
rebound = -1;
|
||||
}
|
||||
if (this.lastAnchor_) {
|
||||
const center = view.calculateCenterZoom(resolution, this.lastAnchor_);
|
||||
view.setCenter(view.constrainCenter(center));
|
||||
}
|
||||
view.setResolution(resolution);
|
||||
|
||||
if (rebound === 0 && this.constrainResolution_) {
|
||||
view.animate({
|
||||
resolution: view.constrainResolution(resolution, delta > 0 ? -1 : 1),
|
||||
easing: easeOut,
|
||||
anchor: this.lastAnchor_,
|
||||
duration: this.duration_
|
||||
});
|
||||
}
|
||||
|
||||
if (rebound > 0) {
|
||||
view.animate({
|
||||
resolution: minResolution,
|
||||
easing: easeOut,
|
||||
anchor: this.lastAnchor_,
|
||||
duration: 500
|
||||
});
|
||||
} else if (rebound < 0) {
|
||||
view.animate({
|
||||
resolution: maxResolution,
|
||||
easing: easeOut,
|
||||
anchor: this.lastAnchor_,
|
||||
duration: 500
|
||||
});
|
||||
}
|
||||
this.startTime_ = now;
|
||||
return false;
|
||||
}
|
||||
|
||||
this.delta_ += delta;
|
||||
|
||||
const timeLeft = Math.max(this.timeout_ - (now - this.startTime_), 0);
|
||||
|
||||
clearTimeout(this.timeoutId_);
|
||||
this.timeoutId_ = setTimeout(this.handleWheelZoom_.bind(this, map), timeLeft);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
export default MouseWheelZoom;
|
||||
|
||||
Reference in New Issue
Block a user