diff --git a/src/Terminal.ts b/src/Terminal.ts index 59f675f3..4a667387 100644 --- a/src/Terminal.ts +++ b/src/Terminal.ts @@ -260,15 +260,13 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II this.options = clone(options); this._setup(); - // TODO: Replace EventEmitter with EventEmitter2 internally - this.on('refresh', e => this._onRender.fire(e)); - // TODO: Remove these in v4 // Fire old style events from new emitters this.onCursorMove(() => this.emit('cursormove')); this.onData(e => this.emit('data', e)); this.onKey(e => this.emit('key', e.key, e.domEvent)); this.onLineFeed(() => this.emit('linefeed')); + this.onRender(e => this.emit('refresh', e)); this.onResize(e => this.emit('resize', e)); this.onSelectionChange(() => this.emit('selection')); this.onScroll(e => this.emit('scroll', e)); @@ -687,8 +685,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II this.register(addDisposableDomListener(this.textarea, 'compositionstart', () => this._compositionHelper.compositionstart())); this.register(addDisposableDomListener(this.textarea, 'compositionupdate', (e: CompositionEvent) => this._compositionHelper.compositionupdate(e))); this.register(addDisposableDomListener(this.textarea, 'compositionend', () => this._compositionHelper.compositionend())); - this.register(this.addDisposableListener('refresh', () => this._compositionHelper.updateCompositionElements())); - this.register(this.addDisposableListener('refresh', (data) => this._queueLinkification(data.start, data.end))); + this.register(this.onRender(() => this._compositionHelper.updateCompositionElements())); + this.register(this.onRender(e => this._queueLinkification(e.start, e.end))); } /** @@ -838,6 +836,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II case 'dom': this.renderer = new DomRenderer(this, this.options.theme); break; default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`); } + this.renderer.onRender(e => this._onRender.fire(e)); this.register(this.renderer); } diff --git a/src/renderer/Renderer.ts b/src/renderer/Renderer.ts index 2c1b516a..b7ad6854 100644 --- a/src/renderer/Renderer.ts +++ b/src/renderer/Renderer.ts @@ -15,6 +15,7 @@ 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'; export class Renderer extends EventEmitter implements IRenderer { private _renderDebouncer: RenderDebouncer; @@ -29,6 +30,9 @@ export class Renderer extends EventEmitter implements IRenderer { public colorManager: ColorManager; public dimensions: IRenderDimensions; + 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) { super(); const allowTransparency = this._terminal.options.allowTransparency; @@ -197,7 +201,7 @@ export class Renderer extends EventEmitter implements IRenderer { */ private _renderRows(start: number, end: number): void { this._renderLayers.forEach(l => l.onGridChanged(this._terminal, start, end)); - this._terminal.emit('refresh', { start, end }); + this._onRender.fire({ start, end }); } /** diff --git a/src/renderer/Types.ts b/src/renderer/Types.ts index f2271f95..71e5fc30 100644 --- a/src/renderer/Types.ts +++ b/src/renderer/Types.ts @@ -5,6 +5,7 @@ import { ITerminal, CharacterJoinerHandler } from '../Types'; import { IEventEmitter, ITheme, IDisposable } from 'xterm'; +import { IEvent } from '../common/EventEmitter2'; /** * Flags used to render terminal text properly. @@ -27,6 +28,8 @@ export interface IRenderer extends IEventEmitter, IDisposable { dimensions: IRenderDimensions; colorManager: IColorManager; + onRender: IEvent<{ start: number, end: number }>; + dispose(): void; setTheme(theme: ITheme): IColorSet; onWindowResize(devicePixelRatio: number): void; diff --git a/src/renderer/dom/DomRenderer.ts b/src/renderer/dom/DomRenderer.ts index 78ccc620..0f70e93b 100644 --- a/src/renderer/dom/DomRenderer.ts +++ b/src/renderer/dom/DomRenderer.ts @@ -11,6 +11,7 @@ import { ColorManager } from '../ColorManager'; import { RenderDebouncer } from '../../ui/RenderDebouncer'; import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from './DomRendererRowFactory'; import { INVERTED_DEFAULT_COLOR } from '../atlas/Types'; +import { EventEmitter2, IEvent } from '../../common/EventEmitter2'; const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-'; const ROW_CONTAINER_CLASS = 'xterm-rows'; @@ -43,6 +44,9 @@ export class DomRenderer extends EventEmitter implements IRenderer { public dimensions: IRenderDimensions; public colorManager: ColorManager; + 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 | undefined) { super(); const allowTransparency = this._terminal.options.allowTransparency; @@ -350,7 +354,7 @@ export class DomRenderer extends EventEmitter implements IRenderer { rowElement.appendChild(this._rowFactory.createRow(lineData, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, terminal.cols)); } - this._terminal.emit('refresh', {start, end}); + this._onRender.fire({ start, end }); } private get _terminalSelector(): string { diff --git a/src/ui/TestUtils.test.ts b/src/ui/TestUtils.test.ts index ae57d1f9..9488a927 100644 --- a/src/ui/TestUtils.test.ts +++ b/src/ui/TestUtils.test.ts @@ -354,6 +354,7 @@ export class MockBuffer implements IBuffer { } export class MockRenderer implements IRenderer { + onRender: IEvent<{ start: number; end: number; }>; dispose(): void { throw new Error('Method not implemented.'); }