✨ feat: Update document description (#54)

* ✨ feat: node edge onchange, add minimap config * ✨ feat: add useNodesState function * 🐛 fix: build * ✨ feat: add spector component * 📝 feat: Inspector component * ✨ feat: add full scren hook * 📝 feat: full screen memo * 📝 feat: readme * 📝 feat: rename lineage type * 📝 feat: basic name * 📝 feat: drag node * 📝 feat: memo text --------- Co-authored-by: jiangchu <[email protected]>
ant-design · Dec 19, 2023 · 061e754 · 061e754
1 parent 33cd0d3
commit 061e754
Show file tree

Hide file tree

Showing 30 changed files with 524 additions and 239 deletions.
diff --git a/README.md b/README.md
@@ -50,11 +50,19 @@
 
 Pro Flow 是一款基于 react-flow 构建的画布编辑器。具有的特性如下：
 
-- 🎨 **自定义节点类型**：用户可以通过传入自定义 React 组件的方式创建不同类型的节点，从而满足不同的业务需求；
-- 🎉 **灵活的事件处理**：支持用户对节点的拖拽、连接、删除等事件进行自定义处理，满足不同业务场景的需求；
-- 🚀 **高度可定制**：支持用户对节点外观、连线样式、节点大小等多个方面进行自定义，方便用户根据自己的需求进行定制化开发。
-- 🔙 **撤销重做**：支持用户对节点编辑操作进行撤销和重做，提高用户操作的便利性和效率；
-- 🌓 **亮暗色主题模式一键切换**：支持用户在亮色和暗色主题之间快速切换，适应不同的环境和用户习惯；
+1. 💠 **现代化节点设计**：拥有现代化设计的默认节点与成组节点组件，使界面更加直观、易读、易用。
+
+2. 🌐 **开箱即用的组件**：支持 MiniMap、Inspector、Loading 等组件，提供丰富的扩展能力和定制化选项，让用户能够轻松定制画布界面。
+
+3. 🎨 **自动布局算法**：内置了 dagre 布局算法，使得用户只需给出节点和关系，即可获得自动布局后的效果，轻松实现流程图的美观展现。
+
+4. 🖱️ **流程图数据操作**：提供了 useFlowViewer 功能，让用户可以轻松操作和管理画布相关数据，实现个性化的交互体验。
+
+5. 🧩 **自定义节点和边缘**：支持自定义节点、自定义边缘能力，并提供了额外的 label、zoom、selectType 等属性，满足个性化定制需求。
+
+6. 📱 **移动端友好**：默认提供了 figma 模式的触摸板交互画布逻辑，适配移动端操作，使用户体验更加流畅。
+
+7. 🎨 **画布编辑器能力**：提供开箱即用的画布编辑器能力，内置丰富的画布、节点操作功能，包括复制粘贴、撤销重做等功能，提升用户的操作效率和便利性。
 
 ## 快速上手
 
@@ -68,6 +76,87 @@ pnpm i @ant-design/pro-flow -S
 
 ### 使用
 
+```js
+import { FlowView } from '@ant-design/pro-flow';
+import useStyles from './css/index.style';
+
+function App() {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <FlowView nodes={[]} edges={[]} />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### 添加数据
+
+```js
+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',
+  },
+];
+```
+
+### 添加交互性
+
+```js
+import { FlowView } from '@ant-design/pro-flow';
+import useStyles from './css/index.style';
+import { edges, nodes } from './data';
+
+function App() {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <FlowView nodes={nodes} edges={edges} />
+    </div>
+  );
+}
+
+export default App;
+```
+
 ## 更新日志
 
 详情：[CHANGELOG](./CHANGELOG.md)

diff --git a/docs/apiDocs/demos/useFlowView.tsx b/docs/apiDocs/demos/useFlowView.tsx
@@ -10,7 +10,7 @@ import useStyles from './css/viewer.style';
 import { edges, nodes } from './data/viewer';
 
 function App() {
-  const { selectNode, selectEdges, selectNodes, zoomToNode } = useFlowViewer();
+  const { selectNode, selectEdges, selectNodes, zoomToNode, fullScreen } = useFlowViewer();
   const { styles } = useStyles();
 
   return (
@@ -51,6 +51,13 @@ function App() {
             >
               选中全部边缘
             </Button>
+            <Button
+              onClick={() => {
+                fullScreen();
+              }}
+            >
+              全屏
+            </Button>
           </div>
         </FlowPanel>
       </FlowView>

diff --git a/docs/apiDocs/useFlowViewer.zh-CN.md b/docs/apiDocs/useFlowViewer.zh-CN.md
@@ -212,3 +212,28 @@ setMiniMapPosition: (x: number, y: number) => void;
   - 类型: `number`
 - `y` - y 轴坐标
   - 类型: `number`
+
+## 画布全屏
+
+1. fullScreen: 画布全屏
+2. exitFullScreen: 取消全屏
+
+### fullScreen
+
+```js
+fullScreen: () => void;
+```
+
+#### 参数
+
+- 无
+
+### exitFullScreen
+
+```js
+exitFullScreen: () => void;
+```
+
+#### 参数
+
+- 无
diff --git a/docs/guide/baseIntro.zh-CN.md b/docs/guide/baseIntro.zh-CN.md
@@ -14,7 +14,7 @@ description:
 
 ## Nodes - 节点
 
-ProFlow 中的节点是一个 React 组件。这意味着它可以渲染您喜欢的任何内容。每个节点都有一个 x 和 y 坐标，这告诉它它在视口中的位置。在不设置 type 的情况下，FlowView 组件默认会把组件设置为[Lineage](/components/lineage-node)类型的节点。你也可以自定义节点类型。
+ProFlow 中的节点是一个 React 组件。这意味着它可以渲染您喜欢的任何内容。每个节点都有一个 x 和 y 坐标，这告诉它它在视口中的位置。在不设置 type 的情况下，FlowView 组件默认会把组件设置为[BasicNode](/components/lineage-node)类型的节点。你也可以自定义节点类型。
 
 <code src="./demos/baseIntro/coreNode.tsx"></code>
 

diff --git a/docs/guide/demos/flowEditor/css/dragAddNode.style.ts b/docs/guide/demos/flowEditor/css/dragAddNode.style.ts
@@ -4,7 +4,7 @@ const useStyles = createStyles(() => {
   return {
     container: {
       width: '100%',
-      height: '800px',
+      height: '600px',
       display: 'flex',
       flexDirection: 'column',
     },

diff --git a/docs/guide/demos/flowEditor/dragAddNode.tsx b/docs/guide/demos/flowEditor/dragAddNode.tsx
@@ -7,9 +7,12 @@ import {
   EditNode,
   FlowEditor,
   FlowEditorProvider,
+  FlowPanel,
+  Inspector,
   useFlowEditor,
 } from '@ant-design/pro-flow';
-import { useCallback, useEffect } from 'react';
+import { Button } from 'antd';
+import { useCallback, useEffect, useState } from 'react';
 import { StringRender } from './StringNode';
 import useStyles from './css/dragAddNode.style';
 import Sidebar from './sidebar';
@@ -25,6 +28,7 @@ const nodeTypes = {
 const ProFlowDemo = () => {
   const editor = useFlowEditor();
   const { styles } = useStyles();
+  const [open, setOpen] = useState(false);
 
   const onDragOver = useCallback((event) => {
     event.preventDefault();
@@ -82,11 +86,18 @@ const ProFlowDemo = () => {
         flowProps={{
           onDrop,
           onDragOver,
+          onPaneClick: () => setOpen(false),
         }}
         miniMap={false}
         devtools={true}
-      ></FlowEditor>
-      <Sidebar />
+      >
+        <FlowPanel position={'top-center'}>
+          <Button onClick={() => setOpen(true)}>Open Nodes Inspector</Button>
+        </FlowPanel>
+        <Inspector open={open} onClick={() => setOpen(false)}>
+          <Sidebar />
+        </Inspector>
+      </FlowEditor>
     </div>
   );
 };

diff --git a/docs/guide/demos/flowViewIntro/dragableNode.tsx b/docs/guide/demos/flowViewIntro/dragableNode.tsx
@@ -0,0 +1,20 @@
+/**
+ * compact: true
+ * defaultShowCode: true
+ */
+import { FlowView, useNodesState } from '@ant-design/pro-flow';
+import useStyles from './css/index.style';
+import { nodes as _nodes, edges } from './data/data2';
+
+function App() {
+  const { styles } = useStyles();
+  const [nodes, setNodes, onNodesChange] = useNodesState(_nodes);
+
+  return (
+    <div className={styles.container}>
+      <FlowView nodes={nodes} edges={edges} onNodesChange={onNodesChange} stepLessZooming={false} />
+    </div>
+  );
+}
+
+export default App;
diff --git a/docs/guide/demos/quickUse/data.ts b/docs/guide/demos/quickUse/data.ts
@@ -4,23 +4,23 @@ export const nodes = [
     data: {
       title: 'XXX_API_a1',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-      describe: 'XXX_XXX_XXX_API',
+      description: 'XXX_XXX_XXX_API',
     },
   },
   {
     id: 'a2',
     data: {
       title: 'XXX_API_a2',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-      describe: 'XXX_XXX_XXX_API',
+      description: 'XXX_XXX_XXX_API',
     },
   },
   {
     id: 'a3',
     data: {
       title: 'XXX_API_a3',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-      describe: 'XXX_XXX_XXX_API',
+      description: 'XXX_XXX_XXX_API',
     },
   },
 ];

diff --git a/docs/guide/flowViewIntro.zh-CN.md b/docs/guide/flowViewIntro.zh-CN.md
@@ -78,6 +78,10 @@ const nodes = [
 
 <code src='./demos/flowViewIntro/noAutoFlow.tsx'></code>
 
+## 节点拖拽
+
+<code src='./demos/flowViewIntro/dragableNode.tsx'></code>
+
 ## 参数配置
 
 ### FlowView

diff --git a/docs/index.md b/docs/index.md
@@ -8,24 +8,41 @@ hero:
     - text: Github
       link: https://github.com/ant-design/pro-flow
 features:
-  - title: 高灵活度、扩展度
-    image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*_in2RLf5pY8AAAAAAAAAAAAADoN6AQ/original
-    description: 高灵活度的节点与边缘自定义，可以满足您的任何场景。
+  - title: 现代化节点设计
+    image: 💠
+    description: 拥有现代化设计的默认节点与成组节点组件，使界面更加直观、易读、易用。
     link: /guide/brief-intro
+    imageType: light
+
+  - title: 开箱即用的组件
+    link: /guide/brief-intro
+    description: 支持 MiniMap、Inspector、Loading 等组件，提供丰富的扩展能力和定制化选项，让用户能够轻松定制画布界面。
+    image: 🌐
+    imageType: light
+
+  - title: 自动布局算法
+    description: 内置了 dagre 布局算法，使得用户只需给出节点和关系，即可获得自动布局后的效果，轻松实现流程图的美观展现。
+    link: /guide/brief-intro
+    image: 🎨
+    imageType: light
+
+  - title: 数据驱动视图
+    description: 提供了 useFlowViewer 与 useFlowEditor 能力，让用户可以轻松操作和管理画布相关数据，实现个性化的交互体验。
+    link: /guide/brief-intro
+    image: 🖱️
     imageType: primary
 
-  - title: 现代化设计
+  - title: 自定义节点和边缘
+    description: 支持自定义节点、自定义边缘能力，并提供了额外的 label、zoom、selectType 等属性，满足个性化定制需求。
     link: /guide/brief-intro
-    description: 默认节点打造出来的流程图，看起来用起来都更像是一个产品，而不是简易流程图。
-    image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*MvKkQqXEyfQAAAAAAAAAAAAADoN6AQ/original
+    image: 🧩
     imageType: light
 
-  - title: 完善的基本功能
-    description: 提供众多画布展示与交互的基础能力，开箱即用。
+  - title: 🎨 画布编辑器能力
+    description: 提供开箱即用的画布编辑器能力，内置丰富的画布、节点操作功能，包括复制粘贴、撤销重做等功能，提升用户的操作效率和便利性。
     link: /guide/brief-intro
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*6sjjRa7lLhAAAAAAAAAAAAAADoN6AQ/original
     imageType: primary
-
   # - title: Ant Design Token System
   #   link: /guide/switch-theme
   #   description: Integrated with Ant Design V5 Token System by default, making theme customization easy and flexible token consumption in CSS in JS.

diff --git a/src/BasicGroupNode/demos/data.ts b/src/BasicGroupNode/demos/data.ts
@@ -4,7 +4,7 @@ export const nodes: FlowViewNode[] = [
   {
     id: 'd1',
     label: 'group1',
-    type: 'lineageGroup',
+    type: 'BasicNodeGroup',
     data: [
       {
         id: 'a5',
@@ -67,7 +67,7 @@ export const nodes: FlowViewNode[] = [
   {
     id: 'd2',
     label: 'group2',
-    type: 'lineageGroup',
+    type: 'BasicNodeGroup',
     data: [
       {
         id: 'a5',

diff --git a/src/BasicGroupNode/index.tsx b/src/BasicGroupNode/index.tsx
@@ -24,7 +24,7 @@ export interface BasicNodeGroupProps {
 
 const convertMappingNode = (nodeList: BasicGroupNodeData[]): NodeMapItem[] => {
   return nodeList.map((_node) => {
-    return { ..._node, type: 'default', flowNodeType: 'lineage' };
+    return { ..._node, type: 'default', flowNodeType: 'BasicNode' };
   });
 };