Devtoolsとデバッグ

React Flowは魔法のブラックボックスのように見えることが多いですが、実際には、どこを見ればいいかを知っていれば、内部状態についてかなりのことを明らかにすることができます。このガイドでは、フローの内部状態を明らかにする3つの異なる方法を紹介します。

• ビューポートの現在の位置とズームレベルを表示する<ViewportLogger />コンポーネント。
• 各ノードの状態を明らかにする<NodeInspector />コンポーネント。
• フローのonNodesChangeハンドラーをラップし、ディスパッチされるたびに各変更をログに記録する<ChangeLogger />。

これらのツールは、React Flowが適切に動作していることを確認するのに役立つと考えていますが、フローとそれらのインタラクションが複雑になるにつれて、アプリケーションのデバッグにも役立つ可能性があります。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

この例のコンポーネントのいずれかまたはすべてを独自のプロジェクトにコピーして、ニーズに合わせて変更することをお勧めします。各コンポーネントは独立して動作します！

ノードインスペクター

<NodeInspector />コンポーネントは、フロー内のすべてのノードにアクセスするために、useNodesフックを使用します。通常、ノードの変更時にすべてが再レンダリングされるため、このフックの使用は推奨しませんが、それがデバッグに非常に役立つ理由です！

widthおよびheightプロパティは、ノードの寸法を測定した後、React Flowによって各ノードに追加されます。これらの寸法と、ノードのIDやタイプなどの他の情報をカスタムの<NodeInfo />コンポーネントに渡します。

<EdgeLabelRenderer />コンポーネントを使用して、インスペクターをReact Flowのビューポートにレンダリングできるようにします。つまり、ユーザーがパンとズームを行うと、そのコンテンツはフローの残りの部分とともに配置および変換されます。

変更ロガー

React Flow自体に起因するノードとエッジへの変更は、onNodesChangeおよびonEdgesChangeコールバックを介して通知されます。制御されたフロー（つまり、ノードとエッジを自分で管理している）で作業している場合は、すべてを同期させるために、これらの変更を状態に適用する必要があります。

<ChangeLogger />コンポーネントは、ユーザーが提供したonNodesChangeハンドラーを、ディスパッチされるたびに各変更をインターセプトしてログに記録するカスタム関数でラップします。useStoreとuseStoreApiフックを使用してストアにアクセスし、それに応じてReact Flowの内部状態を更新することで、これを行うことができます。これら2つのフックを使用すると、React Flowの内部状態とメソッドに強力にアクセスできます。

デバッグだけでなく、<ChangeLogger />を使用すると、React Flowの動作についてさらに詳しく学び、各変更の上に構築できるさまざまな機能について考えることができる優れた方法になります。

APIリファレンスのNodeChangeおよびEdgeChangeタイプのドキュメントを参照できます。

ビューポートロガー

<ViewportLogger /> は、React Flowのストアから、何を探すべきかを知っていれば、どのような状態を取り出せるかを示す最もシンプルな例です。ビューポートの状態は、内部的に transform キー（d3-zoom から継承した名前）の下に保存されています。このコンポーネントは、transform の x、y、および zoom の各コンポーネントを抽出し、<Panel /> コンポーネントにレンダリングします。

ご意見をお聞かせください

上記のように、開発者ツールを改善するためのフィードバックやアイデアがあれば、Discord またはメール info@xyflow.com までお知らせください。これらのアイデアを使って独自の開発者ツールを構築された場合は、ぜひお聞かせください！