NodeProps<T>

カスタムノード(カスタムノード)を実装する場合、選択やドラッグなどの基本的な機能を有効にするコンポーネントでラップされます。カスタムノードは、次のpropsを受け取ります。

export type NodeProps<NodeType extends Node = Node> = {
  id: string;
  data: Node['data'];
  dragHandle?: boolean;
  type?: string;
  selected?: boolean;
  isConnectable?: boolean;
  zIndex?: number;
  positionAbsoluteX: number;
  positionAbsoluteY: number;
  dragging: boolean;
  targetPosition?: Position;
  sourcePosition?: Position;
};

使用方法

import { useState } from 'react';
import { NodeProps, Node } from '@xyflow/react';
 
export type CounterNode = Node<
  {
    initialCount?: number;
  },
  'counter'
>;
 
export default function CounterNode(props: NodeProps<CounterNode>) {
  const [count, setCount] = useState(props.data?.initialCount ?? 0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button className="nodrag" onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

nodeTypesプロップを<ReactFlow />コンポーネントに追加することで、カスタムノードを登録することを忘れないでください。

import { ReactFlow } from '@xyflow/react';
import CounterNode from './CounterNode';
 
const nodeTypes = {
  counterNode: CounterNode,
};
 
export default function App() {
  return <ReactFlow nodeTypes={nodeTypes} ... />
}

詳細は、カスタムノードガイドをご覧ください。

フィールド

名前	型
#`id`	`文字列;`
#`data`	`T;`
#`dragHandle?`	`文字列;` ノード内の要素に適用できるクラス名で、これらの要素をドラッグハンドルとして機能させ、ユーザーがこれらの要素をクリックしてドラッグすることでノードをドラッグできるようにします。
#`type`	`文字列;`
#`selected`	`ブール値;`
#`isConnectable`	`ブール値;`
#`zIndex`	`数値;`
#`positionAbsoluteX`	`数値;`
#`positionAbsoluteY`	`数値;`
#`dragging`	`ブール値;`
#`targetPosition`	`Position;`
#`sourcePosition`	`Position;`

備考

カスタムノード内にスライダーなどのコントロールやその他の要素があり、**ノードをドラッグすべきでない**場合は、これらの要素にクラスnodragを追加できます。これにより、このクラスを持つ要素がクリックされた場合のデフォルトのドラッグ動作とデフォルトのノード選択動作の両方が防止されます。
```
export default function CustomNode(props: NodeProps) {
  return (
    <div>
      <input className="nodrag" type="range" min={0} max={100} />
    </div>
  );
}
```
カスタムノード内にスクロールコンテナがある場合は、クラスnowheelを追加して、**カスタムノード内でのスクロール時のデフォルトのキャンバスパン動作を無効化**できます。
```
export default function CustomNode(props: NodeProps) {
  return (
    <div className="nowheel" style={{ overflow: 'auto' }}>
      <p>Scrollable content...</p>
    </div>
  );
}
```
独自のカスタムノードを作成する際には、スタイリングも忘れずに行う必要があります！組み込みノードとは異なり、カスタムノードにはデフォルトのスタイルがないため、styled componentsやtailwindなど、好きなスタイリング方法を使用できます。

型 getTransformForBounds()