Merge pull request #2209 from Tyriar/render_service

Create RenderService in browser (previously RenderCoordinator)

addons/xterm-addon-fit/src/FitAddon.ts

@@ -39,7 +39,7 @@ export class FitAddon implements ITerminalAddon {
 
     // Force a full render
     if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) {
-      core._renderCoordinator.clear();
+      core._renderService.clear();
       this._terminal.resize(dims.cols, dims.rows);
     }
   }
@@ -71,8 +71,8 @@ export class FitAddon implements ITerminalAddon {
     const availableHeight = parentElementHeight - elementPaddingVer;
     const availableWidth = parentElementWidth - elementPaddingHor - core.viewport.scrollBarWidth;
     const geometry = {
-      cols: Math.floor(availableWidth / core._renderCoordinator.dimensions.actualCellWidth),
-      rows: Math.floor(availableHeight / core._renderCoordinator.dimensions.actualCellHeight)
+      cols: Math.floor(availableWidth / core._renderService.dimensions.actualCellWidth),
+      rows: Math.floor(availableHeight / core._renderService.dimensions.actualCellHeight)
     };
     return geometry;
   }

demo/client.ts

@@ -307,8 +307,8 @@ function addDomListener(element: HTMLElement, type: string, handler: (...args: a
 function updateTerminalSize(): void {
   const cols = parseInt((<HTMLInputElement>document.getElementById(`opt-cols`)).value, 10);
   const rows = parseInt((<HTMLInputElement>document.getElementById(`opt-rows`)).value, 10);
-  const width = (cols * term._core._renderCoordinator.dimensions.actualCellWidth + term._core.viewport.scrollBarWidth).toString() + 'px';
-  const height = (rows * term._core._renderCoordinator.dimensions.actualCellHeight).toString() + 'px';
+  const width = (cols * term._core._renderService.dimensions.actualCellWidth + term._core.viewport.scrollBarWidth).toString() + 'px';
+  const height = (rows * term._core._renderService.dimensions.actualCellHeight).toString() + 'px';
   terminalContainer.style.width = width;
   terminalContainer.style.height = height;
   fitAddon.fit();

src/AccessibilityManager.ts

@@ -11,7 +11,7 @@ import { RenderDebouncer } from 'browser/RenderDebouncer';
 import { addDisposableDomListener } from 'browser/Lifecycle';
 import { Disposable } from 'common/Lifecycle';
 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
-import { IRenderDimensions } from './renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
 
 const MAX_ROWS_TO_READ = 20;
 

src/CompositionHelper.test.ts

@@ -6,7 +6,7 @@
 import { assert } from 'chai';
 import { CompositionHelper } from './CompositionHelper';
 import { ITerminal } from './Types';
-import { MockCharSizeService } from 'TestUtils.test';
+import { MockCharSizeService } from 'browser/TestUtils.test';
 
 describe('CompositionHelper', () => {
   let terminal: ITerminal;

src/SelectionManager.test.ts

@@ -10,10 +10,11 @@ import { BufferSet } from 'common/buffer/BufferSet';
 import { ITerminal } from './Types';
 import { IBuffer } from 'common/buffer/Types';
 import { IBufferLine } from 'common/Types';
-import { MockTerminal, MockCharSizeService } from './TestUtils.test';
+import { MockTerminal } from './TestUtils.test';
 import { MockOptionsService, MockBufferService } from 'common/TestUtils.test';
 import { BufferLine, CellData } from 'common/buffer/BufferLine';
 import { IBufferService } from 'common/services/Services';
+import { MockCharSizeService } from 'browser/TestUtils.test';
 
 class TestMockTerminal extends MockTerminal {
   emit(event: string, data: any): void {}

src/SelectionManager.ts

@@ -6,7 +6,7 @@
 import { ITerminal, ISelectionManager, ISelectionRedrawRequestEvent } from './Types';
 import { IBuffer } from 'common/buffer/Types';
 import { IBufferLine } from 'common/Types';
-import { MouseHelper } from './MouseHelper';
+import { MouseHelper } from './browser/input/MouseHelper';
 import * as Browser from 'common/Platform';
 import { SelectionModel } from './SelectionModel';
 import { AltClickHandler } from './handlers/AltClickHandler';

src/Terminal.ts

@@ -21,8 +21,8 @@
  *   http://linux.die.net/man/7/urxvt
  */
 
-import { IInputHandlingTerminal, IViewport, ICompositionHelper, ITerminalOptions, ITerminal, IBrowser, ILinkifier, ILinkMatcherOptions, CustomKeyEventHandler, LinkMatcherHandler, CharacterJoinerHandler, IMouseZoneManager } from './Types';
-import { IRenderer } from './renderer/Types';
+import { IInputHandlingTerminal, IViewport, ICompositionHelper, ITerminalOptions, ITerminal, IBrowser, ILinkifier, ILinkMatcherOptions, CustomKeyEventHandler, LinkMatcherHandler, IMouseZoneManager } from './Types';
+import { IRenderer, CharacterJoinerHandler } from 'browser/renderer/Types';
 import { BufferSet } from 'common/buffer/BufferSet';
 import { Buffer } from 'common/buffer/Buffer';
 import { CompositionHelper } from './CompositionHelper';
@@ -37,7 +37,7 @@ import { SelectionManager } from './SelectionManager';
 import * as Browser from 'common/Platform';
 import { addDisposableDomListener } from 'browser/Lifecycle';
 import * as Strings from './Strings';
-import { MouseHelper } from './MouseHelper';
+import { MouseHelper } from './browser/input/MouseHelper';
 import { SoundManager } from './SoundManager';
 import { MouseZoneManager } from './MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
@@ -50,7 +50,7 @@ import { EventEmitter2, IEvent } from 'common/EventEmitter2';
 import { Attributes, DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { applyWindowsMode } from './WindowsMode';
 import { ColorManager } from 'browser/ColorManager';
-import { RenderCoordinator } from './renderer/RenderCoordinator';
+import { RenderService } from 'browser/services/RenderService';
 import { IOptionsService, IBufferService } from 'common/services/Services';
 import { OptionsService } from 'common/services/OptionsService';
 import { ICharSizeService } from 'browser/services/Services';
@@ -111,6 +111,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
 
   // browser services
   private _charSizeService: ICharSizeService;
+  private _renderService: RenderService;
 
   // modes
   public applicationKeypad: boolean;
@@ -171,7 +172,6 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
 
   private _inputHandler: InputHandler;
   public soundManager: SoundManager;
-  private _renderCoordinator: RenderCoordinator;
   public selectionManager: SelectionManager;
   public linkifier: ILinkifier;
   public buffers: BufferSet;
@@ -360,8 +360,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
         case 'fontFamily':
         case 'fontSize':
           // When the font changes the size of the cells may change which requires a renderer clear
-          if (this._renderCoordinator) {
-            this._renderCoordinator.clear();
+          if (this._renderService) {
+            this._renderService.clear();
           }
           if (this._charSizeService) {
             this._charSizeService.measure();
@@ -373,15 +373,15 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
         case 'fontWeight':
         case 'fontWeightBold':
           // When the font changes the size of the cells may change which requires a renderer clear
-          if (this._renderCoordinator) {
-            this._renderCoordinator.clear();
-            this._renderCoordinator.onResize(this.cols, this.rows);
+          if (this._renderService) {
+            this._renderService.clear();
+            this._renderService.onResize(this.cols, this.rows);
             this.refresh(0, this.rows - 1);
           }
           break;
         case 'rendererType':
-          if (this._renderCoordinator) {
-            this._renderCoordinator.setRenderer(this._createRenderer());
+          if (this._renderService) {
+            this._renderService.setRenderer(this._createRenderer());
           }
           break;
         case 'scrollback':
@@ -392,8 +392,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
           break;
         case 'screenReaderMode':
           if (this.optionsService.options.screenReaderMode) {
-            if (!this._accessibilityManager && this._renderCoordinator) {
-              this._accessibilityManager = new AccessibilityManager(this, this._renderCoordinator.dimensions);
+            if (!this._accessibilityManager && this._renderService) {
+              this._accessibilityManager = new AccessibilityManager(this, this._renderService.dimensions);
             }
           } else {
             if (this._accessibilityManager) {
@@ -629,24 +629,24 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
     this._colorManager.setTheme(this._theme);
 
     const renderer = this._createRenderer();
-    this._renderCoordinator = new RenderCoordinator(renderer, this.rows, this.screenElement, this.optionsService, this._charSizeService);
-    this._renderCoordinator.onRender(e => this._onRender.fire(e));
-    this.onResize(e => this._renderCoordinator.resize(e.cols, e.rows));
+    this._renderService = new RenderService(renderer, this.rows, this.screenElement, this.optionsService, this._charSizeService);
+    this._renderService.onRender(e => this._onRender.fire(e));
+    this.onResize(e => this._renderService.resize(e.cols, e.rows));
 
-    this.viewport = new Viewport(this, this._viewportElement, this._viewportScrollArea, this._renderCoordinator.dimensions, this._charSizeService);
+    this.viewport = new Viewport(this, this._viewportElement, this._viewportScrollArea, this._renderService.dimensions, this._charSizeService);
     this.viewport.onThemeChange(this._colorManager.colors);
     this.register(this.viewport);
 
-    this.register(this.onCursorMove(() => this._renderCoordinator.onCursorMove()));
-    this.register(this.onResize(() => this._renderCoordinator.onResize(this.cols, this.rows)));
-    this.register(this.addDisposableListener('blur', () => this._renderCoordinator.onBlur()));
-    this.register(this.addDisposableListener('focus', () => this._renderCoordinator.onFocus()));
-    this.register(this._renderCoordinator.onDimensionsChange(() => this.viewport.syncScrollArea()));
+    this.register(this.onCursorMove(() => this._renderService.onCursorMove()));
+    this.register(this.onResize(() => this._renderService.onResize(this.cols, this.rows)));
+    this.register(this.addDisposableListener('blur', () => this._renderService.onBlur()));
+    this.register(this.addDisposableListener('focus', () => this._renderService.onFocus()));
+    this.register(this._renderService.onDimensionsChange(() => this.viewport.syncScrollArea()));
 
     this.selectionManager = new SelectionManager(this, this._charSizeService, this._bufferService);
     this.register(this.selectionManager.onSelectionChange(() => this._onSelectionChange.fire()));
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this.selectionManager.onMouseDown(e)));
-    this.register(this.selectionManager.onRedrawRequest(e => this._renderCoordinator.onSelectionChanged(e.start, e.end, e.columnSelectMode)));
+    this.register(this.selectionManager.onRedrawRequest(e => this._renderService.onSelectionChanged(e.start, e.end, e.columnSelectMode)));
     this.register(this.selectionManager.onLinuxMouseSelection(text => {
       // If there's a new selection, put it into the textarea, focus and select it
       // in order to register it as a selection on the OS. This event is fired
@@ -661,7 +661,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
     }));
     this.register(addDisposableDomListener(this._viewportElement, 'scroll', () => this.selectionManager.refresh()));
 
-    this.mouseHelper = new MouseHelper(this._renderCoordinator, this._charSizeService);
+    this.mouseHelper = new MouseHelper(this._renderService, this._charSizeService);
     // apply mouse event classes set by escape codes before terminal was attached
     this.element.classList.toggle('enable-mouse-events', this.mouseEvents);
     if (this.mouseEvents) {
@@ -673,8 +673,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
     if (this.options.screenReaderMode) {
       // Note that this must be done *after* the renderer is created in order to
       // ensure the correct order of the dprchange event
-      this._accessibilityManager = new AccessibilityManager(this, this._renderCoordinator.dimensions);
-      this._accessibilityManager.register(this._renderCoordinator.onDimensionsChange(e => this._accessibilityManager.setDimensions(e)));
+      this._accessibilityManager = new AccessibilityManager(this, this._renderService.dimensions);
+      this._accessibilityManager.register(this._renderService.onDimensionsChange(e => this._accessibilityManager.setDimensions(e)));
     }
 
     // Measure the character size
@@ -707,8 +707,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
   private _setTheme(theme: ITheme): void {
     this._theme = theme;
     this._colorManager.setTheme(theme);
-    if (this._renderCoordinator) {
-      this._renderCoordinator.setColors(this._colorManager.colors);
+    if (this._renderService) {
+      this._renderService.setColors(this._colorManager.colors);
     }
     if (this.viewport) {
       this.viewport.onThemeChange(this._colorManager.colors);
@@ -1064,8 +1064,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
    * @param end The row to end at (between start and this.rows - 1).
    */
   public refresh(start: number, end: number): void {
-    if (this._renderCoordinator) {
-      this._renderCoordinator.refreshRows(start, end);
+    if (this._renderService) {
+      this._renderService.refreshRows(start, end);
     }
   }
 
@@ -1460,13 +1460,13 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
   }
 
   public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
-    const joinerId = this._renderCoordinator.registerCharacterJoiner(handler);
+    const joinerId = this._renderService.registerCharacterJoiner(handler);
     this.refresh(0, this.rows - 1);
     return joinerId;
   }
 
   public deregisterCharacterJoiner(joinerId: number): void {
-    if (this._renderCoordinator.deregisterCharacterJoiner(joinerId)) {
+    if (this._renderService.deregisterCharacterJoiner(joinerId)) {
       this.refresh(0, this.rows - 1);
     }
   }

src/TestUtils.test.ts

@@ -3,8 +3,8 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions } from './renderer/Types';
-import { IInputHandlingTerminal, IViewport, ICompositionHelper, ITerminal, IBrowser, ISelectionManager, ITerminalOptions, ILinkifier, IMouseHelper, ILinkMatcherOptions, CharacterJoinerHandler } from './Types';
+import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { IInputHandlingTerminal, IViewport, ICompositionHelper, ITerminal, IBrowser, ISelectionManager, ITerminalOptions, ILinkifier, ILinkMatcherOptions } from './Types';
 import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types';
 import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener } from 'common/Types';
 import { Buffer } from 'common/buffer/Buffer';
@@ -12,9 +12,8 @@ import * as Browser from 'common/Platform';
 import { IDisposable, IMarker, IEvent, ISelectionPosition } from 'xterm';
 import { Terminal } from './Terminal';
 import { AttributeData } from 'common/buffer/BufferLine';
-import { IColorManager, IColorSet } from 'browser/Types';
+import { IColorManager, IColorSet, IMouseHelper } from 'browser/Types';
 import { IOptionsService } from 'common/services/Services';
-import { ICharSizeService } from 'browser/services/Services';
 
 export class TestTerminal extends Terminal {
   writeSync(data: string): void {
@@ -428,10 +427,3 @@ export class MockCompositionHelper implements ICompositionHelper {
     return true;
   }
 }
-
-export class MockCharSizeService implements ICharSizeService {
-  get hasValidSize(): boolean { return this.width > 0 && this.height > 0; }
-  onCharSizeChange: IEvent<void>;
-  constructor(public width: number, public height: number) {}
-  measure(): void {}
-}

src/Types.ts

@@ -6,7 +6,7 @@
 import { ITerminalOptions as IPublicTerminalOptions, IEventEmitter, IDisposable, IMarker, ISelectionPosition } from 'xterm';
 import { ICharset, IAttributeData, CharData } from 'common/Types';
 import { IEvent } from 'common/EventEmitter2';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, IMouseHelper } from 'browser/Types';
 import { IOptionsService } from 'common/services/Services';
 import { IBuffer, IBufferSet } from 'common/buffer/Types';
 
@@ -17,8 +17,6 @@ export type LineData = CharData[];
 export type LinkMatcherHandler = (event: MouseEvent, uri: string) => void;
 export type LinkMatcherValidationCallback = (uri: string, callback: (isValid: boolean) => void) => void;
 
-export type CharacterJoinerHandler = (text: string) => [number, number][];
-
 /**
  * This interface encapsulates everything needed from the Terminal by the
  * InputHandler. This cleanly separates the large amount of methods needed by
@@ -279,11 +277,6 @@ export interface ILinkifierAccessor {
   linkifier: ILinkifier;
 }
 
-export interface IMouseHelper {
-  getCoords(event: { clientX: number, clientY: number }, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number];
-  getRawByteCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { x: number, y: number };
-}
-
 // TODO: The options that are not in the public API should be reviewed
 export interface ITerminalOptions extends IPublicTerminalOptions {
   [key: string]: any;

src/Viewport.ts

@@ -7,7 +7,7 @@ import { ITerminal, IViewport } from './Types';
 import { Disposable } from 'common/Lifecycle';
 import { addDisposableDomListener } from 'browser/Lifecycle';
 import { IColorSet } from 'browser/Types';
-import { IRenderDimensions } from './renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
 import { ICharSizeService } from 'browser/services/Services';
 
 const FALLBACK_SCROLL_BAR_WIDTH = 15;

src/browser/ColorManager.ts

@@ -3,7 +3,8 @@
  * @license MIT
  */
 
-import { IColorManager, IColor, IColorSet, ITheme } from 'browser/Types';
+import { IColorManager, IColor, IColorSet } from 'browser/Types';
+import { ITheme } from 'common/services/Services';
 
 const DEFAULT_FOREGROUND = fromHex('#ffffff');
 const DEFAULT_BACKGROUND = fromHex('#000000');

src/browser/TestUtils.test.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IEvent, EventEmitter2 } from 'common/EventEmitter2';
+import { ICharSizeService } from 'browser/services/Services';
+
+export class MockCharSizeService implements ICharSizeService {
+  get hasValidSize(): boolean { return this.width > 0 && this.height > 0; }
+  onCharSizeChange: IEvent<void> = new EventEmitter2<void>().event;
+  constructor(public width: number, public height: number) {}
+  measure(): void {}
+}

src/browser/Types.ts

@@ -21,26 +21,7 @@ export interface IColorSet {
   ansi: IColor[];
 }
 
-export interface ITheme {
-  foreground?: string;
-  background?: string;
-  cursor?: string;
-  cursorAccent?: string;
-  selection?: string;
-  black?: string;
-  red?: string;
-  green?: string;
-  yellow?: string;
-  blue?: string;
-  magenta?: string;
-  cyan?: string;
-  white?: string;
-  brightBlack?: string;
-  brightRed?: string;
-  brightGreen?: string;
-  brightYellow?: string;
-  brightBlue?: string;
-  brightMagenta?: string;
-  brightCyan?: string;
-  brightWhite?: string;
+export interface IMouseHelper {
+  getCoords(event: { clientX: number, clientY: number }, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] | undefined;
+  getRawByteCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { x: number | undefined, y: number | undefined };
 }

src/browser/input/MouseHelper.test.ts

@@ -5,8 +5,8 @@
 
 import jsdom = require('jsdom');
 import { assert } from 'chai';
-import { MouseHelper } from './MouseHelper';
-import { MockRenderer, MockCharSizeService } from './TestUtils.test';
+import { MouseHelper } from 'browser/input/MouseHelper';
+import { MockCharSizeService } from 'browser/TestUtils.test';
 
 const CHAR_WIDTH = 10;
 const CHAR_HEIGHT = 20;
@@ -17,16 +17,17 @@ describe('MouseHelper.getCoords', () => {
 
   beforeEach(() => {
     document = new jsdom.JSDOM('').window.document;
-    const renderer = new MockRenderer();
-    renderer.dimensions = <any>{
-      actualCellWidth: CHAR_WIDTH,
-      actualCellHeight: CHAR_HEIGHT
+    const mockRenderService = {
+      dimensions: {
+        actualCellWidth: CHAR_WIDTH,
+        actualCellHeight: CHAR_HEIGHT
+      }
     };
-    mouseHelper = new MouseHelper(renderer as any, new MockCharSizeService(CHAR_WIDTH, CHAR_HEIGHT));
+    mouseHelper = new MouseHelper(mockRenderService as any, new MockCharSizeService(CHAR_WIDTH, CHAR_HEIGHT));
   });
 
   it('should return the cell that was clicked', () => {
-    let coords: [number, number];
+    let coords: [number, number] | undefined;
     coords = mouseHelper.getCoords({ clientX: CHAR_WIDTH / 2, clientY: CHAR_HEIGHT / 2 }, document.createElement('div'), 10, 10);
     assert.deepEqual(coords, [1, 1]);
     coords = mouseHelper.getCoords({ clientX: CHAR_WIDTH, clientY: CHAR_HEIGHT }, document.createElement('div'), 10, 10);
@@ -38,7 +39,7 @@ describe('MouseHelper.getCoords', () => {
   });
 
   it('should ensure the coordinates are returned within the terminal bounds', () => {
-    let coords: [number, number];
+    let coords: [number, number] | undefined;
     coords = mouseHelper.getCoords({ clientX: -1, clientY: -1 }, document.createElement('div'), 10, 10);
     assert.deepEqual(coords, [1, 1]);
     // Event are double the cols/rows

src/browser/input/MouseHelper.ts

@@ -3,13 +3,13 @@
  * @license MIT
  */
 
-import { IMouseHelper } from './Types';
-import { RenderCoordinator } from './renderer/RenderCoordinator';
+import { IMouseHelper } from 'browser/Types';
+import { RenderService } from 'browser/services/RenderService';
 import { ICharSizeService } from 'browser/services/Services';
 
 export class MouseHelper implements IMouseHelper {
   constructor(
-    private _renderCoordinator: RenderCoordinator,
+    private _renderService: RenderService,
     private _charSizeService: ICharSizeService
   ) {
   }
@@ -31,19 +31,19 @@ export class MouseHelper implements IMouseHelper {
    * apply an offset to the x value such that the left half of the cell will
    * select that cell and the right half will select the next cell.
    */
-  public getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] {
+  public getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] | undefined {
     // Coordinates cannot be measured if there are no valid
     if (!this._charSizeService.hasValidSize) {
-      return null;
+      return undefined;
     }
 
     const coords = MouseHelper.getCoordsRelativeToElement(event, element);
     if (!coords) {
-      return null;
+      return undefined;
     }
 
-    coords[0] = Math.ceil((coords[0] + (isSelection ? this._renderCoordinator.dimensions.actualCellWidth / 2 : 0)) / this._renderCoordinator.dimensions.actualCellWidth);
-    coords[1] = Math.ceil(coords[1] / this._renderCoordinator.dimensions.actualCellHeight);
+    coords[0] = Math.ceil((coords[0] + (isSelection ? this._renderService.dimensions.actualCellWidth / 2 : 0)) / this._renderService.dimensions.actualCellWidth);
+    coords[1] = Math.ceil(coords[1] / this._renderService.dimensions.actualCellHeight);
 
     // Ensure coordinates are within the terminal viewport. Note that selections
     // need an addition point of precision to cover the end point (as characters
@@ -63,14 +63,12 @@ export class MouseHelper implements IMouseHelper {
    * @param colCount The number of columns in the terminal.
    * @param rowCount The number of rows in the terminal.
    */
-  public getRawByteCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { x: number, y: number } {
+  public getRawByteCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { x: number | undefined, y: number | undefined } {
     const coords = this.getCoords(event, element, colCount, rowCount);
-    let x = coords[0];
-    let y = coords[1];
 
     // xterm sends raw bytes and starts at 32 (SP) for each.
-    x += 32;
-    y += 32;
+    const x = coords ? coords[0] + 32 : undefined;
+    const y = coords ? coords[1] + 32 : undefined;
 
     return { x, y };
   }

src/browser/renderer/Types.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable } from 'common/Types';
+import { IColorSet } from 'browser/Types';
+
+export type CharacterJoinerHandler = (text: string) => [number, number][];
+
+export interface IRenderDimensions {
+  scaledCharWidth: number;
+  scaledCharHeight: number;
+  scaledCellWidth: number;
+  scaledCellHeight: number;
+  scaledCharLeft: number;
+  scaledCharTop: number;
+  scaledCanvasWidth: number;
+  scaledCanvasHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  actualCellWidth: number;
+  actualCellHeight: number;
+}
+
+/**
+ * Note that IRenderer implementations should emit the refresh event after
+ * rendering rows to the screen.
+ */
+export interface IRenderer extends IDisposable {
+  readonly dimensions: IRenderDimensions;
+
+  dispose(): void;
+  setColors(colors: IColorSet): void;
+  onDevicePixelRatioChange(): void;
+  onResize(cols: number, rows: number): void;
+  onCharSizeChanged(): void;
+  onBlur(): void;
+  onFocus(): void;
+  onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean): void;
+  onCursorMove(): void;
+  onOptionsChanged(): void;
+  clear(): void;
+  renderRows(start: number, end: number): void;
+  registerCharacterJoiner(handler: CharacterJoinerHandler): number;
+  deregisterCharacterJoiner(joinerId: number): boolean;
+}

src/browser/services/RenderService.ts

@@ -3,18 +3,17 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions } from './Types';
+import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types';
 import { RenderDebouncer } from 'browser/RenderDebouncer';
 import { EventEmitter2, IEvent } from 'common/EventEmitter2';
 import { Disposable } from 'common/Lifecycle';
 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
 import { addDisposableDomListener } from 'browser/Lifecycle';
 import { IColorSet } from 'browser/Types';
-import { CharacterJoinerHandler } from '../Types';
 import { IOptionsService } from 'common/services/Services';
-import { ICharSizeService } from 'browser/services/Services';
+import { ICharSizeService, IRenderService } from 'browser/services/Services';
 
-export class RenderCoordinator extends Disposable {
+export class RenderService extends Disposable implements IRenderService {
   private _renderDebouncer: RenderDebouncer;
   private _screenDprMonitor: ScreenDprMonitor;
 

src/browser/services/Services.d.ts

@@ -4,6 +4,8 @@
  */
 
 import { IEvent } from 'common/EventEmitter2';
+import { IRenderDimensions, IRenderer, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { IColorSet } from 'browser/Types';
 
 export interface ICharSizeService {
   readonly width: number;
@@ -14,3 +16,28 @@ export interface ICharSizeService {
 
   measure(): void;
 }
+
+export interface IRenderService {
+  onDimensionsChange: IEvent<IRenderDimensions>;
+  onRender: IEvent<{ start: number, end: number }>;
+  onRefreshRequest: IEvent<{ start: number, end: number }>;
+
+  dimensions: IRenderDimensions;
+
+  refreshRows(start: number, end: number): void;
+  resize(cols: number, rows: number): void;
+  changeOptions(): void;
+  setRenderer(renderer: IRenderer): void;
+  setColors(colors: IColorSet): void;
+  onDevicePixelRatioChange(): void;
+  onResize(cols: number, rows: number): void;
+  // TODO: Is this useful when we have onResize?
+  onCharSizeChanged(): void;
+  onBlur(): void;
+  onFocus(): void;
+  onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean): void;
+  onCursorMove(): void;
+  clear(): void;
+  registerCharacterJoiner(handler: CharacterJoinerHandler): number;
+  deregisterCharacterJoiner(joinerId: number): boolean;
+}

src/renderer/BaseRenderLayer.ts

@@ -3,7 +3,8 @@
  * @license MIT
  */
 
-import { IRenderLayer, IRenderDimensions } from './Types';
+import { IRenderLayer } from './Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
 import { ITerminal } from '../Types';
 import { ICellData, DEFAULT_COLOR } from 'common/Types';
 import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, IGlyphIdentifier } from './atlas/Types';

src/renderer/CursorRenderLayer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IRenderDimensions } from './Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { ITerminal } from '../Types';
 import { ICellData } from 'common/Types';