Merge pull request #938 from Tyriar/canvas_render

Render using canvas

src/addons/attach/attach.js

@@ -1,7 +1,8 @@
 /**
- * Implements the attach method, that attaches the terminal to a WebSocket stream.
- * @module xterm/addons/attach/attach
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
  * @license MIT
+ *
+ * Implements the attach method, that attaches the terminal to a WebSocket stream.
  */
 
 (function (attach) {

src/addons/fit/fit.js

@@ -1,14 +1,16 @@
 /**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
  * Fit terminal columns and rows to the dimensions of its DOM element.
  *
  * ## Approach
- * - Rows: Truncate the division of the terminal parent element height by the terminal row height.
  *
- * - Columns: Truncate the division of the terminal parent element width by the terminal character
- * width (apply display: inline at the terminal row and truncate its width with the current
- * number of columns).
- * @module xterm/addons/fit/fit
- * @license MIT
+ *    Rows: Truncate the division of the terminal parent element height by the
+ *          terminal row height.
+ * Columns: Truncate the division of the terminal parent element width by the
+ *          terminal character width (apply display: inline at the terminal
+ *          row and truncate its width with the current number of columns).
  */
 
 (function (fit) {
@@ -35,43 +37,36 @@
     if (!term.element.parentElement) {
       return null;
     }
-    var parentElementStyle = window.getComputedStyle(term.element.parentElement),
-        parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
-        parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17),
-        elementStyle = window.getComputedStyle(term.element),
-        elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
-        elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')),
-        availableHeight = parentElementHeight - elementPaddingVer,
-        availableWidth = parentElementWidth - elementPaddingHor,
-        container = term.rowContainer,
-        subjectRow = term.rowContainer.firstElementChild,
-        contentBuffer = subjectRow.innerHTML,
-        characterHeight,
-        rows,
-        characterWidth,
-        cols,
-        geometry;
+    var parentElementStyle = window.getComputedStyle(term.element.parentElement);
+    var parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));
+    var parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17);
+    var elementStyle = window.getComputedStyle(term.element);
+    var elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom'));
+    var elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left'));
+    var availableHeight = parentElementHeight - elementPaddingVer;
+    var availableWidth = parentElementWidth - elementPaddingHor;
+    var geometry = {
+      cols: Math.floor(availableWidth / term.charMeasure.width),
+      rows: Math.floor(availableHeight / Math.ceil(term.charMeasure.height * term.getOption('lineHeight')))
+    };
 
-    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;
-
-    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) {
+        // Force a full render
+        if (term.rows !== geometry.rows || term.cols !== geometry.cols) {
+          term.renderer.clear();
+          term.resize(geometry.cols, geometry.rows);
+        }
+      }
+    }, 0);
   };
 
   Terminal.prototype.proposeGeometry = function () {

src/addons/fullscreen/fullscreen.js

@@ -1,8 +1,8 @@
 /**
- * Fullscreen addon for xterm.js
- * @module xterm/addons/fullscreen/fullscreen
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
  * @license MIT
  */
+
 (function (fullscreen) {
   if (typeof exports === 'object' && typeof module === 'object') {
     /*

src/addons/search/SearchHelper.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/addons/search/search.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/addons/terminado/terminado.js

@@ -1,8 +1,9 @@
 /**
- * This module provides methods for attaching a terminal to a terminado WebSocket stream.
- *
- * @module xterm/addons/terminado/terminado
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
+ *
+ * This module provides methods for attaching a terminal to a terminado
+ * WebSocket stream.
  */
 
 (function (attach) {