Minimap: Render find match decorations, fixes #75216

src/vs/editor/browser/viewParts/minimap/minimap.ts

@@ -23,9 +23,10 @@ import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/common/v
 import { getOrCreateMinimapCharRenderer } from 'vs/editor/common/view/runtimeMinimapCharRenderer';
 import { ViewContext } from 'vs/editor/common/view/viewContext';
 import * as viewEvents from 'vs/editor/common/view/viewEvents';
-import { ViewLineData } from 'vs/editor/common/viewModel/viewModel';
+import { ViewLineData, ViewModelDecoration } from 'vs/editor/common/viewModel/viewModel';
 import { scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { ModelDecorationMinimapOptions } from 'vs/editor/common/model/textModel';
 
 function getMinimapLineHeight(renderMinimap: RenderMinimap): number {
 	if (renderMinimap === RenderMinimap.Large) {
@@ -335,10 +336,7 @@ class RenderData {
 	 * Check if the current RenderData matches accurately the new desired layout and no painting is needed.
 	 */
 	public linesEquals(layout: MinimapLayout): boolean {
-		if (this.renderedLayout.startLineNumber !== layout.startLineNumber) {
-			return false;
-		}
-		if (this.renderedLayout.endLineNumber !== layout.endLineNumber) {
+		if (!this.scrollEquals(layout)) {
 			return false;
 		}
 
@@ -354,6 +352,14 @@ class RenderData {
 		return true;
 	}
 
+	/**
+	 * Check if the current RenderData matches the new layout's scroll position
+	 */
+	public scrollEquals(layout: MinimapLayout): boolean {
+		return this.renderedLayout.startLineNumber === layout.startLineNumber
+			&& this.renderedLayout.endLineNumber === layout.endLineNumber;
+	}
+
 	_get(): { imageData: ImageData; rendLineNumberStart: number; lines: MinimapLine[]; } {
 		const tmp = this._renderedLines._get();
 		return {
@@ -435,6 +441,7 @@ export class Minimap extends ViewPart {
 	private readonly _domNode: FastDomNode<HTMLElement>;
 	private readonly _shadow: FastDomNode<HTMLElement>;
 	private readonly _canvas: FastDomNode<HTMLCanvasElement>;
+	private readonly _decorationsCanvas: FastDomNode<HTMLCanvasElement>;
 	private readonly _slider: FastDomNode<HTMLElement>;
 	private readonly _sliderHorizontal: FastDomNode<HTMLElement>;
 	private readonly _tokensColorTracker: MinimapTokensColorTracker;
@@ -444,6 +451,7 @@ export class Minimap extends ViewPart {
 
 	private _options: MinimapOptions;
 	private _lastRenderData: RenderData | null;
+	private _decorationsChanged: boolean = false;
 	private _buffers: MinimapBuffers | null;
 
 	constructor(context: ViewContext) {
@@ -469,6 +477,12 @@ export class Minimap extends ViewPart {
 		this._canvas.setLeft(0);
 		this._domNode.appendChild(this._canvas);
 
+		this._decorationsCanvas = createFastDomNode(document.createElement('canvas'));
+		this._decorationsCanvas.setPosition('absolute');
+		this._decorationsCanvas.setClassName('minimap-decorations-layer');
+		this._decorationsCanvas.setLeft(0);
+		this._domNode.appendChild(this._decorationsCanvas);
+
 		this._slider = createFastDomNode(document.createElement('div'));
 		this._slider.setPosition('absolute');
 		this._slider.setClassName('minimap-slider');
@@ -569,10 +583,17 @@ export class Minimap extends ViewPart {
 		this._domNode.setWidth(this._options.minimapWidth);
 		this._domNode.setHeight(this._options.minimapHeight);
 		this._shadow.setHeight(this._options.minimapHeight);
+
 		this._canvas.setWidth(this._options.canvasOuterWidth);
 		this._canvas.setHeight(this._options.canvasOuterHeight);
 		this._canvas.domNode.width = this._options.canvasInnerWidth;
 		this._canvas.domNode.height = this._options.canvasInnerHeight;
+
+		this._decorationsCanvas.setWidth(this._options.canvasOuterWidth);
+		this._decorationsCanvas.setHeight(this._options.canvasOuterHeight);
+		this._decorationsCanvas.domNode.width = this._options.canvasInnerWidth;
+		this._decorationsCanvas.domNode.height = this._options.canvasInnerHeight;
+
 		this._slider.setWidth(this._options.minimapWidth);
 	}
 
@@ -647,6 +668,11 @@ export class Minimap extends ViewPart {
 		return true;
 	}
 
+	public onDecorationsChanged(e: viewEvents.ViewDecorationsChangedEvent): boolean {
+		this._decorationsChanged = true;
+		return true;
+	}
+
 	// --- end event handlers
 
 	public prepareRender(ctx: RenderingContext): void {
@@ -689,9 +715,78 @@ export class Minimap extends ViewPart {
 		this._sliderHorizontal.setTop(0);
 		this._sliderHorizontal.setHeight(layout.sliderHeight);
 
+		this.renderDecorations(layout);
 		this._lastRenderData = this.renderLines(layout);
 	}
 
+	private renderDecorations(layout: MinimapLayout) {
+		const scrollHasChanged = this._lastRenderData && !this._lastRenderData.scrollEquals(layout);
+		if (scrollHasChanged || this._decorationsChanged) {
+			this._decorationsChanged = false;
+			const decorations = this._context.model.getDecorationsInViewport(new Range(layout.startLineNumber, 1, layout.endLineNumber, this._context.model.getLineMaxColumn(layout.endLineNumber)));
+
+			const { renderMinimap, canvasInnerWidth, canvasInnerHeight } = this._options;
+			const lineHeight = getMinimapLineHeight(renderMinimap);
+			const characterWidth = getMinimapCharWidth(renderMinimap);
+			const tabSize = this._context.model.getOptions().tabSize;
+			const canvasContext = this._decorationsCanvas.domNode.getContext('2d')!;
+
+			canvasContext.clearRect(0, 0, canvasInnerWidth, canvasInnerHeight);
+
+			// If the minimap is rendered using blocks, text takes up half the line height
+			const lineHeightRatio = renderMinimap === RenderMinimap.LargeBlocks || renderMinimap === RenderMinimap.SmallBlocks ? 0.5 : 1;
+			const height = lineHeight * lineHeightRatio;
+
+			for (let i = 0; i < decorations.length; i++) {
+				if (decorations[i].options.minimap) {
+					this.renderDecoration(canvasContext, decorations[i], layout, height, lineHeight, tabSize, characterWidth);
+				}
+			}
+		}
+	}
+
+	private renderDecoration(canvasContext: CanvasRenderingContext2D,
+		decoration: ViewModelDecoration,
+		layout: MinimapLayout,
+		height: number,
+		lineHeight: number,
+		tabSize: number,
+		charWidth: number) {
+		const { startLineNumber, startColumn, endColumn } = decoration.range;
+
+		const startIndex = startColumn - 1;
+		const endIndex = endColumn - 1;
+
+		const y = (startLineNumber - layout.startLineNumber) * lineHeight;
+
+		// Get the offset of the decoration in the line. Have to read line data to see how much space each character takes.
+		let x = 0;
+		let endPosition = 0;
+		const lineData = this._context.model.getLineContent(startLineNumber);
+		for (let i = 0; i < endIndex; i++) {
+			const charCode = lineData.charCodeAt(i);
+			const dx = charCode === CharCode.Tab
+				? tabSize * charWidth
+				: strings.isFullWidthCharacter(charCode)
+					? 2 * charWidth
+					: charWidth;
+
+			if (i < startIndex) {
+				x += dx;
+			}
+
+			endPosition += dx;
+		}
+
+		const width = endPosition - x;
+
+		const minimapOptions = <ModelDecorationMinimapOptions>decoration.options.minimap;
+		const decorationColor = minimapOptions.getColor(this._context.theme);
+
+		canvasContext.fillStyle = decorationColor;
+		canvasContext.fillRect(x, y, width, height);
+	}
+
 	private renderLines(layout: MinimapLayout): RenderData {
 		const renderMinimap = this._options.renderMinimap;
 		const startLineNumber = layout.startLineNumber;

src/vs/editor/common/model.ts

@@ -26,25 +26,45 @@ export enum OverviewRulerLane {
 }
 
 /**
- * Options for rendering a model decoration in the overview ruler.
+ * Position in the minimap to render the decoration.
  */
-export interface IModelDecorationOverviewRulerOptions {
+export enum MinimapPosition {
+	Inline = 1
+}
+
+export interface IDecorationOptions {
 	/**
-	 * CSS color to render in the overview ruler.
+	 * CSS color to render.
 	 * e.g.: rgba(100, 100, 100, 0.5) or a color from the color registry
 	 */
 	color: string | ThemeColor | undefined;
 	/**
-	 * CSS color to render in the overview ruler.
+	 * CSS color to render.
 	 * e.g.: rgba(100, 100, 100, 0.5) or a color from the color registry
 	 */
 	darkColor?: string | ThemeColor;
+}
+
+/**
+ * Options for rendering a model decoration in the overview ruler.
+ */
+export interface IModelDecorationOverviewRulerOptions extends IDecorationOptions {
 	/**
 	 * The position in the overview ruler.
 	 */
 	position: OverviewRulerLane;
 }
 
+/**
+ * Options for rendering a model decoration in the overview ruler.
+ */
+export interface IModelDecorationMinimapOptions extends IDecorationOptions {
+	/**
+	 * The position in the overview ruler.
+	 */
+	position: MinimapPosition;
+}
+
 /**
  * Options for a model decoration.
  */
@@ -89,6 +109,10 @@ export interface IModelDecorationOptions {
 	 * If set, render this decoration in the overview ruler.
 	 */
 	overviewRuler?: IModelDecorationOverviewRulerOptions | null;
+	/**
+	 * If set, render this decoration in the minimap.
+	 */
+	minimap?: IModelDecorationMinimapOptions | null;
 	/**
 	 * If set, the decoration will be rendered in the glyph margin with this CSS class name.
 	 */

src/vs/editor/common/model/textModel.ts

@@ -2823,16 +2823,14 @@ function cleanClassName(className: string): string {
 	return className.replace(/[^a-z0-9\-_]/gi, ' ');
 }
 
-export class ModelDecorationOverviewRulerOptions implements model.IModelDecorationOverviewRulerOptions {
+class DecorationOptions implements model.IDecorationOptions {
 	readonly color: string | ThemeColor;
 	readonly darkColor: string | ThemeColor;
-	readonly position: model.OverviewRulerLane;
 	private _resolvedColor: string | null;
 
-	constructor(options: model.IModelDecorationOverviewRulerOptions) {
+	constructor(options: model.IDecorationOptions) {
 		this.color = options.color || strings.empty;
 		this.darkColor = options.darkColor || strings.empty;
-		this.position = (typeof options.position === 'number' ? options.position : model.OverviewRulerLane.Center);
 		this._resolvedColor = null;
 	}
 
@@ -2863,6 +2861,24 @@ export class ModelDecorationOverviewRulerOptions implements model.IModelDecorati
 	}
 }
 
+export class ModelDecorationOverviewRulerOptions extends DecorationOptions {
+	readonly position: model.OverviewRulerLane;
+
+	constructor(options: model.IModelDecorationOverviewRulerOptions) {
+		super(options);
+		this.position = (typeof options.position === 'number' ? options.position : model.OverviewRulerLane.Center);
+	}
+}
+
+export class ModelDecorationMinimapOptions extends DecorationOptions {
+	readonly position: model.MinimapPosition;
+
+	constructor(options: model.IModelDecorationMinimapOptions) {
+		super(options);
+		this.position = options.position;
+	}
+}
+
 export class ModelDecorationOptions implements model.IModelDecorationOptions {
 
 	public static EMPTY: ModelDecorationOptions;
@@ -2884,6 +2900,7 @@ export class ModelDecorationOptions implements model.IModelDecorationOptions {
 	readonly showIfCollapsed: boolean;
 	readonly collapseOnReplaceEdit: boolean;
 	readonly overviewRuler: ModelDecorationOverviewRulerOptions | null;
+	readonly minimap: ModelDecorationMinimapOptions | null;
 	readonly glyphMarginClassName: string | null;
 	readonly linesDecorationsClassName: string | null;
 	readonly marginClassName: string | null;
@@ -2902,6 +2919,7 @@ export class ModelDecorationOptions implements model.IModelDecorationOptions {
 		this.showIfCollapsed = options.showIfCollapsed || false;
 		this.collapseOnReplaceEdit = options.collapseOnReplaceEdit || false;
 		this.overviewRuler = options.overviewRuler ? new ModelDecorationOverviewRulerOptions(options.overviewRuler) : null;
+		this.minimap = options.minimap ? new ModelDecorationMinimapOptions(options.minimap) : null;
 		this.glyphMarginClassName = options.glyphMarginClassName ? cleanClassName(options.glyphMarginClassName) : null;
 		this.linesDecorationsClassName = options.linesDecorationsClassName ? cleanClassName(options.linesDecorationsClassName) : null;
 		this.marginClassName = options.marginClassName ? cleanClassName(options.marginClassName) : null;

src/vs/editor/common/standalone/standaloneEnums.ts

@@ -228,6 +228,13 @@ export enum OverviewRulerLane {
 	Full = 7
 }
 
+/**
+ * Position in the minimap to render the decoration.
+ */
+export enum MinimapPosition {
+	Inline = 1
+}
+
 /**
  * End of line character preference.
  */

src/vs/editor/contrib/find/findDecorations.ts

@@ -7,7 +7,7 @@ import { IDisposable } from 'vs/base/common/lifecycle';
 import { IActiveCodeEditor } from 'vs/editor/browser/editorBrowser';
 import { Position } from 'vs/editor/common/core/position';
 import { Range } from 'vs/editor/common/core/range';
-import { FindMatch, IModelDecorationsChangeAccessor, IModelDeltaDecoration, OverviewRulerLane, TrackedRangeStickiness } from 'vs/editor/common/model';
+import { FindMatch, IModelDecorationsChangeAccessor, IModelDeltaDecoration, OverviewRulerLane, TrackedRangeStickiness, MinimapPosition } from 'vs/editor/common/model';
 import { ModelDecorationOptions } from 'vs/editor/common/model/textModel';
 import { overviewRulerFindMatchForeground } from 'vs/platform/theme/common/colorRegistry';
 import { themeColorFromId } from 'vs/platform/theme/common/themeService';
@@ -269,6 +269,10 @@ export class FindDecorations implements IDisposable {
 		overviewRuler: {
 			color: themeColorFromId(overviewRulerFindMatchForeground),
 			position: OverviewRulerLane.Center
+		},
+		minimap: {
+			color: themeColorFromId(overviewRulerFindMatchForeground),
+			position: MinimapPosition.Inline
 		}
 	});
 
@@ -279,6 +283,10 @@ export class FindDecorations implements IDisposable {
 		overviewRuler: {
 			color: themeColorFromId(overviewRulerFindMatchForeground),
 			position: OverviewRulerLane.Center
+		},
+		minimap: {
+			color: themeColorFromId(overviewRulerFindMatchForeground),
+			position: MinimapPosition.Inline
 		}
 	});
 

src/vs/editor/standalone/browser/standaloneEditor.ts

@@ -352,6 +352,7 @@ export function createMonacoEditorAPI(): typeof monaco.editor {
 		ScrollbarVisibility: standaloneEnums.ScrollbarVisibility,
 		WrappingIndent: standaloneEnums.WrappingIndent,
 		OverviewRulerLane: standaloneEnums.OverviewRulerLane,
+		MinimapPosition: standaloneEnums.MinimapPosition,
 		EndOfLinePreference: standaloneEnums.EndOfLinePreference,
 		DefaultEndOfLine: standaloneEnums.DefaultEndOfLine,
 		EndOfLineSequence: standaloneEnums.EndOfLineSequence,