Merge pull request #8368 from ahocevar/imagemode-render-listeners

Make render listeners work with image render mode

src/ol/layer/Heatmap.js

@@ -33,6 +33,11 @@ import Style from '../style/Style.js';
  * @property {string|function(module:ol/Feature):number} [weight='weight'] The feature
  * attribute to use for the weight or a function that returns a weight from a feature. Weight values
  * should range from 0 to 1 (and values outside will be clamped to that range).
+ * @property {module:ol/layer/VectorRenderType|string} [renderMode='vector'] Render mode for vector layers:
+ *  * `'image'`: Vector layers are rendered as images. Great performance, but point symbols and
+ *    texts are always rotated with the view and pixels are scaled during zoom animations.
+ *  * `'vector'`: Vector layers are rendered as vectors. Most accurate rendering even during
+ *    animations, but slower performance.
  * @property {module:ol/source/Vector} [source] Source.
  */
 

src/ol/renderer/canvas/VectorLayer.js

@@ -210,10 +210,10 @@ CanvasVectorLayerRenderer.prototype.compose = function(context, frameState, laye
     rotateAtOffset(replayContext, rotation,
       width / 2, height / 2);
 
+    if (hasRenderListeners) {
+      this.dispatchRenderEvent(replayContext, frameState, transform);
+    }
     if (replayContext != context) {
-      if (hasRenderListeners) {
-        this.dispatchRenderEvent(replayContext, frameState, transform);
-      }
       if (transparentLayer) {
         const mainContextAlpha = context.globalAlpha;
         context.globalAlpha = layerState.opacity;

test/spec/ol/renderer/canvas/vectorlayer.test.js

@@ -218,7 +218,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
     });
   });
 
-  describe('#prepareFrame', function() {
+  describe('#prepareFrame and #compose', function() {
     let frameState, projExtent, renderer, worldWidth, buffer;
 
     beforeEach(function() {
@@ -296,6 +296,24 @@ describe('ol.renderer.canvas.VectorLayer', function() {
       expect(renderer.replayGroupChanged).to.be(false);
     });
 
+    it.only('dispatches a render event when rendering to own context', function(done) {
+      const layer = renderer.getLayer();
+      layer.getSource().addFeature(new Feature(new Point([0, 0])));
+      layer.once('render', function() {
+        expect(true);
+        done();
+      });
+      frameState.extent = [-10000, -10000, 10000, 10000];
+      frameState.size = [100, 100];
+      frameState.viewState.center = [0, 0];
+      let composed = false;
+      if (renderer.prepareFrame(frameState, {})) {
+        composed = true;
+        renderer.compose(renderer.context, frameState, layer.getLayerState);
+      }
+      expect(composed).to.be(true);
+    });
+
   });
 
 });