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

Compare commits

base: Amebis:32690de8a7f7a114d5754c25a39f8d6f5d7e706c
Branches Tags
Amebis:master
Amebis:api-v1
..
compare: Amebis:b6c825cc836b3b6a8c50dffad1812055b63b4ba8
Branches Tags
Amebis:master
Amebis:api-v1

No commits in common. "32690de8a7f7a114d5754c25a39f8d6f5d7e706c" and "b6c825cc836b3b6a8c50dffad1812055b63b4ba8" have entirely different histories.
32690de8a7 ... b6c825cc83

2 changed files with 31 additions and 65 deletions
Show Stats Expand all files Collapse all files

4
samples/markup-style.html
View File

@ -75,8 +75,8 @@ Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi
let my_ckeditor = null let my_ckeditor = null
ClassicEditor.create(document.querySelector('#ckeditor-control')) ClassicEditor.create(document.querySelector('#ckeditor-control'))
.then(newEditor => { .then(newEditor => {
my_ckeditor = newEditor.ui.view.editable.element my_ckeditor = newEditor
BesCKService.register(my_ckeditor, newEditor, new BesCKStatusIconEventSink()) BesCKService.register(newEditor.ui.view.editable.element, newEditor, new BesCKStatusIconEventSink())
}) })
.catch(error => console.error(error)) .catch(error => console.error(error))
</script> </script>

92
service.js
View File

@ -362,13 +362,14 @@ class BesService {
* @param {*} match Grammar checking rule match * @param {*} match Grammar checking rule match
*/ */
drawMistakeMarkup(match) { drawMistakeMarkup(match) {
const canvasPanelRect = this.canvasPanel.getBoundingClientRect() const range = match.range
match.highlights = BesService.getClientRects( match.highlights = Array.from(range.getClientRects())
match.range,
canvasPanelRect.x,
canvasPanelRect.y
)
if (match.highlights.length === 0) return if (match.highlights.length === 0) return
const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
for (let rect of match.highlights) {
rect.x -= canvasPanelRect.x
rect.y -= canvasPanelRect.y
}
const dpr = window.devicePixelRatio const dpr = window.devicePixelRatio
this.ctx.lineWidth = 2 * dpr // Use 2 for clearer visibility this.ctx.lineWidth = 2 * dpr // Use 2 for clearer visibility
const ruleId = match.match.rule.id const ruleId = match.match.rule.id
@ -485,29 +486,21 @@ class BesService {
const scale = (markerY2 - markerY1) / 18 const scale = (markerY2 - markerY1) / 18
if (/^\s+$/.test(toRemove)) { if (/^\s+$/.test(toRemove)) {
const rect = BesService.getClientRects( const rect = this.makeRange(
this.makeRange( match.data,
match.data, match.match.offset,
match.match.offset, match.match.offset - lengthDiff
match.match.offset - lengthDiff )?.getClientRects()[0]
),
canvasPanelRect.x,
canvasPanelRect.y
)[0]
const x = (rect.left + rect.right) / 2 const x = (rect.left + rect.right) / 2
const y1 = rect.top const y1 = rect.top
const y2 = rect.bottom const y2 = rect.bottom
this.drawWrongSpacing(x, y1, y2, scale) this.drawWrongSpacing(x, y1, y2, scale)
} else { } else {
for (let rect of BesService.getClientRects( for (let rect of this.makeRange(
this.makeRange( match.data,
match.data, match.match.offset,
match.match.offset, match.match.offset - lengthDiff
match.match.offset - lengthDiff )?.getClientRects())
),
canvasPanelRect.x,
canvasPanelRect.y
))
this.drawExcessiveText( this.drawExcessiveText(
rect.left, rect.left,
rect.bottom, rect.bottom,
@ -523,29 +516,21 @@ class BesService {
const scale = (markerY2 - markerY1) / 18 const scale = (markerY2 - markerY1) / 18
if (/^\s+$/.test(toRemove)) { if (/^\s+$/.test(toRemove)) {
const rect = BesService.getClientRects( const rect = this.makeRange(
this.makeRange( match.data,
match.data, match.match.offset + match.match.length + lengthDiff,
match.match.offset + match.match.length + lengthDiff, match.match.offset + match.match.length
match.match.offset + match.match.length )?.getClientRects()[0]
),
canvasPanelRect.x,
canvasPanelRect.y
)[0]
const x = (rect.left + rect.right) / 2 const x = (rect.left + rect.right) / 2
const y1 = rect.top const y1 = rect.top
const y2 = rect.bottom const y2 = rect.bottom
this.drawWrongSpacing(x, y1, y2, scale) this.drawWrongSpacing(x, y1, y2, scale)
} else { } else {
for (let rect of BesService.getClientRects( for (let rect of this.makeRange(
this.makeRange( match.data,
match.data, match.match.offset + match.match.length + lengthDiff,
match.match.offset + match.match.length + lengthDiff, match.match.offset + match.match.length
match.match.offset + match.match.length )?.getClientRects())
),
canvasPanelRect.x,
canvasPanelRect.y
))
this.drawExcessiveText( this.drawExcessiveText(
rect.left, rect.left,
rect.bottom, rect.bottom,
@ -589,14 +574,12 @@ class BesService {
} }
} else { } else {
// Patch differences. // Patch differences.
const rects = BesService.getClientRects( const rects = Array.from(
this.makeRange( this.makeRange(
match.data, match.data,
match.match.offset + lengthL, match.match.offset + lengthL,
match.match.offset + match.match.length - lengthR match.match.offset + match.match.length - lengthR
), )?.getClientRects()
canvasPanelRect.x,
canvasPanelRect.y
) )
markerY1 = Math.min(...rects.map(rect => rect.top)) markerY1 = Math.min(...rects.map(rect => rect.top))
markerY2 = Math.max(...rects.map(rect => rect.bottom)) markerY2 = Math.max(...rects.map(rect => rect.bottom))
@ -880,23 +863,6 @@ class BesService {
this.ctx.stroke() this.ctx.stroke()
} }
/**
* Calculates rectangles covering a given range and compensates for scroll offset
*
* @param {Range} range Range to get client rectangles for
* @param {Number} offsetX X offset to subtract from coordinates [px]
* @param {Number} offsetY Y offset to subtract from coordinates [px]
* @returns Array of rectangles
*/
static getClientRects(range, offsetX, offsetY) {
const rects = Array.from(range.getClientRects())
for (let rect of rects) {
rect.x -= offsetX
rect.y -= offsetY
}
return rects
}
/** /**
* Calculates common string prefix length * Calculates common string prefix length
* *