handle selection hover

xtermjs · May 13, 2024 · 085f937 · 085f937
1 parent 03cfce7
commit 085f937
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 15 deletions.
diff --git a/css/xterm.css b/css/xterm.css
@@ -175,31 +175,60 @@
  opacity: 1 !important;
 }
 
-.xterm-underline-1 { text-decoration: underline; }
-.xterm-underline-2 { text-decoration: double underline; }
+.xterm-underline-1 { position: relative; }
+.xterm-underline-1::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 1px;
+ border-bottom: 2px solid;
+}
+
+.xterm-underline-2 { position: relative; }
+.xterm-underline-2::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 1px;
+ border-bottom: 3px double;
+}
+
 .xterm-underline-3 { text-decoration: wavy underline; }
-.xterm-underline-4 { text-decoration: dotted underline; }
-.xterm-underline-5 { position: relative; /* text-decoration: dashed underline; */ }
+.xterm-underline-4 { position: relative; }
+.xterm-underline-4::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 1px;
+ border-bottom: 2px dotted;
+}
+
+.xterm-underline-5 { position: relative; }
 .xterm-underline-5::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
- border-bottom: 2px dashed #fff;
+ border-bottom: 2px dashed;
 }
 
 .xterm-overline {
  text-decoration: overline;
 }
 
-.xterm-hoverline::before {
+.xterm-fg-hoverline {
+ position: relative;
+}
+.xterm-fg-hoverline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
- bottom: 3px;
- border-bottom: 1px solid #fff;
+ bottom: 3px
 }
 
 .xterm-overline.xterm-underline-1 { text-decoration: overline underline; }

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
@@ -46,6 +46,8 @@ export class DomRenderer extends Disposable implements IRenderer {
 
  public dimensions: IRenderDimensions;
 
+ private _currentLink: ILinkifierEvent | undefined;
+
  public readonly onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>()).event;
 
  constructor(
@@ -272,6 +274,7 @@ export class DomRenderer extends Disposable implements IRenderer {
  styles +=
  `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
  `${this._terminalSelector} .${FG_CLASS_PREFIX}${i}::after { content: "";border-bottom-color: ${c.css}; }` +
+ `${this._terminalSelector} .${FG_CLASS_PREFIX}${i}-underline::after { content: "";border-bottom-color: ${c.css}; }` +
  `${this._terminalSelector} .${FG_CLASS_PREFIX}${i}.${RowCss.DIM_CLASS} { color: ${color.multiplyOpacity(c, 0.5).css}; }` +
  `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
  }
@@ -280,6 +283,13 @@ export class DomRenderer extends Disposable implements IRenderer {
  `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR}.${RowCss.DIM_CLASS} { color: ${color.multiplyOpacity(color.opaque(colors.background), 0.5).css}; }` +
  `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${colors.foreground.css}; }`;
 
+ // Underline
+ styles +=
+ `.${FG_CLASS_PREFIX}underline::after { border-bottom-color: ${colors.foreground.css}; }`;
+
+ styles +=
+ `.${FG_CLASS_PREFIX}hoverline::before { border-bottom: 1px solid ${colors.foreground.css}; }`;
+
  this._themeStyleElement.textContent = styles;
  }
 
@@ -448,7 +458,7 @@ export class DomRenderer extends Disposable implements IRenderer {
  const cursorBlink = this._optionsService.rawOptions.cursorBlink;
  const cursorStyle = this._optionsService.rawOptions.cursorStyle;
  const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
-
+ 
  for (let y = start; y <= end; y++) {
  const row = y + buffer.ydisp;
  const rowElement = this._rowElements[y];
@@ -467,8 +477,8 @@ export class DomRenderer extends Disposable implements IRenderer {
  cursorBlink,
  this.dimensions.css.cell.width,
  this._widthCache,
- -1,
- -1
+ this._currentLink ? this._currentLink.y1 === y ? this._currentLink.x1 : -1 : -1,
+ this._currentLink ? this._currentLink.y2 === y ? this._currentLink.x2 : -1 : -1
  )
  );
  }
@@ -479,10 +489,12 @@ export class DomRenderer extends Disposable implements IRenderer {
  }
 
  private _handleLinkHover(e: ILinkifierEvent): void {
+ this._currentLink = e;
  this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true);
  }
 
  private _handleLinkLeave(e: ILinkifierEvent): void {
+ this._currentLink = undefined;
  this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, false);
  }
 

diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -29,7 +29,8 @@ export const enum RowCss {
  CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block',
  CURSOR_STYLE_OUTLINE_CLASS = 'xterm-cursor-outline',
  CURSOR_STYLE_BAR_CLASS = 'xterm-cursor-bar',
- CURSOR_STYLE_UNDERLINE_CLASS = 'xterm-cursor-underline'
+ CURSOR_STYLE_UNDERLINE_CLASS = 'xterm-cursor-underline',
+ FG_UNDERLINE_CLASS = 'xterm-fg-underline'
 }
 
 
@@ -284,8 +285,10 @@ export class DomRendererRowFactory {
  if (this._optionsService.rawOptions.drawBoldTextInBrightColors && cell.isBold() && fg < 8) {
  fg += 8;
  }
- charElement.style.textDecorationColor = colors.ansi[fg].css;
+ classes.push(`xterm-fg-${fg}-underline`);
  }
+ } else {
+ classes.push(RowCss.FG_UNDERLINE_CLASS);
  }
  }
 
@@ -303,8 +306,7 @@ export class DomRendererRowFactory {
  // apply link hover underline late, effectively overrides any previous text-decoration
  // settings
  if (isLinkHover) {
- classes.push('xterm-hoverline');
- // charElement.style.textDecoration = 'underline';
+ classes.push('xterm-fg-hoverline');
  }
 
  let fg = cell.getFgColor();