Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix redraw after zoom change

Browse Source 
Resize first, then repaint. The Range.getClientRects() is returning
funny coordinates before resize.
This commit is contained in:
Simon Rozman 2025-02-28 15:03:54 +01:00
parent 32690de8a7
commit 2dd06fcef4
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
service.js
View File

@ -976,23 +976,6 @@ class BesService {
this.disableMutationObserver() this.disableMutationObserver()
const styles = window.getComputedStyle(this.hostElement) 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. // Note: Firefox is not happy when syncing all margins at once.
this.scrollPanel.style.marginLeft = styles.marginLeft this.scrollPanel.style.marginLeft = styles.marginLeft
@ -1016,6 +999,24 @@ class BesService {
this.scrollPanel.style.height = `${hostRect.height}px` 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() this.enableMutationObserver()
} }