平移和缩放

React Flow 的默认平移和缩放行为灵感来自滑块地图。你可以通过拖动进行平移，通过滚动进行缩放。你可以使用提供的道具轻松自定义此行为

• 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} 以能够将节点添加到仅部分选中的选择中。