Merge pull request #3046 from wbkd/refactor/baseedge

refactor(base-edge): pass id to base edge path

.changeset/forty-peas-talk.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+refactor(base-edge): pass id to base edge path

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<EdgeProps> = ({
   id,
@@ -22,7 +22,7 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className="react-flow__edge-path" d={edgePath} />
+      <BaseEdge path={edgePath} id={id} />
       <text>
         <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
           {data.text}

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<EdgeProps> = ({
   id,
@@ -22,7 +22,7 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className="react-flow__edge-path" d={edgePath} />
+      <BaseEdge id={id} path={edgePath} />
       <EdgeText
         x={labelX}
         y={labelY}
@@ -34,7 +34,6 @@ const CustomEdge: FC<EdgeProps> = ({
         labelBgBorderRadius={2}
         onClick={() => console.log(data)}
       />
-      ;
     </>
   );
 };

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 (
     <>
       <path
+        id={id}
         style={style}
         d={path}
         fill="none"

packages/core/src/types/edges.ts

@@ -121,6 +121,7 @@ export type EdgeProps<T = any> = Pick<
 
 export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> &
   EdgeLabelOptions & {
+    id?: string;
     labelX?: number;
     labelY?: number;
     path: string;