Merge pull request #2094 from Tyriar/2005_colormanager

Move ColorManager to ui

src/Terminal.ts

@@ -53,6 +53,7 @@ import { clone } from './common/Clone';
 import { EventEmitter2, IEvent } from './common/EventEmitter2';
 import { Attributes, DEFAULT_ATTR_DATA } from './core/buffer/BufferLine';
 import { applyWindowsMode } from './WindowsMode';
+import { ColorManager } from './ui/ColorManager';
 
 // Let it work inside Node.js for automated testing purposes.
 const document = (typeof window !== 'undefined') ? window.document : null;
@@ -109,7 +110,7 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
   useFlowControl: false,
   allowTransparency: false,
   tabStopWidth: 8,
-  theme: null,
+  theme: undefined,
   rightClickSelectsWord: Browser.isMac,
   rendererType: 'canvas',
   windowsMode: false
@@ -212,6 +213,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
   private _mouseZoneManager: IMouseZoneManager;
   public mouseHelper: MouseHelper;
   private _accessibilityManager: AccessibilityManager;
+  private _colorManager: ColorManager;
   private _screenDprMonitor: ScreenDprMonitor;
   private _theme: ITheme;
   private _windowsMode: IDisposable | undefined;
@@ -528,9 +530,6 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
         }
         this._setupRenderer();
         this.renderer.onCharSizeChanged();
-        if (this._theme) {
-          this.renderer.setTheme(this._theme);
-        }
         this.mouseHelper.setRenderer(this.renderer);
         break;
       case 'scrollback':
@@ -765,11 +764,14 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
     // Performance: Add viewport and helper elements from the fragment
     this.element.appendChild(fragment);
 
-    this._setupRenderer();
     this._theme = this.options.theme;
     this.options.theme = null;
+    this._colorManager = new ColorManager(document, this.options.allowTransparency);
+    this._colorManager.setTheme(this._theme);
+    this._setupRenderer();
+
     this.viewport = new Viewport(this, this._viewportElement, this._viewportScrollArea, this.charMeasure);
-    this.viewport.onThemeChanged(this.renderer.colorManager.colors);
+    this.viewport.onThemeChange(this._colorManager.colors);
     this.register(this.viewport);
 
     this.register(this.onCursorMove(() => this.renderer.onCursorMove()));
@@ -833,8 +835,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
 
   private _setupRenderer(): void {
     switch (this.options.rendererType) {
-      case 'canvas': this.renderer = new Renderer(this, this.options.theme); break;
-      case 'dom': this.renderer = new DomRenderer(this, this.options.theme); break;
+      case 'canvas': this.renderer = new Renderer(this, this._colorManager.colors); break;
+      case 'dom': this.renderer = new DomRenderer(this, this._colorManager.colors); break;
       default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`);
     }
     this.renderer.onRender(e => this._onRender.fire(e));
@@ -847,9 +849,12 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
    */
   private _setTheme(theme: ITheme): void {
     this._theme = theme;
-    const colors = this.renderer.setTheme(theme);
+    this._colorManager.setTheme(theme);
+    if (this.renderer) {
+      this.renderer.onThemeChange(this._colorManager.colors);
+    }
     if (this.viewport) {
-      this.viewport.onThemeChanged(colors);
+      this.viewport.onThemeChange(this._colorManager.colors);
     }
   }
 

src/TestUtils.test.ts

@@ -3,15 +3,16 @@
  * @license MIT
  */
 
-import { IColorSet, IRenderer, IRenderDimensions, IColorManager } from './renderer/Types';
+import { IRenderer, IRenderDimensions } from './renderer/Types';
 import { IInputHandlingTerminal, IViewport, ICompositionHelper, ITerminal, IBuffer, IBufferSet, IBrowser, ICharMeasure, ISelectionManager, ITerminalOptions, ILinkifier, IMouseHelper, ILinkMatcherOptions, CharacterJoinerHandler, IBufferStringIterator } from './Types';
 import { IBufferLine, ICellData, IAttributeData } from './core/Types';
 import { ICircularList, XtermListener } from './common/Types';
 import { Buffer } from './Buffer';
 import * as Browser from './common/Platform';
-import { ITheme, IDisposable, IMarker, IEvent, ISelectionPosition } from 'xterm';
+import { IDisposable, IMarker, IEvent, ISelectionPosition } from 'xterm';
 import { Terminal } from './Terminal';
 import { AttributeData } from './core/buffer/BufferLine';
+import { IColorManager, IColorSet } from './ui/Types';
 
 export class TestTerminal extends Terminal {
   writeSync(data: string): void {
@@ -383,7 +384,9 @@ export class MockRenderer implements IRenderer {
     throw new Error('Method not implemented.');
   }
   dimensions: IRenderDimensions;
-  setTheme(theme: ITheme): IColorSet { return <IColorSet>{}; }
+  onThemeChange(colors: IColorSet): void {
+    throw new Error('Method not implemented.');
+  }
   onResize(cols: number, rows: number): void {}
   onCharSizeChanged(): void {}
   onBlur(): void {}
@@ -403,7 +406,7 @@ export class MockViewport implements IViewport {
     throw new Error('Method not implemented.');
   }
   scrollBarWidth: number = 0;
-  onThemeChanged(colors: IColorSet): void {
+  onThemeChange(colors: IColorSet): void {
     throw new Error('Method not implemented.');
   }
   onWheel(ev: WheelEvent): void {

src/Types.ts

@@ -4,10 +4,11 @@
  */
 
 import { ITerminalOptions as IPublicTerminalOptions, IEventEmitter, IDisposable, IMarker, ISelectionPosition } from 'xterm';
-import { IColorSet, IRenderer } from './renderer/Types';
+import { IRenderer } from './renderer/Types';
 import { ICharset, IAttributeData, ICellData, IBufferLine, CharData } from './core/Types';
 import { ICircularList } from './common/Types';
 import { IEvent } from './common/EventEmitter2';
+import { IColorSet } from './ui/Types';
 
 export type CustomKeyEventHandler = (event: KeyboardEvent) => boolean;
 
@@ -87,7 +88,7 @@ export interface IViewport extends IDisposable {
   onWheel(ev: WheelEvent): void;
   onTouchStart(ev: TouchEvent): void;
   onTouchMove(ev: TouchEvent): void;
-  onThemeChanged(colors: IColorSet): void;
+  onThemeChange(colors: IColorSet): void;
 }
 
 export interface ICompositionHelper {

src/Viewport.ts

@@ -3,11 +3,11 @@
  * @license MIT
  */
 
-import { IColorSet } from './renderer/Types';
 import { ITerminal, IViewport } from './Types';
 import { CharMeasure } from './CharMeasure';
 import { Disposable } from './common/Lifecycle';
 import { addDisposableDomListener } from './ui/Lifecycle';
+import { IColorSet } from './ui/Types';
 
 const FALLBACK_SCROLL_BAR_WIDTH = 15;
 
@@ -57,7 +57,7 @@ export class Viewport extends Disposable implements IViewport {
     setTimeout(() => this.syncScrollArea(), 0);
   }
 
-  public onThemeChanged(colors: IColorSet): void {
+  public onThemeChange(colors: IColorSet): void {
     this._viewportElement.style.backgroundColor = colors.background.css;
   }
 

src/renderer/BaseRenderLayer.ts

@@ -3,14 +3,15 @@
  * @license MIT
  */
 
-import { IRenderLayer, IColorSet, IRenderDimensions } from './Types';
+import { IRenderLayer, IRenderDimensions } from './Types';
 import { ITerminal } from '../Types';
 import { ICellData } from '../core/Types';
 import { DEFAULT_COLOR } from '../common/Types';
 import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, IGlyphIdentifier } from './atlas/Types';
 import BaseCharAtlas from './atlas/BaseCharAtlas';
 import { acquireCharAtlas } from './atlas/CharAtlasCache';
 import { CellData, AttributeData, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE } from '../core/buffer/BufferLine';
+import { IColorSet } from '../ui/Types';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -73,7 +74,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   public onGridChanged(terminal: ITerminal, startRow: number, endRow: number): void {}
   public onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number], columnSelectMode: boolean = false): void {}
 
-  public onThemeChanged(terminal: ITerminal, colorSet: IColorSet): void {
+  public onThemeChange(terminal: ITerminal, colorSet: IColorSet): void {
     this._refreshCharAtlas(terminal, colorSet);
   }
 

src/renderer/CursorRenderLayer.ts

@@ -3,11 +3,12 @@
  * @license MIT
  */
 
-import { IColorSet, IRenderDimensions } from './Types';
+import { IRenderDimensions } from './Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { ITerminal } from '../Types';
 import { ICellData } from '../core/Types';
 import { CellData } from '../core/buffer/BufferLine';
+import { IColorSet } from '../ui/Types';
 
 interface ICursorState {
   x: number;

src/renderer/LinkRenderLayer.ts

@@ -4,10 +4,11 @@
  */
 
 import { ILinkifierEvent, ITerminal, ILinkifierAccessor } from '../Types';
-import { IColorSet, IRenderDimensions } from './Types';
+import { IRenderDimensions } from './Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { INVERTED_DEFAULT_COLOR } from './atlas/Types';
 import { is256Color } from './atlas/CharAtlasUtils';
+import { IColorSet } from '../ui/Types';
 
 export class LinkRenderLayer extends BaseRenderLayer {
   private _state: ILinkifierEvent = null;

src/renderer/Renderer.ts

@@ -6,16 +6,15 @@
 import { TextRenderLayer } from './TextRenderLayer';
 import { SelectionRenderLayer } from './SelectionRenderLayer';
 import { CursorRenderLayer } from './CursorRenderLayer';
-import { ColorManager } from './ColorManager';
-import { IRenderLayer, IColorSet, IRenderer, IRenderDimensions, ICharacterJoinerRegistry } from './Types';
+import { IRenderLayer, IRenderer, IRenderDimensions, ICharacterJoinerRegistry } from './Types';
 import { ITerminal, CharacterJoinerHandler } from '../Types';
 import { LinkRenderLayer } from './LinkRenderLayer';
 import { RenderDebouncer } from '../ui/RenderDebouncer';
 import { ScreenDprMonitor } from '../ui/ScreenDprMonitor';
-import { ITheme } from 'xterm';
 import { CharacterJoinerRegistry } from '../renderer/CharacterJoinerRegistry';
 import { EventEmitter2, IEvent } from '../common/EventEmitter2';
 import { Disposable } from '../common/Lifecycle';
+import { IColorSet } from '../ui/Types';
 
 export class Renderer extends Disposable implements IRenderer {
   private _renderDebouncer: RenderDebouncer;
@@ -27,28 +26,26 @@ export class Renderer extends Disposable implements IRenderer {
   private _needsFullRefresh: boolean = false;
   private _characterJoinerRegistry: ICharacterJoinerRegistry;
 
-  public colorManager: ColorManager;
   public dimensions: IRenderDimensions;
 
   private _onCanvasResize = new EventEmitter2<{ width: number, height: number }>();
   public get onCanvasResize(): IEvent<{ width: number, height: number }> { return this._onCanvasResize.event; }
   private _onRender = new EventEmitter2<{ start: number, end: number }>();
   public get onRender(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
 
-  constructor(private _terminal: ITerminal, theme: ITheme) {
+  constructor(
+    private _terminal: ITerminal,
+    private _colors: IColorSet
+  ) {
     super();
     const allowTransparency = this._terminal.options.allowTransparency;
-    this.colorManager = new ColorManager(document, allowTransparency);
     this._characterJoinerRegistry = new CharacterJoinerRegistry(_terminal);
-    if (theme) {
-      this.colorManager.setTheme(theme);
-    }
 
     this._renderLayers = [
-      new TextRenderLayer(this._terminal.screenElement, 0, this.colorManager.colors, this._characterJoinerRegistry, allowTransparency),
-      new SelectionRenderLayer(this._terminal.screenElement, 1, this.colorManager.colors),
-      new LinkRenderLayer(this._terminal.screenElement, 2, this.colorManager.colors, this._terminal),
-      new CursorRenderLayer(this._terminal.screenElement, 3, this.colorManager.colors)
+      new TextRenderLayer(this._terminal.screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency),
+      new SelectionRenderLayer(this._terminal.screenElement, 1, this._colors),
+      new LinkRenderLayer(this._terminal.screenElement, 2, this._colors, this._terminal),
+      new CursorRenderLayer(this._terminal.screenElement, 3, this._colors)
     ];
     this.dimensions = {
       scaledCharWidth: null,
@@ -104,12 +101,10 @@ export class Renderer extends Disposable implements IRenderer {
     }
   }
 
-  public setTheme(theme: ITheme): IColorSet {
-    this.colorManager.setTheme(theme);
-
+  public onThemeChange(colors: IColorSet): void {
     // Clear layers and force a full render
     this._renderLayers.forEach(l => {
-      l.onThemeChanged(this._terminal, this.colorManager.colors);
+      l.onThemeChange(this._terminal, this._colors);
       l.reset(this._terminal);
     });
 
@@ -118,8 +113,6 @@ export class Renderer extends Disposable implements IRenderer {
     } else {
       this._terminal.refresh(0, this._terminal.rows - 1);
     }
-
-    return this.colorManager.colors;
   }
 
   public onResize(cols: number, rows: number): void {
@@ -167,7 +160,6 @@ export class Renderer extends Disposable implements IRenderer {
   }
 
   public onOptionsChanged(): void {
-    this.colorManager.allowTransparency = this._terminal.options.allowTransparency;
     this._runOperation(l => l.onOptionsChanged(this._terminal));
   }
 

src/renderer/SelectionRenderLayer.ts

@@ -4,8 +4,9 @@
  */
 
 import { ITerminal } from '../Types';
-import { IColorSet, IRenderDimensions } from './Types';
+import { IRenderDimensions } from './Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
+import { IColorSet } from '../ui/Types';
 
 interface ISelectionState {
   start: [number, number];

src/renderer/TextRenderLayer.ts

@@ -3,13 +3,14 @@
  * @license MIT
  */
 
-import { IColorSet, IRenderDimensions, ICharacterJoinerRegistry } from './Types';
+import { IRenderDimensions, ICharacterJoinerRegistry } from './Types';
 import { ITerminal } from '../Types';
 import { CharData, ICellData } from '../core/Types';
 import { GridCache } from './GridCache';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { CellData, AttributeData, Content, NULL_CELL_CODE } from '../core/buffer/BufferLine';
 import { JoinedCellData } from './CharacterJoinerRegistry';
+import { IColorSet } from '../ui/Types';
 
 /**
  * This CharData looks like a null character, which will forc a clear and render

src/renderer/Types.ts

@@ -4,8 +4,9 @@
  */
 
 import { ITerminal, CharacterJoinerHandler } from '../Types';
-import { ITheme, IDisposable } from 'xterm';
+import { IDisposable } from 'xterm';
 import { IEvent } from '../common/EventEmitter2';
+import { IColorSet } from '../ui/Types';
 
 /**
  * Flags used to render terminal text properly.
@@ -26,13 +27,12 @@ export const enum FLAGS {
  */
 export interface IRenderer extends IDisposable {
   dimensions: IRenderDimensions;
-  colorManager: IColorManager;
 
   onCanvasResize: IEvent<{ width: number, height: number }>;
   onRender: IEvent<{ start: number, end: number }>;
 
   dispose(): void;
-  setTheme(theme: ITheme): IColorSet;
+  onThemeChange(colors: IColorSet): void;
   onWindowResize(devicePixelRatio: number): void;
   onResize(cols: number, rows: number): void;
   onCharSizeChanged(): void;
@@ -47,10 +47,6 @@ export interface IRenderer extends IDisposable {
   deregisterCharacterJoiner(joinerId: number): boolean;
 }
 
-export interface IColorManager {
-  colors: IColorSet;
-}
-
 export interface IRenderDimensions {
   scaledCharWidth: number;
   scaledCharHeight: number;
@@ -90,7 +86,7 @@ export interface IRenderLayer extends IDisposable {
   /**
    * Called when the theme changes.
    */
-  onThemeChanged(terminal: ITerminal, colorSet: IColorSet): void;
+  onThemeChange(terminal: ITerminal, colorSet: IColorSet): void;
 
   /**
    * Called when the data in the grid has changed (or needs to be rendered
@@ -134,17 +130,3 @@ export interface ICharacterJoinerRegistry {
   deregisterCharacterJoiner(joinerId: number): boolean;
   getJoinedCharacters(row: number): [number, number][];
 }
-
-export interface IColor {
-  css: string;
-  rgba: number; // 32-bit int with rgba in each byte
-}
-
-export interface IColorSet {
-  foreground: IColor;
-  background: IColor;
-  cursor: IColor;
-  cursorAccent: IColor;
-  selection: IColor;
-  ansi: IColor[];
-}