平移和缩放

¥Panning and Zooming

React Flow 的默认平移和缩放行为受 slippy 地图  启发。你可以通过拖动指针来平移，通过滚动来缩放。你可以使用 <ReactFlow /> 组件上的 interaction 和 keyboard 属性轻松自定义此行为。

¥The default pan and zoom behavior of React Flow is inspired by slippy maps . You pan by dragging your pointer and zoom by scrolling. You can customize this behavior easily with the interaction and keyboard props on the <ReactFlow /> component.

视口配置

¥Viewport configurations

这里我们将列出并解释其他工具使用的某些配置。

¥Here we will list and explain some configurations that other tools use.

默认视口控件

¥Default viewport controls

如上所述，ReactFlow 默认控件如下：

¥As mentioned above, the ReactFlow default controls are as follows:

• pan: 指针拖动

  ¥pan: pointer drag

• zoom: 缩放或滚动

  ¥zoom: pinch or scroll

• select: Shift + 鼠标指针拖动

  ¥select: shift + pointer drag

设计工具视口控件

¥Design tool viewport controls

如果你更喜欢 figma/sketch/design 工具控件，你可以将 panOnScroll 和 selectionOnDrag 设置为 true，将 panOnDrag 设置为 false：

¥If you prefer figma/sketch/design tool controls you can set panOnScroll and selectionOnDrag to true and panOnDrag to false:

• pan: 滚动、鼠标中键/右键拖动、空格键 + 鼠标指针拖动

  ¥pan: scroll, middle / right mouse drag, space + pointer drag

• zoom: 捏合或 cmd + 滚动

  ¥zoom: pinch or cmd + scroll

• select: 指针拖动

  ¥select: pointer drag

在此示例中，我们还设置了 selectionMode="partial" 以便能够将节点添加到仅部分选中的选择中。

¥In this example we also set selectionMode="partial" to be able to add nodes to a selection that are only partially selected.