Cache hit detect indexes and check closest pixels first.

test/spec/ol/render/canvas/executorgroup.test.js

@@ -1,13 +1,25 @@
-import {getCircleArray} from '../../../../../src/ol/render/canvas/ExecutorGroup.js';
+import {getPixelIndexArray} from '../../../../../src/ol/render/canvas/ExecutorGroup.js';
 
 describe('ol.render.canvas.ExecutorGroup', function () {
-  describe('#getCircleArray_', function () {
-    it('creates an array with a pixelated circle marked with true', function () {
+  describe('#getPixelIndexArray', function () {
+    it('creates an array with every index within distance', function () {
       const radius = 10;
+      const size = radius * 2 + 1;
+      const hitIndexes = getPixelIndexArray(radius);
+
+      const circleArray = new Array(size);
+      for (let i = 0; i < size; i++) {
+        circleArray[i] = new Array(size);
+      }
+
+      hitIndexes.forEach(function (d) {
+        const x = ((d - 3) / 4) % size;
+        const y = ((d - 3) / 4 / size) | 0;
+        circleArray[x][y] = true;
+      });
+
       const minRadiusSq = Math.pow(radius - Math.SQRT2, 2);
       const maxRadiusSq = Math.pow(radius + Math.SQRT2, 2);
-      const circleArray = getCircleArray(radius);
-      const size = radius * 2 + 1;
       expect(circleArray.length).to.be(size);
 
       for (let i = 0; i < size; i++) {
@@ -24,5 +36,33 @@ describe('ol.render.canvas.ExecutorGroup', function () {
         }
       }
     });
+    it('orders the indexes correctly from closest to farthest away', function () {
+      const radius = 10;
+      const size = radius * 2 + 1;
+      const hitIndexes = getPixelIndexArray(radius);
+
+      // Center first
+      expect(hitIndexes[0]).to.be((size * radius + radius) * 4 + 3);
+
+      // 4 Pixels above/below/left/right of center next
+      const begin = hitIndexes.slice(1, 5);
+      expect(begin).to.contain((radius * size + radius + 1) * 4 + 3);
+      expect(begin).to.contain(((radius + 1) * size + radius) * 4 + 3);
+      expect(begin).to.contain(((radius - 1) * size + radius) * 4 + 3);
+      expect(begin).to.contain((radius * size + radius - 1) * 4 + 3);
+
+      // 4 Pixels in the middle of each side in the last 12 elements (at radius 10)
+      const last = hitIndexes.slice(hitIndexes.length - 12);
+      expect(last).to.contain((0 * size + radius) * 4 + 3);
+      expect(last).to.contain((radius * size + 0) * 4 + 3);
+      expect(last).to.contain((radius * size + size - 1) * 4 + 3);
+      expect(last).to.contain(((size - 1) * size + radius) * 4 + 3);
+    });
+    it('has no duplicate indexes', function () {
+      const radius = 10;
+      const hitIndexes = getPixelIndexArray(radius);
+
+      expect(new Set(hitIndexes).size).to.be(hitIndexes.length);
+    });
   });
 });