平移和缩放

¥Panning and Zooming

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

¥The default pan and zoom behavior of React Flow is inspired by slippy maps . You pan by dragging and zoom by scrolling. You can customize this behavior easily with the provided props:

• panOnDrag：默认：true

  ¥panOnDrag: default: true

• selectionOnDrag：默认：false（自 11.4.0 起可用）

  ¥selectionOnDrag: default: false (available since 11.4.0)

• panOnScroll：默认：false（覆盖 zoomOnScroll）

  ¥panOnScroll: default: false (Overwrites zoomOnScroll)

• panOnScrollSpeed：默认：0.5

  ¥panOnScrollSpeed: default: 0.5

• panOnScrollMode：默认：'free'。'free'（所有方向）、'vertical'（仅垂直）或 'horizontal'（仅水平）

  ¥panOnScrollMode: default: 'free'. 'free' (all directions), 'vertical' (only vertical) or 'horizontal' (only horizontal)

• zoomOnScroll：默认：true

  ¥zoomOnScroll: default: true

• zoomOnPinch：默认：true

  ¥zoomOnPinch: default: true

• zoomOnDoubleClick：默认：true

  ¥zoomOnDoubleClick: default: true

• preventScrolling：默认：true（阻止浏览器滚动行为）

  ¥preventScrolling: default: true (browser scroll behavior is prevented)

• zoomActivationKeyCode：默认 'Meta'

  ¥zoomActivationKeyCode: default 'Meta'

• panActivationKeyCode：默认 'Space'（自 11.4.0 起可用）

  ¥panActivationKeyCode: default 'Space' (available since 11.4.0)

默认视口控件

¥Default Viewport Controls

如上所述，默认控件是：

¥As mentioned above, the default controls are:

• 平移：拖动鼠标

  ¥pan: drag mouse

• 缩放：scroll

  ¥zoom: scroll

• 创建选择：Shift + 拖动

  ¥create selection: Shift + drag

import { useCallback } from 'react';
import {
  ReactFlow,
  addEdge,
  useEdgesState,
  useNodesState,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { initialNodes } from './nodes';
import { initialEdges } from './edges';
 
function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
    />
  );
}
 
export default Flow;

类似 Figma 的视口控件

¥Figma-like Viewport Controls

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

¥If you prefer figma/sketch/design tool controls you can set panOnScroll={true} and selectionOnDrag={true}:

• 平移：空格 + 鼠标拖动、滚动、鼠标中键或右键

  ¥pan: Space + drag mouse, scroll, middle or right mouse

• 缩放：pitch 或 cmd + scroll

  ¥zoom: pitch or cmd + scroll

• 创建选择：拖动鼠标

  ¥create selection: drag mouse

import { useCallback } from 'react';
import {
  ReactFlow,
  addEdge,
  SelectionMode,
  useEdgesState,
  useNodesState,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { initialNodes } from './nodes';
import { initialEdges } from './edges';
 
const panOnDrag = [1, 2];
 
function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      panOnScroll
      selectionOnDrag
      panOnDrag={panOnDrag}
      selectionMode={SelectionMode.Partial}
    />
  );
}
 
export default Flow;

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

¥In this example we also set selectionMode={SelectionMode.Partial} to be able to add nodes to a selection that are only partially selected.