Merge pull request microsoft#156562 from microsoft/alexd/sticky-scroll-improvements

Sticky Scroll Improvements

Author: Aiday Marlen Kyzy

src/vs/editor/browser/editorBrowser.ts

@@ -899,10 +899,15 @@ export interface ICodeEditor extends editorCommon.IEditor {
 	getWhitespaces(): IEditorWhitespace[];
 
 	/**
-	 * Get the vertical position (top offset) for the line w.r.t. to the first line.
+	 * Get the vertical position (top offset) for the line's top w.r.t. to the first line.
 	 */
 	getTopForLineNumber(lineNumber: number): number;
 
+	/**
+	 * Get the vertical position (top offset) for the line's bottom w.r.t. to the first line.
+	 */
+	getBottomForLineNumber(lineNumber: number): number;
+
 	/**
 	 * Get the vertical position (top offset) for the position w.r.t. to the first line.
 	 */

src/vs/editor/common/viewLayout/viewLinesViewportData.ts

@@ -70,7 +70,7 @@ export class ViewportData {
 	}
 
 	public getViewLineRenderingData(lineNumber: number): ViewLineRenderingData {
-		return this._model.getViewLineRenderingData(this.visibleRange, lineNumber);
+		return this._model.getViewportViewLineRenderingData(this.visibleRange, lineNumber);
 	}
 
 	public getDecorationsInViewport(): ViewModelDecoration[] {

src/vs/editor/common/viewModel.ts

@@ -41,7 +41,7 @@ export interface IViewModel extends ICursorSimpleModel {
 	onCompositionEnd(): void;
 
 	getDecorationsInViewport(visibleRange: Range): ViewModelDecoration[];
-	getViewLineRenderingData(visibleRange: Range, lineNumber: number): ViewLineRenderingData;
+	getViewportViewLineRenderingData(visibleRange: Range, lineNumber: number): ViewLineRenderingData;
 	getViewLineData(lineNumber: number): ViewLineData;
 	getMinimapLinesRenderingData(startLineNumber: number, endLineNumber: number, needed: boolean[]): MinimapLinesRenderingData;
 	getCompletelyVisibleViewRange(): Range;

src/vs/editor/common/viewModel/viewModelImpl.ts

@@ -679,7 +679,7 @@ export class ViewModel extends Disposable implements IViewModel {
 		return this._lines.getInjectedTextAt(viewPosition);
 	}
 
-	public getViewLineRenderingData(visibleRange: Range, lineNumber: number): ViewLineRenderingData {
+	public getViewportViewLineRenderingData(visibleRange: Range, lineNumber: number): ViewLineRenderingData {
 		const mightContainRTL = this.model.mightContainRTL();
 		const mightContainNonBasicASCII = this.model.mightContainNonBasicASCII();
 		const tabSize = this.getTabSize();

src/vs/editor/contrib/stickyScroll/browser/stickyScroll.ts

@@ -19,12 +19,6 @@ import { LineDecoration } from 'vs/editor/common/viewLayout/lineDecorations';
 import { RunOnceScheduler } from 'vs/base/common/async';
 import { IModelTokensChangedEvent } from 'vs/editor/common/textModelEvents';
 
-const enum ScrollDirection {
-	Down = 0,
-	Up = 1,
-	None = 2
-}
-
 class StickyScrollController extends Disposable implements IEditorContribution {
 
 	static readonly ID = 'store.contrib.stickyScrollController';
@@ -36,7 +30,6 @@ class StickyScrollController extends Disposable implements IEditorContribution {
 	private _ranges: [number, number, number][] = [];
 	private _rangesVersionId: number = 0;
 	private _cts: CancellationTokenSource | undefined;
-	private _lastScrollPosition: number = -1;
 	private readonly _updateSoon: RunOnceScheduler;
 
 	constructor(
@@ -191,42 +184,27 @@ class StickyScrollController extends Disposable implements IEditorContribution {
 			return;
 		}
 		const scrollTop = this._editor.getScrollTop();
-		let scrollDirection: ScrollDirection;
-		if (this._lastScrollPosition < scrollTop) {
-			scrollDirection = ScrollDirection.Down;
-		} else {
-			scrollDirection = ScrollDirection.Up;
-		}
-		this._lastScrollPosition = scrollTop;
 
-		const scrollToBottomOfWidget = this._editor.getScrollTop() + this.stickyScrollWidget.codeLineCount * lineHeight;
 		this.stickyScrollWidget.emptyRootNode();
 		const beginningLinesConsidered: Set<number> = new Set<number>();
-		let topOfElementAtDepth: number;
-		let bottomOfElementAtDepth: number;
-		let bottomOfBeginningLine: number;
-		let topOfEndLine: number;
-		let bottomOfEndLine: number;
 
 		for (const [index, arr] of this._ranges.entries()) {
 			const [start, end, depth] = arr;
 			if (end - start > 0 && model.getLineContent(start) !== '') {
-				topOfElementAtDepth = this._editor.getScrollTop() + (depth - 1) * lineHeight;
-				bottomOfElementAtDepth = this._editor.getScrollTop() + depth * lineHeight;
-				bottomOfBeginningLine = start * lineHeight;
-				topOfEndLine = (end - 1) * lineHeight;
-				bottomOfEndLine = end * lineHeight;
+				const topOfElementAtDepth = (depth - 1) * lineHeight;
+				const bottomOfElementAtDepth = depth * lineHeight;
+
+				const bottomOfBeginningLine = this._editor.getBottomForLineNumber(start) - scrollTop;
+				const topOfEndLine = this._editor.getTopForLineNumber(end) - scrollTop;
+				const bottomOfEndLine = this._editor.getBottomForLineNumber(end) - scrollTop;
+
 				if (!beginningLinesConsidered.has(start)) {
 					if (topOfElementAtDepth >= topOfEndLine - 1 && topOfElementAtDepth < bottomOfEndLine - 2) {
 						beginningLinesConsidered.add(start);
 						this.stickyScrollWidget.pushCodeLine(new StickyScrollCodeLine(model.getLineContent(start), start, this._editor, -1, bottomOfEndLine - bottomOfElementAtDepth));
 						break;
 					}
-					else if (scrollDirection === ScrollDirection.Down && bottomOfElementAtDepth > bottomOfBeginningLine - 1 && bottomOfElementAtDepth < bottomOfEndLine - 1) {
-						beginningLinesConsidered.add(start);
-						this.stickyScrollWidget.pushCodeLine(new StickyScrollCodeLine(model.getLineContent(start), start, this._editor, 0, 0));
-					} else if (scrollDirection === ScrollDirection.Up && scrollToBottomOfWidget > bottomOfBeginningLine - 1 && scrollToBottomOfWidget < bottomOfEndLine ||
-						scrollDirection === ScrollDirection.Up && bottomOfElementAtDepth > bottomOfBeginningLine && bottomOfElementAtDepth < topOfEndLine - 1) {
+					else if (bottomOfElementAtDepth > bottomOfBeginningLine - 1 && bottomOfElementAtDepth < bottomOfEndLine - 1) {
 						beginningLinesConsidered.add(start);
 						this.stickyScrollWidget.pushCodeLine(new StickyScrollCodeLine(model.getLineContent(start), start, this._editor, 0, 0));
 					}
@@ -262,7 +240,7 @@ class StickyScrollCodeLine {
 	getDomNode() {
 
 		const root: HTMLElement = document.createElement('div');
-		const lineRenderingData = this._editor._getViewModel().getViewLineRenderingData(this._editor.getVisibleRangesPlusViewportAboveBelow()[0], this._lineNumber);
+		const lineRenderingData = this._editor._getViewModel().getViewportViewLineRenderingData(this._editor.getVisibleRangesPlusViewportAboveBelow()[0], this._lineNumber);
 
 		let actualInlineDecorations: LineDecoration[];
 		try {

src/vs/editor/test/browser/viewModel/viewModelDecorations.test.ts

@@ -97,7 +97,7 @@ suite('ViewModelDecorations', () => {
 				'dec14',
 			]);
 
-			const inlineDecorations1 = viewModel.getViewLineRenderingData(
+			const inlineDecorations1 = viewModel.getViewportViewLineRenderingData(
 				new Range(1, viewModel.getLineMinColumn(1), 2, viewModel.getLineMaxColumn(2)),
 				1
 			).inlineDecorations;
@@ -118,7 +118,7 @@ suite('ViewModelDecorations', () => {
 				new InlineDecoration(new Range(1, 2, 1, 2), 'b-dec5', InlineDecorationType.Before),
 			]);
 
-			const inlineDecorations2 = viewModel.getViewLineRenderingData(
+			const inlineDecorations2 = viewModel.getViewportViewLineRenderingData(
 				new Range(2, viewModel.getLineMinColumn(2), 3, viewModel.getLineMaxColumn(3)),
 				2
 			).inlineDecorations;
@@ -148,7 +148,7 @@ suite('ViewModelDecorations', () => {
 				new InlineDecoration(new Range(2, 3, 2, 3), 'b-dec12', InlineDecorationType.Before),
 			]);
 
-			const inlineDecorations3 = viewModel.getViewLineRenderingData(
+			const inlineDecorations3 = viewModel.getViewportViewLineRenderingData(
 				new Range(2, viewModel.getLineMinColumn(2), 3, viewModel.getLineMaxColumn(3)),
 				3
 			).inlineDecorations;
@@ -198,13 +198,13 @@ suite('ViewModelDecorations', () => {
 			).filter(x => Boolean(x.options.beforeContentClassName));
 			assert.deepStrictEqual(decorations, []);
 
-			const inlineDecorations1 = viewModel.getViewLineRenderingData(
+			const inlineDecorations1 = viewModel.getViewportViewLineRenderingData(
 				new Range(2, viewModel.getLineMinColumn(2), 3, viewModel.getLineMaxColumn(3)),
 				2
 			).inlineDecorations;
 			assert.deepStrictEqual(inlineDecorations1, []);
 
-			const inlineDecorations2 = viewModel.getViewLineRenderingData(
+			const inlineDecorations2 = viewModel.getViewportViewLineRenderingData(
 				new Range(2, viewModel.getLineMinColumn(2), 3, viewModel.getLineMaxColumn(3)),
 				3
 			).inlineDecorations;
@@ -229,7 +229,7 @@ suite('ViewModelDecorations', () => {
 				);
 			});
 
-			const inlineDecorations = viewModel.getViewLineRenderingData(
+			const inlineDecorations = viewModel.getViewportViewLineRenderingData(
 				new Range(1, 1, 1, 1),
 				1
 			).inlineDecorations;

src/vs/monaco.d.ts

@@ -5372,9 +5372,13 @@ declare namespace monaco.editor {
 		 */
 		getVisibleRanges(): Range[];
 		/**
-		 * Get the vertical position (top offset) for the line w.r.t. to the first line.
+		 * Get the vertical position (top offset) for the line's top w.r.t. to the first line.
 		 */
 		getTopForLineNumber(lineNumber: number): number;
+		/**
+		 * Get the vertical position (top offset) for the line's bottom w.r.t. to the first line.
+		 */
+		getBottomForLineNumber(lineNumber: number): number;
 		/**
 		 * Get the vertical position (top offset) for the position w.r.t. to the first line.
 		 */