cleanup

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`;
   });

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);
   }
 }

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<IInternalDecoration, HTMLElement> = 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) {

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();
   }
 }

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;
   }
 
   /**