@@ -23,6 +23,7 @@ import { CellRevealPosition, CellRevealType, CursorAtBoundary, getVisibleCells,
2323import { CellViewModel , NotebookViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookViewModel' ;
2424import { diff , IProcessedOutput , NOTEBOOK_EDITOR_CURSOR_BOUNDARY , CellKind } from 'vs/workbench/contrib/notebook/common/notebookCommon' ;
2525import { clamp } from 'vs/base/common/numbers' ;
26+ import { SCROLLABLE_ELEMENT_PADDING_TOP } from 'vs/workbench/contrib/notebook/browser/constants' ;
2627
2728export class NotebookCellList extends WorkbenchList < CellViewModel > implements IDisposable , IStyleController , INotebookCellList {
2829 get onWillScroll ( ) : Event < ScrollEvent > { return this . view . onWillScroll ; }
@@ -546,28 +547,35 @@ export class NotebookCellList extends WorkbenchList<CellViewModel> implements ID
546547 super . domFocus ( ) ;
547548 }
548549
550+ getViewScrollTop ( ) {
551+ return this . view . getScrollTop ( ) ;
552+ }
553+
554+ getViewScrollBottom ( ) {
555+ return this . getViewScrollTop ( ) + this . view . renderHeight - SCROLLABLE_ELEMENT_PADDING_TOP ;
556+ }
557+
549558 private _revealRange ( viewIndex : number , range : Range , revealType : CellRevealType , newlyCreated : boolean , alignToBottom : boolean ) {
550559 const element = this . view . element ( viewIndex ) ;
551- const scrollTop = this . view . getScrollTop ( ) ;
552- const wrapperBottom = scrollTop + this . view . renderHeight ;
553- const startLineNumber = range . startLineNumber ;
554- const lineOffset = element . getLineScrollTopOffset ( startLineNumber ) ;
560+ const scrollTop = this . getViewScrollTop ( ) ;
561+ const wrapperBottom = this . getViewScrollBottom ( ) ;
562+ const positionOffset = element . getPositionScrollTopOffset ( range . startLineNumber , range . startColumn ) ;
555563 const elementTop = this . view . elementTop ( viewIndex ) ;
556- const lineTop = elementTop + lineOffset ;
564+ const positionTop = elementTop + positionOffset ;
557565
558566 // TODO@rebornix 30 ---> line height * 1.5
559- if ( lineTop < scrollTop ) {
560- this . view . setScrollTop ( lineTop - 30 ) ;
561- } else if ( lineTop > wrapperBottom ) {
562- this . view . setScrollTop ( scrollTop + lineTop - wrapperBottom + 30 ) ;
567+ if ( positionTop < scrollTop ) {
568+ this . view . setScrollTop ( positionTop - 30 ) ;
569+ } else if ( positionTop > wrapperBottom ) {
570+ this . view . setScrollTop ( scrollTop + positionTop - wrapperBottom + 30 ) ;
563571 } else if ( newlyCreated ) {
564572 // newly scrolled into view
565573 if ( alignToBottom ) {
566574 // align to the bottom
567- this . view . setScrollTop ( scrollTop + lineTop - wrapperBottom + 30 ) ;
575+ this . view . setScrollTop ( scrollTop + positionTop - wrapperBottom + 30 ) ;
568576 } else {
569577 // align to to top
570- this . view . setScrollTop ( lineTop - 30 ) ;
578+ this . view . setScrollTop ( positionTop - 30 ) ;
571579 }
572580 }
573581
@@ -580,8 +588,8 @@ export class NotebookCellList extends WorkbenchList<CellViewModel> implements ID
580588 // For example, we scroll item 10 into the view upwards, in the first round, items 7, 8, 9, 10 are all in the viewport. Then item 7 and 8 resize themselves to be larger and finally item 10 is removed from the view.
581589 // To ensure that item 10 is always there, we need to scroll item 10 to the top edge of the viewport.
582590 private _revealRangeInternal ( viewIndex : number , range : Range , revealType : CellRevealType ) {
583- const scrollTop = this . view . getScrollTop ( ) ;
584- const wrapperBottom = scrollTop + this . view . renderHeight ;
591+ const scrollTop = this . getViewScrollTop ( ) ;
592+ const wrapperBottom = this . getViewScrollBottom ( ) ;
585593 const elementTop = this . view . elementTop ( viewIndex ) ;
586594 const element = this . view . element ( viewIndex ) ;
587595
@@ -624,9 +632,9 @@ export class NotebookCellList extends WorkbenchList<CellViewModel> implements ID
624632 private _revealRangeInCenterInternal ( viewIndex : number , range : Range , revealType : CellRevealType ) {
625633 const reveal = ( viewIndex : number , range : Range , revealType : CellRevealType ) => {
626634 const element = this . view . element ( viewIndex ) ;
627- let lineOffset = element . getLineScrollTopOffset ( range . startLineNumber ) ;
628- let lineOffsetInView = this . view . elementTop ( viewIndex ) + lineOffset ;
629- this . view . setScrollTop ( lineOffsetInView - this . view . renderHeight / 2 ) ;
635+ let positionOffset = element . getPositionScrollTopOffset ( range . startLineNumber , range . startColumn ) ;
636+ let positionOffsetInView = this . view . elementTop ( viewIndex ) + positionOffset ;
637+ this . view . setScrollTop ( positionOffsetInView - this . view . renderHeight / 2 ) ;
630638
631639 if ( revealType === CellRevealType . Range ) {
632640 element . revealRangeInCenter ( range ) ;
@@ -656,24 +664,25 @@ export class NotebookCellList extends WorkbenchList<CellViewModel> implements ID
656664 private _revealRangeInCenterIfOutsideViewportInternal ( viewIndex : number , range : Range , revealType : CellRevealType ) {
657665 const reveal = ( viewIndex : number , range : Range , revealType : CellRevealType ) => {
658666 const element = this . view . element ( viewIndex ) ;
659- let lineOffset = element . getLineScrollTopOffset ( range . startLineNumber ) ;
660- let lineOffsetInView = this . view . elementTop ( viewIndex ) + lineOffset ;
661- this . view . setScrollTop ( lineOffsetInView - this . view . renderHeight / 2 ) ;
667+ let positionOffset = element . getPositionScrollTopOffset ( range . startLineNumber , range . startColumn ) ;
668+ let positionOffsetInView = this . view . elementTop ( viewIndex ) + positionOffset ;
669+ this . view . setScrollTop ( positionOffsetInView - this . view . renderHeight / 2 ) ;
662670
663671 if ( revealType === CellRevealType . Range ) {
664672 element . revealRangeInCenter ( range ) ;
665673 }
666674 } ;
667675
668- const scrollTop = this . view . getScrollTop ( ) ;
669- const wrapperBottom = scrollTop + this . view . renderHeight ;
676+ const scrollTop = this . getViewScrollTop ( ) ;
677+ const wrapperBottom = this . getViewScrollBottom ( ) ;
670678 const elementTop = this . view . elementTop ( viewIndex ) ;
671679 const viewItemOffset = elementTop ;
672680 const element = this . view . element ( viewIndex ) ;
681+ const positionOffset = viewItemOffset + element . getPositionScrollTopOffset ( range . startLineNumber , range . startColumn ) ;
673682
674- if ( viewItemOffset < scrollTop || viewItemOffset > wrapperBottom ) {
683+ if ( positionOffset < scrollTop || positionOffset > wrapperBottom ) {
675684 // let it render
676- this . view . setScrollTop ( viewItemOffset - this . view . renderHeight / 2 ) ;
685+ this . view . setScrollTop ( positionOffset - this . view . renderHeight / 2 ) ;
677686
678687 // after rendering, it might be pushed down due to markdown cell dynamic height
679688 const elementTop = this . view . elementTop ( viewIndex ) ;
@@ -708,8 +717,8 @@ export class NotebookCellList extends WorkbenchList<CellViewModel> implements ID
708717 return ;
709718 }
710719
711- const scrollTop = this . view . getScrollTop ( ) ;
712- const wrapperBottom = scrollTop + this . view . renderHeight ;
720+ const scrollTop = this . getViewScrollTop ( ) ;
721+ const wrapperBottom = this . getViewScrollBottom ( ) ;
713722 const elementTop = this . view . elementTop ( viewIndex ) ;
714723
715724 if ( ignoreIfInsideViewport && elementTop >= scrollTop && elementTop < wrapperBottom ) {
0 commit comments