@difizen/libro-core 0.1.1 → 0.1.3

package/src/components/dnd-component/default-dnd-content.tsx

@@ -1,18 +1,29 @@
-import { useConfigurationValue } from '@difizen/mana-app';
+/* eslint-disable react-hooks/exhaustive-deps */
 import { getOrigin, useInject, ViewInstance } from '@difizen/mana-app';
+import { useConfigurationValue } from '@difizen/mana-app';
 import type { Identifier } from 'dnd-core';
-import React, { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+} from 'react';
 import { useDrag, useDragDropManager, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
+import 'resize-observer-polyfill';
 
-import { CellService } from '../../cell/index.js';
+import type { CellService } from '../../cell/index.js';
+import { LibroCellService } from '../../cell/index.js';
 import { CellCollapsible } from '../../collapse-service.js';
-import { MultiSelectionWhenShiftClick } from '../../configuration/libro-configuration.js';
-import { isCellView, DragAreaKey } from '../../libro-protocol.js';
+import { DragAreaKey, isCellView } from '../../libro-protocol.js';
 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 { hasErrorOutput } from '../../output/index.js';
+import { VirtualizedManagerHelper } from '../../virtualized-manager-helper.js';
 import { BetweenCellProvider } from '../cell-protocol.js';
 
 export interface Dragparams {
@@ -20,17 +31,51 @@ export interface Dragparams {
   index: number;
 }
 
-export const DefaultDndContent: React.FC<DndContentProps> = ({ cell, index }) => {
+export const DndCellContainer: React.FC<DndContentProps> = ({ cell, index }) => {
   const ref = useRef<HTMLDivElement>(null);
   const instance = useInject<LibroView>(ViewInstance);
   const [multiSelectionWhenShiftClick] = useConfigurationValue(
     MultiSelectionWhenShiftClick,
   );
   const BetweenCellContent = useInject<BetweenCellProvider>(BetweenCellProvider);
-  const cellService = useInject<CellService>(CellService);
+  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);
+
+  useLayoutEffect(() => {
+    if (typeof ref !== 'object') {
+      return () => {
+        //
+      };
+    }
+    const el = ref?.current;
+    if (!el) {
+      return () => {
+        //
+      };
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const isVisible =
+          entry.contentRect.width !== 0 && entry.contentRect.height !== 0;
+
+        if (isVisible) {
+          cell.noEditorAreaHeight = ref.current?.clientHeight || 0;
+        }
+      });
+    });
+
+    resizeObserver.observe(el as HTMLElement);
+    return () => {
+      cell.noEditorAreaHeight = 0;
+      resizeObserver.disconnect();
+    };
+  }, [ref, cell]);
+
   const handleFocus = useCallback(
     (e: React.FocusEvent<HTMLElement>) => {
       const className = (e.target as HTMLDivElement).className;
@@ -75,6 +120,9 @@ export const DefaultDndContent: React.FC<DndContentProps> = ({ cell, index }) =>
     instance.model.selections = [];
   }, [instance, cell]);
 
+  const scrollTimer = useRef<null | NodeJS.Timeout>(null);
+  const unsubscribe = useRef<null | any>(null);
+
   const [{ isDrag }, drag, preview] = useDrag(
     {
       type: DragAreaKey,
@@ -84,40 +132,46 @@ export const DefaultDndContent: React.FC<DndContentProps> = ({ cell, index }) =>
       }),
       end() {
         instance.isDragging = false;
+        if (scrollTimer.current) {
+          clearInterval(scrollTimer.current);
+        }
       },
     },
     [cell, index],
   );
-  dragDropMonitor.subscribeToStateChange(() => {
-    instance.isDragging = dragDropMonitor.isDragging();
-  });
+
   const libroViewContent = instance.container?.current?.getElementsByClassName(
     'libro-view-content',
   )[0] as HTMLElement;
-  const scrollTimer = useRef<null | NodeJS.Timeout>(null);
+
   useEffect(() => {
-    scrollTimer.current = setInterval(() => {
-      const currentOffset = dragDropMonitor.getClientOffset();
-      if (libroViewContent && instance.isDragging && currentOffset) {
-        const libroViewClientRect = libroViewContent.getBoundingClientRect();
-        const { top, bottom } = libroViewClientRect;
-        const { y } = currentOffset;
-        const topLimit = top + 30;
-        const bottomLimit = bottom - 50;
-        if (y < topLimit) {
-          libroViewContent.scrollTop -= 0.5;
-        } else if (y > bottomLimit) {
-          libroViewContent.scrollTop += 0.5;
+    unsubscribe.current = dragDropMonitor.subscribeToStateChange(() => {
+      instance.isDragging = dragDropMonitor.isDragging();
+      scrollTimer.current = setInterval(() => {
+        const currentOffset = dragDropMonitor.getClientOffset();
+        if (libroViewContent && instance.isDragging && currentOffset) {
+          const libroViewClientRect = libroViewContent.getBoundingClientRect();
+          const { top, bottom } = libroViewClientRect;
+          const { y } = currentOffset;
+          const topLimit = top + 30;
+          const bottomLimit = bottom - 50;
+          if (y < topLimit) {
+            libroViewContent.scrollTop -= 0.5;
+          } else if (y > bottomLimit) {
+            libroViewContent.scrollTop += 0.5;
+          }
         }
-      }
-    }, 10);
-    return () => {
-      if (scrollTimer.current) {
-        clearInterval(scrollTimer.current);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      }, 10);
+      return () => {
+        if (scrollTimer.current) {
+          clearInterval(scrollTimer.current);
+        }
+        if (unsubscribe.current) {
+          unsubscribe.current();
+        }
+      };
+    });
+  }, [dragDropMonitor]);
 
   useEffect(() => {
     // This gets called after every render, by default
@@ -155,7 +209,7 @@ export const DefaultDndContent: React.FC<DndContentProps> = ({ cell, index }) =>
           view.dispose();
           return;
         })
-        .catch(() => {
+        .catch((e) => {
           //
         });
       if (isCellView(item.cell)) {
@@ -183,17 +237,31 @@ export const DefaultDndContent: React.FC<DndContentProps> = ({ cell, index }) =>
           }
           if (isDragInSelections) {
             instance.model.exchangeCells(instance.model.selections, dropIndex);
-            instance.model.scrollToView(cell);
+            if (virtualizedManager.isVirtualized) {
+              instance.model.scrollToCellView({ cellIndex: dropIndex });
+            } else {
+              instance.model.scrollToView(cell);
+            }
+
             return;
           }
         }
         if (dragIndex < dropIndex) {
           instance.model.exchangeCell(dragIndex, dropIndex - 1);
-          instance.model.scrollToView(cell);
+
+          if (virtualizedManager.isVirtualized) {
+            instance.model.scrollToCellView({ cellIndex: dropIndex });
+          } else {
+            instance.model.scrollToView(cell);
+          }
         }
         if (dragIndex > dropIndex) {
           instance.model.exchangeCell(dragIndex, dropIndex);
-          instance.model.scrollToView(cell);
+          if (virtualizedManager.isVirtualized) {
+            instance.model.scrollToCellView({ cellIndex: dropIndex });
+          } else {
+            instance.model.scrollToView(cell);
+          }
         }
       }
       return;
@@ -214,15 +282,18 @@ export const DefaultDndContent: React.FC<DndContentProps> = ({ cell, index }) =>
     instance.model.mouseMode = 'drag';
   }
 
-  const isSelected = instance.isSelected(cell);
+  const isMultiSelected =
+    instance.model.selections.length !== 0 && instance.isSelected(cell);
   // let isMouseOver = false;
   const [isMouseOverDragArea, setIsMouseOverDragArea] = useState(false);
-  const hasCellHidden = cell.hasCellHidden();
-  const hasErrorOutputs = hasErrorOutput(cell);
+  const hasCellHidden = useMemo(() => {
+    return cell.hasCellHidden();
+  }, [cell]);
   const isCollapsible = CellCollapsible.is(cell);
+
   return (
     <div
-      className={`libro-dnd-cell-container ${isSelected ? 'selected' : ''} ${
+      className={`libro-dnd-cell-container ${isMultiSelected ? 'multi-selected' : ''} ${
         hasCellHidden ? 'hidden' : ''
       }`}
       data-handler-id={handlerId}
@@ -245,7 +316,7 @@ export const DefaultDndContent: React.FC<DndContentProps> = ({ cell, index }) =>
         tabIndex={-1}
         onFocus={handleFocus}
         // onClick={e => e.preventDefault()}
-        className={`libro-dnd-cell-content ${hasErrorOutputs ? 'error' : ''}`}
+        className="libro-dnd-cell-content"
       >
         <ItemRender
           isDragOver={!!isDragOver}

package/src/components/dnd-component/dnd-context.tsx

@@ -1,5 +1,5 @@
-import { ViewInstance } from '@difizen/mana-app';
 import { getOrigin, useInject } from '@difizen/mana-app';
+import { ViewInstance } from '@difizen/mana-app';
 import type { FC } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';

package/src/components/dnd-component/dnd-list.tsx

@@ -1,57 +1,149 @@
 import { getOrigin, useInject, useObserve, ViewInstance } from '@difizen/mana-app';
-import type { FC } from 'react';
-import { forwardRef, memo } from 'react';
+import classNames from 'classnames';
+import type { FC, ReactNode } from 'react';
+import { forwardRef, memo, useEffect, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrop } from 'react-dnd';
 
-import { LibroCellService } from '../../cell/index.js';
 import type { CellService } from '../../cell/index.js';
-import { DragAreaKey, isCellView } from '../../libro-protocol.js';
+import { LibroCellService } from '../../cell/index.js';
 import type { CellView, DndContentProps } from '../../libro-protocol.js';
+import { DragAreaKey, isCellView } from '../../libro-protocol.js';
 import type { LibroView } from '../../libro-view.js';
+import { VirtualizedManagerHelper } from '../../virtualized-manager-helper.js';
+import { LibroCellsOutputRender } from '../libro-virtualized-render.js';
 
 import type { Dragparams } from './default-dnd-content.js';
+import './index.less';
 
-const DndContent: FC<DndContentProps> = ({ cell, index, ...props }) => {
+export const DndCellRender: FC<DndContentProps> = memo(function DndCellRender({
+  cell,
+  index,
+  ...props
+}: DndContentProps) {
   const observableCell = useObserve(cell);
   const instance = useInject<LibroView>(ViewInstance);
-  const DndContentRender = instance.dndContentRender;
+  const DndCellContainer = instance.dndContentRender;
+
   return (
-    <DndContentRender cell={observableCell} key={cell.id} index={index} {...props} />
+    <DndCellContainer cell={observableCell} key={cell.id} index={index} {...props} />
   );
-};
-const DndContentMemo = memo(DndContent);
-
-export const DndCellContent = forwardRef<HTMLDivElement, { libroView: LibroView }>(
-  function DndCellContent({ libroView }, ref) {
-    const LoadingRender = getOrigin(libroView.loadingRender);
-    const cells = libroView.model.getCells().reduce<CellView[]>(function (a, b) {
-      if (a.indexOf(b) < 0) {
-        a.push(b);
-      }
-      return a;
-    }, []);
-    return (
-      <div className="libro-dnd-cells-container" ref={ref}>
-        {!libroView.model.isInitialized && <LoadingRender />}
-        {libroView.model.isInitialized &&
-          cells
-            .filter((cell) => cell.collapsedHidden === false)
-            .map((cell, index) => {
-              return <DndContentMemo cell={cell} key={cell.id} index={index} />;
-            })}
-      </div>
-    );
-  },
+});
+
+// 定义一个函数用于渲染非虚拟列表时的单元格
+const renderNonVirtualListCells = (cells: CellView[]) => (
+  <div style={{ height: '100%', overflow: 'visible' }}>
+    {cells
+      .filter((cell) => !cell.collapsedHidden)
+      .map((cell, index) => (
+        <DndCellRender cell={cell} key={cell.id} index={index} />
+      ))}
+  </div>
 );
 
-export function DndList({
-  libroView,
-  children,
-}: {
-  libroView: LibroView;
-  children: any;
-}) {
+export const DndCellsRender = forwardRef<
+  HTMLDivElement,
+  { libroView: LibroView; addCellButtons: ReactNode }
+>(function DndCellsRender(
+  { libroView, addCellButtons }: { libroView: LibroView; addCellButtons: ReactNode },
+  ref,
+) {
+  const LoadingRender = getOrigin(libroView.loadingRender);
+  const virtualizedManagerHelper = useInject(VirtualizedManagerHelper);
+  const virtualizedManager = virtualizedManagerHelper.getOrCreate(libroView.model);
+
+  const cells = libroView.model.getCells().reduce<CellView[]>(function (a, b) {
+    if (a.indexOf(b) < 0) {
+      a.push(b);
+    }
+    return a;
+  }, []);
+
+  const [isVirtualList, setIsVirtualList] = useState<boolean>(false);
+  const [isJudging, setIsJudging] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (!libroView.model.isInitialized) {
+      return;
+    }
+
+    let size = undefined;
+    let path = undefined;
+
+    // TODO: 类型处理
+    const model = libroView.model as any;
+    if (model.currentFileContents && model.currentFileContents.size) {
+      size = parseFloat((model.currentFileContents.size / 1048576).toFixed(3)); // 单位MB
+      path = model.currentFileContents.path || '';
+    }
+
+    setIsJudging(true);
+    virtualizedManager
+      .openVirtualized(cells.length, size, path)
+      .then((willOpen) => {
+        setIsVirtualList(willOpen);
+        return;
+      })
+      .catch(() => {
+        setIsVirtualList(false);
+      })
+      .finally(() => {
+        setIsJudging(false);
+      })
+      .catch((e) => {
+        //
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [virtualizedManager, libroView.model.isInitialized]);
+
+  const isInitialized = libroView.model.isInitialized;
+  const isLoading = !isInitialized || isJudging;
+  const shouldRenderCells = isInitialized && !isJudging;
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'libro-dnd-cells-container',
+          isVirtualList && 'virtual_list_container',
+        )}
+        ref={ref}
+      >
+        {isLoading && <LoadingRender />}
+        <>
+          {shouldRenderCells && (
+            <>
+              {isVirtualList ? (
+                <LibroCellsOutputRender
+                  cells={cells}
+                  libroView={libroView}
+                  addCellButtons={addCellButtons}
+                />
+              ) : (
+                renderNonVirtualListCells(cells)
+              )}
+            </>
+          )}
+        </>
+      </div>
+      {shouldRenderCells && !isVirtualList && addCellButtons}
+    </>
+  );
+});
+
+export const DndList = forwardRef<
+  HTMLDivElement,
+  { libroView: LibroView; children: ReactNode }
+>(function DndList(
+  {
+    libroView,
+    children,
+  }: {
+    libroView: LibroView;
+    children: ReactNode;
+  },
+  ref,
+) {
   const cellService = useInject<CellService>(LibroCellService);
 
   const [, drop] = useDrop<Dragparams>(() => ({
@@ -67,9 +159,10 @@ export function DndList({
           item.cell.parent.id,
         )
         .then((view) => {
-          return view.dispose();
+          view.dispose();
+          return;
         })
-        .catch(() => {
+        .catch((e) => {
           //
         });
       if (isCellView(item.cell)) {
@@ -112,8 +205,7 @@ export function DndList({
 
   return (
     <div className="libro-dnd-list-container" ref={drop}>
-      <DndCellContent libroView={libroView} />
-      {children}
+      <DndCellsRender libroView={libroView} addCellButtons={children} />
     </div>
   );
-}
+});

package/src/components/dnd-component/index.less

@@ -0,0 +1,8 @@
+.virtual_list_container {
+  height: 100%;
+  width: 100%;
+
+  // .ReactVirtualized__Grid__innerScrollContainer {
+  //   overflow: auto !important;
+  // }
+}

package/src/components/dnd-component/index.tsx

@@ -1,4 +1,4 @@
+export * from './custom-drag-layer.js';
 export * from './default-dnd-content.js';
 export * from './dnd-context.js';
 export * from './dnd-list.js';
-export * from './custom-drag-layer.js';

package/src/components/dnd-component/overscanIndices-getter.ts

@@ -0,0 +1,92 @@
+export type OverscanIndicesGetterParams = {
+  // One of SCROLL_DIRECTION_HORIZONTAL or SCROLL_DIRECTION_VERTICAL
+  direction: 'horizontal' | 'vertical';
+
+  // One of SCROLL_DIRECTION_BACKWARD or SCROLL_DIRECTION_FORWARD
+  scrollDirection: -1 | 1;
+
+  // Number of rows or columns in the current axis
+  cellCount: number;
+
+  // Maximum number of cells to over-render in either direction
+  overscanCellsCount: number;
+
+  // Begin of range of visible cells
+  startIndex: number;
+
+  // End of range of visible cells
+  stopIndex: number;
+};
+
+export type OverscanIndices = {
+  overscanStartIndex: number;
+  overscanStopIndex: number;
+};
+
+export const SCROLL_DIRECTION_BACKWARD = -1;
+export const SCROLL_DIRECTION_FORWARD = 1;
+
+export const SCROLL_DIRECTION_HORIZONTAL = 'horizontal';
+export const SCROLL_DIRECTION_VERTICAL = 'vertical';
+
+let overscanIndicesCache: { value: any; timestamp: number } | null = null;
+
+/**
+ * Calculates the number of cells to overscan before and after a specified range.
+ * This function ensures that overscanning doesn't exceed the available cells.
+ */
+export default function libroOverscanIndicesGetter({
+  cellCount,
+  overscanCellsCount,
+  scrollDirection,
+  startIndex,
+  stopIndex,
+}: OverscanIndicesGetterParams): OverscanIndices {
+  // Make sure we render at least 1 cell extra before and after (except near boundaries)
+  // This is necessary in order to support keyboard navigation (TAB/SHIFT+TAB) in some cases
+  // For more info see issues #625
+
+  // 计算 overscanIndices 的函数
+  const calculateOverscanIndices = () => {
+    const _overscanCellsCount = Math.max(1, overscanCellsCount);
+
+    let overscanIndices = null;
+
+    if (scrollDirection === SCROLL_DIRECTION_FORWARD) {
+      overscanIndices = {
+        overscanStartIndex: Math.max(0, startIndex - 1),
+        overscanStopIndex: Math.min(cellCount - 1, stopIndex + _overscanCellsCount),
+      };
+    } else {
+      overscanIndices = {
+        overscanStartIndex: Math.max(0, startIndex - _overscanCellsCount),
+        overscanStopIndex: Math.min(cellCount - 1, stopIndex + 1),
+      };
+    }
+
+    return overscanIndices;
+  };
+
+  // 检查缓存和时间戳函数
+  const checkCacheAndTimestamp = () => {
+    if (cellCount === 1) {
+      // 'horizontal' 方向 不用缓存
+      const overscanIndices = calculateOverscanIndices();
+      return overscanIndices;
+    }
+
+    if (overscanIndicesCache && Date.now() - overscanIndicesCache.timestamp < 500) {
+      return overscanIndicesCache.value;
+    } else {
+      const overscanIndices = calculateOverscanIndices();
+      overscanIndicesCache = {
+        value: overscanIndices,
+        timestamp: Date.now(),
+      };
+
+      return overscanIndices;
+    }
+  };
+
+  return checkCacheAndTimestamp();
+}

package/src/components/dnd-component/virtualized-manager.ts

@@ -0,0 +1,34 @@
+import { prop, singleton } from '@difizen/mana-app';
+
+export interface IVirtualizedManager {
+  openVirtualized: (length: number, size?: number) => Promise<boolean>;
+  isVirtualized: boolean;
+}
+
+@singleton()
+export class VirtualizedManager implements IVirtualizedManager {
+  /**
+   * 因为进行isVirtualized判断过后才会渲染list
+   * 所以它用于滚动到某个cell的判断依据是没有问题的。
+   */
+  @prop()
+  isVirtualized = false;
+
+  /**
+   *
+   * @param length cell个数
+   * @param size undefined 或者 单位 为B
+   * @returns 是否使用虚拟滚动
+   */
+  openVirtualized = async (length: number, size?: number) => {
+    // this.isVirtualized = true;
+    // return true;
+    if (length > 100 || (size && size > 4)) {
+      this.isVirtualized = true;
+      return true;
+    } else {
+      this.isVirtualized = false;
+      return false;
+    }
+  };
+}

package/src/components/index.ts

@@ -1,5 +1,5 @@
-export * from './libro-component.js';
-export * from './dnd-component/index.js';
 export * from './cell-protocol.js';
 export * from './dnd-cell-item-render.js';
+export * from './dnd-component/index.js';
+export * from './libro-component.js';
 export * from './libro-side-toolbar-menu.js';