Merge pull request #2590 from npezza93/configure-cursor-bar-width

Allow the thickness of the bar cursor to be configured
xtermjs · Dec 7, 2019 · 266859e · 266859e
2 parents ab66cb5 + 79ea49c
commit 266859e
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 7 deletions.
diff --git a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts
@@ -153,11 +153,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to fill.
    * @param y The row to fill.
    */
-  protected _fillLeftLineAtCell(x: number, y: number): void {
+  protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
     this._ctx.fillRect(
         x * this._scaledCellWidth,
         y * this._scaledCellHeight,
-        window.devicePixelRatio,
+        window.devicePixelRatio * width,
         this._scaledCellHeight);
   }
 

diff --git a/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts
@@ -204,7 +204,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _renderBarCursor(terminal: Terminal, x: number, y: number, cell: ICellData): void {
     this._ctx.save();
     this._ctx.fillStyle = this._colors.cursor.css;
-    this._fillLeftLineAtCell(x, y);
+    this._fillLeftLineAtCell(x, y, terminal.getOption('cursorWidth'));
     this._ctx.restore();
   }
 

diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts
@@ -171,11 +171,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to fill.
    * @param y The row to fill.
    */
-  protected _fillLeftLineAtCell(x: number, y: number): void {
+  protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
     this._ctx.fillRect(
         x * this._scaledCellWidth,
         y * this._scaledCellHeight,
-        window.devicePixelRatio,
+        window.devicePixelRatio * width,
         this._scaledCellHeight);
   }
 

diff --git a/src/browser/renderer/CursorRenderLayer.ts b/src/browser/renderer/CursorRenderLayer.ts
@@ -209,7 +209,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _renderBarCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
     this._ctx.fillStyle = this._colors.cursor.css;
-    this._fillLeftLineAtCell(x, y);
+    this._fillLeftLineAtCell(x, y, this._optionsService.options.cursorWidth);
     this._ctx.restore();
   }
 

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
@@ -206,7 +206,7 @@ export class DomRenderer extends Disposable implements IRenderer {
         ` color: ${this._colors.cursorAccent.css};` +
         `}` +
         `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BAR_CLASS} {` +
-        ` box-shadow: 1px 0 0 ${this._colors.cursor.css} inset;` +
+        ` box-shadow: ${this._optionsService.options.cursorWidth}px 0 0 ${this._colors.cursor.css} inset;` +
         `}` +
         `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` +
         ` box-shadow: 0 -1px 0 ${this._colors.cursor.css} inset;` +

diff --git a/src/common/services/OptionsService.ts b/src/common/services/OptionsService.ts
@@ -20,6 +20,7 @@ export const DEFAULT_OPTIONS: ITerminalOptions = Object.freeze({
   rows: 24,
   cursorBlink: false,
   cursorStyle: 'block',
+  cursorWidth: 1,
   bellSound:  DEFAULT_BELL_SOUND,
   bellStyle: 'none',
   drawBoldTextInBrightColors: true,
@@ -111,6 +112,9 @@ export class OptionsService implements IOptionsService {
           value = DEFAULT_OPTIONS[key];
         }
         break;
+      case 'cursorWidth':
+        value = Math.floor(value);
+        // Fall through for bounds check
       case 'lineHeight':
       case 'tabStopWidth':
         if (value < 1) {
@@ -119,6 +123,7 @@ export class OptionsService implements IOptionsService {
         break;
       case 'minimumContrastRatio':
         value = Math.max(1, Math.min(21, Math.round(value * 10) / 10));
+        break;
       case 'scrollback':
         value = Math.min(value, 4294967295);
         if (value < 0) {

diff --git a/src/common/services/Services.ts b/src/common/services/Services.ts
@@ -191,6 +191,7 @@ export interface IPartialTerminalOptions {
   cols?: number;
   cursorBlink?: boolean;
   cursorStyle?: 'block' | 'underline' | 'bar';
+  cursorWidth?: number;
   disableStdin?: boolean;
   drawBoldTextInBrightColors?: boolean;
   fastScrollModifier?: 'alt' | 'ctrl' | 'shift';
@@ -223,6 +224,7 @@ export interface ITerminalOptions {
   cols: number;
   cursorBlink: boolean;
   cursorStyle: 'block' | 'underline' | 'bar';
+  cursorWidth: number;
   disableStdin: boolean;
   drawBoldTextInBrightColors: boolean;
   fastScrollModifier: 'alt' | 'ctrl' | 'shift' | undefined;

diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts
@@ -72,6 +72,11 @@ declare module 'xterm' {
      */
     cursorStyle?: 'block' | 'underline' | 'bar';
 
+    /**
+     * The width of the cursor in CSS pixels when `cursorStyle` is set to 'bar'.
+     */
+    cursorWidth?: number;
+
     /**
      * Whether input should be disabled.
      */