平移和缩放

React Flow 的默认平移和缩放行为受到滑动地图的启发。您可以通过拖动进行平移，通过滚动进行缩放。您可以使用提供的属性轻松自定义此行为：

• panOnDrag：默认：true
• SelectionOnDrag：默认值：false（自 11.4.0 起可用）
• panOnScroll：默认值：false（覆盖zoomOnScroll）
• panOnScrollSpeed：默认：0.5
• panOnScrollMode：默认：“自由”。 “自由”（所有方向）、“垂直”（仅垂直）或“水平”（仅水平）
• ZoomOnScroll：默认值：true
• ZoomOnPinch：默认值：true
• ZoomOnDoubleClick：默认值：true
• PreventScrolling：默认值：true（阻止浏览器滚动行为）
• ZoomActivationKeyCode：默认“Meta”
• panActivationKeyCode：默认“空格”（自 11.4.0 起可用）

默认视口控件

如上所述，默认控件是：

• 平移：拖动鼠标
• 缩放：滚动
• 创建选区：Shift + 拖动

类似 Figma 的视口控件

如果您更喜欢Figma/sketch/design工具控件，您可以设置panOnScroll={true}和selectionOnDrag={true}：

• 平移：空格+拖动鼠标、滚动、鼠标中键或右键
• 缩放：俯仰或 cmd + 滚动
• 创建选区：拖动鼠标

在此示例中，我们还设置 SelectionMode={SelectionMode.Partial} 以便能够将节点添加到仅部分选择的选择中。