eiac/xterm.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge remote-tracking branch 'origin/master' into webgl2

Browse Source
This commit is contained in:
Daniel Imms
2019-05-18 21:24:39 -07:00
parent cf867602d1 739723fe92
commit e0ff44441e
22 changed files with 355 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/BaseRenderLayer.ts
+1 -1
View File
@@ -74,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 onThemeChange(terminal: ITerminal, colorSet: IColorSet): void {
public setColors(terminal: ITerminal, colorSet: IColorSet): void {
this._refreshCharAtlas(terminal, colorSet);
}
src/renderer/RenderCoordinator.ts
+162
View File
@@ -0,0 +1,162 @@
/**
* Copyright (c) 2019 The xterm.js authors. All rights reserved.
* @license MIT
*/
import { IRenderer, IRenderDimensions } from './Types';
import { RenderDebouncer } from '../ui/RenderDebouncer';
import { EventEmitter2, IEvent } from '../common/EventEmitter2';
import { Disposable } from '../common/Lifecycle';
import { ScreenDprMonitor } from '../ui/ScreenDprMonitor';
import { addDisposableDomListener } from '../ui/Lifecycle';
import { IColorSet } from '..//ui/Types';
import { CharacterJoinerHandler } from '../Types';
export class RenderCoordinator extends Disposable {
private _renderDebouncer: RenderDebouncer;
private _screenDprMonitor: ScreenDprMonitor;
private _isPaused: boolean = false;
private _needsFullRefresh: boolean = false;
private _canvasWidth: number = 0;
private _canvasHeight: number = 0;
private _onDimensionsChange = new EventEmitter2<IRenderDimensions>();
public get onDimensionsChange(): IEvent<IRenderDimensions> { return this._onDimensionsChange.event; }
private _onRender = new EventEmitter2<{ start: number, end: number }>();
public get onRender(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
private _onRefreshRequest = new EventEmitter2<{ start: number, end: number }>();
public get onRefreshRequest(): IEvent<{ start: number, end: number }> { return this._onRefreshRequest.event; }
public get dimensions(): IRenderDimensions { return this._renderer.dimensions; }
constructor(
private _renderer: IRenderer,
private _rowCount: number,
screenElement: HTMLElement
) {
super();
this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end));
this.register(this._renderDebouncer);
this._screenDprMonitor = new ScreenDprMonitor();
this._screenDprMonitor.setListener(() => this._renderer.onDevicePixelRatioChange());
this.register(this._screenDprMonitor);
// dprchange should handle this case, we need this as well for browsers that don't support the
// matchMedia query.
this.register(addDisposableDomListener(window, 'resize', () => this._renderer.onDevicePixelRatioChange()));
// Detect whether IntersectionObserver is detected and enable renderer pause
// and resume based on terminal visibility if so
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver(e => this._onIntersectionChange(e[e.length - 1]), { threshold: 0 });
observer.observe(screenElement);
this.register({ dispose: () => observer.disconnect() });
}
}
private _onIntersectionChange(entry: IntersectionObserverEntry): void {
this._isPaused = entry.intersectionRatio === 0;
if (!this._isPaused && this._needsFullRefresh) {
this.refreshRows(0, this._rowCount - 1);
this._needsFullRefresh = false;
}
}
public refreshRows(start: number, end: number): void {
if (this._isPaused) {
this._needsFullRefresh = true;
return;
}
this._renderDebouncer.refresh(start, end, this._rowCount);
}
private _renderRows(start: number, end: number): void {
this._renderer.renderRows(start, end);
this._onRender.fire({ start, end });
}
public resize(cols: number, rows: number): void {
this._rowCount = rows;
this._fireOnCanvasResize();
}
public changeOptions(): void {
this._renderer.onOptionsChanged();
this._fireOnCanvasResize();
}
private _fireOnCanvasResize(): void {
// Don't fire the event if the dimensions haven't changed
if (this._renderer.dimensions.canvasWidth === this._canvasWidth && this._renderer.dimensions.canvasHeight === this._canvasHeight) {
return;
}
this._onDimensionsChange.fire(this._renderer.dimensions);
}
public setRenderer(renderer: IRenderer): void {
// TODO: RenderCoordinator should be the only one to dispose the renderer
this._renderer.dispose();
this._renderer = renderer;
}
private _fullRefresh(): void {
if (this._isPaused) {
this._needsFullRefresh = true;
} else {
this.refreshRows(0, this._rowCount);
}
}
public setColors(colors: IColorSet): void {
this._renderer.setColors(colors);
this._fullRefresh();
}
public onDevicePixelRatioChange(): void {
this._renderer.onDevicePixelRatioChange();
}
public onResize(cols: number, rows: number): void {
this._renderer.onResize(cols, rows);
this._fullRefresh();
}
// TODO: Is this useful when we have onResize?
public onCharSizeChanged(): void {
this._renderer.onCharSizeChanged();
}
public onBlur(): void {
this._renderer.onBlur();
}
public onFocus(): void {
this._renderer.onFocus();
}
public onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean): void {
this._renderer.onSelectionChanged(start, end, columnSelectMode);
}
public onCursorMove(): void {
this._renderer.onCursorMove();
}
public onOptionsChanged(): void {
this._renderer.onOptionsChanged();
}
public clear(): void {
this._renderer.clear();
}
public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
return this._renderer.registerCharacterJoiner(handler);
}
public deregisterCharacterJoiner(joinerId: number): boolean {
return this._renderer.deregisterCharacterJoiner(joinerId);
}
}
src/renderer/Renderer.ts
+9 -78
View File
@@ -9,30 +9,17 @@ import { CursorRenderLayer } from './CursorRenderLayer';
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 { 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;
private _renderLayers: IRenderLayer[];
private _devicePixelRatio: number;
private _screenDprMonitor: ScreenDprMonitor;
private _isPaused: boolean = false;
private _needsFullRefresh: boolean = false;
private _characterJoinerRegistry: ICharacterJoinerRegistry;
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,
private _colors: IColorSet
@@ -64,19 +51,6 @@ export class Renderer extends Disposable implements IRenderer {
this._devicePixelRatio = window.devicePixelRatio;
this._updateDimensions();
this.onOptionsChanged();
this._renderDebouncer = new RenderDebouncer(this._renderRows.bind(this));
this._screenDprMonitor = new ScreenDprMonitor();
this._screenDprMonitor.setListener(() => this.onWindowResize(window.devicePixelRatio));
this.register(this._screenDprMonitor);
// Detect whether IntersectionObserver is detected and enable renderer pause
// and resume based on terminal visibility if so
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver(e => this.onIntersectionChange(e[e.length - 1]), { threshold: 0 });
observer.observe(this._terminal.element);
this.register({ dispose: () => observer.disconnect() });
}
}
public dispose(): void {
@@ -84,35 +58,23 @@ export class Renderer extends Disposable implements IRenderer {
this._renderLayers.forEach(l => l.dispose());
}
public onIntersectionChange(entry: IntersectionObserverEntry): void {
this._isPaused = entry.intersectionRatio === 0;
if (!this._isPaused && this._needsFullRefresh) {
this._terminal.refresh(0, this._terminal.rows - 1);
this._needsFullRefresh = false;
}
}
public onWindowResize(devicePixelRatio: number): void {
public onDevicePixelRatioChange(): void {
// If the device pixel ratio changed, the char atlas needs to be regenerated
// and the terminal needs to refreshed
if (this._devicePixelRatio !== devicePixelRatio) {
this._devicePixelRatio = devicePixelRatio;
if (this._devicePixelRatio !== window.devicePixelRatio) {
this._devicePixelRatio = window.devicePixelRatio;
this.onResize(this._terminal.cols, this._terminal.rows);
}
}
public onThemeChange(colors: IColorSet): void {
public setColors(colors: IColorSet): void {
this._colors = colors;
// Clear layers and force a full render
this._renderLayers.forEach(l => {
l.onThemeChange(this._terminal, this._colors);
l.setColors(this._terminal, this._colors);
l.reset(this._terminal);
});
if (this._isPaused) {
this._needsFullRefresh = true;
} else {
this._terminal.refresh(0, this._terminal.rows - 1);
}
}
public onResize(cols: number, rows: number): void {
@@ -122,21 +84,9 @@ export class Renderer extends Disposable implements IRenderer {
// Resize all render layers
this._renderLayers.forEach(l => l.resize(this._terminal, this.dimensions));
// Force a refresh
if (this._isPaused) {
this._needsFullRefresh = true;
} else {
this._terminal.refresh(0, this._terminal.rows - 1);
}
// Resize the screen
this._terminal.screenElement.style.width = `${this.dimensions.canvasWidth}px`;
this._terminal.screenElement.style.height = `${this.dimensions.canvasHeight}px`;
this._onCanvasResize.fire({
width: this.dimensions.canvasWidth,
height: this.dimensions.canvasHeight
});
}
public onCharSizeChanged(): void {
@@ -168,34 +118,15 @@ export class Renderer extends Disposable implements IRenderer {
}
private _runOperation(operation: (layer: IRenderLayer) => void): void {
if (this._isPaused) {
this._needsFullRefresh = true;
} else {
this._renderLayers.forEach(l => operation(l));
}
}
/**
* Queues a refresh between two rows (inclusive), to be done on next animation
* frame.
* @param start The start row.
* @param end The end row.
*/
public refreshRows(start: number, end: number): void {
if (this._isPaused) {
this._needsFullRefresh = true;
return;
}
this._renderDebouncer.refresh(start, end, this._terminal.rows);
this._renderLayers.forEach(l => operation(l));
}
/**
* Performs the refresh loop callback, calling refresh only if a refresh is
* necessary before queueing up the next one.
*/
private _renderRows(start: number, end: number): void {
public renderRows(start: number, end: number): void {
this._renderLayers.forEach(l => l.onGridChanged(this._terminal, start, end));
this._onRender.fire({ start, end });
}
/**
src/renderer/Types.ts
+5 -9
View File
@@ -5,7 +5,6 @@
import { ITerminal, CharacterJoinerHandler } from '../Types';
import { IDisposable } from 'xterm';
import { IEvent } from '../common/EventEmitter2';
import { IColorSet } from '../ui/Types';
/**
@@ -26,14 +25,11 @@ export const enum FLAGS {
* rendering rows to the screen.
*/
export interface IRenderer extends IDisposable {
dimensions: IRenderDimensions;
onCanvasResize: IEvent<{ width: number, height: number }>;
onRender: IEvent<{ start: number, end: number }>;
readonly dimensions: IRenderDimensions;
dispose(): void;
onThemeChange(colors: IColorSet): void;
onWindowResize(devicePixelRatio: number): void;
setColors(colors: IColorSet): void;
onDevicePixelRatioChange(): void;
onResize(cols: number, rows: number): void;
onCharSizeChanged(): void;
onBlur(): void;
@@ -42,7 +38,7 @@ export interface IRenderer extends IDisposable {
onCursorMove(): void;
onOptionsChanged(): void;
clear(): void;
refreshRows(start: number, end: number): void;
renderRows(start: number, end: number): void;
registerCharacterJoiner(handler: CharacterJoinerHandler): number;
deregisterCharacterJoiner(joinerId: number): boolean;
}
@@ -86,7 +82,7 @@ export interface IRenderLayer extends IDisposable {
/**
* Called when the theme changes.
*/
onThemeChange(terminal: ITerminal, colorSet: IColorSet): void;
setColors(terminal: ITerminal, colorSet: IColorSet): void;
/**
* Called when the data in the grid has changed (or needs to be rendered
src/renderer/dom/DomRenderer.ts
+3 -22
View File
@@ -5,10 +5,8 @@
import { IRenderer, IRenderDimensions } from '../Types';
import { ILinkifierEvent, ITerminal, CharacterJoinerHandler } from '../../Types';
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';
import { Disposable } from '../../common/Lifecycle';
import { IColorSet } from '../../ui/Types';
@@ -30,7 +28,6 @@ let nextTerminalId = 1;
* canvas is not an option.
*/
export class DomRenderer extends Disposable implements IRenderer {
private _renderDebouncer: RenderDebouncer;
private _rowFactory: DomRendererRowFactory;
private _terminalClass: number = nextTerminalId++;
@@ -42,11 +39,6 @@ export class DomRenderer extends Disposable implements IRenderer {
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,
private _colors: IColorSet
@@ -78,7 +70,6 @@ export class DomRenderer extends Disposable implements IRenderer {
};
this._updateDimensions();
this._renderDebouncer = new RenderDebouncer(this._renderRows.bind(this));
this._rowFactory = new DomRendererRowFactory(_terminal.options, document);
this._terminal.element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
@@ -140,7 +131,7 @@ export class DomRenderer extends Disposable implements IRenderer {
this._terminal.screenElement.style.height = `${this.dimensions.canvasHeight}px`;
}
public onThemeChange(colors: IColorSet): void {
public setColors(colors: IColorSet): void {
this._colors = colors;
this._injectCss();
}
@@ -222,7 +213,7 @@ export class DomRenderer extends Disposable implements IRenderer {
this._themeStyleElement.innerHTML = styles;
}
public onWindowResize(devicePixelRatio: number): void {
public onDevicePixelRatioChange(): void {
this._updateDimensions();
}
@@ -242,10 +233,6 @@ export class DomRenderer extends Disposable implements IRenderer {
public onResize(cols: number, rows: number): void {
this._refreshRowElements(cols, rows);
this._updateDimensions();
this._onCanvasResize.fire({
width: this.dimensions.canvasWidth,
height: this.dimensions.canvasHeight
});
}
public onCharSizeChanged(): void {
@@ -337,11 +324,7 @@ export class DomRenderer extends Disposable implements IRenderer {
this._rowElements.forEach(e => e.innerHTML = '');
}
public refreshRows(start: number, end: number): void {
this._renderDebouncer.refresh(start, end, this._terminal.rows);
}
private _renderRows(start: number, end: number): void {
public renderRows(start: number, end: number): void {
const terminal = this._terminal;
const cursorAbsoluteY = terminal.buffer.ybase + terminal.buffer.y;
@@ -357,8 +340,6 @@ export class DomRenderer extends Disposable implements IRenderer {
const cursorStyle = terminal.options.cursorStyle;
rowElement.appendChild(this._rowFactory.createRow(lineData, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, terminal.cols));
}
this._onRender.fire({ start, end });
}
private get _terminalSelector(): string {
src/renderer/webgl/WebglRenderer.ts
+2 -2
View File
@@ -136,12 +136,12 @@ export class WebglRenderer extends Disposable implements IRenderer {
}
}
public onThemeChange(colors: IColorSet): void {
public setColors(colors: IColorSet): void {
this._applyBgLuminanceBasedSelection();
// Clear layers and force a full render
this._renderLayers.forEach(l => {
l.onThemeChange(this._terminal, this._colors);
l.setColors(this._terminal, this._colors);
l.reset(this._terminal);
});