Node<NodeData, NodeType>
The Node
type represents everything Svelte Flow needs to know about a given node.
Many of these properties can be manipulated both by Svelte Flow or by you, but
some such as width
and height
should be considered read-only.
Fields
Name | Type | Default |
---|---|---|
id | string Unique id of a node. | |
position | XYPosition Position of a node on the pane. | |
data | NodeData Arbitrary data passed to a node. | |
type | NodeType Type of node defined in | |
sourcePosition | Position Only relevant for default, source, target nodeType. Controls source position. | |
targetPosition | Position Only relevant for default, source, target nodeType. Controls target position. | |
selected | boolean | |
dragging | boolean Whether or not the node is currently being dragged. | |
draggable | boolean Whether or not the node is able to be dragged. | |
selectable | boolean | |
connectable | boolean | |
deletable | boolean | |
dragHandle | string 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. | |
width | number | |
height | number | |
initialWidth | number | |
initialHeight | number | |
parentId | string Parent node id, used for creating sub-flows. | |
zIndex | number | |
extent | "parent" | CoordinateExtent Boundary a node can be moved in. | |
expandParent | boolean When | |
ariaLabel | string | |
origin | NodeOrigin Origin of the node relative to its position. | |
handles | NodeHandle[] | |
measured | { width?: number; height?: number; } | |
class | ClassValue | |
style | string | |
focusable | boolean |
Notes
- You shouldn’t try to set the
measured.width
ormeasured.height
of a node directly. It is measured internally by Svelte Flow and used when rendering the node in the viewport. To control a node’s size you should use thewidth
andheight
attributes.