Restore "raster-fade-duration" functionality

mapbox · Nov 3, 2016 · 4647c8c · 4647c8c
1 parent e3711c2
commit 4647c8c
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git a/js/render/draw_raster.js b/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);
 
@@ -47,7 +49,7 @@ function drawRasterTile(painter, sourceCache, layer, coord) {
     gl.uniform3fv(program.u_spin_weights, spinWeights(layer.paint['raster-hue-rotate']));
 
     const parentTile = tile.sourceCache && tile.sourceCache.findLoadedParent(coord, 0, {}),
-        opacities = getOpacities(tile, parentTile, layer, painter.transform, painter.style.rasterFadeDuration);
+        opacities = getOpacities(tile, parentTile, layer, painter.transform);
 
     let parentScaleBy, parentTL;
 
@@ -103,8 +105,9 @@ function saturationFactor(saturation) {
         -saturation;
 }
 
-function getOpacities(tile, parentTile, layer, transform, fadeDuration) {
+function getOpacities(tile, parentTile, layer, transform) {
     const opacities = [1, 0];
+    const fadeDuration = layer.paint['raster-fade-duration'];
 
     if (tile.sourceCache && fadeDuration > 0) {
         const now = Date.now();

diff --git a/js/source/image_source.js b/js/source/image_source.js
@@ -156,7 +156,6 @@ class ImageSource extends Evented {
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-            this.map.animationLoop.set(this.tile.timeAdded + this.map.style.rasterFadeDuration - Date.now());
 
         } else if (image instanceof window.HTMLVideoElement) {
             gl.bindTexture(gl.TEXTURE_2D, this.tile.texture);

diff --git a/js/source/raster_tile_source.js b/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);

diff --git a/js/source/source_cache.js b/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;
@@ -339,7 +339,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;

diff --git a/js/source/tile.js b/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

diff --git a/js/style/style.js b/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];