✨ feat: 新增flowDataAdapter

docs/useDocs/demos/baseDataFlow.tsx

@@ -0,0 +1,58 @@
+import { FlowView } from '@ant-design/pro-flow';
+import { EdgeType } from '@ant-design/pro-flow/es/index';
+import styled from 'styled-components';
+
+const nodes = [
+  {
+    id: 'a1',
+    data: {
+      title: 'XXX_API_b3',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a2',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a3',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+];
+const edges = [
+  {
+    id: 'a1-a2',
+    source: 'a1',
+    target: 'a2',
+  },
+  {
+    id: 'a1-a3',
+    source: 'a1',
+    target: 'a3',
+    type: EdgeType.radius,
+  },
+];
+
+function App() {
+  return (
+    <Container>
+      <FlowView nodes={nodes} edges={edges} />
+    </Container>
+  );
+}
+
+export default App;
+
+const Container = styled.div`
+  width: 800px;
+  height: 500px;
+`;

docs/useDocs/demos/emptyFLow.tsx

@@ -0,0 +1,17 @@
+import { FlowView } from '@ant-design/pro-flow';
+import styled from 'styled-components';
+
+function App() {
+  return (
+    <Container>
+      <FlowView nodes={[]} edges={[]} />
+    </Container>
+  );
+}
+
+export default App;
+
+const Container = styled.div`
+  width: 800px;
+  height: 500px;
+`;

docs/useDocs/demos/positionFlow.tsx

@@ -0,0 +1,70 @@
+import { FlowView } from '@ant-design/pro-flow';
+import { EdgeType } from '@ant-design/pro-flow/es/index';
+import styled from 'styled-components';
+
+const nodes = [
+  {
+    id: 'a1',
+    data: {
+      title: 'XXX_API_b3',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+    position: {
+      x: 0,
+      y: 0,
+    },
+  },
+  {
+    id: 'a2',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+    position: {
+      x: 600,
+      y: 200,
+    },
+  },
+  {
+    id: 'a3',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+    position: {
+      x: 600,
+      y: 400,
+    },
+  },
+];
+const edges = [
+  {
+    id: 'a1-a2',
+    source: 'a1',
+    target: 'a2',
+  },
+  {
+    id: 'a1-a3',
+    source: 'a1',
+    target: 'a3',
+    type: EdgeType.radius,
+  },
+];
+
+function App() {
+  return (
+    <Container>
+      <FlowView nodes={nodes} edges={edges} miniMap={false} />
+    </Container>
+  );
+}
+
+export default App;
+
+const Container = styled.div`
+  width: 800px;
+  height: 500px;
+`;

docs/useDocs/demos/selectFlow.tsx

@@ -0,0 +1,102 @@
+import { FlowView } from '@ant-design/pro-flow';
+import { EdgeType, FlowViewEdge, FlowViewNode, SelectType } from '@ant-design/pro-flow/es/index';
+import { useState } from 'react';
+import styled from 'styled-components';
+
+const initNodes = [
+  {
+    id: 'a1',
+    data: {
+      title: 'XXX_API_b3',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a2',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a3',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+];
+const initEdges = [
+  {
+    id: 'a1-a2',
+    source: 'a1',
+    target: 'a2',
+  },
+  {
+    id: 'a1-a3',
+    source: 'a1',
+    target: 'a3',
+    type: EdgeType.radius,
+  },
+];
+
+function App() {
+  const [nodes, setNodes] = useState<FlowViewNode>(initNodes);
+  const [edges, setEdges] = useState<FlowViewEdge>(initEdges);
+
+  const handlePaneClick = (e: any) => {
+    setNodes(
+      nodes.map((_node) => {
+        _node.select = SelectType.DEFAULT;
+        return _node;
+      }),
+    );
+    setEdges(
+      edges.map((edge) => {
+        edge.select = SelectType.DEFAULT;
+        return edge;
+      }),
+    );
+  };
+
+  const handleNodeClick = (e: any, node) => {
+    console.log(node);
+    setNodes(
+      nodes.map((_node) => {
+        if (_node.id === node.id) {
+          _node.select = SelectType.SELECT;
+        } else {
+          _node.select = SelectType.SUB_SELECT;
+        }
+        return _node;
+      }),
+    );
+    setEdges(
+      edges.map((edge) => {
+        edge.select = SelectType.SUB_SELECT;
+        return edge;
+      }),
+    );
+  };
+
+  return (
+    <Container>
+      <FlowView
+        onPaneClick={handlePaneClick}
+        onNodeClick={handleNodeClick}
+        nodes={nodes}
+        edges={edges}
+      />
+    </Container>
+  );
+}
+
+export default App;
+
+const Container = styled.div`
+  width: 800px;
+  height: 500px;
+`;

docs/useDocs/intro.md

@@ -6,3 +6,5 @@ group:
 title: 为什么选择 ReactFlow ？
 description:
 ---
+
+<code src='./demos/positionFlow.tsx' ></code>

docs/useDocs/quickDoc.md

@@ -39,3 +39,93 @@ pnpm run dev
 ```
 
 ## 创建第一个 ProFlow
+
+引入 FlowView 组件，即可在页面上获得一块带有小地图能力的的画布。
+
+```js
+import { ProFlow } from '@ant-design/pro-flow';
+import styled from 'styled-components';
+
+function App() {
+  return (
+    <Container>
+      <ProFlow nodes={[]} edges={[]} />
+    </Container>
+  );
+}
+
+export default App;
+
+const Container = styled.div`
+  width: 800px;
+  height: 500px;
+  padding: 20px;
+  background-color: aqua;
+`;
+```
+
+<code src='./demos/emptyFLow.tsx' ></code>
+
+:::warning
+注意：组件必须包裹在具有宽度和高度的元素中。
+:::
+
+## 添加节点和边缘数据
+
+现在我们加入一些 nodes 和 edges 的数据。ProFlow 会提供`计算坐标`和`自动布局`的能力
+
+```js
+const nodes = [
+  {
+    id: 'a1',
+    data: {
+      title: 'XXX_API_b3',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a2',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a3',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+];
+const edges = [
+  {
+    id: 'a1-a2',
+    source: 'a1',
+    target: 'a2',
+  },
+  {
+    id: 'a1-a3',
+    source: 'a1',
+    target: 'a3',
+    type: EdgeType.radius,
+  },
+];
+```
+
+<code src='./demos/baseDataFlow.tsx' ></code>
+
+## 添加交互性
+
+我们需要一些方法来监听用户与画布的交互，比如选中节点、选中边缘以及取消选中。
+
+- onNodeClick
+- onEdgeClick
+- onPaneClick
+
+可以通过给 node 或 edge 变更不同的 type 来快速实现主要选中，次要选中，以及不同程度的选中。
+
+<code src='./demos/selectFlow.tsx' ></code>

src/FlowEditor/demos/index.tsx

@@ -0,0 +1,44 @@
+import { FlowEditor, FlowEditorProvider, useFlowEditor } from '@ant-design/pro-flow';
+import { createStyles } from 'antd-style';
+import { useEffect } from 'react';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+    .ant-progress-text {
+      text-align: center !important;
+    }
+  `,
+}));
+
+const ProFlowDemo = () => {
+  const editor = useFlowEditor();
+  const { styles } = useStyles();
+  console.log(editor);
+  useEffect(() => {
+    editor.addNode({
+      id: 'a1',
+      position: { x: 0, y: 100 },
+      data: {
+        children: <div>default node, 123123</div>,
+      },
+    });
+  }, [editor]);
+
+  return (
+    <div className={styles.container}>
+      <FlowEditor />
+    </div>
+  );
+};
+
+const FlowDemo = () => {
+  return (
+    <FlowEditorProvider>
+      <ProFlowDemo />
+    </FlowEditorProvider>
+  );
+};
+
+export default FlowDemo;