@vue-flow/monorepo • Docs

---

Interface: GraphNode<Data, CustomEvents, Type>

Extends

• Node<Data, CustomEvents, Type>

Type Parameters

• Data = ElementData

• CustomEvents extends Record<string, CustomEvent> = any

• Type extends string = string

Properties

ariaLabel?

optional ariaLabel: string

Inherited from

Node.ariaLabel

---

class?

optional class: string | string[] | Record<string, any> | ClassFunc<GraphNode<Data, CustomEvents, string>>

Additional class names, can be a string or a callback returning a string (receives current flow element)

Inherited from

Node.class

---

computedPosition

computedPosition: XYZPosition

absolute position in relation to parent elements + z-index

---

connectable?

optional connectable: HandleConnectable

Disable/enable connecting node

Inherited from

Node.connectable

---

data

data: Data

Additional data that is passed to your custom components

Overrides

Node.data

---

deletable?

optional deletable: boolean

Disable/enable deleting node

Inherited from

Node.deletable

---

dimensions

dimensions: Dimensions

node width, height

---

domAttributes?

optional domAttributes: Omit<HTMLAttributes, "id" | "style" | "draggable" | "className" | "aria-label" | "onClick" | "onMouseenter" | "onMousemove" | "onMouseleave" | "onContextmenu" | "onDblclick" | "onKeydown">

General escape hatch for adding custom attributes to the node's DOM element.

Inherited from

Node.domAttributes

---

draggable?

optional draggable: boolean

Disable/enable dragging node

Inherited from

Node.draggable

---

dragging

dragging: boolean

---

dragHandle?

optional dragHandle: string

element selector as drag handle for node (can only be dragged from the dragHandle el)

Inherited from

Node.dragHandle

---

events

events: Partial<NodeEventsHandler<CustomEvents>>

Deprecated

will be removed in the next major version

Overrides

Node.events

---

expandParent?

optional expandParent: boolean

expands parent area to fit child node

Inherited from

Node.expandParent

---

extent?

optional extent: CoordinateExtent | CoordinateExtentRange | "parent"

define node extent, i.e. area in which node can be moved

Inherited from

Node.extent

---

focusable?

optional focusable: boolean

Disable/enable focusing node (a11y)

Inherited from

Node.focusable

---

handleBounds

handleBounds: NodeHandleBounds

---

height?

optional height: string | number | HeightFunc

Fixed height of node, applied as style You can pass a number which will be used in pixel values (height: 300 -> height: 300px) or pass a string with units (height: 10rem -> height: 10rem)

Inherited from

Node.height

---

hidden?

optional hidden: boolean

Is node hidden

Inherited from

Node.hidden

---

id

id: string

Unique node id

Inherited from

Node.id

---

isParent

isParent: boolean

---

isValidSourcePos?

optional isValidSourcePos: ValidConnectionFunc

Deprecated

will be removed in next major release called when used as source for new connection

Inherited from

Node.isValidSourcePos

---

isValidTargetPos?

optional isValidTargetPos: ValidConnectionFunc

Deprecated

will be removed in next major release called when used as target for new connection

Inherited from

Node.isValidTargetPos

---

label?

optional label: string | VNode<RendererNode, RendererElement, object> | Component

Deprecated

• will be removed in next major release and replaced with { data: { label: string | VNode | Component } } A node label

Inherited from

Node.label

---

parentNode?

optional parentNode: string

todo: rename to parentId in next major release define node as a child node by setting a parent node id

Inherited from

Node.parentNode

---

position

position: XYPosition

initial node position x, y

Inherited from

Node.position

---

resizing

resizing: boolean

---

selectable?

optional selectable: boolean

Disable/enable selecting node

Inherited from

Node.selectable

---

selected

selected: boolean

---

sourcePosition?

optional sourcePosition: Position

handle position

Inherited from

Node.sourcePosition

---

style?

optional style: Styles | StyleFunc<GraphNode<Data, CustomEvents, string>>

Additional styles, can be an object or a callback returning an object (receives current flow element)

Inherited from

Node.style

---

targetPosition?

optional targetPosition: Position

handle position

Inherited from

Node.targetPosition

---

template?

optional template: NodeComponent

Deprecated

• will be removed in the next major release overwrites current node type

Inherited from

Node.template

---

type

type: Type

node type, can be a default type or a custom type

Overrides

Node.type

---

width?

optional width: string | number | WidthFunc

Fixed width of node, applied as style You can pass a number which will be used in pixel values (width: 300 -> width: 300px) or pass a string with units (width: 10rem -> width: 10rem)

Inherited from

Node.width

---

zIndex?

optional zIndex: number

Inherited from

Node.zIndex