From 1a9965ef01bba481c6e1b6d62d13e8c0f80bc269 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 13:20:48 -0400 Subject: [PATCH 1/9] fix #3683 --- src/browser/Decorations/OverviewRulerRenderer.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index 53f1a99c1..f62c66473 100644 --- a/src/browser/Decorations/OverviewRulerRenderer.ts +++ b/src/browser/Decorations/OverviewRulerRenderer.ts @@ -15,7 +15,7 @@ import { IBufferService, IDecorationService, IInternalDecoration, IOptionsServic const renderSizes = new Uint16Array(3); const enum SizeIndex { OUTER_SIZE = 0, - INNER_SIZE = 0 + INNER_SIZE = 1 } export class OverviewRulerRenderer extends Disposable { @@ -91,13 +91,14 @@ export class OverviewRulerRenderer extends Disposable { this._decorationElements.delete(decoration); return; } - this._ctx.lineWidth = !decoration.options.overviewRulerOptions.position ? 2 : 6; + this._ctx.lineWidth = 1; this._ctx.strokeStyle = decoration.options.overviewRulerOptions.color; - this._ctx.strokeRect( + this._ctx.fillStyle = decoration.options.overviewRulerOptions.color; + this._ctx.fillRect( !decoration.options.overviewRulerOptions.position || decoration.options.overviewRulerOptions.position === 'left' ? 0 : decoration.options.overviewRulerOptions.position === 'right' ? renderSizes[SizeIndex.OUTER_SIZE] + renderSizes[SizeIndex.INNER_SIZE]: renderSizes[SizeIndex.OUTER_SIZE], Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)), - !decoration.options.overviewRulerOptions.position ? this._width : decoration.options.overviewRulerOptions.position === 'center' ? renderSizes[SizeIndex.INNER_SIZE]: renderSizes[SizeIndex.OUTER_SIZE], - window.devicePixelRatio + !decoration.options.overviewRulerOptions.position ? this._width : decoration.options.overviewRulerOptions.position === 'center' ? renderSizes[SizeIndex.INNER_SIZE] : renderSizes[SizeIndex.OUTER_SIZE], + window.devicePixelRatio * (!decoration.options.overviewRulerOptions.position ? 2 : 6) ); } From e293d29fd3306fc04b9a0b6fa5308eb16bb4f4d7 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 13:31:03 -0400 Subject: [PATCH 2/9] add a comment --- src/browser/Decorations/OverviewRulerRenderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index f62c66473..aa91cad98 100644 --- a/src/browser/Decorations/OverviewRulerRenderer.ts +++ b/src/browser/Decorations/OverviewRulerRenderer.ts @@ -92,13 +92,13 @@ export class OverviewRulerRenderer extends Disposable { return; } this._ctx.lineWidth = 1; - this._ctx.strokeStyle = decoration.options.overviewRulerOptions.color; this._ctx.fillStyle = decoration.options.overviewRulerOptions.color; this._ctx.fillRect( !decoration.options.overviewRulerOptions.position || decoration.options.overviewRulerOptions.position === 'left' ? 0 : decoration.options.overviewRulerOptions.position === 'right' ? renderSizes[SizeIndex.OUTER_SIZE] + renderSizes[SizeIndex.INNER_SIZE]: renderSizes[SizeIndex.OUTER_SIZE], Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)), !decoration.options.overviewRulerOptions.position ? this._width : decoration.options.overviewRulerOptions.position === 'center' ? renderSizes[SizeIndex.INNER_SIZE] : renderSizes[SizeIndex.OUTER_SIZE], - window.devicePixelRatio * (!decoration.options.overviewRulerOptions.position ? 2 : 6) + // when a position is provided, the element has less width, so increase its height + window.devicePixelRatio * (decoration.options.overviewRulerOptions.position ? 6 : 2) ); } From a4212e98d29973388eedf32dc2d762578f4c8c1c Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 13:40:06 -0400 Subject: [PATCH 3/9] fix #3686 --- demo/client.ts | 6 +----- src/browser/Decorations/OverviewRulerRenderer.ts | 1 - 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index 2ae649e4c..67e277592 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -548,11 +548,7 @@ function addDecoration() { term.options['overviewRulerWidth'] = 15; const marker = term.addMarker(1); const decoration = term.registerDecoration({ marker, overviewRulerOptions: { color: '#ef2929'} }); - decoration.onRender((e) => { - if (e.classList.value === 'xterm-decoration') { - e.style.backgroundColor = '#ef2929'; - } - }); + decoration.onRender((e) => e.style.backgroundColor = '#ef2929'); } function addOverviewRuler() { diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index aa91cad98..b34b592d0 100644 --- a/src/browser/Decorations/OverviewRulerRenderer.ts +++ b/src/browser/Decorations/OverviewRulerRenderer.ts @@ -121,7 +121,6 @@ export class OverviewRulerRenderer extends Disposable { this._decorationElements.set(decoration, this._canvas); } this._refreshStyle(decoration, updateAnchor); - decoration.onRenderEmitter.fire(this._canvas); } private _queueRefresh(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void { From 6162ae9ffe0acca27a5bcbd2808242c8d034eccc Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 14:33:51 -0400 Subject: [PATCH 4/9] allow changing the color of overview decorations --- src/browser/Decorations/OverviewRulerRenderer.ts | 2 +- src/common/services/DecorationService.ts | 2 ++ typings/xterm.d.ts | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index b34b592d0..b63a5aece 100644 --- a/src/browser/Decorations/OverviewRulerRenderer.ts +++ b/src/browser/Decorations/OverviewRulerRenderer.ts @@ -92,7 +92,7 @@ export class OverviewRulerRenderer extends Disposable { return; } this._ctx.lineWidth = 1; - this._ctx.fillStyle = decoration.options.overviewRulerOptions.color; + this._ctx.fillStyle = decoration.overviewRulerDecorationColor || decoration.options.overviewRulerOptions.color; this._ctx.fillRect( !decoration.options.overviewRulerOptions.position || decoration.options.overviewRulerOptions.position === 'left' ? 0 : decoration.options.overviewRulerOptions.position === 'right' ? renderSizes[SizeIndex.OUTER_SIZE] + renderSizes[SizeIndex.INNER_SIZE]: renderSizes[SizeIndex.OUTER_SIZE], Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)), diff --git a/src/common/services/DecorationService.ts b/src/common/services/DecorationService.ts index 911fd369c..328c51d50 100644 --- a/src/common/services/DecorationService.ts +++ b/src/common/services/DecorationService.ts @@ -60,6 +60,8 @@ class Decoration extends Disposable implements IInternalDecoration { private _onDispose = this.register(new EventEmitter()); public readonly onDispose = this._onDispose.event; + public overviewRulerDecorationColor: string | undefined; + constructor( public readonly options: IDecorationOptions ) { diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 24ba940eb..88b2856e0 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -438,6 +438,11 @@ declare module 'xterm' { * that. */ element: HTMLElement | undefined; + + /** + * The color for the decoration. + */ + overviewRulerDecorationColor: string | undefined; } /* From fb13f812f7106a561ad4704dc2b517f17591de18 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 14:37:12 -0400 Subject: [PATCH 5/9] tweak description --- typings/xterm.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 88b2856e0..4853ac48c 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -440,7 +440,9 @@ declare module 'xterm' { element: HTMLElement | undefined; /** - * The color for the decoration. + * The color to be used for the overview ruler decoration. + * This will only take effect when @param overviewRulerOptions + * were provided initially. */ overviewRulerDecorationColor: string | undefined; } From f4593b76df7c50c30ce343231b1310316dc22f7f Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 15:20:13 -0400 Subject: [PATCH 6/9] use options --- src/browser/Decorations/OverviewRulerRenderer.ts | 2 +- src/common/services/DecorationService.ts | 2 -- typings/xterm.d.ts | 12 +++++++++--- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index b63a5aece..620e4dbbb 100644 --- a/src/browser/Decorations/OverviewRulerRenderer.ts +++ b/src/browser/Decorations/OverviewRulerRenderer.ts @@ -92,7 +92,7 @@ export class OverviewRulerRenderer extends Disposable { return; } this._ctx.lineWidth = 1; - this._ctx.fillStyle = decoration.overviewRulerDecorationColor || decoration.options.overviewRulerOptions.color; + this._ctx.fillStyle = decoration.overviewRulerOptions?.color || decoration.options.overviewRulerOptions.color; this._ctx.fillRect( !decoration.options.overviewRulerOptions.position || decoration.options.overviewRulerOptions.position === 'left' ? 0 : decoration.options.overviewRulerOptions.position === 'right' ? renderSizes[SizeIndex.OUTER_SIZE] + renderSizes[SizeIndex.INNER_SIZE]: renderSizes[SizeIndex.OUTER_SIZE], Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)), diff --git a/src/common/services/DecorationService.ts b/src/common/services/DecorationService.ts index 328c51d50..911fd369c 100644 --- a/src/common/services/DecorationService.ts +++ b/src/common/services/DecorationService.ts @@ -60,8 +60,6 @@ class Decoration extends Disposable implements IInternalDecoration { private _onDispose = this.register(new EventEmitter()); public readonly onDispose = this._onDispose.event; - public overviewRulerDecorationColor: string | undefined; - constructor( public readonly options: IDecorationOptions ) { diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 4853ac48c..2254df1cc 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -440,13 +440,19 @@ declare module 'xterm' { element: HTMLElement | undefined; /** - * The color to be used for the overview ruler decoration. + * The options for the overview ruler that can be updated. * This will only take effect when @param overviewRulerOptions * were provided initially. */ - overviewRulerDecorationColor: string | undefined; + overviewRulerOptions?: IDecorationOverviewRulerOptions; } + +interface IDecorationOverviewRulerOptions { + color: string; + position?: 'left' | 'center' | 'right'; +} + /* * Options that define the presentation of the decoration. */ @@ -486,7 +492,7 @@ declare module 'xterm' { * @param color The color of the decoration. * @param position The position of the decoration. */ - readonly overviewRulerOptions?: { color: string; position?: 'left' | 'center' | 'right'} + overviewRulerOptions?: IDecorationOverviewRulerOptions } /** From f92d1f46a6717f00ec0ac188b1b5e6f00b811d65 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 15:36:03 -0400 Subject: [PATCH 7/9] only allow updating color --- 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 2254df1cc..f67c30e3e 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -444,7 +444,7 @@ declare module 'xterm' { * This will only take effect when @param overviewRulerOptions * were provided initially. */ - overviewRulerOptions?: IDecorationOverviewRulerOptions; + overviewRulerOptions?: Pick; } From 6899f9dc4d74e327d58b8832c73e007d3061dfa4 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 15:55:15 -0400 Subject: [PATCH 8/9] tweak jsdoc --- typings/xterm.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index f67c30e3e..77f0b4ef5 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -434,15 +434,15 @@ declare module 'xterm' { /** * The element that the decoration is rendered to. This will be undefined - * until it is rendered for the first time by @{link IDecoration.onRender}. + * until it is rendered for the first time by {@link IDecoration.onRender}. * that. */ element: HTMLElement | undefined; /** * The options for the overview ruler that can be updated. - * This will only take effect when @param overviewRulerOptions - * were provided initially. + * This will only take effect when + * @param overviewRulerOptions were provided initially. */ overviewRulerOptions?: Pick; } From 450ee0c6a52ecf22dab31703f09a8ff7a28a36d1 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Wed, 16 Mar 2022 15:58:06 -0400 Subject: [PATCH 9/9] tweak api --- typings/xterm.d.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 77f0b4ef5..deaecb79a 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -441,17 +441,20 @@ declare module 'xterm' { /** * The options for the overview ruler that can be updated. - * This will only take effect when - * @param overviewRulerOptions were provided initially. + * This will only take effect when {@link IDecorationOptions.overviewRulerOptions} + * were provided initially. */ overviewRulerOptions?: Pick; } -interface IDecorationOverviewRulerOptions { - color: string; - position?: 'left' | 'center' | 'right'; -} + /** + * Overview ruler decoration options + */ + interface IDecorationOverviewRulerOptions { + color: string; + position?: 'left' | 'center' | 'right'; + } /* * Options that define the presentation of the decoration.