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

Get markup text from <canvas> element

Browse Source 
This allows setting markup text font separately from the host element.
E.g.: A different font is desired for the markup other than font used in
the edit box.
This commit is contained in:
Simon Rozman 2025-03-03 14:21:16 +01:00
parent 24216a4dff
commit 9815ddfed0
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
service.js
View File

@ -59,7 +59,6 @@ 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.hostElement).fontFamily
this.onScroll = this.onScroll.bind(this)
this.hostElement.addEventListener('scroll', this.onScroll)
@ -723,7 +722,7 @@ class BesService {
this.ctx.stroke()
if (comment) {
this.ctx.font = `${12 * scale * dpr}px ${this.textFont}`
this.setCtxFont(scale, dpr)
this.ctx.textAlign = 'center'
this.ctx.textBaseline = 'bottom'
this.ctx.fillText('?', (x + 2 * scale) * dpr, (y - 6 * scale) * dpr)
@ -807,7 +806,7 @@ class BesService {
this.ctx.lineTo(x2 * dpr, (y2 + 6 * scale) * dpr)
this.ctx.stroke()
this.ctx.font = `${12 * scale * dpr}px ${this.textFont}`
this.setCtxFont(scale, dpr)
this.ctx.textAlign = 'left' // Thou we want the text to be centered, we align it manually to prevent it getting off canvas.
this.ctx.textBaseline = 'bottom'
const textMetrics = this.ctx.measureText(text)
@ -842,7 +841,7 @@ class BesService {
this.ctx.lineTo(x * dpr, (y2 + 6 * scale) * dpr)
this.ctx.stroke()
this.ctx.font = `${12 * scale * dpr}px ${this.textFont}`
this.setCtxFont(scale, dpr)
this.ctx.textAlign = 'left' // Thou we want the text to be centered, we align it manually to prevent it getting off canvas.
this.ctx.textBaseline = 'bottom'
const textMetrics = this.ctx.measureText(text)
@ -880,6 +879,18 @@ class BesService {
this.ctx.stroke()
}
/**
* Sets markup font
*
* @param {Number} scale Sign scale
* @param {Number} dpr Device pixel ratio
*/
setCtxFont(scale, dpr)
{
const styles = window.getComputedStyle(this.canvasPanel)
this.ctx.font = `${styles.fontStyle} ${styles.fontWeight} ${12 * scale * dpr}px ${styles.fontFamily}`
}
/**
* Calculates rectangles covering a given range and compensates for scroll offset
*
@ -999,8 +1010,6 @@ class BesService {
this.scrollPanel.style.height = `${hostRect.height}px`
}
this.textFont = styles.fontFamily
// Resize canvas if needed.
this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`