From 7c87f5b47a3589f1ba962ca522ebc49c46c6b99f Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Tue, 10 May 2022 05:31:49 -0700 Subject: [PATCH] Start to use new API in search addon --- addons/xterm-addon-search/src/SearchAddon.ts | 24 +++++++++---------- .../typings/xterm-addon-search.d.ts | 6 ++--- .../src/atlas/WebglCharAtlas.ts | 3 --- demo/client.ts | 4 ++-- .../renderer/dom/DomRendererRowFactory.ts | 4 ++-- 5 files changed, 19 insertions(+), 22 deletions(-) diff --git a/addons/xterm-addon-search/src/SearchAddon.ts b/addons/xterm-addon-search/src/SearchAddon.ts index 345b9153..0fb08056 100644 --- a/addons/xterm-addon-search/src/SearchAddon.ts +++ b/addons/xterm-addon-search/src/SearchAddon.ts @@ -653,7 +653,7 @@ export class SearchAddon implements ITerminalAddon { * @param result The result to select. * @return Whether a result was selected. */ - private _selectResult(result: ISearchResult | undefined, decorations?: ISearchDecorationOptions, noScroll?: boolean): boolean { + private _selectResult(result: ISearchResult | undefined, options?: ISearchDecorationOptions, noScroll?: boolean): boolean { const terminal = this._terminal!; this._selectedDecoration?.dispose(); if (!result) { @@ -661,18 +661,19 @@ export class SearchAddon implements ITerminalAddon { return false; } terminal.select(result.col, result.row, result.size); - if (decorations?.activeMatchColorOverviewRuler) { + if (options) { const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row); if (marker) { this._selectedDecoration = terminal.registerDecoration({ marker, x: result.col, width: result.size, + backgroundColor: options.activeMatchBackground, overviewRulerOptions: { - color: decorations.activeMatchColorOverviewRuler + color: options.activeMatchColorOverviewRuler } }); - this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.activeMatchBackground, decorations.activeMatchBorder)); + this._selectedDecoration?.onRender((e) => this._applyStyles(e, options.activeMatchBorder)); this._selectedDecoration?.onDispose(() => marker.dispose()); } } @@ -696,15 +697,12 @@ export class SearchAddon implements ITerminalAddon { * @param result the search result associated with the decoration * @returns */ - private _applyStyles(element: HTMLElement, backgroundColor: string | undefined, borderColor: string | undefined): void { + private _applyStyles(element: HTMLElement, borderColor: string | undefined): void { if (element.clientWidth <= 0) { return; } if (!element.classList.contains('xterm-find-result-decoration')) { element.classList.add('xterm-find-result-decoration'); - if (backgroundColor) { - element.style.backgroundColor = backgroundColor; - } if (borderColor) { element.style.outline = `1px solid ${borderColor}`; } @@ -717,21 +715,23 @@ export class SearchAddon implements ITerminalAddon { * @param color the color to use for the decoration * @returns the {@link IDecoration} or undefined if the marker has already been disposed of */ - private _createResultDecoration(result: ISearchResult, decorations: ISearchDecorationOptions): IDecoration | undefined { + private _createResultDecoration(result: ISearchResult, options: ISearchDecorationOptions): IDecoration | undefined { const terminal = this._terminal!; const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row); - if (!marker || !decorations?.matchOverviewRuler) { + if (!marker) { return undefined; } const findResultDecoration = terminal.registerDecoration({ marker, x: result.col, width: result.size, + backgroundColor: options.matchBackground, overviewRulerOptions: this._resultDecorations?.get(marker.line) ? undefined : { - color: decorations.matchOverviewRuler, position: 'center' + color: options.matchOverviewRuler, + position: 'center' } }); - findResultDecoration?.onRender((e) => this._applyStyles(e, decorations.matchBackground, decorations.matchBorder)); + findResultDecoration?.onRender((e) => this._applyStyles(e, options.matchBorder)); findResultDecoration?.onDispose(() => marker.dispose()); return findResultDecoration; } diff --git a/addons/xterm-addon-search/typings/xterm-addon-search.d.ts b/addons/xterm-addon-search/typings/xterm-addon-search.d.ts index 4d683db0..9ed1da62 100644 --- a/addons/xterm-addon-search/typings/xterm-addon-search.d.ts +++ b/addons/xterm-addon-search/typings/xterm-addon-search.d.ts @@ -45,12 +45,12 @@ declare module 'xterm-addon-search' { */ interface ISearchDecorationOptions { /** - * The background color of a match. + * The background color of a match, this must use #RRGGBB format. */ matchBackground?: string; /** - * The border color of a match + * The border color of a match. */ matchBorder?: string; @@ -60,7 +60,7 @@ declare module 'xterm-addon-search' { matchOverviewRuler: string; /** - * The background color for the currently active match. + * The background color for the currently active match, this must use #RRGGBB format. */ activeMatchBackground?: string; diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts index 9e14d5b8..34107fc5 100644 --- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts +++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts @@ -88,9 +88,6 @@ export class WebglCharAtlas implements IDisposable { this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2; this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2; this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency })); - - // This is useful for debugging - document.body.appendChild(this.cacheCanvas); } public dispose(): void { diff --git a/demo/client.ts b/demo/client.ts index 09359905..3996652a 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -110,10 +110,10 @@ function getSearchOptions(e: KeyboardEvent): ISearchOptions { caseSensitive: (document.getElementById('case-sensitive') as HTMLInputElement).checked, incremental: e.key !== `Enter`, decorations: (document.getElementById('highlight-all-matches') as HTMLInputElement).checked ? { - matchBackground: '#55575380', + matchBackground: '#232422', matchBorder: '#555753', matchOverviewRuler: '#555753', - activeMatchBackground: '#ef292980', + activeMatchBackground: '#ef2929', activeMatchBorder: '#ef2929', activeMatchColorOverviewRuler: '#ef2929' } : undefined diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts index 3a8bf87c..24a7b2c6 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.ts @@ -184,12 +184,12 @@ export class DomRendererRowFactory { if (x >= xmin && x < xmax) { if (d.backgroundColorRGB) { bgColorMode = Attributes.CM_RGB; - bg = d.backgroundColorRGB.rgba >> 8; + bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF; bgOverride = d.backgroundColorRGB; } if (d.foregroundColorRGB) { fgColorMode = Attributes.CM_RGB; - fg = d.foregroundColorRGB.rgba >> 8; + fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF; fgOverride = d.foregroundColorRGB; } }