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

Fix&finish mistake highlight rect management

Browse Source 
Proposed solution was not complete, match.highlights is not an array
without a good reason, so checking only match.highlights[0] is never
a good idea. Should a grammar mistake wrap across more lines of text,
match.highlights gets one element per each part of the _same_ grammar
that spans one line of text. By not checking them all, popup failed
to appear when clicking on a grammar mistake following on the next line
of text.

Furthermore, the solution only addressed BesTreeService.onClick(), while
the same logic should be applied to BesPlainTextService.onClick() too.
This commit is contained in:
Simon Rozman 2024-06-10 14:40:57 +02:00
parent 55a075b927
commit f5257f1872
1 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
service2.js
View File

@ -176,13 +176,12 @@ class BesService {
* Creates grammar mistake markup in DOM.
*
* @param {Range} range Grammar mistake range
* @returns {Object} Client rectangles and grammar mistake highlight elements
* @returns {Array} Grammar mistake highlight elements
*/
addMistakeMarkup(range) {
const clientRects = range.getClientRects()
const scrollPanelRect = this.scrollPanel.getBoundingClientRect()
let highlights = []
for (let rect of clientRects) {
for (let rect of range.getClientRects()) {
const highlight = document.createElement('div')
highlight.classList.add('bes-typo-mistake')
highlight.style.left = `${rect.left - scrollPanelRect.left}px`
@ -192,7 +191,7 @@ class BesService {
this.scrollPanel.appendChild(highlight)
highlights.push(highlight)
}
return { clientRects, highlights }
return highlights
}
/**
@ -468,11 +467,8 @@ class BesTreeService extends BesService {
}
}
const { clientRects, highlights } =
this.addMistakeMarkup(range)
matches.push({
rects: clientRects,
highlights: highlights,
highlights: this.addMistakeMarkup(range),
range: range,
match: match
})
@ -539,10 +535,8 @@ class BesTreeService extends BesService {
repositionAllMarkup() {
this.results.forEach(result => {
result.matches.forEach(match => {
const { clientRects, highlights } = this.addMistakeMarkup(match.range)
match.rects = clientRects
if (match.highlights) match.highlights.forEach(h => h.remove())
match.highlights = highlights
match.highlights = this.addMistakeMarkup(match.range)
})
})
}
@ -696,24 +690,23 @@ class BesTreeService extends BesService {
const el = this.getBlockParent(source.targetElement || source.target)
if (!el) return
let resultMatch
for (let result of this.results) {
let match = result.matches.find(match => {
// This way we can check if the click was inside the rectangle of the highlight even if some content was removed or added.
// We used to check if the click was inside the stored rectangle coordinates which is not reliable because the content can change.
// But this way we can check if the click was inside the rectangle of the highlight even if some content was changed.
// TODO: what to do with rectLists inside match.rects?
let rect = match.highlights[0].getBoundingClientRect()
return BesService.isPointInRect(source.clientX, source.clientY, rect)
})
if (match) {
resultMatch = match
break
for (let m of result.matches) {
for (let h of m.highlights) {
if (
BesService.isPointInRect(
source.clientX,
source.clientY,
h.getBoundingClientRect()
)
) {
this.popupCorrectionPanel(el, m, source)
return
}
}
if (resultMatch) this.popupCorrectionPanel(el, resultMatch, source)
else BesPopup.hide()
}
}
BesPopup.hide()
}
}
@ -1179,11 +1172,8 @@ class BesPlainTextService extends BesService {
nodes[nodeIdx].node,
matchEnd - nodes[nodeIdx].start
)
const { clientRects, highlights } =
this.addMistakeMarkup(matchRange)
matches.push({
rects: clientRects,
highlights: highlights,
highlights: this.addMistakeMarkup(matchRange),
range: matchRange,
match: match
})
@ -1264,10 +1254,8 @@ class BesPlainTextService extends BesService {
repositionAllMarkup() {
this.results.forEach(result => {
result.matches.forEach(match => {
const { clientRects, highlights } = this.addMistakeMarkup(match.range)
match.rects = clientRects
if (match.highlights) match.highlights.forEach(h => h.remove())
match.highlights = highlights
match.highlights = this.addMistakeMarkup(match.range)
})
})
}
@ -1333,8 +1321,14 @@ class BesPlainTextService extends BesService {
for (let result of this.results) {
for (let m of result.matches) {
for (let r of m.rects) {
if (BesService.isPointInRect(source.clientX, source.clientY, r)) {
for (let h of m.highlights) {
if (
BesService.isPointInRect(
source.clientX,
source.clientY,
h.getBoundingClientRect()
)
) {
this.popupCorrectionPanel(result.range, m, source)
return
}