Merge pull request #13626 from MoonE/rendercomplete-wait-for-icons

Wait for icons to be loaded before firing rendercomplete event

src/ol/renderer/Layer.js

@@ -196,7 +196,11 @@ class LayerRenderer extends Observable {
    */
   renderIfReadyAndVisible() {
     const layer = this.getLayer();
-    if (layer.getVisible() && layer.getSourceState() == SourceState.READY) {
+    if (
+      layer &&
+      layer.getVisible() &&
+      layer.getSourceState() == SourceState.READY
+    ) {
       layer.changed();
     }
   }

src/ol/renderer/canvas/VectorLayer.js

@@ -62,12 +62,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
      */
     this.animatingOrInteracting_;
 
-    /**
-     * @private
-     * @type {boolean}
-     */
-    this.dirty_ = false;
-
     /**
      * @type {ImageData}
      */
@@ -523,7 +517,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const updateWhileInteracting = vectorLayer.getUpdateWhileInteracting();
 
     if (
-      (!this.dirty_ && !updateWhileAnimating && animating) ||
+      (this.ready && !updateWhileAnimating && animating) ||
       (!updateWhileInteracting && interacting)
     ) {
       this.animatingOrInteracting_ = true;
@@ -594,7 +588,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     }
 
     if (
-      !this.dirty_ &&
+      this.ready &&
       this.renderedResolution_ == resolution &&
       this.renderedRevision_ == vectorLayerRevision &&
       this.renderedRenderOrder_ == vectorLayerRenderOrder &&
@@ -611,8 +605,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     this.replayGroup_ = null;
 
-    this.dirty_ = false;
-
     const replayGroup = new CanvasBuilderGroup(
       getRenderTolerance(resolution, pixelRatio),
       extent,
@@ -650,7 +642,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     }
 
     const squaredTolerance = getSquaredRenderTolerance(resolution, pixelRatio);
-
+    let ready = true;
     const render =
       /**
        * @param {import("../../Feature.js").default} feature Feature.
@@ -672,7 +664,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
             userTransform,
             declutterBuilderGroup
           );
-          this.dirty_ = this.dirty_ || dirty;
+          ready = ready && !dirty;
         }
       }.bind(this);
 
@@ -686,6 +678,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       render(features[i]);
     }
     this.renderedFeatures_ = features;
+    this.ready = ready;
 
     const replayGroupInstructions = replayGroup.finish();
     const executorGroup = new ExecutorGroup(

src/ol/renderer/canvas/VectorTileLayer.js

@@ -85,12 +85,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     /** @private */
     this.boundHandleStyleImageChange_ = this.handleStyleImageChange_.bind(this);
 
-    /**
-     * @private
-     * @type {boolean}
-     */
-    this.dirty_ = false;
-
     /**
      * @private
      * @type {number}
@@ -194,10 +188,10 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    */
   prepareFrame(frameState) {
     const layerRevision = this.getLayer().getRevision();
-    if (this.renderedLayerRevision_ != layerRevision) {
+    if (this.renderedLayerRevision_ !== layerRevision) {
+      this.renderedLayerRevision_ = layerRevision;
       this.renderedTiles.length = 0;
     }
-    this.renderedLayerRevision_ = layerRevision;
     return super.prepareFrame(frameState);
   }
 
@@ -238,6 +232,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     if (declutter) {
       tile.declutterExecutorGroups[layerUid] = [];
     }
+    builderState.dirty = false;
     for (let t = 0, tt = sourceTiles.length; t < tt; ++t) {
       const sourceTile = sourceTiles[t];
       if (sourceTile.getState() != TileState.LOADED) {
@@ -255,7 +250,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       const bufferedExtent = equals(sourceTileExtent, sharedExtent)
         ? null
         : builderExtent;
-      builderState.dirty = false;
       const builderGroup = new CanvasBuilderGroup(
         0,
         builderExtent,
@@ -289,7 +283,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
             builderGroup,
             declutterBuilderGroup
           );
-          this.dirty_ = this.dirty_ || dirty;
           builderState.dirty = builderState.dirty || dirty;
         }
       };
@@ -673,10 +666,12 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const tiles = this.renderedTiles;
     const clips = [];
     const clipZs = [];
+    let ready = true;
     for (let i = tiles.length - 1; i >= 0; --i) {
       const tile = /** @type {import("../../VectorRenderTile.js").default} */ (
         tiles[i]
       );
+      ready = ready && !tile.getReplayState(layer).dirty;
       const executorGroups = tile.executorGroups[getUid(layer)].filter(
         (group) => group.hasExecutors(replayTypes)
       );
@@ -741,6 +736,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       }
     }
     context.globalAlpha = alpha;
+    this.ready = ready;
 
     return this.container;
   }

src/ol/renderer/vector.js

@@ -124,14 +124,13 @@ export function renderFeature(
   let loading = false;
   const imageStyle = style.getImage();
   if (imageStyle) {
-    let imageState = imageStyle.getImageState();
+    const imageState = imageStyle.getImageState();
     if (imageState == ImageState.LOADED || imageState == ImageState.ERROR) {
       imageStyle.unlistenImageChange(listener);
     } else {
       if (imageState == ImageState.IDLE) {
         imageStyle.load();
       }
-      imageState = imageStyle.getImageState();
       imageStyle.listenImageChange(listener);
       loading = true;
     }

test/browser/spec/ol/Map.test.js

@@ -22,9 +22,12 @@ import TileLayer from '../../../../src/ol/layer/Tile.js';
 import TileLayerRenderer from '../../../../src/ol/renderer/canvas/TileLayer.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
 import View from '../../../../src/ol/View.js';
 import WebGLPointsLayer from '../../../../src/ol/layer/WebGLPoints.js';
 import XYZ from '../../../../src/ol/source/XYZ.js';
+import {Icon, Style} from '../../../../src/ol/style.js';
 import {LineString, Point, Polygon} from '../../../../src/ol/geom.js';
 import {TRUE} from '../../../../src/ol/functions.js';
 import {
@@ -36,6 +39,7 @@ import {
 } from '../../../../src/ol/proj.js';
 import {createXYZ} from '../../../../src/ol/tilegrid.js';
 import {defaults as defaultInteractions} from '../../../../src/ol/interaction.js';
+import {shared as iconImageCache} from '../../../../src/ol/style/IconImageCache.js';
 import {tile as tileStrategy} from '../../../../src/ol/loadingstrategy.js';
 
 describe('ol/Map', function () {
@@ -403,105 +407,239 @@ describe('ol/Map', function () {
   });
 
   describe('rendercomplete event', function () {
-    let map;
+    let map, target;
+
     beforeEach(function () {
-      const target = document.createElement('div');
+      target = document.createElement('div');
       target.style.width = '100px';
       target.style.height = '100px';
       document.body.appendChild(target);
-      map = new Map({
-        target: target,
-        layers: [
-          new TileLayer({
-            opacity: 0.5,
-            source: new XYZ({
-              url: 'spec/ol/data/osm-{z}-{x}-{y}.png',
-            }),
-          }),
-          new ImageLayer({
-            source: new ImageStatic({
-              url: 'spec/ol/data/osm-0-0-0.png',
-              imageExtent: getProjection('EPSG:3857').getExtent(),
-              projection: 'EPSG:3857',
-            }),
-          }),
-          new VectorLayer({
-            source: new VectorSource({
-              url: 'spec/ol/data/point.json',
-              format: new GeoJSON(),
-            }),
-          }),
-          new VectorLayer({
-            source: new VectorSource({
-              url: 'spec/ol/data/point.json',
-              format: new GeoJSON(),
-              strategy: tileStrategy(createXYZ()),
-            }),
-          }),
-          new VectorLayer({
-            source: new VectorSource({
-              features: [new Feature(new Point([0, 0]))],
-            }),
-          }),
-          new VectorLayer({
-            source: new VectorSource({
-              loader: function (extent, resolution, projection) {
-                this.addFeature(new Feature(new Point([0, 0])));
-              },
-            }),
-          }),
-          new WebGLPointsLayer({
-            source: new VectorSource({
-              features: [new Feature(new Point([0, 0]))],
-            }),
-            style: {
-              symbol: {
-                color: 'red',
-                symbolType: 'circle',
-              },
-            },
-          }),
-        ],
-      });
     });
 
     afterEach(function () {
-      document.body.removeChild(map.getTargetElement());
+      disposeMap(map);
-      map.setTarget(null);
-      map.dispose();
       map.getLayers().forEach((layer) => layer.dispose());
     });
 
-    it('triggers when all tiles and sources are loaded and faded in', function (done) {
+    describe('renderer ready property', function () {
-      const layers = map.getLayers().getArray();
+      beforeEach(function () {
-      expect(layers[6].getRenderer().ready).to.be(false);
+        map = new Map({
-      map.once('rendercomplete', function () {
+          target: target,
-        expect(map.tileQueue_.getTilesLoading()).to.be(0);
+          layers: [
-        expect(layers[1].getSource().image_.getState()).to.be(
+            new TileLayer({
-          ImageState.LOADED
+              opacity: 0.5,
+              source: new XYZ({
+                url: 'spec/ol/data/osm-{z}-{x}-{y}.png',
+              }),
+            }),
+            new ImageLayer({
+              source: new ImageStatic({
+                url: 'spec/ol/data/osm-0-0-0.png',
+                imageExtent: getProjection('EPSG:3857').getExtent(),
+                projection: 'EPSG:3857',
+              }),
+            }),
+            new VectorLayer({
+              source: new VectorSource({
+                url: 'spec/ol/data/point.json',
+                format: new GeoJSON(),
+              }),
+            }),
+            new VectorLayer({
+              source: new VectorSource({
+                url: 'spec/ol/data/point.json',
+                format: new GeoJSON(),
+                strategy: tileStrategy(createXYZ()),
+              }),
+            }),
+            new VectorLayer({
+              source: new VectorSource({
+                features: [new Feature(new Point([0, 0]))],
+              }),
+            }),
+            new VectorLayer({
+              source: new VectorSource({
+                loader: function (extent, resolution, projection) {
+                  this.addFeature(new Feature(new Point([0, 0])));
+                },
+              }),
+            }),
+            new WebGLPointsLayer({
+              source: new VectorSource({
+                features: [new Feature(new Point([0, 0]))],
+              }),
+              style: {
+                symbol: {
+                  color: 'red',
+                  symbolType: 'circle',
+                },
+              },
+            }),
+          ],
+        });
+      });
+
+      it('triggers when all tiles and sources are loaded and faded in', function (done) {
+        const layers = map.getLayers().getArray();
+        expect(layers[6].getRenderer().ready).to.be(false);
+        map.once('rendercomplete', function () {
+          expect(map.tileQueue_.getTilesLoading()).to.be(0);
+          expect(layers[1].getSource().image_.getState()).to.be(
+            ImageState.LOADED
+          );
+          expect(layers[2].getSource().getFeatures().length).to.be(1);
+          expect(layers[6].getRenderer().ready).to.be(true);
+          done();
+        });
+        map.setView(
+          new View({
+            center: [0, 0],
+            zoom: 0,
+          })
         );
-        expect(layers[2].getSource().getFeatures().length).to.be(1);
-        expect(layers[6].getRenderer().ready).to.be(true);
-        done();
       });
-      map.setView(
+
-        new View({
+      it('ignores invisible layers', function (done) {
-          center: [0, 0],
+        map.getLayers().forEach((layer, i) => layer.setVisible(i === 4));
-          zoom: 0,
+        map.setView(
-        })
+          new View({
-      );
+            center: [0, 0],
+            zoom: 0,
+          })
+        );
+        map.once('rendercomplete', () => done());
+      });
     });
-    it('ignores invisible layers', function (done) {
+
-      map.getLayers().forEach(function (layer, i) {
+    describe('with icons', function () {
-        layer.setVisible(i === 4);
+      /** @type {Icon} */
+      let icon;
+      beforeEach(function () {
+        iconImageCache.clear();
+        icon = new Icon({
+          src: 'spec/ol/data/dot.png?delayed',
+        });
+
+        const delay = 100;
+        // Delay icon change events
+        let states = [{state: icon.getImageState()}];
+        icon.listenImageChange = function (listener) {
+          if (!listener._delay) {
+            listener._delay = (e) => {
+              const key = setTimeout(() => {
+                states.shift();
+                listener.call(this, e);
+              }, delay);
+              Object.assign(states[states.length - 1], {key, listener});
+              states.push({
+                state: Icon.prototype.getImageState.call(this),
+              });
+            };
+          }
+          return Icon.prototype.listenImageChange.call(this, listener._delay);
+        };
+        icon.unlistenImageChange = function (listener) {
+          states = states.filter((state) => {
+            if (state.listener !== listener) {
+              return true;
+            }
+            clearTimeout(listener.key);
+            return false;
+          });
+          const addedListener = listener._delay;
+          delete listener._delay;
+          return Icon.prototype.unlistenImageChange.call(this, addedListener);
+        };
+        icon.getImageState = function () {
+          return states[0].state;
+        };
+      });
+
+      it('waits for icons to be loaded with ol/renderer/canvas/VectorTileLayer', function (done) {
+        const delayIconAtTile = 1;
+        let tilesRequested = 0;
+        const tileSize = 64;
+        const tileGrid = createXYZ({tileSize: tileSize});
+        map = new Map({
+          target: target,
+          view: new View({
+            center: [0, 0],
+            resolution: 1,
+          }),
+          layers: [
+            new VectorTileLayer({
+              source: new VectorTileSource({
+                tileSize: tileSize,
+                tileUrlFunction: (tileCoord) => tileCoord.join('/'),
+                tileLoadFunction: function (tile, url) {
+                  const coordinate = tileGrid.getTileCoordCenter(
+                    tile.getTileCoord()
+                  );
+                  const feature = new Feature(new Point(coordinate));
+                  tile.setFeatures([feature]);
+                  if (tilesRequested++ === delayIconAtTile) {
+                    feature.setStyle(new Style({image: icon}));
+                  }
+                },
+              }),
+              style: new Style({
+                image: new Icon({
+                  src: 'spec/ol/data/dot.png',
+                }),
+              }),
+            }),
+          ],
+        });
+        let iconLoaded = false;
+        icon.listenImageChange(function (e) {
+          if (e.target.getImageState() === ImageState.LOADED) {
+            iconLoaded = true;
+          }
+        });
+        map.once('rendercomplete', function () {
+          try {
+            expect(tilesRequested).to.be.greaterThan(delayIconAtTile);
+            expect(iconLoaded).to.be(true);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+      });
+
+      it('waits for icons to be loaded with ol/renderer/canvas/VectorLayer', function (done) {
+        map = new Map({
+          target: target,
+          view: new View({
+            center: [0, 0],
+            resolution: 1,
+          }),
+          layers: [
+            new VectorLayer({
+              source: new VectorSource({
+                features: [new Feature(new Point([0, 0]))],
+              }),
+              style: new Style({
+                image: icon,
+              }),
+            }),
+          ],
+        });
+        let iconLoaded = false;
+        icon.listenImageChange(function (e) {
+          if (e.target.getImageState() === ImageState.LOADED) {
+            iconLoaded = true;
+          }
+        });
+        map.once('rendercomplete', function () {
+          try {
+            expect(iconLoaded).to.be(true);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
       });
-      map.setView(
-        new View({
-          center: [0, 0],
-          zoom: 0,
-        })
-      );
-      map.once('rendercomplete', () => done());
     });
   });
 

test/browser/spec/ol/layer/vectortile.test.js

@@ -1,9 +1,17 @@
+import Feature from '../../../../../src/ol/Feature.js';
 import GeoJSON from '../../../../../src/ol/format/GeoJSON.js';
+import ImageState from '../../../../../src/ol/ImageState.js';
 import Map from '../../../../../src/ol/Map.js';
 import VectorTileLayer from '../../../../../src/ol/layer/VectorTile.js';
 import VectorTileSource from '../../../../../src/ol/source/VectorTile.js';
 import View from '../../../../../src/ol/View.js';
-import {fromLonLat} from '../../../../../src/ol/proj.js';
+import {Icon, Style} from '../../../../../src/ol/style.js';
+import {Point} from '../../../../../src/ol/geom.js';
+import {create as createTransform} from '../../../../../src/ol/transform.js';
+import {createXYZ} from '../../../../../src/ol/tilegrid.js';
+import {fromLonLat, get as getProjection} from '../../../../../src/ol/proj.js';
+import {getUid} from '../../../../../src/ol/util.js';
+import {isEmpty} from '../../../../../src/ol/obj.js';
 
 describe('ol.layer.VectorTile', function () {
   describe('constructor (defaults)', function () {
@@ -150,4 +158,94 @@ describe('ol.layer.VectorTile', function () {
       });
     });
   });
+
+  describe('#renderFrame', function () {
+    /** @type {VectorTileLayer} */ let layer;
+
+    afterEach(function () {
+      layer.dispose();
+    });
+
+    it('sets ready property to false when icons are loading', function (done) {
+      const zoom = 1;
+      const tileSize = 32;
+      const projection = getProjection('EPSG:3857');
+      const tileGrid = createXYZ({tileSize: tileSize});
+      const resolution = tileGrid.getResolution(zoom);
+      layer = new VectorTileLayer({
+        renderBuffer: 0,
+        source: new VectorTileSource({
+          tileSize: tileSize,
+          tileUrlFunction: (tileCoord) => tileCoord.join('/'),
+          tileLoadFunction: function (tile, url) {
+            const coordinate = tileGrid.getTileCoordCenter(tile.getTileCoord());
+            tile.setFeatures([new Feature(new Point(coordinate))]);
+          },
+        }),
+        style: new Style({
+          image: new Icon({
+            src:
+              'data:image/svg+xml;base64,' +
+              window.btoa(`<svg width="10" height="10" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0" y="0" width="1" height="1"/>
+              </svg>`),
+          }),
+        }),
+      });
+      const renderer = layer.getRenderer();
+      const frameState =
+        /** @type {import("../../../../../src/ol/PluggableMap.js").FrameState} */ ({
+          pixelRatio: 1,
+          viewState: {
+            zoom: zoom,
+            resolution: resolution,
+            center: [0, 0],
+            rotation: 0,
+            projection: projection,
+          },
+          size: [2 * tileSize, 2 * tileSize],
+          extent: [-tileSize, -tileSize, tileSize, tileSize].map(
+            (n) => n * resolution
+          ),
+          viewHints: [0, 0],
+          layerStatesArray: layer.getLayerStatesArray(),
+          layerIndex: 0,
+          wantedTiles: {},
+          usedTiles: {},
+          tileQueue: {isKeyQueued: () => true},
+          pixelToCoordinateTransform: createTransform(),
+        });
+
+      renderer.renderFrame(frameState);
+      // Tiles not yet loaded, no icon queued
+      expect(renderer.ready).to.be(true);
+      const source = layer.getSource();
+      const wantedTiles = frameState.wantedTiles[getUid(source)];
+      expect(isEmpty(wantedTiles)).to.be(false);
+
+      // Tiles are loaded synchronously
+      source.tileCache.forEach((tile) => tile.load());
+
+      renderer.renderFrame(frameState);
+      // Tiles loaded, waiting for icon
+      expect(renderer.ready).to.be(false);
+
+      layer
+        .getStyle()
+        .getImage()
+        .listenImageChange(function (evt) {
+          if (evt.target.getImageState() !== ImageState.LOADED) {
+            return;
+          }
+          try {
+            renderer.renderFrame(frameState);
+            // Tiles and icon loaded
+            expect(renderer.ready).to.be(true);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+    });
+  });
 });