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

Merge canvas and scroll panels

Browse Source
This commit is contained in:
Simon Rozman 2025-02-27 15:32:35 +01:00
parent f88b2fd1a0
commit 29dcd4c40d
2 changed files with 6 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
service.js
View File

@ -312,9 +312,8 @@ class BesService {
*/ */
onScroll() { onScroll() {
this.dismissPopup() this.dismissPopup()
// Scroll panel is "position: absolute", we need to keep it aligned with the host element. this.canvasPanel.style.top = `${-this.hostElement.scrollTop}px`
this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px` this.canvasPanel.style.left = `${-this.hostElement.scrollLeft}px`
this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
if (this.hostElement !== this.textElement) { if (this.hostElement !== this.textElement) {
this.textElement.scrollTop = this.hostElement.scrollTop this.textElement.scrollTop = this.hostElement.scrollTop
@ -362,9 +361,9 @@ class BesService {
*/ */
addMistakeMarkup(match) { addMistakeMarkup(match) {
const range = match.range const range = match.range
const scrollPanelRect = this.scrollPanel.getBoundingClientRect() const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
const scrollX = scrollPanelRect.left const scrollX = canvasPanelRect.left
const scrollY = scrollPanelRect.top const scrollY = canvasPanelRect.top
match.highlights = Array.from(range.getClientRects()) match.highlights = Array.from(range.getClientRects())
if (match.highlights.length === 0) return if (match.highlights.length === 0) return
const dpr = window.devicePixelRatio const dpr = window.devicePixelRatio
@ -848,17 +847,13 @@ class BesService {
this.correctionPanel = document.createElement('div') this.correctionPanel = document.createElement('div')
this.correctionPanel.classList.add('bes-correction-panel') 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 = document.createElement('canvas')
this.canvasPanel.classList.add('bes-canvas') this.canvasPanel.classList.add('bes-canvas')
this.ctx = this.canvasPanel.getContext('2d') this.ctx = this.canvasPanel.getContext('2d')
this.ctx.scale(1, 1) this.ctx.scale(1, 1)
panelParent.appendChild(this.correctionPanel) panelParent.appendChild(this.correctionPanel)
this.correctionPanel.appendChild(this.scrollPanel) this.correctionPanel.appendChild(this.canvasPanel)
this.scrollPanel.appendChild(this.canvasPanel)
this.textElement.parentElement.insertBefore(panelParent, this.textElement) this.textElement.parentElement.insertBefore(panelParent, this.textElement)
this.setCorrectionPanelSize() this.setCorrectionPanelSize()
} }
@ -868,7 +863,6 @@ class BesService {
*/ */
clearCorrectionPanel() { clearCorrectionPanel() {
this.correctionPanel.remove() this.correctionPanel.remove()
this.scrollPanel.remove()
this.canvasPanel.remove() this.canvasPanel.remove()
} }
@ -886,8 +880,6 @@ class BesService {
this.correctionPanel.style.marginBottom = styles.marginBottom this.correctionPanel.style.marginBottom = styles.marginBottom
this.correctionPanel.style.boxSizing = styles.boxSizing this.correctionPanel.style.boxSizing = styles.boxSizing
this.correctionPanel.style.scrollBehavior = styles.scrollBehavior 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.width = `${this.hostElement.scrollWidth}px`
this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px` this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
const dpr = window.devicePixelRatio const dpr = window.devicePixelRatio

4
styles.css
View File

@ -48,10 +48,6 @@
pointer-events: none; pointer-events: none;
} }
.bes-correction-panel-scroll {
position: relative;
}
.bes-text-panel { .bes-text-panel {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;