Add text font retrieval and mockup text drawing in BesService

This commit is contained in:
Aljaž Grilc 2025-02-24 15:04:16 +01:00
parent a5db3099c6
commit f695f4b150

View File

@ -57,6 +57,7 @@ class BesService {
this.hostElement.setAttribute('data-gramm', 'false')
this.hostElement.setAttribute('data-gramm_editor', 'false')
this.hostElement.setAttribute('data-enable-grammarly', 'false')
this.textFont = window.getComputedStyle(this.textElement).fontFamily
this.onScroll = this.onScroll.bind(this)
this.hostElement.addEventListener('scroll', this.onScroll)
@ -340,6 +341,13 @@ class BesService {
const width = rect.width * dpr
const height = rect.height * dpr
// MOCKUP text drawing
this.ctx.font = `5px ${this.textFont}` // Font se lahko doda na sledeč način: `25px 'Times New Roman', serif`
const text = 'To je izmišljeno besedilo'
const textLength = this.ctx.measureText(text)
console.log(`Dolžina texta: ${textLength.width}px`) // Dolžina texta
this.ctx.fillText(text, x, y)
// Draw the underline
this.ctx.beginPath()
this.ctx.moveTo(x, y + height)
@ -459,12 +467,7 @@ class BesService {
* @param {*} match Grammar checking rule match
*/
highlightMistake(match) {
// document.querySelectorAll('.bes-mistake-highlight-selected').forEach(el => {
// el.classList.remove('bes-mistake-highlight-selected')
// })
// match.highlights.forEach(h =>
// h.classList.add('bes-mistake-highlight-selected')
// )
console.log(match)
}
/**