<MiniMap />

<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: Node<T>) => string`	`"#e2e2e2"`
#`nodeStrokeColor?`	`string \| (node: Node<T>) => string`	`"transparent"`
#`nodeClass?`	`string \| (node: 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>

ミニマップノード色のカスタマイズ

nodeColor、nodeStrokeColor、およびnodeClassNameプロパティは、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>

コンポーネントタイプ