Convert hit detect priority example to test

examples/hit-tolerance-priority.html

@@ -1,9 +0,0 @@
----
-layout: example.html
-title: Hit tolerance priority
-shortdesc: Shows bad behavior of hit detection with hit tolerance.
-docs: >
-  Hover over the map and observe how the small circles get a black outline as you hover over them. Is the expected feature getting highlighted?
-tags: "simple, openstreetmap"
----
-<div id="map" class="map"></div>

examples/hit-tolerance-priority.js

@@ -1,84 +0,0 @@
-import CircleStyle from '../src/ol/style/Circle.js';
-import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
-import VectorSource from '../src/ol/source/Vector.js';
-import View from '../src/ol/View.js';
-import {Fill, Stroke, Style} from '../src/ol/style.js';
-import {Point} from '../src/ol/geom.js';
-
-const map = new Map({
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    resolution: 1,
-    resolutions: [1],
-  }),
-});
-
-const vectorLayer = new VectorLayer({
-  source: new VectorSource({
-    features: [
-      new Feature({
-        geometry: new Point([0, 0]),
-        color: 'white',
-      }),
-      new Feature({
-        geometry: new Point([-10, 0]),
-        color: 'fuchsia',
-      }),
-      new Feature({
-        geometry: new Point([-10, -10]),
-        color: 'orange',
-      }),
-      new Feature({
-        geometry: new Point([-10, 10]),
-        color: 'cyan',
-      }),
-    ],
-  }),
-  style: (feature) => {
-    return new Style({
-      image: new CircleStyle({
-        radius: 5,
-        fill: new Fill({
-          color: feature.get('color'),
-        }),
-        stroke: new Stroke({
-          color: 'gray',
-          width: 1,
-        }),
-      }),
-    });
-  },
-});
-map.addLayer(vectorLayer);
-
-const highlightFeature = new Feature(new Point([NaN, NaN]));
-highlightFeature.setStyle(
-  new Style({
-    image: new CircleStyle({
-      radius: 5,
-      stroke: new Stroke({
-        color: 'black',
-        width: 2,
-      }),
-    }),
-  })
-);
-vectorLayer.getSource().addFeature(highlightFeature);
-map.on('pointermove', (e) => {
-  const hit = map.forEachFeatureAtPixel(
-    e.pixel,
-    (feature) => {
-      highlightFeature.setGeometry(feature.getGeometry().clone());
-      return true;
-    },
-    {
-      hitTolerance: 10,
-    }
-  );
-  if (!hit) {
-    highlightFeature.setGeometry(new Point([NaN, NaN]));
-  }
-});

test/browser/spec/ol/renderer/map.test.js

@@ -125,6 +125,59 @@ describe('ol.renderer.Map', function () {
       expect(hit.layer).to.be(layer);
       expect(hit.geometry).to.be(geometry);
     });
+
+    it('prioritizes closer features when no direct hit is found', function () {
+      map.getView().setResolution(1);
+      map.addLayer(
+        new VectorLayer({
+          style: new Style({
+            image: new Circle({
+              radius: 4,
+              fill: new Fill({
+                color: 'black',
+              }),
+            }),
+          }),
+          source: new VectorSource({
+            features: [
+              [0, -10],
+              [0, 0],
+              [0, 10],
+              [10, 0],
+            ].map((coordinate) => new Feature(new Point(coordinate))),
+          }),
+        })
+      );
+      map.renderSync();
+
+      let feature = map.forEachFeatureAtPixel(
+        map.getPixelFromCoordinate([8, 6]),
+        (feature) => feature,
+        {hitTolerance: 20}
+      );
+      expect(feature.getGeometry().getCoordinates()).to.eql([10, 0]);
+
+      feature = map.forEachFeatureAtPixel(
+        map.getPixelFromCoordinate([6, -8]),
+        (feature) => feature,
+        {hitTolerance: 20}
+      );
+      expect(feature.getGeometry().getCoordinates()).to.eql([0, -10]);
+
+      feature = map.forEachFeatureAtPixel(
+        map.getPixelFromCoordinate([-6, -4]),
+        (feature) => feature,
+        {hitTolerance: 20}
+      );
+      expect(feature.getGeometry().getCoordinates()).to.eql([0, 0]);
+
+      feature = map.forEachFeatureAtPixel(
+        map.getPixelFromCoordinate([-6, 7]),
+        (feature) => feature,
+        {hitTolerance: 20}
+      );
+      expect(feature.getGeometry().getCoordinates()).to.eql([0, 10]);
+    });
   });
 
   describe('#forEachFeatureAtCoordinate', function () {