From 21263a5f60f390e33644a3be0d851719a7a0b8b3 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Tue, 15 Mar 2022 14:54:37 -0400 Subject: [PATCH] cleanup --- demo/client.ts | 12 ++++++------ .../Decorations/BufferDecorationRenderer.ts | 8 +++----- src/browser/Decorations/OverviewRulerRenderer.ts | 16 +++++++--------- src/common/services/DecorationService.ts | 3 --- typings/xterm.d.ts | 2 +- 5 files changed, 17 insertions(+), 24 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index f3f118066..047cd6020 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -556,12 +556,12 @@ function addDecoration() { function addOverviewRuler() { term.options['overviewRulerWidth'] = 13; - const canvas = term.registerDecoration({marker: term.addMarker(1), overviewRulerOptions: { color: 'red' }}); - term.registerDecoration({marker: term.addMarker(3), overviewRulerOptions: { color: 'green' }}); - term.registerDecoration({marker: term.addMarker(5), overviewRulerOptions: { color: 'blue' }}); - term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'red', position: 'left' }}); - term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'green', position: 'center' }}); - term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'blue', position: 'right' }}); + const canvas = term.registerDecoration({marker: term.addMarker(1), overviewRulerOptions: { color: '#ef2929' }}); + term.registerDecoration({marker: term.addMarker(3), overviewRulerOptions: { color: '#8ae234' }}); + term.registerDecoration({marker: term.addMarker(5), overviewRulerOptions: { color: '#729fcf' }}); + term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#ef2929', position: 'left' }}); + term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#8ae234', position: 'center' }}); + term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#729fcf', position: 'right' }}); canvas.onRender((e) => { e.style.left = `${document.querySelector('.xterm-viewport').clientWidth + 5}px`; }); diff --git a/src/browser/Decorations/BufferDecorationRenderer.ts b/src/browser/Decorations/BufferDecorationRenderer.ts index 8821ccc15..116c09a58 100644 --- a/src/browser/Decorations/BufferDecorationRenderer.ts +++ b/src/browser/Decorations/BufferDecorationRenderer.ts @@ -64,6 +64,8 @@ export class BufferDecorationRenderer extends Disposable { if (!element) { element = this._createElement(decoration); decoration.onDispose(() => this._removeDecoration(decoration)); + decoration.marker.onDispose(() => decoration.dispose()); + decoration.element = element; this._decorationElements.set(decoration, element); this._container.appendChild(element); } @@ -105,11 +107,7 @@ export class BufferDecorationRenderer extends Disposable { } private _removeDecoration(decoration: IInternalDecoration): void { - const element = this._decorationElements.get(decoration); - if (element && this._container && this._container.contains(element)) { - this._container.removeChild(element); - } - element?.remove(); + this._decorationElements.get(decoration)?.remove(); this._decorationElements.delete(decoration); } } diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index eb58bc10d..a9439d9fe 100644 --- a/src/browser/Decorations/OverviewRulerRenderer.ts +++ b/src/browser/Decorations/OverviewRulerRenderer.ts @@ -8,15 +8,13 @@ import { IRenderService } from 'browser/services/Services'; import { Disposable } from 'common/Lifecycle'; import { IBufferService, IDecorationService, IInternalDecoration, IOptionsService } from 'common/services/Services'; -const enum ScrollbarConstants { - WIDTH = 15 -} - export class OverviewRulerRenderer extends Disposable { private _canvas: HTMLCanvasElement; private _ctx: CanvasRenderingContext2D | null; private readonly _decorationElements: Map = new Map(); - + private get _width(): number { + return this._optionsService.options.overviewRulerWidth || 0; + } private _animationFrame: number | undefined; constructor( @@ -32,9 +30,9 @@ export class OverviewRulerRenderer extends Disposable { this._canvas.classList.add('xterm-decoration-overview-ruler'); this._viewportElement.parentElement?.insertBefore(this._canvas, this._viewportElement); this._ctx = this._canvas.getContext('2d'); - this._canvas.style.width = `${this._optionsService.options.overviewRulerWidth || ScrollbarConstants.WIDTH}px`; + this._canvas.style.width = `${this._width}px`; this._canvas.style.height = `${this._screenElement.clientHeight}px`; - this._canvas.width = Math.floor((this._optionsService.options.overviewRulerWidth|| ScrollbarConstants.WIDTH)* window.devicePixelRatio); + this._canvas.width = Math.floor((this._width)* window.devicePixelRatio); this._canvas.height = Math.floor(this._screenElement.clientHeight * window.devicePixelRatio); this.refreshDecorations(); this.register(this._bufferService.buffers.onBufferActivate(() => { @@ -92,9 +90,9 @@ export class OverviewRulerRenderer extends Disposable { } public refreshDecorations(): void { - this._canvas.style.width = `${this._optionsService.options.overviewRulerWidth || ScrollbarConstants.WIDTH}px`; + this._canvas.style.width = `${this._width}px`; this._canvas.style.height = `${this._screenElement.clientHeight}px`; - this._canvas.width = Math.floor((this._optionsService.options.overviewRulerWidth || ScrollbarConstants.WIDTH)* window.devicePixelRatio); + this._canvas.width = Math.floor((this._width)* window.devicePixelRatio); this._canvas.height = Math.floor(this._screenElement.clientHeight * window.devicePixelRatio); for (const decoration of this._decorationService.decorations) { diff --git a/src/common/services/DecorationService.ts b/src/common/services/DecorationService.ts index 9d7e33143..911fd369c 100644 --- a/src/common/services/DecorationService.ts +++ b/src/common/services/DecorationService.ts @@ -65,12 +65,9 @@ class Decoration extends Disposable implements IInternalDecoration { ) { super(); this.marker = options.marker; - this.marker.onDispose(() => this.dispose()); } public override dispose(): void { this._onDispose.fire(); - this.element?.remove(); - this.element = undefined; super.dispose(); } } diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index c6062967f..0dce1ce65 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -436,7 +436,7 @@ declare module 'xterm' { * after the first _onRender call, or undefined if accessed before * that. */ - readonly element: HTMLElement | undefined; + element: HTMLElement | undefined; } /**