パンとズーム

React Flowのデフォルトのパンとズームの動作は、スリッピーマップにインスパイアされています。ドラッグでパンし、スクロールでズームします。この動作は、提供されているpropsで簡単にカスタマイズできます。

• panOnDrag: デフォルト: true
• selectionOnDrag: デフォルト: false（11.4.0から利用可能）
• panOnScroll: デフォルト: false（zoomOnScrollを上書きします）
• panOnScrollSpeed: デフォルト: 0.5
• panOnScrollMode: デフォルト: 'free'。'free'（全方向）、'vertical'（垂直のみ）、または'horizontal'（水平のみ）
• zoomOnScroll: デフォルト: true
• zoomOnPinch: デフォルト: true
• zoomOnDoubleClick: デフォルト: true
• preventScrolling: デフォルト: true（ブラウザのスクロール動作を防止します）
• zoomActivationKeyCode: デフォルト 'Meta'
• panActivationKeyCode: デフォルト 'Space'（11.4.0から利用可能）

デフォルトのビューポートコントロール

上記のように、デフォルトのコントロールは次のとおりです。

• パン：マウスをドラッグ
• ズーム：スクロール
• 選択範囲の作成：Shift + ドラッグ

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Figma風のビューポートコントロール

Figma/Sketch/デザインツールのようなコントロールがお好みの場合は、panOnScroll={true} と selectionOnDrag={true} を設定できます。

• パン：Space + マウスのドラッグ、スクロール、中マウスまたは右マウス
• ズーム：ピンチまたはcmd + スクロール
• 選択範囲の作成：マウスをドラッグ

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

この例では、部分的にしか選択されていないノードを選択範囲に追加できるように、selectionMode={SelectionMode.Partial}も設定しています。