✨ feat(docs): 补全文档 & 提供 useFlowViewer hooks (#29)

* 🐛 fix: build * ✨ feat: 新增flowDataAdapter * ✨ feat: 新增节点选中相关hook * 📝 feat: 为什么选择ProFlow.doc * 📝 feat: flowview and floweditor demo doc * 📝 feat: pending to write text * 📝 fix: demo index import * 📝 fix: demo import link * 🐛 fix: ci --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Nov 9, 2023 · e5679ab · e5679ab
1 parent 0e32644
commit e5679ab
Show file tree

Hide file tree

Showing 37 changed files with 766 additions and 136 deletions.
diff --git a/docs/useDocs/baseInrro.md b/docs/useDocs/baseInrro.md
@@ -7,5 +7,3 @@ title: 根本性概念
 order: 1
 description:
 ---
-
-dsfsaf
diff --git a/docs/useDocs/demos/baseDataFlow.tsx b/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;
+`;
diff --git a/docs/useDocs/demos/emptyFLow.tsx b/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;
+`;
diff --git a/docs/useDocs/demos/positionFlow.tsx b/docs/useDocs/demos/positionFlow.tsx
@@ -0,0 +1,94 @@
+import { FlowView } from '@ant-design/pro-flow';
+import { EdgeType } from '@ant-design/pro-flow/es/index';
+import styled from 'styled-components';
+import { SelectType } from '../../../src/FlowView/constants';
+import { useFlowViewer } from '../../../src/FlowView/hooks/useFlowView';
+import { FlowViewProvider } from '../../../src/FlowView/provider/FlowViewProvider';
+
+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() {
+  const { updateSelectNode, updateSelectEdge, updateSelectEdges, updateSelectNodes } =
+    useFlowViewer();
+
+  return (
+    <Container>
+      <FlowView
+        onNodeClick={() => {
+          updateSelectNodes!(['a1', 'a2', 'a3'], SelectType.SUB_DANGER);
+          updateSelectNode!('a3', SelectType.DANGER);
+          updateSelectEdges!(['a1-a2', 'a1-a3'], SelectType.SELECT);
+          updateSelectEdge!('a1-a2', SelectType.SUB_SELECT);
+        }}
+        nodes={nodes}
+        edges={edges}
+        miniMap={false}
+      />
+    </Container>
+  );
+}
+
+function ProApp() {
+  return (
+    <FlowViewProvider>
+      <App />
+    </FlowViewProvider>
+  );
+}
+
+export default ProApp;
+
+const Container = styled.div`
+  width: 800px;
+  height: 500px;
+`;
diff --git a/docs/useDocs/demos/selectFlow.tsx b/docs/useDocs/demos/selectFlow.tsx
@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+import {
+  EdgeType,
+  FlowView,
+  FlowViewProvider,
+  SelectType,
+  useFlowViewer,
+} from '../../../src/index';
+
+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 { updateSelectNode, updateSelectEdges, updateSelectNodes } = useFlowViewer();
+
+  return (
+    <Container>
+      <FlowView
+        onNodeClick={(e, node) => {
+          updateSelectNodes!(['a1', 'a2', 'a3'], SelectType.SUB_SELECT);
+          updateSelectNode!(node.id, SelectType.SELECT);
+          updateSelectEdges!(['a1-a2', 'a1-a3'], SelectType.SUB_SELECT);
+        }}
+        onPaneClick={() => {
+          updateSelectNodes!(['a1', 'a2', 'a3'], SelectType.DEFAULT);
+          updateSelectEdges!(['a1-a2', 'a1-a3'], SelectType.DEFAULT);
+        }}
+        nodes={initNodes}
+        edges={initEdges}
+      />
+    </Container>
+  );
+}
+
+function ProApp() {
+  return (
+    <FlowViewProvider>
+      <App />
+    </FlowViewProvider>
+  );
+}
+
+export default ProApp;
+
+const Container = styled.div`
+  width: 800px;
+  height: 500px;
+`;
diff --git a/docs/useDocs/drawer.md b/docs/useDocs/drawer.md
@@ -7,4 +7,4 @@ title: 侧边栏
 description:
 ---
 
-dsfsaf
+正在加急编写中...
diff --git a/docs/useDocs/editorview.md b/docs/useDocs/editorview.md
@@ -8,4 +8,10 @@ order: 3
 description:
 ---
 
-### 123123
+## Default
+
+<code src="../../src/FlowEditor/demos/index.tsx"></code>
+
+## 画布交互行为说明
+
+![](https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*GLK5RbhyMvEAAAAAAAAAAAAADvl6AQ/original)
diff --git a/docs/useDocs/flowview.md b/docs/useDocs/flowview.md
@@ -8,5 +8,6 @@ order: 2
 description:
 ---
 
-s
-ssdadaf
+## Default
+
+<code src='./demos/selectFlow.tsx' ></code>
diff --git a/docs/useDocs/intro.md b/docs/useDocs/intro.md
@@ -3,6 +3,83 @@ nav: 使用文档
 group:
   title: 基础介绍
   order: 1
-title: 为什么选择 ReactFlow ？
+title: 为什么选择 ProFlow ？
 description:
 ---
+
+## 1. 更现代化的设计
+
+更现代化的 UI 组件设计，使得编辑出的流程图更像是一个产品，而不是简易流程图。
+
+![数据血缘](https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*maMgRb1J65EAAAAAAAAAAAAADvl6AQ/original)
+
+![TechUI AIFlow](https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*FomjTqiZJuMAAAAAAAAAAAAADvl6AQ/original)
+
+## 2. 开发者友好的 API
+
+### 更符合 React 的开发方式，import 的方式导入，hook 的方式处理数据，函数式方式开发
+
+```js
+import { FlowView, FlowViewProvider } from '@ant-design/pro-flow';
+import { nodes, edeges } from './data.ts';
+
+const ProFlowDemo = () => {
+  const flowInstance = useFlowView();
+  const { setMiniMapPosition } = useMiniMap();
+
+  return (
+    <div className={styles.container}>
+      <FlowView nodes={_nodes} edges={_edges}></FlowView>
+    </div>
+  );
+};
+
+const FlowDemo = () => {
+  return (
+    <FlowViewProvider>
+      <FlowViewDemo />
+    </FlowViewProvider>
+  );
+};
+```
+
+### 颗粒度控制，提供简单易用的变更方法
+
+```js
+import { useFlowEditor } from '@ant-design/pro-flow';
+
+export default () => {
+  const editor = useFlowEditor();
+  console.log(editor);
+};
+```
+
+![useFlowEditorHooksAPI](https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*SAy8QImFmQkAAAAAAAAAAAAADvl6AQ/original)
+
+### 高灵活度
+
+ProFlow 支持自定义节点类型与边缘类型。自定义的节点为 React 组件，所以可以实现任何你需要的东西。
+
+## 3.完善的基本功能
+
+### 无极缩放的 label
+
+![useFlowEditorHooksAPI](https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*yelHRaDzbgQAAAAAAAAAAAAADvl6AQ/original)
+
+### 节点与边的主辅级选中态
+
+![useFlowEditorHooksAPI](https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*yelHRaDzbgQAAAAAAAAAAAAADvl6AQ/original)
+
+### 自动布局，排布节点
+
+![useFlowEditorHooksAPI](https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*xkYKSba1vU8AAAAAAAAAAAAADvl6AQ/original)
+
+### 多线重叠时的高亮展示
+
+![useFlowEditorHooksAPI](https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*9zH3TYNCuygAAAAAAAAAAAAADvl6AQ/original)
+
+### 其他
+
+- 细颗粒度的画布操作，增、删、改、选择、撤销/重做
+- 快捷键操作
+- 剪切板能力
diff --git a/docs/useDocs/layoud.md b/docs/useDocs/layoud.md
@@ -7,4 +7,4 @@ title: 布局
 description: 自动布局 、 手动布局
 ---
 
-dsfsaf
+正在加急编写中...