NodeProps

カスタムノードを実装する際には、ドラッグ、選択、削除などの基本機能を有効にするコンポーネントでラップされます。カスタムノードには、次のプロパティが渡されます。

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

備考

• カスタムノード内に**(ノードをドラッグすべきではない)**スライダーや入力などのコントロールまたはその他の要素がある場合、これらの要素にnodragクラスを追加できます。これにより、このクラスを持つ要素をクリックしたときのデフォルトのドラッグ動作とノード選択動作が抑制されます。

  CustomNode.svelte

  <div>
    <input className="nodrag" type="range" min={0} max={100} />
  </div>

• カスタムノード内にスクロールコンテナがある場合、nowheelクラスを追加して、**カスタムノード内でのスクロール時のデフォルトのキャンバスパン動作を無効に**することができます。

  CustomNode.svelte

  <div className="nowheel" style={{ overflow: 'auto' }}>
    <p>Scrollable content...</p>
  </div>

• 独自のカスタムノードを作成する際には、スタイル設定も忘れずに行う必要があります！カスタムノードには、組み込みノードとは異なり、デフォルトのスタイルはありません。そのため、任意のスタイル設定方法を使用できます。