@difizen/libro-core 0.1.18 → 0.1.20

package/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;

package/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();

package/src/libro-model.ts

@@ -26,6 +26,7 @@ import type {
   ScrollParams,
   CellView,
   MouseMode,
+  ICellContentChange,
 } from './libro-protocol.js';
 import { EnterEditModeWhenAddCell } from './libro-setting.js';
 import { VirtualizedManagerHelper } from './virtualized-manager-helper.js';
@@ -47,10 +48,6 @@ export class LibroModel implements NotebookModel, DndListModel {
     return this.cellViewChangeEmitter.event;
   }
 
-  scrollToCellView = (params: ScrollParams) => {
-    this.scrollToCellViewEmitter.fire(params);
-  };
-
   disposeScrollToCellViewEmitter() {
     this.scrollToCellViewEmitter.dispose();
   }
@@ -60,9 +57,9 @@ export class LibroModel implements NotebookModel, DndListModel {
     return this.onCommandModeChangedEmitter.event;
   }
 
-  protected onContentChangedEmitter: Emitter<boolean> = new Emitter();
-  get onContentChanged() {
-    return this.onContentChangedEmitter.event;
+  protected onChangedEmitter: Emitter<boolean> = new Emitter();
+  get onChanged() {
+    return this.onChangedEmitter.event;
   }
 
   protected onSourceChangedEmitter: Emitter<boolean> = new Emitter();
@@ -70,6 +67,15 @@ export class LibroModel implements NotebookModel, DndListModel {
     return this.onSourceChangedEmitter.event;
   }
 
+  protected onCellContentChangedEmitter: Emitter<ICellContentChange> = new Emitter();
+  get onCellContentChanged() {
+    return this.onCellContentChangedEmitter.event;
+  }
+
+  onCellContentChange(change: ICellContentChange) {
+    this.onCellContentChangedEmitter.fire(change);
+  }
+
   id: string;
 
   /**
@@ -219,9 +225,10 @@ export class LibroModel implements NotebookModel, DndListModel {
           insert: { index: currpos, cells: cellViews },
         });
       } else if (delta.delete !== null && delta.delete !== undefined) {
+        const cellViews = this.cells.slice(currpos, currpos + delta.delete);
         this.removeRange(currpos, currpos + delta.delete);
         this.cellViewChangeEmitter.fire({
-          delete: { index: currpos, number: delta.delete },
+          delete: { index: currpos, number: delta.delete, cells: cellViews },
         });
       } else if (delta.retain !== null && delta.retain !== undefined) {
         currpos += delta.retain;
@@ -290,12 +297,9 @@ export class LibroModel implements NotebookModel, DndListModel {
     });
   }
 
-  /**
-   * cell list change or cell content change
-   */
   onChange() {
     this.dirty = true;
-    this.onContentChangedEmitter.fire(true);
+    this.onChangedEmitter.fire(true);
   }
 
   onSourceChange() {
@@ -361,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')
@@ -622,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;
     }

package/src/libro-protocol.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/unified-signatures */
-import type { IModel } from '@difizen/libro-code-editor';
+import type { IModel, IModelContentChange } from '@difizen/libro-code-editor';
 import type {
   CellType,
   ICell,
@@ -60,10 +60,15 @@ export type Options = {
 
 export interface ScrollParams {
   cellIndex: number;
-  lineIndex?: number;
+  cellOffset?: number;
 }
 
 export type NotebookModel = BaseNotebookModel & DndListModel;
+
+export interface ICellContentChange {
+  cell: CellView;
+  changes: IModelContentChange[];
+}
 export interface BaseNotebookModel {
   id: string;
   /**
@@ -98,12 +103,26 @@ export interface BaseNotebookModel {
 
   onCommandModeChanged: Event<boolean>;
 
-  onContentChanged: Event<boolean>;
+  /**
+   * all changes
+   */
+  onChanged: Event<boolean>;
 
+  /**
+   * cell content & type
+   */
   onSourceChanged: Event<boolean>;
 
+  /**
+   * cell create & delete
+   */
   onCellViewChanged: Event<CellViewChange>;
 
+  /**
+   * cell content change detail
+   */
+  onCellContentChanged: Event<ICellContentChange>;
+
   getCells: () => CellView[];
 
   /**
@@ -171,9 +190,15 @@ export interface BaseNotebookModel {
 
   enterEditMode?: () => void;
 
+  /**
+   * all changes: cell value\cell type\cell output\ cell executecount\ cell or notebook metadata\cell create & delete
+   * @returns
+   */
   onChange?: () => void;
 
-  onSourceChange?: () => void;
+  onSourceChange?: (cells: CellView[]) => void;
+
+  onCellContentChange: (changes: ICellContentChange) => void;
 
   interrupt?: () => void;
 
@@ -189,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;
@@ -199,8 +224,6 @@ export interface BaseNotebookModel {
 
   onScrollToCellView: Event<ScrollParams>;
 
-  scrollToCellView: (params: ScrollParams) => void;
-
   disposeScrollToCellViewEmitter: () => void;
 }
 
@@ -290,7 +313,7 @@ export interface CellViewOptions {
 
 export interface CellViewChange {
   insert?: { cells: CellView[]; index: number };
-  delete?: { index: number; number: number };
+  delete?: { index: number; number: number; cells: CellView[] };
 }
 
 export interface CellModel extends IModel, Disposable {

package/src/libro-service.ts

@@ -1,9 +1,15 @@
-import { Emitter } from '@difizen/mana-app';
+import type { Disposable } from '@difizen/mana-app';
+import { DisposableCollection, Emitter } from '@difizen/mana-app';
 import { ThemeService, ViewManager } from '@difizen/mana-app';
 import { inject, singleton } from '@difizen/mana-app';
 import { prop } from '@difizen/mana-app';
 
-import type { NotebookOption, NotebookView } from './libro-protocol.js';
+import type {
+  CellView,
+  ICellContentChange,
+  NotebookOption,
+  NotebookView,
+} from './libro-protocol.js';
 import {
   notebookViewFactoryId,
   ModelFactory,
@@ -11,8 +17,24 @@ import {
 } from './libro-protocol.js';
 import { LibroViewTracker } from './libro-view-tracker.js';
 
+export interface NotebookViewChange {
+  libroView: NotebookView;
+  contentChanges: Array<{
+    range: {
+      start: number;
+      end: number;
+    };
+    addedCells: CellView[];
+    removedCells: CellView[];
+  }>;
+  cellChanges: Array<{
+    cell: CellView;
+  }>;
+}
+
 @singleton({ contrib: NotebookService })
-export class LibroService implements NotebookService {
+export class LibroService implements NotebookService, Disposable {
+  protected toDispose = new DisposableCollection();
   @inject(ModelFactory) protected libroModelFactory: ModelFactory;
   @inject(ViewManager) protected viewManager: ViewManager;
   @inject(LibroViewTracker) protected libroViewTracker: LibroViewTracker;
@@ -50,6 +72,34 @@ export class LibroService implements NotebookService {
   get onNotebookViewCreated() {
     return this.onNotebookViewCreatedEmitter.event;
   }
+  protected onNotebookViewSavedEmitter: Emitter<NotebookView> = new Emitter();
+  get onNotebookViewSaved() {
+    return this.onNotebookViewSavedEmitter.event;
+  }
+  protected onNotebookViewChangedEmitter: Emitter<NotebookViewChange> = new Emitter();
+  get onNotebookViewChanged() {
+    return this.onNotebookViewChangedEmitter.event;
+  }
+  protected onNotebookViewClosedEmitter: Emitter<NotebookView> = new Emitter();
+  get onNotebookViewClosed() {
+    return this.onNotebookViewClosedEmitter.event;
+  }
+  protected onNotebookCellCreatedEmitter: Emitter<CellView[]> = new Emitter();
+  get onNotebookCellCreated() {
+    return this.onNotebookCellCreatedEmitter.event;
+  }
+  protected onNotebookCellSavedEmitter: Emitter<CellView[]> = new Emitter();
+  get onNotebookCellSaved() {
+    return this.onNotebookCellSavedEmitter.event;
+  }
+  protected onNotebookCellChangedEmitter: Emitter<ICellContentChange> = new Emitter();
+  get onNotebookCellChanged() {
+    return this.onNotebookCellChangedEmitter.event;
+  }
+  protected onNotebookCellDeletedEmitter: Emitter<CellView[]> = new Emitter();
+  get onNotebookCellDeleted() {
+    return this.onNotebookCellDeletedEmitter.event;
+  }
 
   get focus(): NotebookView | undefined {
     return this._focus;
@@ -68,6 +118,7 @@ export class LibroService implements NotebookService {
   }
 
   deleteLibroViewFromCache(instance: NotebookView) {
+    this.onNotebookViewClosedEmitter.fire(instance);
     this.libroViewTracker.viewCache.delete(instance.id);
     this.libroViewTracker.modelCache.delete(instance.model.id);
   }
@@ -98,6 +149,52 @@ export class LibroService implements NotebookService {
     const notebookView = await notebookViewPromise;
     this.libroViewTracker.viewCache.set(notebookView.id, notebookView);
     this.onNotebookViewCreatedEmitter.fire(notebookView);
+    this.toDispose.push(
+      notebookView.onSave(() => {
+        this.onNotebookViewSavedEmitter.fire(notebookView);
+      }),
+    );
+    this.toDispose.push(
+      notebookView.model.onCellContentChanged((e) => {
+        this.onNotebookCellChangedEmitter.fire(e);
+      }),
+    );
+    this.toDispose.push(
+      notebookView.model.onCellViewChanged((e) => {
+        const changes: NotebookViewChange = {
+          libroView: notebookView,
+          cellChanges: [],
+          contentChanges: [],
+        };
+
+        if (e.delete) {
+          changes.contentChanges.push({
+            range: {
+              start: e.delete.index,
+              end: e.delete.index + e.delete?.number,
+            },
+            removedCells: e.delete.cells,
+            addedCells: [],
+          });
+          this.onNotebookCellDeletedEmitter.fire(e.delete.cells);
+        }
+
+        if (e.insert) {
+          changes.contentChanges.push({
+            range: {
+              start: e.insert.index,
+              end: e.insert.index + e.insert?.cells.length,
+            },
+            removedCells: [],
+            addedCells: e.insert.cells,
+          });
+          this.onNotebookCellCreatedEmitter.fire(e.insert.cells);
+        }
+
+        this.onNotebookViewChangedEmitter.fire(changes);
+      }),
+    );
+
     return notebookViewPromise;
   }
 
@@ -109,4 +206,13 @@ export class LibroService implements NotebookService {
   setHasFocus(hasFocus: boolean): void {
     this._hasFocus = hasFocus;
   }
+
+  protected isDisposed = false;
+  get disposed() {
+    return this.isDisposed;
+  }
+  dispose() {
+    this.toDispose.dispose();
+    this.isDisposed = true;
+  }
 }

package/src/libro-view.tsx

@@ -1,4 +1,5 @@
 import { ToTopOutlined } from '@ant-design/icons';
+import type { IModelContentChange } from '@difizen/libro-code-editor';
 import {
   concatMultilineString,
   copy2clipboard,
@@ -281,6 +282,10 @@ export class LibroView extends BaseView implements NotebookView {
   get onCellCreate() {
     return this.onCellCreateEmitter.event;
   }
+  protected onCellDeleteEmitter: Emitter<CellView> = new Emitter();
+  get onCellDelete() {
+    return this.onCellDeleteEmitter.event;
+  }
 
   onBlurEmitter: Emitter = new Emitter();
   get onBlur() {
@@ -318,6 +323,10 @@ export class LibroView extends BaseView implements NotebookView {
   get onSave() {
     return this.onSaveEmitter.event;
   }
+  onCellContentChangedEmitter: Emitter<IModelContentChange[]> = new Emitter();
+  get onCellContentChanged() {
+    return this.onCellContentChangedEmitter.event;
+  }
 
   runCellEmitter: Emitter<CellView> = new Emitter();
   get onRunCell() {
@@ -411,7 +420,6 @@ export class LibroView extends BaseView implements NotebookView {
       this.toDispose.push(
         watch(this.model, 'cells', () => {
           this.model.onChange?.();
-          this.model.onSourceChange?.();
         }),
       );
       this.initializedDefer.resolve();
@@ -657,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) => {
@@ -908,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();
@@ -1045,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);
     }
   };
 
@@ -1058,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);
     }
   };
 
@@ -1076,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);
     }
   };
 
@@ -1089,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);
     }
   };
 
@@ -1262,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);
     }
   };
 
@@ -1275,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);
     }
   };
 

package/src/toolbar/libro-toolbar.tsx

@@ -94,6 +94,19 @@ export class LibroToolbarContribution implements ToolbarContribution {
       group: ['group2'],
       order: 'c-all',
     });
+    registry.registerItem({
+      id: DocumentCommands['FormatCell'].id,
+      command: DocumentCommands['FormatCell'].id,
+      tooltip: (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('格式化代码')}</span>
+          <span className="libro-tooltip-keybind">Shift+Option+F</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar1'],
+      order: 'd',
+    });
     registry.registerItem({
       id: NotebookCommands['MoveCellUp'].id,
       command: NotebookCommands['MoveCellUp'].id,

package/src/virtualized-manager.ts

@@ -1,4 +1,7 @@
-import { transient, prop } from '@difizen/mana-app';
+import { transient, prop, inject } from '@difizen/mana-app';
+
+import type { NotebookModel } from './libro-protocol.js';
+import { VirtualizedManagerOption } from './libro-protocol.js';
 
 export interface IVirtualizedManager {
   openVirtualized: (length: number, size?: number, path?: string) => Promise<boolean>;
@@ -13,6 +16,16 @@ export class VirtualizedManager implements IVirtualizedManager {
    */
   @prop()
   isVirtualized = false;
+
+  libroModel: NotebookModel;
+
+  constructor(
+    @inject(VirtualizedManagerOption)
+    virtualizedManagerOption: VirtualizedManagerOption,
+  ) {
+    this.libroModel = virtualizedManagerOption.libroModel;
+  }
+
   /**
    *
    * @param length cell个数