遷移至 v11

v11 中發生了很多變化，但這次我們盡量減少了重大變更。最大的變化是新的套件名稱 reactflow 和新的儲存庫結構。React Flow 現在作為一個 monorepo 管理，並分成多個可以單獨安裝的套件。除此之外，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 Hook - 處理元件內的視窗變更
• use-on-selection-change Hook - 處理元件內的選取變更
• useNodesInitialized Hook - 如果所有節點都已初始化，且有多個節點時，則傳回 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 新增至您自訂節點的包裝器。