Use the inverse pixel transform in pre/post render events

src/ol/render.js

@@ -92,7 +92,7 @@ export function toContext(context, opt_options) {
  */
 export function getVectorContext(event) {
   const frameState = event.frameState;
-  const transform = multiplyTransform(invertTransform(event.pixelTransform.slice()), frameState.coordinateToPixelTransform);
+  const transform = multiplyTransform(event.inversePixelTransform.slice(), frameState.coordinateToPixelTransform);
   return new CanvasImmediateRenderer(
     event.context, frameState.pixelRatio, frameState.extent, transform,
     frameState.viewState.rotation);
@@ -108,6 +108,6 @@ export function getVectorContext(event) {
  */
 export function getPixelFromPixel(event, pixel) {
   const result = pixel.slice(0);
-  applyTransform(invertTransform(event.pixelTransform.slice()), result);
+  applyTransform(event.inversePixelTransform.slice(), result);
   return result;
 }

src/ol/render/Event.js

@@ -8,22 +8,23 @@ class RenderEvent extends Event {
 
   /**
    * @param {import("./EventType.js").default} type Type.
-   * @param {import("../transform.js").Transform=} opt_pixelTransform Transform.
+   * @param {import("../transform.js").Transform=} opt_inversePixelTransform Transform for
+   *     CSS pixels to rendered pixels.
    * @param {import("../PluggableMap.js").FrameState=} opt_frameState Frame state.
    * @param {?CanvasRenderingContext2D=} opt_context Context.
    * @param {?import("../webgl/Helper.js").default=} opt_glContext WebGL Context.
    */
-  constructor(type, opt_pixelTransform, opt_frameState, opt_context, opt_glContext) {
+  constructor(type, opt_inversePixelTransform, opt_frameState, opt_context, opt_glContext) {
 
     super(type);
 
     /**
-     * Transform from css pixels (relative to the top-left corner of the map viewport)
-     * to render pixel on this event's `context`.
+     * Transform from CSS pixels (relative to the top-left corner of the map viewport)
+     * to rendered pixels on this event's `context`.
      * @type {import("../transform.js").Transform|undefined}
      * @api
      */
-    this.pixelTransform = opt_pixelTransform;
+    this.inversePixelTransform = opt_inversePixelTransform;
 
     /**
      * An object representing the current render frame state.

src/ol/renderer/canvas/Layer.js

@@ -132,46 +132,32 @@ class CanvasLayerRenderer extends LayerRenderer {
    * @param {import("../../render/EventType.js").default} type Event type.
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @param {import("../../transform.js").Transform} pixelTransform Transform.
    * @private
    */
-  dispatchComposeEvent_(type, context, frameState, pixelTransform) {
+  dispatchRenderEvent_(type, context, frameState) {
     const layer = this.getLayer();
     if (layer.hasListener(type)) {
-      const composeEvent = new RenderEvent(type, pixelTransform, frameState,
-        context, null);
-      layer.dispatchEvent(composeEvent);
+      const event = new RenderEvent(type, this.inversePixelTransform_, frameState, context, null);
+      layer.dispatchEvent(event);
     }
   }
 
   /**
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @param {import("../../transform.js").Transform=} opt_transform Transform.
    * @protected
    */
-  preRender(context, frameState, opt_transform) {
-    this.dispatchComposeEvent_(RenderEventType.PRERENDER, context, frameState, opt_transform);
+  preRender(context, frameState) {
+    this.dispatchRenderEvent_(RenderEventType.PRERENDER, context, frameState);
   }
 
   /**
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @param {import("../../transform.js").Transform=} opt_transform Transform.
    * @protected
    */
-  postRender(context, frameState, opt_transform) {
-    this.dispatchComposeEvent_(RenderEventType.POSTRENDER, context, frameState, opt_transform);
-  }
-
-  /**
-   * @param {CanvasRenderingContext2D} context Context.
-   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @param {import("../../transform.js").Transform=} opt_transform Transform.
-   * @protected
-   */
-  dispatchRenderEvent(context, frameState, opt_transform) {
-    this.dispatchComposeEvent_(RenderEventType.RENDER, context, frameState, opt_transform);
+  postRender(context, frameState) {
+    this.dispatchRenderEvent_(RenderEventType.POSTRENDER, context, frameState);
   }
 
   /**

src/ol/renderer/canvas/TileLayer.js

@@ -246,7 +246,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       this.clipUnrotated(context, frameState, layerState.extent);
     }
 
-    this.preRender(context, frameState, pixelTransform);
+    this.preRender(context, frameState);
 
     this.renderedTiles.length = 0;
     /** @type {Array<number>} */
@@ -294,7 +294,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       projection, extent, z, tileLayer.getPreload());
     this.scheduleExpireCache(frameState, tileSource);
 
-    this.postRender(context, frameState, pixelTransform);
+    this.postRender(context, frameState);
 
     if (layerState.extent) {
       context.restore();

src/ol/renderer/canvas/VectorLayer.js

@@ -123,7 +123,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       context.clearRect(0, 0, width, height);
     }
 
-    this.preRender(context, frameState, pixelTransform);
+    this.preRender(context, frameState);
 
     const extent = frameState.extent;
     const viewState = frameState.viewState;
@@ -174,15 +174,11 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       }
     }
 
-    if (this.getLayer().hasListener(RenderEventType.RENDER)) {
-      this.dispatchRenderEvent(context, frameState, pixelTransform);
-    }
-
     if (clipped) {
       context.restore();
     }
 
-    this.postRender(context, frameState, pixelTransform);
+    this.postRender(context, frameState);
 
     const opacity = layerState.opacity;
     if (opacity !== canvas.style.opacity) {