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

example/src/Edges/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EdgeProps, getBezierPath, getMarkerEnd } from 'react-flow-renderer';
+import { EdgeProps, getBezierPath } from 'react-flow-renderer';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -10,15 +10,12 @@ const CustomEdge: FC<EdgeProps> = ({
   sourcePosition,
   targetPosition,
   data,
-  arrowHeadType,
-  markerEndId,
 }) => {
   const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
 
   return (
     <>
-      <path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
       <text>
         <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
           {data.text}

example/src/Edges/CustomEdge2.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EdgeProps, getBezierPath, getMarkerEnd, EdgeText, getEdgeCenter } from 'react-flow-renderer';
+import { EdgeProps, getBezierPath, EdgeText, getEdgeCenter } from 'react-flow-renderer';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -10,11 +10,8 @@ const CustomEdge: FC<EdgeProps> = ({
   sourcePosition,
   targetPosition,
   data,
-  arrowHeadType,
-  markerEndId,
 }) => {
   const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
   const [centerX, centerY] = getEdgeCenter({
     sourceX,
     sourceY,
@@ -24,7 +21,7 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
       <EdgeText
         x={centerX}
         y={centerY}

example/src/Edges/index.tsx

@@ -54,7 +54,14 @@ const initialElements: Elements = [
       </>
     ),
     labelStyle: { fill: 'red', fontWeight: 700 },
-    arrowHeadType: ArrowHeadType.Arrow,
+    style: { stroke: '#ffcc00' },
+    markerEnd: {
+      type: ArrowHeadType.ArrowClosed,
+    },
+    markerStart: {
+      type: ArrowHeadType.Arrow,
+      color: '#FFCC00',
+    },
   },
   {
     id: 'e5-7',
@@ -64,7 +71,10 @@ const initialElements: Elements = [
     labelBgPadding: [8, 4],
     labelBgBorderRadius: 4,
     labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
+    markerEnd: {
+      type: ArrowHeadType.ArrowClosed,
+      color: '#FFCC00',
+    },
   },
   {
     id: 'e5-8',
@@ -72,7 +82,6 @@ const initialElements: Elements = [
     target: '8',
     type: 'custom',
     data: { text: 'custom edge' },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
   },
   {
     id: 'e5-9',