feat(markers): implement more generic api for markerEnd and markerStart handling

src/components/Edges/StraightEdge.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
-import { getMarkerEnd } from './utils';
 import { EdgeProps } from '../../types';
 
 export default memo(
@@ -17,15 +16,14 @@ export default memo(
     labelBgPadding,
     labelBgBorderRadius,
     style,
-    arrowHeadType,
-    markerEndId,
+    markerEnd,
+    markerStart,
   }: 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
@@ -47,6 +45,7 @@ export default memo(
           className="react-flow__edge-path"
           d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
           markerEnd={markerEnd}
+          markerStart={markerStart}
         />
         {text}
       </>