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>

• 建立您自己的自訂節點時，您也需要記得設定樣式！自訂節點不像內建節點那樣具有預設樣式，因此您可以使用任何您喜歡的樣式設定方法。