@difizen/libro-core 0.3.2 → 0.3.4

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

@@ -1,21 +1,103 @@
 import { getOrigin, useInject, useObserve, ViewInstance } from '@difizen/mana-app';
 import classNames from 'classnames';
+import { throttle } from 'lodash';
 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 {
+  useRef,
+  useCallback,
+  createContext,
+  useMemo,
+  forwardRef,
+  memo,
+  useEffect,
+  useState,
+} from 'react';
+import { createRoot } from 'react-dom/client';
 
 import type { CellService } from '../../cell/index.js';
+import { ExecutableCellModel } 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 { 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';
 
+interface IDragContextType {
+  dragOverIndex?: number;
+  isDraging: boolean;
+  sourceIndex?: number;
+  onDragStart: (e: React.DragEvent, index: number) => void;
+  onDragOver: (e: React.DragEvent, index: number) => void;
+  onDrop: (e: React.DragEvent, index: number) => void;
+  onDragEnd: (e?: React.DragEvent, index?: number) => void;
+  fragFromRef: any;
+}
+
+export const DragContext = createContext<IDragContextType>({
+  dragOverIndex: undefined,
+  isDraging: false,
+  sourceIndex: undefined,
+  onDragStart: () => {
+    return;
+  },
+  onDragOver: () => {
+    return;
+  },
+  onDrop: () => {
+    return;
+  },
+  onDragEnd: () => {
+    return;
+  },
+  fragFromRef: {},
+});
+
+const MultipleImageCompnent = ({ selections }: { selections: CellView[] }) => {
+  const firstCell = selections[0];
+  const executable = ExecutableCellModel.is(firstCell.model);
+  const executeState =
+    ExecutableCellModel.is(firstCell.model) && !firstCell.model.executing
+      ? firstCell.model.executeCount || ' '
+      : '*';
+  return (
+    <div className="libro-drag-image-container">
+      <div className="libro-cell-drag-image-input-container">
+        {executable && (
+          <pre className="libro-execute-state-tip">{`[${executeState}]:`}</pre>
+        )}
+        <pre className="cell-drag-image-input">
+          <code>{firstCell.model.value}</code>
+        </pre>
+        <div className="libro-dnd-cascading-multiple-selection" />
+      </div>
+    </div>
+  );
+};
+
+const CellImageComponent = ({ cell }: { cell: CellView }) => {
+  const executable = ExecutableCellModel.is(cell.model);
+  const executeState =
+    ExecutableCellModel.is(cell.model) && !cell.model.executing
+      ? cell.model.executeCount || ' '
+      : '*';
+
+  return (
+    <div className="libro-single-drag-image-container">
+      <div className="libro-cell-drag-image-input-container">
+        {executable && (
+          <pre className="libro-execute-state-tip">{`[${executeState}]:`}</pre>
+        )}
+        <pre className="cell-drag-image-input">
+          <code>{cell.model.value}</code>
+        </pre>
+      </div>
+    </div>
+  );
+};
+
 export const DndCellRender: FC<DndContentProps> = memo(function DndCellRender({
   cell,
   index,
@@ -159,44 +241,236 @@ export const DndList = forwardRef<
   ref,
 ) {
   const cellService = useInject<CellService>(LibroCellService);
+  const [isDraging, setIsDraging] = useState<boolean>(false);
+  const [dragOverIndex, setDragOverIndex] = useState<number>();
+  const [sourceIndex, setSourceIndex] = useState<number>();
+  const followNodeRef = useRef<HTMLDivElement>();
+  const editorScrollRef = useRef<HTMLDivElement>();
+  const multipleImageRef = useRef<HTMLDivElement>();
+  const singleImageRef = useRef<HTMLDivElement>();
+  const fragFromRef = useRef<string>('');
+  useEffect(() => {
+    const multipleDrag = document.getElementById('libro-multiple-drag-container');
+    if (multipleDrag) {
+      multipleImageRef.current = multipleDrag as HTMLDivElement;
+    } else {
+      multipleImageRef.current = document.createElement('div');
+      multipleImageRef.current.id = 'libro-multiple-drag-container';
+      document.body.appendChild(multipleImageRef.current);
+    }
+
+    const singleDrag = document.getElementById('libro-single-drag-container');
+    if (singleDrag) {
+      singleImageRef.current = singleDrag as HTMLDivElement;
+    } else {
+      singleImageRef.current = document.createElement('div');
+      singleImageRef.current.id = 'libro-single-drag-container';
+      document.body.appendChild(singleImageRef.current);
+    }
+  }, []);
 
-  const [, drop] = useDrop<Dragparams>(() => ({
-    accept: DragAreaKey,
-    drop(item, dropMonitor) {
+  const clearSelects = useCallback(() => {
+    if (libroView.model.selections.length > 0) {
+      libroView.model.selections = [];
+    }
+  }, [libroView.model]);
+
+  const exchangeCellIndex = useCallback(
+    (sourceCellIndex: number, targetIndex: number) => {
+      const sourceCellView = libroView.model.cells[sourceCellIndex];
+      if (!sourceCellView) {
+        return;
+      }
       cellService
         .getOrCreateView(
           {
-            ...item.cell.model.options,
-            modelId: item.cell.model.id,
+            ...sourceCellView.model.options,
+            modelId: sourceCellView.model.id,
             singleSelectionDragPreview: true,
           },
-          item.cell.parent.id,
+          sourceCellView.parent.id,
         )
-        .then((view) => {
+        .then((view: { dispose: () => void }) => {
           view.dispose();
           return;
         })
-        .catch((e) => {
+        .catch(() => {
           //
         });
-      if (isCellView(item.cell)) {
-        const didDrop = dropMonitor.didDrop();
-        if (didDrop) {
+      if (isCellView(sourceCellView)) {
+        const targetCell = libroView.model.cells[targetIndex];
+        if (sourceCellIndex < targetIndex) {
+          libroView.model.exchangeCell(sourceCellIndex, targetIndex);
+          libroView.model.scrollToView(targetCell);
+        }
+        if (sourceCellIndex > targetIndex) {
+          libroView.model.exchangeCell(sourceCellIndex, targetIndex);
+          libroView.model.scrollToView(targetCell);
+        }
+      }
+    },
+    [cellService, libroView.model],
+  );
+
+  const onDragStart = useCallback(
+    async (e: React.DragEvent, sourceCellIndex: number) => {
+      e.dataTransfer.setData('libro_notebook_drag_text', `${sourceCellIndex}`);
+      fragFromRef.current = 'cell';
+      e.dataTransfer.effectAllowed = 'move';
+
+      const selectCells: CellView[] = libroView.model.selections;
+
+      const childNode = (e.target as HTMLElement).parentElement?.getElementsByClassName(
+        'libro-cell-input-content',
+      )[0] as HTMLDivElement;
+
+      // 多选cell拖拽排序
+      const sourceCellView = libroView.model.cells[sourceCellIndex];
+      if (
+        selectCells.length > 0 &&
+        selectCells.findIndex((selection) => selection.id === sourceCellView.id) > -1 &&
+        multipleImageRef.current
+      ) {
+        const root = createRoot(multipleImageRef.current);
+        root.render(<MultipleImageCompnent selections={selectCells} />);
+        // 清除编辑器中无效元素宽度（只针对e2编辑器）
+        const editorScrollNodex = childNode?.getElementsByClassName(
+          'erd_scroll_detection_container',
+        )[0];
+        if (editorScrollNodex) {
+          editorScrollRef.current = editorScrollNodex as HTMLDivElement;
+          (editorScrollNodex as HTMLDivElement).style.display = 'none';
+        }
+        e.dataTransfer.setDragImage(multipleImageRef.current, 0, 0);
+      } else {
+        if (!childNode) {
+          return;
+        }
+        // 拖拽单个cell排序
+        clearSelects();
+        if (childNode.clientHeight > 300) {
+          followNodeRef.current = childNode;
+          childNode.style.maxHeight = '300px';
+          childNode.style.overflow = 'hidden';
+        }
+
+        if (singleImageRef.current) {
+          const root = createRoot(singleImageRef.current);
+          root.render(<CellImageComponent cell={sourceCellView} />);
+          e.dataTransfer.setDragImage(singleImageRef.current, 0, 0);
+        }
+      }
+      setSourceIndex(sourceCellIndex);
+      setIsDraging(true);
+    },
+    [clearSelects, libroView.model.cells, libroView.model.selections],
+  );
+
+  const onDragOver = useCallback((e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    throttle(() => {
+      setDragOverIndex(index);
+    }, 1000)();
+  }, []);
+
+  const onDrop = useCallback(
+    (e: React.DragEvent, index: number) => {
+      e.preventDefault();
+      const sourceCellIndex = e.dataTransfer.getData('libro_notebook_drag_text');
+      setIsDraging(false);
+      setDragOverIndex(undefined);
+      setSourceIndex(undefined);
+      const _sourceIndex = Number(sourceCellIndex || 0);
+      if (libroView.model.selections.length > 0) {
+        const sourceCellView = libroView.model.cells[_sourceIndex];
+        const dropCellView = libroView.model.cells[index];
+        const isDragInSelections = libroView.model.selections.some(
+          (selection: { id: string }) => selection.id === sourceCellView.id,
+        );
+        const isDropInSelections = libroView.model.selections.some(
+          (selection: { id: string }) => selection.id === dropCellView.id,
+        );
+        if (isDragInSelections && isDropInSelections) {
+          return;
+        }
+        if (isDragInSelections) {
+          libroView.model.exchangeCells(libroView.model.selections, index);
+          libroView.model.scrollToView(dropCellView);
+        }
+        return;
+      }
+      if (_sourceIndex === index) {
+        return;
+      }
+      exchangeCellIndex(_sourceIndex, index);
+    },
+    [exchangeCellIndex, libroView.model],
+  );
+
+  const onDragEnd = useCallback((e?: React.DragEvent) => {
+    e?.dataTransfer.clearData();
+    setIsDraging(false);
+    setDragOverIndex(undefined);
+    setSourceIndex(undefined);
+    if (followNodeRef.current) {
+      followNodeRef.current.style.maxHeight = 'unset';
+      followNodeRef.current.style.overflow = 'unset';
+    }
+    if (editorScrollRef.current) {
+      editorScrollRef.current.style.display = 'unset';
+    }
+
+    fragFromRef.current = '';
+  }, []);
+
+  const dragContextValue = useMemo(() => {
+    return {
+      dragOverIndex,
+      isDraging,
+      sourceIndex,
+      onDragStart,
+      onDragOver,
+      onDrop,
+      onDragEnd,
+      fragFromRef,
+    };
+  }, [
+    dragOverIndex,
+    isDraging,
+    onDragEnd,
+    onDragOver,
+    onDragStart,
+    onDrop,
+    sourceIndex,
+    fragFromRef,
+  ]);
+
+  return (
+    <div
+      className="libro-dnd-list-container"
+      onDragOver={(e) => {
+        e.preventDefault();
+      }}
+      onDrop={(e) => {
+        if (fragFromRef.current !== 'cell') {
           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 sourceCellIndex = e.dataTransfer.getData('libro_notebook_drag_text');
+        const _sourceIndex = Number(sourceCellIndex || 0);
+
         const lastCell =
           libroView.model.getCells()[libroView.model.getCells().length - 1];
         const lastCellOffsetY = lastCell.container?.current?.getBoundingClientRect().y;
-        if (lastCellOffsetY && clientOffsetY >= lastCellOffsetY) {
+        if (lastCellOffsetY && e.clientY >= lastCellOffsetY) {
+          e.preventDefault();
+          if (_sourceIndex === undefined) {
+            return;
+          }
           if (libroView.model.selections.length > 0) {
             const isDragInSelections =
               libroView.model.selections.findIndex(
-                (selection) => selection.id === item.cell.id,
+                (selection) =>
+                  selection.id === libroView.model.getCells()[_sourceIndex].id,
               ) > -1
                 ? true
                 : false;
@@ -208,18 +482,13 @@ export const DndList = forwardRef<
               return;
             }
           }
-          libroView.model.exchangeCell(dragIndex, libroView.model.cells.length - 1);
+          exchangeCellIndex(_sourceIndex, libroView.model.cells.length - 1);
         }
-      }
-      // Determine mouse position
-
-      return;
-    },
-  }));
-
-  return (
-    <div className="libro-dnd-list-container" ref={drop}>
-      <DndCellsRender libroView={libroView} addCellButtons={children} />
+      }}
+    >
+      <DragContext.Provider value={dragContextValue}>
+        <DndCellsRender libroView={libroView} addCellButtons={children} />
+      </DragContext.Provider>
     </div>
   );
 });

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

@@ -10,3 +10,87 @@
 .libro-dnd-cells-container {
   padding-top: 8px;
 }
+
+#libro-multiple-drag-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -2;
+  height: 0;
+}
+
+#libro-single-drag-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -2;
+}
+
+.libro-drag-image-container,
+.libro-single-drag-image-container {
+  margin: 8px;
+
+  .libro-cell-drag-image-input-container {
+    position: relative;
+    display: flex;
+    padding: 12px;
+    background-color: var(--mana-libro-background);
+  }
+
+  .cell-drag-image-input {
+    z-index: 100;
+    max-height: 68px;
+    max-width: 300px;
+    min-height: 40px;
+    min-width: 100px;
+    overflow: hidden;
+    padding: 8px;
+    border: 1px solid var(--mana-libro-cell-border-color);
+    border-radius: 4px;
+    background: var(--mana-libro-input-background);
+  }
+
+  .libro-execute-state-tip {
+    padding-right: 8px;
+    color: var(--mana-libro-execution-count-color);
+    font-size: 11px;
+    vertical-align: top;
+    user-select: none;
+  }
+}
+
+.libro-dnd-cascading-multiple-selection {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  width: calc(100% - 60px);
+  height: calc(100% - 30px);
+  border: 1px solid var(--mana-libro-cell-border-color);
+  border-radius: 4px;
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 8%),
+    0 3px 6px -4px rgba(0, 0, 0, 12%),
+    0 9px 28px 8px rgba(0, 0, 0, 5%);
+}
+
+.libro-drag-hoverline {
+  position: absolute;
+  top: -2px;
+  left: 56px;
+  z-index: 100;
+  width: calc(100% - 70px);
+  height: 4px;
+  background-color: var(--mana-libro-drag-hover-line-color);
+  border-radius: 2px;
+}
+
+.libro-drag-hoverline-last-one {
+  position: absolute;
+  left: 56px;
+  bottom: -2px;
+  z-index: 100;
+  width: calc(100% - 70px);
+  height: 4px;
+  background-color: var(--mana-libro-drag-hover-line-color);
+  border-radius: 2px;
+}

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

@@ -1,4 +1,2 @@
-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/virtualized-manager.ts

@@ -20,15 +20,18 @@ export class VirtualizedManager implements IVirtualizedManager {
    * @param size undefined 或者 单位 为B
    * @returns 是否使用虚拟滚动
    */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   openVirtualized = async (length: number, size?: number) => {
+    this.isVirtualized = false;
+    return false;
     // this.isVirtualized = true;
     // return true;
-    if (length > 100 || (size && size > 4)) {
-      this.isVirtualized = true;
-      return true;
-    } else {
-      this.isVirtualized = false;
-      return false;
-    }
+    // if (length > 100 || (size && size > 4)) {
+    //   this.isVirtualized = true;
+    //   return true;
+    // } else {
+    //   this.isVirtualized = false;
+    //   return false;
+    // }
   };
 }

package/src/index.less

@@ -315,17 +315,6 @@
   border: 1px solid var(--mana-color-border);
 }
 
-.libro-dnd-cascading-multiple-selection {
-  position: absolute;
-  top: -10px;
-  left: -10px;
-  z-index: 100;
-  width: 700px;
-  height: 40px;
-  background-color: var(--mana-color-bg-container);
-  border: 1px solid var(--mana-color-border);
-}
-
 .libro-cell-container {
   position: relative;
   background-color: var(--mana-color-bg-container);
@@ -558,17 +547,6 @@
   cursor: move;
 }
 
-.libro-drag-hoverline {
-  position: absolute;
-  top: -2px;
-  left: 56px;
-  z-index: 100;
-  width: calc(100% - 70px);
-  height: 4px;
-  background-color: var(--mana-libro-drag-hover-line-color);
-  border-radius: 2px;
-}
-
 .libro-view-content-left {
   position: relative;
   width: calc(100% - 20px);

package/src/libro-model.ts

@@ -640,7 +640,7 @@ export class LibroModel implements NotebookModel, DndListModel {
         //往上交换cell
         if (startIndex === this.activeIndex) {
           //active在头
-          this.activeIndex = targetIndex - source.length;
+          this.activeIndex = targetIndex;
         } else {
           //active在尾
           this.activeIndex = targetIndex + 1;

package/src/libro-view.tsx

@@ -41,13 +41,7 @@ import type { LibroCell } from './cell/index.js';
 import type { LibroCellModel } from './cell/libro-cell-model.js';
 import { CollapseServiceFactory } from './collapse-service.js';
 import type { CollapseService } from './collapse-service.js';
-import {
-  CustomDragLayer,
-  DndCellContainer,
-  DndCellItemRender,
-  DndContext,
-  DndList,
-} from './components/index.js';
+import { DndCellContainer, DndCellItemRender, DndList } from './components/index.js';
 import { LibroViewHeader } from './components/libro-view-header.js';
 import { LibroContextKey } from './libro-context-key.js';
 import { LibroModel } from './libro-model.js';
@@ -81,7 +75,6 @@ export interface ClipboardType {
 
 export const LibroContentComponent = memo(function LibroContentComponent() {
   const libroSlotManager = useInject(LibroSlotManager);
-  const ref = useRef<HTMLDivElement | null>(null);
   const libroViewTopRef = useRef<HTMLDivElement>(null);
   const libroViewRightContentRef = useRef<HTMLDivElement>(null);
   const libroViewLeftContentRef = useRef<HTMLDivElement>(null);
@@ -173,15 +166,12 @@ export const LibroContentComponent = memo(function LibroContentComponent() {
           style={leftContentStyles}
           ref={libroViewLeftContentRef}
         >
-          <DndContext>
-            <CustomDragLayer />
-            <DndList libroView={instance} ref={ref}>
-              <Slot
-                name={libroSlotManager.getSlotName(instance, 'list')}
-                slotView={LibroSlotView}
-              />
-            </DndList>
-          </DndContext>
+          <DndList libroView={instance}>
+            <Slot
+              name={libroSlotManager.getSlotName(instance, 'list')}
+              slotView={LibroSlotView}
+            />
+          </DndList>
         </div>
         <div
           className="libro-view-content-right"
@@ -742,13 +732,15 @@ export class LibroView extends BaseView implements NotebookView {
       this.collapseCell(previousCell, false);
     }
     if (this.model.selections.length !== 0 && this.isSelected(cell)) {
-      for (const selectedCell of this.model.selections) {
-        const selectIndex = this.findCellIndex(selectedCell);
-        if (selectIndex === 0) {
-          return;
-        }
-        this.model.exchangeCells(this.model.selections, selectIndex - 1);
+      const startIndex = this.findCellIndex(this.model.selections[0]);
+      const endIndex = this.findCellIndex(
+        this.model.selections[this.model.selections.length - 1],
+      );
+      const index = Math.min(startIndex, endIndex);
+      if (startIndex === 0) {
+        return;
       }
+      this.model.exchangeCells(this.model.selections, index - 1);
     } else {
       const sourceIndex = this.findCellIndex(cell);
       if (sourceIndex > -1) {
@@ -764,13 +756,14 @@ export class LibroView extends BaseView implements NotebookView {
       this.collapseCell(nextCell, false);
     }
     if (this.model.selections.length !== 0 && this.isSelected(cell)) {
-      for (let i = this.model.selections.length - 1; i > -1; i--) {
-        const selectIndex = this.findCellIndex(this.model.selections[i]);
-        if (selectIndex === this.model.cells.length - 1) {
-          return;
-        }
-        this.model.exchangeCells(this.model.selections, selectIndex + 1);
+      const startIndex = this.findCellIndex(this.model.selections[0]) + 1;
+      const endIndex =
+        this.findCellIndex(this.model.selections[this.model.selections.length - 1]) + 1;
+      const index = Math.max(startIndex, endIndex);
+      if (index === this.model.cells.length) {
+        return;
       }
+      this.model.exchangeCells(this.model.selections, index + 1);
     } else {
       const sourceIndex = this.findCellIndex(cell);
       if (sourceIndex > -1) {

package/src/virtualized-manager.ts

@@ -34,14 +34,16 @@ export class VirtualizedManager implements IVirtualizedManager {
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   openVirtualized = async (length: number, size?: number, path?: string) => {
+    this.isVirtualized = false;
+    return false;
     // this.isVirtualized = true;
     // return true;
-    if (length > 100 || (size && size > 4)) {
-      this.isVirtualized = true;
-      return true;
-    } else {
-      this.isVirtualized = false;
-      return false;
-    }
+    // if (length > 100 || (size && size > 4)) {
+    //   this.isVirtualized = true;
+    //   return true;
+    // } else {
+    //   this.isVirtualized = false;
+    //   return false;
+    // }
   };
 }

package/es/components/dnd-component/custom-drag-layer.d.ts

@@ -1,9 +0,0 @@
-import type { FC } from 'react';
-import type { CellView } from '../../libro-protocol.js';
-export interface SelectionPreviewProps {
-    activeCell: CellView;
-}
-export declare const MultipleSelectionPreviewMemo: FC<SelectionPreviewProps>;
-export declare const SingleSelectionPreviewMemo: FC<SelectionPreviewProps>;
-export declare const CustomDragLayer: () => import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=custom-drag-layer.d.ts.map

package/es/components/dnd-component/custom-drag-layer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-drag-layer.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/custom-drag-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAiB,MAAM,OAAO,CAAC;AAO/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGxD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,QAAQ,CAAC;CACtB;AAoDD,eAAO,MAAM,4BAA4B,EAAE,EAAE,CAAC,qBAAqB,CAElE,CAAC;AA+BF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,qBAAqB,CAEhE,CAAC;AAEF,eAAO,MAAM,eAAe,sDAuC3B,CAAC"}