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',

example/src/FloatingEdges/FloatingEdge.tsx

@@ -1,11 +1,10 @@
 import { FC, useMemo, CSSProperties } from 'react';
-import { EdgeProps, getMarkerEnd, useStoreState, getBezierPath } from 'react-flow-renderer';
+import { EdgeProps, useStoreState, getBezierPath } from 'react-flow-renderer';
 
 import { getEdgeParams } from './utils';
 
-const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, markerEndId, style }) => {
+const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   const nodes = useStoreState((state) => state.nodes);
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
 
   const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]);
   const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]);
@@ -27,7 +26,7 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, marker
 
   return (
     <g className="react-flow__connection">
-      <path id={id} className="react-flow__edge-path" d={d} markerEnd={markerEnd} style={style as CSSProperties} />
+      <path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
     </g>
   );
 };

example/src/FloatingEdges/index.tsx

@@ -9,7 +9,6 @@ import ReactFlow, {
   Elements,
   Connection,
   Edge,
-  ArrowHeadType,
 } from 'react-flow-renderer';
 
 import './style.css';
@@ -31,8 +30,7 @@ const NodeAsHandleFlow = () => {
 
   const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
 
-  const onConnect = (params: Connection | Edge) =>
-    setElements((els) => addEdge({ ...params, type: 'floating', arrowHeadType: ArrowHeadType.Arrow }, els));
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'floating' }, els));
 
   return (
     <div className="floatingedges">

example/src/Overview/index.tsx

@@ -13,7 +13,6 @@ import ReactFlow, {
   OnLoadParams,
   FlowTransform,
   SnapGrid,
-  ArrowHeadType,
   Connection,
   Edge,
 } from 'react-flow-renderer';
@@ -125,7 +124,7 @@ const initialElements: Elements = [
   { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
   { id: 'e1-3', source: '1', target: '3' },
   { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
-  { id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
+  { id: 'e4-5', source: '4', target: '5', label: 'edge with arrow head' },
   { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
   {
     id: 'e5-7',

example/src/Undirectional/index.tsx

@@ -12,7 +12,6 @@ import ReactFlow, {
   ConnectionLineType,
   ConnectionMode,
   updateEdge,
-  ArrowHeadType,
 } from 'react-flow-renderer';
 import CustomNode from './CustomNode';
 
@@ -69,7 +68,6 @@ const initialElements: Elements = [
     sourceHandle: 'left',
     targetHandle: 'bottom',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-1b',
@@ -78,7 +76,6 @@ const initialElements: Elements = [
     sourceHandle: 'top',
     targetHandle: 'right',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-2a',
@@ -87,7 +84,6 @@ const initialElements: Elements = [
     sourceHandle: 'top',
     targetHandle: 'left',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-2b',
@@ -96,7 +92,6 @@ const initialElements: Elements = [
     sourceHandle: 'right',
     targetHandle: 'bottom',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-3a',
@@ -105,7 +100,6 @@ const initialElements: Elements = [
     sourceHandle: 'right',
     targetHandle: 'top',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-3b',
@@ -114,7 +108,6 @@ const initialElements: Elements = [
     sourceHandle: 'bottom',
     targetHandle: 'left',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-4a',
@@ -123,7 +116,6 @@ const initialElements: Elements = [
     sourceHandle: 'bottom',
     targetHandle: 'right',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-4b',
@@ -132,7 +124,6 @@ const initialElements: Elements = [
     sourceHandle: 'left',
     targetHandle: 'top',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-10',
@@ -141,7 +132,6 @@ const initialElements: Elements = [
     sourceHandle: 'top',
     targetHandle: 'bottom',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-20',
@@ -150,7 +140,6 @@ const initialElements: Elements = [
     sourceHandle: 'right',
     targetHandle: 'left',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-30',
@@ -159,7 +148,6 @@ const initialElements: Elements = [
     sourceHandle: 'bottom',
     targetHandle: 'top',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
   {
     id: 'e0-40',
@@ -168,7 +156,6 @@ const initialElements: Elements = [
     sourceHandle: 'left',
     targetHandle: 'right',
     type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
   },
 ];