@vaadin/bundles 25.0.0-alpha3 → 25.0.0-alpha5

package/vendors-node_modules_ol_renderer_canvas_VectorLayer_js.js

@@ -0,0 +1,1044 @@
+(self["webpackChunk_vaadin_bundles"] = self["webpackChunk_vaadin_bundles"] || []).push([["vendors-node_modules_ol_renderer_canvas_VectorLayer_js"],{
+
+/***/ "./node_modules/ol/render/canvas/hitdetect.js":
+/*!****************************************************!*\
+  !*** ./node_modules/ol/render/canvas/hitdetect.js ***!
+  \****************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "HIT_DETECT_RESOLUTION": () => (/* binding */ HIT_DETECT_RESOLUTION),
+/* harmony export */   "createHitDetectionImageData": () => (/* binding */ createHitDetectionImageData),
+/* harmony export */   "hitDetect": () => (/* binding */ hitDetect)
+/* harmony export */ });
+/* harmony import */ var _array_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../array.js */ "./node_modules/ol/array.js");
+/* harmony import */ var _dom_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../dom.js */ "./node_modules/ol/dom.js");
+/* harmony import */ var _extent_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../extent.js */ "./node_modules/ol/extent.js");
+/* harmony import */ var _math_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../math.js */ "./node_modules/ol/math.js");
+/* harmony import */ var _proj_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../proj.js */ "./node_modules/ol/proj.js");
+/* harmony import */ var _style_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../style.js */ "./node_modules/ol/style/Icon.js");
+/* harmony import */ var _Immediate_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Immediate.js */ "./node_modules/ol/render/canvas/Immediate.js");
+/**
+ * @module ol/render/canvas/hitdetect
+ */
+
+
+
+
+
+
+
+
+
+const HIT_DETECT_RESOLUTION = 0.5;
+
+/**
+ * @param {import("../../size.js").Size} size Canvas size in css pixels.
+ * @param {Array<import("../../transform.js").Transform>} transforms Transforms
+ * for rendering features to all worlds of the viewport, from coordinates to css
+ * pixels.
+ * @param {Array<import("../../Feature.js").FeatureLike>} features
+ * Features to consider for hit detection.
+ * @param {import("../../style/Style.js").StyleFunction|undefined} styleFunction
+ * Layer style function.
+ * @param {import("../../extent.js").Extent} extent Extent in render projection.
+ * @param {number} resolution Resolution.
+ * @param {number} rotation Rotation.
+ * @param {number} [squaredTolerance] Squared tolerance.
+ * @param {import("../../proj/Projection.js").default} [projection] Render projection.
+ * @return {ImageData} Hit detection image data.
+ */
+function createHitDetectionImageData(
+  size,
+  transforms,
+  features,
+  styleFunction,
+  extent,
+  resolution,
+  rotation,
+  squaredTolerance,
+  projection,
+) {
+  const userExtent = projection ? (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.toUserExtent)(extent, projection) : extent;
+  const width = size[0] * HIT_DETECT_RESOLUTION;
+  const height = size[1] * HIT_DETECT_RESOLUTION;
+  const context = (0,_dom_js__WEBPACK_IMPORTED_MODULE_1__.createCanvasContext2D)(width, height);
+  context.imageSmoothingEnabled = false;
+  const canvas = context.canvas;
+  const renderer = new _Immediate_js__WEBPACK_IMPORTED_MODULE_2__["default"](
+    context,
+    HIT_DETECT_RESOLUTION,
+    extent,
+    null,
+    rotation,
+    squaredTolerance,
+    projection
+      ? (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.getTransformFromProjections)((0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.getUserProjection)(), projection)
+      : null,
+  );
+  const featureCount = features.length;
+  // Stretch hit detection index to use the whole available color range
+  const indexFactor = Math.floor((256 * 256 * 256 - 1) / featureCount);
+  const featuresByZIndex = {};
+  for (let i = 1; i <= featureCount; ++i) {
+    const feature = features[i - 1];
+    const featureStyleFunction = feature.getStyleFunction() || styleFunction;
+    if (!featureStyleFunction) {
+      continue;
+    }
+    let styles = featureStyleFunction(feature, resolution);
+    if (!styles) {
+      continue;
+    }
+    if (!Array.isArray(styles)) {
+      styles = [styles];
+    }
+    const index = i * indexFactor;
+    const color = index.toString(16).padStart(7, '#00000');
+    for (let j = 0, jj = styles.length; j < jj; ++j) {
+      const originalStyle = styles[j];
+      const geometry = originalStyle.getGeometryFunction()(feature);
+      if (!geometry || !(0,_extent_js__WEBPACK_IMPORTED_MODULE_3__.intersects)(userExtent, geometry.getExtent())) {
+        continue;
+      }
+      const style = originalStyle.clone();
+      const fill = style.getFill();
+      if (fill) {
+        fill.setColor(color);
+      }
+      const stroke = style.getStroke();
+      if (stroke) {
+        stroke.setColor(color);
+        stroke.setLineDash(null);
+      }
+      style.setText(undefined);
+      const image = originalStyle.getImage();
+      if (image) {
+        const imgSize = image.getImageSize();
+        if (!imgSize) {
+          continue;
+        }
+
+        const imgContext = (0,_dom_js__WEBPACK_IMPORTED_MODULE_1__.createCanvasContext2D)(
+          imgSize[0],
+          imgSize[1],
+          undefined,
+          {alpha: false},
+        );
+        const img = imgContext.canvas;
+        imgContext.fillStyle = color;
+        imgContext.fillRect(0, 0, img.width, img.height);
+        style.setImage(
+          new _style_js__WEBPACK_IMPORTED_MODULE_4__["default"]({
+            img: img,
+            anchor: image.getAnchor(),
+            anchorXUnits: 'pixels',
+            anchorYUnits: 'pixels',
+            offset: image.getOrigin(),
+            opacity: 1,
+            size: image.getSize(),
+            scale: image.getScale(),
+            rotation: image.getRotation(),
+            rotateWithView: image.getRotateWithView(),
+          }),
+        );
+      }
+      const zIndex = style.getZIndex() || 0;
+      let byGeometryType = featuresByZIndex[zIndex];
+      if (!byGeometryType) {
+        byGeometryType = {};
+        featuresByZIndex[zIndex] = byGeometryType;
+        byGeometryType['Polygon'] = [];
+        byGeometryType['Circle'] = [];
+        byGeometryType['LineString'] = [];
+        byGeometryType['Point'] = [];
+      }
+      const type = geometry.getType();
+      if (type === 'GeometryCollection') {
+        const geometries =
+          /** @type {import("../../geom/GeometryCollection.js").default} */ (
+            geometry
+          ).getGeometriesArrayRecursive();
+        for (let i = 0, ii = geometries.length; i < ii; ++i) {
+          const geometry = geometries[i];
+          byGeometryType[geometry.getType().replace('Multi', '')].push(
+            geometry,
+            style,
+          );
+        }
+      } else {
+        byGeometryType[type.replace('Multi', '')].push(geometry, style);
+      }
+    }
+  }
+
+  const zIndexKeys = Object.keys(featuresByZIndex).map(Number).sort(_array_js__WEBPACK_IMPORTED_MODULE_5__.ascending);
+  for (let i = 0, ii = zIndexKeys.length; i < ii; ++i) {
+    const byGeometryType = featuresByZIndex[zIndexKeys[i]];
+    for (const type in byGeometryType) {
+      const geomAndStyle = byGeometryType[type];
+      for (let j = 0, jj = geomAndStyle.length; j < jj; j += 2) {
+        renderer.setStyle(geomAndStyle[j + 1]);
+        for (let k = 0, kk = transforms.length; k < kk; ++k) {
+          renderer.setTransform(transforms[k]);
+          renderer.drawGeometry(geomAndStyle[j]);
+        }
+      }
+    }
+  }
+  return context.getImageData(0, 0, canvas.width, canvas.height);
+}
+
+/**
+ * @param {import("../../pixel").Pixel} pixel Pixel coordinate on the hit
+ * detection canvas in css pixels.
+ * @param {Array<F>} features Features. Has to
+ * match the `features` array that was passed to `createHitDetectionImageData()`.
+ * @param {ImageData} imageData Hit detection image data generated by
+ * `createHitDetectionImageData()`.
+ * @return {Array<F>} Features.
+ * @template {import("../../Feature.js").FeatureLike} F
+ */
+function hitDetect(pixel, features, imageData) {
+  /** @type {Array<F>} */
+  const resultFeatures = [];
+  if (imageData) {
+    const x = Math.floor(Math.round(pixel[0]) * HIT_DETECT_RESOLUTION);
+    const y = Math.floor(Math.round(pixel[1]) * HIT_DETECT_RESOLUTION);
+    // The pixel coordinate is clamped down to the hit-detect canvas' size to account
+    // for browsers returning coordinates slightly larger than the actual canvas size
+    // due to a non-integer pixel ratio.
+    const index =
+      ((0,_math_js__WEBPACK_IMPORTED_MODULE_6__.clamp)(x, 0, imageData.width - 1) +
+        (0,_math_js__WEBPACK_IMPORTED_MODULE_6__.clamp)(y, 0, imageData.height - 1) * imageData.width) *
+      4;
+    const r = imageData.data[index];
+    const g = imageData.data[index + 1];
+    const b = imageData.data[index + 2];
+    const i = b + 256 * (g + 256 * r);
+    const indexFactor = Math.floor((256 * 256 * 256 - 1) / features.length);
+    if (i && i % indexFactor === 0) {
+      resultFeatures.push(features[i / indexFactor - 1]);
+    }
+  }
+  return resultFeatures;
+}
+
+
+/***/ }),
+
+/***/ "./node_modules/ol/renderer/canvas/VectorLayer.js":
+/*!********************************************************!*\
+  !*** ./node_modules/ol/renderer/canvas/VectorLayer.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 _ViewHint_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../ViewHint.js */ "./node_modules/ol/ViewHint.js");
+/* harmony import */ var _array_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../array.js */ "./node_modules/ol/array.js");
+/* harmony import */ var _coordinate_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../coordinate.js */ "./node_modules/ol/coordinate.js");
+/* harmony import */ var _dom_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../dom.js */ "./node_modules/ol/dom.js");
+/* harmony import */ var _extent_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../extent.js */ "./node_modules/ol/extent.js");
+/* harmony import */ var _proj_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../proj.js */ "./node_modules/ol/proj.js");
+/* harmony import */ var _render_EventType_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../render/EventType.js */ "./node_modules/ol/render/EventType.js");
+/* harmony import */ var _render_canvas_BuilderGroup_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../render/canvas/BuilderGroup.js */ "./node_modules/ol/render/canvas/BuilderGroup.js");
+/* harmony import */ var _render_canvas_ExecutorGroup_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../render/canvas/ExecutorGroup.js */ "./node_modules/ol/render/canvas/ExecutorGroup.js");
+/* harmony import */ var _render_canvas_hitdetect_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../render/canvas/hitdetect.js */ "./node_modules/ol/render/canvas/hitdetect.js");
+/* harmony import */ var _util_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../util.js */ "./node_modules/ol/util.js");
+/* harmony import */ var _vector_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../vector.js */ "./node_modules/ol/renderer/vector.js");
+/* harmony import */ var _Layer_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Layer.js */ "./node_modules/ol/renderer/canvas/Layer.js");
+/**
+ * @module ol/renderer/canvas/VectorLayer
+ */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * @classdesc
+ * Canvas renderer for vector layers.
+ * @api
+ */
+class CanvasVectorLayerRenderer extends _Layer_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+  /**
+   * @param {import("../../layer/BaseVector.js").default} vectorLayer Vector layer.
+   */
+  constructor(vectorLayer) {
+    super(vectorLayer);
+
+    /** @private */
+    this.boundHandleStyleImageChange_ = this.handleStyleImageChange_.bind(this);
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.animatingOrInteracting_;
+
+    /**
+     * @private
+     * @type {ImageData|null}
+     */
+    this.hitDetectionImageData_ = null;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.clipped_ = false;
+
+    /**
+     * @private
+     * @type {Array<import("../../Feature.js").default>}
+     */
+    this.renderedFeatures_ = null;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.renderedRevision_ = -1;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.renderedResolution_ = NaN;
+
+    /**
+     * @private
+     * @type {import("../../extent.js").Extent}
+     */
+    this.renderedExtent_ = (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.createEmpty)();
+
+    /**
+     * @private
+     * @type {import("../../extent.js").Extent}
+     */
+    this.wrappedRenderedExtent_ = (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.createEmpty)();
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.renderedRotation_;
+
+    /**
+     * @private
+     * @type {import("../../coordinate").Coordinate}
+     */
+    this.renderedCenter_ = null;
+
+    /**
+     * @private
+     * @type {import("../../proj/Projection").default}
+     */
+    this.renderedProjection_ = null;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.renderedPixelRatio_ = 1;
+
+    /**
+     * @private
+     * @type {import("../../render.js").OrderFunction|null}
+     */
+    this.renderedRenderOrder_ = null;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.renderedFrameDeclutter_;
+
+    /**
+     * @private
+     * @type {import("../../render/canvas/ExecutorGroup").default}
+     */
+    this.replayGroup_ = null;
+
+    /**
+     * A new replay group had to be created by `prepareFrame()`
+     * @type {boolean}
+     */
+    this.replayGroupChanged = true;
+
+    /**
+     * Clipping to be performed by `renderFrame()`
+     * @type {boolean}
+     */
+    this.clipping = true;
+
+    /**
+     * @private
+     * @type {CanvasRenderingContext2D}
+     */
+    this.targetContext_ = null;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.opacity_ = 1;
+  }
+
+  /**
+   * @param {ExecutorGroup} executorGroup Executor group.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @param {boolean} [declutterable] `true` to only render declutterable items,
+   *     `false` to only render non-declutterable items, `undefined` to render all.
+   */
+  renderWorlds(executorGroup, frameState, declutterable) {
+    const extent = frameState.extent;
+    const viewState = frameState.viewState;
+    const center = viewState.center;
+    const resolution = viewState.resolution;
+    const projection = viewState.projection;
+    const rotation = viewState.rotation;
+    const projectionExtent = projection.getExtent();
+    const vectorSource = this.getLayer().getSource();
+    const declutter = this.getLayer().getDeclutter();
+    const pixelRatio = frameState.pixelRatio;
+    const viewHints = frameState.viewHints;
+    const snapToPixel = !(
+      viewHints[_ViewHint_js__WEBPACK_IMPORTED_MODULE_3__["default"].ANIMATING] || viewHints[_ViewHint_js__WEBPACK_IMPORTED_MODULE_3__["default"].INTERACTING]
+    );
+    const context = this.context;
+    const width = Math.round(((0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.getWidth)(extent) / resolution) * pixelRatio);
+    const height = Math.round(((0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.getHeight)(extent) / resolution) * pixelRatio);
+
+    const multiWorld = vectorSource.getWrapX() && projection.canWrapX();
+    const worldWidth = multiWorld ? (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.getWidth)(projectionExtent) : null;
+    const endWorld = multiWorld
+      ? Math.ceil((extent[2] - projectionExtent[2]) / worldWidth) + 1
+      : 1;
+    let world = multiWorld
+      ? Math.floor((extent[0] - projectionExtent[0]) / worldWidth)
+      : 0;
+    do {
+      let transform = this.getRenderTransform(
+        center,
+        resolution,
+        0,
+        pixelRatio,
+        width,
+        height,
+        world * worldWidth,
+      );
+      if (frameState.declutter) {
+        transform = transform.slice(0);
+      }
+      executorGroup.execute(
+        context,
+        [context.canvas.width, context.canvas.height],
+        transform,
+        rotation,
+        snapToPixel,
+        declutterable === undefined
+          ? _render_canvas_ExecutorGroup_js__WEBPACK_IMPORTED_MODULE_4__.ALL
+          : declutterable
+            ? _render_canvas_ExecutorGroup_js__WEBPACK_IMPORTED_MODULE_4__.DECLUTTER
+            : _render_canvas_ExecutorGroup_js__WEBPACK_IMPORTED_MODULE_4__.NON_DECLUTTER,
+        declutterable
+          ? declutter && frameState.declutter[declutter]
+          : undefined,
+      );
+    } while (++world < endWorld);
+  }
+
+  /**
+   * @private
+   */
+  setDrawContext_() {
+    if (this.opacity_ !== 1) {
+      this.targetContext_ = this.context;
+      this.context = (0,_dom_js__WEBPACK_IMPORTED_MODULE_5__.createCanvasContext2D)(
+        this.context.canvas.width,
+        this.context.canvas.height,
+        _Layer_js__WEBPACK_IMPORTED_MODULE_1__.canvasPool,
+      );
+    }
+  }
+
+  /**
+   * @private
+   */
+  resetDrawContext_() {
+    if (this.opacity_ !== 1 && this.targetContext_) {
+      const alpha = this.targetContext_.globalAlpha;
+      this.targetContext_.globalAlpha = this.opacity_;
+      this.targetContext_.drawImage(this.context.canvas, 0, 0);
+      this.targetContext_.globalAlpha = alpha;
+      (0,_dom_js__WEBPACK_IMPORTED_MODULE_5__.releaseCanvas)(this.context);
+      _Layer_js__WEBPACK_IMPORTED_MODULE_1__.canvasPool.push(this.context.canvas);
+      this.context = this.targetContext_;
+      this.targetContext_ = null;
+    }
+  }
+
+  /**
+   * Render declutter items for this layer
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   */
+  renderDeclutter(frameState) {
+    if (!this.replayGroup_ || !this.getLayer().getDeclutter()) {
+      return;
+    }
+    this.renderWorlds(this.replayGroup_, frameState, true);
+  }
+
+  /**
+   * Render deferred instructions.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @override
+   */
+  renderDeferredInternal(frameState) {
+    if (!this.replayGroup_) {
+      return;
+    }
+    this.replayGroup_.renderDeferred();
+    if (this.clipped_) {
+      this.context.restore();
+    }
+    this.resetDrawContext_();
+  }
+
+  /**
+   * Render the layer.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @param {HTMLElement|null} target Target that may be used to render content to.
+   * @return {HTMLElement} The rendered element.
+   * @override
+   */
+  renderFrame(frameState, target) {
+    const layerState = frameState.layerStatesArray[frameState.layerIndex];
+    this.opacity_ = layerState.opacity;
+    const viewState = frameState.viewState;
+
+    this.prepareContainer(frameState, target);
+    const context = this.context;
+
+    const replayGroup = this.replayGroup_;
+    let render = replayGroup && !replayGroup.isEmpty();
+    if (!render) {
+      const hasRenderListeners =
+        this.getLayer().hasListener(_render_EventType_js__WEBPACK_IMPORTED_MODULE_6__["default"].PRERENDER) ||
+        this.getLayer().hasListener(_render_EventType_js__WEBPACK_IMPORTED_MODULE_6__["default"].POSTRENDER);
+      if (!hasRenderListeners) {
+        return this.container;
+      }
+    }
+
+    this.setDrawContext_();
+
+    this.preRender(context, frameState);
+
+    const projection = viewState.projection;
+
+    // clipped rendering if layer extent is set
+    this.clipped_ = false;
+    if (render && layerState.extent && this.clipping) {
+      const layerExtent = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserExtent)(layerState.extent, projection);
+      render = (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.intersects)(layerExtent, frameState.extent);
+      this.clipped_ = render && !(0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.containsExtent)(layerExtent, frameState.extent);
+      if (this.clipped_) {
+        this.clipUnrotated(context, frameState, layerExtent);
+      }
+    }
+
+    if (render) {
+      this.renderWorlds(
+        replayGroup,
+        frameState,
+        this.getLayer().getDeclutter() ? false : undefined,
+      );
+    }
+
+    if (!frameState.declutter && this.clipped_) {
+      context.restore();
+    }
+
+    this.postRender(context, frameState);
+
+    if (this.renderedRotation_ !== viewState.rotation) {
+      this.renderedRotation_ = viewState.rotation;
+      this.hitDetectionImageData_ = null;
+    }
+    if (!frameState.declutter) {
+      this.resetDrawContext_();
+    }
+    return this.container;
+  }
+
+  /**
+   * Asynchronous layer level hit detection.
+   * @param {import("../../pixel.js").Pixel} pixel Pixel.
+   * @return {Promise<Array<import("../../Feature").default>>} Promise
+   * that resolves with an array of features.
+   * @override
+   */
+  getFeatures(pixel) {
+    return new Promise((resolve) => {
+      if (
+        this.frameState &&
+        !this.hitDetectionImageData_ &&
+        !this.animatingOrInteracting_
+      ) {
+        const size = this.frameState.size.slice();
+        const center = this.renderedCenter_;
+        const resolution = this.renderedResolution_;
+        const rotation = this.renderedRotation_;
+        const projection = this.renderedProjection_;
+        const extent = this.wrappedRenderedExtent_;
+        const layer = this.getLayer();
+        const transforms = [];
+        const width = size[0] * _render_canvas_hitdetect_js__WEBPACK_IMPORTED_MODULE_7__.HIT_DETECT_RESOLUTION;
+        const height = size[1] * _render_canvas_hitdetect_js__WEBPACK_IMPORTED_MODULE_7__.HIT_DETECT_RESOLUTION;
+        transforms.push(
+          this.getRenderTransform(
+            center,
+            resolution,
+            rotation,
+            _render_canvas_hitdetect_js__WEBPACK_IMPORTED_MODULE_7__.HIT_DETECT_RESOLUTION,
+            width,
+            height,
+            0,
+          ).slice(),
+        );
+        const source = layer.getSource();
+        const projectionExtent = projection.getExtent();
+        if (
+          source.getWrapX() &&
+          projection.canWrapX() &&
+          !(0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.containsExtent)(projectionExtent, extent)
+        ) {
+          let startX = extent[0];
+          const worldWidth = (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.getWidth)(projectionExtent);
+          let world = 0;
+          let offsetX;
+          while (startX < projectionExtent[0]) {
+            --world;
+            offsetX = worldWidth * world;
+            transforms.push(
+              this.getRenderTransform(
+                center,
+                resolution,
+                rotation,
+                _render_canvas_hitdetect_js__WEBPACK_IMPORTED_MODULE_7__.HIT_DETECT_RESOLUTION,
+                width,
+                height,
+                offsetX,
+              ).slice(),
+            );
+            startX += worldWidth;
+          }
+          world = 0;
+          startX = extent[2];
+          while (startX > projectionExtent[2]) {
+            ++world;
+            offsetX = worldWidth * world;
+            transforms.push(
+              this.getRenderTransform(
+                center,
+                resolution,
+                rotation,
+                _render_canvas_hitdetect_js__WEBPACK_IMPORTED_MODULE_7__.HIT_DETECT_RESOLUTION,
+                width,
+                height,
+                offsetX,
+              ).slice(),
+            );
+            startX -= worldWidth;
+          }
+        }
+        const userProjection = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.getUserProjection)();
+        this.hitDetectionImageData_ = (0,_render_canvas_hitdetect_js__WEBPACK_IMPORTED_MODULE_7__.createHitDetectionImageData)(
+          size,
+          transforms,
+          this.renderedFeatures_,
+          layer.getStyleFunction(),
+          extent,
+          resolution,
+          rotation,
+          (0,_vector_js__WEBPACK_IMPORTED_MODULE_8__.getSquaredTolerance)(resolution, this.renderedPixelRatio_),
+          userProjection ? projection : null,
+        );
+      }
+      resolve(
+        (0,_render_canvas_hitdetect_js__WEBPACK_IMPORTED_MODULE_7__.hitDetect)(pixel, this.renderedFeatures_, this.hitDetectionImageData_),
+      );
+    });
+  }
+
+  /**
+   * @param {import("../../coordinate.js").Coordinate} coordinate Coordinate.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @param {number} hitTolerance Hit tolerance in pixels.
+   * @param {import("../vector.js").FeatureCallback<T>} callback Feature callback.
+   * @param {Array<import("../Map.js").HitMatch<T>>} matches The hit detected matches with tolerance.
+   * @return {T|undefined} Callback result.
+   * @template T
+   * @override
+   */
+  forEachFeatureAtCoordinate(
+    coordinate,
+    frameState,
+    hitTolerance,
+    callback,
+    matches,
+  ) {
+    if (!this.replayGroup_) {
+      return undefined;
+    }
+    const resolution = frameState.viewState.resolution;
+    const rotation = frameState.viewState.rotation;
+    const layer = this.getLayer();
+
+    /** @type {!Object<string, import("../Map.js").HitMatch<T>|true>} */
+    const features = {};
+
+    /**
+     * @param {import("../../Feature.js").FeatureLike} feature Feature.
+     * @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry.
+     * @param {number} distanceSq The squared distance to the click position
+     * @return {T|undefined} Callback result.
+     */
+    const featureCallback = function (feature, geometry, distanceSq) {
+      const key = (0,_util_js__WEBPACK_IMPORTED_MODULE_9__.getUid)(feature);
+      const match = features[key];
+      if (!match) {
+        if (distanceSq === 0) {
+          features[key] = true;
+          return callback(feature, layer, geometry);
+        }
+        matches.push(
+          (features[key] = {
+            feature: feature,
+            layer: layer,
+            geometry: geometry,
+            distanceSq: distanceSq,
+            callback: callback,
+          }),
+        );
+      } else if (match !== true && distanceSq < match.distanceSq) {
+        if (distanceSq === 0) {
+          features[key] = true;
+          matches.splice(matches.lastIndexOf(match), 1);
+          return callback(feature, layer, geometry);
+        }
+        match.geometry = geometry;
+        match.distanceSq = distanceSq;
+      }
+      return undefined;
+    };
+
+    const declutter = this.getLayer().getDeclutter();
+    return this.replayGroup_.forEachFeatureAtCoordinate(
+      coordinate,
+      resolution,
+      rotation,
+      hitTolerance,
+      featureCallback,
+      declutter
+        ? frameState.declutter?.[declutter]?.all().map((item) => item.value)
+        : null,
+    );
+  }
+
+  /**
+   * Perform action necessary to get the layer rendered after new fonts have loaded
+   * @override
+   */
+  handleFontsChanged() {
+    const layer = this.getLayer();
+    if (layer.getVisible() && this.replayGroup_) {
+      layer.changed();
+    }
+  }
+
+  /**
+   * Handle changes in image style state.
+   * @param {import("../../events/Event.js").default} event Image style change event.
+   * @private
+   */
+  handleStyleImageChange_(event) {
+    this.renderIfReadyAndVisible();
+  }
+
+  /**
+   * Determine whether render should be called.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @return {boolean} Layer is ready to be rendered.
+   * @override
+   */
+  prepareFrame(frameState) {
+    const vectorLayer = this.getLayer();
+    const vectorSource = vectorLayer.getSource();
+    if (!vectorSource) {
+      return false;
+    }
+
+    const animating = frameState.viewHints[_ViewHint_js__WEBPACK_IMPORTED_MODULE_3__["default"].ANIMATING];
+    const interacting = frameState.viewHints[_ViewHint_js__WEBPACK_IMPORTED_MODULE_3__["default"].INTERACTING];
+    const updateWhileAnimating = vectorLayer.getUpdateWhileAnimating();
+    const updateWhileInteracting = vectorLayer.getUpdateWhileInteracting();
+
+    if (
+      (this.ready && !updateWhileAnimating && animating) ||
+      (!updateWhileInteracting && interacting)
+    ) {
+      this.animatingOrInteracting_ = true;
+      return true;
+    }
+    this.animatingOrInteracting_ = false;
+
+    const frameStateExtent = frameState.extent;
+    const viewState = frameState.viewState;
+    const projection = viewState.projection;
+    const resolution = viewState.resolution;
+    const pixelRatio = frameState.pixelRatio;
+    const vectorLayerRevision = vectorLayer.getRevision();
+    const vectorLayerRenderBuffer = vectorLayer.getRenderBuffer();
+    let vectorLayerRenderOrder = vectorLayer.getRenderOrder();
+
+    if (vectorLayerRenderOrder === undefined) {
+      vectorLayerRenderOrder = _vector_js__WEBPACK_IMPORTED_MODULE_8__.defaultOrder;
+    }
+
+    const center = viewState.center.slice();
+    const extent = (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.buffer)(
+      frameStateExtent,
+      vectorLayerRenderBuffer * resolution,
+    );
+    const renderedExtent = extent.slice();
+    const loadExtents = [extent.slice()];
+    const projectionExtent = projection.getExtent();
+
+    if (
+      vectorSource.getWrapX() &&
+      projection.canWrapX() &&
+      !(0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.containsExtent)(projectionExtent, frameState.extent)
+    ) {
+      // For the replay group, we need an extent that intersects the real world
+      // (-180° to +180°). To support geometries in a coordinate range from -540°
+      // to +540°, we add at least 1 world width on each side of the projection
+      // extent. If the viewport is wider than the world, we need to add half of
+      // the viewport width to make sure we cover the whole viewport.
+      const worldWidth = (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.getWidth)(projectionExtent);
+      const gutter = Math.max((0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.getWidth)(extent) / 2, worldWidth);
+      extent[0] = projectionExtent[0] - gutter;
+      extent[2] = projectionExtent[2] + gutter;
+      (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_10__.wrapX)(center, projection);
+      const loadExtent = (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.wrapX)(loadExtents[0], projection);
+      // If the extent crosses the date line, we load data for both edges of the worlds
+      if (
+        loadExtent[0] < projectionExtent[0] &&
+        loadExtent[2] < projectionExtent[2]
+      ) {
+        loadExtents.push([
+          loadExtent[0] + worldWidth,
+          loadExtent[1],
+          loadExtent[2] + worldWidth,
+          loadExtent[3],
+        ]);
+      } else if (
+        loadExtent[0] > projectionExtent[0] &&
+        loadExtent[2] > projectionExtent[2]
+      ) {
+        loadExtents.push([
+          loadExtent[0] - worldWidth,
+          loadExtent[1],
+          loadExtent[2] - worldWidth,
+          loadExtent[3],
+        ]);
+      }
+    }
+
+    if (
+      this.ready &&
+      this.renderedResolution_ == resolution &&
+      this.renderedRevision_ == vectorLayerRevision &&
+      this.renderedRenderOrder_ == vectorLayerRenderOrder &&
+      this.renderedFrameDeclutter_ === !!frameState.declutter &&
+      (0,_extent_js__WEBPACK_IMPORTED_MODULE_2__.containsExtent)(this.wrappedRenderedExtent_, extent)
+    ) {
+      if (!(0,_array_js__WEBPACK_IMPORTED_MODULE_11__.equals)(this.renderedExtent_, renderedExtent)) {
+        this.hitDetectionImageData_ = null;
+        this.renderedExtent_ = renderedExtent;
+      }
+      this.renderedCenter_ = center;
+      this.replayGroupChanged = false;
+      return true;
+    }
+
+    this.replayGroup_ = null;
+
+    const replayGroup = new _render_canvas_BuilderGroup_js__WEBPACK_IMPORTED_MODULE_12__["default"](
+      (0,_vector_js__WEBPACK_IMPORTED_MODULE_8__.getTolerance)(resolution, pixelRatio),
+      extent,
+      resolution,
+      pixelRatio,
+    );
+
+    const userProjection = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.getUserProjection)();
+    let userTransform;
+    if (userProjection) {
+      for (let i = 0, ii = loadExtents.length; i < ii; ++i) {
+        const extent = loadExtents[i];
+        const userExtent = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.toUserExtent)(extent, projection);
+        vectorSource.loadFeatures(
+          userExtent,
+          (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.toUserResolution)(resolution, projection),
+          userProjection,
+        );
+      }
+      userTransform = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.getTransformFromProjections)(userProjection, projection);
+    } else {
+      for (let i = 0, ii = loadExtents.length; i < ii; ++i) {
+        vectorSource.loadFeatures(loadExtents[i], resolution, projection);
+      }
+    }
+
+    const squaredTolerance = (0,_vector_js__WEBPACK_IMPORTED_MODULE_8__.getSquaredTolerance)(resolution, pixelRatio);
+    let ready = true;
+    const render =
+      /**
+       * @param {import("../../Feature.js").default} feature Feature.
+       * @param {number} index Index.
+       */
+      (feature, index) => {
+        let styles;
+        const styleFunction =
+          feature.getStyleFunction() || vectorLayer.getStyleFunction();
+        if (styleFunction) {
+          styles = styleFunction(feature, resolution);
+        }
+        if (styles) {
+          const dirty = this.renderFeature(
+            feature,
+            squaredTolerance,
+            styles,
+            replayGroup,
+            userTransform,
+            this.getLayer().getDeclutter(),
+            index,
+          );
+          ready = ready && !dirty;
+        }
+      };
+
+    const userExtent = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.toUserExtent)(extent, projection);
+    /** @type {Array<import("../../Feature.js").default>} */
+    const features = vectorSource.getFeaturesInExtent(userExtent);
+    if (vectorLayerRenderOrder) {
+      features.sort(vectorLayerRenderOrder);
+    }
+    for (let i = 0, ii = features.length; i < ii; ++i) {
+      render(features[i], i);
+    }
+    this.renderedFeatures_ = features;
+    this.ready = ready;
+
+    const replayGroupInstructions = replayGroup.finish();
+    const executorGroup = new _render_canvas_ExecutorGroup_js__WEBPACK_IMPORTED_MODULE_4__["default"](
+      extent,
+      resolution,
+      pixelRatio,
+      vectorSource.getOverlaps(),
+      replayGroupInstructions,
+      vectorLayer.getRenderBuffer(),
+      !!frameState.declutter,
+    );
+
+    this.renderedResolution_ = resolution;
+    this.renderedRevision_ = vectorLayerRevision;
+    this.renderedRenderOrder_ = vectorLayerRenderOrder;
+    this.renderedFrameDeclutter_ = !!frameState.declutter;
+    this.renderedExtent_ = renderedExtent;
+    this.wrappedRenderedExtent_ = extent;
+    this.renderedCenter_ = center;
+    this.renderedProjection_ = projection;
+    this.renderedPixelRatio_ = pixelRatio;
+    this.replayGroup_ = executorGroup;
+    this.hitDetectionImageData_ = null;
+
+    this.replayGroupChanged = true;
+    return true;
+  }
+
+  /**
+   * @param {import("../../Feature.js").default} feature Feature.
+   * @param {number} squaredTolerance Squared render tolerance.
+   * @param {import("../../style/Style.js").default|Array<import("../../style/Style.js").default>} styles The style or array of styles.
+   * @param {import("../../render/canvas/BuilderGroup.js").default} builderGroup Builder group.
+   * @param {import("../../proj.js").TransformFunction} [transform] Transform from user to view projection.
+   * @param {boolean} [declutter] Enable decluttering.
+   * @param {number} [index] Render order index.
+   * @return {boolean} `true` if an image is loading.
+   */
+  renderFeature(
+    feature,
+    squaredTolerance,
+    styles,
+    builderGroup,
+    transform,
+    declutter,
+    index,
+  ) {
+    if (!styles) {
+      return false;
+    }
+    let loading = false;
+    if (Array.isArray(styles)) {
+      for (let i = 0, ii = styles.length; i < ii; ++i) {
+        loading =
+          (0,_vector_js__WEBPACK_IMPORTED_MODULE_8__.renderFeature)(
+            builderGroup,
+            feature,
+            styles[i],
+            squaredTolerance,
+            this.boundHandleStyleImageChange_,
+            transform,
+            declutter,
+            index,
+          ) || loading;
+      }
+    } else {
+      loading = (0,_vector_js__WEBPACK_IMPORTED_MODULE_8__.renderFeature)(
+        builderGroup,
+        feature,
+        styles,
+        squaredTolerance,
+        this.boundHandleStyleImageChange_,
+        transform,
+        declutter,
+        index,
+      );
+    }
+    return loading;
+  }
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CanvasVectorLayerRenderer);
+
+
+/***/ })
+
+}])
+//# sourceMappingURL=vendors-node_modules_ol_renderer_canvas_VectorLayer_js.js.map