fix: fix search scroll on large cell

packages/libro-core/src/components/dnd-component/default-dnd-content.tsx

@@ -23,7 +23,6 @@ import type { CellView, DndContentProps } from '../../libro-protocol.js';
 import { MultiSelectionWhenShiftClick } from '../../libro-setting.js';
 import type { LibroView } from '../../libro-view.js';
 import { HolderOutlined, PlusOutlined } from '../../material-from-designer.js';
-import { VirtualizedManagerHelper } from '../../virtualized-manager-helper.js';
 import { BetweenCellProvider } from '../cell-protocol.js';
 
 export interface Dragparams {
@@ -39,8 +38,6 @@ export const DndCellContainer: React.FC<DndContentProps> = ({ cell, index }) =>
   );
   const BetweenCellContent = useInject<BetweenCellProvider>(BetweenCellProvider);
   const cellService = useInject<CellService>(LibroCellService);
-  const virtualizedManagerHelper = useInject(VirtualizedManagerHelper);
-  const virtualizedManager = virtualizedManagerHelper.getOrCreate(cell.parent.model);
   const dragDropManager = useDragDropManager();
   const dragDropMonitor = dragDropManager.getMonitor();
   const ItemRender = getOrigin(instance.dndItemRender);
@@ -237,31 +234,18 @@ export const DndCellContainer: React.FC<DndContentProps> = ({ cell, index }) =>
           }
           if (isDragInSelections) {
             instance.model.exchangeCells(instance.model.selections, dropIndex);
-            if (virtualizedManager.isVirtualized) {
-              instance.model.scrollToCellView({ cellIndex: dropIndex });
-            } else {
-              instance.model.scrollToView(cell);
-            }
+            instance.model.scrollToView(cell);
 
             return;
           }
         }
         if (dragIndex < dropIndex) {
           instance.model.exchangeCell(dragIndex, dropIndex - 1);
-
-          if (virtualizedManager.isVirtualized) {
-            instance.model.scrollToCellView({ cellIndex: dropIndex });
-          } else {
-            instance.model.scrollToView(cell);
-          }
+          instance.model.scrollToView(cell);
         }
         if (dragIndex > dropIndex) {
           instance.model.exchangeCell(dragIndex, dropIndex);
-          if (virtualizedManager.isVirtualized) {
-            instance.model.scrollToCellView({ cellIndex: dropIndex });
-          } else {
-            instance.model.scrollToView(cell);
-          }
+          instance.model.scrollToView(cell);
         }
       }
       return;

packages/libro-core/src/components/libro-virtualized-render.tsx

@@ -95,7 +95,7 @@ export const LibroCellsOutputRender: React.FC<{
 
     libroView.model.onScrollToCellView((params: ScrollParams) => {
       // listRef.current!.scrollToRow(index);
-      listRef.current!.scrollToLine(params.cellIndex, params.lineIndex || 1);
+      listRef.current!.scrollToCellPosition(params.cellIndex, params.cellOffset);
     });
     return () => {
       libroView.model.disposeScrollToCellViewEmitter();

packages/libro-core/src/libro-model.ts

@@ -48,10 +48,6 @@ export class LibroModel implements NotebookModel, DndListModel {
     return this.cellViewChangeEmitter.event;
   }
 
-  scrollToCellView = (params: ScrollParams) => {
-    this.scrollToCellViewEmitter.fire(params);
-  };
-
   disposeScrollToCellViewEmitter() {
     this.scrollToCellViewEmitter.dispose();
   }
@@ -369,13 +365,21 @@ export class LibroModel implements NotebookModel, DndListModel {
   /**
    * 自动滚动到可视范围内
    */
-  scrollToView(cell: CellView) {
+  scrollToView(cell: CellView, cellOffset = 0) {
+    const virtualizedManager = this.virtualizedManagerHelper.getOrCreate(this);
+    if (virtualizedManager.isVirtualized) {
+      const cellIndex = this.cells.findIndex((_cell) => _cell.id === cell.id);
+      this.scrollToCellViewEmitter.fire({ cellIndex, cellOffset });
+      return;
+    }
+
     let target = document.getElementById(cell.id);
     if (!target) {
       return;
     }
+
     const _targetheight = target?.offsetHeight || 0;
-    let offsetTop = target?.offsetTop || 0;
+    let offsetTop = (target?.offsetTop || 0) + cellOffset;
     while (
       target?.offsetParent &&
       !target?.offsetParent?.className?.includes('libro-view-content-left')
@@ -630,14 +634,9 @@ export class LibroModel implements NotebookModel, DndListModel {
       cells.splice(sourceIndex, 1);
       cells.splice(targetIndex, 0, sourceItem);
       this.cells = cells;
-      const virtualizedManager = this.virtualizedManagerHelper.getOrCreate(this);
       setTimeout(() => {
         // 上下移动也需要调整可视区域范围
-        if (virtualizedManager.isVirtualized) {
-          this.scrollToCellView({ cellIndex: sourceIndex });
-        } else {
-          this.scrollToView(sourceItem);
-        }
+        this.scrollToView(sourceItem);
       }, 300);
       return true;
     }

packages/libro-core/src/libro-protocol.ts

@@ -60,7 +60,7 @@ export type Options = {
 
 export interface ScrollParams {
   cellIndex: number;
-  lineIndex?: number;
+  cellOffset?: number;
 }
 
 export type NotebookModel = BaseNotebookModel & DndListModel;
@@ -214,7 +214,7 @@ export interface BaseNotebookModel {
 
   readonly sharedModel: ISharedNotebook;
 
-  scrollToView: (cell: CellView) => void;
+  scrollToView: (cell: CellView, cellOffset?: number) => void;
 
   customParams: Record<string, any>;
   getCustomKey: (key: string) => any;
@@ -224,8 +224,6 @@ export interface BaseNotebookModel {
 
   onScrollToCellView: Event<ScrollParams>;
 
-  scrollToCellView: (params: ScrollParams) => void;
-
   disposeScrollToCellViewEmitter: () => void;
 }
 

packages/libro-core/src/libro-view.tsx

@@ -665,18 +665,11 @@ export class LibroView extends BaseView implements NotebookView {
       }
       this.runCells([cell]);
     }
-    if (this.virtualizedManager.isVirtualized) {
-      // 通过用户反馈，这里跳动会严重影响体验
-      // setTimeout(() => {
-      //   if (this.activeCell) this.model.scrollToCellView({ cellIndex: this.activeCellIndex });
-      // });
-    } else {
-      setTimeout(() => {
-        if (this.activeCell) {
-          this.model.scrollToView(this.activeCell);
-        }
-      });
-    }
+    setTimeout(() => {
+      if (this.activeCell) {
+        this.model.scrollToView(this.activeCell);
+      }
+    });
   };
 
   runCellandInsertBelow = async (cell: CellView) => {
@@ -916,9 +909,8 @@ export class LibroView extends BaseView implements NotebookView {
   };
 
   clearAllOutputs = () => {
-    if (this.virtualizedManager.isVirtualized) {
-      this.model.scrollToCellView({ cellIndex: 0 });
-    } // 清空所有 cell滚动到最上面
+    // 清空所有 cell滚动到最上面
+    this.model.scrollToView(this.model.cells[0]);
     for (const cell of this.model.cells) {
       if (ExecutableCellView.is(cell) && ExecutableCellModel.is(cell.model)) {
         cell.clearExecution();
@@ -1053,11 +1045,7 @@ export class LibroView extends BaseView implements NotebookView {
       if (this.findCellIndex(this.activeCell) > 0) {
         this.extendContiguousSelectionTo(activeIndex - 1);
       }
-      if (this.virtualizedManager.isVirtualized) {
-        this.model.scrollToCellView({ cellIndex: this.activeCellIndex });
-      } else {
-        this.model.scrollToView(this.activeCell);
-      }
+      this.model.scrollToView(this.activeCell);
     }
   };
 
@@ -1066,11 +1054,7 @@ export class LibroView extends BaseView implements NotebookView {
       if (this.findCellIndex(this.activeCell) > 0) {
         this.extendContiguousSelectionTo(0);
       }
-      if (this.virtualizedManager.isVirtualized) {
-        this.model.scrollToCellView({ cellIndex: this.activeCellIndex });
-      } else {
-        this.model.scrollToView(this.activeCell);
-      }
+      this.model.scrollToView(this.activeCell);
     }
   };
 
@@ -1084,11 +1068,7 @@ export class LibroView extends BaseView implements NotebookView {
       if (this.findCellIndex(this.activeCell) >= 0) {
         this.extendContiguousSelectionTo(activeIndex + 1);
       }
-      if (this.virtualizedManager.isVirtualized) {
-        this.model.scrollToCellView({ cellIndex: this.activeCellIndex });
-      } else {
-        this.model.scrollToView(this.activeCell);
-      }
+      this.model.scrollToView(this.activeCell);
     }
   };
 
@@ -1097,11 +1077,7 @@ export class LibroView extends BaseView implements NotebookView {
       if (this.findCellIndex(this.activeCell) > 0) {
         this.extendContiguousSelectionTo(this.model.cells.length - 1);
       }
-      if (this.virtualizedManager.isVirtualized) {
-        this.model.scrollToCellView({ cellIndex: this.activeCellIndex });
-      } else {
-        this.model.scrollToView(this.activeCell);
-      }
+      this.model.scrollToView(this.activeCell);
     }
   };
 
@@ -1270,11 +1246,7 @@ export class LibroView extends BaseView implements NotebookView {
     if (newSelectedCell) {
       this.model.selectCell(newSelectedCell);
       this.model.selections = [];
-      if (this.virtualizedManager.isVirtualized) {
-        this.model.scrollToCellView({ cellIndex: this.activeCellIndex });
-      } else {
-        this.model.scrollToView(newSelectedCell);
-      }
+      this.model.scrollToView(newSelectedCell);
     }
   };
 
@@ -1283,11 +1255,7 @@ export class LibroView extends BaseView implements NotebookView {
     if (newSelectedCell) {
       this.model.selectCell(newSelectedCell);
       this.model.selections = [];
-      if (this.virtualizedManager.isVirtualized) {
-        this.model.scrollToCellView({ cellIndex: this.activeCellIndex });
-      } else {
-        this.model.scrollToView(newSelectedCell);
-      }
+      this.model.scrollToView(newSelectedCell);
     }
   };
 

packages/libro-jupyter/src/libro-jupyter-model.ts

@@ -1,5 +1,4 @@
 import { LibroModel, VirtualizedManagerHelper } from '@difizen/libro-core';
-import type { VirtualizedManager } from '@difizen/libro-core';
 import {
   ContentsManager,
   ExecutableNotebookModel,
@@ -60,7 +59,6 @@ export class LibroJupyterModel extends LibroModel implements ExecutableNotebookM
   protected serverConnection: ServerConnection;
   protected readonly contentsManager: ContentsManager;
   protected readonly modalService: ModalService;
-  protected virtualizedManager: VirtualizedManager;
 
   constructor(
     @inject(LibroFileService) libroFileService: LibroFileService,
@@ -309,12 +307,7 @@ export class LibroJupyterModel extends LibroModel implements ExecutableNotebookM
     });
     if (runningCellIndex > -1) {
       this.selectCell(this.cells[runningCellIndex]);
-
-      if (this.virtualizedManager.isVirtualized) {
-        this.scrollToCellView({ cellIndex: runningCellIndex });
-      } else {
-        this.scrollToView(this.cells[runningCellIndex]);
-      }
+      this.scrollToView(this.cells[runningCellIndex]);
     }
   }
 }

packages/libro-search/src/libro-search-manager.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import type { CommandRegistry, KeybindingRegistry } from '@difizen/mana-app';
 import {
   LibroCommandRegister,
   LibroExtensionSlotContribution,
@@ -9,6 +8,7 @@ import type {
   LibroSlot,
   LibroView,
 } from '@difizen/libro-core';
+import type { CommandRegistry, KeybindingRegistry } from '@difizen/mana-app';
 import {
   ViewManager,
   CommandContribution,

packages/libro-search/src/libro-search-provider.ts

@@ -4,6 +4,7 @@ import {
   EditorCellView,
   LibroView,
   VirtualizedManagerHelper,
+  LirboContextKey,
 } from '@difizen/libro-core';
 import { inject, prop, transient, equals } from '@difizen/mana-app';
 import { Deferred, DisposableCollection } from '@difizen/mana-app';
@@ -39,6 +40,7 @@ export const LibroSearchProviderFactory = Symbol('LibroSearchProviderFactory');
  */
 @transient()
 export class LibroSearchProvider extends AbstractSearchProvider {
+  @inject(LirboContextKey) contextKey: LirboContextKey;
   @inject(LibroCellSearchProvider) libroCellSearchProvider: LibroCellSearchProvider;
   protected cellsChangeDeferred: Deferred<void> | undefined;
 
@@ -201,7 +203,7 @@ export class LibroSearchProvider extends AbstractSearchProvider {
    * @returns Initial value used to populate the search box.
    */
   override getInitialQuery = (): string => {
-    const activeCell = this.view.model.active;
+    const activeCell = this.view.activeCell;
     if (activeCell) {
       return this.libroCellSearchProvider.getInitialQuery(activeCell);
     }
@@ -254,6 +256,10 @@ export class LibroSearchProvider extends AbstractSearchProvider {
     filters?: SearchFilters,
     highlightNext = true,
   ): Promise<void> => {
+    if (this.contextKey.commandModeEnabled === true) {
+      return;
+    }
+
     if (!this.view) {
       return;
     }
@@ -447,17 +453,9 @@ export class LibroSearchProvider extends AbstractSearchProvider {
       if (!elementInViewport(node!)) {
         try {
           if (this.view.activeCell) {
-            if (this.virtualizedManager.isVirtualized) {
-              if (EditorCellView.is(activeCell)) {
-                const line = activeCell.editor?.getPositionAt(match.position)?.line;
-
-                this.view.model.scrollToCellView({
-                  cellIndex: this.view.activeCellIndex,
-                  lineIndex: line,
-                });
-              }
-            } else {
-              this.view.model.scrollToView(this.view.activeCell);
+            if (EditorCellView.is(activeCell)) {
+              const line = activeCell.editor?.getPositionAt(match.position)?.line;
+              this.view.model.scrollToView(this.view.activeCell, (line ?? 0) * 20);
             }
           }
         } catch (error) {

packages/libro-search/src/libro-search-view.tsx

@@ -93,6 +93,12 @@ export const SearchContent = () => {
               onChange={instance.handleFindChange}
               size="small"
               placeholder="搜索"
+              onFocus={() => {
+                instance.hasFocus = true;
+              }}
+              onBlur={() => {
+                instance.hasFocus = false;
+              }}
               suffix={
                 <span className="libro-search-input-suffix">
                   <IconFont
@@ -228,6 +234,7 @@ export class LibroSearchView extends BaseView {
   @prop() caseSensitive = false;
   @prop() useRegex = false;
   @prop() isSearching = false;
+  hasFocus = false;
 
   override view = SearchComponent;
 
@@ -262,6 +269,17 @@ export class LibroSearchView extends BaseView {
       this.toDispose.push(
         this.libro.model.onCellViewChanged(() => this.onCellsChanged()),
       );
+      this.toDispose.push(
+        this.libro.model.onCommandModeChanged((mode) => {
+          if (mode) {
+            setTimeout(() => {
+              if (this.hasFocus === false) {
+                this.hide();
+              }
+            }, 0);
+          }
+        }),
+      );
     }
   };