@difizen/libro-core 0.3.3 → 1.0.0

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

@@ -1,21 +1,108 @@
-import { getOrigin, useInject, useObserve, ViewInstance } from '@difizen/mana-app';
+import {
+  getOrigin,
+  useInject,
+  useObserve,
+  ViewInstance,
+} from '@difizen/libro-common/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 +246,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 +487,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

@@ -1,4 +1,4 @@
-import { prop, singleton } from '@difizen/mana-app';
+import { prop, singleton } from '@difizen/libro-common/app';
 
 export interface IVirtualizedManager {
   openVirtualized: (length: number, size?: number) => Promise<boolean>;
@@ -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/components/libro-component.tsx

@@ -1,5 +1,5 @@
-import { ViewRender } from '@difizen/mana-app';
-import { useInject } from '@difizen/mana-app';
+import { ViewRender } from '@difizen/libro-common/app';
+import { useInject } from '@difizen/libro-common/app';
 import { useEffect, useState } from 'react';
 
 import type { NotebookOption, NotebookView } from '../libro-protocol.js';

package/src/components/libro-side-toolbar-menu.tsx

@@ -1,11 +1,11 @@
-import type { Toolbar } from '@difizen/mana-app';
+import { Menu, MenuContext } from '@difizen/libro-common/react';
+import type { Toolbar } from '@difizen/libro-common/app';
 import {
   CommandRegistry,
   getOrigin,
   ToolbarInstance,
   useInject,
-} from '@difizen/mana-app';
-import { Menu, MenuContext } from '@difizen/mana-react';
+} from '@difizen/libro-common/app';
 import type { ReactNode } from 'react';
 
 import type { LibroToolbarArags } from '../toolbar/index.js';

package/src/components/libro-view-header.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ToolbarRender, useInject, ViewInstance } from '@difizen/mana-app';
+import { ToolbarRender, useInject, ViewInstance } from '@difizen/libro-common/app';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 

package/src/content/libro-content-contribution.ts

@@ -1,4 +1,4 @@
-import { singleton } from '@difizen/mana-app';
+import { singleton } from '@difizen/libro-common/app';
 
 import { ContentContribution } from './libro-content-protocol.js';
 

package/src/content/libro-content-module.ts

@@ -1,4 +1,4 @@
-import { ManaModule } from '@difizen/mana-app';
+import { ManaModule } from '@difizen/libro-common/app';
 
 import { DefaultContentContribution } from './libro-content-contribution.js';
 import {

package/src/content/libro-content-protocol.ts

@@ -1,5 +1,5 @@
 import type { INotebookContent } from '@difizen/libro-common';
-import { Syringe } from '@difizen/mana-app';
+import { Syringe } from '@difizen/libro-common/app';
 
 export const ContentContribution = Syringe.defineToken('ContentContribution');
 export interface ContentContribution {

package/src/content/libro-content-service.ts

@@ -1,5 +1,5 @@
-import type { Contribution } from '@difizen/mana-app';
-import { contrib, Priority, singleton } from '@difizen/mana-app';
+import type { Contribution } from '@difizen/libro-common/app';
+import { contrib, Priority, singleton } from '@difizen/libro-common/app';
 
 import {
   ContentContribution,

package/src/content/libro-save-content-contribution.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { singleton } from '@difizen/mana-app';
+import { singleton } from '@difizen/libro-common/app';
 
 import { ContentSaveContribution } from './libro-content-protocol.js';
 

package/src/formatter/libro-formatter-json-contribution.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { concatMultilineString } from '@difizen/libro-common';
-import { singleton } from '@difizen/mana-app';
+import { singleton } from '@difizen/libro-common/app';
 
 import {
   DefaultDecodedFormatter,

package/src/formatter/libro-formatter-manager.ts

@@ -1,5 +1,5 @@
-import type { Contribution } from '@difizen/mana-app';
-import { contrib, Priority, singleton } from '@difizen/mana-app';
+import type { Contribution } from '@difizen/libro-common/app';
+import { contrib, Priority, singleton } from '@difizen/libro-common/app';
 
 import { CellModelContribution } from '../cell/index.js';
 

package/src/formatter/libro-formatter-module.ts

@@ -1,4 +1,4 @@
-import { ManaModule } from '@difizen/mana-app';
+import { ManaModule } from '@difizen/libro-common/app';
 
 import { FormatterJsonContribution } from './libro-formatter-json-contribution.js';
 import { LibroFormatterManager } from './libro-formatter-manager.js';

package/src/formatter/libro-formatter-protocol.ts

@@ -1,5 +1,5 @@
 import type { MultilineString } from '@difizen/libro-common';
-import { Syringe } from '@difizen/mana-app';
+import { Syringe } from '@difizen/libro-common/app';
 
 export const FormatterContribution = Syringe.defineToken('FormatterContribution');
 

package/src/formatter/libro-formatter-string-contribution.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { concatMultilineString } from '@difizen/libro-common';
-import { singleton } from '@difizen/mana-app';
+import { singleton } from '@difizen/libro-common/app';
 
 import type { DefaultEncodedFormatter } from './libro-formatter-protocol.js';
 import {

package/src/formatter/libro-formatter-trans-default-contribution.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { singleton } from '@difizen/mana-app';
+import { singleton } from '@difizen/libro-common/app';
 
 import type { DefaultDecodedFormatter } from './libro-formatter-protocol.js';
 import { FormatterTransContribution } from './libro-formatter-protocol.js';

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);