Merge remote-tracking branch 'ups/v3' into 963_cursor_accent

src/renderer/BackgroundRenderLayer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IColorSet } from './Interfaces';
+import { IColorSet, IRenderDimensions } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
 import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
 import { GridCache } from './GridCache';
@@ -18,8 +18,8 @@ export class BackgroundRenderLayer extends BaseRenderLayer {
     this._state = new GridCache<number>();
   }
 
-  public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
-    super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
+  public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
+    super.resize(terminal, dim, charSizeChanged);
     // Resizing the canvas discards the contents of the canvas so clear state
     this._state.clear();
     this._state.resize(terminal.cols, terminal.rows);

src/renderer/BaseRenderLayer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IRenderLayer, IColorSet } from './Interfaces';
+import { IRenderLayer, IColorSet, IRenderDimensions } from './Interfaces';
 import { ITerminal, ITerminalOptions } from '../Interfaces';
 import { acquireCharAtlas, CHAR_ATLAS_CELL_SPACING } from './CharAtlas';
 import { CharData } from '../Types';
@@ -61,34 +61,15 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     }
   }
 
-  public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
-    // Calculate the scaled character dimensions, if devicePixelRatio is a
-    // floating point number then the value is ceiled to ensure there is enough
-    // space to draw the character to the cell
-    this.scaledCharWidth = Math.ceil(terminal.charMeasure.width * window.devicePixelRatio);
-    this.scaledCharHeight = Math.ceil(terminal.charMeasure.height * window.devicePixelRatio);
-
-    // Calculate the scaled line height, if lineHeight is not 1 then the value
-    // will be floored because since lineHeight can never be lower then 1, there
-    // is a guarentee that the scaled line height will always be larger than
-    // scaled char height.
-    this.scaledLineHeight = Math.floor(this.scaledCharHeight * terminal.options.lineHeight);
-
-    // Calculate the y coordinate within a cell that text should draw from in
-    // order to draw in the center of a cell.
-    this.scaledLineDrawY = terminal.options.lineHeight === 1 ? 0 : Math.round((this.scaledLineHeight - this.scaledCharHeight) / 2);
-
-    // Recalcualte the canvas dimensions; width/height define the actual number
-    // of pixels in the canvas, style.width/height define the size of the canvas
-    // on the page. It's very important that this rounds to nearest integer and
-    // not ceils as browsers often set window.devicePixelRatio as something like
-    // 1.100000023841858, when it's actually 1.1. Ceiling causes blurriness as
-    // the backing canvas image is 1 pixel too large for the canvas element
-    // size.
-    this._canvas.width = Math.round(canvasWidth * window.devicePixelRatio);
-    this._canvas.height = Math.round(canvasHeight * window.devicePixelRatio);
-    this._canvas.style.width = `${canvasWidth}px`;
-    this._canvas.style.height = `${canvasHeight}px`;
+  public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
+    this.scaledCharWidth = dim.scaledCharWidth;
+    this.scaledCharHeight = dim.scaledCharHeight;
+    this.scaledLineHeight = dim.scaledLineHeight;
+    this.scaledLineDrawY = dim.scaledLineDrawY;
+    this._canvas.width = dim.scaledCanvasWidth;
+    this._canvas.height = dim.scaledCanvasHeight;
+    this._canvas.style.width = `${dim.canvasWidth}px`;
+    this._canvas.style.height = `${dim.canvasHeight}px`;
 
     if (charSizeChanged) {
       this._refreshCharAtlas(terminal, this.colors);
@@ -97,6 +78,16 @@ export abstract class BaseRenderLayer implements IRenderLayer {
 
   public abstract reset(terminal: ITerminal): void;
 
+  /**
+   * Gets the left position of a cell. Since character width is stored as a
+   * float in order to prevent bad letter spacing, drawing shapes in the cell
+   * need to be rounded.
+   * @param x The column of the cell.
+   */
+  private _getCellLeft(x: number): number {
+    return Math.round(x * this.scaledCharWidth);
+  }
+
   /**
    * Fills 1+ cells completely. This uses the existing fillStyle on the context.
    * @param x The column to start at.
@@ -105,7 +96,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param height The number of rows to fill.
    */
   protected fillCells(x: number, y: number, width: number, height: number): void {
-    this._ctx.fillRect(x * this.scaledCharWidth, y * this.scaledLineHeight, width * this.scaledCharWidth, height * this.scaledLineHeight);
+    const cellLeft = this._getCellLeft(x);
+    this._ctx.fillRect(
+      cellLeft,
+      y * this.scaledLineHeight,
+      this._getCellLeft(x + width) - cellLeft,
+      height * this.scaledLineHeight);
   }
 
   /**
@@ -115,10 +111,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param y The row to fill.
    */
   protected fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
+    const cellLeft = this._getCellLeft(x);
     this._ctx.fillRect(
-        x * this.scaledCharWidth,
+        cellLeft,
         (y + 1) * this.scaledLineHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
-        width * this.scaledCharWidth,
+        this._getCellLeft(x + width) - cellLeft,
         window.devicePixelRatio);
   }
 
@@ -130,7 +127,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected fillLeftLineAtCell(x: number, y: number): void {
     this._ctx.fillRect(
-        x * this.scaledCharWidth,
+        this._getCellLeft(x),
         y * this.scaledLineHeight,
         window.devicePixelRatio,
         this.scaledLineHeight);
@@ -143,11 +140,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param y The row to fill.
    */
   protected strokeRectAtCell(x: number, y: number, width: number, height: number): void {
+    const cellLeft = this._getCellLeft(x);
     this._ctx.lineWidth = window.devicePixelRatio;
     this._ctx.strokeRect(
-        x * this.scaledCharWidth + window.devicePixelRatio / 2,
+        cellLeft + window.devicePixelRatio / 2,
         y * this.scaledLineHeight + (window.devicePixelRatio / 2),
-        (width * this.scaledCharWidth) - window.devicePixelRatio,
+        this._getCellLeft(x + width) - cellLeft - window.devicePixelRatio,
         (height * this.scaledLineHeight) - window.devicePixelRatio);
   }
 
@@ -166,7 +164,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param height The number of rows to clear.
    */
   protected clearCells(x: number, y: number, width: number, height: number): void {
-    this._ctx.clearRect(x * this.scaledCharWidth, y * this.scaledLineHeight, width * this.scaledCharWidth, height * this.scaledLineHeight);
+    const cellLeft = this._getCellLeft(x);
+    this._ctx.clearRect(
+        cellLeft,
+        y * this.scaledLineHeight,
+        this._getCellLeft(x + width) - cellLeft,
+        height * this.scaledLineHeight);
   }
 
   /**

src/renderer/CursorRenderLayer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IColorSet } from './Interfaces';
+import { IColorSet, IRenderDimensions } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal, ITerminalOptions } from '../Interfaces';
 import { CHAR_DATA_WIDTH_INDEX, CHAR_DATA_CODE_INDEX, CHAR_DATA_CHAR_INDEX } from '../Buffer';
 import { GridCache } from './GridCache';
@@ -47,8 +47,8 @@ export class CursorRenderLayer extends BaseRenderLayer {
     // TODO: Consider initial options? Maybe onOptionsChanged should be called at the end of open?
   }
 
-  public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
-    super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
+  public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
+    super.resize(terminal, dim, charSizeChanged);
     // Resizing the canvas discards the contents of the canvas so clear state
     this._state = {
       x: null,

src/renderer/ForegroundRenderLayer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IColorSet } from './Interfaces';
+import { IColorSet, IRenderDimensions } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
 import { CHAR_DATA_ATTR_INDEX, CHAR_DATA_CODE_INDEX, CHAR_DATA_CHAR_INDEX, CHAR_DATA_WIDTH_INDEX } from '../Buffer';
 import { FLAGS } from './Types';
@@ -26,8 +26,8 @@ export class ForegroundRenderLayer extends BaseRenderLayer {
     this._state = new GridCache<CharData>();
   }
 
-  public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
-    super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
+  public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
+    super.resize(terminal, dim, charSizeChanged);
     // Resizing the canvas discards the contents of the canvas so clear state
     this._state.clear();
     this._state.resize(terminal.cols, terminal.rows);
@@ -159,6 +159,12 @@ export class ForegroundRenderLayer extends BaseRenderLayer {
    * @param char The character to search.
    */
   private _isEmoji(char: string): boolean {
+    // TODO: We need a generic solution for handling characters like this
+    // Check special ambiguous width characters
+    if (char === '➜') {
+      return true;
+    }
+    // Check emoji unicode range
     return char.search(/([\uD800-\uDBFF][\uDC00-\uDFFF])/g) >= 0;
   }
 

src/renderer/Interfaces.ts

@@ -3,9 +3,11 @@
  * @license MIT
  */
 
-import { ITerminal, ITerminalOptions, ITheme } from '../Interfaces';
+import { ITerminal, ITerminalOptions, ITheme, IEventEmitter } from '../Interfaces';
+
+export interface IRenderer extends IEventEmitter {
+  dimensions: IRenderDimensions;
 
-export interface IRenderer {
   setTheme(theme: ITheme): IColorSet;
   onWindowResize(devicePixelRatio: number): void;
   onResize(cols: number, rows: number, didCharSizeChange: boolean): void;
@@ -59,7 +61,7 @@ export interface IRenderLayer {
   /**
    * Resize the render layer.
    */
-  resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void;
+  resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void;
 
   /**
    * Clear the state of the render layer.
@@ -76,3 +78,14 @@ export interface IColorSet {
   selection: string;
   ansi: string[];
 }
+
+export interface IRenderDimensions {
+  scaledCharWidth: number;
+  scaledCharHeight: number;
+  scaledLineHeight: number;
+  scaledLineDrawY: number;
+  scaledCanvasWidth: number;
+  scaledCanvasHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+}

src/renderer/LinkRenderLayer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IColorSet } from './Interfaces';
+import { IColorSet, IRenderDimensions } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal, ILinkifierAccessor } from '../Interfaces';
 import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
 import { GridCache } from './GridCache';
@@ -20,8 +20,8 @@ export class LinkRenderLayer extends BaseRenderLayer {
     terminal.linkifier.on(LinkHoverEventTypes.LEAVE, (e: LinkHoverEvent) => this._onLinkLeave(e));
   }
 
-  public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
-    super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
+  public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
+    super.resize(terminal, dim, charSizeChanged);
     // Resizing the canvas discards the contents of the canvas so clear state
     this._state = null;
   }

src/renderer/Renderer.ts

@@ -11,10 +11,11 @@ import { SelectionRenderLayer } from './SelectionRenderLayer';
 import { CursorRenderLayer } from './CursorRenderLayer';
 import { ColorManager } from './ColorManager';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { IRenderLayer, IColorSet, IRenderer } from './Interfaces';
+import { IRenderLayer, IColorSet, IRenderer, IRenderDimensions } from './Interfaces';
 import { LinkRenderLayer } from './LinkRenderLayer';
+import { EventEmitter } from '../EventEmitter';
 
-export class Renderer implements IRenderer {
+export class Renderer extends EventEmitter implements IRenderer {
   /** A queue of the rows to be refreshed */
   private _refreshRowsQueue: {start: number, end: number}[] = [];
   private _refreshAnimationFrame = null;
@@ -23,8 +24,10 @@ export class Renderer implements IRenderer {
   private _devicePixelRatio: number;
 
   private _colorManager: ColorManager;
+  public dimensions: IRenderDimensions;
 
   constructor(private _terminal: ITerminal) {
+    super();
     this._colorManager = new ColorManager();
     this._renderLayers = [
       new BackgroundRenderLayer(this._terminal.element, 0, this._colorManager.colors),
@@ -33,6 +36,16 @@ export class Renderer implements IRenderer {
       new LinkRenderLayer(this._terminal.element, 3, this._colorManager.colors, this._terminal),
       new CursorRenderLayer(this._terminal.element, 4, this._colorManager.colors)
     ];
+    this.dimensions = {
+      scaledCharWidth: null,
+      scaledCharHeight: null,
+      scaledLineHeight: null,
+      scaledLineDrawY: null,
+      scaledCanvasWidth: null,
+      scaledCanvasHeight: null,
+      canvasWidth: null,
+      canvasHeight: null
+    };
     this._devicePixelRatio = window.devicePixelRatio;
   }
 
@@ -63,12 +76,53 @@ export class Renderer implements IRenderer {
     if (!this._terminal.charMeasure.width || !this._terminal.charMeasure.height) {
       return;
     }
-    const width = this._terminal.charMeasure.width * cols;
-    const height = Math.floor(this._terminal.charMeasure.height * this._terminal.options.lineHeight) * rows;
+
+    // Calculate the scaled character width. Width is kept as a decimal to
+    // provide better letter spacing, otherwise the text can look odd.
+    // Characters drawn using this decimal number do have the potential to
+    // overlap, but only by a single pixel. As such, it's not a big deal when
+    // they do as that pixel is always cleared as necessary before drawing the
+    // character.
+    this.dimensions.scaledCharWidth = this._terminal.charMeasure.width * window.devicePixelRatio;
+
+    // Calculate the scaled character height. Height is ceiled in case
+    // devicePixelRatio is a floating point number in order to ensure there is
+    // enough space to draw the character to the cell.
+    this.dimensions.scaledCharHeight = Math.ceil(this._terminal.charMeasure.height * window.devicePixelRatio);
+
+    // Calculate the scaled line height, if lineHeight is not 1 then the value
+    // will be floored because since lineHeight can never be lower then 1, there
+    // is a guarentee that the scaled line height will always be larger than
+    // scaled char height.
+    this.dimensions.scaledLineHeight = Math.floor(this.dimensions.scaledCharHeight * this._terminal.options.lineHeight);
+
+    // Calculate the y coordinate within a cell that text should draw from in
+    // order to draw in the center of a cell.
+    this.dimensions.scaledLineDrawY = this._terminal.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledLineHeight - this.dimensions.scaledCharHeight) / 2);
+
+    // Recalculate the canvas dimensions; scaled* define the actual number of
+    // pixel in the canvas
+    this.dimensions.scaledCanvasHeight = this._terminal.rows * this.dimensions.scaledLineHeight;
+    this.dimensions.scaledCanvasWidth = Math.round(this._terminal.cols * this.dimensions.scaledCharWidth);
+
+    // The the size of the canvas on the page. It's very important that this
+    // rounds to nearest integer and not ceils as browsers often set
+    // window.devicePixelRatio as something like 1.100000023841858, when it's
+    // actually 1.1. Ceiling causes blurriness as the backing canvas image is 1
+    // pixel too large for the canvas element size.
+    this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
+    this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
+
     // Resize all render layers
-    this._renderLayers.forEach(l => l.resize(this._terminal, width, height, didCharSizeChange));
+    this._renderLayers.forEach(l => l.resize(this._terminal, this.dimensions, didCharSizeChange));
+
     // Force a refresh
     this._terminal.refresh(0, this._terminal.rows - 1);
+
+    this.emit('resize', {
+      width: this.dimensions.canvasWidth,
+      height: this.dimensions.canvasHeight
+    });
   }
 
   public onCharSizeChanged(): void {

src/renderer/SelectionRenderLayer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IColorSet } from './Interfaces';
+import { IColorSet, IRenderDimensions } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
 import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
 import { GridCache } from './GridCache';
@@ -21,8 +21,8 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     };
   }
 
-  public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
-    super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
+  public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
+    super.resize(terminal, dim, charSizeChanged);
     // Resizing the canvas discards the contents of the canvas so clear state
     this._state = {
       start: null,