Only render fg cells if there are changes

src/renderer/BackgroundRenderLayer.ts

@@ -2,11 +2,12 @@ import { IRenderLayer } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
 import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
 import { TANGO_COLORS } from './Color';
+import { GridCache } from './GridCache';
 
 export class BackgroundRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
   private _ctx: CanvasRenderingContext2D;
-  private _currentState: number[][];
+  private _state: GridCache<number>;
 
   constructor(container: HTMLElement) {
     this._canvas = document.createElement('canvas');
@@ -14,8 +15,7 @@ export class BackgroundRenderLayer implements IRenderLayer {
     this._ctx = this._canvas.getContext('2d');
     this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
     container.appendChild(this._canvas);
-
-    this._currentState = [];
+    this._state = new GridCache<number>();
   }
 
   public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
@@ -23,18 +23,7 @@ export class BackgroundRenderLayer implements IRenderLayer {
     this._canvas.height = canvasHeight * window.devicePixelRatio;
     this._canvas.style.width = `${canvasWidth}px`;
     this._canvas.style.height = `${canvasHeight}px`;
-    // Initialize current state grid
-    this._currentState = [];
-    for (let y = 0; y < terminal.rows; y++) {
-      if (this._currentState.length <= y) {
-        this._currentState.push([]);
-      }
-      for (let x = this._currentState[y].length; x < terminal.cols; x++) {
-        this._currentState[y].push(null);
-      }
-      this._currentState[y].length = terminal.cols;
-    }
-    this._currentState.length = terminal.rows;
+    this._state.resize(terminal.cols, terminal.rows);
   }
 
   public render(terminal: ITerminal, startRow: number, endRow: number): void {
@@ -49,17 +38,18 @@ export class BackgroundRenderLayer implements IRenderLayer {
         const bg = data & 0x1ff;
         const flags = data >> 18;
 
-        const needsRefresh = (bg < 16 && this._currentState[y][x] !== bg) || this._currentState[y][x] !== null;
+        const cellState = this._state.cache[x][y];
+        const needsRefresh = (bg < 16 && cellState !== bg) || cellState !== null;
         if (needsRefresh) {
           if (bg < 16) {
             this._ctx.save();
             this._ctx.fillStyle = TANGO_COLORS[bg];
             this._ctx.fillRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
             this._ctx.restore();
-            this._currentState[y][x] = bg;
+            this._state.cache[x][y] = bg;
           } else {
             this._ctx.clearRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
-            this._currentState[y][x] = null;
+            this._state.cache[x][y] = null;
           }
         }
       }