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>

• 当创建你自己的自定义节点时，你还需要记住要为它们设置样式！自定义节点没有默认样式，不像内置节点那样，所以你可以使用任何你喜欢的样式方法。