React Flow 中 Minimap 与 Controls 组件使用指南：交互式小地图与视口控制定制（含代码示例）

本文为《React Agent：从零开始构建 AI 智能体》专栏系列文章。专栏地址：https://blog.csdn.net/suiyingy/category_12933485.html。项目地址：https://gitee.com/fgai/react-agent（含完整代码示例与实战源）。完整介绍：https://blog.csdn.net/suiyingy/article/details/146983582。

在 React Flow 中，Minimap（小地图）是一个非常实用的组件，它主要用于呈现流程图或图形的整体缩略视图。用户通过 Minimap可以快速了解整个图形的结构和布局，以及当前视口在整个图形中的位置。它将每个节点渲染为一个 SVG 元素，并且可以通过各种属性进行定制，如节点的颜色、边框半径、描边宽度等。默认情况下，Minimap 是非交互式的，但通过设置pannable和zoomable属性为true，可以让用户通过拖动或缩放 Minimap 来控制视口的位置和缩放比例，方便用户在处理复杂的大型图形时快速定位和导航。

Controls（控件）则是 React Flow 提供的一组用于控制视口操作的组件。它通常包含缩放、居中和锁定视口等功能按钮。通过这些控件，用户可以方便地对图形进行缩放操作，以便更清晰地查看细节或整体布局；点击居中按钮可以将图形自动居中显示在视口中；而锁定视口功能则可以防止用户意外地拖动或缩放视口，确保图形的显示状态保持稳定。Controls 组件是可定制的，用户可以根据自己的需求和设计偏好来调整控件的样式和布局，以适应不同的应用场景。

示例程序如下所示。

复制代码

import React, { useCallback } from 'react';
import {
  ReactFlow,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
  BackgroundVariant,
} from 'reactflow';

import 'reactflow/dist/style.css';
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );

  return (
    <div style={{ height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      >
        <Controls />
        <MiniMap 
          nodeColor="#90caf9"                // 节点填充颜色
          nodeStrokeColor="#1e88e5"          // 节点边框颜色
          nodeBorderRadius={6}               // 节点圆角
          maskColor="rgba(144, 202, 249, 0.2)" // 视口遮罩颜色
          style={{
            backgroundColor: 'white',        // 背景色
            border: '1px solid #ccc',        // 边框样式
            borderRadius: '12px'             // 整体圆角
          }}
          nodeSize={12}                      // 节点尺寸
        />
      </ReactFlow>
    </div>
  );
}

运行程序后结果如下图所示。

图1 Minimap 与 Controls

立即关注获取最新动态

点击订阅《React Agent 开发专栏》，每周获取智能体开发深度教程。项目代码持续更新至React Agent 开源仓库，欢迎 Star 获取实时更新通知！FGAI 人工智能平台：FGAI 人工智能平台