Merge ICharAtlasRequest with ICharAtlasConfig

ICharAtlasRequest and ICharAtlasConfig need almost exactly the same set
of information, so it's simpler if we just merge the two types.

As an added bonus, this also adds devicePixelRatio to the config, which
helps guarantee that we won't ever accidentally end up with an atlas
using a different pixel ratio than we need.

src/renderer/Types.ts

@@ -5,6 +5,7 @@
 
 import { ITerminal } from '../Types';
 import { IEventEmitter, ITheme } from 'xterm';
+import { IColorSet } from '../shared/Types';
 
 /**
  * Flags used to render terminal text properly.
@@ -39,14 +40,8 @@ export interface IColorManager {
   colors: IColorSet;
 }
 
-export interface IColorSet {
-  foreground: string;
-  background: string;
-  cursor: string;
-  cursorAccent: string;
-  selection: string;
-  ansi: string[];
-}
+// TODO: We should probably rewrite the imports for IColorSet, but there's a lot of them
+export { IColorSet };
 
 export interface IRenderDimensions {
   scaledCharWidth: number;

src/renderer/atlas/CharAtlas.ts

@@ -5,9 +5,9 @@
 
 import { ITerminal } from '../../Types';
 import { IColorSet } from '../Types';
-import { ICharAtlasConfig } from './Types';
+import { ICharAtlasConfig } from '../../shared/atlas/Types';
 import { isFirefox } from '../../shared/utils/Browser';
-import { generateCharAtlas, ICharAtlasRequest } from '../../shared/atlas/CharAtlasGenerator';
+import { generateCharAtlas } from '../../shared/atlas/CharAtlasGenerator';
 import { generateConfig, configEquals } from './CharAtlasUtils';
 
 interface ICharAtlasCacheEntry {
@@ -63,22 +63,8 @@ export function acquireCharAtlas(terminal: ITerminal, colors: IColorSet, scaledC
     return canvas;
   };
 
-  const charAtlasConfig: ICharAtlasRequest = {
-    scaledCharWidth,
-    scaledCharHeight,
-    fontSize: terminal.options.fontSize,
-    fontFamily: terminal.options.fontFamily,
-    fontWeight: terminal.options.fontWeight,
-    fontWeightBold: terminal.options.fontWeightBold,
-    background: colors.background,
-    foreground: colors.foreground,
-    ansiColors: colors.ansi,
-    devicePixelRatio: window.devicePixelRatio,
-    allowTransparency: terminal.options.allowTransparency
-  };
-
   const newEntry: ICharAtlasCacheEntry = {
-    bitmap: generateCharAtlas(window, canvasFactory, charAtlasConfig),
+    bitmap: generateCharAtlas(window, canvasFactory, newConfig),
     config: newConfig,
     ownedBy: [terminal]
   };

src/renderer/atlas/CharAtlasUtils.ts

@@ -6,7 +6,7 @@
 import { ITerminal } from '../../Types';
 import { ITheme } from 'xterm';
 import { IColorSet } from '../Types';
-import { ICharAtlasConfig } from './Types';
+import { ICharAtlasConfig } from '../../shared/atlas/Types';
 
 export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, terminal: ITerminal, colors: IColorSet): ICharAtlasConfig {
   const clonedColors = {
@@ -18,6 +18,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     ansi: colors.ansi.slice(0, 16)
   };
   return {
+    devicePixelRatio: window.devicePixelRatio,
     scaledCharWidth,
     scaledCharHeight,
     fontFamily: terminal.options.fontFamily,
@@ -35,7 +36,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
       return false;
     }
   }
-  return a.fontFamily === b.fontFamily &&
+  return a.devicePixelRatio === b.devicePixelRatio &&
+      a.fontFamily === b.fontFamily &&
       a.fontSize === b.fontSize &&
       a.fontWeight === b.fontWeight &&
       a.fontWeightBold === b.fontWeightBold &&

src/renderer/atlas/Types.ts

@@ -3,19 +3,5 @@
  * @license MIT
  */
 
-import { FontWeight } from 'xterm';
-import { IColorSet } from '../Types';
-
 export const INVERTED_DEFAULT_COLOR = -1;
 export const DIM_OPACITY = 0.5;
-
-export interface ICharAtlasConfig {
-  fontSize: number;
-  fontFamily: string;
-  fontWeight: FontWeight;
-  fontWeightBold: FontWeight;
-  scaledCharWidth: number;
-  scaledCharHeight: number;
-  allowTransparency: boolean;
-  colors: IColorSet;
-}

src/shared/Types.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export interface IColorSet {
+  foreground: string;
+  background: string;
+  cursor: string;
+  cursorAccent: string;
+  selection: string;
+  ansi: string[];
+}

src/shared/atlas/CharAtlasGenerator.ts

@@ -4,7 +4,7 @@
  */
 
 import { FontWeight } from 'xterm';
-import { CHAR_ATLAS_CELL_SPACING } from './Types';
+import { CHAR_ATLAS_CELL_SPACING, ICharAtlasConfig } from './Types';
 import { isFirefox } from '../utils/Browser';
 
 declare const Promise: any;
@@ -16,41 +16,27 @@ export interface IOffscreenCanvas {
   transferToImageBitmap(): ImageBitmap;
 }
 
-export interface ICharAtlasRequest {
-  scaledCharWidth: number;
-  scaledCharHeight: number;
-  fontSize: number;
-  fontFamily: string;
-  fontWeight: FontWeight;
-  fontWeightBold: FontWeight;
-  background: string;
-  foreground: string;
-  ansiColors: string[];
-  devicePixelRatio: number;
-  allowTransparency: boolean;
-}
-
 /**
  * Generates a char atlas.
  * @param context The window or worker context.
  * @param canvasFactory A function to generate a canvas with a width or height.
  * @param request The config for the new char atlas.
  */
-export function generateCharAtlas(context: Window, canvasFactory: (width: number, height: number) => HTMLCanvasElement | IOffscreenCanvas, request: ICharAtlasRequest): HTMLCanvasElement | Promise<ImageBitmap> {
-  const cellWidth = request.scaledCharWidth + CHAR_ATLAS_CELL_SPACING;
-  const cellHeight = request.scaledCharHeight + CHAR_ATLAS_CELL_SPACING;
+export function generateCharAtlas(context: Window, canvasFactory: (width: number, height: number) => HTMLCanvasElement | IOffscreenCanvas, config: ICharAtlasConfig): HTMLCanvasElement | Promise<ImageBitmap> {
+  const cellWidth = config.scaledCharWidth + CHAR_ATLAS_CELL_SPACING;
+  const cellHeight = config.scaledCharHeight + CHAR_ATLAS_CELL_SPACING;
   const canvas = canvasFactory(
     /*255 ascii chars*/255 * cellWidth,
     (/*default+default bold*/2 + /*0-15*/16) * cellHeight
   );
-  const ctx = canvas.getContext('2d', {alpha: request.allowTransparency});
+  const ctx = canvas.getContext('2d', {alpha: config.allowTransparency});
 
-  ctx.fillStyle = request.background;
+  ctx.fillStyle = config.colors.background;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
   ctx.save();
-  ctx.fillStyle = request.foreground;
-  ctx.font = getFont(request.fontWeight, request);
+  ctx.fillStyle = config.colors.foreground;
+  ctx.font = getFont(config.fontWeight, config);
   ctx.textBaseline = 'top';
 
   // Default color
@@ -64,7 +50,7 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
   }
   // Default color bold
   ctx.save();
-  ctx.font = getFont(request.fontWeightBold, request);
+  ctx.font = getFont(config.fontWeightBold, config);
   for (let i = 0; i < 256; i++) {
     ctx.save();
     ctx.beginPath();
@@ -76,11 +62,11 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
   ctx.restore();
 
   // Colors 0-15
-  ctx.font = getFont(request.fontWeight, request);
+  ctx.font = getFont(config.fontWeight, config);
   for (let colorIndex = 0; colorIndex < 16; colorIndex++) {
     // colors 8-15 are bold
     if (colorIndex === 8) {
-      ctx.font = getFont(request.fontWeightBold, request);
+      ctx.font = getFont(config.fontWeightBold, config);
     }
     const y = (colorIndex + 2) * cellHeight;
     // Draw ascii characters
@@ -89,7 +75,7 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
       ctx.beginPath();
       ctx.rect(i * cellWidth, y, cellWidth, cellHeight);
       ctx.clip();
-      ctx.fillStyle = request.ansiColors[colorIndex];
+      ctx.fillStyle = config.colors.ansi[colorIndex];
       ctx.fillText(String.fromCharCode(i), i * cellWidth, y);
       ctx.restore();
     }
@@ -114,9 +100,9 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
   const charAtlasImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
   // Remove the background color from the image so characters may overlap
-  const r = parseInt(request.background.substr(1, 2), 16);
-  const g = parseInt(request.background.substr(3, 2), 16);
-  const b = parseInt(request.background.substr(5, 2), 16);
+  const r = parseInt(config.colors.background.substr(1, 2), 16);
+  const g = parseInt(config.colors.background.substr(3, 2), 16);
+  const b = parseInt(config.colors.background.substr(5, 2), 16);
   clearColor(charAtlasImageData, r, g, b);
 
   return context.createImageBitmap(charAtlasImageData);
@@ -135,6 +121,6 @@ function clearColor(imageData: ImageData, r: number, g: number, b: number): void
   }
 }
 
-function getFont(fontWeight: FontWeight, request: ICharAtlasRequest): string {
-  return `${fontWeight} ${request.fontSize * request.devicePixelRatio}px ${request.fontFamily}`;
+function getFont(fontWeight: FontWeight, config: ICharAtlasConfig): string {
+  return `${fontWeight} ${config.fontSize * config.devicePixelRatio}px ${config.fontFamily}`;
 }

src/shared/atlas/Types.ts

@@ -3,4 +3,19 @@
  * @license MIT
  */
 
+import { FontWeight } from 'xterm';
+import { IColorSet } from '../Types';
+
 export const CHAR_ATLAS_CELL_SPACING = 1;
+
+export interface ICharAtlasConfig {
+  devicePixelRatio: number;
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: FontWeight;
+  fontWeightBold: FontWeight;
+  scaledCharWidth: number;
+  scaledCharHeight: number;
+  allowTransparency: boolean;
+  colors: IColorSet;
+}