diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index 620e4dbb..0b5aa789 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.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], + 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/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/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 deaecb79..410cef46 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' { @@ -453,7 +455,7 @@ declare module 'xterm' { */ interface IDecorationOverviewRulerOptions { color: string; - position?: 'left' | 'center' | 'right'; + position?: 'left' | 'center' | 'right' | 'full'; } /*