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 _parentElement: HTMLElement;
13 private _measureElement: HTMLElement;
14 private _width: number;
15 private _height: number;
17 constructor(parentElement: HTMLElement) {
19 this._parentElement = parentElement;
22 public get width(): number {
26 public get height(): number {
30 public measure(): void {
31 if (!this._measureElement) {
32 this._measureElement = document.createElement('span');
33 this._measureElement.style.position = 'absolute';
34 this._measureElement.style.top = '0';
35 this._measureElement.style.left = '-9999em';
36 this._measureElement.textContent = 'W';
37 this._measureElement.setAttribute('aria-hidden', 'true');
38 this._parentElement.appendChild(this._measureElement);
39 // Perform _doMeasure async if the element was just attached as sometimes
40 // getBoundingClientRect does not return accurate values without this.
41 setTimeout(() => this._doMeasure(), 0);
47 private _doMeasure(): void {
48 const geometry = this._measureElement.getBoundingClientRect();
49 // The element is likely currently display:none, we should retain the
51 if (geometry.width === 0 || geometry.height === 0) {
54 if (this._width !== geometry.width || this._height !== geometry.height) {
55 this._width = geometry.width;
56 this._height = geometry.height;
57 this.emit('charsizechanged');