Merge pull request #1733 from leomoty/line-height

Support for lineHeight in DOM Renderer

src/Terminal.ts

@@ -473,6 +473,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
         if (this._theme) {
           this.renderer.setTheme(this._theme);
         }
+        this.mouseHelper.setRenderer(this.renderer);
         break;
       case 'scrollback':
         this.buffers.resize(this.cols, this.rows);

src/renderer/dom/DomRenderer.ts

@@ -94,22 +94,23 @@ export class DomRenderer extends EventEmitter implements IRenderer {
   }
 
   private _updateDimensions(): void {
-    this.dimensions.scaledCharWidth = this._terminal.charMeasure.width * window.devicePixelRatio;
-    this.dimensions.scaledCharHeight = this._terminal.charMeasure.height * window.devicePixelRatio;
-    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth;
-    this.dimensions.scaledCellHeight = this.dimensions.scaledCharHeight;
+    this.dimensions.scaledCharWidth = Math.floor(this._terminal.charMeasure.width * window.devicePixelRatio);
+    this.dimensions.scaledCharHeight = Math.ceil(this._terminal.charMeasure.height * window.devicePixelRatio);
+    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._terminal.options.letterSpacing);
+    this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._terminal.options.lineHeight);
     this.dimensions.scaledCharLeft = 0;
     this.dimensions.scaledCharTop = 0;
     this.dimensions.scaledCanvasWidth = this.dimensions.scaledCellWidth * this._terminal.cols;
     this.dimensions.scaledCanvasHeight = this.dimensions.scaledCellHeight * this._terminal.rows;
-    this.dimensions.canvasWidth = this._terminal.charMeasure.width * this._terminal.cols;
-    this.dimensions.canvasHeight = this._terminal.charMeasure.height * this._terminal.rows;
-    this.dimensions.actualCellWidth = this._terminal.charMeasure.width;
-    this.dimensions.actualCellHeight = this._terminal.charMeasure.height;
+    this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
+    this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
+    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._terminal.cols;
+    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._terminal.rows;
 
     this._rowElements.forEach(element => {
       element.style.width = `${this.dimensions.canvasWidth}px`;
-      element.style.height = `${this._terminal.charMeasure.height}px`;
+      element.style.height = `${this.dimensions.actualCellHeight}px`;
+      element.style.lineHeight = `${this.dimensions.actualCellHeight}px`;
     });
 
     if (!this._dimensionsStyleElement) {
@@ -130,6 +131,8 @@ export class DomRenderer extends EventEmitter implements IRenderer {
     this._selectionContainer.style.height = (<any>this._terminal)._viewportElement.style.height;
     this._rowContainer.style.width = `${this.dimensions.canvasWidth}px`;
     this._rowContainer.style.height = `${this.dimensions.canvasHeight}px`;
+    this._terminal.screenElement.style.width = '';
+    this._terminal.screenElement.style.height = '';
   }
 
   public setTheme(theme: ITheme | undefined): IColorSet {
@@ -290,10 +293,10 @@ export class DomRenderer extends EventEmitter implements IRenderer {
    */
   private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement {
     const element = document.createElement('div');
-    element.style.height = `${rowCount * this._terminal.charMeasure.height}px`;
-    element.style.top = `${row * this._terminal.charMeasure.height}px`;
-    element.style.left = `${colStart * this._terminal.charMeasure.width}px`;
-    element.style.width = `${this._terminal.charMeasure.width * (colEnd - colStart)}px`;
+    element.style.height = `${rowCount * this.dimensions.actualCellHeight}px`;
+    element.style.top = `${row * this.dimensions.actualCellHeight}px`;
+    element.style.left = `${colStart * this.dimensions.actualCellWidth}px`;
+    element.style.width = `${this.dimensions.actualCellWidth * (colEnd - colStart)}px`;
     return element;
   }
 

src/utils/MouseHelper.ts

@@ -9,6 +9,10 @@ import { IRenderer } from '../renderer/Types';
 export class MouseHelper {
   constructor(private _renderer: IRenderer) {}
 
+  public setRenderer(renderer: IRenderer): void {
+    this._renderer = renderer;
+  }
+
   public static getCoordsRelativeToElement(event: {pageX: number, pageY: number}, element: HTMLElement): [number, number] {
     // Ignore browsers that don't support MouseEvent.pageX
     if (event.pageX === null || event.pageX === undefined) {

typings/xterm.d.ts

@@ -161,7 +161,6 @@ declare module 'xterm' {
      * when canvas is too slow for the environment. The following features do
      * not work when the DOM renderer is used:
      *
-     * - Line height
      * - Letter spacing
      * - Cursor blink
      */