📝 feat: useFlowView hook doc

docs/useDocs/useFlowViewer.md

@@ -46,22 +46,153 @@ function ProApp() {
 3. selectEdge: 选中边缘；
 4. selectEdges: 批量选中边缘；
 
-这些方法可以用于在前端对一个包含多个节点的数据结构进行增删改查等操作。其中，updateNodeMeta、updateNodeState 和 updateNodeContent 这三个方法分别用于更新节点的元数据、状态和内容，可以根据实际需求进行选择使用。而 dispatchNodes 方法则可以传入 json 执行指令。
+这些方法可以用于在前端为一个或多个节点（边缘）标记选中状态。
 
-## 节点查询
+### selectNode
 
-1. getNode: 查询节点信息
-2. getNodes: 批量查询节点信息
+```js
+selectNode: (nodeId: string, selectType: SelectType) => void;
+```
+
+#### 参数
+
+- `nodeId` - 节点 Id
+  - 类型: `string`
+- `selectType` - 选中样式
+  - 类型: [SelectType](/components/flow-view#selecttype)
+
+#### 返回值
+
+- 类型: `void`
+
+### selectNodes
+
+```js
+selectNodes: (nodeIds: string[], selectType: SelectType) => void;
+```
+
+#### 参数
+
+- `nodeIds` - 节点 Id 的数组
+  - 类型: `string[]`
+- `selectType` - 选中样式
+
+  - 类型: [SelectType](/components/flow-view#selecttype)
+
+### selectEdge
+
+```js
+selectEdge: (edgeId: string, selectType: SelectType) => void;
+```
+
+#### 参数
+
+- `edgeId` - 边 Id
+  - 类型: `string`
+- `selectType` - 选中样式
+
+  - 类型: [SelectType](/components/flow-view#selecttype)
+
+### selectEdges
+
+```js
+selectEdges: (edgeIds: string[], selectType: SelectType) => void;
+```
+
+#### 参数
+
+- `edgeIds` - 边 Id 的数组
+  - 类型: `string[]`
+- `selectType` - 选中样式
+  - 类型: [SelectType](/components/flow-view#selecttype)
+
+#### 返回值
+
+- 类型: `void`
 
 ## 画布聚焦
 
 1. zoomTo: 画布缩放；
-2. getViewport: 获取当前窗口坐标及缩放等级；
-3. setViewport: 设置窗口坐标及缩放等级；
-   4: zoomToNode: 快速聚焦到某个节点；
+2. zoomToNode: 快速聚焦到某个节点；
+3. getViewport: 获取当前窗口坐标及缩放等级；
+4. setViewport: 设置窗口坐标及缩放等级；
+
+### selectNode
+
+```js
+zoomTo: (zoomNumber: number, duration?: number) => void;
+```
+
+#### 参数
+
+- `zoomNumber` - zoom 等级
+  - 类型: `number`
+- `duration` - 持续时间
+  - 类型: `number`
+  - 可选参数
+
+#### 返回值
+
+- 类型: `void`
+
+### selectNode
+
+```js
+zoomToNode: (nodeId: string, duration?: number) => void;
+```
+
+#### 参数
+
+- `nodeId` - 节点 Id
+  - 类型: `string`
+- `duration` - 持续时间
+  - 类型: `number`
+  - 可选参数
+
+#### 返回值
+
+- 类型: `void`
+
+### getViewport
+
+```js
+getViewport: () => Viewport;
+```
+
+#### 参数
+
+- 无
+
+#### 返回值
+
+- 类型: `Viewport`
+
+```js
+type Viewport = {
+  x: number,
+  y: number,
+  zoom: number,
+};
+```
+
+### setViewport
+
+```js
+setViewport: (viewport: Viewport, duration?: number) => void;
+```
+
+#### 参数
+
+- `viewport` - 视窗
+  - 类型: `Viewport`
+- `duration` - 持续时间
+  - 类型: `number`
+  - 可选参数
+
+#### 返回值
+
+- 类型: `void`
 
 ## 小地图
 
 1. setMiniMapPosition: 设置 MiniMap 在窗口的坐标位置
-
-### dispatchNodes

src/FlowView/hooks/useFlowView.ts

@@ -64,7 +64,7 @@ export const useFlowViewer = () => {
     return reactFlowInstance?.getViewport!();
   };
 
-  const setViewport = (viewport: Viewport, duration: number) => {
+  const setViewport = (viewport: Viewport, duration?: number) => {
     return reactFlowInstance?.setViewport!(viewport, { duration });
   };