@difizen/libro-core 0.1.0 → 0.1.2

package/es/components/dnd-component/default-dnd-content.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import 'resize-observer-polyfill';
 import type { CellView, DndContentProps } from '../../libro-protocol.js';
 import { BetweenCellProvider } from '../cell-protocol.js';
 export interface Dragparams {
     cell: CellView;
     index: number;
 }
-export declare const DefaultDndContent: React.FC<DndContentProps>;
+export declare const DndCellContainer: React.FC<DndContentProps>;
 export declare const LibroBetweenCellContent: BetweenCellProvider;
 //# sourceMappingURL=default-dnd-content.d.ts.map

package/es/components/dnd-component/default-dnd-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-dnd-content.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/default-dnd-content.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAQpF,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAIzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsPvD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,mBAIrC,CAAC"}
+{"version":3,"file":"default-dnd-content.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/default-dnd-content.tsx"],"names":[],"mappings":"AAIA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,0BAA0B,CAAC;AAMlC,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAKzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkTtD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,mBAIrC,CAAC"}

package/es/components/dnd-component/default-dnd-content.js

@@ -1,30 +1,32 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useConfigurationValue } from '@difizen/mana-app';
+/* eslint-disable react-hooks/exhaustive-deps */
 import { getOrigin, useInject, ViewInstance } from '@difizen/mana-app';
-import React, { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import { useConfigurationValue } from '@difizen/mana-app';
+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 { CellService } from "../../cell/index.js";
+import 'resize-observer-polyfill';
+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 { MultiSelectionWhenShiftClick } from "../../libro-setting.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";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var DefaultDndContent = function DefaultDndContent(_ref) {
+export var DndCellContainer = function DndCellContainer(_ref) {
   var _instance$container;
   var cell = _ref.cell,
     index = _ref.index;
@@ -34,10 +36,39 @@ export var DefaultDndContent = function DefaultDndContent(_ref) {
     _useConfigurationValu2 = _slicedToArray(_useConfigurationValu, 1),
     multiSelectionWhenShiftClick = _useConfigurationValu2[0];
   var BetweenCellContent = useInject(BetweenCellProvider);
-  var cellService = useInject(CellService);
+  var cellService = useInject(LibroCellService);
+  var virtualizedManagerHelper = useInject(VirtualizedManagerHelper);
+  var virtualizedManager = virtualizedManagerHelper.getOrCreate(cell.parent.model);
   var dragDropManager = useDragDropManager();
   var dragDropMonitor = dragDropManager.getMonitor();
   var ItemRender = getOrigin(instance.dndItemRender);
+  useLayoutEffect(function () {
+    if (_typeof(ref) !== 'object') {
+      return function () {
+        //
+      };
+    }
+    var el = ref === null || ref === void 0 ? void 0 : ref.current;
+    if (!el) {
+      return function () {
+        //
+      };
+    }
+    var resizeObserver = new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var isVisible = entry.contentRect.width !== 0 && entry.contentRect.height !== 0;
+        if (isVisible) {
+          var _ref$current;
+          cell.noEditorAreaHeight = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) || 0;
+        }
+      });
+    });
+    resizeObserver.observe(el);
+    return function () {
+      cell.noEditorAreaHeight = 0;
+      resizeObserver.disconnect();
+    };
+  }, [ref, cell]);
   var handleFocus = useCallback(function (e) {
     var className = e.target.className;
     if (e.target.tagName === 'svg' || className && className && typeof className === 'string' && (className.includes('mana-toolbar-item') || className.includes('mana-toolbar'))) {
@@ -65,6 +96,8 @@ export var DefaultDndContent = function DefaultDndContent(_ref) {
     instance.model.selectCell(cell);
     instance.model.selections = [];
   }, [instance, cell]);
+  var scrollTimer = useRef(null);
+  var unsubscribe = useRef(null);
   var _useDrag = useDrag({
       type: DragAreaKey,
       item: {
@@ -78,41 +111,45 @@ export var DefaultDndContent = function DefaultDndContent(_ref) {
       },
       end: function end() {
         instance.isDragging = false;
+        if (scrollTimer.current) {
+          clearInterval(scrollTimer.current);
+        }
       }
     }, [cell, index]),
     _useDrag2 = _slicedToArray(_useDrag, 3),
     isDrag = _useDrag2[0].isDrag,
     drag = _useDrag2[1],
     preview = _useDrag2[2];
-  dragDropMonitor.subscribeToStateChange(function () {
-    instance.isDragging = dragDropMonitor.isDragging();
-  });
   var libroViewContent = (_instance$container = instance.container) === null || _instance$container === void 0 || (_instance$container = _instance$container.current) === null || _instance$container === void 0 ? void 0 : _instance$container.getElementsByClassName('libro-view-content')[0];
-  var scrollTimer = useRef(null);
   useEffect(function () {
-    scrollTimer.current = setInterval(function () {
-      var currentOffset = dragDropMonitor.getClientOffset();
-      if (libroViewContent && instance.isDragging && currentOffset) {
-        var libroViewClientRect = libroViewContent.getBoundingClientRect();
-        var top = libroViewClientRect.top,
-          bottom = libroViewClientRect.bottom;
-        var y = currentOffset.y;
-        var topLimit = top + 30;
-        var bottomLimit = bottom - 50;
-        if (y < topLimit) {
-          libroViewContent.scrollTop -= 0.5;
-        } else if (y > bottomLimit) {
-          libroViewContent.scrollTop += 0.5;
+    unsubscribe.current = dragDropMonitor.subscribeToStateChange(function () {
+      instance.isDragging = dragDropMonitor.isDragging();
+      scrollTimer.current = setInterval(function () {
+        var currentOffset = dragDropMonitor.getClientOffset();
+        if (libroViewContent && instance.isDragging && currentOffset) {
+          var libroViewClientRect = libroViewContent.getBoundingClientRect();
+          var top = libroViewClientRect.top,
+            bottom = libroViewClientRect.bottom;
+          var y = currentOffset.y;
+          var topLimit = top + 30;
+          var bottomLimit = bottom - 50;
+          if (y < topLimit) {
+            libroViewContent.scrollTop -= 0.5;
+          } else if (y > bottomLimit) {
+            libroViewContent.scrollTop += 0.5;
+          }
         }
-      }
-    }, 10);
-    return function () {
-      if (scrollTimer.current) {
-        clearInterval(scrollTimer.current);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      }, 10);
+      return function () {
+        if (scrollTimer.current) {
+          clearInterval(scrollTimer.current);
+        }
+        if (unsubscribe.current) {
+          unsubscribe.current();
+        }
+      };
+    });
+  }, [dragDropMonitor]);
   useEffect(function () {
     // This gets called after every render, by default
     // (the first one, and every one after that)
@@ -134,7 +171,7 @@ export var DefaultDndContent = function DefaultDndContent(_ref) {
         }), item.cell.parent.id).then(function (view) {
           view.dispose();
           return;
-        }).catch(function () {
+        }).catch(function (e) {
           //
         });
         if (isCellView(item.cell)) {
@@ -156,17 +193,35 @@ export var DefaultDndContent = function DefaultDndContent(_ref) {
             }
             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;
@@ -191,17 +246,18 @@ export var DefaultDndContent = function DefaultDndContent(_ref) {
   if (isDrag) {
     instance.model.mouseMode = 'drag';
   }
-  var isSelected = instance.isSelected(cell);
+  var isMultiSelected = instance.model.selections.length !== 0 && instance.isSelected(cell);
   // let isMouseOver = false;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMouseOverDragArea = _useState2[0],
     setIsMouseOverDragArea = _useState2[1];
-  var hasCellHidden = cell.hasCellHidden();
-  var hasErrorOutputs = hasErrorOutput(cell);
+  var hasCellHidden = useMemo(function () {
+    return cell.hasCellHidden();
+  }, [cell]);
   var isCollapsible = CellCollapsible.is(cell);
   return /*#__PURE__*/_jsxs("div", {
-    className: "libro-dnd-cell-container ".concat(isSelected ? 'selected' : '', " ").concat(hasCellHidden ? 'hidden' : ''),
+    className: "libro-dnd-cell-container ".concat(isMultiSelected ? 'multi-selected' : '', " ").concat(hasCellHidden ? 'hidden' : ''),
     "data-handler-id": handlerId,
     style: {
       opacity: opacity
@@ -231,7 +287,7 @@ export var DefaultDndContent = function DefaultDndContent(_ref) {
       onFocus: handleFocus
       // onClick={e => e.preventDefault()}
       ,
-      className: "libro-dnd-cell-content ".concat(hasErrorOutputs ? 'error' : ''),
+      className: "libro-dnd-cell-content",
       children: /*#__PURE__*/_jsx(ItemRender, {
         isDragOver: !!isDragOver,
         isDrag: !!isDrag,

package/es/components/dnd-component/dnd-context.js

@@ -1,5 +1,5 @@
-import { ViewInstance } from '@difizen/mana-app';
 import { getOrigin, useInject } from '@difizen/mana-app';
+import { ViewInstance } from '@difizen/mana-app';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/components/dnd-component/dnd-list.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" resolution-mode="require"/>
+import type { FC, ReactNode } from 'react';
+import type { DndContentProps } from '../../libro-protocol.js';
 import type { LibroView } from '../../libro-view.js';
-export declare const DndCellContent: import("react").ForwardRefExoticComponent<{
+import './index.less';
+export declare const DndCellRender: FC<DndContentProps>;
+export declare const DndCellsRender: import("react").ForwardRefExoticComponent<{
     libroView: LibroView;
+    addCellButtons: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
-export declare function DndList({ libroView, children, }: {
+export declare const DndList: import("react").ForwardRefExoticComponent<{
     libroView: LibroView;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=dnd-list.d.ts.map

package/es/components/dnd-component/dnd-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dnd-list.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/dnd-list.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAcrD,eAAO,MAAM,cAAc;eAA2C,SAAS;kDAqB9E,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,GAAG,CAAC;CACf,2CAiEA"}
+{"version":3,"file":"dnd-list.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/dnd-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3C,OAAO,KAAK,EAAY,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAY5C,CAAC;AAaH,eAAO,MAAM,cAAc;eAEZ,SAAS;oBAAkB,SAAS;kDAsFjD,CAAC;AAEH,eAAO,MAAM,OAAO;eAEL,SAAS;cAAY,SAAS;kDA2E3C,CAAC"}

package/es/components/dnd-component/dnd-list.js

@@ -14,48 +14,113 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { getOrigin, useInject, useObserve, ViewInstance } from '@difizen/mana-app';
-import { forwardRef, memo } from 'react';
+import classNames from 'classnames';
+import { forwardRef, memo, useEffect, useState } from 'react';
 import { useDrop } from 'react-dnd';
 import { LibroCellService } from "../../cell/index.js";
 import { DragAreaKey, isCellView } from "../../libro-protocol.js";
+import { VirtualizedManagerHelper } from "../../virtualized-manager-helper.js";
+import { LibroCellsOutputRender } from "../libro-virtualized-render.js";
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var DndContent = function DndContent(_ref) {
+export var DndCellRender = /*#__PURE__*/memo(function DndCellRender(_ref) {
   var cell = _ref.cell,
     index = _ref.index,
     props = _objectWithoutProperties(_ref, _excluded);
   var observableCell = useObserve(cell);
   var instance = useInject(ViewInstance);
-  var DndContentRender = instance.dndContentRender;
-  return /*#__PURE__*/_jsx(DndContentRender, _objectSpread({
+  var DndCellContainer = instance.dndContentRender;
+  return /*#__PURE__*/_jsx(DndCellContainer, _objectSpread({
     cell: observableCell,
     index: index
   }, props), cell.id);
+});
+
+// 定义一个函数用于渲染非虚拟列表时的单元格
+var renderNonVirtualListCells = function renderNonVirtualListCells(cells) {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      height: '100%',
+      overflow: 'visible'
+    },
+    children: cells.filter(function (cell) {
+      return !cell.collapsedHidden;
+    }).map(function (cell, index) {
+      return /*#__PURE__*/_jsx(DndCellRender, {
+        cell: cell,
+        index: index
+      }, cell.id);
+    })
+  });
 };
-var DndContentMemo = /*#__PURE__*/memo(DndContent);
-export var DndCellContent = /*#__PURE__*/forwardRef(function DndCellContent(_ref2, ref) {
-  var libroView = _ref2.libroView;
+export var DndCellsRender = /*#__PURE__*/forwardRef(function DndCellsRender(_ref2, ref) {
+  var libroView = _ref2.libroView,
+    addCellButtons = _ref2.addCellButtons;
   var LoadingRender = getOrigin(libroView.loadingRender);
+  var virtualizedManagerHelper = useInject(VirtualizedManagerHelper);
+  var virtualizedManager = virtualizedManagerHelper.getOrCreate(libroView.model);
   var cells = libroView.model.getCells().reduce(function (a, b) {
     if (a.indexOf(b) < 0) {
       a.push(b);
     }
     return a;
   }, []);
-  return /*#__PURE__*/_jsxs("div", {
-    className: "libro-dnd-cells-container",
-    ref: ref,
-    children: [!libroView.model.isInitialized && /*#__PURE__*/_jsx(LoadingRender, {}), libroView.model.isInitialized && cells.filter(function (cell) {
-      return cell.collapsedHidden === false;
-    }).map(function (cell, index) {
-      return /*#__PURE__*/_jsx(DndContentMemo, {
-        cell: cell,
-        index: index
-      }, cell.id);
-    })]
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVirtualList = _useState2[0],
+    setIsVirtualList = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isJudging = _useState4[0],
+    setIsJudging = _useState4[1];
+  useEffect(function () {
+    if (!libroView.model.isInitialized) {
+      return;
+    }
+    var size = undefined;
+    var path = undefined;
+
+    // TODO: 类型处理
+    var model = libroView.model;
+    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(function (willOpen) {
+      setIsVirtualList(willOpen);
+      return;
+    }).catch(function () {
+      setIsVirtualList(false);
+    }).finally(function () {
+      setIsJudging(false);
+    }).catch(function (e) {
+      //
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [virtualizedManager, libroView.model.isInitialized]);
+  var isInitialized = libroView.model.isInitialized;
+  var isLoading = !isInitialized || isJudging;
+  var shouldRenderCells = isInitialized && !isJudging;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classNames('libro-dnd-cells-container', isVirtualList && 'virtual_list_container'),
+      ref: ref,
+      children: [isLoading && /*#__PURE__*/_jsx(LoadingRender, {}), /*#__PURE__*/_jsx(_Fragment, {
+        children: shouldRenderCells && /*#__PURE__*/_jsx(_Fragment, {
+          children: isVirtualList ? /*#__PURE__*/_jsx(LibroCellsOutputRender, {
+            cells: cells,
+            libroView: libroView,
+            addCellButtons: addCellButtons
+          }) : renderNonVirtualListCells(cells)
+        })
+      })]
+    }), shouldRenderCells && !isVirtualList && addCellButtons]
   });
 });
-export function DndList(_ref3) {
+export var DndList = /*#__PURE__*/forwardRef(function DndList(_ref3, ref) {
   var libroView = _ref3.libroView,
     children = _ref3.children;
   var cellService = useInject(LibroCellService);
@@ -67,8 +132,9 @@ export function DndList(_ref3) {
             modelId: item.cell.model.id,
             singleSelectionDragPreview: true
           }), item.cell.parent.id).then(function (view) {
-            return view.dispose();
-          }).catch(function () {
+            view.dispose();
+            return;
+          }).catch(function (e) {
             //
           });
           if (isCellView(item.cell)) {
@@ -105,11 +171,12 @@ export function DndList(_ref3) {
     }),
     _useDrop2 = _slicedToArray(_useDrop, 2),
     drop = _useDrop2[1];
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "libro-dnd-list-container",
     ref: drop,
-    children: [/*#__PURE__*/_jsx(DndCellContent, {
-      libroView: libroView
-    }), children]
+    children: /*#__PURE__*/_jsx(DndCellsRender, {
+      libroView: libroView,
+      addCellButtons: children
+    })
   });
-}
+});

package/es/components/dnd-component/index.d.ts

@@ -1,5 +1,5 @@
+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';
 //# sourceMappingURL=index.d.ts.map

package/es/components/dnd-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/index.tsx"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/index.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/es/components/dnd-component/index.js

@@ -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";
+export * from "./dnd-list.js";

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

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

package/es/components/dnd-component/overscanIndices-getter.d.ts

@@ -0,0 +1,22 @@
+export type OverscanIndicesGetterParams = {
+    direction: 'horizontal' | 'vertical';
+    scrollDirection: -1 | 1;
+    cellCount: number;
+    overscanCellsCount: number;
+    startIndex: number;
+    stopIndex: number;
+};
+export type OverscanIndices = {
+    overscanStartIndex: number;
+    overscanStopIndex: number;
+};
+export declare const SCROLL_DIRECTION_BACKWARD = -1;
+export declare const SCROLL_DIRECTION_FORWARD = 1;
+export declare const SCROLL_DIRECTION_HORIZONTAL = "horizontal";
+export declare const SCROLL_DIRECTION_VERTICAL = "vertical";
+/**
+ * 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;
+//# sourceMappingURL=overscanIndices-getter.d.ts.map

package/es/components/dnd-component/overscanIndices-getter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overscanIndices-getter.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/overscanIndices-getter.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG;IAExC,SAAS,EAAE,YAAY,GAAG,UAAU,CAAC;IAGrC,eAAe,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IAGxB,SAAS,EAAE,MAAM,CAAC;IAGlB,kBAAkB,EAAE,MAAM,CAAC;IAG3B,UAAU,EAAE,MAAM,CAAC;IAGnB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAC5C,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAE1C,eAAO,MAAM,2BAA2B,eAAe,CAAC;AACxD,eAAO,MAAM,yBAAyB,aAAa,CAAC;AAIpD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EACjD,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,SAAS,GACV,EAAE,2BAA2B,GAAG,eAAe,CAgD/C"}

package/es/components/dnd-component/overscanIndices-getter.js

@@ -0,0 +1,58 @@
+export var SCROLL_DIRECTION_BACKWARD = -1;
+export var SCROLL_DIRECTION_FORWARD = 1;
+export var SCROLL_DIRECTION_HORIZONTAL = 'horizontal';
+export var SCROLL_DIRECTION_VERTICAL = 'vertical';
+var overscanIndicesCache = 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(_ref) {
+  var cellCount = _ref.cellCount,
+    overscanCellsCount = _ref.overscanCellsCount,
+    scrollDirection = _ref.scrollDirection,
+    startIndex = _ref.startIndex,
+    stopIndex = _ref.stopIndex;
+  // 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 的函数
+  var calculateOverscanIndices = function calculateOverscanIndices() {
+    var _overscanCellsCount = Math.max(1, overscanCellsCount);
+    var 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;
+  };
+
+  // 检查缓存和时间戳函数
+  var checkCacheAndTimestamp = function checkCacheAndTimestamp() {
+    if (cellCount === 1) {
+      // 'horizontal' 方向 不用缓存
+      var overscanIndices = calculateOverscanIndices();
+      return overscanIndices;
+    }
+    if (overscanIndicesCache && Date.now() - overscanIndicesCache.timestamp < 500) {
+      return overscanIndicesCache.value;
+    } else {
+      var _overscanIndices = calculateOverscanIndices();
+      overscanIndicesCache = {
+        value: _overscanIndices,
+        timestamp: Date.now()
+      };
+      return _overscanIndices;
+    }
+  };
+  return checkCacheAndTimestamp();
+}

package/es/components/dnd-component/virtualized-manager.d.ts

@@ -0,0 +1,19 @@
+export interface IVirtualizedManager {
+    openVirtualized: (length: number, size?: number) => Promise<boolean>;
+    isVirtualized: boolean;
+}
+export declare class VirtualizedManager implements IVirtualizedManager {
+    /**
+     * 因为进行isVirtualized判断过后才会渲染list
+     * 所以它用于滚动到某个cell的判断依据是没有问题的。
+     */
+    isVirtualized: boolean;
+    /**
+     *
+     * @param length cell个数
+     * @param size undefined 或者 单位 为B
+     * @returns 是否使用虚拟滚动
+     */
+    openVirtualized: (length: number, size?: number) => Promise<boolean>;
+}
+//# sourceMappingURL=virtualized-manager.d.ts.map

package/es/components/dnd-component/virtualized-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualized-manager.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/virtualized-manager.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACrE,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,qBACa,kBAAmB,YAAW,mBAAmB;IAC5D;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;;;OAKG;IACH,eAAe,WAAkB,MAAM,SAAS,MAAM,sBAUpD;CACH"}