diff --git a/addons/xterm-addon-search/src/SearchAddon.ts b/addons/xterm-addon-search/src/SearchAddon.ts index 0f677072cf..d8b5a17e15 100644 --- a/addons/xterm-addon-search/src/SearchAddon.ts +++ b/addons/xterm-addon-search/src/SearchAddon.ts @@ -14,8 +14,12 @@ export interface ISearchOptions { } interface ISearchDecorationOptions { - matchColor: string; - selectedColor: string; + matchBackground?: string; + matchBorder?: string; + matchOverviewRuler: string; + activeMatchBackground?: string; + activeMatchBorder?: string; + activeMatchColorOverviewRuler: string; } export interface ISearchPosition { @@ -601,11 +605,16 @@ export class SearchAddon implements ITerminalAddon { return false; } terminal.select(result.col, result.row, result.size); - if (decorations?.selectedColor) { + if (decorations?.activeMatchColorOverviewRuler) { const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row); if (marker) { - this._selectedDecoration = terminal.registerDecoration({ marker, overviewRulerOptions: { color: decorations.selectedColor } }); - this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.selectedColor, result)); + this._selectedDecoration = terminal.registerDecoration({ + marker, + overviewRulerOptions: { + color: decorations.activeMatchColorOverviewRuler + } + }); + this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.activeMatchBackground, decorations.activeMatchBorder, result)); this._selectedDecoration?.onDispose(() => marker.dispose()); } } @@ -622,11 +631,12 @@ export class SearchAddon implements ITerminalAddon { /** * Applies styles to the decoration when it is rendered * @param element the decoration's element - * @param color the color to apply + * @param backgroundColor the background color to apply + * @param borderColor the border color to apply * @param result the search result associated with the decoration * @returns */ - private _applyStyles(element: HTMLElement, color: string, result: ISearchResult): void { + private _applyStyles(element: HTMLElement, backgroundColor: string | undefined, borderColor: string | undefined, result: ISearchResult): void { if (element.clientWidth <= 0) { return; } @@ -634,8 +644,12 @@ export class SearchAddon implements ITerminalAddon { element.classList.add('xterm-find-result-decoration'); element.style.left = `${element.clientWidth * result.col}px`; element.style.width = `${element.clientWidth * result.term.length}px`; - element.style.backgroundColor = color; - element.style.opacity = '0.6'; + if (backgroundColor) { + element.style.backgroundColor = backgroundColor; + } + if (borderColor) { + element.style.outline = `1px solid ${borderColor}`; + } } } @@ -648,14 +662,16 @@ export class SearchAddon implements ITerminalAddon { private _createResultDecoration(result: ISearchResult, decorations: ISearchDecorationOptions): IDecoration | undefined { const terminal = this._terminal!; const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row); - if (!marker || !decorations?.matchColor) { + if (!marker || !decorations?.matchOverviewRuler) { return undefined; } - const findResultDecoration = terminal.registerDecoration( - { marker, - overviewRulerOptions: this._resultDecorations.get(marker.line) && !this._dataChanged ? undefined : { color: decorations.matchColor, position: 'center' } - }); - findResultDecoration?.onRender((e) => this._applyStyles(e, decorations.matchColor, result)); + const findResultDecoration = terminal.registerDecoration({ + marker, + overviewRulerOptions: this._resultDecorations.get(marker.line) && !this._dataChanged ? undefined : { + color: decorations.matchOverviewRuler, position: 'center' + } + }); + findResultDecoration?.onRender((e) => this._applyStyles(e, decorations.matchBackground, decorations.matchBorder, result)); 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 67ed2985da..aedb6af9b9 100644 --- a/addons/xterm-addon-search/typings/xterm-addon-search.d.ts +++ b/addons/xterm-addon-search/typings/xterm-addon-search.d.ts @@ -45,14 +45,34 @@ declare module 'xterm-addon-search' { */ interface ISearchDecorationOptions { /** - * The color of a match. + * The background color of a match. */ - matchColor: string; + matchBackground?: string; /** - * The color for the currently selected match. + * The border color of a match */ - selectedColor: string; + matchBorder?: string; + + /** + * The overview ruler color of a match. + */ + matchOverviewRuler: string; + + /** + * The background color for the currently active match. + */ + activeMatchBackground?: string; + + /** + * The border color of the currently active match. + */ + activeMatchBorder?: string; + + /** + * The overview ruler color of the currently active match. + */ + activeMatchColorOverviewRuler: string; } /** diff --git a/demo/client.ts b/demo/client.ts index 830a44a042..55ff8d62d1 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -109,7 +109,14 @@ function getSearchOptions(e: KeyboardEvent): ISearchOptions { wholeWord: (document.getElementById('whole-word') as HTMLInputElement).checked, caseSensitive: (document.getElementById('case-sensitive') as HTMLInputElement).checked, incremental: e.key !== `Enter`, - decorations: (document.getElementById('highlight-all-matches') as HTMLInputElement).checked ? { matchColor: '#555753', selectedColor: '#ef2929' } : undefined + decorations: (document.getElementById('highlight-all-matches') as HTMLInputElement).checked ? { + matchBackground: '#55575380', + matchBorder: '#555753', + matchOverviewRuler: '#555753', + activeMatchBackground: '#ef292980', + activeMatchBorder: '#ef2929', + activeMatchColorOverviewRuler: '#ef2929' + } : undefined }; }