{
- dispatchNodeEvent('nodedrag', { event, targetNode, nodes });
+ onnodedrag?.({ event, targetNode: targetNode as NodeType, nodes: nodes as NodeType[] });
},
onDragStart: (event, _, targetNode, nodes) => {
- dispatchNodeEvent('nodedragstart', { event, targetNode, nodes });
+ onnodedragstart?.({
+ event,
+ targetNode: targetNode as NodeType,
+ nodes: nodes as NodeType[]
+ });
},
onDragStop: (event, _, targetNode, nodes) => {
- dispatchNodeEvent('nodedragstop', { event, targetNode, nodes });
+ onnodedragstop?.({ event, targetNode: targetNode as NodeType, nodes: nodes as NodeType[] });
},
store
}}
bind:this={nodeRef}
data-id={id}
- class={cc(['svelte-flow__node', `svelte-flow__node-${nodeType}`, className])}
+ class={['svelte-flow__node', `svelte-flow__node-${type}`, className]}
class:dragging
class:selected
class:draggable
@@ -185,29 +236,42 @@
style:z-index={zIndex}
style:transform="translate({positionX}px, {positionY}px)"
style:visibility={initialized ? 'visible' : 'hidden'}
- style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
- on:click={onSelectNodeHandler}
- on:mouseenter={(event) => dispatchNodeEvent('nodemouseenter', { node, event })}
- on:mouseleave={(event) => dispatchNodeEvent('nodemouseleave', { node, event })}
- on:mousemove={(event) => dispatchNodeEvent('nodemousemove', { node, event })}
- on:contextmenu={(event) => dispatchNodeEvent('nodecontextmenu', { node, event })}
+ 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}
+ tabIndex={focusable ? 0 : undefined}
+ role={focusable ? 'button' : undefined}
+ aria-describedby={store.disableKeyboardA11y
+ ? undefined
+ : `${ARIA_NODE_DESC_KEY}-${store.flowId}`}
>
-
& {
- measuredWidth?: number;
- measuredHeight?: number;
- type: string;
- positionX: number;
- positionY: number;
- 'on:nodeclick'?: (event: MouseEvent) => void;
+export type ConnectableContext = {
+ value: boolean;
+};
+
+export type NodeWrapperProps = {
+ node: InternalNode;
+ store: SvelteFlowStore;
+ nodeClickDistance?: number;
resizeObserver?: ResizeObserver | null;
- isParent?: boolean;
- zIndex: number;
- node: InternalNode;
- initialized: boolean;
- nodeClickDistance?: number;
};
diff --git a/packages/svelte/src/lib/components/NodeWrapper/utils.ts b/packages/svelte/src/lib/components/NodeWrapper/utils.ts
deleted file mode 100644
index f795e31d..00000000
--- a/packages/svelte/src/lib/components/NodeWrapper/utils.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export function getNodeInlineStyleDimensions({
- width,
- height,
- initialWidth,
- initialHeight,
- measuredWidth,
- measuredHeight
-}: {
- width?: number;
- height?: number;
- initialWidth?: number;
- initialHeight?: number;
- measuredWidth?: number;
- measuredHeight?: number;
-}): {
- width: string | undefined;
- height: string | undefined;
-} {
- if (measuredWidth === undefined && measuredHeight === undefined) {
- const styleWidth = width ?? initialWidth;
- const styleHeight = height ?? initialHeight;
-
- return {
- width: styleWidth ? `width:${styleWidth}px;` : '',
- height: styleHeight ? `height:${styleHeight}px;` : ''
- };
- }
-
- return {
- width: width ? `width:${width}px;` : '',
- height: height ? `height:${height}px;` : ''
- };
-}
diff --git a/packages/svelte/src/lib/components/Selection/Selection.svelte b/packages/svelte/src/lib/components/Selection/Selection.svelte
index a9e0e7d6..25a7de2e 100644
--- a/packages/svelte/src/lib/components/Selection/Selection.svelte
+++ b/packages/svelte/src/lib/components/Selection/Selection.svelte
@@ -1,18 +1,28 @@
{#if isVisible}
+ >