平移與縮放

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}

• 平移：空白鍵 + 拖曳滑鼠、滾動、滑鼠中鍵或右鍵
• 縮放：雙指撥動或 cmd + 滾動
• 建立選取範圍：拖曳滑鼠

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

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

在此範例中，我們也設定了 selectionMode={SelectionMode.Partial}，以便能夠將僅部分選取的節點加入選取範圍。