diff --git a/.changeset/forty-peas-talk.md b/.changeset/forty-peas-talk.md new file mode 100644 index 00000000..ffeccbdf --- /dev/null +++ b/.changeset/forty-peas-talk.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +refactor(base-edge): pass id to base edge path diff --git a/examples/vite-app/src/examples/Edges/CustomEdge.tsx b/examples/vite-app/src/examples/Edges/CustomEdge.tsx index ec7dfb74..ff700413 100644 --- a/examples/vite-app/src/examples/Edges/CustomEdge.tsx +++ b/examples/vite-app/src/examples/Edges/CustomEdge.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EdgeProps, getBezierPath } from 'reactflow'; +import { BaseEdge, EdgeProps, getBezierPath } from 'reactflow'; const CustomEdge: FC = ({ id, @@ -22,7 +22,7 @@ const CustomEdge: FC = ({ return ( <> - + {data.text} diff --git a/examples/vite-app/src/examples/Edges/CustomEdge2.tsx b/examples/vite-app/src/examples/Edges/CustomEdge2.tsx index 0ad41920..b40f12cb 100644 --- a/examples/vite-app/src/examples/Edges/CustomEdge2.tsx +++ b/examples/vite-app/src/examples/Edges/CustomEdge2.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EdgeProps, getBezierPath, EdgeText } from 'reactflow'; +import { EdgeProps, getBezierPath, EdgeText, BaseEdge } from 'reactflow'; const CustomEdge: FC = ({ id, @@ -22,7 +22,7 @@ const CustomEdge: FC = ({ return ( <> - + = ({ labelBgBorderRadius={2} onClick={() => console.log(data)} /> - ; ); }; diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/core/src/components/Edges/BaseEdge.tsx index dc60493c..a9202820 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/packages/core/src/components/Edges/BaseEdge.tsx @@ -3,6 +3,7 @@ import { isNumeric } from '../../utils'; import type { BaseEdgeProps } from '../../types'; const BaseEdge = ({ + id, path, labelX, labelY, @@ -20,6 +21,7 @@ const BaseEdge = ({ return ( <> = Pick< export type BaseEdgeProps = Pick & EdgeLabelOptions & { + id?: string; labelX?: number; labelY?: number; path: string;