Merge remote-tracking branch 'ups/v3' into 1015_fix_emoji_selection

src/renderer/BaseRenderLayer.ts

@@ -91,16 +91,6 @@ 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.
@@ -109,12 +99,11 @@ 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 {
-    const cellLeft = this._getCellLeft(x);
     this._ctx.fillRect(
-      cellLeft,
-      y * this._scaledLineHeight,
-      this._getCellLeft(x + width) - cellLeft,
-      height * this._scaledLineHeight);
+        x * this._scaledCharWidth,
+        y * this._scaledLineHeight,
+        width * this._scaledCharWidth,
+        height * this._scaledLineHeight);
   }
 
   /**
@@ -124,11 +113,10 @@ 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(
-        cellLeft,
+        x * this._scaledCharWidth,
         (y + 1) * this._scaledLineHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
-        this._getCellLeft(x + width) - cellLeft,
+        width * this._scaledCharWidth,
         window.devicePixelRatio);
   }
 
@@ -140,7 +128,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected fillLeftLineAtCell(x: number, y: number): void {
     this._ctx.fillRect(
-        this._getCellLeft(x),
+        x * this._scaledCharWidth,
         y * this._scaledLineHeight,
         window.devicePixelRatio,
         this._scaledLineHeight);
@@ -153,12 +141,11 @@ 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(
-        cellLeft + window.devicePixelRatio / 2,
+        x * this._scaledCharWidth + window.devicePixelRatio / 2,
         y * this._scaledLineHeight + (window.devicePixelRatio / 2),
-        this._getCellLeft(x + width) - cellLeft - window.devicePixelRatio,
+        width * this._scaledCharWidth - window.devicePixelRatio,
         (height * this._scaledLineHeight) - window.devicePixelRatio);
   }
 
@@ -182,19 +169,18 @@ 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 {
-    const cellLeft = this._getCellLeft(x);
     if (this._alpha) {
       this._ctx.clearRect(
-          cellLeft,
+          x * this._scaledCharWidth,
           y * this._scaledLineHeight,
-          this._getCellLeft(x + width) - cellLeft,
+          width * this._scaledCharWidth,
           height * this._scaledLineHeight);
     } else {
       this._ctx.fillStyle = this._colors.background;
       this._ctx.fillRect(
-          cellLeft,
+          x * this._scaledCharWidth,
           y * this._scaledLineHeight,
-          this._getCellLeft(x + width) - cellLeft,
+          width * this._scaledCharWidth,
           height * this._scaledLineHeight);
     }
   }

src/renderer/Interfaces.ts

@@ -92,4 +92,6 @@ export interface IRenderDimensions {
   scaledCanvasHeight: number;
   canvasWidth: number;
   canvasHeight: number;
+  actualCellWidth: number;
+  actualCellHeight: number;
 }

src/renderer/Renderer.ts

@@ -45,7 +45,9 @@ export class Renderer extends EventEmitter implements IRenderer {
       scaledCanvasWidth: null,
       scaledCanvasHeight: null,
       canvasWidth: null,
-      canvasHeight: null
+      canvasHeight: null,
+      actualCellWidth: null,
+      actualCellHeight: null
     };
     this._devicePixelRatio = window.devicePixelRatio;
   }
@@ -112,6 +114,15 @@ export class Renderer extends EventEmitter implements IRenderer {
     this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
     this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
 
+    // Get the _actual_ dimensions of an individual cell. This needs to be
+    // derived from the canvasWidth/Height calculated above which takes into
+    // account window.devicePixelRatio. CharMeasure.width/height by itself is
+    // insufficient when the page is not at 100% zoom level as CharMeasure is
+    // measured in CSS pixels, but the actual char size on the canvas can
+    // differ.
+    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._terminal.rows;
+    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._terminal.cols;
+
     // Resize all render layers
     this._renderLayers.forEach(l => l.resize(this._terminal, this.dimensions, didCharSizeChange));