平移和缩放

🌐 Panning and Zooming

React Flow 的默认平移和缩放行为受 slippy maps  的启发。你可以通过拖动指针来平移，通过滚动来缩放。你可以通过 <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: 指针拖动
• zoom: 捏合或滚动
• select: Shift + 指针拖动

设计工具视口控件

🌐 Design tool viewport controls

如果你更喜欢 Figma/Sketch/设计工具的控件，你可以将 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: 滚动，中键/右键拖动，空格 + 指针拖动
• zoom: 捏合或 cmd + 滚动
• select: 指针拖动

在这个例子中，我们还设置了 selectionMode="partial"，以便能够向一个只部分被选中的选择中添加节点。

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