React Flowのノードをスタイリングする方法

外観を整える

エッジのハンドラ

ノードの上下左右に描画されるコネクタ部分はハンドラと呼ぶらしい。

• Handles - ReactFlow

通常は上下にハンドラが存在する。左右に変更する場合は sourcePosition と targetPosition を設定する。

const node: Node = {
  id: "node1",
  position: { x: 0, y: 100 },
  data: { label: "Node 1" },
  sourcePosition: Position.Right,
  targetPosition: Position.Left,
}

このとき、source とは ノードからの出力 となる側で、target は ノードへの入力 を意味する。また、source または target の片方しか必要ないのなら type でハンドラの有無を設定できる。

const node: Node = {
  id: "node1",
  type: "input",
  position: { x: 0, y: 100 },
  data: { label: "Node 1" },
  sourcePosition: Position.Left,
}

type の値が input なら source 側のコネクタだけ描画する。

ノードとエッジの操作

以下のパラメータを設定できる。

• draggable … ドラッグが可能かどうか
• selectable … 選択可能かどうか
• deletable … 削除可能かどうか

実際に動かしたり消したりすることはコールバック関数がなければ行われないのだが、上記パラメータが true に設定されているとUI的に操作できそうな見た目になってしまうので、必要がなければ無効化しておくといい。