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

Refactor canvas context usage

Browse Source
This commit is contained in:
Aljaž Grilc 2025-02-17 08:08:34 +01:00
parent 6fb6503e73
commit 0eb3e81974
1 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
service.js
View File

@ -333,13 +333,11 @@ class BesService {
const canvasPanelRect = this.canvasPanel.getBoundingClientRect() const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
const highlights = [] const highlights = []
this.canvasPanel.classList.add('bes-canvas') this.canvasPanel.classList.add('bes-canvas')
const ctx = this.canvasPanel.getContext('2d') this.ctx.lineWidth = 1
ctx.lineWidth = 1 this.ctx.strokeStyle = ruleId.startsWith('MORFOLOGIK_RULE')
ctx.strokeStyle = ruleId.startsWith('MORFOLOGIK_RULE')
? '#e91313' ? '#e91313'
: '#269b26' : '#269b26'
this.setCanvasDpr()
for (let rect of range.getClientRects()) { for (let rect of range.getClientRects()) {
const x = rect.left - canvasPanelRect.left const x = rect.left - canvasPanelRect.left
const y = rect.top - canvasPanelRect.top + rect.height const y = rect.top - canvasPanelRect.top + rect.height
@ -350,10 +348,10 @@ class BesService {
const globalY = rect.top + window.scrollY const globalY = rect.top + window.scrollY
// Draw the underline // Draw the underline
ctx.beginPath() this.ctx.beginPath()
ctx.moveTo(x, y) this.ctx.moveTo(x, y)
ctx.lineTo(x + width, y) this.ctx.lineTo(x + width, y)
ctx.stroke() this.ctx.stroke()
const rectCoords = { x, y, width, height, globalX, globalY } const rectCoords = { x, y, width, height, globalX, globalY }
highlights.push(rectCoords) highlights.push(rectCoords)
} }
@ -454,6 +452,7 @@ class BesService {
this.scrollPanel.style.height = `${this.hostElement.scrollHeight}px` this.scrollPanel.style.height = `${this.hostElement.scrollHeight}px`
this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px` this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px` this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
this.ctx = this.canvasPanel.getContext('2d')
this.setCanvasDpr() this.setCanvasDpr()
if (this.isHostElementInline()) { if (this.isHostElementInline()) {
const totalWidth = const totalWidth =
@ -474,12 +473,15 @@ class BesService {
* Sets canvas panel device pixel ratio. * Sets canvas panel device pixel ratio.
*/ */
setCanvasDpr() { setCanvasDpr() {
const ctx = this.canvasPanel.getContext('2d')
const dpr = window.devicePixelRatio || 1 const dpr = window.devicePixelRatio || 1
const canvasPanelRect = this.canvasPanel.getBoundingClientRect() const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
this.canvasPanel.width = canvasPanelRect.width * dpr this.canvasPanel.width = canvasPanelRect.width * dpr
this.canvasPanel.height = canvasPanelRect.height * dpr this.canvasPanel.height = canvasPanelRect.height * dpr
ctx.scale(dpr, dpr) this.ctx.scale(dpr, dpr)
if (!this.ctx) {
this.ctx = this.canvasPanel.getContext('2d')
}
this.ctx.scale(dpr, dpr)
} }
/** /**
@ -529,13 +531,11 @@ class BesService {
* Updates all grammar mistake markup positions. * Updates all grammar mistake markup positions.
*/ */
repositionAllMarkup() { repositionAllMarkup() {
const ctx = this.canvasPanel.getContext('2d')
this.results.forEach(result => { this.results.forEach(result => {
result.matches.forEach(match => { result.matches.forEach(match => {
if (match.highlights) { if (match.highlights) {
match.highlights.forEach(h => { match.highlights.forEach(h => {
ctx.clearRect(h.x - 2, h.y - 2, h.width + 4, h.height) this.ctx.clearRect(h.x - 2, h.y - 2, h.width + 4, h.height)
}) })
delete match.highlights delete match.highlights
@ -799,8 +799,6 @@ class BesTreeService extends BesService {
* @param {Element} el DOM element we want to clean markup for * @param {Element} el DOM element we want to clean markup for
*/ */
clearMarkup(el) { clearMarkup(el) {
const ctx = this.canvasPanel.getContext('2d')
this.results this.results
.filter(result => BesTreeService.isSameParagraph(result.element, el)) .filter(result => BesTreeService.isSameParagraph(result.element, el))
.forEach(result => .forEach(result =>
@ -811,7 +809,7 @@ class BesTreeService extends BesService {
match.highlights.forEach(h => { match.highlights.forEach(h => {
console.log(h) console.log(h)
// Figure out why i need to add 2px to width // Figure out why i need to add 2px to width
ctx.clearRect(h.x - 2, h.y - 2, h.width + 4, h.height) this.ctx.clearRect(h.x - 2, h.y - 2, h.width + 4, h.height)
}) })
delete match.highlights delete match.highlights
} }