From 89112fb1aef20c993bd3a723683f8593f64797e3 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Tue, 8 Mar 2022 21:31:42 -0600 Subject: [PATCH] refactor to return / store IDecorations --- src/browser/services/DecorationService.ts | 72 +++++++++++++---------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/src/browser/services/DecorationService.ts b/src/browser/services/DecorationService.ts index 25d413fa..33aec4c7 100644 --- a/src/browser/services/DecorationService.ts +++ b/src/browser/services/DecorationService.ts @@ -23,10 +23,10 @@ export class DecorationService extends Disposable implements IDecorationService private _animationFrame: number | undefined; private readonly _bufferDecorations: BufferDecoration[] = []; + private _scrollDecorations: ScrollbarDecoration[] = []; private _scrollbarDecorationCanvas: CanvasRenderingContext2D | null = null; private _scrollbarDecorationNode: HTMLCanvasElement | undefined; - private _scrollbarDecorations: { marker: IMarker, color: string }[] = []; constructor(@IInstantiationService private readonly _instantiationService: IInstantiationService, @IBufferService private readonly _bufferService: IBufferService) { super(); } @@ -60,7 +60,10 @@ export class DecorationService extends Disposable implements IDecorationService if (this._screenElement && this._container && this._screenElement.contains(this._container)) { this._screenElement.removeChild(this._container); } - this._scrollbarDecorations = []; + for (const scrollbarDecoration of this._scrollDecorations) { + scrollbarDecoration.dispose(); + } + this._scrollDecorations = []; this._scrollbarDecorationNode?.remove(); } @@ -91,43 +94,26 @@ export class DecorationService extends Disposable implements IDecorationService } private _registerScrollbarDecoration(marker: IMarker, color: string): IDecoration | undefined { - if (!this._scrollbarDecorationNode) { + if (!this._scrollbarDecorationNode || !this._viewportElement) { return; } if (!this._scrollbarDecorationCanvas) { this._scrollbarDecorationCanvas = this._scrollbarDecorationNode.getContext('2d'); this._refreshScollbarDecorations(); } - this._scrollbarDecorations.push({ marker, color }); - return this._addScrollbarDecoration(marker, color); - } - - - private _addScrollbarDecoration(marker: IMarker, color: string): IDecoration | undefined { - if (!this._scrollbarDecorationCanvas || !this._scrollbarDecorationNode) { - return; - } - this._scrollbarDecorationCanvas.lineWidth = 1; - this._scrollbarDecorationCanvas.strokeStyle = color; - this._scrollbarDecorationCanvas.strokeRect( + this._scrollbarDecorationCanvas!.lineWidth = 1; + this._scrollbarDecorationCanvas!.strokeStyle = color; + this._scrollbarDecorationCanvas!.strokeRect( 0, this._scrollbarDecorationNode.height * (marker.line / this._bufferService.buffers.active.lines.length), this._scrollbarDecorationNode.width, window.devicePixelRatio ); if (this._scrollbarDecorationNode) { - const scrollbarDecoration = new ScrollbarDecoration({ marker, scrollbarDecorationColor: color }, this._scrollbarDecorationNode); - scrollbarDecoration.onDispose(() => { - this._scrollbarDecorationCanvas?.clearRect( - 0, - 0, - this._scrollbarDecorationCanvas.canvas.width, - this._scrollbarDecorationCanvas.canvas.height - ); - }); + const scrollbarDecoration = new ScrollbarDecoration({ marker, scrollbarDecorationColor: color }, this._scrollbarDecorationNode, this._scrollbarDecorationCanvas!, this._viewportElement, this._bufferService); + this._scrollDecorations.push(scrollbarDecoration); return scrollbarDecoration; } - return undefined; } private _refreshBufferDecorations(shouldRecreate?: boolean): void { @@ -148,21 +134,22 @@ export class DecorationService extends Disposable implements IDecorationService this._scrollbarDecorationNode.width = Math.floor(ScrollbarConstants.WIDTH * window.devicePixelRatio); this._scrollbarDecorationNode.height = Math.floor(this._viewportElement.clientHeight * window.devicePixelRatio); this._scrollbarDecorationCanvas.clearRect(0, 0, this._scrollbarDecorationCanvas.canvas.width, this._scrollbarDecorationCanvas.canvas.height); - - for (const scrollbarDecoration of this._scrollbarDecorations) { - this._addScrollbarDecoration(scrollbarDecoration.marker, scrollbarDecoration.color); + for (const decoration of this._scrollDecorations) { + decoration.render(); } } } export class ScrollbarDecoration extends Disposable implements IDecoration { private readonly _marker: IMarker; - private _element: HTMLElement | undefined; + private _canvas: HTMLCanvasElement | undefined; + private _color: string | undefined; public isDisposed: boolean = false; - public get element(): HTMLElement | undefined { return this._element; } + public get element(): HTMLCanvasElement { return this._canvas!; } public get marker(): IMarker { return this._marker; } + public get color(): string { return this._color!; } private _onDispose = new EventEmitter(); public get onDispose(): IEvent { return this._onDispose.event; } @@ -172,12 +159,33 @@ export class ScrollbarDecoration extends Disposable implements IDecoration { constructor( options: IDecorationOptions, - element: HTMLCanvasElement + canvas: HTMLCanvasElement, + private readonly _ctx: CanvasRenderingContext2D, + private readonly _viewport: HTMLElement, + private readonly _bufferService: IBufferService ) { super(); this._marker = options.marker; - this._element = element; + this._canvas = canvas; + this._color = options.scrollbarDecorationColor; this._marker.onDispose(() => this.dispose()); + this.render(); + } + public render(): void { + this._ctx.lineWidth = 1; + this._ctx.strokeStyle = this.color; + this._ctx.strokeRect( + 0, + this.element.height * (this.marker.line / this._bufferService.buffers.active.lines.length), + this.element.width, + window.devicePixelRatio + ); + } + + public override dispose(): void { + this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height); + + super.dispose(); } }