@nocobase/flow-engine 2.0.0-alpha.2

package/src/components/dnd/moveBlock.ts

@@ -0,0 +1,379 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { uid } from '@formily/shared';
+import _ from 'lodash';
+import { ElementPosition } from './getMousePositionOnElement';
+
+type MoveDirection =
+  | 'insert-row-above'
+  | 'insert-row-below'
+  | 'insert-same-column-above'
+  | 'insert-same-column-below'
+  | 'insert-column-left'
+  | 'insert-column-right';
+
+interface GridLayoutData {
+  rows: Record<string, string[][]>;
+  sizes: Record<string, number[]>;
+}
+
+export const findModelUidPosition = (uid: string, rows: Record<string, string[][]>) => {
+  // 找到 sourceUid 和 targetUid 的位置
+  let result: { rowId: string; columnIndex: number; itemIndex: number } | null = null;
+
+  for (const [rowId, columns] of Object.entries(rows)) {
+    for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
+      const column = columns[columnIndex];
+      for (let itemIndex = 0; itemIndex < column.length; itemIndex++) {
+        if (column[itemIndex] === uid) {
+          result = { rowId, columnIndex, itemIndex };
+        }
+      }
+    }
+  }
+
+  return result;
+};
+
+export const moveBlock = ({
+  sourceUid,
+  targetUid,
+  direction,
+  layoutData,
+}: {
+  sourceUid: string;
+  targetUid: string;
+  direction: MoveDirection;
+  layoutData: GridLayoutData;
+}): GridLayoutData => {
+  const { rows, sizes } = layoutData;
+  const newSizes = _.cloneDeep(sizes);
+  let newRows = _.cloneDeep(rows);
+
+  // 找到 sourceUid 和 targetUid 的位置
+  let sourcePosition: { rowId: string; columnIndex: number; itemIndex: number } | null = null;
+  let targetPosition: { rowId: string; columnIndex: number; itemIndex: number } | null = null;
+
+  for (const [rowId, columns] of Object.entries(newRows)) {
+    for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
+      const column = columns[columnIndex];
+      for (let itemIndex = 0; itemIndex < column.length; itemIndex++) {
+        if (column[itemIndex] === sourceUid) {
+          sourcePosition = { rowId, columnIndex, itemIndex };
+        }
+        if (column[itemIndex] === targetUid) {
+          targetPosition = { rowId, columnIndex, itemIndex };
+        }
+      }
+    }
+  }
+
+  if (!sourcePosition || !targetPosition) {
+    return layoutData; // 如果没有找到 sourceUid 或 targetUid，直接返回原数据
+  }
+
+  const removeOldSourceUid = () => {
+    // 从原位置移除 sourceUid
+    newRows[sourcePosition.rowId][sourcePosition.columnIndex].splice(sourcePosition.itemIndex, 1);
+
+    // 如果列变空了，移除该列
+    if (newRows[sourcePosition.rowId][sourcePosition.columnIndex].length === 0) {
+      newRows[sourcePosition.rowId]?.splice(sourcePosition.columnIndex, 1);
+      newSizes[sourcePosition.rowId]?.splice(sourcePosition.columnIndex, 1);
+    }
+
+    // 如果行变空了，移除该行
+    if (newRows[sourcePosition.rowId].length === 0) {
+      delete newRows[sourcePosition.rowId];
+      delete newSizes[sourcePosition.rowId];
+    }
+
+    // 移除完之后，重新设置 sourcePosition 和 targetPosition
+    for (const [rowId, columns] of Object.entries(newRows)) {
+      for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
+        const column = columns[columnIndex];
+        for (let itemIndex = 0; itemIndex < column.length; itemIndex++) {
+          if (column[itemIndex] === sourceUid) {
+            sourcePosition = { rowId, columnIndex, itemIndex };
+          }
+          if (column[itemIndex] === targetUid) {
+            targetPosition = { rowId, columnIndex, itemIndex };
+          }
+        }
+      }
+    }
+  };
+
+  switch (direction) {
+    case 'insert-row-above': {
+      // 检查 targetUid 上面是否有其他同列的 uid
+      if (targetPosition.itemIndex > 0) {
+        return layoutData; // 无效操作，直接返回原数据
+      }
+
+      removeOldSourceUid();
+
+      // 创建新行 ID
+      const newRowId = uid();
+
+      // 插入到目标行前面
+      newRows = insertKey({
+        obj: newRows,
+        newKey: newRowId,
+        newValue: [[sourceUid]],
+        referenceKey: targetPosition.rowId,
+        position: 'before',
+      });
+      newSizes[newRowId] = [24];
+      break;
+    }
+
+    case 'insert-row-below': {
+      // 检查 targetUid 所在行的后面是否有同名的 sourceUid
+      const nextRowKey = getNextKey(newRows, targetPosition.rowId);
+
+      if (nextRowKey === sourcePosition.rowId && newRows[nextRowKey].length === 1) {
+        return layoutData; // 无效操作，直接返回原数据
+      }
+
+      removeOldSourceUid();
+
+      // 创建新行ID
+      const newRowId = uid();
+
+      // 插入到目标行后面
+      newRows = insertKey({
+        obj: newRows,
+        newKey: newRowId,
+        newValue: [[sourceUid]],
+        referenceKey: targetPosition.rowId,
+        position: 'after',
+      });
+      newSizes[newRowId] = [24];
+      break;
+    }
+
+    case 'insert-same-column-above': {
+      removeOldSourceUid();
+
+      const column = newRows[targetPosition.rowId][targetPosition.columnIndex];
+      if (column[targetPosition.itemIndex - 1] === sourceUid) {
+        return layoutData; // 无效操作，直接返回原数据
+      }
+      column.splice(targetPosition.itemIndex, 0, sourceUid);
+      break;
+    }
+
+    case 'insert-same-column-below': {
+      removeOldSourceUid();
+
+      const column = newRows[targetPosition.rowId][targetPosition.columnIndex];
+      if (column[targetPosition.itemIndex + 1] === sourceUid) {
+        return layoutData; // 无效操作，直接返回原数据
+      }
+      column.splice(targetPosition.itemIndex + 1, 0, sourceUid);
+      break;
+    }
+
+    case 'insert-column-left': {
+      removeOldSourceUid();
+
+      // 在目标列左侧插入新列
+      newRows[targetPosition.rowId].splice(targetPosition.columnIndex, 0, [sourceUid]);
+
+      // 重新计算列宽
+      const currentSizes = newSizes[targetPosition.rowId] || [];
+      const columnCount = newRows[targetPosition.rowId].length || 0;
+      const newColumnWidth = Math.floor(24 / columnCount);
+      const remainingWidth = 24 - newColumnWidth;
+
+      // 按原比例分配剩余宽度
+      const totalOldWidth = currentSizes.reduce((sum, size) => sum + size, 0);
+      const adjustedSizes = currentSizes.map((size) => Math.floor((size / totalOldWidth) * remainingWidth));
+
+      // 插入新列宽度
+      adjustedSizes.splice(targetPosition.columnIndex, 0, newColumnWidth);
+
+      // 处理舍入误差
+      const totalNewWidth = adjustedSizes.reduce((sum, size) => sum + size, 0);
+      if (totalNewWidth < 24) {
+        adjustedSizes[adjustedSizes.length - 1] += 24 - totalNewWidth;
+      }
+
+      newSizes[targetPosition.rowId] = adjustedSizes;
+      break;
+    }
+
+    case 'insert-column-right': {
+      removeOldSourceUid();
+
+      // 在目标列右侧插入新列
+      newRows[targetPosition.rowId].splice(targetPosition.columnIndex + 1, 0, [sourceUid]);
+
+      // 重新计算列宽
+      const currentSizes = newSizes[targetPosition.rowId] || [];
+      const columnCount = newRows[targetPosition.rowId]?.length || 0;
+      const newColumnWidth = Math.floor(24 / columnCount);
+      const remainingWidth = 24 - newColumnWidth;
+
+      // 按原比例分配剩余宽度
+      const totalOldWidth = currentSizes.reduce((sum, size) => sum + size, 0);
+      const adjustedSizes = currentSizes.map((size) => Math.floor((size / totalOldWidth) * remainingWidth));
+
+      // 插入新列宽度
+      adjustedSizes.splice(targetPosition.columnIndex + 1, 0, newColumnWidth);
+
+      // 处理舍入误差
+      const totalNewWidth = adjustedSizes.reduce((sum, size) => sum + size, 0);
+      if (totalNewWidth < 24) {
+        adjustedSizes[adjustedSizes.length - 1] += 24 - totalNewWidth;
+      }
+
+      newSizes[targetPosition.rowId] = adjustedSizes;
+      break;
+    }
+  }
+
+  return recalculateAllRowSizesWithProportion({ rows: newRows, sizes: newSizes });
+};
+
+/**
+ * 将鼠标在元素上的位置转换为区块移动方向
+ *
+ * @param position 鼠标在元素上的位置
+ * @returns 对应的移动方向
+ */
+export const positionToDirection = (position: ElementPosition): MoveDirection => {
+  switch (position) {
+    case ElementPosition.TOP:
+      return 'insert-same-column-above';
+    case ElementPosition.BOTTOM:
+      return 'insert-same-column-below';
+    case ElementPosition.LEFT:
+      return 'insert-column-left';
+    case ElementPosition.RIGHT:
+      return 'insert-column-right';
+    case ElementPosition.TOP_EDGE:
+      return 'insert-row-above';
+    case ElementPosition.BOTTOM_EDGE:
+      return 'insert-row-below';
+    case ElementPosition.LEFT_EDGE:
+      return 'insert-column-left';
+    case ElementPosition.RIGHT_EDGE:
+      return 'insert-column-right';
+    default:
+      throw new Error(`Unsupported position: ${position}`);
+  }
+};
+
+function insertKey({
+  obj,
+  newKey,
+  newValue,
+  referenceKey,
+  position,
+}: {
+  obj: Record<string, any>;
+  newKey: string;
+  newValue: any;
+  referenceKey: string;
+  position: 'before' | 'after';
+}) {
+  const result: Record<string, any> = {};
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (position === 'before' && key === referenceKey) {
+      result[newKey] = newValue;
+    }
+
+    result[key] = value;
+
+    if (position === 'after' && key === referenceKey) {
+      result[newKey] = newValue;
+    }
+  }
+
+  return result;
+}
+
+function getNextKey(obj: Record<string, any>, currentKey: string): string | null {
+  const keys = Object.keys(obj);
+  const index = keys.indexOf(currentKey);
+  return index >= 0 && index < keys.length - 1 ? keys[index + 1] : null;
+}
+
+/**
+ * 重新计算所有行的列宽，保持原有比例的同时确保总宽度为24
+ * @param layoutData 当前的布局数据
+ * @returns 更新后的布局数据
+ */
+function recalculateAllRowSizesWithProportion(layoutData: GridLayoutData): GridLayoutData {
+  const { rows, sizes } = layoutData;
+  const newSizes = _.cloneDeep(sizes);
+
+  for (const [rowId, columns] of Object.entries(rows)) {
+    const columnCount = columns.length;
+    const currentSizes = sizes[rowId] || [];
+
+    if (columnCount === 0) {
+      continue;
+    }
+
+    // 如果当前没有尺寸信息或尺寸数量不匹配，使用均等分配
+    if (currentSizes.length !== columnCount || currentSizes.every((size) => size === 0)) {
+      const baseWidth = Math.floor(24 / columnCount);
+      const remainder = 24 % columnCount;
+      const newRowSizes = new Array(columnCount).fill(baseWidth);
+
+      for (let i = 0; i < remainder; i++) {
+        newRowSizes[i] += 1;
+      }
+
+      newSizes[rowId] = newRowSizes;
+      continue;
+    }
+
+    // 计算当前总宽度
+    const currentTotal = currentSizes.reduce((sum, size) => sum + size, 0);
+
+    if (currentTotal === 0) {
+      // 如果当前总宽度为0，使用均等分配
+      const baseWidth = Math.floor(24 / columnCount);
+      const remainder = 24 % columnCount;
+      const newRowSizes = new Array(columnCount).fill(baseWidth);
+
+      for (let i = 0; i < remainder; i++) {
+        newRowSizes[i] += 1;
+      }
+
+      newSizes[rowId] = newRowSizes;
+    } else {
+      // 按比例重新分配
+      const newRowSizes = currentSizes.map((size) => Math.floor((size / currentTotal) * 24));
+
+      // 处理舍入误差
+      const actualTotal = newRowSizes.reduce((sum, size) => sum + size, 0);
+      const diff = 24 - actualTotal;
+
+      // 将差值分配给最后几列
+      for (let i = newRowSizes.length - 1; i >= 0 && diff > 0; i--) {
+        const add = Math.min(diff, 1);
+        newRowSizes[i] += add;
+      }
+
+      newSizes[rowId] = newRowSizes;
+    }
+  }
+
+  return {
+    rows,
+    sizes: newSizes,
+  };
+}

package/src/components/index.ts

@@ -0,0 +1,20 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './common/FlowSettingsButton';
+export * from './dnd';
+export * from './FieldModelRenderer';
+export * from './FlowContextSelector';
+export * from './FlowErrorFallback';
+export * from './FlowModelRenderer';
+export * from './FormItem';
+export * from './settings';
+export * from './subModel';
+export * from './variables';
+//

package/src/components/settings/independents/dropdown/FlowsDropdownButton.tsx

@@ -0,0 +1,279 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { DownOutlined, SettingOutlined } from '@ant-design/icons';
+import { observer } from '@formily/react';
+import { Alert, Button, Dropdown, Space } from 'antd';
+import React, { useCallback } from 'react';
+import { useFlowModelById } from '../../../../hooks';
+import { FlowModel } from '../../../../models';
+
+// 支持两种使用方式的接口定义
+interface ModelProvidedProps {
+  model: FlowModel;
+  text?: string;
+  icon?: React.ReactNode;
+  size?: 'small' | 'middle' | 'large';
+  type?: 'default' | 'primary' | 'dashed' | 'link' | 'text';
+  disabled?: boolean;
+  showDropdownIcon?: boolean;
+  onClick?: () => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+interface ModelByIdProps {
+  uid: string;
+  modelClassName: string;
+  text?: string;
+  icon?: React.ReactNode;
+  size?: 'small' | 'middle' | 'large';
+  type?: 'default' | 'primary' | 'dashed' | 'link' | 'text';
+  disabled?: boolean;
+  showDropdownIcon?: boolean;
+  onClick?: () => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+type FlowsDropdownButtonProps = ModelProvidedProps | ModelByIdProps;
+
+// 判断是否是通过ID获取模型的props
+const isModelByIdProps = (props: FlowsDropdownButtonProps): props is ModelByIdProps => {
+  return 'uid' in props && 'modelClassName' in props && Boolean(props.uid) && Boolean(props.modelClassName);
+};
+
+/**
+ * 可自定义的下拉菜单触发按钮组件
+ * 支持两种使用方式：
+ * 1. 直接提供model: <FlowsDropdownButton model={myModel} />
+ * 2. 通过uid和modelClassName获取model: <FlowsDropdownButton uid="model1" modelClassName="MyModel" />
+ *
+ * 菜单结构：按flow分组显示steps
+ */
+export const FlowsDropdownButton: React.FC<FlowsDropdownButtonProps> = (props) => {
+  if (isModelByIdProps(props)) {
+    const { uid, modelClassName, ...restProps } = props;
+    return <FlowsDropdownButtonWithModelById uid={uid} modelClassName={modelClassName} {...restProps} />;
+  } else {
+    const { model, ...restProps } = props;
+    return <FlowsDropdownButtonWithModel model={model} {...restProps} />;
+  }
+};
+
+// 使用传入的model
+const FlowsDropdownButtonWithModel: React.FC<ModelProvidedProps> = observer(
+  ({
+    model,
+    text = '流程配置',
+    icon = <SettingOutlined />,
+    size = 'middle',
+    type = 'default',
+    disabled = false,
+    showDropdownIcon = true,
+    onClick,
+    style,
+    className,
+  }) => {
+    const handleClick = () => {
+      onClick?.();
+    };
+
+    const handleMenuClick = useCallback(
+      ({ key }: { key: string }) => {
+        // key格式为 "flowKey:stepKey"
+        const [flowKey, stepKey] = key.split(':');
+
+        try {
+          model.openFlowSettings({
+            flowKey,
+            stepKey,
+          });
+        } catch (error) {
+          // 用户取消或出错
+          console.log('配置弹窗已取消或出错:', error);
+        }
+      },
+      [model],
+    );
+
+    if (!model) {
+      return <Alert message="提供的模型无效" type="error" />;
+    }
+
+    // 获取可配置的flows和steps
+    const getConfigurableFlowsAndSteps = useCallback(() => {
+      try {
+        // const ModelClass = model.constructor as typeof FlowModel;
+        const flows = model.getFlows();
+
+        const flowsArray = Array.from(flows.values());
+
+        return flowsArray
+          .map((flow) => {
+            const configurableSteps = Object.entries(flow.steps)
+              .map(([stepKey, stepDefinition]) => {
+                const actionStep = stepDefinition;
+
+                // 如果步骤设置了 hideInSettings: true，则跳过此步骤
+                if (actionStep.hideInSettings) {
+                  return null;
+                }
+
+                // 从step获取uiSchema（如果存在）
+                const stepUiSchema = actionStep.uiSchema || {};
+
+                // 如果step使用了action，也获取action的uiSchema
+                let actionUiSchema = {};
+                if (actionStep.use) {
+                  const action = model.flowEngine?.getAction?.(actionStep.use);
+                  if (action && action.uiSchema) {
+                    actionUiSchema = action.uiSchema;
+                  }
+                }
+
+                // 合并uiSchema，确保step的uiSchema优先级更高
+                const mergedUiSchema = { ...actionUiSchema };
+
+                // 将stepUiSchema中的字段合并到mergedUiSchema
+                Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
+                  if (mergedUiSchema[fieldKey]) {
+                    mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
+                  } else {
+                    mergedUiSchema[fieldKey] = schema;
+                  }
+                });
+
+                // 如果没有可配置的UI Schema，返回null
+                if (Object.keys(mergedUiSchema).length === 0) {
+                  return null;
+                }
+
+                return {
+                  stepKey,
+                  step: actionStep,
+                  uiSchema: mergedUiSchema,
+                  title: actionStep.title || stepKey,
+                };
+              })
+              .filter(Boolean);
+
+            return configurableSteps.length > 0 ? { flow, steps: configurableSteps } : null;
+          })
+          .filter(Boolean);
+      } catch (error) {
+        console.warn('[FlowsDropdownButton] 获取可配置flows失败:', error);
+        return [];
+      }
+    }, [model]);
+
+    const configurableFlowsAndSteps = getConfigurableFlowsAndSteps();
+
+    // 构建菜单项
+    const buildMenuItems = () => {
+      const items = [];
+
+      configurableFlowsAndSteps.forEach(({ flow, steps }) => {
+        // 始终按flow分组显示
+        items.push({
+          key: `flow-group-${flow.key}`,
+          label: flow.title || flow.key,
+          type: 'group',
+        });
+
+        steps.forEach((stepInfo) => {
+          items.push({
+            key: `${flow.key}:${stepInfo.stepKey}`,
+            icon: <SettingOutlined />,
+            label: stepInfo.title,
+          });
+        });
+      });
+
+      return items;
+    };
+
+    const menuItems = buildMenuItems();
+
+    const button = (
+      <Button
+        type={type}
+        size={size}
+        disabled={disabled}
+        icon={icon}
+        onClick={handleClick}
+        style={style}
+        className={className}
+      >
+        <Space>
+          {text}
+          {showDropdownIcon && <DownOutlined />}
+        </Space>
+      </Button>
+    );
+
+    // 如果没有可配置的flows，返回普通按钮
+    if (configurableFlowsAndSteps.length === 0) {
+      return button;
+    }
+
+    return (
+      <>
+        <Dropdown
+          menu={{
+            items: menuItems,
+            onClick: handleMenuClick,
+          }}
+          trigger={['click']}
+          placement="bottomRight"
+        >
+          {button}
+        </Dropdown>
+      </>
+    );
+  },
+);
+
+// 通过useFlowModelById hook获取model
+const FlowsDropdownButtonWithModelById: React.FC<ModelByIdProps> = observer(
+  ({
+    uid,
+    modelClassName,
+    text = '流程配置',
+    icon = <SettingOutlined />,
+    size = 'middle',
+    type = 'default',
+    disabled = false,
+    showDropdownIcon = true,
+    onClick,
+    style,
+    className,
+  }) => {
+    const model = useFlowModelById(uid, modelClassName);
+
+    if (!model) {
+      return <Alert message={`未找到ID为 ${uid} 的模型`} type="error" />;
+    }
+
+    return (
+      <FlowsDropdownButtonWithModel
+        model={model}
+        text={text}
+        icon={icon}
+        size={size}
+        type={type}
+        disabled={disabled}
+        showDropdownIcon={showDropdownIcon}
+        onClick={onClick}
+        style={style}
+        className={className}
+      />
+    );
+  },
+);

package/src/components/settings/independents/dropdown/index.ts

@@ -0,0 +1,10 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './FlowsDropdownButton';

package/src/components/settings/independents/index.ts

@@ -0,0 +1,2 @@
+// 下拉菜单配置组件
+export * from './dropdown';

package/src/components/settings/index.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './independents';
+export * from './wrappers';