diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index 654ba955..daef1096 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/packages/core/src/components/Nodes/NodeWrapper.ts @@ -61,6 +61,7 @@ const NodeWrapper = defineComponent({ elementsSelectable, nodesConnectable, nodesFocusable, + nodesAttrs, hooks, } = useVueFlow() @@ -286,6 +287,8 @@ const NodeWrapper = defineComponent({ 'role': isFocusable.value ? 'button' : undefined, 'aria-describedby': disableKeyboardA11y.value ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`, 'aria-label': node.ariaLabel, + ...nodesAttrs?.value, + ...node.attrs, 'onMouseenter': onMouseEnter, 'onMousemove': onMouseMove, 'onMouseleave': onMouseLeave, diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts index 2198b946..410ab25a 100644 --- a/packages/core/src/store/state.ts +++ b/packages/core/src/store/state.ts @@ -114,6 +114,8 @@ export function useState(): State { disableKeyboardA11y: false, ariaLiveMessage: '', + + nodesAttrs: {}, } } diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts index 4ea8134a..5c6a0661 100644 --- a/packages/core/src/types/flow.ts +++ b/packages/core/src/types/flow.ts @@ -229,6 +229,8 @@ export interface FlowProps { autoPanOnConnect?: boolean autoPanOnNodeDrag?: boolean autoPanSpeed?: number + + nodesAttrs?: Record } /** diff --git a/packages/core/src/types/node.ts b/packages/core/src/types/node.ts index 130a19ca..56ee9d66 100644 --- a/packages/core/src/types/node.ts +++ b/packages/core/src/types/node.ts @@ -109,6 +109,7 @@ export interface Node> zIndex?: number ariaLabel?: string + attrs?: Record } export interface GraphNode<