@vaadin/bundles 25.0.0-alpha3 → 25.0.0-alpha5

package/vendors-node_modules_ol_control_ZoomSlider_js.js

@@ -0,0 +1,418 @@
+(self["webpackChunk_vaadin_bundles"] = self["webpackChunk_vaadin_bundles"] || []).push([["vendors-node_modules_ol_control_ZoomSlider_js"],{
+
+/***/ "./node_modules/ol/control/ZoomSlider.js":
+/*!***********************************************!*\
+  !*** ./node_modules/ol/control/ZoomSlider.js ***!
+  \***********************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _css_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../css.js */ "./node_modules/ol/css.js");
+/* harmony import */ var _easing_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../easing.js */ "./node_modules/ol/easing.js");
+/* harmony import */ var _events_Event_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../events/Event.js */ "./node_modules/ol/events/Event.js");
+/* harmony import */ var _events_EventType_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../events/EventType.js */ "./node_modules/ol/events/EventType.js");
+/* harmony import */ var _events_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../events.js */ "./node_modules/ol/events.js");
+/* harmony import */ var _math_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../math.js */ "./node_modules/ol/math.js");
+/* harmony import */ var _pointer_EventType_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../pointer/EventType.js */ "./node_modules/ol/pointer/EventType.js");
+/* harmony import */ var _Control_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Control.js */ "./node_modules/ol/control/Control.js");
+/**
+ * @module ol/control/ZoomSlider
+ */
+
+
+
+
+
+
+
+
+
+
+/**
+ * The enum for available directions.
+ *
+ * @enum {number}
+ */
+const Direction = {
+  VERTICAL: 0,
+  HORIZONTAL: 1,
+};
+
+/**
+ * @typedef {Object} Options
+ * @property {string} [className='ol-zoomslider'] CSS class name.
+ * @property {number} [duration=200] Animation duration in milliseconds.
+ * @property {function(import("../MapEvent.js").default):void} [render] Function called when the control
+ * should be re-rendered. This is called in a `requestAnimationFrame` callback.
+ * @property {HTMLElement|string} [target] Specify a target if you want the control to be
+ * rendered outside of the map's viewport.
+ */
+
+/**
+ * @classdesc
+ * A slider type of control for zooming.
+ *
+ * Example:
+ *
+ *     map.addControl(new ZoomSlider());
+ *
+ * @api
+ */
+class ZoomSlider extends _Control_js__WEBPACK_IMPORTED_MODULE_0__["default"] {
+  /**
+   * @param {Options} [options] Zoom slider options.
+   */
+  constructor(options) {
+    options = options ? options : {};
+
+    super({
+      target: options.target,
+      element: document.createElement('div'),
+      render: options.render,
+    });
+
+    /**
+     * @type {!Array<import("../events.js").EventsKey>}
+     * @private
+     */
+    this.dragListenerKeys_ = [];
+
+    /**
+     * Will hold the current resolution of the view.
+     *
+     * @type {number|undefined}
+     * @private
+     */
+    this.currentResolution_ = undefined;
+
+    /**
+     * The direction of the slider. Will be determined from actual display of the
+     * container and defaults to Direction.VERTICAL.
+     *
+     * @type {Direction}
+     * @private
+     */
+    this.direction_ = Direction.VERTICAL;
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.dragging_;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.heightLimit_ = 0;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.widthLimit_ = 0;
+
+    /**
+     * @type {number|undefined}
+     * @private
+     */
+    this.startX_;
+
+    /**
+     * @type {number|undefined}
+     * @private
+     */
+    this.startY_;
+
+    /**
+     * The calculated thumb size (border box plus margins).  Set when initSlider_
+     * is called.
+     * @type {import("../size.js").Size}
+     * @private
+     */
+    this.thumbSize_ = null;
+
+    /**
+     * Whether the slider is initialized.
+     * @type {boolean}
+     * @private
+     */
+    this.sliderInitialized_ = false;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.duration_ = options.duration !== undefined ? options.duration : 200;
+
+    const className =
+      options.className !== undefined ? options.className : 'ol-zoomslider';
+    const thumbElement = document.createElement('button');
+    thumbElement.setAttribute('type', 'button');
+    thumbElement.className = className + '-thumb ' + _css_js__WEBPACK_IMPORTED_MODULE_1__.CLASS_UNSELECTABLE;
+    const containerElement = this.element;
+    containerElement.className =
+      className + ' ' + _css_js__WEBPACK_IMPORTED_MODULE_1__.CLASS_UNSELECTABLE + ' ' + _css_js__WEBPACK_IMPORTED_MODULE_1__.CLASS_CONTROL;
+    containerElement.appendChild(thumbElement);
+
+    containerElement.addEventListener(
+      _pointer_EventType_js__WEBPACK_IMPORTED_MODULE_2__["default"].POINTERDOWN,
+      this.handleDraggerStart_.bind(this),
+      false,
+    );
+    containerElement.addEventListener(
+      _pointer_EventType_js__WEBPACK_IMPORTED_MODULE_2__["default"].POINTERMOVE,
+      this.handleDraggerDrag_.bind(this),
+      false,
+    );
+    containerElement.addEventListener(
+      _pointer_EventType_js__WEBPACK_IMPORTED_MODULE_2__["default"].POINTERUP,
+      this.handleDraggerEnd_.bind(this),
+      false,
+    );
+
+    containerElement.addEventListener(
+      _events_EventType_js__WEBPACK_IMPORTED_MODULE_3__["default"].CLICK,
+      this.handleContainerClick_.bind(this),
+      false,
+    );
+    thumbElement.addEventListener(_events_EventType_js__WEBPACK_IMPORTED_MODULE_3__["default"].CLICK, _events_Event_js__WEBPACK_IMPORTED_MODULE_4__.stopPropagation, false);
+  }
+
+  /**
+   * Remove the control from its current map and attach it to the new map.
+   * Pass `null` to just remove the control from the current map.
+   * Subclasses may set up event handlers to get notified about changes to
+   * the map here.
+   * @param {import("../Map.js").default|null} map Map.
+   * @api
+   * @override
+   */
+  setMap(map) {
+    super.setMap(map);
+    if (map) {
+      map.render();
+    }
+  }
+
+  /**
+   * Initializes the slider element. This will determine and set this controls
+   * direction_ and also constrain the dragging of the thumb to always be within
+   * the bounds of the container.
+   *
+   * @return {boolean} Initialization successful
+   * @private
+   */
+  initSlider_() {
+    const container = this.element;
+    let containerWidth = container.offsetWidth;
+    let containerHeight = container.offsetHeight;
+    if (containerWidth === 0 && containerHeight === 0) {
+      return (this.sliderInitialized_ = false);
+    }
+
+    const containerStyle = getComputedStyle(container);
+    containerWidth -=
+      parseFloat(containerStyle['paddingRight']) +
+      parseFloat(containerStyle['paddingLeft']);
+    containerHeight -=
+      parseFloat(containerStyle['paddingTop']) +
+      parseFloat(containerStyle['paddingBottom']);
+    const thumb = /** @type {HTMLElement} */ (container.firstElementChild);
+    const thumbStyle = getComputedStyle(thumb);
+    const thumbWidth =
+      thumb.offsetWidth +
+      parseFloat(thumbStyle['marginRight']) +
+      parseFloat(thumbStyle['marginLeft']);
+    const thumbHeight =
+      thumb.offsetHeight +
+      parseFloat(thumbStyle['marginTop']) +
+      parseFloat(thumbStyle['marginBottom']);
+    this.thumbSize_ = [thumbWidth, thumbHeight];
+
+    if (containerWidth > containerHeight) {
+      this.direction_ = Direction.HORIZONTAL;
+      this.widthLimit_ = containerWidth - thumbWidth;
+    } else {
+      this.direction_ = Direction.VERTICAL;
+      this.heightLimit_ = containerHeight - thumbHeight;
+    }
+    return (this.sliderInitialized_ = true);
+  }
+
+  /**
+   * @param {PointerEvent} event The browser event to handle.
+   * @private
+   */
+  handleContainerClick_(event) {
+    const view = this.getMap().getView();
+
+    const relativePosition = this.getRelativePosition_(
+      event.offsetX - this.thumbSize_[0] / 2,
+      event.offsetY - this.thumbSize_[1] / 2,
+    );
+
+    const resolution = this.getResolutionForPosition_(relativePosition);
+    const zoom = view.getConstrainedZoom(view.getZoomForResolution(resolution));
+
+    view.animateInternal({
+      zoom: zoom,
+      duration: this.duration_,
+      easing: _easing_js__WEBPACK_IMPORTED_MODULE_5__.easeOut,
+    });
+  }
+
+  /**
+   * Handle dragger start events.
+   * @param {PointerEvent} event The drag event.
+   * @private
+   */
+  handleDraggerStart_(event) {
+    if (!this.dragging_ && event.target === this.element.firstElementChild) {
+      const element = /** @type {HTMLElement} */ (
+        this.element.firstElementChild
+      );
+      this.getMap().getView().beginInteraction();
+      this.startX_ = event.clientX - parseFloat(element.style.left);
+      this.startY_ = event.clientY - parseFloat(element.style.top);
+      this.dragging_ = true;
+
+      if (this.dragListenerKeys_.length === 0) {
+        const drag = this.handleDraggerDrag_;
+        const end = this.handleDraggerEnd_;
+        const doc = this.getMap().getOwnerDocument();
+        this.dragListenerKeys_.push(
+          (0,_events_js__WEBPACK_IMPORTED_MODULE_6__.listen)(doc, _pointer_EventType_js__WEBPACK_IMPORTED_MODULE_2__["default"].POINTERMOVE, drag, this),
+          (0,_events_js__WEBPACK_IMPORTED_MODULE_6__.listen)(doc, _pointer_EventType_js__WEBPACK_IMPORTED_MODULE_2__["default"].POINTERUP, end, this),
+        );
+      }
+    }
+  }
+
+  /**
+   * Handle dragger drag events.
+   *
+   * @param {PointerEvent} event The drag event.
+   * @private
+   */
+  handleDraggerDrag_(event) {
+    if (this.dragging_) {
+      const deltaX = event.clientX - this.startX_;
+      const deltaY = event.clientY - this.startY_;
+      const relativePosition = this.getRelativePosition_(deltaX, deltaY);
+      this.currentResolution_ =
+        this.getResolutionForPosition_(relativePosition);
+      this.getMap().getView().setResolution(this.currentResolution_);
+    }
+  }
+
+  /**
+   * Handle dragger end events.
+   * @param {PointerEvent} event The drag event.
+   * @private
+   */
+  handleDraggerEnd_(event) {
+    if (this.dragging_) {
+      const view = this.getMap().getView();
+      view.endInteraction();
+
+      this.dragging_ = false;
+      this.startX_ = undefined;
+      this.startY_ = undefined;
+      this.dragListenerKeys_.forEach(_events_js__WEBPACK_IMPORTED_MODULE_6__.unlistenByKey);
+      this.dragListenerKeys_.length = 0;
+    }
+  }
+
+  /**
+   * Positions the thumb inside its container according to the given resolution.
+   *
+   * @param {number} res The res.
+   * @private
+   */
+  setThumbPosition_(res) {
+    const position = this.getPositionForResolution_(res);
+    const thumb = /** @type {HTMLElement} */ (this.element.firstElementChild);
+
+    if (this.direction_ == Direction.HORIZONTAL) {
+      thumb.style.left = this.widthLimit_ * position + 'px';
+    } else {
+      thumb.style.top = this.heightLimit_ * position + 'px';
+    }
+  }
+
+  /**
+   * Calculates the relative position of the thumb given x and y offsets.  The
+   * relative position scales from 0 to 1.  The x and y offsets are assumed to be
+   * in pixel units within the dragger limits.
+   *
+   * @param {number} x Pixel position relative to the left of the slider.
+   * @param {number} y Pixel position relative to the top of the slider.
+   * @return {number} The relative position of the thumb.
+   * @private
+   */
+  getRelativePosition_(x, y) {
+    let amount;
+    if (this.direction_ === Direction.HORIZONTAL) {
+      amount = x / this.widthLimit_;
+    } else {
+      amount = y / this.heightLimit_;
+    }
+    return (0,_math_js__WEBPACK_IMPORTED_MODULE_7__.clamp)(amount, 0, 1);
+  }
+
+  /**
+   * Calculates the corresponding resolution of the thumb given its relative
+   * position (where 0 is the minimum and 1 is the maximum).
+   *
+   * @param {number} position The relative position of the thumb.
+   * @return {number} The corresponding resolution.
+   * @private
+   */
+  getResolutionForPosition_(position) {
+    const fn = this.getMap().getView().getResolutionForValueFunction();
+    return fn(1 - position);
+  }
+
+  /**
+   * Determines the relative position of the slider for the given resolution.  A
+   * relative position of 0 corresponds to the minimum view resolution.  A
+   * relative position of 1 corresponds to the maximum view resolution.
+   *
+   * @param {number} res The resolution.
+   * @return {number} The relative position value (between 0 and 1).
+   * @private
+   */
+  getPositionForResolution_(res) {
+    const fn = this.getMap().getView().getValueForResolutionFunction();
+    return (0,_math_js__WEBPACK_IMPORTED_MODULE_7__.clamp)(1 - fn(res), 0, 1);
+  }
+
+  /**
+   * Update the zoomslider element.
+   * @param {import("../MapEvent.js").default} mapEvent Map event.
+   * @override
+   */
+  render(mapEvent) {
+    if (!mapEvent.frameState) {
+      return;
+    }
+    if (!this.sliderInitialized_ && !this.initSlider_()) {
+      return;
+    }
+    const res = mapEvent.frameState.viewState.resolution;
+    this.currentResolution_ = res;
+    this.setThumbPosition_(res);
+  }
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ZoomSlider);
+
+
+/***/ })
+
+}])
+//# sourceMappingURL=vendors-node_modules_ol_control_ZoomSlider_js.js.map

package/vendors-node_modules_ol_control_ZoomSlider_js.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendors-node_modules_ol_control_ZoomSlider_js.js","mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;;AAE4D;AACvB;AACc;AACJ;AACI;AAClB;AACsB;AACpB;;AAEnC;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,iDAAiD;AAC/D;AACA,cAAc,oBAAoB;AAClC;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB,mDAAO;AAChC;AACA,aAAa,SAAS;AACtB;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,qDAAqD,uDAAkB;AACvE;AACA;AACA,wBAAwB,uDAAkB,SAAS,kDAAa;AAChE;;AAEA;AACA,MAAM,yEAA4B;AAClC;AACA;AACA;AACA;AACA,MAAM,yEAA4B;AAClC;AACA;AACA;AACA;AACA,MAAM,uEAA0B;AAChC;AACA;AACA;;AAEA;AACA,MAAM,kEAAe;AACrB;AACA;AACA;AACA,kCAAkC,kEAAe,EAAE,6DAAe;AAClE;;AAEA;AACA;AACA;AACA;AACA;AACA,aAAa,kCAAkC;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,cAAc,SAAS;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;;AAEA;AACA,aAAa,cAAc;AAC3B;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,cAAc,+CAAO;AACrB,KAAK;AACL;;AAEA;AACA;AACA,aAAa,cAAc;AAC3B;AACA;AACA;AACA;AACA,iCAAiC,aAAa;AAC9C;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,UAAU,kDAAM,MAAM,yEAA4B;AAClD,UAAU,kDAAM,MAAM,uEAA0B;AAChD;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,cAAc;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,cAAc;AAC3B;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,qCAAqC,qDAAa;AAClD;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,6BAA6B,aAAa;;AAE1C;AACA;AACA,MAAM;AACN;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,WAAW,+CAAK;AAChB;;AAEA;AACA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA,WAAW,+CAAK;AAChB;;AAEA;AACA;AACA,aAAa,kCAAkC;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,iEAAe,UAAU,EAAC","sources":["webpack://@vaadin/bundles/./node_modules/ol/control/ZoomSlider.js"],"sourcesContent":["/**\n * @module ol/control/ZoomSlider\n */\n\nimport {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';\nimport {easeOut} from '../easing.js';\nimport {stopPropagation} from '../events/Event.js';\nimport EventType from '../events/EventType.js';\nimport {listen, unlistenByKey} from '../events.js';\nimport {clamp} from '../math.js';\nimport PointerEventType from '../pointer/EventType.js';\nimport Control from './Control.js';\n\n/**\n * The enum for available directions.\n *\n * @enum {number}\n */\nconst Direction = {\n  VERTICAL: 0,\n  HORIZONTAL: 1,\n};\n\n/**\n * @typedef {Object} Options\n * @property {string} [className='ol-zoomslider'] CSS class name.\n * @property {number} [duration=200] Animation duration in milliseconds.\n * @property {function(import(\"../MapEvent.js\").default):void} [render] Function called when the control\n * should be re-rendered. This is called in a `requestAnimationFrame` callback.\n * @property {HTMLElement|string} [target] Specify a target if you want the control to be\n * rendered outside of the map's viewport.\n */\n\n/**\n * @classdesc\n * A slider type of control for zooming.\n *\n * Example:\n *\n *     map.addControl(new ZoomSlider());\n *\n * @api\n */\nclass ZoomSlider extends Control {\n  /**\n   * @param {Options} [options] Zoom slider options.\n   */\n  constructor(options) {\n    options = options ? options : {};\n\n    super({\n      target: options.target,\n      element: document.createElement('div'),\n      render: options.render,\n    });\n\n    /**\n     * @type {!Array<import(\"../events.js\").EventsKey>}\n     * @private\n     */\n    this.dragListenerKeys_ = [];\n\n    /**\n     * Will hold the current resolution of the view.\n     *\n     * @type {number|undefined}\n     * @private\n     */\n    this.currentResolution_ = undefined;\n\n    /**\n     * The direction of the slider. Will be determined from actual display of the\n     * container and defaults to Direction.VERTICAL.\n     *\n     * @type {Direction}\n     * @private\n     */\n    this.direction_ = Direction.VERTICAL;\n\n    /**\n     * @type {boolean}\n     * @private\n     */\n    this.dragging_;\n\n    /**\n     * @type {number}\n     * @private\n     */\n    this.heightLimit_ = 0;\n\n    /**\n     * @type {number}\n     * @private\n     */\n    this.widthLimit_ = 0;\n\n    /**\n     * @type {number|undefined}\n     * @private\n     */\n    this.startX_;\n\n    /**\n     * @type {number|undefined}\n     * @private\n     */\n    this.startY_;\n\n    /**\n     * The calculated thumb size (border box plus margins).  Set when initSlider_\n     * is called.\n     * @type {import(\"../size.js\").Size}\n     * @private\n     */\n    this.thumbSize_ = null;\n\n    /**\n     * Whether the slider is initialized.\n     * @type {boolean}\n     * @private\n     */\n    this.sliderInitialized_ = false;\n\n    /**\n     * @type {number}\n     * @private\n     */\n    this.duration_ = options.duration !== undefined ? options.duration : 200;\n\n    const className =\n      options.className !== undefined ? options.className : 'ol-zoomslider';\n    const thumbElement = document.createElement('button');\n    thumbElement.setAttribute('type', 'button');\n    thumbElement.className = className + '-thumb ' + CLASS_UNSELECTABLE;\n    const containerElement = this.element;\n    containerElement.className =\n      className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;\n    containerElement.appendChild(thumbElement);\n\n    containerElement.addEventListener(\n      PointerEventType.POINTERDOWN,\n      this.handleDraggerStart_.bind(this),\n      false,\n    );\n    containerElement.addEventListener(\n      PointerEventType.POINTERMOVE,\n      this.handleDraggerDrag_.bind(this),\n      false,\n    );\n    containerElement.addEventListener(\n      PointerEventType.POINTERUP,\n      this.handleDraggerEnd_.bind(this),\n      false,\n    );\n\n    containerElement.addEventListener(\n      EventType.CLICK,\n      this.handleContainerClick_.bind(this),\n      false,\n    );\n    thumbElement.addEventListener(EventType.CLICK, stopPropagation, false);\n  }\n\n  /**\n   * Remove the control from its current map and attach it to the new map.\n   * Pass `null` to just remove the control from the current map.\n   * Subclasses may set up event handlers to get notified about changes to\n   * the map here.\n   * @param {import(\"../Map.js\").default|null} map Map.\n   * @api\n   * @override\n   */\n  setMap(map) {\n    super.setMap(map);\n    if (map) {\n      map.render();\n    }\n  }\n\n  /**\n   * Initializes the slider element. This will determine and set this controls\n   * direction_ and also constrain the dragging of the thumb to always be within\n   * the bounds of the container.\n   *\n   * @return {boolean} Initialization successful\n   * @private\n   */\n  initSlider_() {\n    const container = this.element;\n    let containerWidth = container.offsetWidth;\n    let containerHeight = container.offsetHeight;\n    if (containerWidth === 0 && containerHeight === 0) {\n      return (this.sliderInitialized_ = false);\n    }\n\n    const containerStyle = getComputedStyle(container);\n    containerWidth -=\n      parseFloat(containerStyle['paddingRight']) +\n      parseFloat(containerStyle['paddingLeft']);\n    containerHeight -=\n      parseFloat(containerStyle['paddingTop']) +\n      parseFloat(containerStyle['paddingBottom']);\n    const thumb = /** @type {HTMLElement} */ (container.firstElementChild);\n    const thumbStyle = getComputedStyle(thumb);\n    const thumbWidth =\n      thumb.offsetWidth +\n      parseFloat(thumbStyle['marginRight']) +\n      parseFloat(thumbStyle['marginLeft']);\n    const thumbHeight =\n      thumb.offsetHeight +\n      parseFloat(thumbStyle['marginTop']) +\n      parseFloat(thumbStyle['marginBottom']);\n    this.thumbSize_ = [thumbWidth, thumbHeight];\n\n    if (containerWidth > containerHeight) {\n      this.direction_ = Direction.HORIZONTAL;\n      this.widthLimit_ = containerWidth - thumbWidth;\n    } else {\n      this.direction_ = Direction.VERTICAL;\n      this.heightLimit_ = containerHeight - thumbHeight;\n    }\n    return (this.sliderInitialized_ = true);\n  }\n\n  /**\n   * @param {PointerEvent} event The browser event to handle.\n   * @private\n   */\n  handleContainerClick_(event) {\n    const view = this.getMap().getView();\n\n    const relativePosition = this.getRelativePosition_(\n      event.offsetX - this.thumbSize_[0] / 2,\n      event.offsetY - this.thumbSize_[1] / 2,\n    );\n\n    const resolution = this.getResolutionForPosition_(relativePosition);\n    const zoom = view.getConstrainedZoom(view.getZoomForResolution(resolution));\n\n    view.animateInternal({\n      zoom: zoom,\n      duration: this.duration_,\n      easing: easeOut,\n    });\n  }\n\n  /**\n   * Handle dragger start events.\n   * @param {PointerEvent} event The drag event.\n   * @private\n   */\n  handleDraggerStart_(event) {\n    if (!this.dragging_ && event.target === this.element.firstElementChild) {\n      const element = /** @type {HTMLElement} */ (\n        this.element.firstElementChild\n      );\n      this.getMap().getView().beginInteraction();\n      this.startX_ = event.clientX - parseFloat(element.style.left);\n      this.startY_ = event.clientY - parseFloat(element.style.top);\n      this.dragging_ = true;\n\n      if (this.dragListenerKeys_.length === 0) {\n        const drag = this.handleDraggerDrag_;\n        const end = this.handleDraggerEnd_;\n        const doc = this.getMap().getOwnerDocument();\n        this.dragListenerKeys_.push(\n          listen(doc, PointerEventType.POINTERMOVE, drag, this),\n          listen(doc, PointerEventType.POINTERUP, end, this),\n        );\n      }\n    }\n  }\n\n  /**\n   * Handle dragger drag events.\n   *\n   * @param {PointerEvent} event The drag event.\n   * @private\n   */\n  handleDraggerDrag_(event) {\n    if (this.dragging_) {\n      const deltaX = event.clientX - this.startX_;\n      const deltaY = event.clientY - this.startY_;\n      const relativePosition = this.getRelativePosition_(deltaX, deltaY);\n      this.currentResolution_ =\n        this.getResolutionForPosition_(relativePosition);\n      this.getMap().getView().setResolution(this.currentResolution_);\n    }\n  }\n\n  /**\n   * Handle dragger end events.\n   * @param {PointerEvent} event The drag event.\n   * @private\n   */\n  handleDraggerEnd_(event) {\n    if (this.dragging_) {\n      const view = this.getMap().getView();\n      view.endInteraction();\n\n      this.dragging_ = false;\n      this.startX_ = undefined;\n      this.startY_ = undefined;\n      this.dragListenerKeys_.forEach(unlistenByKey);\n      this.dragListenerKeys_.length = 0;\n    }\n  }\n\n  /**\n   * Positions the thumb inside its container according to the given resolution.\n   *\n   * @param {number} res The res.\n   * @private\n   */\n  setThumbPosition_(res) {\n    const position = this.getPositionForResolution_(res);\n    const thumb = /** @type {HTMLElement} */ (this.element.firstElementChild);\n\n    if (this.direction_ == Direction.HORIZONTAL) {\n      thumb.style.left = this.widthLimit_ * position + 'px';\n    } else {\n      thumb.style.top = this.heightLimit_ * position + 'px';\n    }\n  }\n\n  /**\n   * Calculates the relative position of the thumb given x and y offsets.  The\n   * relative position scales from 0 to 1.  The x and y offsets are assumed to be\n   * in pixel units within the dragger limits.\n   *\n   * @param {number} x Pixel position relative to the left of the slider.\n   * @param {number} y Pixel position relative to the top of the slider.\n   * @return {number} The relative position of the thumb.\n   * @private\n   */\n  getRelativePosition_(x, y) {\n    let amount;\n    if (this.direction_ === Direction.HORIZONTAL) {\n      amount = x / this.widthLimit_;\n    } else {\n      amount = y / this.heightLimit_;\n    }\n    return clamp(amount, 0, 1);\n  }\n\n  /**\n   * Calculates the corresponding resolution of the thumb given its relative\n   * position (where 0 is the minimum and 1 is the maximum).\n   *\n   * @param {number} position The relative position of the thumb.\n   * @return {number} The corresponding resolution.\n   * @private\n   */\n  getResolutionForPosition_(position) {\n    const fn = this.getMap().getView().getResolutionForValueFunction();\n    return fn(1 - position);\n  }\n\n  /**\n   * Determines the relative position of the slider for the given resolution.  A\n   * relative position of 0 corresponds to the minimum view resolution.  A\n   * relative position of 1 corresponds to the maximum view resolution.\n   *\n   * @param {number} res The resolution.\n   * @return {number} The relative position value (between 0 and 1).\n   * @private\n   */\n  getPositionForResolution_(res) {\n    const fn = this.getMap().getView().getValueForResolutionFunction();\n    return clamp(1 - fn(res), 0, 1);\n  }\n\n  /**\n   * Update the zoomslider element.\n   * @param {import(\"../MapEvent.js\").default} mapEvent Map event.\n   * @override\n   */\n  render(mapEvent) {\n    if (!mapEvent.frameState) {\n      return;\n    }\n    if (!this.sliderInitialized_ && !this.initSlider_()) {\n      return;\n    }\n    const res = mapEvent.frameState.viewState.resolution;\n    this.currentResolution_ = res;\n    this.setThumbPosition_(res);\n  }\n}\n\nexport default ZoomSlider;\n"],"names":[],"sourceRoot":""}