Avoid duplicate precompose and postcompose events

src/ol/renderer/canvas/ImageLayer.js

@@ -161,7 +161,7 @@ CanvasImageLayerRenderer.prototype.prepareFrame = function(frameState, layerStat
           !equals(skippedFeatures, this.skippedFeatures_))) {
         context.canvas.width = imageFrameState.size[0] * pixelRatio;
         context.canvas.height = imageFrameState.size[1] * pixelRatio;
-        vectorRenderer.composeFrame(imageFrameState, layerState, context);
+        vectorRenderer.compose(imageFrameState, layerState, context);
         this.image_ = new ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas);
         this.skippedFeatures_ = skippedFeatures;
       }

src/ol/renderer/canvas/VectorLayer.js

@@ -116,10 +116,12 @@ CanvasVectorLayerRenderer.prototype.disposeInternal = function() {
 
 
 /**
- * @inheritDoc
+ * @param {CanvasRenderingContext2D} context Context.
+ * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
+ * @param {module:ol/layer/Layer~State} layerState Layer state.
+ * @param {module:ol/transform~Transform} transform Transform.
  */
-CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerState, context) {
-
+CanvasVectorLayerRenderer.prototype.compose = function(context, frameState, layerState) {
   const extent = frameState.extent;
   const pixelRatio = frameState.pixelRatio;
   const skippedFeatureUids = layerState.managed ?
@@ -132,8 +134,6 @@ CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerSta
 
   let transform = this.getTransform(frameState, 0);
 
-  this.preCompose(context, frameState, transform);
-
   // clipped rendering if layer extent is set
   const clipExtent = layerState.extent;
   const clipped = clipExtent !== undefined;
@@ -207,8 +207,6 @@ CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerSta
         replayGroup.replay(replayContext, transform, rotation, skippedFeatureUids);
         startX -= worldWidth;
       }
-      // restore original transform for render and compose events
-      transform = this.getTransform(frameState, 0);
     }
     rotateAtOffset(replayContext, rotation,
       width / 2, height / 2);
@@ -236,8 +234,17 @@ CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerSta
   if (clipped) {
     context.restore();
   }
-  this.postCompose(context, frameState, layerState, transform);
+};
 
+
+/**
+ * @inheritDoc
+ */
+CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerState, context) {
+  const transform = this.getTransform(frameState, 0);
+  this.preCompose(context, frameState, transform);
+  this.compose(context, frameState, layerState);
+  this.postCompose(context, frameState, layerState, transform);
 };
 
 

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

@@ -2,6 +2,8 @@ import Map from '../../../../../src/ol/Map.js';
 import View from '../../../../../src/ol/View.js';
 import ImageLayer from '../../../../../src/ol/layer/Image.js';
 import VectorLayer from '../../../../../src/ol/layer/Vector.js';
+import Feature from '../../../../../src/ol/Feature.js';
+import Point from '../../../../../src/ol/geom/Point.js';
 import Projection from '../../../../../src/ol/proj/Projection.js';
 import Static from '../../../../../src/ol/source/ImageStatic.js';
 import VectorSource from '../../../../../src/ol/source/Vector.js';
@@ -106,10 +108,10 @@ describe('ol.renderer.canvas.ImageLayer', function() {
     });
 
     afterEach(function() {
+      layer.dispose();
       vectorRenderer1.dispose();
       vectorRenderer2.dispose();
       imageRenderer.dispose();
-      layer.dispose();
     });
 
     it('cleans up an existing vectorRenderer', function() {
@@ -119,6 +121,54 @@ describe('ol.renderer.canvas.ImageLayer', function() {
       imageRenderer.setVectorRenderer(vectorRenderer2);
       expect(spy.called).to.be(true);
     });
+
+  });
+
+  describe('Vector image rendering', function() {
+    let map, div, layer;
+
+    beforeEach(function() {
+      layer = new VectorLayer({
+        renderMode: 'image',
+        source: new VectorSource({
+          features: [new Feature(new Point([0, 0]))]
+        })
+      });
+
+      div = document.createElement('div');
+      div.style.width = div.style.height = '100px';
+      document.body.appendChild(div);
+      map = new Map({
+        target: div,
+        layers: [layer],
+        view: new View({
+          center: [0, 0],
+          zoom: 2
+        })
+      });
+    });
+
+    afterEach(function() {
+      map.setTarget(null);
+      document.body.removeChild(div);
+      map.dispose();
+    });
+
+    it('dispatches precompose and postcompose events on the vector layer', function(done) {
+      let precompose = 0;
+      let postcompose = 0;
+      layer.on('precompose', function() {
+        ++precompose;
+      });
+      layer.on('postcompose', function() {
+        ++postcompose;
+      });
+      map.once('postrender', function() {
+        expect(precompose).to.be(1);
+        expect(postcompose).to.be(1);
+        done();
+      });
+    });
   });
 
 });