1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| import React from 'react'
| import { createGraphConfig } from '@antv/xflow'
| /** 自定义React节点/边 */
| import Node1 from './react-node/node1'
| import Node2 from './react-node/node2'
| import Edge1 from './react-edge/edge1'
| import Edge2 from './react-edge/edge2'
|
| export const useGraphConfig = createGraphConfig(config => {
| /** 设置XFlow画布配置项 */
| config.setX6Config({
| /** 画布网格 */
| grid: true,
| /** 画布缩放等级 */
| scaling: {
| min: 0.2,
| max: 3,
| },
| /** 画布滚轮缩放 */
| // mousewheel: {
| // enabled: true,
| // /** 将鼠标位置作为中心缩放 */
| // zoomAtMousePosition: true,
| // },
| })
|
| /** 设置XFlow画布需要渲染的React节点/边 */
| config.setNodeRender('NODE1', props => <Node1 {...props} />)
| config.setNodeRender('NODE2', Node2)
| config.setEdgeRender('EDGE1', props => <Edge1 {...props} />)
| config.setEdgeRender('EDGE2', props => <Edge2 {...props} />)
| })
|
|
