get button to work

src/browser/renderer/DecorationRenderLayer.ts

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { addDisposableDomListener } from 'browser/Lifecycle';
+import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
+import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { IColorSet } from 'browser/Types';
+import { CellData } from 'common/buffer/CellData';
+import { Marker } from 'common/buffer/Marker';
+import { EventEmitter, IEventEmitter } from 'common/EventEmitter';
+import { Disposable } from 'common/Lifecycle';
+import { IBufferService, IOptionsService } from 'common/services/Services';
+import { ICellData } from 'common/Types';
+import { IBufferDecorationOptions, IDecoration, IEvent, IGutterDecorationOptions } from 'xterm';
+
+const enum DefaultButton {
+  WIDTH = 2,
+  HEIGHT = 1,
+  COLS = 87,
+  MARGIN_RIGHT = 3,
+  COLOR = '#4B9CD3'
+}
+export class DecorationRenderLayer extends BaseRenderLayer {
+  private _cell: ICellData = new CellData();
+  constructor(
+    container: HTMLElement,
+    zIndex: number,
+    colors: IColorSet,
+    rendererId: number,
+    private _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
+    @IBufferService bufferService: IBufferService,
+    @IOptionsService optionsService: IOptionsService
+  ) {
+    super(container, 'decoration', zIndex, true, colors, rendererId, bufferService, optionsService);
+    this.onFocus();
+  }
+  public reset(): void {
+
+  }
+
+  public override onFocus(): void {
+    this.registerDecoration({ type: 'IBufferDecorationOptions', startMarker: new Marker(1), shape: 'button'  });
+    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
+  }
+
+  public override resize(dim: IRenderDimensions): void {
+    super.resize(dim);
+    this._clearCells(this._bufferService.cols - DefaultButton.MARGIN_RIGHT, 1, 2, 1);
+    this.registerDecoration({ type: 'IBufferDecorationOptions', startMarker: new Marker(1), shape: 'button' });
+    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
+  }
+
+  public registerDecoration(decorationOptions: IBufferDecorationOptions | IGutterDecorationOptions): IDecoration {
+    if (decorationOptions.type === 'IBufferDecorationOptions') {
+      const bufferDecoration = new BufferDecoration(decorationOptions.startMarker.line, this._ctx.canvas);
+      if ('shape' in decorationOptions && decorationOptions.shape === 'button') {
+        this._ctx.save();
+        const color = decorationOptions.color || DefaultButton.COLOR;
+        const x = 'position' in decorationOptions && decorationOptions.position ? decorationOptions.position : this._bufferService.cols - ((this._bufferService.cols/DefaultButton.COLS) * DefaultButton.MARGIN_RIGHT);
+        if (x && color) {
+          this._ctx.fillStyle = color;
+          this._fillCells(x, decorationOptions.startMarker.line, DefaultButton.WIDTH, DefaultButton.HEIGHT);
+          this._ctx.fillStyle = color;
+          this._fillCharTrueColor(this._cell, x, decorationOptions.startMarker.line);
+          addDisposableDomListener(this._ctx.canvas, 'click', e => {
+            e.stopPropagation();
+            const { x, y } = getRelativeClickPosition(this._ctx.canvas, e);
+            if (this._ctx.isPointInPath(x, y)) {
+              console.log('clicked button');
+            }
+          });
+        }
+        this._ctx.restore();
+        return bufferDecoration;
+      }
+      throw new Error('Border box type not yet implemented');
+    } throw new Error('Gutter decoration not yet implemented');
+  }
+}
+
+function getRelativeClickPosition(canvas: HTMLCanvasElement, event: MouseEvent): { x: number, y: number } {
+  const rect = canvas.getBoundingClientRect();
+  const y = event.clientY - rect.top;
+  const x = event.clientX - rect.left;
+  return { x, y };
+}
+
+export class BufferDecoration extends Disposable implements IDecoration {
+  private static _nextId = 1;
+
+  private _element: HTMLElement | undefined;
+  private _id: number = BufferDecoration._nextId++;
+  public isDisposed: boolean = false;
+
+  public get id(): number { return this._id; }
+
+  public get element(): HTMLElement { return this.element!; }
+
+  private _onDispose = new EventEmitter<void>();
+  public get onDispose(): IEvent<void> { return this._onDispose.event; }
+
+  private _onRender = new EventEmitter<HTMLElement>();
+  public get onRender(): IEvent<HTMLElement> { return this._onRender.event; }
+
+  constructor(
+    public line: number,
+    container: HTMLElement
+  ) {
+    super();
+    this._element = document.createElement('menu');
+    this._element.textContent = 'hello';
+    this._element.id = 'decoration' + this._id;
+    container.appendChild(this._element);
+  }
+
+  public dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this.isDisposed = true;
+    this.line = -1;
+    // Emit before super.dispose such that dispose listeners get a change to react
+    this._onDispose.fire();
+    super.dispose();
+  }
+}

src/browser/renderer/Renderer.ts

@@ -14,6 +14,8 @@ import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services
 import { IBufferService, IOptionsService, ICoreService, IInstantiationService } from 'common/services/Services';
 import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
+import { DecorationRenderLayer } from 'browser/renderer/DecorationRenderLayer';
+import { IBufferDecorationOptions, IGutterDecorationOptions, IDecoration } from 'xterm';
 
 let nextRendererId = 1;
 
@@ -44,7 +46,8 @@ export class Renderer extends Disposable implements IRenderer {
       instantiationService.createInstance(TextRenderLayer, this._screenElement, 0, this._colors, allowTransparency, this._id),
       instantiationService.createInstance(SelectionRenderLayer, this._screenElement, 1, this._colors, this._id),
       instantiationService.createInstance(LinkRenderLayer, this._screenElement, 2, this._colors, this._id, linkifier, linkifier2),
-      instantiationService.createInstance(CursorRenderLayer, this._screenElement, 3, this._colors, this._id, this._onRequestRedraw)
+      instantiationService.createInstance(CursorRenderLayer, this._screenElement, 3, this._colors, this._id, this._onRequestRedraw),
+      instantiationService.createInstance(DecorationRenderLayer, this._screenElement, 4, this._colors, this._id, this._onRequestRedraw)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -65,6 +68,14 @@ export class Renderer extends Disposable implements IRenderer {
     this.onOptionsChanged();
   }
 
+  public registerDecoration(decorationOptions: IBufferDecorationOptions | IGutterDecorationOptions): IDecoration {
+    const decorationLayer = this._renderLayers.find(l => l instanceof DecorationRenderLayer);
+    if (decorationLayer instanceof DecorationRenderLayer) {
+      return decorationLayer.registerDecoration(decorationOptions);
+    }
+    throw new Error('no decoration layer');
+  }
+
   public dispose(): void {
     for (const l of this._renderLayers) {
       l.dispose();

src/browser/renderer/Types.d.ts

@@ -6,6 +6,7 @@
 import { IDisposable } from 'common/Types';
 import { IColorSet } from 'browser/Types';
 import { IEvent } from 'common/EventEmitter';
+import { IBufferDecorationOptions, IDecoration, IGutterDecorationOptions } from 'xterm';
 
 export interface IRenderDimensions {
   scaledCharWidth: number;
@@ -53,6 +54,7 @@ export interface IRenderer extends IDisposable {
   clear(): void;
   renderRows(start: number, end: number): void;
   clearTextureAtlas?(): void;
+  registerDecoration(decorationOptions: IBufferDecorationOptions | IGutterDecorationOptions): IDecoration;
 }
 
 export interface IRenderLayer extends IDisposable {

src/browser/renderer/dom/DomRenderer.ts

@@ -13,6 +13,8 @@ import { IOptionsService, IBufferService, IInstantiationService } from 'common/s
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { color } from 'browser/Color';
 import { removeElementFromParent } from 'browser/Dom';
+import { DecorationRenderLayer } from 'browser/renderer/DecorationRenderLayer';
+import { IBufferDecorationOptions, IGutterDecorationOptions, IDecoration } from 'xterm';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -151,6 +153,14 @@ export class DomRenderer extends Disposable implements IRenderer {
     this._injectCss();
   }
 
+  public registerDecoration(decorationOptions: IBufferDecorationOptions | IGutterDecorationOptions): IDecoration {
+    // const decorationLayer = this._renderLayers.find(l => l instanceof DecorationRenderLayer);
+    // if (decorationLayer instanceof DecorationRenderLayer) {
+    //   return decorationLayer.registerDecoration(decorationOptions);
+    // }
+    throw new Error('no decoration layer');
+  }
+
   private _injectCss(): void {
     if (!this._themeStyleElement) {
       this._themeStyleElement = document.createElement('style');