From 8e68c67a0c57d2e0a12cbb5078c8095e1b353689 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Fri, 18 Mar 2022 15:07:33 -0400 Subject: [PATCH] applyStyles --- addons/xterm-addon-search/src/SearchAddon.ts | 25 +++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/addons/xterm-addon-search/src/SearchAddon.ts b/addons/xterm-addon-search/src/SearchAddon.ts index 32441f1ce..8a8acf069 100644 --- a/addons/xterm-addon-search/src/SearchAddon.ts +++ b/addons/xterm-addon-search/src/SearchAddon.ts @@ -546,6 +546,7 @@ export class SearchAddon implements ITerminalAddon { const marker = terminal.registerMarker(undefined, result.row); if (marker) { this._selectedDecoration = terminal.registerDecoration({ marker, overviewRulerOptions: { color } }); + this._selectedDecoration?.onRender((e) => this._applyStyles(e, color, result)); } } @@ -558,6 +559,20 @@ export class SearchAddon implements ITerminalAddon { return true; } + private _applyStyles(element: HTMLElement, color: string, result: ISearchResult): void { + if (element.clientWidth <= 0) { + return; + } + if (!element.classList.contains('xterm-find-result-decoration')) { + element.classList.add('xterm-find-result-decoration'); + // decoration's clientWidth = actualCellWidth + element.style.left = `${element.clientWidth * result.col}px`; + element.style.width = `${element.clientWidth * result.term.length}px`; + element.style.backgroundColor = color; + element.style.color = color; + } + } + /** * Registers a decoration for the @param result * and @returns the decoration or undefined if @@ -571,15 +586,7 @@ export class SearchAddon implements ITerminalAddon { } const findResultDecoration = terminal.registerDecoration({ marker, overviewRulerOptions: this._resultDecorations.get(marker.line) && !this._dataChanged ? undefined : { color, position: 'center' } }); - findResultDecoration?.onRender((e) => { - if (!e.classList.contains('xterm-find-result-decoration') && result.term.length && e.clientWidth > 0) { - e.classList.add('xterm-find-result-decoration'); - // decoration's clientWidth = actualCellWidth - e.style.left = `${e.clientWidth * result.col}px`; - e.style.width = `${e.clientWidth * result.term.length}px`; - e.style.backgroundColor = color; - e.style.color = color; - }}); + findResultDecoration?.onRender((e) => this._applyStyles(e, color, result)); return findResultDecoration; } }