<MiniMap />

<MiniMap /> 组件可用于渲染流程的概览。它将每个节点渲染为 SVG 元素，并可视化当前视窗相对于流程其余部分的位置。

import { ReactFlow, MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeStrokeWidth={3} />
    </ReactFlow>
  );
}

属性

对于 TypeScript 用户，<MiniMap /> 组件的属性类型导出为 MiniMapProps。

名称	类型	默认值
#`nodeColor?`	`字符串 \| (节点: Node<T>) => 字符串`	`"#e2e2e2"`
#`nodeStrokeColor?`	`字符串 \| (节点: Node<T>) => 字符串`	`"transparent"`
#`nodeClassName?`	`字符串 \| (节点: Node<T>) => 字符串`
#`nodeBorderRadius?`	`数字`	`5`
#`nodeStrokeWidth?`	`数字`	`2`
#`nodeComponent?`	`React.ComponentType<MiniMapNodeProps>` 一个自定义组件，用于在小地图中渲染节点。此组件必须渲染 SVG 元素！
#`maskColor?`	`字符串` 覆盖小地图中当前未在视窗中可见部分的蒙版的颜色。	`"rgb(240, 240, 240, 0.6)"`
#`maskStrokeColor?`	`字符串`	`"none"`
#`maskStrokeWidth?`	`数字`	`1`
#`position?`	`PanelPosition`	`"bottom-right"`
#`onClick?`	`(事件: React.MouseEvent,位置: XYPosition) => void`
#`onNodeClick?`	`(事件: React.MouseEvent,节点: Node<T>) => void`
#`pannable?`	`布尔值` 确定是否可以通过在小地图中拖动来平移视窗。	`false`
#`zoomable?`	`布尔值` 确定是否可以通过在小地图中滚动来缩放视窗。	`false`
#`ariaLabel?`	`字符串 \| null` 小地图中没有供屏幕阅读器用作可访问名称的文本，因此我们必须提供一个以使小地图可访问。默认值已足够，但您可能希望将其替换为与您的应用程序或产品更相关的名称。	`"React Flow mini map"`
#`inversePan?`	`布尔值`
#`zoomStep?`	`数字`	`10`
#`offsetScale?`	`数字`	`5`

示例

使小地图可交互

默认情况下，小地图不可交互。要允许用户通过平移或缩放小地图与视窗交互，可以将 zoomable 或 pannable（或两者！）道具设置为 true。

import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap pannable zoomable />
    </ReactFlow>
  );
}

实现自定义小地图节点

可以将自定义组件传递给 nodeComponent 道具，以更改在小地图中渲染节点的方式。如果这样做，为了使其正常工作，必须在组件中仅使用 SVG 元素。

import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeComponent={MiniMapNode} />
    </ReactFlow>
  );
}
 
function MiniMapNode({ x, y }) {
  return <circle cx={x} cy={y} r="50" />;
}

查看 MiniMapNodeProps 文档，了解传递给自定义组件的道具。

自定义小地图节点颜色

nodeColor、nodeStrokeColor 和 nodeClassName 道具可以是接收一个 Node 并计算道具值的函数。这可用于自定义每个小地图节点的外观。

此示例展示了如何根据节点的类型为每个小地图节点着色

import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeColor={nodeColor} />
    </ReactFlow>
  );
}
 
function nodeColor(node) {
  switch (node.type) {
    case 'input':
      return '#6ede87';
    case 'output':
      return '#6865A5';
    default:
      return '#ff0072';
  }
}

Typescript

此组件接受自定义节点类型的泛型类型参数。有关更多信息，请参见我们的 Typescript 指南中的本节。

<MiniMap<CustomNodeType> nodeColor={nodeColor} />

组件类型