Merge pull request #4657 from tisilent/add-cursorInactiveStyle-option

Add cursorInactiveStyle option
xtermjs · Aug 11, 2023 · dc390ab · dc390ab
2 parents 73bb72d + 6f6cc6a
commit dc390ab
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 67 deletions.
diff --git a/addons/xterm-addon-canvas/src/CursorRenderLayer.ts b/addons/xterm-addon-canvas/src/CursorRenderLayer.ts
@@ -58,7 +58,8 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._cursorRenderers = {
       'bar': this._renderBarCursor.bind(this),
       'block': this._renderBlockCursor.bind(this),
-      'underline': this._renderUnderlineCursor.bind(this)
+      'underline': this._renderUnderlineCursor.bind(this),
+      'outline': this._renderOutlineCursor.bind(this)
     };
     this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
     this._handleOptionsChanged();
@@ -150,7 +151,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
       this._ctx.save();
       this._ctx.fillStyle = this._themeService.colors.cursor.css;
       const cursorStyle = this._optionsService.rawOptions.cursorStyle;
-      this._renderBlurCursor(cursorX, viewportRelativeCursorY, this._cell);
+      const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
+      if (cursorInactiveStyle && cursorInactiveStyle !== 'none') {
+        this._cursorRenderers[cursorInactiveStyle](cursorX, viewportRelativeCursorY, this._cell);
+      }
       this._ctx.restore();
       this._state.x = cursorX;
       this._state.y = viewportRelativeCursorY;
@@ -231,7 +235,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._ctx.restore();
   }
 
-  private _renderBlurCursor(x: number, y: number, cell: ICellData): void {
+  private _renderOutlineCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
     this._ctx.strokeStyle = this._themeService.colors.cursor.css;
     this._strokeRectAtCell(x, y, cell.getWidth(), 1);

diff --git a/addons/xterm-addon-webgl/src/RectangleRenderer.ts b/addons/xterm-addon-webgl/src/RectangleRenderer.ts
@@ -255,7 +255,7 @@ export class RectangleRenderer extends Disposable {
     let offset: number;
     let rectangleCount = 0;
 
-    if (cursor.style === 'bar' || cursor.style === 'blur') {
+    if (cursor.style === 'bar' || cursor.style === 'outline') {
       // Left edge
       offset = rectangleCount++ * INDICES_PER_RECTANGLE;
       this._addRectangleFloat(
@@ -268,7 +268,7 @@ export class RectangleRenderer extends Disposable {
         this._cursorFloat
       );
     }
-    if (cursor.style === 'underline' || cursor.style === 'blur') {
+    if (cursor.style === 'underline' || cursor.style === 'outline') {
       // Bottom edge
       offset = rectangleCount++ * INDICES_PER_RECTANGLE;
       this._addRectangleFloat(
@@ -281,7 +281,7 @@ export class RectangleRenderer extends Disposable {
         this._cursorFloat
       );
     }
-    if (cursor.style === 'blur') {
+    if (cursor.style === 'outline') {
       // Top edge
       offset = rectangleCount++ * INDICES_PER_RECTANGLE;
       this._addRectangleFloat(

diff --git a/addons/xterm-addon-webgl/src/Types.d.ts b/addons/xterm-addon-webgl/src/Types.d.ts
@@ -16,11 +16,13 @@ export interface ICursorRenderModel {
   x: number;
   y: number;
   width: number;
-  style: string;
+  style: CursorStyle;
   cursorWidth: number;
   dpr: number;
 }
 
+export type CursorStyle = 'outline' | 'block' | 'bar' | 'underline' | 'none';
+
 export interface IWebGL2RenderingContext extends WebGLRenderingContext {
   vertexAttribDivisor(index: number, divisor: number): void;
   createVertexArray(): IWebGLVertexArrayObject;

diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts
@@ -461,15 +461,17 @@ export class WebglRenderer extends Disposable implements IRenderer {
               y: this._terminal.buffer.active.cursorY,
               width: cell.getWidth(),
               style: this._coreBrowserService.isFocused ?
-                (terminal.options.cursorStyle || 'block') : 'blur',
+                (terminal.options.cursorStyle || 'block') : terminal.options.cursorInactiveStyle,
               cursorWidth: terminal.options.cursorWidth,
               dpr: this._devicePixelRatio
             };
             lastCursorX = cursorX + cell.getWidth() - 1;
           }
           if (x >= cursorX && x <= lastCursorX &&
-              this._coreBrowserService.isFocused &&
-              (terminal.options.cursorStyle || 'block') === 'block') {
+              ((this._coreBrowserService.isFocused &&
+              (terminal.options.cursorStyle || 'block') === 'block') ||
+              (this._coreBrowserService.isFocused === false &&
+              terminal.options.cursorInactiveStyle === 'block'))) {
             this._cellColorResolver.result.fg =
               Attributes.CM_RGB | (this._themeService.colors.cursorAccent.rgba >> 8 & Attributes.RGB_MASK);
             this._cellColorResolver.result.bg =

diff --git a/demo/client.ts b/demo/client.ts
@@ -419,6 +419,7 @@ function initOptions(term: TerminalType): void {
   ];
   const stringOptions = {
     cursorStyle: ['block', 'underline', 'bar'],
+    cursorInactiveStyle: ['outline', 'block', 'bar', 'underline', 'none'],
     fastScrollModifier: ['none', 'alt', 'ctrl', 'shift'],
     fontFamily: null,
     fontWeight: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
@@ -197,23 +197,20 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Cursor
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} ,` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} ,` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} ` +
-      `{` +
-      ` outline: 1px solid ${colors.cursor.css};` +
-      ` outline-offset: -1px;` +
-      `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}:not(.${RowCss.CURSOR_STYLE_BLOCK_CLASS}) {` +
       ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
       `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` background-color: ${colors.cursor.css};` +
       ` color: ${colors.cursorAccent.css};` +
       `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_OUTLINE_CLASS} {` +
+      ` outline: 1px solid ${colors.cursor.css};` +
+      ` outline-offset: -1px;` +
+      `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
       ` box-shadow: ${this._optionsService.rawOptions.cursorWidth}px 0 0 ${colors.cursor.css} inset;` +
       `}` +
@@ -408,6 +405,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     const cursorX = Math.min(buffer.x, this._bufferService.cols - 1);
     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;
@@ -422,6 +420,7 @@ export class DomRenderer extends Disposable implements IRenderer {
           row,
           row === cursorAbsoluteY,
           cursorStyle,
+          cursorInactiveStyle,
           cursorX,
           cursorBlink,
           this.dimensions.css.cell.width,
@@ -474,6 +473,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     const cursorX = Math.min(buffer.x, cols - 1);
     const cursorBlink = this._optionsService.rawOptions.cursorBlink;
     const cursorStyle = this._optionsService.rawOptions.cursorStyle;
+    const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
 
     // refresh rows within link range
     for (let i = y; i <= y2; ++i) {
@@ -489,6 +489,7 @@ export class DomRenderer extends Disposable implements IRenderer {
           row,
           row === cursorAbsoluteY,
           cursorStyle,
+          cursorInactiveStyle,
           cursorX,
           cursorBlink,
           this.dimensions.css.cell.width,