Don't place symbols entirely outside range of collision grid.

Fixes issue #5654, brings gl-js behavior in line with gl-native.
symbol-placement/line-overscaled functions as a regression test.

src/symbol/collision_index.js

@@ -42,6 +42,8 @@ class CollisionIndex {
     pitchfactor: number;
     screenRightBoundary: number;
     screenBottomBoundary: number;
+    gridRightBoundary: number;
+    gridBottomBoundary: number;
 
     constructor(
         transform: Transform,
@@ -56,6 +58,8 @@ class CollisionIndex {
 
         this.screenRightBoundary = transform.width + viewportPadding;
         this.screenBottomBoundary = transform.height + viewportPadding;
+        this.gridRightBoundary = transform.width + 2 * viewportPadding;
+        this.gridBottomBoundary = transform.height + 2 * viewportPadding;
     }
 
     placeCollisionBox(collisionBox: SingleCollisionBox, allowOverlap: boolean, textPixelRatio: number, posMatrix: mat4): { box: Array<number>, offscreen: boolean } {
@@ -66,14 +70,14 @@ class CollisionIndex {
         const brX = collisionBox.x2 * tileToViewport + projectedPoint.point.x;
         const brY = collisionBox.y2 * tileToViewport + projectedPoint.point.y;
 
-        if (!allowOverlap) {
-            if (this.grid.hitTest(tlX, tlY, brX, brY)) {
-                return {
-                    box: [],
-                    offscreen: false
-                };
-            }
+        if (!this.isInsideGrid(tlX, tlY, brX, brY) ||
+            (!allowOverlap && this.grid.hitTest(tlX, tlY, brX, brY))) {
+            return {
+                box: [],
+                offscreen: false
+            };
         }
+
         return {
             box: [tlX, tlY, brX, brY],
             offscreen: this.isOffscreen(tlX, tlY, brX, brY)
@@ -143,6 +147,7 @@ class CollisionIndex {
             /*return tile distance*/ true);
 
         let collisionDetected = false;
+        let inGrid = false;
         let entirelyOffscreen = true;
 
         const tileToViewport = projectedAnchor.perspectiveRatio * textPixelRatio;
@@ -205,7 +210,12 @@ class CollisionIndex {
             placedCollisionCircles.push(projectedPoint.x, projectedPoint.y, radius, collisionBoxArrayIndex);
             markCollisionCircleUsed(collisionCircles, k, true);
 
-            entirelyOffscreen = entirelyOffscreen && this.isOffscreen(projectedPoint.x - radius, projectedPoint.y - radius, projectedPoint.x + radius, projectedPoint.y + radius);
+            const x1 = projectedPoint.x - radius;
+            const y1 = projectedPoint.y - radius;
+            const x2 = projectedPoint.x + radius;
+            const y2 = projectedPoint.y + radius;
+            entirelyOffscreen = entirelyOffscreen && this.isOffscreen(x1, y1, x2, y2);
+            inGrid = inGrid || this.isInsideGrid(x1, y1, x2, y2);
 
             if (!allowOverlap) {
                 if (this.grid.hitTestCircle(projectedPoint.x, projectedPoint.y, radius)) {
@@ -224,7 +234,7 @@ class CollisionIndex {
         }
 
         return {
-            circles: collisionDetected ? [] : placedCollisionCircles,
+            circles: (collisionDetected || !inGrid) ? [] : placedCollisionCircles,
             offscreen: entirelyOffscreen
         };
     }
@@ -349,6 +359,10 @@ class CollisionIndex {
     isOffscreen(x1: number, y1: number, x2: number, y2: number) {
         return x2 < viewportPadding || x1 >= this.screenRightBoundary || y2 < viewportPadding || y1 > this.screenBottomBoundary;
     }
+
+    isInsideGrid(x1: number, y1: number, x2: number, y2: number) {
+        return x2 >= 0 && x1 < this.gridRightBoundary && y2 >= 0 && y1 < this.gridBottomBoundary;
+    }
 }
 
 function markCollisionCircleUsed(collisionCircles: Array<number>, index: number, used: boolean) {