Ensure images always fade in completely, fix broken "raster-fade-dura…

…tion" property (#3532)

* Ensure images always fade in completely, remove "raster-fade-duration"

* Restore "raster-fade-duration" functionality

* Remove unnecessary whitespace change

js/render/draw_raster.js

@@ -36,6 +36,8 @@ function drawRasterTile(painter, sourceCache, layer, coord) {
     const tile = sourceCache.getTile(coord);
     const posMatrix = painter.transform.calculatePosMatrix(coord, sourceCache.getSource().maxzoom);
 
+    tile.setAnimationLoop(painter.style.animationLoop, layer.paint['raster-fade-duration']);
+
     const program = painter.useProgram('raster');
     gl.uniformMatrix4fv(program.u_matrix, false, posMatrix);
 

js/source/raster_tile_source.js

@@ -82,8 +82,6 @@ class RasterTileSource extends Evented {
             }
             gl.generateMipmap(gl.TEXTURE_2D);
 
-            this.map.animationLoop.set(this.map.style.rasterFadeDuration);
-
             tile.state = 'loaded';
 
             callback(null);

js/source/source_cache.js

@@ -42,7 +42,7 @@ class SourceCache extends Evented {
             if (this._sourceLoaded && event.dataType === 'source') {
                 this.reload();
                 if (this.transform) {
-                    this.update(this.transform, this.map && this.map.style.rasterFadeDuration);
+                    this.update(this.transform);
                 }
             }
         });
@@ -278,7 +278,7 @@ class SourceCache extends Evented {
      * are inside the viewport.
      * @private
      */
-    update(transform, fadeDuration) {
+    update(transform) {
         if (!this._sourceLoaded) { return; }
         let i;
         let coord;
@@ -295,7 +295,6 @@ class SourceCache extends Evented {
         // the most ideal tile for the current viewport. This may include tiles like
         // parent or child tiles that are *already* loaded.
         const retain = {};
-        const now = new Date().getTime();
 
         // Covered is a list of retained tiles who's areas are full covered by other,
         // better, retained tiles. They are not drawn separately.
@@ -339,7 +338,7 @@ class SourceCache extends Evented {
             const id = ids[k];
             coord = TileCoord.fromID(id);
             tile = this._tiles[id];
-            if (tile && tile.timeAdded > now - (fadeDuration || 0)) {
+            if (tile && tile.animationLoopEndTime >= Date.now()) {
                 // This tile is still fading in. Find tiles to cross-fade with it.
                 if (this.findLoadedChildren(coord, maxCoveringZoom, retain)) {
                     retain[id] = true;

js/source/tile.js

@@ -41,6 +41,14 @@ class Tile {
         this.state = 'loading';
     }
 
+    setAnimationLoop(animationLoop, t) {
+        this.animationLoopEndTime = t + Date.now();
+        if (this.animationLoopId !== undefined) {
+            animationLoop.cancel(this.animationLoopId);
+        }
+        this.animationLoopId = animationLoop.set(t);
+    }
+
     /**
      * Given a data object with a 'buffers' property, load it into
      * this tile's elementGroups and buffers properties and set loaded

js/style/style.js

@@ -221,7 +221,6 @@ class Style extends Evented {
 
         this._updateZoomHistory(z);
 
-        this.rasterFadeDuration = 300;
         for (const layerId in this._layers) {
             const layer = this._layers[layerId];
 

test/js/source/source_cache.test.js

@@ -2,6 +2,7 @@
 
 const test = require('mapbox-gl-js-test').test;
 const SourceCache = require('../../../js/source/source_cache');
+const AnimationLoop = require('../../../js/style/animation_loop');
 const Source = require('../../../js/source/source');
 const TileCoord = require('../../../js/source/tile_coord');
 const Transform = require('../../../js/geo/transform');
@@ -378,17 +379,19 @@ test('SourceCache#update', (t) => {
         const transform = new Transform();
         transform.resize(511, 511);
         transform.zoom = 2;
+        const animationLoop = new AnimationLoop();
 
         const sourceCache = createSourceCache({
             loadTile: function(tile, callback) {
                 tile.timeAdded = Infinity;
                 tile.state = 'loaded';
+                tile.setAnimationLoop(animationLoop, 100);
                 callback();
             }
         });
 
         sourceCache.on('source.load', () => {
-            sourceCache.update(transform, 100);
+            sourceCache.update(transform);
             t.deepEqual(sourceCache.getIds(), [
                 new TileCoord(2, 1, 1).id,
                 new TileCoord(2, 2, 1).id,
@@ -397,7 +400,7 @@ test('SourceCache#update', (t) => {
             ]);
 
             transform.zoom = 0;
-            sourceCache.update(transform, 100);
+            sourceCache.update(transform);
 
             t.deepEqual(sourceCache.getRenderableIds().length, 5);
             t.end();
@@ -409,22 +412,25 @@ test('SourceCache#update', (t) => {
         transform.resize(511, 511);
         transform.zoom = 0;
 
+        const animationLoop = new AnimationLoop();
+
         const sourceCache = createSourceCache({
             loadTile: function(tile, callback) {
                 tile.timeAdded = Infinity;
                 tile.state = 'loaded';
+                tile.setAnimationLoop(animationLoop, 100);
                 callback();
             }
         });
 
         sourceCache.on('source.load', () => {
-            sourceCache.update(transform, 100);
+            sourceCache.update(transform);
 
             transform.zoom = 2;
-            sourceCache.update(transform, 100);
+            sourceCache.update(transform);
 
             transform.zoom = 1;
-            sourceCache.update(transform, 100);
+            sourceCache.update(transform);
 
             t.equal(sourceCache._coveredTiles[(new TileCoord(0, 0, 0).id)], true);
             t.end();