From 69f8a824ec4204937b90e3e3fb54a44807a93ffd Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Thu, 24 Feb 2022 10:53:32 +0000
Subject: [PATCH] Check for resolution change and fix unrotated size

Calculate unrotated width and height from frame size and resolution
Check for changes in resolution as well as extent when rendered extent fits inside frame
---
 src/ol/layer/Graticule.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/ol/layer/Graticule.js b/src/ol/layer/Graticule.js
index a342f55af5..d22c518511 100644
--- a/src/ol/layer/Graticule.js
+++ b/src/ol/layer/Graticule.js
@@ -20,7 +20,6 @@ import {
   containsExtent,
   equals,
   getCenter,
-  getHeight,
   getIntersection,
   getWidth,
   intersects,
@@ -484,9 +483,16 @@ class Graticule extends VectorLayer {
 
     /**
      * @type {?import("../extent.js").Extent}
+     * @private
      */
     this.renderedExtent_ = null;
 
+    /**
+     * @type {?number}
+     * @private
+     */
+    this.renderedResolution_ = null;
+
     this.setRenderOrder(null);
   }
 
@@ -536,10 +542,15 @@ class Graticule extends VectorLayer {
     ];
     const renderExtent = getIntersection(layerExtent, extent);
 
-    if (this.renderedExtent_ && equals(this.renderedExtent_, renderExtent)) {
+    if (
+      this.renderedExtent_ &&
+      equals(this.renderedExtent_, renderExtent) &&
+      this.renderedResolution_ === resolution
+    ) {
       return;
     }
     this.renderedExtent_ = renderExtent;
+    this.renderedResolution_ = resolution;
 
     // bail out if nothing to render
     if (isEmpty(renderExtent)) {
@@ -670,16 +681,14 @@ class Graticule extends VectorLayer {
    */
   drawLabels_(event) {
     const rotation = event.frameState.viewState.rotation;
+    const resolution = event.frameState.viewState.resolution;
+    const size = event.frameState.size;
     const extent = event.frameState.extent;
     const rotationCenter = getCenter(extent);
     let rotationExtent = extent;
     if (rotation) {
-      const width = getWidth(extent);
-      const height = getHeight(extent);
-      const cr = Math.abs(Math.cos(rotation));
-      const sr = Math.abs(Math.sin(rotation));
-      const unrotatedWidth = (sr * height - cr * width) / (sr * sr - cr * cr);
-      const unrotatedHeight = (sr * width - cr * height) / (sr * sr - cr * cr);
+      const unrotatedWidth = size[0] * resolution;
+      const unrotatedHeight = size[1] * resolution;
       rotationExtent = [
         rotationCenter[0] - unrotatedWidth / 2,
         rotationCenter[1] - unrotatedHeight / 2,