Node

parentNodeプロパティの非推奨化！ バージョン11.11.0で、parentNodeオプションの名前をparentIdに変更しました。古いプロパティもまだサポートされていますが、バージョン12で削除されます。

Node型は、特定のノードについてReact Flowが知っておく必要のあるすべてを表します。これらのプロパティの多くはReact Flowまたはユーザーによって操作できますが、widthやheightなどの一部は読み取り専用とみなす必要があります。

export type Node<
  NodeData extends Record<string, unknown> = Record<string, unknown>,
  NodeType extends string = string,
> = {
  id: string;
  position: XYPosition;
  data: NodeData;
  type?: NodeType;
  sourcePosition?: Position;
  targetPosition?: Position;
  hidden?: boolean;
  selected?: boolean;
  dragging?: boolean;
  draggable?: boolean;
  selectable?: boolean;
  connectable?: boolean;
  resizing?: boolean;
  deletable?: boolean;
  dragHandle?: string;
  width?: number | null;
  height?: number | null;
  parentId?: string;
  zIndex?: number;
  extent?: 'parent' | CoordinateExtent;
  expandParent?: boolean;
  ariaLabel?: string;
  focusable?: boolean;
  style?: React.CSSProperties;
  className?: string;
  origin?: NodeOrigin;
  handles?: NodeHandle[];
  measured?: {
    width?: number;
    height?: number;
  };
};

フィールド

名前	型
#`id`	`string`
#`position`	`XYPosition`
#`data`	`T`
#`type?`	`U`
#`sourcePosition?`	`Position`
#`targetPosition?`	`Position`
#`hidden?`	`boolean` ノードをキャンバスに表示するかどうか。
#`selected?`	`boolean`
#`dragging?`	`boolean` ノードが現在ドラッグされているかどうか。
#`draggable?`	`boolean` ノードをドラッグ可能にするかどうか。
#`selectable?`	`boolean`
#`connectable?`	`boolean`
#`resizing?`	`boolean`
#`deletable?`	`boolean`
#`dragHandle?`	`string`
#`width?`	`number \| null`
#`height?`	`number \| null`
#`parentNode?`	`string`
#`parentId?`	`string`
#`zIndex?`	`number`
#`extent?`	`"親" \| CoordinateExtent`
#`expandParent?`	`boolean` trueの場合、このノードが親ノードの境界線の端にドラッグされると、親ノードが自動的に展開されます。
#`ariaLabel?`	`string`
#`focusable?`	`boolean`
#`style?`	`React.CSSProperties`
#`className?`	`string`
#`handles?`	`NodeHandle[]`
#`origin?`	`NodeOrigin`
#`measured?`	`{ 幅?: number, 高さ?: number }`

デフォルトのノードタイプ

typeプロパティを次のいずれかの値に設定することで、React Flowのデフォルトノードを作成できます。

"default"
"input"
"output"
"group"

typeプロパティをまったく設定しない場合、React Flowは入出力ポートの両方を持つ"default"ノードにフォールバックします。

nodeTypesプロパティに別のものを設定した場合でも、これらのデフォルトノードは使用できます。ただし、これらのキーのいずれかを直接オーバーライドしない限りです。

注釈

ノードのwidthまたはheightを直接設定しようとしないでください。これはReact Flowによって内部的に計算され、ビューポートでノードをレンダリングする際に使用されます。ノードのサイズを制御するには、代わりにstyleまたはclassNameプロパティを使用してCSSスタイルを適用する必要があります。

型 getTransformForBounds()