NodeProps

When you implement a custom node it is wrapped in a component that enables basic functionality like drag, select and remove. A custom node gets the following props:

Name	Type	Default
`id`	`NodeType["id"]` Unique id of a node.
`data`	`NodeType["data"]` Arbitrary data passed to a node.
`width`	`NodeType["width"]`
`height`	`NodeType["height"]`
`sourcePosition`	`NodeType["sourcePosition"]` Only relevant for default, source, target nodeType. Controls source position.
`targetPosition`	`NodeType["targetPosition"]` Only relevant for default, source, target nodeType. Controls target position.
`dragHandle`	`NodeType["dragHandle"]` A class name that can be applied to elements inside the node that allows those elements to act as drag handles, letting the user drag the node by clicking and dragging on those elements.
`parentId`	`NodeType["parentId"]` Parent node id, used for creating sub-flows.
`type`	`any` Type of node defined in `nodeTypes`.
`dragging`	`NodeType["dragging"]` Whether or not the node is currently being dragged.
`zIndex`	`NodeType["zIndex"]`
`selectable`	`NodeType["selectable"]`
`deletable`	`NodeType["deletable"]`
`selected`	`NodeType["selected"]`
`draggable`	`NodeType["draggable"]` Whether or not the node is able to be dragged.
`isConnectable`	`boolean` Whether a node is connectable or not.
`positionAbsoluteX`	`number` Position absolute x value.
`positionAbsoluteY`	`number` Position absolute y value.

Notes

If you have controls (like a slider or an input) or other elements inside your custom node that should not drag the node you can add the class nodrag to those elements. This prevents the default drag behavior as well as the default node selection behavior when elements with this class are clicked.
CustomNode.svelte
```
<div>
  <input className="nodrag" type="range" min={0} max={100} />
</div>
```
If you have scroll containers inside your custom node you can add the class nowheel to disable the default canvas pan behavior when scrolling inside your custom nodes.
CustomNode.svelte
```
<div className="nowheel" style={{ overflow: 'auto' }}>
  <p>Scrollable content...</p>
</div>
```
When creating your own custom nodes, you will also need to remember to style them! Custom nodes have no default styles unlike the built-in nodes so you can use any styling method you like.