Rename decorations2 -> decorations to fix casing
This commit is contained in:
Daniel Imms
@@ -0,0 +1,115 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { addDisposableDomListener } from 'browser/Lifecycle';
|
||||
import { IRenderService } from 'browser/services/Services';
|
||||
import { Disposable } from 'common/Lifecycle';
|
||||
import { IBufferService, IDecorationService, IInternalDecoration } from 'common/services/Services';
|
||||
|
||||
export class BufferDecorationRenderer extends Disposable {
|
||||
private readonly _container: HTMLElement;
|
||||
private readonly _decorationElements: Map<IInternalDecoration, HTMLElement> = new Map();
|
||||
|
||||
private _animationFrame: number | undefined;
|
||||
private _altBufferIsActive: boolean = false;
|
||||
|
||||
constructor(
|
||||
private readonly _screenElement: HTMLElement,
|
||||
@IBufferService private readonly _bufferService: IBufferService,
|
||||
@IDecorationService private readonly _decorationService: IDecorationService,
|
||||
@IRenderService private readonly _renderService: IRenderService
|
||||
) {
|
||||
super();
|
||||
|
||||
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(() => this._queueRefresh()));
|
||||
this.register(this._decorationService.onDecorationRemoved(decoration => this._removeDecoration(decoration)));
|
||||
}
|
||||
|
||||
public override dispose(): void {
|
||||
this._container.remove();
|
||||
this._decorationElements.clear();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
private _queueRefresh(): void {
|
||||
if (this._animationFrame !== undefined) {
|
||||
return;
|
||||
}
|
||||
this._animationFrame = window.requestAnimationFrame(() => {
|
||||
this.refreshDecorations();
|
||||
this._animationFrame = undefined;
|
||||
});
|
||||
}
|
||||
|
||||
public refreshDecorations(): void {
|
||||
for (const decoration of this._decorationService.decorations) {
|
||||
this._renderDecoration(decoration);
|
||||
}
|
||||
}
|
||||
|
||||
private _renderDecoration(decoration: IInternalDecoration): void {
|
||||
this._refreshStyle(decoration);
|
||||
}
|
||||
|
||||
private _createElement(decoration: IInternalDecoration): HTMLElement {
|
||||
const element = document.createElement('div');
|
||||
element.classList.add('xterm-decoration');
|
||||
element.style.width = `${Math.round((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`;
|
||||
|
||||
const x = decoration.options.x ?? 0;
|
||||
if (x && x > this._bufferService.cols) {
|
||||
// exceeded the container width, so hide
|
||||
element.style.display = 'none';
|
||||
}
|
||||
if ((decoration.options.anchor || 'left') === 'right') {
|
||||
element.style.right = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
|
||||
} else {
|
||||
element.style.left = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
private _refreshStyle(decoration: IInternalDecoration): void {
|
||||
const line = decoration.marker.line - this._bufferService.buffers.active.ydisp;
|
||||
if (line < 0 || line >= this._bufferService.rows) {
|
||||
// outside of viewport
|
||||
if (decoration.element) {
|
||||
decoration.element.style.display = 'none';
|
||||
decoration.onRenderEmitter.fire(decoration.element);
|
||||
}
|
||||
} else {
|
||||
let element = this._decorationElements.get(decoration);
|
||||
if (!element) {
|
||||
decoration.onDispose(() => this._removeDecoration(decoration));
|
||||
element = this._createElement(decoration);
|
||||
decoration.element = element;
|
||||
this._decorationElements.set(decoration, element);
|
||||
this._container.appendChild(element);
|
||||
}
|
||||
element.style.top = `${line * this._renderService.dimensions.actualCellHeight}px`;
|
||||
element.style.display = this._altBufferIsActive ? 'none' : 'block';
|
||||
decoration.onRenderEmitter.fire(element);
|
||||
}
|
||||
}
|
||||
|
||||
private _removeDecoration(decoration: IInternalDecoration): void {
|
||||
this._decorationElements.get(decoration)?.remove();
|
||||
this._decorationElements.delete(decoration);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* Copyright (c) 2017 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import { assert } from 'chai';
|
||||
import { ColorZoneStore } from 'browser/Decorations/ColorZoneStore';
|
||||
|
||||
const optionsRedFull = {
|
||||
overviewRulerOptions: {
|
||||
color: 'red',
|
||||
position: 'full' as 'full'
|
||||
}
|
||||
};
|
||||
|
||||
describe('ColorZoneStore', () => {
|
||||
let store: ColorZoneStore;
|
||||
|
||||
beforeEach(() => {
|
||||
store = new ColorZoneStore();
|
||||
store.setPadding({
|
||||
full: 1,
|
||||
left: 1,
|
||||
center: 1,
|
||||
right: 1
|
||||
});
|
||||
});
|
||||
|
||||
it('should merge adjacent zones', () => {
|
||||
store.addDecoration({
|
||||
marker: { line: 0 },
|
||||
options: optionsRedFull
|
||||
});
|
||||
store.addDecoration({
|
||||
marker: { line: 1 },
|
||||
options: optionsRedFull
|
||||
});
|
||||
assert.deepStrictEqual(store.zones, [
|
||||
{
|
||||
color: 'red',
|
||||
position: 'full',
|
||||
startBufferLine: 0,
|
||||
endBufferLine: 1
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should not merge non-adjacent zones', () => {
|
||||
store.addDecoration({
|
||||
marker: { line: 0 },
|
||||
options: optionsRedFull
|
||||
});
|
||||
store.addDecoration({
|
||||
marker: { line: 2 },
|
||||
options: optionsRedFull
|
||||
});
|
||||
assert.deepStrictEqual(store.zones, [
|
||||
{
|
||||
color: 'red',
|
||||
position: 'full',
|
||||
startBufferLine: 0,
|
||||
endBufferLine: 0
|
||||
},
|
||||
{
|
||||
color: 'red',
|
||||
position: 'full',
|
||||
startBufferLine: 2,
|
||||
endBufferLine: 2
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should reuse zone objects', () => {
|
||||
const obj = {
|
||||
marker: { line: 0 },
|
||||
options: optionsRedFull
|
||||
};
|
||||
store.addDecoration(obj);
|
||||
const zone = store.zones[0];
|
||||
store.clear();
|
||||
store.addDecoration({
|
||||
marker: { line: 1 },
|
||||
options: optionsRedFull
|
||||
});
|
||||
// The object reference should be the same
|
||||
assert.equal(zone, store.zones[0]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { IInternalDecoration } from 'common/services/Services';
|
||||
|
||||
export interface IColorZoneStore {
|
||||
readonly zones: IColorZone[];
|
||||
clear(): void;
|
||||
addDecoration(decoration: IInternalDecoration): void;
|
||||
/**
|
||||
* Sets the amount of padding in lines that will be added between zones, if new lines intersect
|
||||
* the padding they will be merged into the same zone.
|
||||
*/
|
||||
setPadding(padding: { [position: string]: number }): void;
|
||||
}
|
||||
|
||||
export interface IColorZone {
|
||||
/** Color in a format supported by canvas' fillStyle. */
|
||||
color: string;
|
||||
position: 'full' | 'left' | 'center' | 'right' | undefined;
|
||||
startBufferLine: number;
|
||||
endBufferLine: number;
|
||||
}
|
||||
|
||||
interface IMinimalDecorationForColorZone {
|
||||
marker: Pick<IInternalDecoration['marker'], 'line'>;
|
||||
options: Pick<IInternalDecoration['options'], 'overviewRulerOptions'>;
|
||||
}
|
||||
|
||||
export class ColorZoneStore implements IColorZoneStore {
|
||||
private _zones: IColorZone[] = [];
|
||||
|
||||
// The zone pool is used to keep zone objects from being freed between clearing the color zone
|
||||
// store and fetching the zones. This helps reduce GC pressure since the color zones are
|
||||
// accumulated on potentially every scroll event.
|
||||
private _zonePool: IColorZone[] = [];
|
||||
private _zonePoolIndex = 0;
|
||||
|
||||
private _linePadding: { [position: string]: number } = {
|
||||
full: 0,
|
||||
left: 0,
|
||||
center: 0,
|
||||
right: 0
|
||||
};
|
||||
|
||||
public get zones(): IColorZone[] {
|
||||
// Trim the zone pool to free unused memory
|
||||
this._zonePool.length = Math.min(this._zonePool.length, this._zones.length);
|
||||
return this._zones;
|
||||
}
|
||||
|
||||
public clear(): void {
|
||||
this._zones.length = 0;
|
||||
this._zonePoolIndex = 0;
|
||||
}
|
||||
|
||||
public addDecoration(decoration: IMinimalDecorationForColorZone): void {
|
||||
if (!decoration.options.overviewRulerOptions) {
|
||||
return;
|
||||
}
|
||||
for (const z of this._zones) {
|
||||
if (z.color === decoration.options.overviewRulerOptions.color &&
|
||||
z.position === decoration.options.overviewRulerOptions.position) {
|
||||
if (this._lineIntersectsZone(z, decoration.marker.line)) {
|
||||
return;
|
||||
}
|
||||
if (this._lineAdjacentToZone(z, decoration.marker.line, decoration.options.overviewRulerOptions.position)) {
|
||||
this._addLineToZone(z, decoration.marker.line);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Create using zone pool if possible
|
||||
if (this._zonePoolIndex < this._zonePool.length) {
|
||||
this._zonePool[this._zonePoolIndex].color = decoration.options.overviewRulerOptions.color;
|
||||
this._zonePool[this._zonePoolIndex].position = decoration.options.overviewRulerOptions.position;
|
||||
this._zonePool[this._zonePoolIndex].startBufferLine = decoration.marker.line;
|
||||
this._zonePool[this._zonePoolIndex].endBufferLine = decoration.marker.line;
|
||||
this._zones.push(this._zonePool[this._zonePoolIndex++]);
|
||||
return;
|
||||
}
|
||||
// Create
|
||||
this._zones.push({
|
||||
color: decoration.options.overviewRulerOptions.color,
|
||||
position: decoration.options.overviewRulerOptions.position,
|
||||
startBufferLine: decoration.marker.line,
|
||||
endBufferLine: decoration.marker.line
|
||||
});
|
||||
this._zonePool.push(this._zones[this._zones.length - 1]);
|
||||
this._zonePoolIndex++;
|
||||
}
|
||||
|
||||
public setPadding(padding: { [position: string]: number }): void {
|
||||
this._linePadding = padding;
|
||||
}
|
||||
|
||||
private _lineIntersectsZone(zone: IColorZone, line: number): boolean {
|
||||
return (
|
||||
line >= zone.startBufferLine &&
|
||||
line <= zone.endBufferLine
|
||||
);
|
||||
}
|
||||
|
||||
private _lineAdjacentToZone(zone: IColorZone, line: number, position: IColorZone['position']): boolean {
|
||||
return (
|
||||
(line >= zone.startBufferLine - this._linePadding[position || 'full']) &&
|
||||
(line <= zone.endBufferLine + this._linePadding[position || 'full'])
|
||||
);
|
||||
}
|
||||
|
||||
private _addLineToZone(zone: IColorZone, line: number): void {
|
||||
zone.startBufferLine = Math.min(zone.startBufferLine, line);
|
||||
zone.endBufferLine = Math.max(zone.endBufferLine, line);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { ColorZoneStore, IColorZone, IColorZoneStore } from 'browser/Decorations/ColorZoneStore';
|
||||
import { addDisposableDomListener } from 'browser/Lifecycle';
|
||||
import { IRenderService } from 'browser/services/Services';
|
||||
import { Disposable } from 'common/Lifecycle';
|
||||
import { IBufferService, IDecorationService, IInternalDecoration, IOptionsService } from 'common/services/Services';
|
||||
|
||||
// Helper objects to avoid excessive calculation and garbage collection during rendering. These are
|
||||
// static values for each render and can be accessed using the decoration position as the key.
|
||||
const drawHeight = {
|
||||
full: 0,
|
||||
left: 0,
|
||||
center: 0,
|
||||
right: 0
|
||||
};
|
||||
const drawWidth = {
|
||||
full: 0,
|
||||
left: 0,
|
||||
center: 0,
|
||||
right: 0
|
||||
};
|
||||
const drawX = {
|
||||
full: 0,
|
||||
left: 0,
|
||||
center: 0,
|
||||
right: 0
|
||||
};
|
||||
|
||||
export class OverviewRulerRenderer extends Disposable {
|
||||
private readonly _canvas: HTMLCanvasElement;
|
||||
private readonly _ctx: CanvasRenderingContext2D;
|
||||
private readonly _colorZoneStore: IColorZoneStore = new ColorZoneStore();
|
||||
private get _width(): number {
|
||||
return this._optionsService.options.overviewRulerWidth || 0;
|
||||
}
|
||||
private _animationFrame: number | undefined;
|
||||
|
||||
private _shouldUpdateDimensions: boolean | undefined = true;
|
||||
private _shouldUpdateAnchor: boolean | undefined = true;
|
||||
private _lastKnownBufferLength: number = 0;
|
||||
|
||||
private _containerHeight: number | undefined;
|
||||
|
||||
constructor(
|
||||
private readonly _viewportElement: HTMLElement,
|
||||
private readonly _screenElement: HTMLElement,
|
||||
@IBufferService private readonly _bufferService: IBufferService,
|
||||
@IDecorationService private readonly _decorationService: IDecorationService,
|
||||
@IRenderService private readonly _renderService: IRenderService,
|
||||
@IOptionsService private readonly _optionsService: IOptionsService
|
||||
) {
|
||||
super();
|
||||
this._canvas = document.createElement('canvas');
|
||||
this._canvas.classList.add('xterm-decoration-overview-ruler');
|
||||
this._refreshCanvasDimensions();
|
||||
this._viewportElement.parentElement?.insertBefore(this._canvas, this._viewportElement);
|
||||
const ctx = this._canvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
throw new Error('Ctx cannot be null');
|
||||
} else {
|
||||
this._ctx = ctx;
|
||||
}
|
||||
this._registerDecorationListeners();
|
||||
this._registerBufferChangeListeners();
|
||||
this._registerDimensionChangeListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* On decoration add or remove, redraw
|
||||
*/
|
||||
private _registerDecorationListeners(): void {
|
||||
this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh(undefined, true)));
|
||||
this.register(this._decorationService.onDecorationRemoved(() => this._queueRefresh(undefined, true)));
|
||||
}
|
||||
|
||||
/**
|
||||
* On buffer change, redraw
|
||||
* and hide the canvas if the alt buffer is active
|
||||
*/
|
||||
private _registerBufferChangeListeners(): void {
|
||||
this.register(this._renderService.onRenderedBufferChange(() => this._queueRefresh()));
|
||||
this.register(this._bufferService.buffers.onBufferActivate(() => {
|
||||
this._canvas!.style.display = this._bufferService.buffer === this._bufferService.buffers.alt ? 'none' : 'block';
|
||||
}));
|
||||
this.register(this._bufferService.onScroll(() => {
|
||||
if (this._lastKnownBufferLength !== this._bufferService.buffers.normal.lines.length) {
|
||||
this._refreshColorZonePadding();
|
||||
}
|
||||
}));
|
||||
}
|
||||
/**
|
||||
* On dimension change, update canvas dimensions
|
||||
* and then redraw
|
||||
*/
|
||||
private _registerDimensionChangeListeners(): void {
|
||||
// container height changed
|
||||
this.register(this._renderService.onRender((): void => {
|
||||
if (!this._containerHeight || this._containerHeight !== this._screenElement.clientHeight) {
|
||||
this._queueRefresh(true);
|
||||
this._containerHeight = this._screenElement.clientHeight;
|
||||
}
|
||||
}));
|
||||
// overview ruler width changed
|
||||
this.register(this._optionsService.onOptionChange(o => {
|
||||
if (o === 'overviewRulerWidth') {
|
||||
this._queueRefresh(true);
|
||||
}
|
||||
}));
|
||||
// device pixel ratio changed
|
||||
this.register(addDisposableDomListener(window, 'resize', () => {
|
||||
this._queueRefresh(true);
|
||||
}));
|
||||
// set the canvas dimensions
|
||||
this._queueRefresh(true);
|
||||
}
|
||||
|
||||
public override dispose(): void {
|
||||
this._canvas?.remove();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
private _refreshDrawConstants(): void {
|
||||
// width
|
||||
const outerWidth = Math.floor(this._canvas.width / 3);
|
||||
const innerWidth = Math.ceil(this._canvas.width / 3);
|
||||
drawWidth.full = this._canvas.width;
|
||||
drawWidth.left = outerWidth;
|
||||
drawWidth.center = innerWidth;
|
||||
drawWidth.right = outerWidth;
|
||||
// height
|
||||
drawHeight.full = Math.round(2 * window.devicePixelRatio);
|
||||
drawHeight.left = Math.round(6 * window.devicePixelRatio);
|
||||
drawHeight.center = Math.round(6 * window.devicePixelRatio);
|
||||
drawHeight.right = Math.round(6 * window.devicePixelRatio);
|
||||
// x
|
||||
drawX.full = 0;
|
||||
drawX.left = 0;
|
||||
drawX.center = drawWidth.left;
|
||||
drawX.right = drawWidth.left + drawWidth.center;
|
||||
}
|
||||
|
||||
private _refreshColorZonePadding(): void {
|
||||
this._colorZoneStore.setPadding({
|
||||
full: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.full),
|
||||
left: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.left),
|
||||
center: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.center),
|
||||
right: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.right)
|
||||
});
|
||||
this._lastKnownBufferLength = this._bufferService.buffers.normal.lines.length;
|
||||
}
|
||||
|
||||
private _refreshCanvasDimensions(): void {
|
||||
this._canvas.style.width = `${this._width}px`;
|
||||
this._canvas.width = Math.round(this._width * window.devicePixelRatio);
|
||||
this._canvas.style.height = `${this._screenElement.clientHeight}px`;
|
||||
this._canvas.height = Math.round(this._screenElement.clientHeight * window.devicePixelRatio);
|
||||
this._refreshDrawConstants();
|
||||
this._refreshColorZonePadding();
|
||||
}
|
||||
|
||||
private _refreshDecorations(): void {
|
||||
if (this._shouldUpdateDimensions) {
|
||||
this._refreshCanvasDimensions();
|
||||
}
|
||||
this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
|
||||
this._colorZoneStore.clear();
|
||||
for (const decoration of this._decorationService.decorations) {
|
||||
this._colorZoneStore.addDecoration(decoration);
|
||||
}
|
||||
this._ctx.lineWidth = 1;
|
||||
const zones = this._colorZoneStore.zones;
|
||||
for (const zone of zones) {
|
||||
if (zone.position !== 'full') {
|
||||
this._renderColorZone(zone);
|
||||
}
|
||||
}
|
||||
for (const zone of zones) {
|
||||
if (zone.position === 'full') {
|
||||
this._renderColorZone(zone);
|
||||
}
|
||||
}
|
||||
this._shouldUpdateDimensions = false;
|
||||
this._shouldUpdateAnchor = false;
|
||||
}
|
||||
|
||||
private _renderColorZone(zone: IColorZone): void {
|
||||
// TODO: Is _decorationElements needed?
|
||||
|
||||
this._ctx.fillStyle = zone.color;
|
||||
this._ctx.fillRect(
|
||||
/* x */ drawX[zone.position || 'full'],
|
||||
/* y */ Math.round(
|
||||
(this._canvas.height - 1) * // -1 to ensure at least 2px are allowed for decoration on last line
|
||||
(zone.startBufferLine / this._bufferService.buffers.active.lines.length) - drawHeight[zone.position || 'full'] / 2
|
||||
),
|
||||
/* w */ drawWidth[zone.position || 'full'],
|
||||
/* h */ Math.round(
|
||||
(this._canvas.height - 1) * // -1 to ensure at least 2px are allowed for decoration on last line
|
||||
((zone.endBufferLine - zone.startBufferLine) / this._bufferService.buffers.active.lines.length) + drawHeight[zone.position || 'full']
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
private _queueRefresh(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void {
|
||||
this._shouldUpdateDimensions = updateCanvasDimensions || this._shouldUpdateDimensions;
|
||||
this._shouldUpdateAnchor = updateAnchor || this._shouldUpdateAnchor;
|
||||
if (this._animationFrame !== undefined) {
|
||||
return;
|
||||
}
|
||||
this._animationFrame = window.requestAnimationFrame(() => {
|
||||
this._refreshDecorations();
|
||||
this._animationFrame = undefined;
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user