Add allowTransparency option

Fixes #1004

fixtures/typings-test/typings-test.ts

@@ -144,6 +144,7 @@ namespace methods_core {
       const r20: string = t.getOption('bellStyle');
       const r21: boolean = t.getOption('enableBold');
       const r22: number = t.getOption('letterSpacing');
+      const r23: boolean = t.getOption('allowTransparency');
     }
     {
       const t: Terminal = new Terminal();
@@ -160,6 +161,7 @@ namespace methods_core {
       t.setOption('popOnBell', true);
       t.setOption('screenKeys', true);
       t.setOption('useFlowControl', true);
+      t.setOption('allowTransparency', true);
       t.setOption('visualBell', true);
       t.setOption('colors', ['a', 'b']);
       t.setOption('letterSpacing', 1);

src/Interfaces.ts

@@ -150,6 +150,7 @@ export interface ITerminalOptions {
   termName?: string;
   theme?: ITheme;
   useFlowControl?: boolean;
+  allowTransparency?: boolean;
 }
 
 export interface IBuffer {

src/Terminal.ts

@@ -89,6 +89,7 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
   cancelEvents: false,
   disableStdin: false,
   useFlowControl: false,
+  allowTransparency: false,
   tabStopWidth: 8,
   theme: null
   // programFeatures: false,
@@ -578,7 +579,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     this.document = this.parent.ownerDocument;
     this.body = <HTMLBodyElement>this.document.body;
 
-    initializeCharAtlas(this.document);
+    initializeCharAtlas(this.document, this.options.allowTransparency);
 
     // Create main element container
     this.element = this.document.createElement('div');
@@ -629,7 +630,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
 
     this.charMeasure = new CharMeasure(document, this.helperContainer);
 
-    this.renderer = new Renderer(this, this.options.theme);
+    this.renderer = new Renderer(this, this.options.theme, this.options.allowTransparency);
     this.options.theme = null;
     this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasure);
     this.viewport.onThemeChanged(this.renderer.colorManager.colors);

src/renderer/CharAtlas.ts

@@ -110,9 +110,9 @@ let generator: CharAtlasGenerator;
  * Initializes the char atlas generator.
  * @param document The document.
  */
-export function initialize(document: Document): void {
+export function initialize(document: Document, alpha: boolean): void {
   if (!generator) {
-    generator = new CharAtlasGenerator(document);
+    generator = new CharAtlasGenerator(document, alpha);
   }
 }
 
@@ -120,9 +120,9 @@ class CharAtlasGenerator {
   private _canvas: HTMLCanvasElement;
   private _ctx: CanvasRenderingContext2D;
 
-  constructor(private _document: Document) {
+  constructor(private _document: Document, alpha: boolean) {
     this._canvas = this._document.createElement('canvas');
-    this._ctx = this._canvas.getContext('2d', {alpha: false});
+    this._ctx = this._canvas.getContext('2d', {alpha});
     this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
   }
 

src/renderer/ColorManager.ts

@@ -86,7 +86,7 @@ export class ColorManager implements IColorManager {
    */
   public setTheme(theme: ITheme): void {
     this.colors.foreground = theme.foreground || DEFAULT_FOREGROUND;
-    this.colors.background = this._validateColor(theme.background, DEFAULT_BACKGROUND);
+    this.colors.background = theme.background || DEFAULT_BACKGROUND;
     this.colors.cursor = theme.cursor || DEFAULT_CURSOR;
     this.colors.cursorAccent = theme.cursorAccent || DEFAULT_CURSOR_ACCENT;
     this.colors.selection = theme.selection || DEFAULT_SELECTION;
@@ -107,20 +107,4 @@ export class ColorManager implements IColorManager {
     this.colors.ansi[14] = theme.brightCyan || DEFAULT_ANSI_COLORS[14];
     this.colors.ansi[15] = theme.brightWhite || DEFAULT_ANSI_COLORS[15];
   }
-
-  private _validateColor(color: string, fallback: string): string {
-    if (!color) {
-      return fallback;
-    }
-    if (color.length === 7 && color.charAt(0) === '#') {
-      return color;
-    }
-    if (color.length === 4 && color.charAt(0) === '#') {
-      const r = color.charAt(1);
-      const g = color.charAt(2);
-      const b = color.charAt(3);
-      return `#${r}${r}${g}${g}${b}${b}`;
-    }
-    return fallback;
-  }
 }

src/renderer/Renderer.ts

@@ -25,14 +25,15 @@ export class Renderer extends EventEmitter implements IRenderer {
   public colorManager: ColorManager;
   public dimensions: IRenderDimensions;
 
-  constructor(private _terminal: ITerminal, theme: ITheme) {
+  constructor(private _terminal: ITerminal, theme: ITheme, alpha: boolean) {
     super();
     this.colorManager = new ColorManager();
     if (theme) {
       this.colorManager.setTheme(theme);
     }
+
     this._renderLayers = [
-      new TextRenderLayer(this._terminal.element, 0, this.colorManager.colors),
+      new TextRenderLayer(this._terminal.element, 0, alpha, this.colorManager.colors),
       new SelectionRenderLayer(this._terminal.element, 1, this.colorManager.colors),
       new LinkRenderLayer(this._terminal.element, 2, this.colorManager.colors, this._terminal),
       new CursorRenderLayer(this._terminal.element, 3, this.colorManager.colors)

src/renderer/TextRenderLayer.ts

@@ -24,8 +24,8 @@ export class TextRenderLayer extends BaseRenderLayer {
   private _characterFont: string;
   private _characterOverlapCache: { [key: string]: boolean } = {};
 
-  constructor(container: HTMLElement, zIndex: number, colors: IColorSet) {
-    super(container, 'text', zIndex, false, colors);
+  constructor(container: HTMLElement, zIndex: number, alpha: boolean, colors: IColorSet) {
+    super(container, 'text', zIndex, alpha, colors);
     this._state = new GridCache<CharData>();
   }
 

typings/xterm.d.ts

@@ -12,6 +12,12 @@ declare module 'xterm' {
    * An object containing start up options for the terminal.
    */
   export interface ITerminalOptions {
+    /**
+     * Whether background should support non-opaque color. It must be set before 
+     * executing open() method and can't be changed later without excuting it again.
+     * Warning: Enabling this option can reduce performances somewhat.
+     */
+    allowTransparency?: boolean;
     /**
      * A data uri of the sound to use for the bell (needs bellStyle = 'sound').
      */
@@ -409,7 +415,7 @@ declare module 'xterm' {
      * Retrieves an option's value from the terminal.
      * @param key The option key.
      */
-    getOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'enableBold' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell'): boolean;
+    getOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'enableBold' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell' | 'allowTransparency'): boolean;
     /**
      * Retrieves an option's value from the terminal.
      * @param key The option key.
@@ -454,7 +460,7 @@ declare module 'xterm' {
      * @param key The option key.
      * @param value The option value.
      */
-    setOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'enableBold' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell', value: boolean): void;
+    setOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'enableBold' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell' | 'allowTransparency', value: boolean): void;
     /**
      * Sets an option on the terminal.
      * @param key The option key.