correct tile sorting and fix rendering when mask is empty

mapbox · Sep 15, 2017 · c1efd53 · c1efd53
1 parent d0085f5
commit c1efd53
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 0 deletions.
diff --git a/src/render/tile_mask.js b/src/render/tile_mask.js
@@ -77,6 +77,8 @@ function computeTileMasks(rootTile: TileCoord, ref: TileCoord, childArray: Array
     // If the reference or any of its children is found in the list, we need to recurse.
     for (let i = 0; i < childArray.length; i++) {
         const childTile = childArray[i];
+        // childTile is from a larger wrap than the rootTile so it cannot be a child tile
+        if (lowerBound.isLessThan(childTile.coord)) break;
         // The current tile is masked out, so we don't need to add them to the mask set.
         if (ref.id === childTile.coord.id) {
             return;

diff --git a/src/source/tile.js b/src/source/tile.js
@@ -375,6 +375,9 @@ class Tile {
         // using the global shared buffers for covering the entire tile.
         if (util.deepEqual(mask, [0])) return;
 
+        // mask is empty because all four children are loaded
+        if (mask.length === 0) return;
+
         const maskedBoundsArray = new RasterBoundsArray();
         for (let i = 0; i < mask.length; i++) {
             const maskCoord = TileCoord.fromID(mask[i]);

diff --git a/src/source/tile_coord.js b/src/source/tile_coord.js
@@ -78,8 +78,14 @@ class TileCoord {
 
     isLessThan(rhs: TileCoord) {
         if (this.w < rhs.w) return true;
+        if (this.w > rhs.w) return false;
+
         if (this.z < rhs.z) return true;
+        if (this.z > rhs.z) return false;
+
         if (this.x < rhs.x) return true;
+        if (this.x > rhs.x) return false;
+
         if (this.y < rhs.y) return true;
         return false;
     }

diff --git a/test/unit/source/tile.test.js b/test/unit/source/tile.test.js
@@ -156,6 +156,52 @@ test('Tile#setMask', (t) => {
 
 });
 
+test('Tile#isLessThan', (t)=>{
+    t.test('correctly sorts tiles', (t)=>{
+        const tiles = [
+            new TileCoord(9, 146, 195, 0),
+            new TileCoord(9, 147, 195, 0),
+            new TileCoord(9, 148, 195, 0),
+            new TileCoord(9, 149, 195, 0),
+            new TileCoord(9, 144, 196, 1),
+            new TileCoord(9, 145, 196, 0),
+            new TileCoord(9, 146, 196, 0),
+            new TileCoord(9, 147, 196, 1),
+            new TileCoord(9, 145, 194, 0),
+            new TileCoord(9, 149, 196, 0),
+            new TileCoord(10, 293, 391, 0),
+            new TileCoord(10, 291, 390, 0),
+            new TileCoord(10, 293, 390, 1),
+            new TileCoord(10, 294, 390, 0),
+            new TileCoord(10, 295, 390, 0),
+            new TileCoord(10, 291, 391, 0),
+        ];
+
+        const sortedTiles = tiles.sort((a, b) => { return a.isLessThan(b) ? -1 : b.isLessThan(a) ? 1 : 0; });
+
+        t.deepEqual(sortedTiles, [
+            new TileCoord(9, 145, 194, 0),
+            new TileCoord(9, 145, 196, 0),
+            new TileCoord(9, 146, 195, 0),
+            new TileCoord(9, 146, 196, 0),
+            new TileCoord(9, 147, 195, 0),
+            new TileCoord(9, 148, 195, 0),
+            new TileCoord(9, 149, 195, 0),
+            new TileCoord(9, 149, 196, 0),
+            new TileCoord(10, 291, 390, 0),
+            new TileCoord(10, 291, 391, 0),
+            new TileCoord(10, 293, 391, 0),
+            new TileCoord(10, 294, 390, 0),
+            new TileCoord(10, 295, 390, 0),
+            new TileCoord(9, 144, 196, 1),
+            new TileCoord(9, 147, 196, 1),
+            new TileCoord(10, 293, 390, 1)
+        ]);
+        t.end();
+    });
+    t.end();
+});
+
 test('Tile#redoPlacement', (t) => {
 
     test('redoPlacement on an empty tile', (t) => {