ProFlow 流程编辑器框架 1.0 发布

2024-06-13 200

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ProFlow 流程编辑器框架 1.0 发布

本文来源：支付宝体验科技公众号

ProFlow 官网地址直达：https://pro-flow.antdigital.dev/

在当前数字科技的业务中存在很多图展示、编辑的相关业务，大家设计方案不统一实现也不尽统一，最终导致设计与研发资源的浪费、产品体验参差不齐。为此我们设计和研发了 ProFlow，提供更现代化的 UI 组件设计以及 React 友好的 API 以及完善的基本功能，如无极缩放，自动布局，多线重叠的展示优化等。

ProFlow 能做什么？

图展示场景 - FlowView

如果您需要展示复杂的节点逻辑，建议您使用 FlowView 组件，它内置了完善的展示逻辑，包括节点与线的主副级别选中、自动布局等能力，能够呈现出像下面这样的效果。

图编辑场景 - FlowEditor

如果您更注重交互和编辑，不想自己维护一套数据流，建议您使用 FlowEditor 组件。它内置了完善的增删改、撤销重做的逻辑，可以开箱即用，能够呈现出像下面这样的效果。

快速上手（FlowView）

安装依赖

ProFlow 在 npm 上发布为 @ant-design/pro-flow ，推荐使用 pnpm 安装。

pnpm i @ant-design/pro-flow -S

引入pro-flow

引入 FlowView 组件，即可在页面上获得一块带有小地图能力的的画布。

import { FlowView } from '@ant-design/pro-flow';
import { createStyles } from 'antd-style';
const useStyles = createStyles(() => {
  return {
    container: {
      width: '100%',
      height: '400px',
    },
  };
});
function App() {
  const { styles } = useStyles();
  return (
    <div className={styles.container}>
      <FlowView nodes={[]} edges={[]} />
    </div>
  );
}
export default App;

效果如图：

注意：组件必须包裹在具有宽度和高度的元素中。

添加节点和边缘数据

现在我们加入一些 nodes 和 edges 的数据。在这一步，我们无需关注nodes在画布中的坐标，ProFlow内置了dagre布局算法，我们只需描述节点之间的关系，即可获得自动布局后的效果，轻松实现流程图的美观展示。

export const nodes = [
  {
    id: 'a1',
    data: {
      title: 'XXX_API_a1',
      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
      description: 'XXX_XXX_XXX_API',
    },
  },
  {
    id: 'a2',
    data: {
      title: 'XXX_API_a2',
      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
      description: 'XXX_XXX_XXX_API',
    },
  },
  {
    id: 'a3',
    data: {
      title: 'XXX_API_a3',
      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
      description: 'XXX_XXX_XXX_API',
    },
  },
];
export const edges = [
  {
    id: 'a1-a2',
    source: 'a1',
    target: 'a2',
  },
  {
    id: 'a1-a3',
    source: 'a1',
    target: 'a3',
    type: 'radius',
  },
];

并在FlowView中引入它们：

import { FlowView } from '@ant-design/pro-flow';
import { edges, nodes } from './data';
function App() {
  const { styles } = useStyles();
  return (
    <div className={styles.container}>
      <FlowView nodes={nodes} edges={edges} />
    </div>
  );
}
export default App;

效果如图：

添加交互性

我们需要一些方法来监听用户与画布的交互，比如选中节点、选中边缘以及取消选中。

onNodeClick - 点击节点回调
onEdgeClick - 点击边缘回调
onPaneClick - 点击画布回调

ProFlow对node和edge提供可消费的SelectType。可以通过给 node 或 edge 变更不同的 SelectType 来快速实现不同程度的选中。

这里可以使用FlowView提供的useFlowViewer来更轻松的变更SelectType。

import {
  FlowPanel,
  FlowView,
  FlowViewProvider,
  SelectType,
  useFlowViewer,
} from '@ant-design/pro-flow';
import { useState } from 'react';
import { edges, nodes } from './data';
function App() {
  const { selectNode, selectEdges, selectNodes } = useFlowViewer();
  const [node, setNode] = useState(null);
  const { styles } = useStyles();
  return (
    <div className={styles.container}>
      <FlowView
        onNodeClick={(e, node) => {
          setNode(node);
          selectNodes(['a1', 'a2', 'a3'], SelectType.SUB_SELECT);
          selectNode(node.id, SelectType.SELECT);
          selectEdges(['a1-a2', 'a1-a3'], SelectType.SUB_SELECT);
        }}
        onPaneClick={() => {
          setNode(null);
          selectNodes(['a1', 'a2', 'a3'], SelectType.DEFAULT);
          selectEdges(['a1-a2', 'a1-a3'], SelectType.DEFAULT);
        }}
        nodes={nodes}
        edges={edges}
      >
        <FlowPanel>
          <div className="panel-title">
            {node ? `当前选中的是：${node.id}` : `当前没有选中节点`}
          </div>
        </FlowPanel>
      </FlowView>
    </div>
  );
}
function ProApp() {
  return (
    <FlowViewProvider>
      <App />
    </FlowViewProvider>
  );
}
export default ProApp;

效果如下：

进阶使用（FlowEditor）

如果您的需求涉及到了节点、边缘的增删改，需要对画布进行编辑，有着更复杂的画布交互需求，可以直接使用FlowEditor组件。

FlowEditor 提供了一套开箱即用的功能。包括拖拽周围节点、缩放和平移、选择多个节点和边、添加删除节点边缘、快捷键、剪切板、撤销重做等能力。使得对画布的编辑操作变得更加流畅、直观。通过FlowEditor，您可以轻松处理节点和边缘的增删改操作，满足了更复杂的画布交互需求。

实现自定义节点

首先我们需要创建一个自定义节点。在ProFlow中节点是一个 React 组件，这意味着它可以渲染您喜欢的任何内容。

import { Handle, Position } from '@ant-design/pro-flow';
  
// 自定义节点
const StringRender: FC = (node: any) => {
  const { handles, id } = node;
  return (
    <div className={'stringNode'}>
      <Handle
        id={typeof handles?.source === 'string' ? handles?.source : id}
        type={'target'}
        position={Position.Left}
      />
      {node.data.title}
      <Handle
        id={typeof handles?.source === 'string' ? handles?.source : id}
        type={'source'}
        position={Position.Right}
      />
    </div>
  );
};

在这段代码中，我们创建了一个名为StringRender的组件，组件内展示一段文字，在左右两边各有一个Handle（连接桩）。

添加节点类型

您可以将新的节点类型添加到props中传递给 FlowView 或 FlowEditor。

在组件外部定义或缓存nodeTypes非常重要。 否则 React 会在每次渲染时创建一个新的对象，这会导致性能问题和错误。

// 注册自定义节点类型
const nodeTypes = { StringNode: StringRender };
function App() {
  const { styles } = useStyles();
  
  return (
    <div className={styles.container}>
      <FlowEditor nodeTypes={nodeTypes} />
    </div>
  );
}

通过 useFlowEditor 数据驱动

// 注册自定义节点类型
const nodeTypes = { StringNode: StringRender };
const App = () => {
  const editor = useFlowEditor();
  const { styles } = useStyles();
  useEffect(() => {
    editor.addNode({
      id: 'a1',
      type: 'StringNode',
      position: { x: 0, y: 100 },
      data: {
        title: 'String Node',
      },
    });
  }, [editor]);
  return (
    <div className={styles.container}>
      <FlowEditor nodeTypes={nodeTypes} />
    </div>
  );
};
// 使用useFlowEditor，需包裹一层FlowEditorProvider.
const ProApp = () => {
  return (
    <FlowEditorProvider>
      <App />
    </FlowEditorProvider>
  );
};

FlowEditor内置了节点的拖拽、复制、粘贴、撤销、重做等能力，于是便可以获得如下效果：

案例展示

多 Handle 连接

https://pro-flow.antdigital.dev/case-show/tech-pileline

PipeLine Flow

https://pro-flow.antdigital.dev/case-show/cicd-pipe-line

拖拽插入节点

开源地址 & 联系我们

ProFlow 官网：https://pro-flow.antdigital.dev
Github：https://github.com/ant-design/pro-flow

接下去的一段时间，我们会继续根据用户反馈持续优化产品体验，修复和完善产品功能。如果你在使用中碰到了问题，欢迎来给我们提需求和缺陷，欢迎扫码加入群聊。