From 55f9203f60e8e74557a536c8efcf3c4e504ae9db Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sat, 11 Apr 2020 09:51:28 -0700 Subject: [PATCH 1/2] Only fire IRenderService.onRender when buffer changes occurred Fixes #2836 --- addons/xterm-addon-webgl/src/WebglRenderer.ts | 10 +++++----- .../src/renderLayer/CursorRenderLayer.ts | 4 ++-- src/TestUtils.test.ts | 4 ++-- src/browser/Linkifier2.ts | 4 ++-- src/browser/renderer/CursorRenderLayer.ts | 10 +++++----- src/browser/renderer/Renderer.ts | 8 ++++---- src/browser/renderer/Types.d.ts | 8 ++++++-- src/browser/renderer/dom/DomRenderer.ts | 5 ++--- src/browser/services/RenderService.ts | 15 +++++++++++---- src/browser/services/Services.ts | 4 ++++ 10 files changed, 43 insertions(+), 29 deletions(-) diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts index b06ff3c383..8d52a35e6d 100644 --- a/addons/xterm-addon-webgl/src/WebglRenderer.ts +++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts @@ -16,7 +16,7 @@ import { Disposable } from 'common/Lifecycle'; import { NULL_CELL_CODE } from 'common/buffer/Constants'; import { Terminal, IEvent } from 'xterm'; import { IRenderLayer } from './renderLayer/Types'; -import { IRenderDimensions, IRenderer, IRequestRefreshRowsEvent } from 'browser/renderer/Types'; +import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types'; import { IColorSet } from 'browser/Types'; import { EventEmitter } from 'common/EventEmitter'; import { CellData } from 'common/buffer/CellData'; @@ -39,8 +39,8 @@ export class WebglRenderer extends Disposable implements IRenderer { private _core: ITerminal; private _isAttached: boolean; - private _onRequestRefreshRows = new EventEmitter(); - public get onRequestRefreshRows(): IEvent { return this._onRequestRefreshRows.event; } + private _onRequestRedraw = new EventEmitter(); + public get onRequestRedraw(): IEvent { return this._onRequestRedraw.event; } constructor( private _terminal: Terminal, @@ -53,7 +53,7 @@ export class WebglRenderer extends Disposable implements IRenderer { this._renderLayers = [ new LinkRenderLayer(this._core.screenElement, 2, this._colors, this._core), - new CursorRenderLayer(this._core.screenElement, 3, this._colors, this._onRequestRefreshRows) + new CursorRenderLayer(this._core.screenElement, 3, this._colors, this._onRequestRedraw) ]; this.dimensions = { scaledCharWidth: 0, @@ -178,7 +178,7 @@ export class WebglRenderer extends Disposable implements IRenderer { this._rectangleRenderer.updateSelection(this._model.selection, columnSelectMode); this._glyphRenderer.updateSelection(this._model, columnSelectMode); - this._onRequestRefreshRows.fire({ start: 0, end: this._terminal.rows - 1 }); + this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1 }); } public onCursorMove(): void { diff --git a/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts index 75201f47df..b2e834d300 100644 --- a/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts +++ b/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts @@ -8,7 +8,7 @@ import { BaseRenderLayer } from './BaseRenderLayer'; import { ICellData } from 'common/Types'; import { CellData } from 'common/buffer/CellData'; import { IColorSet } from 'browser/Types'; -import { IRenderDimensions, IRequestRefreshRowsEvent } from 'browser/renderer/Types'; +import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types'; import { IEventEmitter } from 'common/EventEmitter'; interface ICursorState { @@ -34,7 +34,7 @@ export class CursorRenderLayer extends BaseRenderLayer { container: HTMLElement, zIndex: number, colors: IColorSet, - private _onRequestRefreshRowsEvent: IEventEmitter + private _onRequestRefreshRowsEvent: IEventEmitter ) { super(container, 'cursor', zIndex, true, colors); this._state = { diff --git a/src/TestUtils.test.ts b/src/TestUtils.test.ts index 5d8347abb1..9f0b2701c7 100644 --- a/src/TestUtils.test.ts +++ b/src/TestUtils.test.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRowsEvent } from 'browser/renderer/Types'; +import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRedrawEvent } from 'browser/renderer/Types'; import { IInputHandlingTerminal, ICompositionHelper, ITerminal, IBrowser, ITerminalOptions } from './Types'; import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types'; import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, ICharset } from 'common/Types'; @@ -281,7 +281,7 @@ export class MockBuffer implements IBuffer { } export class MockRenderer implements IRenderer { - onRequestRefreshRows: IEvent; + onRequestRedraw: IEvent; onCanvasResize: IEvent<{ width: number, height: number }>; onRender: IEvent<{ start: number, end: number }>; dispose(): void { diff --git a/src/browser/Linkifier2.ts b/src/browser/Linkifier2.ts index 8936771887..1a076bc557 100644 --- a/src/browser/Linkifier2.ts +++ b/src/browser/Linkifier2.ts @@ -50,7 +50,7 @@ export class Linkifier2 implements ILinkifier2 { this._renderService = renderService; this._element.addEventListener('mousemove', this._onMouseMove.bind(this)); - this._element.addEventListener('click', this._onMouseDown.bind(this)); + this._element.addEventListener('click', this._onClick.bind(this)); } private _onMouseMove(event: MouseEvent): void { @@ -125,7 +125,7 @@ export class Linkifier2 implements ILinkifier2 { }); } - private _onMouseDown(event: MouseEvent): void { + private _onClick(event: MouseEvent): void { if (!this._element || !this._mouseService || !this._currentLink) { return; } diff --git a/src/browser/renderer/CursorRenderLayer.ts b/src/browser/renderer/CursorRenderLayer.ts index 607180ae02..123075c66c 100644 --- a/src/browser/renderer/CursorRenderLayer.ts +++ b/src/browser/renderer/CursorRenderLayer.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { IRenderDimensions, IRequestRefreshRowsEvent } from 'browser/renderer/Types'; +import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types'; import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer'; import { ICellData } from 'common/Types'; import { CellData } from 'common/buffer/CellData'; @@ -36,7 +36,7 @@ export class CursorRenderLayer extends BaseRenderLayer { zIndex: number, colors: IColorSet, rendererId: number, - private _onRequestRefreshRowsEvent: IEventEmitter, + private _onRequestRedraw: IEventEmitter, readonly bufferService: IBufferService, readonly optionsService: IOptionsService, private readonly _coreService: ICoreService, @@ -83,14 +83,14 @@ export class CursorRenderLayer extends BaseRenderLayer { if (this._cursorBlinkStateManager) { this._cursorBlinkStateManager.pause(); } - this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y }); + this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y }); } public onFocus(): void { if (this._cursorBlinkStateManager) { this._cursorBlinkStateManager.resume(); } else { - this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y }); + this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y }); } } @@ -107,7 +107,7 @@ export class CursorRenderLayer extends BaseRenderLayer { } // Request a refresh from the terminal as management of rendering is being // moved back to the terminal - this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y }); + this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y }); } public onCursorMove(): void { diff --git a/src/browser/renderer/Renderer.ts b/src/browser/renderer/Renderer.ts index a1161d4f29..4259add4e3 100644 --- a/src/browser/renderer/Renderer.ts +++ b/src/browser/renderer/Renderer.ts @@ -6,7 +6,7 @@ import { TextRenderLayer } from 'browser/renderer/TextRenderLayer'; import { SelectionRenderLayer } from 'browser/renderer/SelectionRenderLayer'; import { CursorRenderLayer } from 'browser/renderer/CursorRenderLayer'; -import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICharacterJoinerRegistry, IRequestRefreshRowsEvent } from 'browser/renderer/Types'; +import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICharacterJoinerRegistry, IRequestRedrawEvent } from 'browser/renderer/Types'; import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer'; import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry'; import { Disposable } from 'common/Lifecycle'; @@ -27,8 +27,8 @@ export class Renderer extends Disposable implements IRenderer { public dimensions: IRenderDimensions; - private _onRequestRefreshRows = new EventEmitter(); - public get onRequestRefreshRows(): IEvent { return this._onRequestRefreshRows.event; } + private _onRequestRedraw = new EventEmitter(); + public get onRequestRedraw(): IEvent { return this._onRequestRedraw.event; } constructor( private _colors: IColorSet, @@ -49,7 +49,7 @@ export class Renderer extends Disposable implements IRenderer { new TextRenderLayer(this._screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, this._bufferService, _optionsService), new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, _optionsService), new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier, linkifier2, this._bufferService, _optionsService), - new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRefreshRows, this._bufferService, _optionsService, coreService, coreBrowserService) + new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, _optionsService, coreService, coreBrowserService) ]; this.dimensions = { scaledCharWidth: 0, diff --git a/src/browser/renderer/Types.d.ts b/src/browser/renderer/Types.d.ts index b4c321a196..02c62ab2e8 100644 --- a/src/browser/renderer/Types.d.ts +++ b/src/browser/renderer/Types.d.ts @@ -24,7 +24,7 @@ export interface IRenderDimensions { actualCellHeight: number; } -export interface IRequestRefreshRowsEvent { +export interface IRequestRedrawEvent { start: number; end: number; } @@ -36,7 +36,11 @@ export interface IRequestRefreshRowsEvent { export interface IRenderer extends IDisposable { readonly dimensions: IRenderDimensions; - readonly onRequestRefreshRows: IEvent; + /** + * Fires when the renderer is requesting to be redrawn on the next animation + * frame but is _not_ a result of content changing (eg. selection changes). + */ + readonly onRequestRedraw: IEvent; dispose(): void; setColors(colors: IColorSet): void; diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index f8ad717bd3..a2e370fc4d 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRowsEvent } from 'browser/renderer/Types'; +import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRedrawEvent } from 'browser/renderer/Types'; import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory'; import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants'; import { Disposable } from 'common/Lifecycle'; @@ -39,8 +39,7 @@ export class DomRenderer extends Disposable implements IRenderer { public dimensions: IRenderDimensions; - private _onRequestRefreshRows = new EventEmitter(); - public get onRequestRefreshRows(): IEvent { return this._onRequestRefreshRows.event; } + public get onRequestRedraw(): IEvent { return new EventEmitter().event; } constructor( private _colors: IColorSet, diff --git a/src/browser/services/RenderService.ts b/src/browser/services/RenderService.ts index 2949c2c50b..4d195585f6 100644 --- a/src/browser/services/RenderService.ts +++ b/src/browser/services/RenderService.ts @@ -21,6 +21,7 @@ export class RenderService extends Disposable implements IRenderService { private _isPaused: boolean = false; private _needsFullRefresh: boolean = false; + private _isNextRenderRedrawOnly: boolean = true; private _canvasWidth: number = 0; private _canvasHeight: number = 0; @@ -52,7 +53,7 @@ export class RenderService extends Disposable implements IRenderService { this.register(charSizeService.onCharSizeChange(() => this.onCharSizeChanged())); // No need to register this as renderer is explicitly disposed in RenderService.dispose - this._renderer.onRequestRefreshRows(e => this.refreshRows(e.start, e.end)); + this._renderer.onRequestRedraw(e => this.refreshRows(e.start, e.end, true)); // dprchange should handle this case, we need this as well for browsers that don't support the // matchMedia query. @@ -75,17 +76,23 @@ export class RenderService extends Disposable implements IRenderService { } } - public refreshRows(start: number, end: number): void { + public refreshRows(start: number, end: number, isRedrawOnly: boolean = false): void { if (this._isPaused) { this._needsFullRefresh = true; return; } + if (!isRedrawOnly) { + this._isNextRenderRedrawOnly = false; + } this._renderDebouncer.refresh(start, end, this._rowCount); } private _renderRows(start: number, end: number): void { this._renderer.renderRows(start, end); - this._onRender.fire({ start, end }); + if (!this._isNextRenderRedrawOnly) { + this._onRender.fire({ start, end }); + } + this._isNextRenderRedrawOnly = true; } public resize(cols: number, rows: number): void { @@ -116,7 +123,7 @@ export class RenderService extends Disposable implements IRenderService { // TODO: RenderService should be the only one to dispose the renderer this._renderer.dispose(); this._renderer = renderer; - this._renderer.onRequestRefreshRows(e => this.refreshRows(e.start, e.end)); + this._renderer.onRequestRedraw(e => this.refreshRows(e.start, e.end, true)); this.refreshRows(0, this._rowCount - 1); } diff --git a/src/browser/services/Services.ts b/src/browser/services/Services.ts index 785fec34e0..e79d0c9f75 100644 --- a/src/browser/services/Services.ts +++ b/src/browser/services/Services.ts @@ -43,6 +43,10 @@ export interface IRenderService extends IDisposable { serviceBrand: any; onDimensionsChange: IEvent; + /** + * Fires when buffer changes are rendered. This does not fire when only cursor + * or selections are rendered. + */ onRender: IEvent<{ start: number, end: number }>; onRefreshRequest: IEvent<{ start: number, end: number }>; From 309bdf3d7085107b698ba44d58b2c602e7ed8812 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sat, 11 Apr 2020 09:53:22 -0700 Subject: [PATCH 2/2] Rename onRender --- src/Terminal.ts | 2 +- src/browser/Linkifier2.ts | 2 +- src/browser/TestUtils.test.ts | 2 +- src/browser/services/RenderService.ts | 2 +- src/browser/services/Services.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Terminal.ts b/src/Terminal.ts index ee2261151c..ea6898775e 100644 --- a/src/Terminal.ts +++ b/src/Terminal.ts @@ -543,7 +543,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp const renderer = this._createRenderer(); this._renderService = this._instantiationService.createInstance(RenderService, renderer, this.rows, this.screenElement); this._instantiationService.setService(IRenderService, this._renderService); - this._renderService.onRender(e => this._onRender.fire(e)); + this._renderService.onRenderedBufferChange(e => this._onRender.fire(e)); this.onResize(e => this._renderService.resize(e.cols, e.rows)); this._soundService = this._instantiationService.createInstance(SoundService); diff --git a/src/browser/Linkifier2.ts b/src/browser/Linkifier2.ts index 1a076bc557..7030e5d2b0 100644 --- a/src/browser/Linkifier2.ts +++ b/src/browser/Linkifier2.ts @@ -173,7 +173,7 @@ export class Linkifier2 implements ILinkifier2 { // Add listener for rerendering if (this._renderService) { - this._linkCacheDisposables.push(this._renderService.onRender(e => { + this._linkCacheDisposables.push(this._renderService.onRenderedBufferChange(e => { this._clearCurrentLink(e.start + 1 + this._bufferService.buffer.ydisp, e.end + 1 + this._bufferService.buffer.ydisp); })); } diff --git a/src/browser/TestUtils.test.ts b/src/browser/TestUtils.test.ts index 3e304bcfc1..6ca12d9c3b 100644 --- a/src/browser/TestUtils.test.ts +++ b/src/browser/TestUtils.test.ts @@ -30,7 +30,7 @@ export class MockMouseService implements IMouseService { export class MockRenderService implements IRenderService { serviceBrand: any; onDimensionsChange: IEvent = new EventEmitter().event; - onRender: IEvent<{ start: number, end: number }, void> = new EventEmitter<{ start: number, end: number }>().event; + onRenderedBufferChange: IEvent<{ start: number, end: number }, void> = new EventEmitter<{ start: number, end: number }>().event; onRefreshRequest: IEvent<{ start: number, end: number}, void> = new EventEmitter<{ start: number, end: number }>().event; dimensions: IRenderDimensions = { scaledCharWidth: 0, diff --git a/src/browser/services/RenderService.ts b/src/browser/services/RenderService.ts index 4d195585f6..1413f0d301 100644 --- a/src/browser/services/RenderService.ts +++ b/src/browser/services/RenderService.ts @@ -28,7 +28,7 @@ export class RenderService extends Disposable implements IRenderService { private _onDimensionsChange = new EventEmitter(); public get onDimensionsChange(): IEvent { return this._onDimensionsChange.event; } private _onRender = new EventEmitter<{ start: number, end: number }>(); - public get onRender(): IEvent<{ start: number, end: number }> { return this._onRender.event; } + public get onRenderedBufferChange(): IEvent<{ start: number, end: number }> { return this._onRender.event; } private _onRefreshRequest = new EventEmitter<{ start: number, end: number }>(); public get onRefreshRequest(): IEvent<{ start: number, end: number }> { return this._onRefreshRequest.event; } diff --git a/src/browser/services/Services.ts b/src/browser/services/Services.ts index e79d0c9f75..3754e6fed3 100644 --- a/src/browser/services/Services.ts +++ b/src/browser/services/Services.ts @@ -47,7 +47,7 @@ export interface IRenderService extends IDisposable { * Fires when buffer changes are rendered. This does not fire when only cursor * or selections are rendered. */ - onRender: IEvent<{ start: number, end: number }>; + onRenderedBufferChange: IEvent<{ start: number, end: number }>; onRefreshRequest: IEvent<{ start: number, end: number }>; dimensions: IRenderDimensions;