diff --git a/addons/xterm-addon-search/src/SearchAddon.ts b/addons/xterm-addon-search/src/SearchAddon.ts index 104ca532..1e54ee3b 100644 --- a/addons/xterm-addon-search/src/SearchAddon.ts +++ b/addons/xterm-addon-search/src/SearchAddon.ts @@ -44,6 +44,7 @@ export class SearchAddon implements ITerminalAddon { private _result: ISearchResult | undefined; private _reset: boolean = false; private _cachedSearchTerm: string | undefined; + private _cachedResults: ISearchResult[] = []; /** * translateBufferLineToStringWithWrap is a fairly expensive call. * We memoize the calls into an array that has a time based ttl. @@ -81,6 +82,11 @@ export class SearchAddon implements ITerminalAddon { } if (!this._reset && term === this._cachedSearchTerm) { + // this._resultDecorations.forEach(d => d.dispose()); + // this._resultDecorations = []; + // for (const decoration of this._cachedResults) { + // this._showResultDecoration(decoration); + // } return this.findNext(term, searchOptions); } this._reset = false; @@ -89,18 +95,17 @@ export class SearchAddon implements ITerminalAddon { // new search, clear out the old decorations this._resultDecorations.forEach(d => d.dispose()); this._resultDecorations = []; - const results: ISearchResult[] = []; searchOptions = searchOptions || {}; searchOptions.incremental = false; let found = this.findNext(term, searchOptions); - while (found && !results.find(r => r?.col === this._result?.col && r?.row === this._result?.row)) { + while (found && !this._cachedResults.find(r => r?.col === this._result?.col && r?.row === this._result?.row)) { if (this._result) { - results.push(this._result); + this._cachedResults.push(this._result); } found = this.findNext(term, searchOptions); } - for (const result of results) { + for (const result of this._cachedResults) { if (result) { const resultDecoration = this._showResultDecoration(result); if (resultDecoration) { @@ -108,7 +113,7 @@ export class SearchAddon implements ITerminalAddon { } } } - if (results.length > 0) { + if (this._cachedResults.length > 0) { this._cachedSearchTerm = term; } return true; @@ -517,6 +522,10 @@ export class SearchAddon implements ITerminalAddon { return false; } terminal.select(result.col, result.row, result.size); + const marker = terminal.registerMarker(undefined, result.row); + if (marker) { + terminal.registerDecoration({ marker, overviewRulerOptions: { color: 'yellow' } }); + } // If it is not in the viewport then we scroll else it just gets selected if (result.row >= (terminal.buffer.active.viewportY + terminal.rows) || result.row < terminal.buffer.active.viewportY) { let scroll = result.row - terminal.buffer.active.viewportY; @@ -537,9 +546,10 @@ export class SearchAddon implements ITerminalAddon { if (!marker) { return undefined; } - const findResultDecoration = terminal.registerDecoration({ marker, overviewRulerOptions: { color: 'yellow' } }); + terminal.options.overviewRulerWidth = 10; + const findResultDecoration = terminal.registerDecoration({ marker, overviewRulerOptions: { color: 'blue' } }); findResultDecoration?.onRender((e) => { - if (!e.classList.contains('xterm-find-result-decoration') && result.term.length && e.clientWidth > 0) { + if (!e.classList.contains('xterm-find-result-decoration') && result.term.length && e.clientWidth > 0 && !e.classList.contains('xterm-decoration-overview-ruler')) { e.classList.add('xterm-find-result-decoration'); // decoration's clientWidth = actualCellWidth e.style.left = `${e.clientWidth * result.col}px`; diff --git a/css/xterm.css b/css/xterm.css index 9b9c47f8..3160a26e 100644 --- a/css/xterm.css +++ b/css/xterm.css @@ -180,7 +180,7 @@ } .xterm-find-result-decoration { - background-color: yellow; + background-color: blue; opacity: 60%; } .xterm-decoration-overview-ruler {