Skip to content

Commit

Permalink
Sticky scroll should not cover scrollbar and minimap (fixes #156570) (#…
Browse files Browse the repository at this point in the history 
…156869)

* Sticks namespace {} to the sticky scroll widget too. Fixes #156611.

* No longer need the verification model.getLineContent(start) !== '' with the latest changes. Fixes #156616.

* Set the width of the sticky scroll so the widget is not over the minimap. Works on resize too. Only for minimap placed on the right.

* Sticky scroll should not take into account the vertical scrollbar (takes into account the minimap side as well). Fixes #156570.
  • Loading branch information
Aiday Marlen Kyzy authored Aug 2, 2022
1 parent fded572 commit 35ab686
Showing 1 changed file with 30 additions and 6 deletions.
36 changes: 30 additions & 6 deletions src/vs/editor/contrib/stickyScroll/browser/stickyScroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,18 @@ class StickyScrollController extends Disposable implements IEditorContribution {
this._sessionStore.add(this._editor.onDidScrollChange(() => this._update(false)));
this._sessionStore.add(this._editor.onDidChangeHiddenAreas(() => this._update(true)));
this._sessionStore.add(this._editor.onDidChangeModelTokens((e) => this._onTokensChange(e)));
this._sessionStore.add(this._editor.onDidLayoutChange(() => this._onDidResize()));
this._sessionStore.add(this._editor.onDidChangeModelContent(() => this._updateSoon.schedule()));
this._sessionStore.add(this._languageFeaturesService.documentSymbolProvider.onDidChange(() => this._update(true)));
this._update(true);
}
}

private _onDidResize() {
const width = this._editor.getLayoutInfo().width - this._editor.getLayoutInfo().minimap.minimapCanvasOuterWidth - this._editor.getLayoutInfo().verticalScrollbarWidth;
this.stickyScrollWidget.getDomNode().style.width = width + 'px';
}

private _needsUpdate(event: IModelTokensChangedEvent) {
const stickyLineNumbers = this.stickyScrollWidget.getCurrentLines();
for (const stickyLineNumber of stickyLineNumbers) {
Expand Down Expand Up @@ -199,7 +205,7 @@ class StickyScrollController extends Disposable implements IEditorContribution {

for (const [index, arr] of this._ranges.entries()) {
const [start, end, depth] = arr;
if (end - start > 0 && model.getLineContent(start) !== '') {
if (end - start > 0) {
const topOfElementAtDepth = (depth - 1) * lineHeight;
const bottomOfElementAtDepth = depth * lineHeight;

Expand Down Expand Up @@ -252,6 +258,8 @@ class StickyScrollCodeLine {
const viewModel = this._editor._getViewModel();
const viewLineNumber = viewModel.coordinatesConverter.convertModelPositionToViewPosition(new Position(this._lineNumber, 1)).lineNumber;
const lineRenderingData = viewModel.getViewLineRenderingData(viewLineNumber);
const width = this._editor.getLayoutInfo().width - this._editor.getLayoutInfo().minimap.minimapCanvasOuterWidth - this._editor.getLayoutInfo().verticalScrollbarWidth;
const minimapSide = this._editor.getOption(EditorOption.minimap).side;

let actualInlineDecorations: LineDecoration[];
try {
Expand Down Expand Up @@ -283,15 +291,23 @@ class StickyScrollCodeLine {
lineHTMLNode.innerHTML = newLine as string;

const lineNumberHTMLNode = document.createElement('span');
lineNumberHTMLNode.style.width = this._editor.getLayoutInfo().contentLeft.toString() + 'px';
if (minimapSide === 'left') {
lineNumberHTMLNode.style.width = this._editor.getLayoutInfo().contentLeft - this._editor.getLayoutInfo().minimap.minimapCanvasOuterWidth + 'px';
} else if (minimapSide === 'right') {
lineNumberHTMLNode.style.width = this._editor.getLayoutInfo().contentLeft.toString() + 'px';
}
lineNumberHTMLNode.style.backgroundColor = `var(--vscode-editorStickyScroll-background)`;
lineNumberHTMLNode.style.color = 'var(--vscode-editorLineNumber-foreground)';
lineNumberHTMLNode.style.display = 'inline-block';
lineNumberHTMLNode.style.lineHeight = this._editor.getOption(EditorOption.lineHeight).toString() + 'px';

const innerLineNumberHTML = document.createElement('span');
innerLineNumberHTML.innerText = this._lineNumber.toString();
innerLineNumberHTML.style.paddingLeft = this._editor.getLayoutInfo().lineNumbersLeft.toString() + 'px';
if (minimapSide === 'left') {
innerLineNumberHTML.style.paddingLeft = this._editor.getLayoutInfo().lineNumbersLeft - this._editor.getLayoutInfo().minimap.minimapCanvasOuterWidth + 'px';
} else if (minimapSide === 'right') {
innerLineNumberHTML.style.paddingLeft = this._editor.getLayoutInfo().lineNumbersLeft.toString() + 'px';
}
innerLineNumberHTML.style.width = this._editor.getLayoutInfo().lineNumbersWidth.toString() + 'px';
innerLineNumberHTML.style.backgroundColor = `var(--vscode-editorStickyScroll-background)`;
innerLineNumberHTML.style.textAlign = 'right';
Expand Down Expand Up @@ -332,15 +348,15 @@ class StickyScrollCodeLine {
root.style.backgroundColor = `var(--vscode-editorStickyScroll-background)`;
root.style.overflow = 'hidden';
root.style.whiteSpace = 'nowrap';
root.style.width = '100%';
root.style.width = width + 'px';
root.style.lineHeight = this._editor.getOption(EditorOption.lineHeight).toString() + 'px';
root.style.height = this._editor.getOption(EditorOption.lineHeight).toString() + 'px';

// Special case for last line of sticky scroll
if (this._relativePosition) {
root.style.position = 'relative';
root.style.top = this._relativePosition + 'px';
root.style.width = '100%';
root.style.width = width + 'px';
}
return root;
}
Expand All @@ -353,8 +369,10 @@ class StickyScrollWidget implements IOverlayWidget {

constructor(public readonly _editor: ICodeEditor) {
this.rootDomNode = document.createElement('div');
this.rootDomNode.style.width = '100%';
const width = this._editor.getLayoutInfo().width - this._editor.getLayoutInfo().minimap.minimapCanvasOuterWidth - this._editor.getLayoutInfo().verticalScrollbarWidth;
this.rootDomNode.style.width = width + 'px';
this.rootDomNode.style.boxShadow = `var(--vscode-scrollbar-shadow) 0 6px 6px -6px`;
this.rootDomNode.style.overflow = 'hidden';
}

get codeLineCount() {
Expand Down Expand Up @@ -394,6 +412,12 @@ class StickyScrollWidget implements IOverlayWidget {
getDomNode(): HTMLElement {
this.rootDomNode.style.zIndex = '2';
this.rootDomNode.style.backgroundColor = `var(--vscode-editorStickyScroll-background)`;
const minimapSide = this._editor.getOption(EditorOption.minimap).side;
if (minimapSide === 'left') {
this.rootDomNode.style.marginLeft = this._editor.getLayoutInfo().minimap.minimapCanvasOuterWidth + 'px';
} else if (minimapSide === 'right') {
this.rootDomNode.style.marginLeft = '0px';
}
return this.rootDomNode;
}

Expand Down

0 comments on commit 35ab686

Please sign in to comment.