From c630b92772fcc9f4a0b544be12cb33b1a9e4a926 Mon Sep 17 00:00:00 2001 From: Nick Pezza Date: Sat, 30 Nov 2019 14:37:07 -0500 Subject: [PATCH 1/7] Allow the thickness of the bar cursor to be configured --- addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts | 4 ++-- .../xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts | 2 +- src/browser/renderer/BaseRenderLayer.ts | 4 ++-- src/browser/renderer/CursorRenderLayer.ts | 2 +- src/common/services/OptionsService.ts | 1 + src/common/services/Services.ts | 2 ++ typings/xterm.d.ts | 5 +++++ 7 files changed, 14 insertions(+), 6 deletions(-) diff --git a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts index 29487ad0..2b181847 100644 --- 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 = 1): 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 index 413f4fdd..29c380fb 100644 --- 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('cursorBarWidth')); this._ctx.restore(); } diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts index f55a130d..2dfe5bd3 100644 --- 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 = 1): 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 index 0ca1b97a..5927d8df 100644 --- 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.cursorBarWidth); this._ctx.restore(); } diff --git a/src/common/services/OptionsService.ts b/src/common/services/OptionsService.ts index 9eaad94f..987dde67 100644 --- 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', + cursorBarWidth: 1, bellSound: DEFAULT_BELL_SOUND, bellStyle: 'none', drawBoldTextInBrightColors: true, diff --git a/src/common/services/Services.ts b/src/common/services/Services.ts index b90db299..4f90c0e9 100644 --- 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'; + cursorBarWidth?: number; disableStdin?: boolean; drawBoldTextInBrightColors?: boolean; fastScrollModifier?: 'alt' | 'ctrl' | 'shift'; @@ -223,6 +224,7 @@ export interface ITerminalOptions { cols: number; cursorBlink: boolean; cursorStyle: 'block' | 'underline' | 'bar'; + cursorBarWidth: number; disableStdin: boolean; drawBoldTextInBrightColors: boolean; fastScrollModifier: 'alt' | 'ctrl' | 'shift' | undefined; diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 401f7abc..a0e91c36 100644 --- 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 bar cursor. + */ + cursorBarWidth?: number; + /** * Whether input should be disabled. */ From 58078459f874fd535a6fc59c711c66a6f8242f23 Mon Sep 17 00:00:00 2001 From: Nick Pezza Date: Sat, 7 Dec 2019 15:38:12 -0500 Subject: [PATCH 2/7] Update cursor width doc Co-Authored-By: Daniel Imms --- typings/xterm.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index a0e91c36..c492330c 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -73,7 +73,7 @@ declare module 'xterm' { cursorStyle?: 'block' | 'underline' | 'bar'; /** - * The width of the bar cursor. + * The width of the cursor in CSS pixels when `cursorStyle` is set to 'bar'. */ cursorBarWidth?: number; From 48aebec01fee1c5cc10368aa3f4d2629506dc56d Mon Sep 17 00:00:00 2001 From: Nick Pezza Date: Sat, 7 Dec 2019 15:39:34 -0500 Subject: [PATCH 3/7] Remove default width value --- addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts | 2 +- src/browser/renderer/BaseRenderLayer.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts index 2b181847..b897ed44 100644 --- a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts +++ b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts @@ -153,7 +153,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { * @param x The column to fill. * @param y The row to fill. */ - protected _fillLeftLineAtCell(x: number, y: number, width: number = 1): void { + protected _fillLeftLineAtCell(x: number, y: number, width: number): void { this._ctx.fillRect( x * this._scaledCellWidth, y * this._scaledCellHeight, diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts index 2dfe5bd3..4ea8bd52 100644 --- a/src/browser/renderer/BaseRenderLayer.ts +++ b/src/browser/renderer/BaseRenderLayer.ts @@ -171,7 +171,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { * @param x The column to fill. * @param y The row to fill. */ - protected _fillLeftLineAtCell(x: number, y: number, width: number = 1): void { + protected _fillLeftLineAtCell(x: number, y: number, width: number): void { this._ctx.fillRect( x * this._scaledCellWidth, y * this._scaledCellHeight, From 97dc61e65f6acd496803929847d7809040c80f54 Mon Sep 17 00:00:00 2001 From: Nick Pezza Date: Sat, 7 Dec 2019 15:40:02 -0500 Subject: [PATCH 4/7] s/cursorBarWidth/cursorWidth --- addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts | 2 +- src/browser/renderer/CursorRenderLayer.ts | 2 +- src/common/services/OptionsService.ts | 2 +- src/common/services/Services.ts | 4 ++-- typings/xterm.d.ts | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts index 29c380fb..1072a171 100644 --- 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, terminal.getOption('cursorBarWidth')); + this._fillLeftLineAtCell(x, y, terminal.getOption('cursorWidth')); this._ctx.restore(); } diff --git a/src/browser/renderer/CursorRenderLayer.ts b/src/browser/renderer/CursorRenderLayer.ts index 5927d8df..64ecf33f 100644 --- 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._optionsService.options.cursorBarWidth); + this._fillLeftLineAtCell(x, y, this._optionsService.options.cursorWidth); this._ctx.restore(); } diff --git a/src/common/services/OptionsService.ts b/src/common/services/OptionsService.ts index 987dde67..b92fa58f 100644 --- a/src/common/services/OptionsService.ts +++ b/src/common/services/OptionsService.ts @@ -20,7 +20,7 @@ export const DEFAULT_OPTIONS: ITerminalOptions = Object.freeze({ rows: 24, cursorBlink: false, cursorStyle: 'block', - cursorBarWidth: 1, + cursorWidth: 1, bellSound: DEFAULT_BELL_SOUND, bellStyle: 'none', drawBoldTextInBrightColors: true, diff --git a/src/common/services/Services.ts b/src/common/services/Services.ts index 4f90c0e9..2b284cd2 100644 --- a/src/common/services/Services.ts +++ b/src/common/services/Services.ts @@ -191,7 +191,7 @@ export interface IPartialTerminalOptions { cols?: number; cursorBlink?: boolean; cursorStyle?: 'block' | 'underline' | 'bar'; - cursorBarWidth?: number; + cursorWidth?: number; disableStdin?: boolean; drawBoldTextInBrightColors?: boolean; fastScrollModifier?: 'alt' | 'ctrl' | 'shift'; @@ -224,7 +224,7 @@ export interface ITerminalOptions { cols: number; cursorBlink: boolean; cursorStyle: 'block' | 'underline' | 'bar'; - cursorBarWidth: number; + cursorWidth: number; disableStdin: boolean; drawBoldTextInBrightColors: boolean; fastScrollModifier: 'alt' | 'ctrl' | 'shift' | undefined; diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index c492330c..22314fb6 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -75,7 +75,7 @@ declare module 'xterm' { /** * The width of the cursor in CSS pixels when `cursorStyle` is set to 'bar'. */ - cursorBarWidth?: number; + cursorWidth?: number; /** * Whether input should be disabled. From 70c8f8733a98c84dfdba8d955ab2ad66a5f2f1dc Mon Sep 17 00:00:00 2001 From: Nick Pezza Date: Sat, 7 Dec 2019 15:42:33 -0500 Subject: [PATCH 5/7] Sanitize cursorWidth option --- src/common/services/OptionsService.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/services/OptionsService.ts b/src/common/services/OptionsService.ts index b92fa58f..885f8ab5 100644 --- a/src/common/services/OptionsService.ts +++ b/src/common/services/OptionsService.ts @@ -127,6 +127,7 @@ export class OptionsService implements IOptionsService { } break; case 'fastScrollSensitivity': + case 'cursorWidth': case 'scrollSensitivity': if (value <= 0) { throw new Error(`${key} cannot be less than or equal to 0, value: ${value}`); From fa4de08934c6ceb769dfe7e34031629ba01e3427 Mon Sep 17 00:00:00 2001 From: Nick Pezza Date: Sat, 7 Dec 2019 15:54:17 -0500 Subject: [PATCH 6/7] Apply changes to the dom renderer --- src/browser/renderer/dom/DomRenderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index 018e63e5..942a2792 100644 --- 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;` + From 79ea49cafd73da44c684c54587dffcaf19894d30 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sat, 7 Dec 2019 13:24:59 -0800 Subject: [PATCH 7/7] Floor cursorWidth to ensure it's an integer --- src/common/services/OptionsService.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/common/services/OptionsService.ts b/src/common/services/OptionsService.ts index 885f8ab5..7cd111ac 100644 --- a/src/common/services/OptionsService.ts +++ b/src/common/services/OptionsService.ts @@ -112,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) { @@ -120,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) { @@ -127,7 +131,6 @@ export class OptionsService implements IOptionsService { } break; case 'fastScrollSensitivity': - case 'cursorWidth': case 'scrollSensitivity': if (value <= 0) { throw new Error(`${key} cannot be less than or equal to 0, value: ${value}`);