diff --git a/service.js b/service.js index 863d8db..f43ded7 100644 --- a/service.js +++ b/service.js @@ -840,21 +840,21 @@ class BesService { * Creates auxiliary DOM elements for text adornments. */ createCorrectionPanel() { - this.panelParent = document.createElement('div') - this.panelParent.classList.add('bes-correction-panel-parent') - this.correctionPanel = document.createElement('div') this.correctionPanel.classList.add('bes-correction-panel') + this.scrollPanel = document.createElement('div') + this.scrollPanel.classList.add('bes-scroll-panel') + this.canvasPanel = document.createElement('canvas') this.canvasPanel.classList.add('bes-canvas') this.ctx = this.canvasPanel.getContext('2d') this.ctx.scale(1, 1) - this.panelParent.appendChild(this.correctionPanel) - this.correctionPanel.appendChild(this.canvasPanel) + this.correctionPanel.appendChild(this.scrollPanel) + this.scrollPanel.appendChild(this.canvasPanel) this.textElement.parentElement.insertBefore( - this.panelParent, + this.correctionPanel, this.textElement ) this.setCorrectionPanelSize() @@ -864,7 +864,7 @@ class BesService { * Clears auxiliary DOM elements for text adornments. */ clearCorrectionPanel() { - this.panelParent.remove() + this.correctionPanel.remove() } /** @@ -875,12 +875,12 @@ class BesService { const styles = window.getComputedStyle(this.hostElement) const hostRect = this.hostElement.getBoundingClientRect() // Sync margins one by one. Firefox is not happy when syncing all at once. - this.correctionPanel.style.marginLeft = styles.marginLeft - this.correctionPanel.style.marginTop = styles.marginTop - this.correctionPanel.style.marginRight = styles.marginRight - this.correctionPanel.style.marginBottom = styles.marginBottom - this.correctionPanel.style.boxSizing = styles.boxSizing - this.correctionPanel.style.scrollBehavior = styles.scrollBehavior + this.scrollPanel.style.marginLeft = styles.marginLeft + this.scrollPanel.style.marginTop = styles.marginTop + this.scrollPanel.style.marginRight = styles.marginRight + this.scrollPanel.style.marginBottom = styles.marginBottom + this.scrollPanel.style.boxSizing = styles.boxSizing + this.scrollPanel.style.scrollBehavior = styles.scrollBehavior this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px` this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px` const dpr = window.devicePixelRatio @@ -902,11 +902,11 @@ class BesService { parseFloat(styles.width) + parseFloat(styles.marginRight) + parseFloat(styles.paddingRight) - this.correctionPanel.style.width = `${totalWidth}px` - this.correctionPanel.style.height = styles.height + this.scrollPanel.style.width = `${totalWidth}px` + this.scrollPanel.style.height = styles.height } else { - this.correctionPanel.style.width = `${hostRect.width}px` - this.correctionPanel.style.height = `${hostRect.height}px` + this.scrollPanel.style.width = `${hostRect.width}px` + this.scrollPanel.style.height = `${hostRect.height}px` } this.enableMutationObserver() } @@ -1357,6 +1357,7 @@ class BesTreeService extends BesService { const source = event?.detail !== 1 ? event?.detail : event const el = this.getBlockParent(source.targetElement || source.target) if (!el) return + // TODO: Adjust source.clientX and source.clientY for scrolling offset. const pointsInRect = [] for (let result of this.results) { for (let m of result.matches) { @@ -2021,6 +2022,7 @@ class BesPlainTextService extends BesService { const source = event?.detail !== 1 ? event?.detail : event const el = source.targetElement || source.target || this.hostElement if (!el) return + // TODO: Adjust source.clientX and source.clientY for scrolling offset. const pointsInRect = [] for (let result of this.results) { for (let m of result.matches) { diff --git a/styles.css b/styles.css index 13c5f53..0eeb5df 100644 --- a/styles.css +++ b/styles.css @@ -23,7 +23,7 @@ } /* Styles required to ensure full functionality and optimal user experience. */ -.bes-correction-panel-parent { +.bes-correction-panel { position: relative; overflow: visible; float: left; @@ -34,7 +34,7 @@ z-index: 1; } -.bes-correction-panel { +.bes-scroll-panel { position: relative; overflow: hidden; border-color: transparent;