Fix the fit addon

demo/main.js

@@ -92,27 +92,26 @@ function createTerminal() {
   term.open(terminalContainer);
   term.fit();
 
-  var initialGeometry = term.proposeGeometry(),
-      cols = initialGeometry.cols,
-      rows = initialGeometry.rows;
+  // fit is called within a setTimeout, cols and rows need this.
+  setTimeout(() => {
+    colsElement.value = term.cols;
+    rowsElement.value = term.rows;
 
-  colsElement.value = cols;
-  rowsElement.value = rows;
+    fetch('/terminals?cols=' + cols + '&rows=' + rows, {method: 'POST'}).then(function (res) {
 
-  fetch('/terminals?cols=' + cols + '&rows=' + rows, {method: 'POST'}).then(function (res) {
+      charWidth = Math.ceil(term.element.offsetWidth / cols);
+      charHeight = Math.ceil(term.element.offsetHeight / rows);
 
-    charWidth = Math.ceil(term.element.offsetWidth / cols);
-    charHeight = Math.ceil(term.element.offsetHeight / rows);
-
-    res.text().then(function (pid) {
-      window.pid = pid;
-      socketURL += pid;
-      socket = new WebSocket(socketURL);
-      socket.onopen = runRealTerminal;
-      socket.onclose = runFakeTerminal;
-      socket.onerror = runFakeTerminal;
+      res.text().then(function (pid) {
+        window.pid = pid;
+        socketURL += pid;
+        socket = new WebSocket(socketURL);
+        socket.onopen = runRealTerminal;
+        socket.onclose = runFakeTerminal;
+        socket.onerror = runFakeTerminal;
+      });
     });
-  });
+  }, 0);
 }
 
 function runRealTerminal() {

src/addons/fit/fit.js

@@ -45,33 +45,26 @@
         availableWidth = parentElementWidth - elementPaddingHor,
         container = term.rowContainer,
         subjectRow = term.rowContainer.firstElementChild,
-        contentBuffer = subjectRow.innerHTML,
-        characterHeight,
-        rows,
-        characterWidth,
-        cols,
-        geometry;
+        contentBuffer = subjectRow.innerHTML;
 
-    subjectRow.style.display = 'inline';
-    subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace
-    characterWidth = subjectRow.getBoundingClientRect().width;
-    subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
-    characterHeight = subjectRow.getBoundingClientRect().height;
-    subjectRow.innerHTML = contentBuffer;
+    var geometry = {
+      cols: parseInt(availableWidth / term.charMeasure.width, 10),
+      rows: parseInt(availableHeight / term.charMeasure.height, 10)
+    };
 
-    rows = parseInt(availableHeight / characterHeight);
-    cols = parseInt(availableWidth / characterWidth);
-
-    geometry = {cols: cols, rows: rows};
     return geometry;
   };
 
   exports.fit = function (term) {
-    var geometry = exports.proposeGeometry(term);
+    // Wrap fit in a setTimeout as charMeasure needs time to get initialized
+    // after calling Terminal.open
+    setTimeout(() => {
+      var geometry = exports.proposeGeometry(term);
 
-    if (geometry) {
-      term.resize(geometry.cols, geometry.rows);
-    }
+      if (geometry) {
+        term.resize(geometry.cols, geometry.rows);
+      }
+    }, 0);
   };
 
   Terminal.prototype.proposeGeometry = function () {

src/renderer/BackgroundRenderLayer.ts

@@ -24,6 +24,10 @@ export class BackgroundRenderLayer extends BaseRenderLayer {
   }
 
   public onGridChanged(terminal: ITerminal, startRow: number, endRow: number): void {
+    // Resize has not been called yet
+    if (this._state.cache.length === 0) {
+      return;
+    }
     for (let y = startRow; y <= endRow; y++) {
       let row = y + terminal.buffer.ydisp;
       let line = terminal.buffer.lines.get(row);

src/renderer/ForegroundRenderLayer.ts

@@ -32,6 +32,11 @@ export class ForegroundRenderLayer extends BaseRenderLayer {
     //   return;
     // }
 
+    // Resize has not been called yet
+    if (this._state.cache.length === 0) {
+      return;
+    }
+
     for (let y = startRow; y <= endRow; y++) {
       const row = y + terminal.buffer.ydisp;
       const line = terminal.buffer.lines.get(row);

src/renderer/GridCache.ts

@@ -18,7 +18,7 @@ export class GridCache<T> {
     this.cache.length = width;
   }
 
-  public clear() {
+  public clear(): void {
     for (let x = 0; x < this.cache.length; x++) {
       for (let y = 0; y < this.cache[x].length; y++) {
         this.cache[x][y] = null;