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() {
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

4
styles.css
View File

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