{#if !hidden}
{
onnodedrag?.({ event, targetNode: targetNode as NodeType, nodes: nodes as NodeType[] });
},
onDragStart: (event, _, targetNode, nodes) => {
onnodedragstart?.({
event,
targetNode: targetNode as NodeType,
nodes: nodes as NodeType[]
});
},
onDragStop: (event, _, targetNode, nodes) => {
onnodedragstop?.({ event, targetNode: targetNode as NodeType, nodes: nodes as NodeType[] });
},
store
}}
bind:this={nodeRef}
data-id={id}
class={['svelte-flow__node', `svelte-flow__node-${type}`, className]}
class:dragging
class:selected
class:draggable
class:connectable
class:selectable
class:nopan={draggable}
class:parent={isParent}
style:z-index={zIndex}
style:transform="translate({positionX}px, {positionY}px)"
style:visibility={hasDimensions ? 'visible' : 'hidden'}
style={nodeStyle}
onclick={onSelectNodeHandler}
onpointerenter={onnodepointerenter
? (event) => onnodepointerenter({ node: userNode, event })
: undefined}
onpointerleave={onnodepointerleave
? (event) => onnodepointerleave({ node: userNode, event })
: undefined}
onpointermove={onnodepointermove
? (event) => onnodepointermove({ node: userNode, event })
: undefined}
oncontextmenu={onnodecontextmenu
? (event) => onnodecontextmenu({ node: userNode, event })
: undefined}
onkeydown={focusable ? onKeyDown : undefined}
onfocus={focusable ? onFocus : undefined}
tabIndex={focusable ? 0 : undefined}
role={node.ariaRole ?? (focusable ? 'group' : undefined)}
aria-label={node.ariaLabel}
aria-roledescription="node"
aria-describedby={store.disableKeyboardA11y
? undefined
: `${ARIA_NODE_DESC_KEY}-${store.flowId}`}
{...node.domAttributes}
>
{/if}