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

Add text font retrieval and mockup text drawing in BesService

Browse Source
This commit is contained in:
Aljaž Grilc 2025-02-24 15:04:16 +01:00
parent a5db3099c6
commit f695f4b150
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
service.js
View File

@ -57,6 +57,7 @@ class BesService {
this.hostElement.setAttribute('data-gramm', 'false') this.hostElement.setAttribute('data-gramm', 'false')
this.hostElement.setAttribute('data-gramm_editor', 'false') this.hostElement.setAttribute('data-gramm_editor', 'false')
this.hostElement.setAttribute('data-enable-grammarly', 'false') this.hostElement.setAttribute('data-enable-grammarly', 'false')
this.textFont = window.getComputedStyle(this.textElement).fontFamily
this.onScroll = this.onScroll.bind(this) this.onScroll = this.onScroll.bind(this)
this.hostElement.addEventListener('scroll', this.onScroll) this.hostElement.addEventListener('scroll', this.onScroll)
@ -340,6 +341,13 @@ class BesService {
const width = rect.width * dpr const width = rect.width * dpr
const height = rect.height * 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 // Draw the underline
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.moveTo(x, y + height) this.ctx.moveTo(x, y + height)
@ -459,12 +467,7 @@ class BesService {
* @param {*} match Grammar checking rule match * @param {*} match Grammar checking rule match
*/ */
highlightMistake(match) { highlightMistake(match) {
// document.querySelectorAll('.bes-mistake-highlight-selected').forEach(el => { console.log(match)
// el.classList.remove('bes-mistake-highlight-selected')
// })
// match.highlights.forEach(h =>
// h.classList.add('bes-mistake-highlight-selected')
// )
} }
/** /**