@difizen/libro-core 0.0.0-snapshot-20241017072317

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

@@ -0,0 +1,330 @@
+/* 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, {
+  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 type { CellService } from '../../cell/index.js';
+import { LibroCellService } from '../../cell/index.js';
+import { CellCollapsible } from '../../collapse-service.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 { BetweenCellProvider } from '../cell-protocol.js';
+
+export interface Dragparams {
+  cell: CellView;
+  index: number;
+}
+
+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>(LibroCellService);
+  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;
+      if (
+        (e.target as HTMLDivElement).tagName === 'svg' ||
+        (className &&
+          className &&
+          typeof className === 'string' &&
+          (className.includes('mana-toolbar-item') ||
+            className.includes('mana-toolbar')))
+      ) {
+        return;
+      }
+      instance.model.selectCell(cell);
+      instance.model.selections = [];
+      if (cell.shouldEnterEditorMode(e)) {
+        instance.enterEditMode();
+      }
+    },
+    [instance, cell],
+  );
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.shiftKey && multiSelectionWhenShiftClick) {
+        //按shift键时为多选cell
+        instance.extendContiguousSelectionTo(index);
+        instance.model.mouseMode = 'multipleSelection';
+        return;
+      }
+      instance.model.mouseMode = 'mouseDown';
+    },
+    [multiSelectionWhenShiftClick, instance, index],
+  );
+  const handleMouseUp = useCallback(() => {
+    if (
+      instance.model.mouseMode === 'multipleSelection' ||
+      instance.model.mouseMode === 'drag'
+    ) {
+      return;
+    }
+    instance.model.selectCell(cell);
+    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,
+      item: { cell, index },
+      collect: (monitor) => ({
+        isDrag: monitor.isDragging(),
+      }),
+      end() {
+        instance.isDragging = false;
+        if (scrollTimer.current) {
+          clearInterval(scrollTimer.current);
+        }
+      },
+    },
+    [cell, index],
+  );
+
+  const libroViewContent = instance.container?.current?.getElementsByClassName(
+    'libro-view-content',
+  )[0] as HTMLElement;
+
+  useEffect(() => {
+    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);
+        }
+        if (unsubscribe.current) {
+          unsubscribe.current();
+        }
+      };
+    });
+  }, [dragDropMonitor]);
+
+  useEffect(() => {
+    // This gets called after every render, by default
+    // (the first one, and every one after that)
+
+    // Use empty image as a drag preview so browsers don't draw it
+    // and we can draw whatever we want on the custom drag layer instead.
+    preview(getEmptyImage(), {
+      // IE fallback: specify that we'd rather screenshot the node
+      // when it already knows it's being dragged so we can hide it with CSS.
+      captureDraggingState: true,
+    });
+  }, [preview]);
+
+  const [{ handlerId, isDragOver }, drop] = useDrop<
+    Dragparams,
+    void,
+    {
+      handlerId: Identifier | null;
+      isDragOver: boolean;
+    }
+  >({
+    accept: DragAreaKey,
+    drop(item, monitor) {
+      cellService
+        .getOrCreateView(
+          {
+            ...item.cell.model.options,
+            modelId: item.cell.model.id,
+            singleSelectionDragPreview: true,
+          },
+          item.cell.parent.id,
+        )
+        .then((view) => {
+          view.dispose();
+          return;
+        })
+        .catch((e) => {
+          //
+        });
+      if (isCellView(item.cell)) {
+        const didDrop = monitor.didDrop();
+        if (didDrop) {
+          return;
+        }
+        const dragIndex = instance.findCellIndex(item.cell);
+        const dropIndex = instance.findCellIndex(cell);
+        if (instance.model.selections.length > 0) {
+          const isDragInSelections =
+            instance.model.selections.findIndex(
+              (selection) => selection.id === item.cell.id,
+            ) > -1
+              ? true
+              : false;
+          const isDropInSelections =
+            instance.model.selections.findIndex(
+              (selection) => selection.id === cell.id,
+            ) > -1
+              ? true
+              : false;
+          if (isDragInSelections && isDropInSelections) {
+            return;
+          }
+          if (isDragInSelections) {
+            instance.model.exchangeCells(instance.model.selections, dropIndex);
+            instance.model.scrollToView(cell);
+
+            return;
+          }
+        }
+        if (dragIndex < dropIndex) {
+          instance.model.exchangeCell(dragIndex, dropIndex - 1);
+          instance.model.scrollToView(cell);
+        }
+        if (dragIndex > dropIndex) {
+          instance.model.exchangeCell(dragIndex, dropIndex);
+          instance.model.scrollToView(cell);
+        }
+      }
+      return;
+    },
+    collect(monitor) {
+      return {
+        isDragOver: monitor.isOver(),
+        canDrop: monitor.canDrop(),
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+  });
+  const opacity = isDrag ? 0.4 : 1;
+  if (instance.model.cellsEditable) {
+    drop(ref);
+  }
+  if (isDrag) {
+    instance.model.mouseMode = 'drag';
+  }
+
+  const isMultiSelected =
+    instance.model.selections.length !== 0 && instance.isSelected(cell);
+  // let isMouseOver = false;
+  const [isMouseOverDragArea, setIsMouseOverDragArea] = useState(false);
+  const hasCellHidden = useMemo(() => {
+    return cell.hasCellHidden();
+  }, [cell]);
+  const isCollapsible = CellCollapsible.is(cell);
+
+  return (
+    <div
+      className={`libro-dnd-cell-container ${isMultiSelected ? 'multi-selected' : ''} ${
+        hasCellHidden ? 'hidden' : ''
+      }`}
+      data-handler-id={handlerId}
+      style={{ opacity }}
+      ref={ref}
+      id={cell.id}
+    >
+      <BetweenCellContent index={index} addCell={cell.parent.addCellAbove} />
+      {isDragOver && <div className="libro-drag-hoverline" />}
+      {isMouseOverDragArea && <HolderOutlined className="libro-handle-style" />}
+      <div
+        className="libro-drag-area"
+        ref={drag}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseOver={() => setIsMouseOverDragArea(true)}
+        onMouseLeave={() => setIsMouseOverDragArea(false)}
+      />
+      <div
+        tabIndex={-1}
+        onFocus={handleFocus}
+        // onClick={e => e.preventDefault()}
+        className="libro-dnd-cell-content"
+      >
+        <ItemRender
+          isDragOver={!!isDragOver}
+          isDrag={!!isDrag}
+          cell={cell}
+          isMouseOverDragArea={isMouseOverDragArea}
+        />
+      </div>
+      {isCollapsible && cell.headingCollapsed && cell.collapsibleChildNumber > 0 && (
+        <div className="libro-cell-collapsed-expander">
+          <button
+            className="libro-cell-expand-button"
+            onClick={() => instance.collapseCell(cell, false)}
+          >
+            <PlusOutlined className="" /> {cell.collapsibleChildNumber} cell hidden
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const LibroBetweenCellContent: BetweenCellProvider = forwardRef(
+  function LibroBetweenCellContent() {
+    return null;
+  },
+);

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

@@ -0,0 +1,28 @@
+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';
+
+import type { LibroView } from '../../libro-view.js';
+
+export const DndContext: FC<any> = ({ children }) => {
+  const instance = useInject<LibroView>(ViewInstance);
+
+  if (!instance.isVisible && !instance.model.dndAreaNullEnable) {
+    return null;
+  }
+  return (
+    <DndProvider
+      backend={HTML5Backend}
+      options={{
+        rootElement:
+          instance.isVisible || !instance.model.dndAreaNullEnable
+            ? getOrigin(instance).container?.current
+            : null,
+      }}
+    >
+      {children}
+    </DndProvider>
+  );
+};

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

@@ -0,0 +1,211 @@
+import { getOrigin, useInject, useObserve, ViewInstance } from '@difizen/mana-app';
+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 type { CellService } from '../../cell/index.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';
+
+export const DndCellRender: FC<DndContentProps> = memo(function DndCellRender({
+  cell,
+  index,
+  ...props
+}: DndContentProps) {
+  const observableCell = useObserve(cell);
+  const instance = useInject<LibroView>(ViewInstance);
+  const DndCellContainer = instance.dndContentRender;
+
+  return (
+    <DndCellContainer cell={observableCell} key={cell.id} index={index} {...props} />
+  );
+});
+
+// 定义一个函数用于渲染非虚拟列表时的单元格
+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 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>(() => ({
+    accept: DragAreaKey,
+    drop(item, dropMonitor) {
+      cellService
+        .getOrCreateView(
+          {
+            ...item.cell.model.options,
+            modelId: item.cell.model.id,
+            singleSelectionDragPreview: true,
+          },
+          item.cell.parent.id,
+        )
+        .then((view) => {
+          view.dispose();
+          return;
+        })
+        .catch((e) => {
+          //
+        });
+      if (isCellView(item.cell)) {
+        const didDrop = dropMonitor.didDrop();
+        if (didDrop) {
+          return;
+        }
+        // Determine mouse position
+        const clientOffset = dropMonitor.getClientOffset();
+        const clientOffsetY = (clientOffset as XYCoord).y;
+        const dragIndex = libroView.findCellIndex(item.cell);
+        // Determine rectangle on screen
+        const lastCell =
+          libroView.model.getCells()[libroView.model.getCells().length - 1];
+        const lastCellOffsetY = lastCell.container?.current?.getBoundingClientRect().y;
+        if (lastCellOffsetY && clientOffsetY >= lastCellOffsetY) {
+          if (libroView.model.selections.length > 0) {
+            const isDragInSelections =
+              libroView.model.selections.findIndex(
+                (selection) => selection.id === item.cell.id,
+              ) > -1
+                ? true
+                : false;
+            if (isDragInSelections) {
+              libroView.model.exchangeCells(
+                libroView.model.selections,
+                libroView.model.cells.length,
+              );
+              return;
+            }
+          }
+          libroView.model.exchangeCell(dragIndex, libroView.model.cells.length - 1);
+        }
+      }
+      // Determine mouse position
+
+      return;
+    },
+  }));
+
+  return (
+    <div className="libro-dnd-list-container" ref={drop}>
+      <DndCellsRender libroView={libroView} addCellButtons={children} />
+    </div>
+  );
+});

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

@@ -0,0 +1,12 @@
+.virtual_list_container {
+  height: 100%;
+  width: 100%;
+
+  // .ReactVirtualized__Grid__innerScrollContainer {
+  //   overflow: auto !important;
+  // }
+}
+
+.libro-dnd-cells-container {
+  padding-top: 8px;
+}

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

@@ -0,0 +1,4 @@
+export * from './custom-drag-layer.js';
+export * from './default-dnd-content.js';
+export * from './dnd-context.js';
+export * from './dnd-list.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();
+}