@difizen/libro-core 0.1.1 → 0.1.2

package/src/index.less

@@ -3,6 +3,12 @@
 // The prefix to use on all css classes from ant.
 @ant-prefix: ant;
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 .libro-view {
   position: relative;
   display: flex;
@@ -32,18 +38,22 @@
   display: flex;
   width: 100%;
   height: 100%;
-  padding: 0 60px 8px 0;
+  padding: 0;
   overflow-y: auto;
 
   .libro-dnd-list-container {
     height: 100%;
-    padding-top: 12px;
     // overflow-y: auto;
+
+    :global {
+      .ReactVirtualized__List {
+        height: fit-content;
+      }
+    }
   }
 }
 
 .libro-view-top {
-  z-index: 1000;
   display: flex;
   align-items: center;
   width: 100%;
@@ -73,7 +83,7 @@
         padding: 0 8px;
         color: var(--mana-libro-toptoolbar-icon-color);
 
-        g {
+        svg {
           fill: var(--mana-libro-toptoolbar-icon-color) !important;
         }
         .@{ant-prefix}-select-selection-item {
@@ -85,9 +95,13 @@
         }
       }
 
+      .mana-toolbar-item:has(.libro-all-outputs-scroll-button) {
+        padding: unset;
+      }
+
       .mana-toolbar-item-disabled {
-        opacity: unset;
         color: var(--mana-libro-toptoolbar-disabled-icon-color);
+        opacity: unset;
 
         g {
           fill: var(--mana-libro-toptoolbar-disabled-icon-color) !important;
@@ -124,8 +138,15 @@
   z-index: 1000;
 }
 
+.ReactVirtualized__List {
+  .libro-dnd-cell-container {
+    padding: 16px 16px 0 0;
+  }
+}
+
 .libro-dnd-cell-container {
   position: relative;
+  height: fit-content;
   padding: 8px 16px 8px 0;
 
   &:focus-visible {
@@ -144,8 +165,8 @@
     display: block;
   }
 
-  &.selected {
-    background-color: #f1faff;
+  &.multi-selected {
+    background-color: var(--mana-libro-cell-selected-bg-color);
   }
 
   &.hidden {
@@ -153,7 +174,23 @@
   }
 }
 
-.libro-dnd-cell-content {
+.libro-cell-collapsed-expander {
+  margin-top: 5px;
+  padding-left: 72px;
+
+  .libro-cell-expand-button {
+    padding: 0 12px;
+  }
+}
+
+.libro-dnd-cell {
+  position: relative;
+  margin-right: 45px;
+  margin-left: 72px;
+  padding: 0;
+  border: 1px solid var(--mana-libro-cell-border-color);
+  border-radius: 4px;
+
   &:hover {
     .libro-cell-input-collapser,
     .libro-cell-output-collapser,
@@ -171,49 +208,11 @@
       }
     }
   }
-}
-
-.libro-cell-collapsed-expander {
-  margin-top: 5px;
-  padding-left: 72px;
-
-  .libro-cell-expand-button {
-    padding: 0 12px;
-  }
-}
-
-.libro-dnd-cell {
-  position: relative;
-  margin-left: 72px;
-  padding: 0;
-  border: 1px solid var(--mana-libro-cell-border-color);
-  border-radius: 4px;
-  transition: border-color 0.2s ease 0s;
 
   :focus-visible {
     outline: unset;
   }
 
-  &.active.command-mode {
-    border: 1px solid var(--mana-libro-cell-active-border-color);
-    box-shadow: unset;
-  }
-
-  &.active.command-mode.error,
-  &.error {
-    border: 1px solid var(--mana-libro-error-color) !important;
-    box-shadow: unset;
-  }
-
-  &.active.edit-mode.error {
-    border: 1px solid var(--mana-libro-error-color) !important;
-    box-shadow: rgba(237, 19, 69, 25%) 0 0 0 2px;
-  }
-
-  &.hidden {
-    border: unset;
-  }
-
   &.active {
     border: 1px solid var(--mana-libro-cell-active-border-color);
     box-shadow: var(--mana-libro-cell-active-border-shadow-color) 0 0 0 2px;
@@ -234,6 +233,26 @@
       }
     }
   }
+
+  &.active.command-mode {
+    border: 1px solid var(--mana-libro-cell-active-border-color);
+    box-shadow: unset;
+  }
+
+  &.active.command-mode.error,
+  &.error {
+    border: 1px solid var(--mana-libro-error-color) !important;
+    box-shadow: unset;
+  }
+
+  &.active.edit-mode.error {
+    border: 1px solid var(--mana-libro-error-color) !important;
+    box-shadow: rgba(237, 19, 69, 25%) 0 0 0 2px;
+  }
+
+  &.hidden {
+    border: unset;
+  }
 }
 
 .libro-dnd-cell-preview {
@@ -416,7 +435,7 @@
       width: 32px;
       height: 28px;
       margin: 0;
-      padding: 2px 0;
+      padding: 2px 6px;
       text-align: center;
     }
 
@@ -495,9 +514,9 @@
   left: 56px;
   z-index: 100;
   width: calc(100% - 70px);
-  border-radius: 2px;
   height: 4px;
   background-color: var(--mana-libro-drag-hover-line-color);
+  border-radius: 2px;
 }
 
 .libro-view-content-left {
@@ -513,15 +532,10 @@
 .libro-cell-output-container {
   position: relative;
   background-color: var(--mana-libro-output-background);
-  border-top: 1px solid var(--mana-libro-code-border-color);
+  // border-top: 1px solid var(--mana-libro-code-border-color);
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 
-  &.scrolled {
-    max-height: 24em;
-    overflow-y: auto;
-  }
-
   &.hidden {
     padding: 12px;
     color: var(--mana-text-tertiary);
@@ -537,6 +551,57 @@
   }
 }
 
+.libro-cell-output-scroll {
+  display: none;
+}
+
+.libro-dnd-cell-container:hover {
+  .libro-cell-output-scroll {
+    display: block;
+  }
+}
+
+.libro-cell-output-content {
+  &.scrolled {
+    .libro-output-area {
+      max-height: 312px;
+      overflow-y: auto;
+    }
+  }
+}
+
+.libro-cell-output-scroll-button {
+  position: absolute;
+  top: 4px;
+  left: -26px;
+  display: flex;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+
+  :hover {
+    background-color: var(--mana-list-hoverBackground);
+  }
+
+  svg {
+    color: var(--mana-libro-toptoolbar-icon-color);
+  }
+}
+
+.libro-all-outputs-scroll-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+
+  &.active {
+    background-color: var(--mana-list-hoverBackground);
+  }
+}
+
 .libro-view-add-cell-toolbar {
   position: relative;
   width: 100%;
@@ -572,6 +637,18 @@
 }
 
 .libro-side-toolbar-menu {
+  width: 100%;
+
+  .libro-toolbar-menu-inlines {
+    width: 100%;
+  }
+
+  .mana-menu-item {
+    button {
+      display: block;
+    }
+  }
+
   .mana-menu-item-active > .mana-menu-item-button,
   .mana-menu-item:hover > .mana-menu-item-button {
     background: var(--mana-libro-menu-hover-color);
@@ -596,9 +673,9 @@
     right: -4px;
     width: 100%;
     height: 100%;
-    border-radius: 4px;
-    background-color: var(--mana-libro-popover-background-color);
     padding: 0;
+    background-color: var(--mana-libro-popover-background-color) !important;
+    border-radius: 4px;
     box-shadow:
       0 3px 6px -4px rgba(0, 0, 0, 12%),
       0 6px 16px 0 rgba(0, 0, 0, 8%),
@@ -610,8 +687,8 @@
       padding-right: unset;
     }
     .@{ant-prefix}-popover-inner-content {
-      padding: 4px 0;
       width: unset !important;
+      padding: 4px 0;
     }
   }
 }
@@ -651,7 +728,7 @@
 
 .libro-output-area {
   margin-top: 18px;
-  overflow: hidden;
+  // overflow: hidden;
 }
 
 .libro-tooltip {

package/src/index.tsx

@@ -5,7 +5,6 @@ export * from './libro-service.js';
 export * from './libro-model.js';
 export * from './cell/index.js';
 export * from './components/index.js';
-export * from './configuration/libro-configuration.js';
 export * from './toolbar/index.js';
 export * from './output/index.js';
 export * from './slot/index.js';
@@ -17,3 +16,9 @@ export * from './material-from-designer.js';
 export * from './libro-view-tracker.js';
 export * from './content/index.js';
 export * from './collapse-service.js';
+export * from './formatter/index.js';
+export * from './libro-setting.js';
+export * from './settings/index.js';
+
+export * from './virtualized-manager.js';
+export * from './virtualized-manager-helper.js';

package/src/libro-context-key.ts

@@ -13,9 +13,9 @@ export class LirboContextKey {
   protected toDisposeOnActiveChanged?: Disposable;
   protected commandModeEnabled = true;
   protected isCommandMode = false;
-  active!: IContextKey<boolean>;
-  focus!: IContextKey<boolean>;
-  commandMode!: IContextKey<boolean>;
+  active: IContextKey<boolean>;
+  focus: IContextKey<boolean>;
+  commandMode: IContextKey<boolean>;
 
   constructor(
     @inject(ContextKeyService) contextKeyService: ContextKeyService,

package/src/libro-model.ts

@@ -9,31 +9,52 @@ import type {
   ISharedNotebook,
   NotebookChange,
 } from '@difizen/libro-shared-model';
-import { YNotebook, createMutex } from '@difizen/libro-shared-model';
-import { ConfigurationService } from '@difizen/mana-app';
-import { getOrigin } from '@difizen/mana-app';
+import { createMutex, YNotebook } from '@difizen/libro-shared-model';
+import { getOrigin, ConfigurationService } from '@difizen/mana-app';
 import { Emitter } from '@difizen/mana-app';
-import { inject, transient } from '@difizen/mana-app';
 import { prop } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
 import { v4 } from 'uuid';
 
 import { LibroContentService } from './content/index.js';
+import { isCellView, NotebookOption } from './libro-protocol.js';
 import type {
-  NotebookModel,
   CellOptions,
+  CellViewChange,
   DndListModel,
+  NotebookModel,
+  ScrollParams,
   CellView,
   MouseMode,
 } from './libro-protocol.js';
-import { isCellView, NotebookOption } from './libro-protocol.js';
-import { EnterEditModeWhenAddCell } from './configuration/libro-configuration.js';
+import { EnterEditModeWhenAddCell } from './libro-setting.js';
+import { VirtualizedManagerHelper } from './virtualized-manager-helper.js';
 
 @transient()
 export class LibroModel implements NotebookModel, DndListModel {
   @inject(NotebookOption) options: NotebookOption;
   @inject(LibroContentService) libroContentService: LibroContentService;
+  @inject(VirtualizedManagerHelper) virtualizedManagerHelper: VirtualizedManagerHelper;
   @inject(ConfigurationService) configurationService: ConfigurationService;
 
+  protected scrollToCellViewEmitter: Emitter;
+  get onScrollToCellView() {
+    return this.scrollToCellViewEmitter.event;
+  }
+
+  protected cellViewChangeEmitter: Emitter<CellViewChange> = new Emitter();
+  get onCellViewChanged() {
+    return this.cellViewChangeEmitter.event;
+  }
+
+  scrollToCellView = (params: ScrollParams) => {
+    this.scrollToCellViewEmitter.fire(params);
+  };
+
+  disposeScrollToCellViewEmitter() {
+    this.scrollToCellViewEmitter.dispose();
+  }
+
   protected onCommandModeChangedEmitter: Emitter<boolean> = new Emitter();
   get onCommandModeChanged() {
     return this.onCommandModeChangedEmitter.event;
@@ -44,7 +65,12 @@ export class LibroModel implements NotebookModel, DndListModel {
     return this.onContentChangedEmitter.event;
   }
 
-  id: string = v4();
+  protected onSourceChangedEmitter: Emitter<boolean> = new Emitter();
+  get onSourceChanged() {
+    return this.onSourceChangedEmitter.event;
+  }
+
+  id: string;
 
   /**
    * The shared notebook model.
@@ -102,7 +128,7 @@ export class LibroModel implements NotebookModel, DndListModel {
   executeCount = 0;
 
   @prop()
-  mouseMode?: MouseMode;
+  mouseMode: MouseMode;
 
   @prop()
   selections: CellView[] = [];
@@ -160,10 +186,12 @@ export class LibroModel implements NotebookModel, DndListModel {
   cellTypeAdaptor?: CellTypeAdaptor;
 
   constructor() {
+    this.id = v4();
     this.sharedModel = YNotebook.create({
       disableDocumentWideUndoRedo: false,
       cellTypeAdaptor: this.cellTypeAdaptor,
     });
+    this.scrollToCellViewEmitter = new Emitter<ScrollParams>();
     this.sharedModel.changed(this.onSharedModelChanged);
     this.sharedModel.undoChanged((value) => {
       if (value !== this.canUndo) {
@@ -187,8 +215,14 @@ export class LibroModel implements NotebookModel, DndListModel {
         });
         this.insertCellsView(cellViews, currpos);
         currpos += delta.insert.length;
+        this.cellViewChangeEmitter.fire({
+          insert: { index: currpos, cells: cellViews },
+        });
       } else if (delta.delete !== null && delta.delete !== undefined) {
         this.removeRange(currpos, currpos + delta.delete);
+        this.cellViewChangeEmitter.fire({
+          delete: { index: currpos, number: delta.delete },
+        });
       } else if (delta.retain !== null && delta.retain !== undefined) {
         currpos += delta.retain;
       }
@@ -198,9 +232,18 @@ export class LibroModel implements NotebookModel, DndListModel {
       return;
     }
     this.selectCell(this.cells[this.activeIndex]);
-    if (this.cells[this.activeIndex]) {
-      this.scrollToView(this.cells[this.activeIndex]);
+
+    const virtualizedManager = this.virtualizedManagerHelper.getOrCreate(this);
+    if (virtualizedManager.isVirtualized) {
+      if (this.cells[this.activeIndex]) {
+        this.scrollToCellView({ cellIndex: this.activeIndex });
+      }
+    } else {
+      if (this.cells[this.activeIndex]) {
+        this.scrollToView(this.cells[this.activeIndex]);
+      }
     }
+
     this.configurationService
       .get(EnterEditModeWhenAddCell)
       .then((value) => {
@@ -218,12 +261,8 @@ export class LibroModel implements NotebookModel, DndListModel {
       });
   };
 
-  toString = () => {
-    return JSON.stringify(this.toJSON());
-  };
-  fromString = (value: string) => {
-    this.fromJSON(JSON.parse(value));
-  };
+  toString: () => string;
+  fromString: (value: string) => void;
 
   /**
    * Serialize the model to JSON.
@@ -270,6 +309,11 @@ export class LibroModel implements NotebookModel, DndListModel {
     this.onContentChangedEmitter.fire(true);
   }
 
+  onSourceChange() {
+    this.dirty = true;
+    this.onSourceChangedEmitter.fire(true);
+  }
+
   /**
    * override this method to load notebook from server
    * @returns
@@ -279,7 +323,7 @@ export class LibroModel implements NotebookModel, DndListModel {
   }
 
   async saveNotebookContent(): Promise<void> {
-    //
+    return this.libroContentService.saveLibroContent(this.options, this);
   }
 
   async initialize(): Promise<CellOptions[]> {
@@ -352,8 +396,13 @@ export class LibroModel implements NotebookModel, DndListModel {
       if (offsetTop < _scrollTop) {
         target.offsetParent.parentElement.scrollTop = offsetTop;
       } else {
-        target.offsetParent.parentElement.scrollTop =
-          offsetTop + _targetheight - _height + 30; // 加缓冲向上不贴底部
+        //目标cell的高度大于屏幕的高度
+        if (_targetheight >= _height) {
+          target.offsetParent.parentElement.scrollTop = offsetTop - _height / 2;
+        } else {
+          target.offsetParent.parentElement.scrollTop =
+            offsetTop + _targetheight - _height + 30; // 加缓冲向上不贴底部
+        }
       }
     }
   }
@@ -422,7 +471,13 @@ export class LibroModel implements NotebookModel, DndListModel {
 
   protected insertCellsView = (cell: CellView[], position?: number) => {
     if (position === 0) {
-      this.cells.unshift(...cell);
+      // unshift 存在性能问题
+      // this.cells.unshift(...cell);
+
+      const arr = [...this.cells];
+      arr.splice(0, 0, ...cell);
+      this.cells = arr;
+
       return;
     }
     if (position !== undefined) {
@@ -441,7 +496,11 @@ export class LibroModel implements NotebookModel, DndListModel {
   };
 
   removeRange(start: number, end: number) {
-    this.cells.splice(start, end - start);
+    // this.cells.splice(start, end - start);
+    // 不使用splice的写法，除非设置了 ObservableConfig.async = true
+    const arr = [...this.cells];
+    arr.splice(start, end - start);
+    this.cells = arr;
   }
 
   deleteCell(id: string | number): boolean;
@@ -574,9 +633,14 @@ 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(() => {
         // 上下移动也需要调整可视区域范围
-        this.scrollToView(sourceItem);
+        if (virtualizedManager.isVirtualized) {
+          this.scrollToCellView({ cellIndex: sourceIndex });
+        } else {
+          this.scrollToView(sourceItem);
+        }
       }, 300);
       return true;
     }