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

Enhance logic for rendering mistakes post-scroll and optimize the clearMistakesMarkup function

Browse Source
This commit is contained in:
Aljaž Grilc 2024-02-22 11:48:29 +01:00
parent cee4cb90a8
commit 1b2483ee54
1 changed files with 33 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
online-editor.js
View File

@ -133,9 +133,14 @@ class BesEditor {
}
}
const { clientRects, highlight } = this.addMistakeMarkup(
range,
this.scrollPanel
)
matches.push({
rects: clientRects,
highlight: highlight,
range: range,
rects: this.addMistakeMarkup(range, this.scrollPanel),
match: match
})
})
@ -243,21 +248,9 @@ class BesEditor {
this.children
.filter(child => child.elements === el)
.forEach(child => {
// TODO: Remove elements that are found in editor object, that way we can avoid looping through all elements.
child.matches.forEach(match => {
for (const rect of match.rects) {
for (let child of this.scrollPanel.children) {
let childRect = child.getBoundingClientRect()
const isWithinRect =
childRect.left >= rect.left &&
childRect.right <= rect.right &&
childRect.top >= rect.top &&
childRect.bottom <= rect.bottom + 20
if (isWithinRect) {
child.remove()
}
}
}
match.highlight.remove()
delete match.highlight
})
})
}
@ -272,7 +265,12 @@ class BesEditor {
editor.children.forEach(child => {
this.clearMistakeMarkup(child.elements)
child.matches.forEach(match => {
match.rects = this.addMistakeMarkup(match.range, this.scrollPanel)
const { clientRects, highlight } = this.addMistakeMarkup(
match.range,
this.scrollPanel
)
match.rects = clientRects
match.highlight = highlight
})
})
}
@ -282,9 +280,9 @@ class BesEditor {
// TODO: Consider using range.getClientRects() instead of range.getBoundingClientRect()
const clientRects = range.getClientRects()
const scrollPanelRect = scrollPanel.getBoundingClientRect()
const highlight = document.createElement('div')
for (let i = 0, n = clientRects.length; i < n; ++i) {
const rect = clientRects[i]
const highlight = document.createElement('div')
highlight.classList.add('bes-typo-mistake')
const topPosition = rect.top - scrollPanelRect.top
const leftPosition = rect.left - scrollPanelRect.left
@ -294,7 +292,7 @@ class BesEditor {
highlight.style.height = `${rect.height}px`
this.scrollPanel.appendChild(highlight)
}
return clientRects
return { clientRects, highlight }
}
// Tests if given element is block element.
@ -399,6 +397,9 @@ class BesEditor {
handleScrollEvent(editor, scrollPanel) {
scrollPanel.style.top = -editor.scrollTop + 'px'
this.offsetTop = editor.scrollTop
setTimeout(() => {
this.repositionMistakes(this)
}, 300)
}
static findParent(target) {
@ -416,7 +417,7 @@ class BesEditor {
for (let m of matches) {
if (m.rects) {
for (let r of m.rects) {
if (BesEditor.isPointInRect(clientX, clientY, r, editor.offsetTop)) {
if (BesEditor.isPointInRect(clientX, clientY, r)) {
popup.changeText(m.match.message)
m.match.replacements.forEach(replacement => {
popup.appendReplacements(
@ -507,22 +508,13 @@ class BesEditor {
scrollPanel.style.height = editor.scrollHeight + 'px'
}
static isPointInRect(x, y, rect, offsetTop) {
if (!offsetTop) {
static isPointInRect(x, y, rect) {
return (
x >= rect.x &&
x < rect.x + rect.width &&
y >= rect.y &&
y < rect.y + rect.height
)
} else {
return (
x >= rect.x &&
x < rect.x + rect.width &&
y >= rect.y - offsetTop &&
y < rect.y + rect.height - offsetTop
)
}
}
}
@ -543,7 +535,12 @@ window.onresize = () => {
editor.children.forEach(child => {
editor.clearMistakeMarkup(child.elements)
child.matches.forEach(match => {
match.rects = editor.addMistakeMarkup(match.range, editor.scrollPanel)
const { clientRects, highlight } = editor.addMistakeMarkup(
match.range,
editor.scrollPanel
)
match.rects = clientRects
match.highlight = highlight
})
})
})