Merge pull request #1236 from chabou/pr/1148

Add allowTransparency option

fixtures/typings-test/typings-test.ts

@@ -147,6 +147,7 @@ namespace methods_core {
       const r23: boolean = t.getOption('macOptionIsMeta');
       const r24: string = t.getOption('fontWeight');
       const r25: string = t.getOption('fontWeightBold');
+      const r26: boolean = t.getOption('allowTransparency');
     }
     {
       const t: Terminal = new Terminal();
@@ -167,6 +168,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/Terminal.ts

@@ -85,6 +85,7 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
   cancelEvents: false,
   disableStdin: false,
   useFlowControl: false,
+  allowTransparency: false,
   tabStopWidth: 8,
   theme: null
   // programFeatures: false,

src/renderer/BaseRenderLayer.ts

@@ -24,7 +24,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   private _charAtlas: HTMLCanvasElement | ImageBitmap;
 
   constructor(
-    container: HTMLElement,
+    private _container: HTMLElement,
     id: string,
     zIndex: number,
     private _alpha: boolean,
@@ -33,13 +33,16 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._canvas = document.createElement('canvas');
     this._canvas.classList.add(`xterm-${id}-layer`);
     this._canvas.style.zIndex = zIndex.toString();
-    this._ctx = this._canvas.getContext('2d', {alpha: _alpha});
-    this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    this._initCanvas();
+    this._container.appendChild(this._canvas);
+  }
+
+  private _initCanvas(): void {
+    this._ctx = this._canvas.getContext('2d', {alpha: this._alpha});
     // Draw the background if this is an opaque layer
-    if (!_alpha) {
+    if (!this._alpha) {
       this.clearAll();
     }
-    container.appendChild(this._canvas);
   }
 
   public onOptionsChanged(terminal: ITerminal): void {}
@@ -53,6 +56,25 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._refreshCharAtlas(terminal, colorSet);
   }
 
+  protected setTransparency(terminal: ITerminal, alpha: boolean): void {
+    // Do nothing when alpha doesn't change
+    if (alpha === this._alpha) {
+      return;
+    }
+
+    // Create new canvas and replace old one
+    const oldCanvas = this._canvas;
+    this._alpha = alpha;
+    // Closing preserves properties
+    this._canvas = <HTMLCanvasElement>this._canvas.cloneNode();
+    this._initCanvas();
+    this._container.replaceChild(this._canvas, oldCanvas);
+
+    // Regenerate char atlas and force a full redraw
+    this._refreshCharAtlas(terminal, this._colors);
+    this.onGridChanged(terminal, 0, terminal.rows - 1);
+  }
+
   /**
    * Refreshes the char atlas, aquiring a new one if necessary.
    * @param terminal The terminal.
@@ -63,7 +85,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       return;
     }
     this._charAtlas = null;
-    const result = acquireCharAtlas(terminal, this._colors, this._scaledCharWidth, this._scaledCharHeight);
+    const result = acquireCharAtlas(terminal, colorSet, this._scaledCharWidth, this._scaledCharHeight);
     if (result instanceof HTMLCanvasElement) {
       this._charAtlas = result;
     } else {

src/renderer/CharAtlas.ts

@@ -17,6 +17,7 @@ interface ICharAtlasConfig {
   fontWeightBold: string;
   scaledCharWidth: number;
   scaledCharHeight: number;
+  allowTransparency: boolean;
   colors: IColorSet;
 }
 
@@ -83,7 +84,8 @@ export function acquireCharAtlas(terminal: ITerminal, colors: IColorSet, scaledC
     background: colors.background,
     foreground: colors.foreground,
     ansiColors: colors.ansi,
-    devicePixelRatio: window.devicePixelRatio
+    devicePixelRatio: window.devicePixelRatio,
+    allowTransparency: terminal.options.allowTransparency
   };
 
   const newEntry: ICharAtlasCacheEntry = {
@@ -111,6 +113,7 @@ function generateConfig(scaledCharWidth: number, scaledCharHeight: number, termi
     fontSize: terminal.options.fontSize,
     fontWeight: terminal.options.fontWeight,
     fontWeightBold: terminal.options.fontWeightBold,
+    allowTransparency: terminal.options.allowTransparency,
     colors: clonedColors
   };
 }
@@ -125,6 +128,7 @@ function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean {
       a.fontSize === b.fontSize &&
       a.fontWeight === b.fontWeight &&
       a.fontWeightBold === b.fontWeightBold &&
+      a.allowTransparency === b.allowTransparency &&
       a.scaledCharWidth === b.scaledCharWidth &&
       a.scaledCharHeight === b.scaledCharHeight &&
       a.colors.foreground === b.colors.foreground &&

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

@@ -36,8 +36,9 @@ export class Renderer extends EventEmitter implements IRenderer {
     if (theme) {
       this.colorManager.setTheme(theme);
     }
+
     this._renderLayers = [
-      new TextRenderLayer(this._terminal.element, 0, this.colorManager.colors),
+      new TextRenderLayer(this._terminal.element, 0, this.colorManager.colors, this._terminal.options.allowTransparency),
       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

@@ -22,8 +22,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, colors: IColorSet, alpha: boolean) {
+    super(container, 'text', zIndex, alpha, colors);
     this._state = new GridCache<CharData>();
   }
 
@@ -190,6 +190,10 @@ export class TextRenderLayer extends BaseRenderLayer {
     }
   }
 
+  public onOptionsChanged(terminal: ITerminal): void {
+    this.setTransparency(terminal, terminal.options.allowTransparency);
+  }
+
   /**
    * Whether a character is overlapping to the next cell.
    */

src/shared/CharAtlasGenerator.ts

@@ -26,6 +26,7 @@ export interface ICharAtlasRequest {
   foreground: string;
   ansiColors: string[];
   devicePixelRatio: number;
+  allowTransparency: boolean;
 }
 
 export const CHAR_ATLAS_CELL_SPACING = 1;
@@ -43,7 +44,7 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
     /*255 ascii chars*/255 * cellWidth,
     (/*default+default bold*/2 + /*0-15*/16) * cellHeight
   );
-  const ctx = canvas.getContext('2d', {alpha: false});
+  const ctx = canvas.getContext('2d', {alpha: request.allowTransparency});
 
   ctx.fillStyle = request.background;
   ctx.fillRect(0, 0, canvas.width, canvas.height);

typings/xterm.d.ts

@@ -17,6 +17,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').
      */
@@ -421,7 +427,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' | 'macOptionIsMeta' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell'): boolean;
+    getOption(key: 'allowTransparency' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'enableBold' | 'macOptionIsMeta' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell'): boolean;
     /**
      * Retrieves an option's value from the terminal.
      * @param key The option key.
@@ -472,7 +478,7 @@ declare module 'xterm' {
      * @param key The option key.
      * @param value The option value.
      */
-    setOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'enableBold' | 'macOptionIsMeta' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell', value: boolean): void;
+    setOption(key: 'allowTransparency' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'enableBold' | 'macOptionIsMeta' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell', value: boolean): void;
     /**
      * Sets an option on the terminal.
      * @param key The option key.