feat(edges): add arrow head options

src/components/Edges/BezierEdge.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
+import { getMarkerEnd } from './utils';
 import { EdgeBezierProps, Position } from '../../types';
 
 interface GetBezierPathParams {
@@ -52,6 +53,8 @@ export default memo(
     labelShowBg,
     labelBgStyle,
     style,
+    arrowHeadType,
+    markerEndId,
   }: EdgeBezierProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
@@ -81,9 +84,11 @@ export default memo(
       />
     ) : null;
 
+    const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+
     return (
       <>
-        <path style={style} d={path} className="react-flow__edge-path" />
+        <path style={style} d={path} className="react-flow__edge-path" markerEnd={markerEnd} />
         {text}
       </>
     );

src/components/Edges/SmoothStepEdge.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
+import { getMarkerEnd } from './utils';
 import { EdgeBezierProps, Position } from '../../types';
 
 // These are some helper methods for drawing the round corners
@@ -138,6 +139,8 @@ export default memo(
     style,
     sourcePosition = Position.Bottom,
     targetPosition = Position.Top,
+    arrowHeadType,
+    markerEndId,
   }: EdgeBezierProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
@@ -158,6 +161,8 @@ export default memo(
       targetPosition,
     });
 
+    const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+
     const text = label ? (
       <EdgeText
         x={centerX}
@@ -171,7 +176,7 @@ export default memo(
 
     return (
       <>
-        <path style={style} className="react-flow__edge-path" d={path} />
+        <path style={style} className="react-flow__edge-path" d={path} markerEnd={markerEnd} />
         {text}
       </>
     );

src/components/Edges/StepEdge.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
+import { getMarkerEnd } from './utils';
 import { EdgeProps } from '../../types';
 
 interface GetStepPathParams {
@@ -16,7 +17,19 @@ export function getStepPath({ centerY, sourceX, sourceY, targetX, targetY }: Get
 }
 
 export default memo(
-  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    style,
+    arrowHeadType,
+    markerEndId,
+  }: EdgeProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 
@@ -25,6 +38,8 @@ export default memo(
 
     const path = getStepPath({ centerY, sourceX, sourceY, targetX, targetY });
 
+    const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+
     const text = label ? (
       <EdgeText
         x={centerX}
@@ -38,7 +53,7 @@ export default memo(
 
     return (
       <>
-        <path style={style} className="react-flow__edge-path" d={path} />
+        <path style={style} className="react-flow__edge-path" d={path} markerEnd={markerEnd} />
         {text}
       </>
     );

src/components/Edges/StraightEdge.tsx

@@ -1,15 +1,29 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
+import { getMarkerEnd } from './utils';
 import { EdgeProps } from '../../types';
 
 export default memo(
-  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    style,
+    arrowHeadType,
+    markerEndId,
+  }: EdgeProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 
     const xOffset = Math.abs(targetX - sourceX) / 2;
     const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+    const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
 
     const text = label ? (
       <EdgeText
@@ -24,7 +38,12 @@ export default memo(
 
     return (
       <>
-        <path style={style} className="react-flow__edge-path" d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`} />
+        <path
+          style={style}
+          className="react-flow__edge-path"
+          d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
+          markerEnd={markerEnd}
+        />
         {text}
       </>
     );

src/components/Edges/utils.ts

@@ -0,0 +1,9 @@
+import { ArrowHeadType } from '../../types';
+
+export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
+  if (typeof markerEndId !== 'undefined' && markerEndId) {
+    return `url(#${markerEndId})`;
+  }
+
+  return typeof arrowHeadType !== 'undefined' ? `url(#react-flow__${arrowHeadType})` : 'none';
+};