diff --git a/.changeset/sharp-toys-cheer.md b/.changeset/sharp-toys-cheer.md new file mode 100644 index 00000000..885eebcc --- /dev/null +++ b/.changeset/sharp-toys-cheer.md @@ -0,0 +1,7 @@ +--- +'@xyflow/react': minor +'@xyflow/svelte': minor +'@xyflow/system': patch +--- + +Pass current pointer position to connection diff --git a/examples/react/src/examples/CustomConnectionLine/ConnectionLine.tsx b/examples/react/src/examples/CustomConnectionLine/ConnectionLine.tsx index ddba960b..bf6a82d7 100644 --- a/examples/react/src/examples/CustomConnectionLine/ConnectionLine.tsx +++ b/examples/react/src/examples/CustomConnectionLine/ConnectionLine.tsx @@ -1,6 +1,7 @@ import { ConnectionLineComponentProps } from '@xyflow/react'; -function ConnectionLine({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) { +function ConnectionLine({ fromX, fromY, toX, toY, pointer }: ConnectionLineComponentProps) { + console.log('pointer', pointer); return ( <> {#if connection.current.inProgress} diff --git a/packages/react/src/components/ConnectionLine/index.tsx b/packages/react/src/components/ConnectionLine/index.tsx index c179fae2..29463fa4 100644 --- a/packages/react/src/components/ConnectionLine/index.tsx +++ b/packages/react/src/components/ConnectionLine/index.tsx @@ -69,7 +69,7 @@ const ConnectionLine = ({ CustomComponent, isValid, }: ConnectionLineProps) => { - const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = + const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition, pointer } = useConnection(); if (!inProgress) { @@ -92,6 +92,7 @@ const ConnectionLine = ({ connectionStatus={getConnectionStatus(isValid)} toNode={toNode} toHandle={toHandle} + pointer={pointer} /> ); } diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index dee2650e..9e563b76 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -22,6 +22,7 @@ import type { OnError, OnReconnect, FinalConnectionState, + XYPosition, } from '@xyflow/system'; import { EdgeTypes, InternalNode, Node } from '.'; @@ -279,6 +280,7 @@ export type ConnectionLineComponentProps = { connectionStatus: 'valid' | 'invalid' | null; toNode: InternalNode | null; toHandle: Handle | null; + pointer: XYPosition; }; export type ConnectionLineComponent = ComponentType< diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts index 15f64262..d43c50ee 100644 --- a/packages/system/src/types/general.ts +++ b/packages/system/src/types/general.ts @@ -292,6 +292,7 @@ export const initialConnection: NoConnection = { toHandle: null, toPosition: null, toNode: null, + pointer: null, }; export type NoConnection = { @@ -305,6 +306,7 @@ export type NoConnection = { toHandle: null; toPosition: null; toNode: null; + pointer: null; }; export type ConnectionInProgress = { /** Indicates whether a connection is currently in progress. */ @@ -330,6 +332,8 @@ export type ConnectionInProgress