From 29dcd4c40d77dfa91e20ebedb3830bcf32550afb Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Thu, 27 Feb 2025 15:32:35 +0100
Subject: [PATCH] Merge canvas and scroll panels

---
 service.js | 20 ++++++--------------
 styles.css |  4 ----
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/service.js b/service.js
index ae3e7a6..113b798 100644
--- a/service.js
+++ b/service.js
@@ -312,9 +312,8 @@ class BesService {
    */
   onScroll() {
     this.dismissPopup()
-    // Scroll panel is "position: absolute", we need to keep it aligned with the host element.
-    this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px`
-    this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
+    this.canvasPanel.style.top = `${-this.hostElement.scrollTop}px`
+    this.canvasPanel.style.left = `${-this.hostElement.scrollLeft}px`
 
     if (this.hostElement !== this.textElement) {
       this.textElement.scrollTop = this.hostElement.scrollTop
@@ -362,9 +361,9 @@ class BesService {
    */
   addMistakeMarkup(match) {
     const range = match.range
-    const scrollPanelRect = this.scrollPanel.getBoundingClientRect()
-    const scrollX = scrollPanelRect.left
-    const scrollY = scrollPanelRect.top
+    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
+    const scrollX = canvasPanelRect.left
+    const scrollY = canvasPanelRect.top
     match.highlights = Array.from(range.getClientRects())
     if (match.highlights.length === 0) return
     const dpr = window.devicePixelRatio
@@ -848,17 +847,13 @@ class BesService {
     this.correctionPanel = document.createElement('div')
     this.correctionPanel.classList.add('bes-correction-panel')
 
-    this.scrollPanel = document.createElement('div')
-    this.scrollPanel.classList.add('bes-correction-panel-scroll')
-
     this.canvasPanel = document.createElement('canvas')
     this.canvasPanel.classList.add('bes-canvas')
     this.ctx = this.canvasPanel.getContext('2d')
     this.ctx.scale(1, 1)
 
     panelParent.appendChild(this.correctionPanel)
-    this.correctionPanel.appendChild(this.scrollPanel)
-    this.scrollPanel.appendChild(this.canvasPanel)
+    this.correctionPanel.appendChild(this.canvasPanel)
     this.textElement.parentElement.insertBefore(panelParent, this.textElement)
     this.setCorrectionPanelSize()
   }
@@ -868,7 +863,6 @@ class BesService {
    */
   clearCorrectionPanel() {
     this.correctionPanel.remove()
-    this.scrollPanel.remove()
     this.canvasPanel.remove()
   }
 
@@ -886,8 +880,6 @@ class BesService {
     this.correctionPanel.style.marginBottom = styles.marginBottom
     this.correctionPanel.style.boxSizing = styles.boxSizing
     this.correctionPanel.style.scrollBehavior = styles.scrollBehavior
-    this.scrollPanel.style.width = `${this.hostElement.scrollWidth}px`
-    this.scrollPanel.style.height = `${this.hostElement.scrollHeight}px`
     this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
     this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
     const dpr = window.devicePixelRatio
diff --git a/styles.css b/styles.css
index e579d82..43e2041 100644
--- a/styles.css
+++ b/styles.css
@@ -48,10 +48,6 @@
   pointer-events: none;
 }
 
-.bes-correction-panel-scroll {
-  position: relative;
-}
-
 .bes-text-panel {
   position: absolute;
   overflow: hidden;