Skip to content

Commit

Permalink
Reduce state in buffer decorations
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tyriar
Tyriar committed Mar 14, 2022
1 parent c8d1266 commit 4b615f4
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 127 deletions.
168 changes: 46 additions & 122 deletions src/browser/Decorations/BufferDecorationRenderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,41 @@

import { addDisposableDomListener } from 'browser/Lifecycle';
import { IRenderService } from 'browser/services/Services';
import { IEvent, EventEmitter } from 'common/EventEmitter';
import { Disposable } from 'common/Lifecycle';
import { IBufferService, IDecorationService, IInternalDecoration } from 'common/services/Services';
import { IMarker } from 'common/Types';
import { IDecoration, IDecorationOptions } from 'xterm';

export interface IDecorationRenderer {
refreshDecorations(shouldRecreate?: boolean): void;
renderDecoration(decoration: IInternalDecoration, decorationOptions: IDecorationOptions): void;
}
export class BufferDecorationRenderer extends Disposable {
private readonly _container: HTMLElement;
private readonly _decorationElements: Map<IInternalDecoration, HTMLElement> = new Map();

export class BufferDecorationRenderer extends Disposable implements IDecorationRenderer {
private _animationFrame: number | undefined;
private _decorationContainer: HTMLElement;
private readonly _decorations: BufferDecoration[] = [];
private _altBufferIsActive: boolean = false;

constructor(
@IBufferService private readonly _bufferService: IBufferService,
@IRenderService private readonly _renderService: IRenderService,
private readonly _decorationService: IDecorationService,
private readonly _screenElement: HTMLElement) {
private readonly _screenElement: HTMLElement
) {
super();
this._decorationContainer = document.createElement('div');
this._decorationContainer.classList.add('xterm-decoration-container');
this._screenElement.appendChild(this._decorationContainer);

this._container = document.createElement('div');
this._container.classList.add('xterm-decoration-container');
this._screenElement.appendChild(this._container);

this.register(this._renderService.onRenderedBufferChange(() => this._queueRefresh()));
this.register(this._renderService.onDimensionsChange(() => this._queueRefresh()));
this.register(addDisposableDomListener(window, 'resize', () => this._queueRefresh()));
this.register(this._bufferService.buffers.onBufferActivate(() => {
this._altBufferIsActive = this._bufferService.buffer === this._bufferService.buffers.alt;
}));
this.register(this._decorationService.onDecorationRegistered(options => this.renderDecoration(options)));
this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh()));
}

public override dispose(): void {
this._container.remove();
this._decorationElements.clear();
super.dispose();
}

private _queueRefresh(): void {
Expand All @@ -50,131 +52,53 @@ export class BufferDecorationRenderer extends Disposable implements IDecorationR
});
}

public refreshDecorations(shouldRecreate?: boolean): void {
console.log('refresh decorations', this._decorations.length);
for (const decoration of this._decorations) {
decoration.render(this._decorationContainer, this._renderService, shouldRecreate);
}
}

public renderDecoration(decoration: IInternalDecoration): void {
const bufferDecoration = new BufferDecoration(this._bufferService, decoration, decoration.options);
this._decorations.push(bufferDecoration);
// bufferDecoration.render(this._decorationContainer, this._renderService, true);
if (this._decorationContainer && bufferDecoration.element && !this._decorationContainer.contains(bufferDecoration.element)) {
this._decorationContainer.append(bufferDecoration.element!);
public refreshDecorations(): void {
for (const decoration of this._decorationService.decorations) {
this._renderDecoration(decoration);
}
this._queueRefresh();
}

public override dispose(): void {
if (this._screenElement && this._decorationContainer && this._screenElement.contains(this._decorationContainer)) {
this._screenElement.removeChild(this._decorationContainer);
}
for (const bufferDecoration of this._decorations) {
bufferDecoration.dispose();
}
super.dispose();
}
}

export class BufferDecoration extends Disposable implements IDecoration {
private readonly _marker: IMarker;
private _element: HTMLElement | undefined;
private _container: HTMLElement | undefined;
private _altBufferIsActive: boolean = false;

public isDisposed: boolean = false;

public get element(): HTMLElement | undefined { return this._element; }
public get marker(): IMarker { return this._marker; }

private _onDispose = new EventEmitter<void>();
public get onDispose(): IEvent<void> { return this._onDispose.event; }

private _onRender = new EventEmitter<HTMLElement>();
public get onRender(): IEvent<HTMLElement> { return this._onRender.event; }

public x: number;
public anchor: 'left' | 'right';
public width: number;
public height: number;

constructor(
private readonly _bufferService: IBufferService,
private readonly _internalDecoration: IInternalDecoration,
options: IDecorationOptions
) {
super();
this.x = options.x ?? 0;
this._marker = options.marker;
this._marker.onDispose(() => this.dispose());
this.anchor = options.anchor || 'left';
this.width = options.width || 1;
this.height = options.height || 1;
}

public render(container: HTMLElement, renderService: IRenderService, shouldRecreate?: boolean): void {
this._container = container;
if (!this._element || shouldRecreate) {
const element = this._createElement(renderService, shouldRecreate);
private _renderDecoration(decoration: IInternalDecoration): void {
let element = this._decorationElements.get(decoration);
if (!element) {
element = this._createElement(decoration);
this._decorationElements.set(decoration, element);
this._container.appendChild(element);
}
this._refreshStyle(renderService);
if (this._element) {
console.log('firing on render');
this._onRender.fire(this._element);
this._internalDecoration.onRenderEmitter.fire(this._element!);
}
this._refreshStyle(decoration, element);
decoration.onRenderEmitter.fire(element);
}

private _createElement(renderService: IRenderService, shouldRecreate?: boolean): HTMLElement {
if (shouldRecreate && this._element && this._container && this._container.contains(this._element)) {
this._container.removeChild(this._element);
}
this._element = document.createElement('div');
this._element.classList.add('xterm-decoration');
this._element.style.width = `${this.width * renderService.dimensions.actualCellWidth}px`;
this._element.style.height = `${this.height * renderService.dimensions.actualCellHeight}px`;
this._element.style.top = `${(this.marker.line - this._bufferService.buffers.active.ydisp) * renderService.dimensions.actualCellHeight}px`;
this._element.style.lineHeight = `${renderService.dimensions.actualCellHeight}px`;
private _createElement(decoration: IInternalDecoration): HTMLElement {
const element = document.createElement('div');
element.classList.add('xterm-decoration');
element.style.width = `${(decoration.options.width || 1) * this._renderService.dimensions.actualCellWidth}px`;
element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.actualCellHeight}px`;
element.style.top = `${(decoration.marker.line - this._bufferService.buffers.active.ydisp) * this._renderService.dimensions.actualCellHeight}px`;
element.style.lineHeight = `${this._renderService.dimensions.actualCellHeight}px`;

if (this.x && this.x > this._bufferService.cols) {
const x = decoration.options.x ?? 0;
if (x && x > this._bufferService.cols) {
// exceeded the container width, so hide
this._element.style.display = 'none';
element.style.display = 'none';
}
if (this.anchor === 'right') {
this._element.style.right = this.x ? `${this.x * renderService.dimensions.actualCellWidth}px` : '';
if ((decoration.options.anchor || 'left') === 'right') {
element.style.right = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
} else {
this._element.style.left = this.x ? `${this.x * renderService.dimensions.actualCellWidth}px` : '';
element.style.left = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
}

return this._element;
return element;
}

private _refreshStyle(renderService: IRenderService): void {
if (!this._element) {
return;
}
const line = this.marker.line - this._bufferService.buffers.active.ydisp;
private _refreshStyle(decoration: IInternalDecoration, element: HTMLElement): void {
const line = decoration.marker.line - this._bufferService.buffers.active.ydisp;
if (line < 0 || line > this._bufferService.rows) {
// outside of viewport
this._element.style.display = 'none';
element.style.display = 'none';
} else {
this._element.style.top = `${line * renderService.dimensions.actualCellHeight}px`;
this._element.style.display = this._altBufferIsActive ? 'none' : 'block';
}
}

public override dispose(): void {
if (this.isDisposed || !this._container) {
return;
element.style.top = `${line * this._renderService.dimensions.actualCellHeight}px`;
element.style.display = this._altBufferIsActive ? 'none' : 'block';
}
if (this._element && this._container.contains(this._element)) {
this._container.removeChild(this._element);
}
this.isDisposed = true;
this._onDispose.fire();
}
}

8 changes: 4 additions & 4 deletions src/browser/Decorations/OverviewRulerRenderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
*--------------------------------------------------------------------------------------------*/

import { addDisposableDomListener } from 'browser/Lifecycle';
import { IDecorationRenderer } from 'browser/Decorations/BufferDecorationRenderer';
import { IRenderService } from 'browser/services/Services';
import { EventEmitter, IEvent } from 'common/EventEmitter';
import { Disposable } from 'common/Lifecycle';
import { IBufferService, IDecorationService, IInstantiationService, IInternalDecoration } from 'common/services/Services';
import { IDecorationOptions, IDecoration, IMarker } from 'xterm';

const enum ScrollbarConstants {
WIDTH = 7
}

export class OverviewRulerRenderer extends Disposable implements IDecorationRenderer {
export class OverviewRulerRenderer extends Disposable {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D | null;
private _decorations: ScrollbarDecoration[] = [];
Expand Down Expand Up @@ -42,10 +42,10 @@ export class OverviewRulerRenderer extends Disposable implements IDecorationRend
this.register(this._renderService.onRenderedBufferChange(() => this.refreshDecorations()));
this.register(this._renderService.onDimensionsChange(() => this.refreshDecorations()));
this.register(addDisposableDomListener(window, 'resize', () => this.refreshDecorations()));
this.register(this._decorationService.onDecorationRegistered(e => this.renderDecoration(e)));
this.register(this._decorationService.onDecorationRegistered(e => this.registerDecoration(e)));
this.register(this._decorationService.onDecorationRemoved(d => d.dispose()));
}
public renderDecoration(decoration: IInternalDecoration): void {
public registerDecoration(decoration: IInternalDecoration): void {
if (!this._ctx || !decoration.options.overviewRulerItemColor) {
return;
}
Expand Down
2 changes: 2 additions & 0 deletions src/common/services/DecorationService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export class DecorationService extends Disposable implements IDecorationService
public get onDecorationRemoved(): IEvent<IInternalDecoration> { return this._onDecorationRemoved.event; }
private _decorations: IInternalDecoration[] = [];

public get decorations(): IterableIterator<IInternalDecoration> { return this._decorations.values(); }

constructor() {
super();
}
Expand Down
1 change: 1 addition & 0 deletions src/common/services/Services.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,7 @@ export interface IUnicodeVersionProvider {

export const IDecorationService = createDecorator<IDecorationService>('DecorationService');
export interface IDecorationService extends IDisposable {
readonly decorations: IterableIterator<IInternalDecoration>;
readonly onDecorationRegistered: IEvent<IInternalDecoration>;
readonly onDecorationRemoved: IEvent<IInternalDecoration>;
registerDecoration(decorationOptions: IDecorationOptions): IDecoration | undefined;
Expand Down
3 changes: 2 additions & 1 deletion src/tsconfig-library-base.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"composite": true,
"strict": true,
"declarationMap": true,
"experimentalDecorators": true
"experimentalDecorators": true,
"downlevelIteration": true
}
}

0 comments on commit 4b615f4

Please sign in to comment.