var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; return extendStatics(d, b); }; return function (d, b) { if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); /** * @module ol/interaction/MouseWheelZoom */ import EventType from '../events/EventType.js'; import Interaction, { zoomByDelta } from './Interaction.js'; import { DEVICE_PIXEL_RATIO, FIREFOX } from '../has.js'; import { all, always, focusWithTabindex } from '../events/condition.js'; import { clamp } from '../math.js'; /** * @enum {string} */ export var Mode = { TRACKPAD: 'trackpad', WHEEL: 'wheel', }; /** * @typedef {Object} Options * @property {import("../events/condition.js").Condition} [condition] A function that * takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a * boolean to indicate whether that event should be handled. Default is * {@link module:ol/events/condition.always}. * @property {boolean} [onFocusOnly=false] When the map's target has a `tabindex` attribute set, * the interaction will only handle events when the map has the focus. * @property {number} [maxDelta=1] Maximum mouse wheel delta. * @property {number} [duration=250] Animation duration in milliseconds. * @property {number} [timeout=80] Mouse wheel timeout duration in milliseconds. * @property {boolean} [useAnchor=true] Enable zooming using the mouse's * location as the anchor. When set to `false`, zooming in and out will zoom to * the center of the screen instead of zooming on the mouse's location. * @property {boolean} [constrainResolution=false] If true, the mouse wheel zoom * event will always animate to the closest zoom level after an interaction; * false means intermediary zoom levels are allowed. */ /** * @classdesc * Allows the user to zoom the map by scrolling the mouse wheel. * @api */ var MouseWheelZoom = /** @class */ (function (_super) { __extends(MouseWheelZoom, _super); /** * @param {Options} [opt_options] Options. */ function MouseWheelZoom(opt_options) { var _this = this; var options = opt_options ? opt_options : {}; _this = _super.call(this, /** @type {import("./Interaction.js").InteractionOptions} */ (options)) || this; /** * @private * @type {number} */ _this.totalDelta_ = 0; /** * @private * @type {number} */ _this.lastDelta_ = 0; /** * @private * @type {number} */ _this.maxDelta_ = options.maxDelta !== undefined ? options.maxDelta : 1; /** * @private * @type {number} */ _this.duration_ = options.duration !== undefined ? options.duration : 250; /** * @private * @type {number} */ _this.timeout_ = options.timeout !== undefined ? options.timeout : 80; /** * @private * @type {boolean} */ _this.useAnchor_ = options.useAnchor !== undefined ? options.useAnchor : true; /** * @private * @type {boolean} */ _this.constrainResolution_ = options.constrainResolution !== undefined ? options.constrainResolution : false; var condition = options.condition ? options.condition : always; /** * @private * @type {import("../events/condition.js").Condition} */ _this.condition_ = options.onFocusOnly ? all(focusWithTabindex, condition) : condition; /** * @private * @type {?import("../coordinate.js").Coordinate} */ _this.lastAnchor_ = null; /** * @private * @type {number|undefined} */ _this.startTime_ = undefined; /** * @private * @type {?} */ _this.timeoutId_; /** * @private * @type {Mode|undefined} */ _this.mode_ = undefined; /** * Trackpad events separated by this delay will be considered separate * interactions. * @type {number} */ _this.trackpadEventGap_ = 400; /** * @type {?} */ _this.trackpadTimeoutId_; /** * The number of delta values per zoom level * @private * @type {number} */ _this.deltaPerZoom_ = 300; return _this; } /** * @private */ MouseWheelZoom.prototype.endInteraction_ = function () { this.trackpadTimeoutId_ = undefined; var map = this.getMap(); if (!map) { return; } var view = map.getView(); view.endInteraction(undefined, this.lastDelta_ ? (this.lastDelta_ > 0 ? 1 : -1) : 0, this.lastAnchor_); }; /** * Handles the {@link module:ol/MapBrowserEvent~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} `false` to stop event propagation. */ MouseWheelZoom.prototype.handleEvent = function (mapBrowserEvent) { if (!this.condition_(mapBrowserEvent)) { return true; } var type = mapBrowserEvent.type; if (type !== EventType.WHEEL) { return true; } var map = mapBrowserEvent.map; var wheelEvent = /** @type {WheelEvent} */ (mapBrowserEvent.originalEvent); wheelEvent.preventDefault(); 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 var 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; } } if (delta === 0) { return false; } else { this.lastDelta_ = delta; } var 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; } var view = map.getView(); if (this.mode_ === Mode.TRACKPAD && !(view.getConstrainResolution() || this.constrainResolution_)) { if (this.trackpadTimeoutId_) { clearTimeout(this.trackpadTimeoutId_); } else { if (view.getAnimating()) { view.cancelAnimations(); } view.beginInteraction(); } this.trackpadTimeoutId_ = setTimeout(this.endInteraction_.bind(this), this.timeout_); view.adjustZoom(-delta / this.deltaPerZoom_, this.lastAnchor_); this.startTime_ = now; return false; } this.totalDelta_ += delta; var 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. */ MouseWheelZoom.prototype.handleWheelZoom_ = function (map) { var view = map.getView(); if (view.getAnimating()) { view.cancelAnimations(); } var delta = -clamp(this.totalDelta_, -this.maxDelta_ * this.deltaPerZoom_, this.maxDelta_ * this.deltaPerZoom_) / this.deltaPerZoom_; if (view.getConstrainResolution() || this.constrainResolution_) { // view has a zoom constraint, zoom by 1 delta = delta ? (delta > 0 ? 1 : -1) : 0; } zoomByDelta(view, delta, this.lastAnchor_, this.duration_); this.mode_ = undefined; this.totalDelta_ = 0; this.lastAnchor_ = null; this.startTime_ = undefined; this.timeoutId_ = undefined; }; /** * Enable or disable using the mouse's location as an anchor when zooming * @param {boolean} useAnchor true to zoom to the mouse's location, false * to zoom to the center of the map * @api */ MouseWheelZoom.prototype.setMouseAnchor = function (useAnchor) { this.useAnchor_ = useAnchor; if (!useAnchor) { this.lastAnchor_ = null; } }; return MouseWheelZoom; }(Interaction)); export default MouseWheelZoom; //# sourceMappingURL=MouseWheelZoom.js.map