From c70be89bc24f8207e92676374ee7bd8c8db7dea4 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Thu, 17 Mar 2022 15:14:35 -0400 Subject: [PATCH 1/4] fix #3690 --- demo/client.ts | 6 +++--- src/browser/Decorations/OverviewRulerRenderer.ts | 7 +++---- test/api/Terminal.api.ts | 8 ++++---- typings/xterm.d.ts | 2 +- 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index 2ae649e4..3e305aef 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -557,9 +557,9 @@ function addDecoration() { function addOverviewRuler() { term.options['overviewRulerWidth'] = 15; - term.registerDecoration({marker: term.addMarker(1), overviewRulerOptions: { color: '#ef2929' }}); - term.registerDecoration({marker: term.addMarker(3), overviewRulerOptions: { color: '#8ae234' }}); - term.registerDecoration({marker: term.addMarker(5), overviewRulerOptions: { color: '#729fcf' }}); + term.registerDecoration({marker: term.addMarker(1), overviewRulerOptions: { color: '#ef2929', position: 'full' }}); + term.registerDecoration({marker: term.addMarker(3), overviewRulerOptions: { color: '#8ae234', position: 'full' }}); + term.registerDecoration({marker: term.addMarker(5), overviewRulerOptions: { color: '#729fcf', position: 'full' }}); term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#ef2929', position: 'left' }}); term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#8ae234', position: 'center' }}); term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#729fcf', position: 'right' }}); diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index aa91cad9..d6fec810 100644 --- a/src/browser/Decorations/OverviewRulerRenderer.ts +++ b/src/browser/Decorations/OverviewRulerRenderer.ts @@ -94,11 +94,10 @@ export class OverviewRulerRenderer extends Disposable { this._ctx.lineWidth = 1; 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], + decoration.options.overviewRulerOptions.position === 'full' || 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], - // when a position is provided, the element has less width, so increase its height - window.devicePixelRatio * (decoration.options.overviewRulerOptions.position ? 6 : 2) + decoration.options.overviewRulerOptions.position === 'full' ? this._width : decoration.options.overviewRulerOptions.position === 'center' ? renderSizes[SizeIndex.INNER_SIZE] : renderSizes[SizeIndex.OUTER_SIZE], + window.devicePixelRatio * (decoration.options.overviewRulerOptions.position === 'full' ? 2 : 6) ); } diff --git a/test/api/Terminal.api.ts b/test/api/Terminal.api.ts index 43f1e97d..b1582be8 100644 --- a/test/api/Terminal.api.ts +++ b/test/api/Terminal.api.ts @@ -770,8 +770,8 @@ describe('API Integration Tests', function(): void { await page.waitForSelector('.xterm-text-layer'); await page.evaluate(`window.marker1 = window.term.addMarker(1)`); await page.evaluate(`window.marker2 = window.term.addMarker(2)`); - await page.evaluate(`window.term.registerDecoration({ marker: window.marker1, overviewRulerOptions: { color: 'red' } })`); - await page.evaluate(`window.term.registerDecoration({ marker: window.marker2, overviewRulerOptions: { color: 'blue' } })`); + await page.evaluate(`window.term.registerDecoration({ marker: window.marker1, overviewRulerOptions: { color: 'red', position: 'full' } })`); + await page.evaluate(`window.term.registerDecoration({ marker: window.marker2, overviewRulerOptions: { color: 'blue', position: 'full' } })`); await openTerminal(page); await pollFor(page, `document.querySelectorAll('.xterm-decoration-overview-ruler').length`, 0); }); @@ -781,8 +781,8 @@ describe('API Integration Tests', function(): void { await page.waitForSelector('.xterm-text-layer'); await page.evaluate(`window.marker1 = window.term.addMarker(1)`); await page.evaluate(`window.marker2 = window.term.addMarker(2)`); - await page.evaluate(`window.term.registerDecoration({ marker: window.marker1, overviewRulerOptions: { color: 'red' } })`); - await page.evaluate(`window.term.registerDecoration({ marker: window.marker2, overviewRulerOptions: { color: 'blue' } })`); + await page.evaluate(`window.term.registerDecoration({ marker: window.marker1, overviewRulerOptions: { color: 'red', position: 'full' } })`); + await page.evaluate(`window.term.registerDecoration({ marker: window.marker2, overviewRulerOptions: { color: 'blue', position: 'full' } })`); await openTerminal(page); await pollFor(page, `document.querySelectorAll('.xterm-decoration-overview-ruler').length`, 1); }); diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 24ba940e..1278309d 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -479,7 +479,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'} + readonly overviewRulerOptions?: { color: string; position: 'left' | 'center' | 'right' | 'full'} } /** From 731432a85201d28ed1f9c95c5e26ca28e28fdbd8 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Thu, 17 Mar 2022 15:16:28 -0400 Subject: [PATCH 2/4] set fallback --- src/common/services/DecorationService.ts | 3 +++ typings/xterm.d.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/common/services/DecorationService.ts b/src/common/services/DecorationService.ts index 911fd369..6c750236 100644 --- a/src/common/services/DecorationService.ts +++ b/src/common/services/DecorationService.ts @@ -65,6 +65,9 @@ class Decoration extends Disposable implements IInternalDecoration { ) { super(); this.marker = options.marker; + if (this.options.overviewRulerOptions && !this.options.overviewRulerOptions.position) { + this.options.overviewRulerOptions.position = 'full'; + } } public override dispose(): void { this._onDispose.fire(); diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 1278309d..3ddef4d3 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -479,7 +479,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' | 'full'} + readonly overviewRulerOptions?: { color: string; position?: 'left' | 'center' | 'right' | 'full'} } /** From 5a6a275a53f127077859c19555e86bff425cc543 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Thu, 17 Mar 2022 15:18:21 -0400 Subject: [PATCH 3/4] use interface --- demo/client.ts | 6 +++--- typings/xterm.d.ts | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index 3e305aef..2ae649e4 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -557,9 +557,9 @@ function addDecoration() { function addOverviewRuler() { term.options['overviewRulerWidth'] = 15; - term.registerDecoration({marker: term.addMarker(1), overviewRulerOptions: { color: '#ef2929', position: 'full' }}); - term.registerDecoration({marker: term.addMarker(3), overviewRulerOptions: { color: '#8ae234', position: 'full' }}); - term.registerDecoration({marker: term.addMarker(5), overviewRulerOptions: { color: '#729fcf', position: 'full' }}); + term.registerDecoration({marker: term.addMarker(1), overviewRulerOptions: { color: '#ef2929' }}); + term.registerDecoration({marker: term.addMarker(3), overviewRulerOptions: { color: '#8ae234' }}); + term.registerDecoration({marker: term.addMarker(5), overviewRulerOptions: { color: '#729fcf' }}); term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#ef2929', position: 'left' }}); term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#8ae234', position: 'center' }}); term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: '#729fcf', position: 'right' }}); diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 3ddef4d3..87b30288 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -7,6 +7,8 @@ * to be stable and consumed by external programs. */ +import { IModelDecorationOverviewRulerOptions } from 'vs/editor/common/model'; + /// declare module 'xterm' { @@ -479,7 +481,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' | 'full'} + readonly overviewRulerOptions?: IModelDecorationOverviewRulerOptions } /** From ba4252bc0bb4743b3d5ad7390d38d4080ba90b7d Mon Sep 17 00:00:00 2001 From: meganrogge Date: Thu, 17 Mar 2022 15:21:29 -0400 Subject: [PATCH 4/4] fix merge result --- typings/xterm.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index be9ff75d..410cef46 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -446,8 +446,7 @@ declare module 'xterm' { * This will only take effect when {@link IDecorationOptions.overviewRulerOptions} * were provided initially. */ - overviewRulerOptions?: Pick< - Options, 'color'>; + overviewRulerOptions?: Pick; }