Dispatch pre-render before rendering

src/ol/renderer/canvas/TileLayer.js

@@ -4,7 +4,7 @@
 import {getUid} from '../../util.js';
 import TileRange from '../../TileRange.js';
 import TileState from '../../TileState.js';
-import {createEmpty, equals, getIntersection, isEmpty} from '../../extent.js';
+import {createEmpty, getIntersection} from '../../extent.js';
 import {createCanvasContext2D} from '../../dom.js';
 import CanvasLayerRenderer from './Layer.js';
 import {create as createTransform, compose as composeTransform} from '../../transform.js';
@@ -49,12 +49,6 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
      */
     this.renderedExtent_ = null;
 
-    /**
-     * @private
-     * @type {number}
-     */
-    this.renderedPixelRatio_ = 1;
-
     /**
      * @protected
      * @type {number}
@@ -144,6 +138,14 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
    * @inheritDoc
    */
   prepareFrame(frameState, layerState) {
+    return true;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  renderFrame(frameState, layerState) {
+    const context = this.context;
     const size = frameState.size;
     const viewState = frameState.viewState;
     const projection = viewState.projection;
@@ -163,10 +165,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     if (layerState.extent !== undefined) {
       extent = getIntersection(extent, layerState.extent);
     }
-    if (isEmpty(extent)) {
+
-      // Return false to prevent the rendering of the layer.
-      return false;
-    }
     // TODO: clip by layer extent
 
     const tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
@@ -238,9 +237,6 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       }
     }
 
-    if (this.newTiles_ || !this.renderedExtent_ || !equals(canvasExtent, this.renderedExtent_)) {
-
-      const context = this.context;
     const canvas = context.canvas;
     if (canvas.width != width || canvas.height != height) {
       canvas.width = width;
@@ -248,6 +244,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     } else {
       context.clearRect(0, 0, width, height);
     }
+    this.preRender(context, frameState);
 
     this.renderedTiles.length = 0;
     /** @type {Array<number>} */
@@ -281,16 +278,16 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       }
     }
 
+
     this.renderedRevision = sourceRevision;
     this.renderedResolution = tileResolution;
-      this.renderedPixelRatio_ = tilePixelRatio;
     this.renderedExtent_ = canvasExtent;
-    }
 
     const scale = this.renderedResolution / frameState.viewState.resolution;
     const halfWidth = width / 2;
     const halfHeight = height / 2;
 
+    // TODO: check where these are used and confirm they are correct
     const transform = composeTransform(
       this.imageTransform_,
       halfWidth, halfHeight,
@@ -305,39 +302,23 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       0,
       -viewCenter[0], -viewCenter[1]);
 
-
     this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
     this.manageTilePyramid(frameState, tileSource, tileGrid, pixelRatio,
       projection, extent, z, tileLayer.getPreload());
     this.scheduleExpireCache(frameState, tileSource);
 
-    return this.renderedTiles.length > 0;
-  }
-
-  /**
-   * @inheritDoc
-   */
-  renderFrame(frameState, layerState) {
-    const context = this.context;
-    this.preRender(context, frameState);
-
-    // consider moving work from prepareFrame to here
-
     this.postRender(context, frameState, layerState);
 
-    const canvas = context.canvas;
-
     const opacity = layerState.opacity;
     if (opacity !== canvas.style.opacity) {
       canvas.style.opacity = opacity;
     }
 
-    const rotation = frameState.viewState.rotation;
+    const canvasScale = this.renderedResolution / frameState.viewState.resolution / tilePixelRatio;
-    const scale = this.renderedResolution / frameState.viewState.resolution / this.renderedPixelRatio_;
 
-    const transform = 'rotate(' + rotation + 'rad) scale(' + scale + ')';
+    const canvasTransform = 'rotate(' + rotation + 'rad) scale(' + canvasScale + ')';
-    if (transform !== canvas.style.transform) {
+    if (canvasTransform !== canvas.style.transform) {
-      canvas.style.transform = transform;
+      canvas.style.transform = canvasTransform;
     }
 
     return canvas;