HTMLAttributes -> SVGAttributes, add edge example

examples/react/src/examples/Edges/CustomEdge3.css

@@ -0,0 +1,14 @@
+@keyframes react-flow-edge-dash {
+  from {
+    stroke-dashoffset: 100;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.react-flow__edge-custom3 {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: react-flow-edge-dash 1s linear forwards;
+}

examples/react/src/examples/Edges/CustomEdge3.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { BaseEdge, EdgeProps, EdgeText, getSmoothStepPath } from '@xyflow/react';
+import './CustomEdge3.css';
+
+const CustomEdge: FC<EdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}) => {
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} pathLength={100} />
+      <EdgeText
+        x={labelX}
+        y={labelY - 5}
+        label={data.text}
+        labelBgStyle={{ fill: 'transparent' }}
+        onClick={() => console.log(data)}
+      />
+    </>
+  );
+};
+
+export default CustomEdge;

examples/react/src/examples/Edges/index.tsx

@@ -16,6 +16,7 @@ import {
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
+import CustomEdge3 from './CustomEdge3';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -63,6 +64,12 @@ const initialNodes: Node[] = [
     data: { label: 'Output 9' },
     position: { x: 675, y: 500 },
   },
+  {
+    id: '10',
+    type: 'output',
+    data: { label: 'Output 10' },
+    position: { x: 50, y: 400 },
+  },
 ];
 
 const initialEdges: Edge[] = [
@@ -137,6 +144,13 @@ const initialEdges: Edge[] = [
     type: 'custom2',
     data: { text: 'custom edge 2' },
   },
+  {
+    id: 'e3a-10',
+    source: '3a',
+    target: '10',
+    type: 'custom3',
+    data: { text: 'custom edge 3' },
+  },
   {
     id: 'e5-6',
     source: '5',
@@ -173,6 +187,7 @@ const initialEdges: Edge[] = [
 const edgeTypes: EdgeTypes = {
   custom: CustomEdge,
   custom2: CustomEdge2,
+  custom3: CustomEdge3,
 };
 
 const defaultEdgeOptions = {

packages/react/src/types/edges.ts

@@ -1,6 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { CSSProperties, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  SVGAttributes,
+  ReactNode,
+  MouseEvent as ReactMouseEvent,
+  ComponentType,
+} from 'react';
 import type {
   EdgeBase,
   BezierPathOptions,
@@ -93,7 +100,7 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
 
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
 
-export type EdgeTextProps = HTMLAttributes<SVGElement> &
+export type EdgeTextProps = SVGAttributes<SVGElement> &
   EdgeLabelOptions & {
     x: number;
     y: number;
@@ -118,7 +125,7 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
     interactionWidth?: number;
   };
 
-type BasePathAttributes = Omit<HTMLAttributes<SVGPathElement>, 'd'>;
+type BasePathAttributes = Omit<SVGAttributes<SVGPathElement>, 'd'>;
 
 /**
  * BaseEdge component props
@@ -186,7 +193,7 @@ export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
  * StraightEdge component props
  * @public
  */
-export type StraightEdgeProps = HTMLAttributes<SVGPathElement> &
+export type StraightEdgeProps = SVGAttributes<SVGPathElement> &
   Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
 
 /**