迁移到 React Flow v11

¥Migrate to React Flow v11

v11 中发生了很多变化，但这次我们试图将重大变化保持在较小范围内。最大的变化是新的包名 reactflow 和新的 repo 结构。React Flow 现在作为 monorepo 进行管理，并分为多个可以单独安装的包。除此之外，v11 中还引入了一些 API 更改和新 API。本指南详细解释了更改并帮助你从 v10 迁移到 v11。

¥A lot changed in v11 but this time we’ve tried to keep the breaking changes small. The biggest change is the new package name reactflow and the new repo structure. React Flow is now managed as a monorepo and separated into multiple packages that can be installed separately. In addition to that, there are some API changes and new APIs introduced in v11. This guide explains the changes in detail and helps you to migrate from v10 to v11.

新功能

¥New Features

• 更好的 可访问性

  ¥Better Accessibility

  • 节点和边可通过键盘聚焦、选择、移动和删除。

    ¥Nodes and edges are focusable, selectable, moveable and deletable with the keyboard.

  • aria- 是所有元素的默认属性，可通过 ariaLabel 选项控制

    ¥aria- default attributes for all elements and controllable via ariaLabel options

  • 使用新的 disableKeyboardA11y 属性可以禁用键盘控制

    ¥Keyboard controls can be disabled with the new disableKeyboardA11y prop

• 通过新的边缘选项更好地选择边缘：interactionWidth - 渲染不可见的边缘，使其更容易交互

  ¥Better selectable edges via new edge option: interactionWidth - renders invisible edge that makes it easier to interact

• 更好的平滑步骤和步骤边缘路由：https://twitter.com/reactflowdev/status/1567535405284614145 

  ¥Better routing for smoothstep and step edges: https://twitter.com/reactflowdev/status/1567535405284614145 

• 更好的边缘更新行为：https://twitter.com/reactflowdev/status/1564966917517021184 

  ¥Nicer edge updating behavior: https://twitter.com/reactflowdev/status/1564966917517021184 

• 节点原点：新的 nodeOrigin 属性可让你控制节点的来源。用于布局。

  ¥Node origin: The new nodeOrigin prop lets you control the origin of a node. Useful for layouting.

• 新背景图案：BackgroundVariant.Cross 变体

  ¥New background pattern: BackgroundVariant.Cross variant

• useOnViewportChange 钩子 - 处理组件内的视口更改

  ¥useOnViewportChange hook - handle viewport changes within a component

• use-on-selection-change 钩子 - 处理组件内的选择更改

  ¥use-on-selection-change hook - handle selection changes within a component

• useNodesInitialized 钩子 - 如果所有节点都已初始化并且有多个节点，则返回 true

  ¥useNodesInitialized hook - returns true if all nodes are initialized and if there is more than one node

• 节点和边的可删除选项

  ¥Deletable option for Nodes and edges

• 新事件处理程序：onPaneMouseEnter、onPaneMouseMove 和 onPaneMouseLeave

  ¥New Event handlers: onPaneMouseEnter, onPaneMouseMove and onPaneMouseLeave

• smoothstep 和 default 边的边 pathOptions

  ¥Edge pathOptions for smoothstep and default edges

• 更好的光标默认值：光标正在抓取，同时拖动节点或平移

  ¥Nicer cursor defaults: Cursor is grabbing, while dragging a node or panning

• 可使用鼠标中键移动窗格

  ¥Pane moveable with middle mouse button

• 当节点不可拖动时平移节点（draggable=false 或 nodesDraggable false）

  ¥Pan over nodes when they are not draggable (draggable=false or nodesDraggable false)

  • 你可以通过将类名 nopan 添加到自定义节点的封装器来禁用此行为

    ¥you can disable this behavior by adding the class name nopan to a wrapper of a custom node

• <BaseEdge /> 组件使构建自定义边缘更加容易

  ¥<BaseEdge /> component that makes it easier to build custom edges

• 可单独安装软件包

  ¥Separately installable packages

  • @reactflow/core

  • @reactflow/background

  • @reactflow/controls

  • @reactflow/minimap

重大变化

¥Breaking Changes

1. 新 npm 包名称

¥ New npm package name

包 react-flow-renderer 已重命名为 reactflow。

¥The package react-flow-renderer has been renamed to reactflow.

旧 API

¥Old API

// npm install react-flow-renderer
import ReactFlow from 'react-flow-renderer';

新 API

¥New API

// npm install reactflow
import { ReactFlow } from '@xyflow/react';

2. 必须导入 CSS

¥ Importing CSS is mandatory

我们不再注入 CSS。如果你未加载样式，React Flow 将无法工作！

¥We are not injecting CSS anymore. React Flow won’t work if you are not loading the styles!

// default styling
import '@xyflow/react/dist/style.css';
 
// or if you just want basic styles
import '@xyflow/react/dist/base.css';

2.1.删除 nocss 入口点

¥2.1. Removal of the nocss entrypoint

此更改还意味着不再有 react-flow-renderer/nocss 入口点。如果你使用它，则需要如上所述调整 CSS 入口点。

¥This change also means that there is no react-flow-renderer/nocss entry point anymore. If you used that, you need to adjust the CSS entry points as mentioned above.

3. defaultPosition 和 defaultZoom 已合并到 defaultViewport

¥ defaultPosition and defaultZoom have been merged to defaultViewport

旧 API

¥Old API

import ReactFlow from 'react-flow-renderer';
 
const Flow = () => {
  return <ReactFlow defaultPosition={[10, 15]} defaultZoom={5} />;
};
 
export default Flow;

新 API

¥New API

import { ReactFlow } from '@xyflow/react';
 
const defaultViewport: Viewport = { x: 10, y: 15, zoom: 5 };
 
const Flow = () => {
  return <ReactFlow defaultViewport={defaultViewport} />;
};
 
export default Flow;

4. 删除 getBezierEdgeCenter， getSimpleBezierEdgeCenter 和 getEdgeCenter

¥ Removal of getBezierEdgeCenter, getSimpleBezierEdgeCenter and getEdgeCenter

在 v10 中，我们有 getBezierEdgeCenter、getSimpleBezierEdgeCenter 和 getEdgeCenter 用于获取某种边缘类型的中心。在 v11 中，我们更改了用于创建路径的辅助函数，以便它还返回边的中心/标签位置。

¥In v10 we had getBezierEdgeCenter, getSimpleBezierEdgeCenter and getEdgeCenter for getting the center of a certain edge type. In v11 we changed the helper function for creating the path, so that it also returns the center / label position of an edge.

假设你想要获取贝塞尔边缘的路径和中心/标签位置：

¥Let’s say you want to get the path and the center / label position of a bezier edge:

旧 API

¥Old API

import { getBezierEdgeCenter, getBezierPath } from 'react-flow-renderer';
 
const path = getBezierPath(edgeParams);
const [centerX, centerY] = getBezierEdgeCenter(params);

新 API

¥New API

import { getBezierPath } from '@xyflow/react';
 
const [path, labelX, labelY] = getBezierPath(edgeParams);

我们避免再将其称为 centerX 和 centerY，因为它实际上是标签位置，而不总是每种边缘类型的中心。

¥We avoid to call it centerX and centerY anymore, because it’s actually the label position and not always the center for every edge type.

5. 删除 onClickConnectStop 和 onConnectStop

¥ Removal of onClickConnectStop and onConnectStop

旧 API

¥Old API

import ReactFlow from 'react-flow-renderer';
 
const Flow = () => {
  const onConnectStop = () => console.log('on connect stop');
 
  return (
    <ReactFlow
      defaultNodes={defaultNodes}
      defaultEdges={defaultEdges}
      onConnectStop={onConnectStop}
      onClickConnectStop={onConnectStop}
    />
  );
};
 
export default Flow;

新 API

¥New API

import { ReactFlow } from '@xyflow/react';
 
const Flow = () => {
  const onConnectEnd = () => console.log('on connect stop');
 
  return (
    <ReactFlow
      defaultNodes={defaultNodes}
      defaultEdges={defaultEdges}
      onConnectEnd={onConnectEnd}
      onClickConnectEnd={onConnectEnd}
    />
  );
};
 
export default Flow;

6. 平移节点

¥ Pan over nodes

在以前的版本中，即使节点不可拖动，你也无法平移它们。在 v11 中，当 nodesDraggable=false 或节点选项 draggable=false 时，你可以平移节点。如果你想要恢复旧行为，可以将类名 nopan 添加到自定义节点的封装器中。

¥In the previous versions you couldn’t pan over nodes even if they were not draggable. In v11, you can pan over nodes when nodesDraggable=false or node option draggable=false. If you want the old behavior back, you can add the class name nopan to the wrappers of your custom nodes.