XFlowCanvas

1. CanvasScaleToolbar 缩放工具
   1. 
2. CanvasMiniMap 迷你地图
   1. 
3. CanvasSnapline 对齐线
   1. 
4. CanvasContextMenu
   1. 
5. CanvasNodePortTooltip

�

import {useGraphConfig} from './config';
function App() {
  // 画布配置
  const graphConfig = useGraphConfig();
  return (
    <XFlow>
      <XFlowCanvas config={graphConfig}>
        {/*缩放工具*/}
        <CanvasScaleToolbar position={{top: 8, left: 8}}/>
        {/*迷你地图*/}
        <CanvasMiniMap
          miniMapClz="xflow-custom-minimap"
          nodeFillColor="#ccc"
          minimapOptions={{
            width: 200,
              height: 80,
          }}
          position={{top: 12, right: 12}}
          />
        {/*对齐线*/}
        <CanvasSnapline color="#1890ff"/>
      </XFlowCanvas>
    </XFlow>
  )
}

graphConfig

import React from 'react';
import { createGraphConfig } from '@antv/xflow';
/** 自定义React节点/边 */
import Node1 from '../node/node1';
import Node2 from '../node/node2';
import Edge1 from '../edge/edge1';
import Edge2 from '../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} />);
});

setX6Config