Skip to content

Commit

Permalink
Merge pull request #2100 from Tyriar/2099_pausing
Browse files Browse the repository at this point in the history 
Support pausing in RenderCoordinator
  • Loading branch information
@Tyriar
Tyriar committed May 19, 2019
2 parents 72e6863 + 43015f8 commit eb70ddc
Show file tree
Hide file tree
Showing 11 changed files with 185 additions and 128 deletions.
4 changes: 2 additions & 2 deletions demo/client.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,8 +296,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.renderer.dimensions.actualCellWidth + term._core.viewport.scrollBarWidth).toString() + 'px';
const height = (rows * term._core.renderer.dimensions.actualCellHeight).toString() + 'px';
const width = (cols * term._core._renderCoordinator.dimensions.actualCellWidth + term._core.viewport.scrollBarWidth).toString() + 'px';
const height = (rows * term._core._renderCoordinator.dimensions.actualCellHeight).toString() + 'px';
terminalContainer.style.width = width;
terminalContainer.style.height = height;
term.fit();
Expand Down
25 changes: 17 additions & 8 deletions src/AccessibilityManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { RenderDebouncer } from './ui/RenderDebouncer';
import { addDisposableDomListener } from './ui/Lifecycle';
import { Disposable } from './common/Lifecycle';
import { ScreenDprMonitor } from './ui/ScreenDprMonitor';
import { IRenderDimensions } from './renderer/Types';

const MAX_ROWS_TO_READ = 20;

Expand Down Expand Up @@ -42,7 +43,10 @@ export class AccessibilityManager extends Disposable {
*/
private _charsToConsume: string[] = [];

constructor(private _terminal: ITerminal) {
constructor(
private _terminal: ITerminal,
private _dimensions: IRenderDimensions
) {
super();
this._accessibilityTreeRoot = document.createElement('div');
this._accessibilityTreeRoot.classList.add('xterm-accessibility');
Expand All @@ -60,7 +64,7 @@ export class AccessibilityManager extends Disposable {
this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);

this.refreshRowsDimensions();
this._refreshRowsDimensions();
this._accessibilityTreeRoot.appendChild(this._rowContainer);

this._renderRowsDebouncer = new RenderDebouncer(this._renderRows.bind(this));
Expand All @@ -86,10 +90,10 @@ export class AccessibilityManager extends Disposable {

this._screenDprMonitor = new ScreenDprMonitor();
this.register(this._screenDprMonitor);
this._screenDprMonitor.setListener(() => this.refreshRowsDimensions());
this._screenDprMonitor.setListener(() => this._refreshRowsDimensions());
// This shouldn't be needed on modern browsers but is present in case the
// media query that drives the ScreenDprMonitor isn't supported
this.register(addDisposableDomListener(window, 'resize', () => this.refreshRowsDimensions()));
this.register(addDisposableDomListener(window, 'resize', () => this._refreshRowsDimensions()));
}

public dispose(): void {
Expand Down Expand Up @@ -175,7 +179,7 @@ export class AccessibilityManager extends Disposable {
// Add bottom boundary listener
this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);

this.refreshRowsDimensions();
this._refreshRowsDimensions();
}

private _createAccessibilityTreeNode(): HTMLElement {
Expand Down Expand Up @@ -258,8 +262,8 @@ export class AccessibilityManager extends Disposable {
}
}

public refreshRowsDimensions(): void {
if (!this._terminal.renderer.dimensions.actualCellHeight) {
private _refreshRowsDimensions(): void {
if (!this._dimensions.actualCellHeight) {
return;
}
if (this._rowElements.length !== this._terminal.rows) {
Expand All @@ -270,8 +274,13 @@ export class AccessibilityManager extends Disposable {
}
}

public setDimensions(dimensions: IRenderDimensions): void {
this._dimensions = dimensions;
this._refreshRowsDimensions();
}

private _refreshRowDimensions(element: HTMLElement): void {
element.style.height = `${this._terminal.renderer.dimensions.actualCellHeight}px`;
element.style.height = `${this._dimensions.actualCellHeight}px`;
}

private _announceCharacter(char: string): void {
Expand Down
2 changes: 1 addition & 1 deletion src/MouseHelper.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ describe('MouseHelper.getCoords', () => {
actualCellWidth: CHAR_WIDTH,
actualCellHeight: CHAR_HEIGHT
};
mouseHelper = new MouseHelper(renderer);
mouseHelper = new MouseHelper(renderer as any);
});

describe('when charMeasure is not initialized', () => {
Expand Down
13 changes: 6 additions & 7 deletions src/MouseHelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@
*/

import { ICharMeasure, IMouseHelper } from './Types';
import { IRenderer } from './renderer/Types';
import { RenderCoordinator } from './renderer/RenderCoordinator';

export class MouseHelper implements IMouseHelper {
constructor(private _renderer: IRenderer) {}

public setRenderer(renderer: IRenderer): void {
this._renderer = renderer;
constructor(
private _renderCoordinator: RenderCoordinator
) {
}

public static getCoordsRelativeToElement(event: {clientX: number, clientY: number}, element: HTMLElement): [number, number] {
Expand Down Expand Up @@ -42,8 +41,8 @@ export class MouseHelper implements IMouseHelper {
return null;
}

coords[0] = Math.ceil((coords[0] + (isSelection ? this._renderer.dimensions.actualCellWidth / 2 : 0)) / this._renderer.dimensions.actualCellWidth);
coords[1] = Math.ceil(coords[1] / this._renderer.dimensions.actualCellHeight);
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);

// Ensure coordinates are within the terminal viewport. Note that selections
// need an addition point of precision to cover the end point (as characters
Expand Down
82 changes: 32 additions & 50 deletions src/Terminal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,6 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
private _inputHandler: InputHandler;
public soundManager: SoundManager;
private _renderCoordinator: RenderCoordinator;
public renderer: IRenderer;
public selectionManager: SelectionManager;
public linkifier: ILinkifier;
public buffers: BufferSet;
Expand Down Expand Up @@ -356,8 +355,6 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
this._inputHandler.onLineFeed(() => this._onLineFeed.fire());
this.register(this._inputHandler);

// Reuse renderer if the Terminal is being recreated via a reset call.
this.renderer = this.renderer || null;
this.selectionManager = this.selectionManager || null;
this.linkifier = this.linkifier || new Linkifier(this);
this._mouseZoneManager = this._mouseZoneManager || null;
Expand Down Expand Up @@ -469,12 +466,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
}
break;
case 'theme':
// If open has been called we do not want to set options.theme as the
// source of truth is owned by the renderer.
if (this.renderer) {
this._setTheme(<ITheme>value);
return;
}
this._setTheme(<ITheme>value);
break;
case 'scrollback':
value = Math.min(value, MAX_BUFFER_SIZE);
Expand Down Expand Up @@ -503,8 +495,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.renderer) {
this.renderer.clear();
if (this._renderCoordinator) {
this._renderCoordinator.clear();
this.charMeasure.measure(this.options);
}
break;
Expand All @@ -516,21 +508,16 @@ 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.renderer) {
this.renderer.clear();
this.renderer.onResize(this.cols, this.rows);
if (this._renderCoordinator) {
this._renderCoordinator.clear();
this._renderCoordinator.onResize(this.cols, this.rows);
this.refresh(0, this.rows - 1);
}
break;
case 'rendererType':
if (this.renderer) {
this.unregister(this.renderer);
this.renderer.dispose();
this.renderer = null;
if (this._renderCoordinator) {
this._renderCoordinator.setRenderer(this._createRenderer());
}
this._setupRenderer();
this.renderer.onCharSizeChanged();
this.mouseHelper.setRenderer(this.renderer);
break;
case 'scrollback':
this.buffers.resize(this.cols, this.rows);
Expand All @@ -540,8 +527,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
break;
case 'screenReaderMode':
if (value) {
if (!this._accessibilityManager) {
this._accessibilityManager = new AccessibilityManager(this);
if (!this._accessibilityManager && this._renderCoordinator) {
this._accessibilityManager = new AccessibilityManager(this, this._renderCoordinator.dimensions);
}
} else {
if (this._accessibilityManager) {
Expand All @@ -565,8 +552,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
break;
}
// Inform renderer of changes
if (this.renderer) {
this.renderer.onOptionsChanged();
if (this._renderCoordinator) {
this._renderCoordinator.onOptionsChanged();
}
}

Expand Down Expand Up @@ -764,27 +751,27 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
this.options.theme = null;
this._colorManager = new ColorManager(document, this.options.allowTransparency);
this._colorManager.setTheme(this._theme);
this._setupRenderer();

this._renderCoordinator = new RenderCoordinator(this.renderer, this.rows);
const renderer = this._createRenderer();
this._renderCoordinator = new RenderCoordinator(renderer, this.rows, this.screenElement);
this._renderCoordinator.onRender(e => this._onRender.fire(e));
this.onResize(e => this._renderCoordinator.resize(e.cols, e.rows));

this.viewport = new Viewport(this, this._viewportElement, this._viewportScrollArea, this.charMeasure);
this.viewport = new Viewport(this, this._viewportElement, this._viewportScrollArea, this.charMeasure, this._renderCoordinator.dimensions);
this.viewport.onThemeChange(this._colorManager.colors);
this.register(this.viewport);

this.register(this.onCursorMove(() => this.renderer.onCursorMove()));
this.register(this.onResize(() => this.renderer.onResize(this.cols, this.rows)));
this.register(this.addDisposableListener('blur', () => this.renderer.onBlur()));
this.register(this.addDisposableListener('focus', () => this.renderer.onFocus()));
this.register(this.charMeasure.onCharSizeChanged(() => this.renderer.onCharSizeChanged()));
this.register(this._renderCoordinator.onCanvasResize(() => this.viewport.syncScrollArea()));
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.charMeasure.onCharSizeChanged(() => this._renderCoordinator.onCharSizeChanged()));
this.register(this._renderCoordinator.onDimensionsChange(() => this.viewport.syncScrollArea()));

this.selectionManager = new SelectionManager(this, this.charMeasure);
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.renderer.onSelectionChanged(e.start, e.end, e.columnSelectMode)));
this.register(this.selectionManager.onRedrawRequest(e => this._renderCoordinator.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
Expand All @@ -799,7 +786,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
}));
this.register(addDisposableDomListener(this._viewportElement, 'scroll', () => this.selectionManager.refresh()));

this.mouseHelper = new MouseHelper(this.renderer);
this.mouseHelper = new MouseHelper(this._renderCoordinator);
// apply mouse event classes set by escape codes before terminal was attached
this.element.classList.toggle('enable-mouse-events', this.mouseEvents);
if (this.mouseEvents) {
Expand All @@ -811,8 +798,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._accessibilityManager.register(this._renderCoordinator.onCanvasResize(() => this._accessibilityManager.refreshRowsDimensions()));
this._accessibilityManager = new AccessibilityManager(this, this._renderCoordinator.dimensions);
this._accessibilityManager.register(this._renderCoordinator.onDimensionsChange(e => this._accessibilityManager.setDimensions(e)));
}

// Measure the character size
Expand All @@ -830,17 +817,12 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II

}

private _setupRenderer(): void {
private _createRenderer(): IRenderer {
switch (this.options.rendererType) {
case 'canvas': this.renderer = new Renderer(this, this._colorManager.colors); break;
case 'dom': this.renderer = new DomRenderer(this, this._colorManager.colors); break;
case 'canvas': return new Renderer(this, this._colorManager.colors); break;
case 'dom': return new DomRenderer(this, this._colorManager.colors); break;
default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`);
}
// TODO: Setting of renderer should be owned by RenderCoordinator
if (this._renderCoordinator) {
this._renderCoordinator.setRenderer(this.renderer);
}
this.register(this.renderer);
}

/**
Expand All @@ -850,8 +832,8 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
private _setTheme(theme: ITheme): void {
this._theme = theme;
this._colorManager.setTheme(theme);
if (this.renderer) {
this.renderer.setColors(this._colorManager.colors);
if (this._renderCoordinator) {
this._renderCoordinator.setColors(this._colorManager.colors);
}
if (this.viewport) {
this.viewport.onThemeChange(this._colorManager.colors);
Expand Down Expand Up @@ -1593,13 +1575,13 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
}

public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
const joinerId = this.renderer.registerCharacterJoiner(handler);
const joinerId = this._renderCoordinator.registerCharacterJoiner(handler);
this.refresh(0, this.rows - 1);
return joinerId;
}

public deregisterCharacterJoiner(joinerId: number): void {
if (this.renderer.deregisterCharacterJoiner(joinerId)) {
if (this._renderCoordinator.deregisterCharacterJoiner(joinerId)) {
this.refresh(0, this.rows - 1);
}
}
Expand Down
2 changes: 0 additions & 2 deletions src/Types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
*/

import { ITerminalOptions as IPublicTerminalOptions, IEventEmitter, IDisposable, IMarker, ISelectionPosition } from 'xterm';
import { IRenderer } from './renderer/Types';
import { ICharset, IAttributeData, ICellData, IBufferLine, CharData } from './core/Types';
import { ICircularList } from './common/Types';
import { IEvent } from './common/EventEmitter2';
Expand Down Expand Up @@ -201,7 +200,6 @@ export interface ITerminal extends IPublicTerminal, IElementAccessor, IBufferAcc
screenElement: HTMLElement;
selectionManager: ISelectionManager;
charMeasure: ICharMeasure;
renderer: IRenderer;
browser: IBrowser;
writeBuffer: string[];
cursorHidden: boolean;
Expand Down
16 changes: 11 additions & 5 deletions src/Viewport.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { CharMeasure } from './CharMeasure';
import { Disposable } from './common/Lifecycle';
import { addDisposableDomListener } from './ui/Lifecycle';
import { IColorSet } from './ui/Types';
import { IRenderDimensions } from './renderer/Types';

const FALLBACK_SCROLL_BAR_WIDTH = 15;

Expand Down Expand Up @@ -43,7 +44,8 @@ export class Viewport extends Disposable implements IViewport {
private _terminal: ITerminal,
private _viewportElement: HTMLElement,
private _scrollArea: HTMLElement,
private _charMeasure: CharMeasure
private _charMeasure: CharMeasure,
private _dimensions: IRenderDimensions
) {
super();

Expand All @@ -57,6 +59,10 @@ export class Viewport extends Disposable implements IViewport {
setTimeout(() => this.syncScrollArea(), 0);
}

public onDimensionsChance(dimensions: IRenderDimensions): void {
this._dimensions = dimensions;
}

public onThemeChange(colors: IColorSet): void {
this._viewportElement.style.backgroundColor = colors.background.css;
}
Expand All @@ -73,9 +79,9 @@ export class Viewport extends Disposable implements IViewport {

private _innerRefresh(): void {
if (this._charMeasure.height > 0) {
this._currentRowHeight = this._terminal.renderer.dimensions.scaledCellHeight / window.devicePixelRatio;
this._currentRowHeight = this._dimensions.scaledCellHeight / window.devicePixelRatio;
this._lastRecordedViewportHeight = this._viewportElement.offsetHeight;
const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._terminal.renderer.dimensions.canvasHeight);
const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._dimensions.canvasHeight);
if (this._lastRecordedBufferHeight !== newBufferHeight) {
this._lastRecordedBufferHeight = newBufferHeight;
this._scrollArea.style.height = this._lastRecordedBufferHeight + 'px';
Expand Down Expand Up @@ -106,7 +112,7 @@ export class Viewport extends Disposable implements IViewport {
}

// If viewport height changed
if (this._lastRecordedViewportHeight !== (<any>this._terminal).renderer.dimensions.canvasHeight) {
if (this._lastRecordedViewportHeight !== this._dimensions.canvasHeight) {
this._refresh();
return;
}
Expand All @@ -125,7 +131,7 @@ export class Viewport extends Disposable implements IViewport {
}

// If row height changed
if (this._terminal.renderer.dimensions.scaledCellHeight / window.devicePixelRatio !== this._currentRowHeight) {
if (this._dimensions.scaledCellHeight / window.devicePixelRatio !== this._currentRowHeight) {
this._refresh();
return;
}
Expand Down
Loading

0 comments on commit eb70ddc

Please sign in to comment.