Underline links on hover

src/renderer/BaseRenderLayer.ts

@@ -109,11 +109,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to fill.
    * @param y The row to fill.
    */
-  protected fillBottomLineAtCell(x: number, y: number): void {
+  protected fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
     this._ctx.fillRect(
         x * this.scaledCharWidth,
         (y + 1) * this.scaledLineHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
-        this.scaledCharWidth,
+        width * this.scaledCharWidth,
         window.devicePixelRatio);
   }
 

src/renderer/CursorRenderLayer.ts

@@ -202,7 +202,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _renderUnderlineCursor(terminal: ITerminal, x: number, y: number, charData: CharData): void {
     this._ctx.save();
     this._ctx.fillStyle = this.colors.cursor;
-    this.fillBottomLineAtCell(x, y);
+    this.fillBottomLineAtCells(x, y);
     this._ctx.restore();
   }
 

src/renderer/ForegroundRenderLayer.ts

@@ -139,7 +139,7 @@ export class ForegroundRenderLayer extends BaseRenderLayer {
           } else {
             this._ctx.fillStyle = this.colors.foreground;
           }
-          this.fillBottomLineAtCell(x, y);
+          this.fillBottomLineAtCells(x, y);
         }
 
         this.drawChar(terminal, char, code, width, x, y, fg, !!(flags & FLAGS.BOLD));

src/renderer/LinkRenderLayer.ts

@@ -0,0 +1,44 @@
+import { IColorSet } from './Interfaces';
+import { IBuffer, ICharMeasure, ITerminal, ILinkifierAccessor } from '../Interfaces';
+import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
+import { GridCache } from './GridCache';
+import { FLAGS } from './Types';
+import { BaseRenderLayer, INVERTED_DEFAULT_COLOR } from './BaseRenderLayer';
+import { LinkHoverEvent, LinkHoverEventTypes } from '../Types';
+
+export class LinkRenderLayer extends BaseRenderLayer {
+  private _state: LinkHoverEvent = null;
+
+  constructor(container: HTMLElement, zIndex: number, colors: IColorSet, terminal: ILinkifierAccessor) {
+    super(container, 'link', zIndex, colors);
+    terminal.linkifier.on(LinkHoverEventTypes.HOVER, (e: LinkHoverEvent) => this._onLinkHover(e));
+    terminal.linkifier.on(LinkHoverEventTypes.LEAVE, (e: LinkHoverEvent) => this._onLinkLeave(e));
+  }
+
+  public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
+    super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
+    // Resizing the canvas discards the contents of the canvas so clear state
+    this._state = null;
+  }
+
+  public reset(terminal: ITerminal): void {
+    this._clearCurrentLink();
+  }
+
+  private _clearCurrentLink(): void {
+    if (this._state) {
+      this.clearCells(this._state.x, this._state.y, this._state.length, 1);
+      this._state = null;
+    }
+  }
+
+  private _onLinkHover(e: LinkHoverEvent): void {
+    this._ctx.fillStyle = this.colors.foreground;
+    this.fillBottomLineAtCells(e.x, e.y, e.length);
+    this._state = e;
+  }
+
+  private _onLinkLeave(e: LinkHoverEvent): void {
+    this._clearCurrentLink();
+  }
+}

src/renderer/Renderer.ts

@@ -11,6 +11,7 @@ import { CursorRenderLayer } from './CursorRenderLayer';
 import { ColorManager } from './ColorManager';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { IRenderLayer, IColorSet, IRenderer } from './Interfaces';
+import { LinkRenderLayer } from './LinkRenderLayer';
 
 export class Renderer implements IRenderer {
   /** A queue of the rows to be refreshed */
@@ -28,7 +29,8 @@ export class Renderer implements IRenderer {
       new BackgroundRenderLayer(this._terminal.element, 0, this._colorManager.colors),
       new SelectionRenderLayer(this._terminal.element, 1, this._colorManager.colors),
       new ForegroundRenderLayer(this._terminal.element, 2, this._colorManager.colors),
-      new CursorRenderLayer(this._terminal.element, 3, this._colorManager.colors)
+      new LinkRenderLayer(this._terminal.element, 3, this._colorManager.colors, this._terminal),
+      new CursorRenderLayer(this._terminal.element, 4, this._colorManager.colors)
     ];
     this._devicePixelRatio = window.devicePixelRatio;
   }