From df929f2dd5b65390e82f422c4125cd75eae629ba Mon Sep 17 00:00:00 2001 From: meganrogge Date: Tue, 15 Mar 2022 13:07:49 -0400 Subject: [PATCH] add position --- demo/client.ts | 9 ++++++--- src/browser/Decorations/OverviewRulerRenderer.ts | 8 +++++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index b219b733..70588213 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -556,9 +556,12 @@ function addDecoration() { function addOverviewRuler() { term.options['overviewRulerWidth'] = 15; - const canvas = term.registerDecoration({marker: term.addMarker(1), { color }: 'red'}); - term.registerDecoration({marker: term.addMarker(3), { color }: 'green'}); - term.registerDecoration({marker: term.addMarker(5), { color }: 'blue'}); + const canvas = term.registerDecoration({marker: term.addMarker(1), overviewRulerOptions: { color: 'red' }}); + term.registerDecoration({marker: term.addMarker(3), overviewRulerOptions: { color: 'green' }}); + term.registerDecoration({marker: term.addMarker(5), overviewRulerOptions: { color: 'blue' }}); + term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'red', position: 'left' }}); + term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'green', position: 'center' }}); + term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'blue', position: 'right' }}); canvas.onRender((e) => { e.style.left = `${document.querySelector('.xterm-viewport').clientWidth + 5}px`; }); diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts index 45f30c35..eb58bc10 100644 --- a/src/browser/Decorations/OverviewRulerRenderer.ts +++ b/src/browser/Decorations/OverviewRulerRenderer.ts @@ -67,7 +67,7 @@ export class OverviewRulerRenderer extends Disposable { } private _refreshStyle(decoration: IInternalDecoration): void { - if (!this._ctx) { + if (!this._ctx || !this._optionsService.options.overviewRulerWidth) { return; } if (decoration.options.anchor === 'right') { @@ -81,10 +81,12 @@ export class OverviewRulerRenderer extends Disposable { } this._ctx.lineWidth = 1; this._ctx.strokeStyle = decoration.options.overviewRulerOptions.color; + const size = Math.floor(this._optionsService.options.overviewRulerWidth / 3); + const position = decoration.options.overviewRulerOptions.position; this._ctx.strokeRect( - 0, + !position || position === 'left' ? 0 : position === 'right' ? size * 2 + 1: size, Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)), - this._canvas.width, + !position ? this._canvas.width : position === 'center' ? size + 1 : size, window.devicePixelRatio ); }