<MiniMap />

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

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <MiniMap nodeStrokeWidth={3} />
</SvelteFlow>

属性

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

名称	类型	默认值
#`class?`	`string`	`-`
#`style?`	`string`	`-`
#`width?`	`number`	`-`
#`height?`	`number`	`-`
#`bgColor?`	`string`	`"#fff"`
#`nodeColor?`	`string \| (节点: Node<T>) => string`	`"#e2e2e2"`
#`nodeStrokeColor?`	`string \| (节点: Node<T>) => string`	`"transparent"`
#`nodeClass?`	`string \| (节点: Node<T>) => string`
#`nodeBorderRadius?`	`number`	`5`
#`nodeStrokeWidth?`	`number`	`2`
#`maskColor?`	`string`	`"rgb(240, 240, 240, 0.6)"`
#`maskStrokeColor?`	`string`	`"none"`
#`maskStrokeWidth?`	`number`	`1`
#`position?`	`PanelPosition`	`"bottom-right"`
#`pannable?`	`boolean` 确定是否可以通过拖动迷你地图内的视窗来平移视窗。	`false`
#`zoomable?`	`boolean` 确定是否可以通过滚动迷你地图内的视窗来缩放视窗。	`false`
#`ariaLabel?`	`string \| null` 迷你地图中没有文本供屏幕阅读器用作可访问名称，因此我们必须提供一个名称以使迷你地图可访问。默认值就足够了，但您可能希望用与您的应用程序或产品更相关的名称来替换它。	`"Svelte Flow mini map"`
#`inversePan?`	`boolean`
#`zoomStep?`	`number`	`10`

示例

使迷你地图交互

默认情况下，迷你地图是非交互式的。要允许用户通过平移或缩放迷你地图来与视窗交互，您可以将 zoomable 或 pannable（或两者！）属性设置为 true。

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <MiniMap pannable zoomable />
</SvelteFlow>

自定义迷你地图节点颜色

The nodeColor, nodeStrokeColor, and nodeClassName props 可以是一个函数，该函数接受一个 Node 并计算该属性的值。这可以用于自定义每个迷你地图节点的外观。

此示例显示如何根据节点的类型为每个迷你地图节点着色

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
 
  function nodeColor(node) {
    return node.type === 'input' ? 'blue' : 'red';
  }
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <MiniMap nodeColor={nodeColor} />
</SvelteFlow>

组件类型