From e94c7b6c394001592e8b6beb2785e48d4bb20a89 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Thu, 15 Aug 2019 10:25:05 -0600 Subject: [PATCH] Only set frameState.animate true if in transition and alpha < 1 --- src/ol/renderer/canvas/TileLayer.js | 5 +- test/spec/ol/layer/tile.test.js | 72 ++++++++++++++++++++++++++++- test/spec/ol/map.test.js | 1 + 3 files changed, 75 insertions(+), 3 deletions(-) diff --git a/src/ol/renderer/canvas/TileLayer.js b/src/ol/renderer/canvas/TileLayer.js index a8e35dbe2a..80a799edf9 100644 --- a/src/ol/renderer/canvas/TileLayer.js +++ b/src/ol/renderer/canvas/TileLayer.js @@ -377,7 +377,8 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer { return; } const uid = getUid(this); - const alpha = opacity * (transition ? tile.getAlpha(uid, frameState.time) : 1); + const tileAlpha = transition ? tile.getAlpha(uid, frameState.time) : 1; + const alpha = opacity * tileAlpha; const alphaChanged = alpha !== this.context.globalAlpha; if (alphaChanged) { this.context.save(); @@ -389,7 +390,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer { if (alphaChanged) { this.context.restore(); } - if (alpha !== 1) { + if (tileAlpha !== 1) { frameState.animate = true; } else if (transition) { tile.endTransition(uid); diff --git a/test/spec/ol/layer/tile.test.js b/test/spec/ol/layer/tile.test.js index caac548aca..a3a570aab8 100644 --- a/test/spec/ol/layer/tile.test.js +++ b/test/spec/ol/layer/tile.test.js @@ -1,5 +1,6 @@ +import {Map, View} from '../../../../src/ol/index.js'; import TileLayer from '../../../../src/ol/layer/Tile.js'; -import OSM from '../../../../src/ol/source/OSM.js'; +import {OSM, XYZ} from '../../../../src/ol/source.js'; describe('ol.layer.Tile', function() { @@ -32,4 +33,73 @@ describe('ol.layer.Tile', function() { }); + describe('frameState.animate after tile transition with layer opacity', function() { + let target, map; + + beforeEach(function(done) { + target = document.createElement('div'); + Object.assign(target.style, { + position: 'absolute', + left: '-1000px', + top: '-1000px', + width: '256px', + height: '256px' + }); + document.body.appendChild(target); + + map = new Map({ + target: target, + view: new View({center: [0, 0], zoom: 1}) + }); + + map.once('rendercomplete', function() { + done(); + }); + }); + + afterEach(function() { + map.dispose(); + document.body.removeChild(target); + }); + + it('sets frameState.animate to false when opacity is 1', function(done) { + let lastFrameState; + const layer = new TileLayer({ + opacity: 1, + source: new XYZ({ + url: 'spec/ol/data/osm-0-0-0.png' + }) + }); + layer.on('postrender', function(event) { + lastFrameState = event.frameState; + }); + + map.once('rendercomplete', function() { + expect(lastFrameState.animate).to.be(false); + done(); + }); + + map.addLayer(layer); + }); + + it('sets frameState.animate to false when opacity is 0.5', function(done) { + let lastFrameState; + const layer = new TileLayer({ + opacity: 0.5, + source: new XYZ({ + url: 'spec/ol/data/osm-0-0-0.png' + }) + }); + layer.on('postrender', function(event) { + lastFrameState = event.frameState; + }); + + map.once('rendercomplete', function() { + expect(lastFrameState.animate).to.be(false); + done(); + }); + + map.addLayer(layer); + }); + }); }); diff --git a/test/spec/ol/map.test.js b/test/spec/ol/map.test.js index 28b401494a..1d97f486cc 100644 --- a/test/spec/ol/map.test.js +++ b/test/spec/ol/map.test.js @@ -203,6 +203,7 @@ describe('ol.Map', function() { target: target, layers: [ new TileLayer({ + opacity: 0.5, source: new XYZ({ url: 'spec/ol/data/osm-{z}-{x}-{y}.png' })