Skip to content

Commit be83e99

Browse files
YoyokrazyYoyokrazy
authored
drop shadow css + sticky line model + click sticky to focus cell (microsoft#188545)
* add model tracking currently rendered nb sticky lines * drop shadow css + sticky line model + click sticky to focus cell
1 parent fd1ddc6 commit be83e99

File tree

9 files changed

+143
-51
lines changed

9 files changed

+143
-51
lines changed

‎src/vs/workbench/contrib/notebook/browser/diff/notebookDiffEditor.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
368368
// output is already gone
369369
removedItems.push(key);
370370
} else {
371-
const cellTop = this._list.getAbsoluteTopOfElement(value.cellInfo.diffElement);
371+
const cellTop = this._list.getCellViewScrollTop(value.cellInfo.diffElement);
372372
const outputIndex = cell.outputsViewModels.indexOf(key);
373373
const outputOffset = value.cellInfo.diffElement.getOutputOffsetInCell(diffSide, outputIndex);
374374
updateItems.push({
@@ -872,10 +872,10 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
872872
}
873873

874874
if (!activeWebview.insetMapping.has(output.source)) {
875-
const cellTop = this._list.getAbsoluteTopOfElement(cellDiffViewModel);
875+
const cellTop = this._list.getCellViewScrollTop(cellDiffViewModel);
876876
await activeWebview.createOutput({ diffElement: cellDiffViewModel, cellHandle: cellViewModel.handle, cellId: cellViewModel.id, cellUri: cellViewModel.uri }, output, cellTop, getOffset());
877877
} else {
878-
const cellTop = this._list.getAbsoluteTopOfElement(cellDiffViewModel);
878+
const cellTop = this._list.getCellViewScrollTop(cellDiffViewModel);
879879
const outputIndex = cellViewModel.outputsViewModels.indexOf(output.source);
880880
const outputOffset = cellDiffViewModel.getOutputOffsetInCell(diffSide, outputIndex);
881881
activeWebview.updateScrollTops([{
@@ -927,7 +927,7 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
927927
return;
928928
}
929929

930-
const cellTop = this._list.getAbsoluteTopOfElement(cellDiffViewModel);
930+
const cellTop = this._list.getCellViewScrollTop(cellDiffViewModel);
931931
const outputIndex = cellViewModel.outputsViewModels.indexOf(displayOutput);
932932
const outputOffset = cellDiffViewModel.getOutputOffsetInCell(diffSide, outputIndex);
933933
activeWebview.updateScrollTops([{

‎src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ export class NotebookTextDiffList extends WorkbenchList<DiffElementViewModelBase
322322
return new NotebookMouseController(this);
323323
}
324324

325-
getAbsoluteTopOfElement(element: DiffElementViewModelBase): number {
325+
getCellViewScrollTop(element: DiffElementViewModelBase): number {
326326
const index = this.indexOf(element);
327327
// if (index === undefined || index < 0 || index >= this.length) {
328328
// this._getViewIndexUpperBound(element);

‎src/vs/workbench/contrib/notebook/browser/media/notebookEditorStickyScroll.css

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
display: none;
88
position: absolute;
99
background-color: var(--vscode-notebook-editorBackground);
10-
border-bottom: solid 1px var(--vscode-notebook-cellToolbarSeparator);
11-
box-sizing: border-box;
1210
z-index: var(--z-index-notebook-sticky-scroll);
1311
width: 100%;
1412
font-family: var(--notebook-cell-input-preview-font-family);
@@ -27,3 +25,15 @@
2725
background-color: var(--vscode-editorStickyScrollHover-background);
2826
cursor: pointer;
2927
}
28+
29+
.monaco-workbench
30+
.notebookOverlay
31+
.notebook-sticky-scroll-container
32+
.notebook-shadow {
33+
display: block;
34+
top: 0;
35+
left: 3px;
36+
height: 3px;
37+
width: 100%;
38+
box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
39+
}

‎src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -566,6 +566,11 @@ export interface INotebookEditor {
566566
*/
567567
removeClassName(className: string): void;
568568

569+
/**
570+
* Set scrollTop value of the notebook editor.
571+
*/
572+
setScrollTop(scrollTop: number): void;
573+
569574
/**
570575
* The range will be revealed with as little scrolling as possible.
571576
*/

‎src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ import { INotebookLoggingService } from 'vs/workbench/contrib/notebook/common/no
9494
import { Schemas } from 'vs/base/common/network';
9595
import { DropIntoEditorController } from 'vs/editor/contrib/dropOrPasteInto/browser/dropIntoEditorController';
9696
import { CopyPasteController } from 'vs/editor/contrib/dropOrPasteInto/browser/copyPasteController';
97-
import { NotebookEditorStickyScroll } from 'vs/workbench/contrib/notebook/browser/viewParts/notebookEditorStickyScroll';
97+
import { NotebookStickyScroll } from 'vs/workbench/contrib/notebook/browser/viewParts/notebookEditorStickyScroll';
9898
import { NotebookCellOutlineProvider } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookOutlineProvider';
9999
import { AccessibilityVerbositySettingId } from 'vs/workbench/contrib/accessibility/browser/accessibilityContribution';
100100
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -1046,7 +1046,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
10461046
}
10471047

10481048
private _registerNotebookStickyScroll() {
1049-
this._register(this.instantiationService.createInstance(NotebookEditorStickyScroll, this._notebookStickyScrollContainer, this, this._notebookOutline, this._list));
1049+
this._register(this.instantiationService.createInstance(NotebookStickyScroll, this._notebookStickyScrollContainer, this, this._notebookOutline, this._list));
10501050
}
10511051

10521052
private _updateOutputRenderers() {
@@ -2038,13 +2038,17 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
20382038
}
20392039

20402040
getAbsoluteTopOfElement(cell: ICellViewModel) {
2041-
return this._list.getAbsoluteTopOfElement(cell);
2041+
return this._list.getCellViewScrollTop(cell);
20422042
}
20432043

20442044
scrollToBottom() {
20452045
this._list.scrollToBottom();
20462046
}
20472047

2048+
setScrollTop(scrollTop: number): void {
2049+
this._list.scrollTop = scrollTop;
2050+
}
2051+
20482052
revealCellRangeInView(range: ICellRange) {
20492053
return this._list.revealCellsInView(range);
20502054
}
@@ -2629,7 +2633,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
26292633
const webviewTop = parseInt(this._list.webviewElement.domNode.style.top, 10);
26302634
const top = !!webviewTop ? (0 - webviewTop) : 0;
26312635

2632-
const cellTop = this._list.getAbsoluteTopOfElement(cell);
2636+
const cellTop = this._list.getCellViewScrollTop(cell);
26332637
await this._webview.showMarkupPreview({
26342638
mime: cell.mime,
26352639
cellHandle: cell.handle,
@@ -2723,7 +2727,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
27232727
const webviewTop = parseInt(this._list.webviewElement.domNode.style.top, 10);
27242728
const top = !!webviewTop ? (0 - webviewTop) : 0;
27252729

2726-
const cellTop = this._list.getAbsoluteTopOfElement(cell) + top;
2730+
const cellTop = this._list.getCellViewScrollTop(cell) + top;
27272731

27282732
const existingOutput = this._webview.insetMapping.get(output.source);
27292733
if (!existingOutput
@@ -2781,7 +2785,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
27812785
const webviewTop = parseInt(this._list.webviewElement.domNode.style.top, 10);
27822786
const top = !!webviewTop ? (0 - webviewTop) : 0;
27832787

2784-
const cellTop = this._list.getAbsoluteTopOfElement(cell) + top;
2788+
const cellTop = this._list.getCellViewScrollTop(cell) + top;
27852789
this._webview.updateOutput({ cellId: cell.id, cellHandle: cell.handle, cellUri: cell.uri }, output, cellTop, offset);
27862790
});
27872791
}
@@ -2889,7 +2893,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
28892893
removedItems.push(key);
28902894
}
28912895

2892-
const cellTop = this._list.getAbsoluteTopOfElement(cell);
2896+
const cellTop = this._list.getCellViewScrollTop(cell);
28932897
const outputIndex = cell.outputsViewModels.indexOf(key);
28942898
const outputOffset = cell.getOutputOffset(outputIndex);
28952899
updateItems.push({
@@ -2907,7 +2911,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
29072911
for (const cellId of this._webview.markupPreviewMapping.keys()) {
29082912
const cell = this.viewModel?.viewCells.find(cell => cell.id === cellId);
29092913
if (cell) {
2910-
const cellTop = this._list.getAbsoluteTopOfElement(cell);
2914+
const cellTop = this._list.getCellViewScrollTop(cell);
29112915
// markdownUpdateItems.push({ id: cellId, top: cellTop });
29122916
markdownUpdateItems.push({ id: cellId, top: cellTop + top });
29132917
}

‎src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDnd.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export class CellDragAndDropController extends Disposable {
140140
return undefined;
141141
}
142142

143-
const cellTop = this.list.getAbsoluteTopOfElement(draggedOverCell);
143+
const cellTop = this.list.getCellViewScrollTop(draggedOverCell);
144144
const cellHeight = this.list.elementHeight(draggedOverCell);
145145

146146
const dragPosInElement = dragOffset - cellTop;
@@ -228,7 +228,7 @@ export class CellDragAndDropController extends Disposable {
228228
}
229229

230230
private _dropImpl(draggedCell: ICellViewModel, dropDirection: 'above' | 'below', ctx: { ctrlKey: boolean; altKey: boolean }, draggedOverCell: ICellViewModel) {
231-
const cellTop = this.list.getAbsoluteTopOfElement(draggedOverCell);
231+
const cellTop = this.list.getCellViewScrollTop(draggedOverCell);
232232
const cellHeight = this.list.elementHeight(draggedOverCell);
233233
const insertionIndicatorAbsolutePos = dropDirection === 'above' ? cellTop : cellTop + cellHeight;
234234
const { bottomToolbarGap } = this.notebookEditor.notebookOptions.computeBottomToolbarDimensions(this.notebookEditor.textModel?.viewType);
@@ -358,7 +358,7 @@ export class CellDragAndDropController extends Disposable {
358358

359359
const target = this.list.elementAt(dragOffsetY);
360360
if (target && target !== cell) {
361-
const cellTop = this.list.getAbsoluteTopOfElement(target);
361+
const cellTop = this.list.getCellViewScrollTop(target);
362362
const cellHeight = this.list.elementHeight(target);
363363

364364
const dropDirection = this.getExplicitDragDropDirection(dragOffsetY, cellTop, cellHeight);
@@ -400,7 +400,7 @@ export class CellDragAndDropController extends Disposable {
400400
return;
401401
}
402402

403-
const cellTop = this.list.getAbsoluteTopOfElement(target);
403+
const cellTop = this.list.getCellViewScrollTop(target);
404404
const cellHeight = this.list.elementHeight(target);
405405
const dropDirection = this.getExplicitDragDropDirection(ctx.dragOffsetY, cellTop, cellHeight);
406406
this._dropImpl(cell, dropDirection, ctx, target);

‎src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1131,16 +1131,6 @@ export class NotebookCellList extends WorkbenchList<CellViewModel> implements ID
11311131
this.view.domNode.focus();
11321132
}
11331133

1134-
getAbsoluteTopOfElement(element: ICellViewModel): number {
1135-
const index = this._getViewIndexUpperBound(element);
1136-
if (index === undefined || index < 0 || index >= this.length) {
1137-
this._getViewIndexUpperBound(element);
1138-
throw new ListError(this.listUser, `Invalid index ${index}`);
1139-
}
1140-
1141-
return this.view.elementTop(index);
1142-
}
1143-
11441134
triggerScrollFromMouseWheelEvent(browserEvent: IMouseWheelEvent) {
11451135
this.view.delegateScrollFromMouseWheelEvent(browserEvent);
11461136
}

‎src/vs/workbench/contrib/notebook/browser/view/notebookRenderingCommon.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ export interface INotebookCellList {
7474
setHiddenAreas(_ranges: ICellRange[], triggerViewUpdate: boolean): boolean;
7575
domElementOfElement(element: ICellViewModel): HTMLElement | null;
7676
focusView(): void;
77-
getAbsoluteTopOfElement(element: ICellViewModel): number;
7877
triggerScrollFromMouseWheelEvent(browserEvent: IMouseWheelEvent): void;
7978
updateElementHeight2(element: ICellViewModel, size: number, anchorElementIndex?: number | null): void;
8079
domFocus(): void;

0 commit comments

Comments
 (0)