From 2dd06fcef43b96ac0a4f43adac81f0f6221b9f51 Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Fri, 28 Feb 2025 15:03:54 +0100
Subject: [PATCH] Fix redraw after zoom change

Resize first, then repaint. The Range.getClientRects() is returning
funny coordinates before resize.
---
 service.js | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/service.js b/service.js
index fc89217..69c6d25 100644
--- a/service.js
+++ b/service.js
@@ -976,23 +976,6 @@ class BesService {
     this.disableMutationObserver()
 
     const styles = window.getComputedStyle(this.hostElement)
-    this.textFont = styles.fontFamily
-
-    // Resize canvas if needed.
-    this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
-    this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
-    const dpr = window.devicePixelRatio
-    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
-    const newCanvasWidth = Math.round(canvasPanelRect.width * dpr)
-    const newCanvasHeight = Math.round(canvasPanelRect.height * dpr)
-    if (
-      this.canvasPanel.width !== newCanvasWidth ||
-      this.canvasPanel.height !== newCanvasHeight
-    ) {
-      this.canvasPanel.width = newCanvasWidth
-      this.canvasPanel.height = newCanvasHeight
-      this.redrawAllMistakeMarkup()
-    }
 
     // Note: Firefox is not happy when syncing all margins at once.
     this.scrollPanel.style.marginLeft = styles.marginLeft
@@ -1016,6 +999,24 @@ class BesService {
       this.scrollPanel.style.height = `${hostRect.height}px`
     }
 
+    this.textFont = styles.fontFamily
+
+    // Resize canvas if needed.
+    this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
+    this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
+    const dpr = window.devicePixelRatio
+    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
+    const newCanvasWidth = Math.round(canvasPanelRect.width * dpr)
+    const newCanvasHeight = Math.round(canvasPanelRect.height * dpr)
+    if (
+      this.canvasPanel.width !== newCanvasWidth ||
+      this.canvasPanel.height !== newCanvasHeight
+    ) {
+      this.canvasPanel.width = newCanvasWidth
+      this.canvasPanel.height = newCanvasHeight
+      this.redrawAllMistakeMarkup()
+    }
+
     this.enableMutationObserver()
   }