Merge pull request #12646 from ashchurova/fix-8136-hit-detection-custom-renderer

Support for hit detection in styles with custom rendering
2021-09-29 20:22:57 +02:00
parent 5f118b0244 2b5ea17d79
commit 9e37182649
7 changed files with 476 additions and 174 deletions
--- a/src/ol/render/VectorContext.js
+++ b/src/ol/render/VectorContext.js
@@ -15,8 +15,9 @@ class VectorContext {
   * @param {import("../geom/SimpleGeometry.js").default} geometry Geometry.
   * @param {import("../Feature.js").FeatureLike} feature Feature.
   * @param {Function} renderer Renderer.
+   * @param {Function} hitDetectionRenderer Renderer.
   */
-  drawCustom(geometry, feature, renderer) {}
+  drawCustom(geometry, feature, renderer, hitDetectionRenderer) {}

  /**
   * Render a geometry.
--- a/src/ol/render/canvas/Builder.js
+++ b/src/ol/render/canvas/Builder.js
@@ -247,97 +247,104 @@ class CanvasBuilder extends VectorContext {
   * @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry.
   * @param {import("../../Feature.js").FeatureLike} feature Feature.
   * @param {Function} renderer Renderer.
+   * @param {Function} hitDetectionRenderer Renderer.
   */
-  drawCustom(geometry, feature, renderer) {
+  drawCustom(geometry, feature, renderer, hitDetectionRenderer) {
    this.beginGeometry(geometry, feature);
+
    const type = geometry.getType();
    const stride = geometry.getStride();
    const builderBegin = this.coordinates.length;
+
    let flatCoordinates, builderEnd, builderEnds, builderEndss;
    let offset;
-    if (type == GeometryType.MULTI_POLYGON) {
-      flatCoordinates =
-        /** @type {import("../../geom/MultiPolygon.js").default} */ (
-          geometry
-        ).getOrientedFlatCoordinates();
-      builderEndss = [];
-      const endss =
-        /** @type {import("../../geom/MultiPolygon.js").default} */ (
-          geometry
-        ).getEndss();
-      offset = 0;
-      for (let i = 0, ii = endss.length; i < ii; ++i) {
-        const myEnds = [];
+
+    switch (type) {
+      case GeometryType.MULTI_POLYGON:
+        flatCoordinates =
+          /** @type {import("../../geom/MultiPolygon.js").default} */ (
+            geometry
+          ).getOrientedFlatCoordinates();
+        builderEndss = [];
+        const endss =
+          /** @type {import("../../geom/MultiPolygon.js").default} */ (
+            geometry
+          ).getEndss();
+        offset = 0;
+        for (let i = 0, ii = endss.length; i < ii; ++i) {
+          const myEnds = [];
+          offset = this.drawCustomCoordinates_(
+            flatCoordinates,
+            offset,
+            endss[i],
+            stride,
+            myEnds
+          );
+          builderEndss.push(myEnds);
+        }
+        this.instructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEndss,
+          geometry,
+          renderer,
+          inflateMultiCoordinatesArray,
+        ]);
+        this.hitDetectionInstructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEndss,
+          geometry,
+          hitDetectionRenderer || renderer,
+          inflateMultiCoordinatesArray,
+        ]);
+        break;
+      case GeometryType.POLYGON:
+      case GeometryType.MULTI_LINE_STRING:
+        builderEnds = [];
+        flatCoordinates =
+          type == GeometryType.POLYGON
+            ? /** @type {import("../../geom/Polygon.js").default} */ (
+                geometry
+              ).getOrientedFlatCoordinates()
+            : geometry.getFlatCoordinates();
        offset = this.drawCustomCoordinates_(
          flatCoordinates,
-          offset,
-          endss[i],
+          0,
+          /** @type {import("../../geom/Polygon.js").default|import("../../geom/MultiLineString.js").default} */ (
+            geometry
+          ).getEnds(),
          stride,
-          myEnds
+          builderEnds
+        );
+        this.instructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnds,
+          geometry,
+          renderer,
+          inflateCoordinatesArray,
+        ]);
+        this.hitDetectionInstructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnds,
+          geometry,
+          hitDetectionRenderer || renderer,
+          inflateCoordinatesArray,
+        ]);
+        break;
+      case GeometryType.LINE_STRING:
+      case GeometryType.CIRCLE:
+        flatCoordinates = geometry.getFlatCoordinates();
+        builderEnd = this.appendFlatLineCoordinates(
+          flatCoordinates,
+          0,
+          flatCoordinates.length,
+          stride,
+          false,
+          false
        );
-        builderEndss.push(myEnds);
-      }
-      this.instructions.push([
-        CanvasInstruction.CUSTOM,
-        builderBegin,
-        builderEndss,
-        geometry,
-        renderer,
-        inflateMultiCoordinatesArray,
-      ]);
-    } else if (
-      type == GeometryType.POLYGON ||
-      type == GeometryType.MULTI_LINE_STRING
-    ) {
-      builderEnds = [];
-      flatCoordinates =
-        type == GeometryType.POLYGON
-          ? /** @type {import("../../geom/Polygon.js").default} */ (
-              geometry
-            ).getOrientedFlatCoordinates()
-          : geometry.getFlatCoordinates();
-      offset = this.drawCustomCoordinates_(
-        flatCoordinates,
-        0,
-        /** @type {import("../../geom/Polygon.js").default|import("../../geom/MultiLineString.js").default} */ (
-          geometry
-        ).getEnds(),
-        stride,
-        builderEnds
-      );
-      this.instructions.push([
-        CanvasInstruction.CUSTOM,
-        builderBegin,
-        builderEnds,
-        geometry,
-        renderer,
-        inflateCoordinatesArray,
-      ]);
-    } else if (
-      type == GeometryType.LINE_STRING ||
-      type == GeometryType.CIRCLE
-    ) {
-      flatCoordinates = geometry.getFlatCoordinates();
-      builderEnd = this.appendFlatLineCoordinates(
-        flatCoordinates,
-        0,
-        flatCoordinates.length,
-        stride,
-        false,
-        false
-      );
-      this.instructions.push([
-        CanvasInstruction.CUSTOM,
-        builderBegin,
-        builderEnd,
-        geometry,
-        renderer,
-        inflateCoordinates,
-      ]);
-    } else if (type == GeometryType.MULTI_POINT) {
-      flatCoordinates = geometry.getFlatCoordinates();
-      builderEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
-      if (builderEnd > builderBegin) {
        this.instructions.push([
          CanvasInstruction.CUSTOM,
          builderBegin,
@@ -346,18 +353,59 @@ class CanvasBuilder extends VectorContext {
          renderer,
          inflateCoordinates,
        ]);
-      }
-    } else if (type == GeometryType.POINT) {
-      flatCoordinates = geometry.getFlatCoordinates();
-      this.coordinates.push(flatCoordinates[0], flatCoordinates[1]);
-      builderEnd = this.coordinates.length;
-      this.instructions.push([
-        CanvasInstruction.CUSTOM,
-        builderBegin,
-        builderEnd,
-        geometry,
-        renderer,
-      ]);
+        this.hitDetectionInstructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnd,
+          geometry,
+          hitDetectionRenderer || renderer,
+          inflateCoordinates,
+        ]);
+        break;
+      case GeometryType.MULTI_POINT:
+        flatCoordinates = geometry.getFlatCoordinates();
+        builderEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
+
+        if (builderEnd > builderBegin) {
+          this.instructions.push([
+            CanvasInstruction.CUSTOM,
+            builderBegin,
+            builderEnd,
+            geometry,
+            renderer,
+            inflateCoordinates,
+          ]);
+          this.hitDetectionInstructions.push([
+            CanvasInstruction.CUSTOM,
+            builderBegin,
+            builderEnd,
+            geometry,
+            hitDetectionRenderer || renderer,
+            inflateCoordinates,
+          ]);
+        }
+        break;
+      case GeometryType.POINT:
+        flatCoordinates = geometry.getFlatCoordinates();
+        this.coordinates.push(flatCoordinates[0], flatCoordinates[1]);
+        builderEnd = this.coordinates.length;
+
+        this.instructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnd,
+          geometry,
+          renderer,
+        ]);
+        this.hitDetectionInstructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnd,
+          geometry,
+          hitDetectionRenderer || renderer,
+        ]);
+        break;
+      default:
    }
    this.endGeometry(feature);
  }
--- a/src/ol/renderer/vector.js
+++ b/src/ol/renderer/vector.js
@@ -208,7 +208,8 @@ function renderGeometry(replayGroup, geometry, style, feature) {
  replay.drawCustom(
    /** @type {import("../geom/SimpleGeometry.js").default} */ (geometry),
    feature,
-    style.getRenderer()
+    style.getRenderer(),
+    style.getHitDetectionRenderer()
  );
 }

--- a/src/ol/style/Style.js
+++ b/src/ol/style/Style.js
@@ -49,6 +49,8 @@ import {assert} from '../asserts.js';
 * @property {import("./Image.js").default} [image] Image style.
 * @property {RenderFunction} [renderer] Custom renderer. When configured, `fill`, `stroke` and `image` will be
 * ignored, and the provided function will be called with each render frame for each geometry.
+ * @property {RenderFunction} [hitDetectionRenderer] Custom renderer for hit detection. If provided will be used
+ * in hit detection rendering.
 * @property {import("./Stroke.js").default} [stroke] Stroke style.
 * @property {import("./Text.js").default} [text] Text style.
 * @property {number} [zIndex] Z index.
@@ -186,6 +188,15 @@ class Style {
     */
    this.renderer_ = options.renderer !== undefined ? options.renderer : null;

+    /**
+     * @private
+     * @type {RenderFunction|null}
+     */
+    this.hitDetectionRenderer_ =
+      options.hitDetectionRenderer !== undefined
+        ? options.hitDetectionRenderer
+        : null;
+
    /**
     * @private
     * @type {import("./Stroke.js").default}
@@ -248,6 +259,26 @@ class Style {
    this.renderer_ = renderer;
  }

+  /**
+   * Sets a custom renderer function for this style used
+   * in hit detection.
+   * @param {RenderFunction|null} renderer Custom renderer function.
+   * @api
+   */
+  setHitDetectionRenderer(renderer) {
+    this.hitDetectionRenderer_ = renderer;
+  }
+
+  /**
+   * Get the custom renderer function that was configured with
+   * {@link #setHitDetectionRenderer} or the `hitDetectionRenderer` constructor option.
+   * @return {RenderFunction|null} Custom renderer function.
+   * @api
+   */
+  getHitDetectionRenderer() {
+    return this.hitDetectionRenderer_;
+  }
+
  /**
   * Get the geometry to be rendered.
   * @return {string|import("../geom/Geometry.js").default|GeometryFunction}