Add a dummy NoneCharAtlas implementation

This adds the logic needed to switch between multiple char atlas
implementations, and an example second implementation to test it out
with.

This also offers an escape hatch if something goes wrong with the char
atlas implementation(s).

demo/index.html

@@ -53,6 +53,15 @@
           <p>
             <label>tabStopWidth <input type="number" id="option-tabstopwidth" value="8" /></label>
           </p>
+          <p>
+            <label>
+              experimentalCharAtlas
+              <select id="option-experimental-char-atlas">
+                <option value="static" selected>static</option>
+                <option value="none">none</option>
+              </select>
+            </label>
+          </p>
           <div>
           	<h3>Size</h3>
             <div>

demo/main.js

@@ -32,6 +32,7 @@ var terminalContainer = document.getElementById('terminal-container'),
       macOptionIsMeta: document.querySelector('#option-mac-option-is-meta'),
       scrollback: document.querySelector('#option-scrollback'),
       tabstopwidth: document.querySelector('#option-tabstopwidth'),
+      experimentalCharAtlas: document.querySelector('#option-experimental-char-atlas'),
       bellStyle: document.querySelector('#option-bell-style'),
       screenReaderMode: document.querySelector('#option-screen-reader-mode')
     },
@@ -89,6 +90,9 @@ optionElements.scrollback.addEventListener('change', function () {
 optionElements.tabstopwidth.addEventListener('change', function () {
   term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value, 10));
 });
+optionElements.experimentalCharAtlas.addEventListener('change', function () {
+  term.setOption('experimentalCharAtlas', optionElements.experimentalCharAtlas.value);
+});
 optionElements.screenReaderMode.addEventListener('change', function () {
   term.setOption('screenReaderMode', optionElements.screenReaderMode.checked);
 });

src/Terminal.ts

@@ -102,6 +102,7 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
   bellSound: DEFAULT_BELL_SOUND,
   bellStyle: 'none',
   enableBold: true,
+  experimentalCharAtlas: 'static',
   fontFamily: 'courier-new, courier, monospace',
   fontSize: 15,
   fontWeight: 'normal',
@@ -454,6 +455,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
           this.charMeasure.measure(this.options);
         }
         break;
+      case 'experimentalCharAtlas':
       case 'enableBold':
       case 'letterSpacing':
       case 'lineHeight':

src/renderer/atlas/CharAtlasCache.ts

@@ -4,11 +4,17 @@
  */
 
 import { ITerminal } from '../../Types';
-import BaseCharAtlas from './BaseCharAtlas';
-import StaticCharAtlas from './StaticCharAtlas';
 import { IColorSet } from '../Types';
 import { ICharAtlasConfig } from '../../shared/atlas/Types';
 import { generateConfig, configEquals } from './CharAtlasUtils';
+import BaseCharAtlas from './BaseCharAtlas';
+import NoneCharAtlas from './NoneCharAtlas';
+import StaticCharAtlas from './StaticCharAtlas';
+
+const charAtlasImplementations = {
+  'none': NoneCharAtlas,
+  'static': StaticCharAtlas,
+};
 
 interface ICharAtlasCacheEntry {
   atlas: BaseCharAtlas;
@@ -64,7 +70,7 @@ export function acquireCharAtlas(
   }
 
   const newEntry: ICharAtlasCacheEntry = {
-    atlas: new StaticCharAtlas(
+    atlas: new charAtlasImplementations[terminal.options.experimentalCharAtlas](
       document,
       newConfig,
     ),

src/renderer/atlas/CharAtlasUtils.ts

@@ -17,6 +17,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     ansi: colors.ansi.slice(0, 16)
   };
   return {
+    type: terminal.options.experimentalCharAtlas,
     devicePixelRatio: window.devicePixelRatio,
     scaledCharWidth,
     scaledCharHeight,
@@ -35,7 +36,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
       return false;
     }
   }
-  return a.devicePixelRatio === b.devicePixelRatio &&
+  return a.type === b.type &&
+      a.devicePixelRatio === b.devicePixelRatio &&
       a.fontFamily === b.fontFamily &&
       a.fontSize === b.fontSize &&
       a.fontWeight === b.fontWeight &&

src/renderer/atlas/NoneCharAtlas.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * A dummy CharAtlas implementation that always fails to draw characters.
+ */
+
+import { IGlyphIdentifier } from './Types';
+import { ICharAtlasConfig } from '../../shared/atlas/Types';
+import BaseCharAtlas from './BaseCharAtlas';
+
+export default class NoneCharAtlas extends BaseCharAtlas {
+  constructor(document: Document, config: ICharAtlasConfig) {
+    super();
+  }
+
+  public draw(
+    ctx: CanvasRenderingContext2D,
+    glyph: IGlyphIdentifier,
+    x: number,
+    y: number
+  ): boolean {
+    return false;
+  }
+}

src/shared/atlas/Types.ts

@@ -9,6 +9,7 @@ import { IColorSet } from '../Types';
 export const CHAR_ATLAS_CELL_SPACING = 1;
 
 export interface ICharAtlasConfig {
+  type: 'none' | 'static';
   devicePixelRatio: number;
   fontSize: number;
   fontFamily: string;

typings/xterm.d.ts

@@ -61,6 +61,20 @@ declare module 'xterm' {
      */
     enableBold?: boolean;
 
+    /**
+     * What character atlas implementation to use. The character atlas caches drawn characters,
+     * speeding up rendering significantly. However, it can introduce some minor rendering
+     * artifacts.
+     *
+     * - 'none': Don't use an atlas.
+     * - 'static': Generate an atlas when the terminal starts or is reconfigured. This atlas will
+     *   only contain ASCII characters in 16 colors.
+     *
+     * Currently defaults to 'static'. This option may be removed in the future. If it is, passed
+     * parameters will be ignored.
+     */
+    experimentalCharAtlas?: 'none' | 'static';
+
     /**
      * The font size used to render text.
      */