Add fontSize and fontFamily options

src/utils/CharMeasure.test.ts

@@ -25,13 +25,13 @@ describe('CharMeasure', () => {
 
   describe('measure', () => {
     it('should set _measureElement on first call', () => {
-      charMeasure.measure();
+      charMeasure.measure({});
       assert.isDefined((<any>charMeasure)._measureElement, 'CharMeasure.measure should have created _measureElement');
     });
 
     it('should be performed async on first call', done => {
       assert.equal(charMeasure.width, null);
-      charMeasure.measure();
+      charMeasure.measure({});
       // Mock getBoundingClientRect since jsdom doesn't have a layout engine
       (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
         return { width: 1, height: 1 };
@@ -44,7 +44,7 @@ describe('CharMeasure', () => {
     });
 
     it('should be performed sync on successive calls', done => {
-      charMeasure.measure();
+      charMeasure.measure({});
       // Mock getBoundingClientRect since jsdom doesn't have a layout engine
       (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
         return { width: 1, height: 1 };
@@ -55,19 +55,19 @@ describe('CharMeasure', () => {
         (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
           return { width: 2, height: 2 };
         };
-        charMeasure.measure();
+        charMeasure.measure({});
         assert.equal(charMeasure.width, firstWidth * 2);
         done();
       }, 0);
     });
 
     it('should NOT do a measure when the parent is hidden', done => {
-      charMeasure.measure();
+      charMeasure.measure({});
       setTimeout(() => {
         const firstWidth = charMeasure.width;
         container.style.display = 'none';
         container.style.fontSize = '2em';
-        charMeasure.measure();
+        charMeasure.measure({});
         assert.equal(charMeasure.width, firstWidth);
         done();
       }, 0);

src/utils/CharMeasure.ts

@@ -4,11 +4,14 @@
  */
 
 import { EventEmitter } from '../EventEmitter.js';
+import { ICharMeasure, ITerminal, ITerminalOptions } from '../Interfaces';
 
 /**
- * Utility class that measures the size of a character.
+ * Utility class that measures the size of a character. Measurements are done in
+ * the DOM rather than with a canvas context because support for extracting the
+ * height of characters is patchy across browsers.
  */
-export class CharMeasure extends EventEmitter {
+export class CharMeasure extends EventEmitter implements ICharMeasure {
   private _document: Document;
   private _parentElement: HTMLElement;
   private _measureElement: HTMLElement;
@@ -29,7 +32,7 @@ export class CharMeasure extends EventEmitter {
     return this._height;
   }
 
-  public measure(): void {
+  public measure(options: ITerminalOptions): void {
     if (!this._measureElement) {
       this._measureElement = this._document.createElement('span');
       this._measureElement.style.position = 'absolute';
@@ -40,13 +43,15 @@ export class CharMeasure extends EventEmitter {
       this._parentElement.appendChild(this._measureElement);
       // Perform _doMeasure async if the element was just attached as sometimes
       // getBoundingClientRect does not return accurate values without this.
-      setTimeout(() => this._doMeasure(), 0);
+      setTimeout(() => this._doMeasure(options), 0);
     } else {
-      this._doMeasure();
+      this._doMeasure(options);
     }
   }
 
-  private _doMeasure(): void {
+  private _doMeasure(options: ITerminalOptions): void {
+    this._measureElement.style.fontFamily = options.fontFamily;
+    this._measureElement.style.fontSize = `${options.fontSize}px`;
     const geometry = this._measureElement.getBoundingClientRect();
     // The element is likely currently display:none, we should retain the
     // previous value.