This commit is contained in:
meganrogge
2022-02-02 22:33:05 -06:00
parent 49085bbd5b
commit ad59db9a8a
3 changed files with 58 additions and 23 deletions
+32 -15
View File
@@ -3,15 +3,16 @@
* @license MIT
*/
import { IRenderDimensions } from 'browser/renderer/Types';
import { EventEmitter, IEvent } from 'common/EventEmitter';
import { Disposable } from 'common/Lifecycle';
import { createDecorator } from 'common/services/ServiceRegistry';
import { IBufferService } from 'common/services/Services';
import { IDisposable } from 'common/Types';
import { IBufferDecorationOptions, IDecoration, IMarker } from 'xterm';
export interface IDecorationsService extends IDisposable {
registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined;
registerDecoration(decorationOptions: IBufferDecorationOptions, cellWidth: number, cellHeight: number): IDecoration | undefined;
refresh(y: number): void;
}
const enum DefaultButton {
@@ -19,14 +20,34 @@ const enum DefaultButton {
}
export class DecorationsService extends Disposable implements IDecorationsService {
constructor(private readonly _screenElement: HTMLElement) {
private _decorations: BufferDecoration[] = [];
private _cellWidth: number = 0;
private _cellHeight: number = 0;
constructor(private readonly _screenElement: HTMLElement, @IBufferService private readonly _bufferService: IBufferService) {
super();
}
public registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined {
public registerDecoration(decorationOptions: IBufferDecorationOptions, cellWidth: number, cellHeight: number): IDecoration | undefined {
if (decorationOptions.marker.isDisposed) {
return undefined;
}
return new BufferDecoration(decorationOptions, this._screenElement);
this._cellWidth = cellWidth;
this._cellHeight = cellHeight;
const bufferDecoration = new BufferDecoration(decorationOptions, this._screenElement, this._bufferService.buffers.active.y!);
this._decorations.push(bufferDecoration);
return bufferDecoration;
}
public refresh(y: number): void {
for (const decoration of this._decorations) {
if (decoration.marker.line < y) {
console.log(decoration.marker.line, y);
console.log('scrolled', y);
console.log('y', this._bufferService.buffers.active.y);
console.log('ybase', this._bufferService.buffers.active.ybase);
decoration.element.style.bottom = `${(this._bufferService.buffers.active.ybase - decoration.marker.line)*this._cellHeight}px`;
decoration.element.style.top = '';
}
}
}
@@ -51,25 +72,21 @@ class BufferDecoration extends Disposable implements IDecoration {
constructor(
decorationOptions: IBufferDecorationOptions,
private readonly _container: HTMLElement
private readonly _container: HTMLElement,
y: number
) {
super();
this._marker = decorationOptions.marker;
const color = DefaultButton.COLOR;
this._element = document.createElement('div');
this._element.classList.add('button-buffer-decoration');
this._element.id = 'button-buffer-decoration-' + this._id;
this._element.style.background = color;
this._element.style.width = '32px';
this._element.style.height = '32px';
this._element.style.borderRadius = '64px';
this._element.style.border = `4px solid white`;
this._element.style.width = `${decorationOptions.width}px`;
this._element.style.height = `${decorationOptions.height}px`;
this._element.style.zIndex = '6';
this._element.style.top = `${this._marker.line*decorationOptions.height!}px`;
this._element.style.position = 'absolute';
if (decorationOptions.anchor === 'right') {
this._element.style.right = decorationOptions.x ? `${decorationOptions.x}px` : '5px';
} else {
this._element.style.right = decorationOptions.x ? `${decorationOptions.x}px` : '5px';
this._element.style.left = decorationOptions.x ? `${decorationOptions.x}px` : '5px';
}
if (this._container && this._element) {
this._container.append(this._element);