迁移到 v11

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

新功能

• 更佳 可访问性
  • 节点和边可以通过键盘进行聚焦、选择、移动和删除。
  • aria- 所有元素的默认属性，可以通过 ariaLabel 选项进行控制
  • 可以使用新的 disableKeyboardA11y 属性禁用键盘控制
• 更佳的可选择边，通过新的边选项：interactionWidth - 渲染一个不可见的边，使其更容易交互
• 更佳的 smoothstep 和 step 边的路由：https://twitter.com/reactflowdev/status/1567535405284614145
• 更流畅的边更新行为：https://twitter.com/reactflowdev/status/1564966917517021184
• 节点原点：新的 nodeOrigin 属性允许您控制节点的原点。对布局非常有用。
• 新的背景图案：BackgroundVariant.Cross 变体
• useOnViewportChange 钩子 - 在组件中处理视窗变更
• use-on-selection-change 钩子 - 在组件中处理选择变更
• useNodesInitialized 钩子 - 如果所有节点都已初始化并且存在多个节点，则返回 true
• 节点和边的 可删除选项
• 新的事件处理程序：onPaneMouseEnter、onPaneMouseMove 和 onPaneMouseLeave
• 边 pathOptions 用于 smoothstep 和 default 边
• 更佳的默认光标：拖动节点或平移时，光标为抓取光标
• 面板可移动，使用鼠标中键
• 在节点上平移，当节点不可拖动时（draggable=false 或 nodesDraggable 为 false）
  • 您可以通过向自定义节点的包装器添加类名 nopan 来禁用此行为
• <BaseEdge /> 组件，使构建自定义边变得更容易
• 可单独安装的包
  • @reactflow/core
  • @reactflow/background
  • @reactflow/controls
  • @reactflow/minimap

重大变更

1. 新的 npm 包名称

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

旧 API

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

新 API

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

2. 导入 CSS 是强制性的

我们不再注入 CSS。如果您没有加载样式，React Flow 将无法正常工作！

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

2.1. 删除 nocss 入口点

此变更还意味着不再存在 react-flow-renderer/nocss 入口点。如果您使用了该入口点，则需要根据上面提到的内容调整 CSS 入口点。

3. defaultPosition 和 defaultZoom 已合并到 defaultViewport

旧 API

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

新 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

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

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

旧 API

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

新 API

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

我们不再使用 centerX 和 centerY，因为它实际上是标签位置，并不总是每种边缘类型的中心。

5. 删除 onClickConnectStop 和 onConnectStop

旧 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

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. 在节点上平移

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