v11への移行

v11では多くの変更がありましたが、今回は破壊的変更を小さく抑えるように努めました。最大の変更点は、新しいパッケージ名`reactflow`と新しいリポジトリ構造です。React Flowはモノレポとして管理され、個別にインストールできる複数のパッケージに分割されました。それに加えて、v11ではいくつかのAPIの変更と新しいAPIが導入されました。このガイドでは、変更点について詳しく説明し、v10からv11への移行を支援します。

新機能

• アクセシビリティの向上
  • ノードとエッジは、キーボードでフォーカス、選択、移動、削除できます。
  • すべての要素に`aria-`のデフォルト属性が設定され、`ariaLabel`オプションで制御できます
  • 新しい`disableKeyboardA11y`プロップでキーボードコントロールを無効にできます
• **選択可能なエッジの改善**：新しいエッジオプション`interactionWidth` - インタラクションを容易にする不可視エッジをレンダリングします
• **smoothstepエッジとstepエッジのルーティングの改善**： リンク
• **エッジ更新動作の改善**： リンク
• **ノードオリジン**：新しい`nodeOrigin`プロップを使用すると、ノードの原点を制御できます。レイアウトに役立ちます。
• **新しい背景パターン**：`BackgroundVariant.Cross`バリアント
• **`useOnViewportChange`フック** - コンポーネント内でビューポートの変更を処理します
• **`use-on-selection-change`フック** - コンポーネント内で選択変更を処理します
• **`useNodesInitialized`フック** - すべてのノードが初期化され、複数のノードがある場合にtrueを返します
• ノードとエッジの**削除可能オプション**
• **新しいイベントハンドラ**：`onPaneMouseEnter`、`onPaneMouseMove`、`onPaneMouseLeave`
• `smoothstep`エッジと`default`エッジの**エッジ`pathOptions`**
• **より良いカーソルのデフォルト**：ノードのドラッグまたはパン中は、カーソルがつかむ形になります
• **ペインの移動**：マウスの中ボタンで可能です
• ドラッグできないノード（`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` を追加してください。