@vaadin/bundles 25.0.0-alpha3 → 25.0.0-alpha5

package/vendors-node_modules_ol_renderer_canvas_Layer_js.js

@@ -0,0 +1,654 @@
+(self["webpackChunk_vaadin_bundles"] = self["webpackChunk_vaadin_bundles"] || []).push([["vendors-node_modules_ol_renderer_canvas_Layer_js"],{
+
+/***/ "./node_modules/ol/renderer/Layer.js":
+/*!*******************************************!*\
+  !*** ./node_modules/ol/renderer/Layer.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 _ImageState_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../ImageState.js */ "./node_modules/ol/ImageState.js");
+/* harmony import */ var _Observable_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Observable.js */ "./node_modules/ol/Observable.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 _util_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../util.js */ "./node_modules/ol/util.js");
+/**
+ * @module ol/renderer/Layer
+ */
+
+
+
+
+
+const maxStaleKeys = 5;
+
+/**
+ * @template {import("../layer/Layer.js").default} LayerType
+ */
+class LayerRenderer extends _Observable_js__WEBPACK_IMPORTED_MODULE_0__["default"] {
+  /**
+   * @param {LayerType} layer Layer.
+   */
+  constructor(layer) {
+    super();
+
+    /**
+     * The renderer is initialized and ready to render.
+     * @type {boolean}
+     */
+    this.ready = true;
+
+    /** @private */
+    this.boundHandleImageChange_ = this.handleImageChange_.bind(this);
+
+    /**
+     * @private
+     * @type {LayerType}
+     */
+    this.layer_ = layer;
+
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    this.staleKeys_ = new Array();
+
+    /**
+     * @type {number}
+     * @protected
+     */
+    this.maxStaleKeys = maxStaleKeys;
+  }
+
+  /**
+   * @return {Array<string>} Get the list of stale keys.
+   */
+  getStaleKeys() {
+    return this.staleKeys_;
+  }
+
+  /**
+   * @param {string} key The new stale key.
+   */
+  prependStaleKey(key) {
+    this.staleKeys_.unshift(key);
+    if (this.staleKeys_.length > this.maxStaleKeys) {
+      this.staleKeys_.length = this.maxStaleKeys;
+    }
+  }
+
+  /**
+   * Asynchronous layer level hit detection.
+   * @param {import("../pixel.js").Pixel} pixel Pixel.
+   * @return {Promise<Array<import("../Feature").FeatureLike>>} Promise that resolves with
+   * an array of features.
+   */
+  getFeatures(pixel) {
+    return (0,_util_js__WEBPACK_IMPORTED_MODULE_1__.abstract)();
+  }
+
+  /**
+   * @param {import("../pixel.js").Pixel} pixel Pixel.
+   * @return {Uint8ClampedArray|Uint8Array|Float32Array|DataView|null} Pixel data.
+   */
+  getData(pixel) {
+    return null;
+  }
+
+  /**
+   * Determine whether render should be called.
+   * @abstract
+   * @param {import("../Map.js").FrameState} frameState Frame state.
+   * @return {boolean} Layer is ready to be rendered.
+   */
+  prepareFrame(frameState) {
+    return (0,_util_js__WEBPACK_IMPORTED_MODULE_1__.abstract)();
+  }
+
+  /**
+   * Render the layer.
+   * @abstract
+   * @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.
+   */
+  renderFrame(frameState, target) {
+    return (0,_util_js__WEBPACK_IMPORTED_MODULE_1__.abstract)();
+  }
+
+  /**
+   * @abstract
+   * @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
+   */
+  forEachFeatureAtCoordinate(
+    coordinate,
+    frameState,
+    hitTolerance,
+    callback,
+    matches,
+  ) {
+    return undefined;
+  }
+
+  /**
+   * @return {LayerType} Layer.
+   */
+  getLayer() {
+    return this.layer_;
+  }
+
+  /**
+   * Perform action necessary to get the layer rendered after new fonts have loaded
+   * @abstract
+   */
+  handleFontsChanged() {}
+
+  /**
+   * Handle changes in image state.
+   * @param {import("../events/Event.js").default} event Image change event.
+   * @private
+   */
+  handleImageChange_(event) {
+    const image = /** @type {import("../Image.js").default} */ (event.target);
+    if (
+      image.getState() === _ImageState_js__WEBPACK_IMPORTED_MODULE_2__["default"].LOADED ||
+      image.getState() === _ImageState_js__WEBPACK_IMPORTED_MODULE_2__["default"].ERROR
+    ) {
+      this.renderIfReadyAndVisible();
+    }
+  }
+
+  /**
+   * Load the image if not already loaded, and register the image change
+   * listener if needed.
+   * @param {import("../Image.js").default} image Image.
+   * @return {boolean} `true` if the image is already loaded, `false` otherwise.
+   * @protected
+   */
+  loadImage(image) {
+    let imageState = image.getState();
+    if (imageState != _ImageState_js__WEBPACK_IMPORTED_MODULE_2__["default"].LOADED && imageState != _ImageState_js__WEBPACK_IMPORTED_MODULE_2__["default"].ERROR) {
+      image.addEventListener(_events_EventType_js__WEBPACK_IMPORTED_MODULE_3__["default"].CHANGE, this.boundHandleImageChange_);
+    }
+    if (imageState == _ImageState_js__WEBPACK_IMPORTED_MODULE_2__["default"].IDLE) {
+      image.load();
+      imageState = image.getState();
+    }
+    return imageState == _ImageState_js__WEBPACK_IMPORTED_MODULE_2__["default"].LOADED;
+  }
+
+  /**
+   * @protected
+   */
+  renderIfReadyAndVisible() {
+    const layer = this.getLayer();
+    if (layer && layer.getVisible() && layer.getSourceState() === 'ready') {
+      layer.changed();
+    }
+  }
+
+  /**
+   * @param {import("../Map.js").FrameState} frameState Frame state.
+   */
+  renderDeferred(frameState) {}
+
+  /**
+   * Clean up.
+   * @override
+   */
+  disposeInternal() {
+    delete this.layer_;
+    super.disposeInternal();
+  }
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LayerRenderer);
+
+
+/***/ }),
+
+/***/ "./node_modules/ol/renderer/canvas/Layer.js":
+/*!**************************************************!*\
+  !*** ./node_modules/ol/renderer/canvas/Layer.js ***!
+  \**************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "canvasPool": () => (/* binding */ canvasPool),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _array_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../array.js */ "./node_modules/ol/array.js");
+/* harmony import */ var _color_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../color.js */ "./node_modules/ol/color.js");
+/* harmony import */ var _dom_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../dom.js */ "./node_modules/ol/dom.js");
+/* harmony import */ var _extent_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../extent.js */ "./node_modules/ol/extent.js");
+/* harmony import */ var _render_Event_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../render/Event.js */ "./node_modules/ol/render/Event.js");
+/* harmony import */ var _render_EventType_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../render/EventType.js */ "./node_modules/ol/render/EventType.js");
+/* harmony import */ var _render_canvas_ZIndexContext_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../render/canvas/ZIndexContext.js */ "./node_modules/ol/render/canvas/ZIndexContext.js");
+/* harmony import */ var _transform_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../transform.js */ "./node_modules/ol/transform.js");
+/* harmony import */ var _Layer_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Layer.js */ "./node_modules/ol/renderer/Layer.js");
+/**
+ * @module ol/renderer/canvas/Layer
+ */
+
+
+
+
+
+
+
+
+
+
+/**
+ * @type {Array<HTMLCanvasElement>}
+ */
+const canvasPool = [];
+
+/**
+ * @type {CanvasRenderingContext2D}
+ */
+let pixelContext = null;
+
+function createPixelContext() {
+  pixelContext = (0,_dom_js__WEBPACK_IMPORTED_MODULE_0__.createCanvasContext2D)(1, 1, undefined, {
+    willReadFrequently: true,
+  });
+}
+
+/**
+ * @abstract
+ * @template {import("../../layer/Layer.js").default} LayerType
+ * @extends {LayerRenderer<LayerType>}
+ */
+class CanvasLayerRenderer extends _Layer_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+  /**
+   * @param {LayerType} layer Layer.
+   */
+  constructor(layer) {
+    super(layer);
+
+    /**
+     * @protected
+     * @type {HTMLElement}
+     */
+    this.container = null;
+
+    /**
+     * @protected
+     * @type {number}
+     */
+    this.renderedResolution;
+
+    /**
+     * A temporary transform.  The values in this transform should only be used in a
+     * function that sets the values.
+     * @protected
+     * @type {import("../../transform.js").Transform}
+     */
+    this.tempTransform = (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.create)();
+
+    /**
+     * The transform for rendered pixels to viewport CSS pixels.  This transform must
+     * be set when rendering a frame and may be used by other functions after rendering.
+     * @protected
+     * @type {import("../../transform.js").Transform}
+     */
+    this.pixelTransform = (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.create)();
+
+    /**
+     * The transform for viewport CSS pixels to rendered pixels.  This transform must
+     * be set when rendering a frame and may be used by other functions after rendering.
+     * @protected
+     * @type {import("../../transform.js").Transform}
+     */
+    this.inversePixelTransform = (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.create)();
+
+    /**
+     * @type {CanvasRenderingContext2D}
+     */
+    this.context = null;
+
+    /**
+     * @private
+     * @type {ZIndexContext}
+     */
+    this.deferredContext_ = null;
+
+    /**
+     * @type {boolean}
+     */
+    this.containerReused = false;
+
+    /**
+     * @protected
+     * @type {import("../../Map.js").FrameState|null}
+     */
+    this.frameState = null;
+  }
+
+  /**
+   * @param {import('../../DataTile.js').ImageLike} image Image.
+   * @param {number} col The column index.
+   * @param {number} row The row index.
+   * @return {Uint8ClampedArray|null} The image data.
+   */
+  getImageData(image, col, row) {
+    if (!pixelContext) {
+      createPixelContext();
+    }
+    pixelContext.clearRect(0, 0, 1, 1);
+
+    let data;
+    try {
+      pixelContext.drawImage(image, col, row, 1, 1, 0, 0, 1, 1);
+      data = pixelContext.getImageData(0, 0, 1, 1).data;
+    } catch {
+      pixelContext = null;
+      return null;
+    }
+    return data;
+  }
+
+  /**
+   * @param {import('../../Map.js').FrameState} frameState Frame state.
+   * @return {string} Background color.
+   */
+  getBackground(frameState) {
+    const layer = this.getLayer();
+    let background = layer.getBackground();
+    if (typeof background === 'function') {
+      background = background(frameState.viewState.resolution);
+    }
+    return background || undefined;
+  }
+
+  /**
+   * Get a rendering container from an existing target, if compatible.
+   * @param {HTMLElement} target Potential render target.
+   * @param {string} transform CSS transform matrix.
+   * @param {string} [backgroundColor] Background color.
+   */
+  useContainer(target, transform, backgroundColor) {
+    const layerClassName = this.getLayer().getClassName();
+    let container, context;
+    if (
+      target &&
+      target.className === layerClassName &&
+      (!backgroundColor ||
+        (target &&
+          target.style.backgroundColor &&
+          (0,_array_js__WEBPACK_IMPORTED_MODULE_3__.equals)(
+            (0,_color_js__WEBPACK_IMPORTED_MODULE_4__.asArray)(target.style.backgroundColor),
+            (0,_color_js__WEBPACK_IMPORTED_MODULE_4__.asArray)(backgroundColor),
+          )))
+    ) {
+      const canvas = target.firstElementChild;
+      if (canvas instanceof HTMLCanvasElement) {
+        context = canvas.getContext('2d');
+      }
+    }
+    if (context && (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.equivalent)(context.canvas.style.transform, transform)) {
+      // Container of the previous layer renderer can be used.
+      this.container = target;
+      this.context = context;
+      this.containerReused = true;
+    } else if (this.containerReused) {
+      // Previously reused container cannot be used any more.
+      this.container = null;
+      this.context = null;
+      this.containerReused = false;
+    } else if (this.container) {
+      this.container.style.backgroundColor = null;
+    }
+    if (!this.container) {
+      container = document.createElement('div');
+      container.className = layerClassName;
+      let style = container.style;
+      style.position = 'absolute';
+      style.width = '100%';
+      style.height = '100%';
+      context = (0,_dom_js__WEBPACK_IMPORTED_MODULE_0__.createCanvasContext2D)();
+      const canvas = context.canvas;
+      container.appendChild(canvas);
+      style = canvas.style;
+      style.position = 'absolute';
+      style.left = '0';
+      style.transformOrigin = 'top left';
+      this.container = container;
+      this.context = context;
+    }
+    if (
+      !this.containerReused &&
+      backgroundColor &&
+      !this.container.style.backgroundColor
+    ) {
+      this.container.style.backgroundColor = backgroundColor;
+    }
+  }
+
+  /**
+   * @param {CanvasRenderingContext2D} context Context.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @param {import("../../extent.js").Extent} extent Clip extent.
+   * @protected
+   */
+  clipUnrotated(context, frameState, extent) {
+    const topLeft = (0,_extent_js__WEBPACK_IMPORTED_MODULE_5__.getTopLeft)(extent);
+    const topRight = (0,_extent_js__WEBPACK_IMPORTED_MODULE_5__.getTopRight)(extent);
+    const bottomRight = (0,_extent_js__WEBPACK_IMPORTED_MODULE_5__.getBottomRight)(extent);
+    const bottomLeft = (0,_extent_js__WEBPACK_IMPORTED_MODULE_5__.getBottomLeft)(extent);
+
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.apply)(frameState.coordinateToPixelTransform, topLeft);
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.apply)(frameState.coordinateToPixelTransform, topRight);
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.apply)(frameState.coordinateToPixelTransform, bottomRight);
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.apply)(frameState.coordinateToPixelTransform, bottomLeft);
+
+    const inverted = this.inversePixelTransform;
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.apply)(inverted, topLeft);
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.apply)(inverted, topRight);
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.apply)(inverted, bottomRight);
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.apply)(inverted, bottomLeft);
+
+    context.save();
+    context.beginPath();
+    context.moveTo(Math.round(topLeft[0]), Math.round(topLeft[1]));
+    context.lineTo(Math.round(topRight[0]), Math.round(topRight[1]));
+    context.lineTo(Math.round(bottomRight[0]), Math.round(bottomRight[1]));
+    context.lineTo(Math.round(bottomLeft[0]), Math.round(bottomLeft[1]));
+    context.clip();
+  }
+
+  /**
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @param {HTMLElement} target Target that may be used to render content to.
+   * @protected
+   */
+  prepareContainer(frameState, target) {
+    const extent = frameState.extent;
+    const resolution = frameState.viewState.resolution;
+    const rotation = frameState.viewState.rotation;
+    const pixelRatio = frameState.pixelRatio;
+    const width = Math.round(((0,_extent_js__WEBPACK_IMPORTED_MODULE_5__.getWidth)(extent) / resolution) * pixelRatio);
+    const height = Math.round(((0,_extent_js__WEBPACK_IMPORTED_MODULE_5__.getHeight)(extent) / resolution) * pixelRatio);
+    // set forward and inverse pixel transforms
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.compose)(
+      this.pixelTransform,
+      frameState.size[0] / 2,
+      frameState.size[1] / 2,
+      1 / pixelRatio,
+      1 / pixelRatio,
+      rotation,
+      -width / 2,
+      -height / 2,
+    );
+    (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.makeInverse)(this.inversePixelTransform, this.pixelTransform);
+
+    const canvasTransform = (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.toString)(this.pixelTransform);
+    this.useContainer(target, canvasTransform, this.getBackground(frameState));
+
+    if (!this.containerReused) {
+      const canvas = this.context.canvas;
+      if (canvas.width != width || canvas.height != height) {
+        canvas.width = width;
+        canvas.height = height;
+      } else {
+        this.context.clearRect(0, 0, width, height);
+      }
+      if (canvasTransform !== canvas.style.transform) {
+        canvas.style.transform = canvasTransform;
+      }
+    }
+  }
+
+  /**
+   * @param {import("../../render/EventType.js").default} type Event type.
+   * @param {CanvasRenderingContext2D} context Context.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @private
+   */
+  dispatchRenderEvent_(type, context, frameState) {
+    const layer = this.getLayer();
+    if (layer.hasListener(type)) {
+      const event = new _render_Event_js__WEBPACK_IMPORTED_MODULE_6__["default"](
+        type,
+        this.inversePixelTransform,
+        frameState,
+        context,
+      );
+      layer.dispatchEvent(event);
+    }
+  }
+
+  /**
+   * @param {CanvasRenderingContext2D} context Context.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @protected
+   */
+  preRender(context, frameState) {
+    this.frameState = frameState;
+    if (frameState.declutter) {
+      return;
+    }
+    this.dispatchRenderEvent_(_render_EventType_js__WEBPACK_IMPORTED_MODULE_7__["default"].PRERENDER, context, frameState);
+  }
+
+  /**
+   * @param {CanvasRenderingContext2D} context Context.
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @protected
+   */
+  postRender(context, frameState) {
+    if (frameState.declutter) {
+      return;
+    }
+    this.dispatchRenderEvent_(_render_EventType_js__WEBPACK_IMPORTED_MODULE_7__["default"].POSTRENDER, context, frameState);
+  }
+
+  /**
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   */
+  renderDeferredInternal(frameState) {}
+
+  /**
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @return {import('../../render/canvas/ZIndexContext.js').ZIndexContextProxy} Context.
+   */
+  getRenderContext(frameState) {
+    if (frameState.declutter && !this.deferredContext_) {
+      this.deferredContext_ = new _render_canvas_ZIndexContext_js__WEBPACK_IMPORTED_MODULE_8__["default"]();
+    }
+    return frameState.declutter
+      ? this.deferredContext_.getContext()
+      : this.context;
+  }
+
+  /**
+   * @param {import("../../Map.js").FrameState} frameState Frame state.
+   * @override
+   */
+  renderDeferred(frameState) {
+    if (!frameState.declutter) {
+      return;
+    }
+    this.dispatchRenderEvent_(
+      _render_EventType_js__WEBPACK_IMPORTED_MODULE_7__["default"].PRERENDER,
+      this.context,
+      frameState,
+    );
+    if (frameState.declutter && this.deferredContext_) {
+      this.deferredContext_.draw(this.context);
+      this.deferredContext_.clear();
+    }
+    this.renderDeferredInternal(frameState);
+    this.dispatchRenderEvent_(
+      _render_EventType_js__WEBPACK_IMPORTED_MODULE_7__["default"].POSTRENDER,
+      this.context,
+      frameState,
+    );
+  }
+
+  /**
+   * Creates a transform for rendering to an element that will be rotated after rendering.
+   * @param {import("../../coordinate.js").Coordinate} center Center.
+   * @param {number} resolution Resolution.
+   * @param {number} rotation Rotation.
+   * @param {number} pixelRatio Pixel ratio.
+   * @param {number} width Width of the rendered element (in pixels).
+   * @param {number} height Height of the rendered element (in pixels).
+   * @param {number} offsetX Offset on the x-axis in view coordinates.
+   * @protected
+   * @return {!import("../../transform.js").Transform} Transform.
+   */
+  getRenderTransform(
+    center,
+    resolution,
+    rotation,
+    pixelRatio,
+    width,
+    height,
+    offsetX,
+  ) {
+    const dx1 = width / 2;
+    const dy1 = height / 2;
+    const sx = pixelRatio / resolution;
+    const sy = -sx;
+    const dx2 = -center[0] + offsetX;
+    const dy2 = -center[1];
+    return (0,_transform_js__WEBPACK_IMPORTED_MODULE_2__.compose)(
+      this.tempTransform,
+      dx1,
+      dy1,
+      sx,
+      sy,
+      -rotation,
+      dx2,
+      dy2,
+    );
+  }
+
+  /**
+   * Clean up.
+   * @override
+   */
+  disposeInternal() {
+    delete this.frameState;
+    super.disposeInternal();
+  }
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CanvasLayerRenderer);
+
+
+/***/ })
+
+}])
+//# sourceMappingURL=vendors-node_modules_ol_renderer_canvas_Layer_js.js.map