2 * @module xterm/utils/CharMeasure
6 import { EventEmitter } from '../EventEmitter.js';
9 * Utility class that measures the size of a character.
11 export class CharMeasure extends EventEmitter {
12 private _document: Document;
13 private _parentElement: HTMLElement;
14 private _measureElement: HTMLElement;
15 private _width: number;
16 private _height: number;
18 constructor(document: Document, parentElement: HTMLElement) {
20 this._document = document;
21 this._parentElement = parentElement;
24 public get width(): number {
28 public get height(): number {
32 public measure(): void {
33 if (!this._measureElement) {
34 this._measureElement = this._document.createElement('span');
35 this._measureElement.style.position = 'absolute';
36 this._measureElement.style.top = '0';
37 this._measureElement.style.left = '-9999em';
38 this._measureElement.textContent = 'W';
39 this._measureElement.setAttribute('aria-hidden', 'true');
40 this._parentElement.appendChild(this._measureElement);
41 // Perform _doMeasure async if the element was just attached as sometimes
42 // getBoundingClientRect does not return accurate values without this.
43 setTimeout(() => this._doMeasure(), 0);
49 private _doMeasure(): void {
50 const geometry = this._measureElement.getBoundingClientRect();
51 // The element is likely currently display:none, we should retain the
53 if (geometry.width === 0 || geometry.height === 0) {
56 if (this._width !== geometry.width || this._height !== geometry.height) {
57 this._width = geometry.width;
58 this._height = geometry.height;
59 this.emit('charsizechanged');