@difizen/libro-core 0.0.2-alpha.0

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

@@ -0,0 +1,275 @@
+import { useConfigurationValue } from '@difizen/mana-app';
+import { getOrigin, useInject, ViewInstance } from '@difizen/mana-app';
+import type { Identifier } from 'dnd-core';
+import React, { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import { useDrag, useDragDropManager, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+
+import { CellService } from '../../cell/index.js';
+import { CellCollapsible } from '../../collapse-service.js';
+import { isCellView, DragAreaKey } from '../../libro-protocol.js';
+import type { CellView, DndContentProps } from '../../libro-protocol.js';
+import { MultiSelectionWhenShiftClick } from '../../configuration/libro-configuration.js';
+import type { LibroView } from '../../libro-view.js';
+import { HolderOutlined, PlusOutlined } from '../../material-from-designer.js';
+import { hasErrorOutput } from '../../output/index.js';
+import { BetweenCellProvider } from '../cell-protocol.js';
+
+export interface Dragparams {
+  cell: CellView;
+  index: number;
+}
+
+export const DefaultDndContent: React.FC<DndContentProps> = ({ cell, index }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useInject<LibroView>(ViewInstance);
+  const [multiSelectionWhenShiftClick] = useConfigurationValue(
+    MultiSelectionWhenShiftClick,
+  );
+  const BetweenCellContent = useInject<BetweenCellProvider>(BetweenCellProvider);
+  const cellService = useInject<CellService>(CellService);
+  const dragDropManager = useDragDropManager();
+  const dragDropMonitor = dragDropManager.getMonitor();
+  const ItemRender = getOrigin(instance.dndItemRender);
+  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 [{ isDrag }, drag, preview] = useDrag(
+    {
+      type: DragAreaKey,
+      item: { cell, index },
+      collect: (monitor) => ({
+        isDrag: monitor.isDragging(),
+      }),
+      end() {
+        instance.isDragging = false;
+      },
+    },
+    [cell, index],
+  );
+  dragDropMonitor.subscribeToStateChange(() => {
+    instance.isDragging = dragDropMonitor.isDragging();
+  });
+  const libroViewContent = instance.container?.current?.getElementsByClassName(
+    'libro-view-content',
+  )[0] as HTMLElement;
+  const scrollTimer = useRef<null | NodeJS.Timeout>(null);
+  useEffect(() => {
+    scrollTimer.current = setInterval(() => {
+      const currentOffset = dragDropMonitor.getClientOffset();
+      if (libroViewContent && instance.isDragging && currentOffset) {
+        const libroViewClientRect = libroViewContent.getBoundingClientRect();
+        const { top, bottom } = libroViewClientRect;
+        const { y } = currentOffset;
+        const topLimit = top + 30;
+        const bottomLimit = bottom - 50;
+        if (y < topLimit) {
+          libroViewContent.scrollTop -= 0.5;
+        } else if (y > bottomLimit) {
+          libroViewContent.scrollTop += 0.5;
+        }
+      }
+    }, 10);
+    return () => {
+      if (scrollTimer.current) {
+        clearInterval(scrollTimer.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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(() => {
+          //
+        });
+      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.readOnly) {
+    drop(ref);
+  }
+  if (isDrag) {
+    instance.model.mouseMode = 'drag';
+  }
+
+  const isSelected = instance.isSelected(cell);
+  // let isMouseOver = false;
+  const [isMouseOverDragArea, setIsMouseOverDragArea] = useState(false);
+  const hasCellHidden = cell.hasCellHidden();
+  const hasErrorOutputs = hasErrorOutput(cell);
+  const isCollapsible = CellCollapsible.is(cell);
+  return (
+    <div
+      className={`libro-dnd-cell-container ${isSelected ? '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 ${hasErrorOutputs ? 'error' : ''}`}
+      >
+        <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 { ViewInstance } from '@difizen/mana-app';
+import { getOrigin, useInject } 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,116 @@
+import { getOrigin, useInject, useObserve, ViewInstance } from '@difizen/mana-app';
+import type { FC } from 'react';
+import { forwardRef, memo } from 'react';
+import type { XYCoord } from 'react-dnd';
+import { useDrop } from 'react-dnd';
+
+import { LibroCellService } from '../../cell/index.js';
+import type { CellService } from '../../cell/index.js';
+import { DragAreaKey, isCellView } from '../../libro-protocol.js';
+import type { CellView, DndContentProps } from '../../libro-protocol.js';
+import type { LibroView } from '../../libro-view.js';
+
+import type { Dragparams } from './default-dnd-content.js';
+
+const DndContent: FC<DndContentProps> = ({ cell, index, ...props }) => {
+  const observableCell = useObserve(cell);
+  const instance = useInject<LibroView>(ViewInstance);
+  const DndContentRender = instance.dndContentRender;
+  return (
+    <DndContentRender cell={observableCell} key={cell.id} index={index} {...props} />
+  );
+};
+const DndContentMemo = memo(DndContent);
+
+export const DndCellContent = forwardRef<HTMLDivElement, { libroView: LibroView }>(
+  function DndCellContent({ libroView }, ref) {
+    const LoadingRender = getOrigin(libroView.loadingRender);
+    const cells = libroView.model.getCells().reduce<CellView[]>(function (a, b) {
+      if (a.indexOf(b) < 0) {
+        a.push(b);
+      }
+      return a;
+    }, []);
+    return (
+      <div className="libro-dnd-cells-container" ref={ref}>
+        {!libroView.model.isInitialized && <LoadingRender />}
+        {libroView.model.isInitialized &&
+          cells
+            .filter((cell) => cell.collapsedHidden === false)
+            .map((cell, index) => {
+              return <DndContentMemo cell={cell} key={cell.id} index={index} />;
+            })}
+      </div>
+    );
+  },
+);
+
+export const DndList = forwardRef<
+  HTMLDivElement,
+  { libroView: LibroView; children: any }
+>(function DndList({ libroView, children }) {
+  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) => {
+          return view.dispose();
+        })
+        .catch(() => {
+          //
+        });
+      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}>
+      <DndCellContent libroView={libroView} />
+      {children}
+    </div>
+  );
+});

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

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

package/src/components/index.ts

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

package/src/components/libro-component.tsx

@@ -0,0 +1,30 @@
+import { ViewRender } from '@difizen/mana-app';
+import { useInject } from '@difizen/mana-app';
+import { useEffect, useState } from 'react';
+
+import type { NotebookOption, NotebookView } from '../libro-protocol.js';
+import { LibroService } from '../libro-service.js';
+
+export function LibroComponent(props: { options: NotebookOption }) {
+  const libroService = useInject(LibroService);
+  const [libroView, setLibroView] = useState<NotebookView | undefined>(undefined);
+
+  useEffect(() => {
+    libroService
+      .getOrCreateView(props.options)
+      .then((view) => {
+        if (!view) {
+          return;
+        }
+        setLibroView(view);
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }, [props.options, libroService]);
+  if (!libroView || !libroView.view) {
+    return null;
+  }
+  return <ViewRender view={libroView} />;
+}

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

@@ -0,0 +1,82 @@
+import type { Toolbar } from '@difizen/mana-app';
+import {
+  CommandRegistry,
+  getOrigin,
+  ToolbarInstance,
+  useInject,
+} from '@difizen/mana-app';
+import { Menu, MenuContext } from '@difizen/mana-react';
+import type { ReactNode } from 'react';
+
+import type { LibroToolbarArags } from '../toolbar/index.js';
+
+export type LibroSideToolbarMenuItemType = {
+  id: string;
+  label: ReactNode;
+  /**
+   * When extra, group means that the item will be located in a submenu(s) of the `...` dropdown.
+   * The submenu's title is named by the name in group, e.g. ['menu', 'submenu'].
+   */
+  readonly group?: string | string[];
+  disabled?: boolean;
+};
+
+interface LibroSideToolbarMenuInlinesProps {
+  items: LibroSideToolbarMenuItemType[];
+}
+
+export const LibroSideToolbarMenuInlines: React.FC<
+  LibroSideToolbarMenuInlinesProps
+> = ({ items }: LibroSideToolbarMenuInlinesProps) => {
+  const command = useInject(CommandRegistry);
+  const toolbar = useInject<Toolbar>(ToolbarInstance);
+  const data = toolbar.currentArgs as LibroToolbarArags;
+  const args = getOrigin(data) || [];
+  if (!items.length) {
+    return null;
+  }
+  const nodes: React.ReactNode[] = [];
+  let group: string | undefined = undefined;
+  const baseCls = 'mana-menu';
+  const contextValue: MenuContext.Context = {
+    prefixCls: baseCls,
+  };
+  items.forEach((item) => {
+    let itemGroup: string | string[] | undefined = item.group;
+    if (itemGroup) {
+      itemGroup = typeof itemGroup === 'string' ? itemGroup : itemGroup[0];
+    }
+    if (nodes.length && itemGroup !== group) {
+      nodes.push(itemGroup && <Menu.Divider key={`${item.id}-divider`} />);
+    }
+    group = itemGroup;
+    nodes.push(
+      <Menu.Item
+        key={item.id}
+        onClick={() => {
+          command.executeCommand(item.id, ...args);
+        }}
+      >
+        {item.label}
+      </Menu.Item>,
+    );
+  });
+  return (
+    <div className="libro-toolbar-menu-inlines">
+      <MenuContext.Provider value={contextValue}>{nodes} </MenuContext.Provider>
+    </div>
+  );
+};
+
+interface LibroSideToolbarMenuProps {
+  items: LibroSideToolbarMenuItemType[];
+}
+export const LibroSideToolbarMenu: React.FC<LibroSideToolbarMenuProps> = ({
+  items,
+}: LibroSideToolbarMenuProps) => {
+  return (
+    <div className="libro-side-toolbar-menu">
+      <LibroSideToolbarMenuInlines items={items} />
+    </div>
+  );
+};

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

@@ -0,0 +1,33 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ToolbarRender, useInject, ViewInstance } from '@difizen/mana-app';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+
+import { LibroToolbarArea } from '../libro-protocol.js';
+import type { LibroView } from '../libro-view.js';
+
+export const LibroViewHeader: FC = () => {
+  const instance = useInject<LibroView>(ViewInstance);
+  const headerLeftArgs = useMemo(() => {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderLeft];
+  }, [instance.model.active, instance]);
+  const headerCenterArgs = useMemo(() => {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderCenter];
+  }, [instance.model.active, instance]);
+  const headerRightArgs = useMemo(() => {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderRight];
+  }, [instance.model.active, instance]);
+  return (
+    <>
+      <div className="libro-header-left">
+        <ToolbarRender data={headerLeftArgs} />
+      </div>
+      <div className="libro-header-center">
+        <ToolbarRender data={headerCenterArgs} />
+      </div>
+      <div className="libro-header-right">
+        <ToolbarRender data={headerRightArgs} />
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { ConfigurationContribution } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+import {
+  CellSideToolbarVisible,
+  CellTopToolbarSetting,
+  HeaderToolbarVisible,
+  AutoInsertWhenNoCell,
+  EnterEditModeWhenAddCell,
+  CollapserClickActive,
+  MultiSelectionWhenShiftClick,
+  RightContentFixed,
+} from './libro-configuration.js';
+
+@singleton({ contrib: ConfigurationContribution })
+export class LibroConfigurationContribution implements ConfigurationContribution {
+  registerConfigurations() {
+    return [
+      HeaderToolbarVisible,
+      CellTopToolbarSetting,
+      CellSideToolbarVisible,
+      AutoInsertWhenNoCell,
+      EnterEditModeWhenAddCell,
+      CollapserClickActive,
+      MultiSelectionWhenShiftClick,
+      RightContentFixed,
+    ];
+  }
+}

package/src/configuration/libro-configuration.ts

@@ -0,0 +1,88 @@
+import type { ConfigurationNode } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+export const HeaderToolbarVisible: ConfigurationNode<boolean> = {
+  id: 'libro.header.toolbar',
+  description: l10n.t('是否显示libro顶部工具栏'),
+  title: l10n.t('顶部工具栏'),
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};
+
+export const CellTopToolbarSetting: ConfigurationNode<boolean> = {
+  id: 'libro.cell.toptoolbar',
+  description: l10n.t('是否显示cell顶部工具栏'),
+  title: l10n.t('cell顶部工具栏'),
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};
+
+export const CellSideToolbarVisible: ConfigurationNode<boolean> = {
+  id: 'libro.cell.sidetoolbar',
+  description: l10n.t('是否显示cell侧边工具栏'),
+  title: l10n.t('cell侧边工具栏'),
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};
+
+export const AutoInsertWhenNoCell: ConfigurationNode<boolean> = {
+  id: 'libro.command.insertcellbelow',
+  description: l10n.t('没有cell时是否默认创建cell'),
+  title: l10n.t('默认创建cell'),
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};
+
+export const EnterEditModeWhenAddCell: ConfigurationNode<boolean> = {
+  id: 'libro.command.entereditmodewhenaddcell',
+  description: l10n.t('增加cell操作默认进入编辑态'),
+  title: l10n.t('默认进入编辑态'),
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};
+export const CollapserClickActive: ConfigurationNode<boolean> = {
+  id: 'libro.command.collapserclickactive',
+  description: l10n.t('点击左侧长条是否可以隐藏与显示cell'),
+  title: l10n.t('默认点击长条可以隐藏与显示cell'),
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};
+export const MultiSelectionWhenShiftClick: ConfigurationNode<boolean> = {
+  id: 'libro.command.multiselectionwhenshiftclick',
+  description: l10n.t('按住shift键并点击拖拽区域可以进行多选'),
+  title: l10n.t('默认按住shift键并点击拖拽区域可以进行多选'),
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};
+
+export const RightContentFixed: ConfigurationNode<boolean> = {
+  id: 'libro.right.content.fixed',
+  description: l10n.t('libroview的右边栏是否相对固定'),
+  title: l10n.t('右侧内容是否相对固定'),
+  type: 'checkbox',
+  defaultValue: false,
+  schema: {
+    type: 'boolean',
+  },
+};