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

src/components/Edges/wrapEdge.tsx

@@ -5,6 +5,7 @@ import { useStoreActions, useStoreState } from '../../store/hooks';
 import { Edge, EdgeProps, WrapEdgeProps } from '../../types';
 import { onMouseDown } from '../../components/Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';
+import { getMarkerId } from '../../utils/graph';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({
@@ -23,7 +24,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     labelBgPadding,
     labelBgBorderRadius,
     style,
-    arrowHeadType,
     source,
     target,
     sourceX,
@@ -33,7 +33,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     sourcePosition,
     targetPosition,
     elementsSelectable,
-    markerEndId,
     isHidden,
     sourceHandleId,
     targetHandleId,
@@ -46,6 +45,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     edgeUpdaterRadius,
     onEdgeUpdateStart,
     onEdgeUpdateEnd,
+    markerEnd,
+    markerStart,
   }: WrapEdgeProps): JSX.Element | null => {
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
@@ -160,7 +161,18 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           _onEdgeUpdate
         );
       },
-      [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement, onConnectEdge]
+      [
+        id,
+        source,
+        target,
+        type,
+        sourceHandleId,
+        targetHandleId,
+        setConnectionNodeId,
+        setPosition,
+        edgeElement,
+        onConnectEdge,
+      ]
     );
 
     const onEdgeUpdaterSourceMouseDown = useCallback(
@@ -179,6 +191,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
     const onEdgeUpdaterMouseEnter = useCallback(() => setUpdating(true), [setUpdating]);
     const onEdgeUpdaterMouseOut = useCallback(() => setUpdating(false), [setUpdating]);
+    const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart)})`, [markerStart]);
+    const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd)})`, [markerEnd]);
 
     if (isHidden) {
       return null;
@@ -208,16 +222,16 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           labelBgBorderRadius={labelBgBorderRadius}
           data={data}
           style={style}
-          arrowHeadType={arrowHeadType}
           sourceX={sourceX}
           sourceY={sourceY}
           targetX={targetX}
           targetY={targetY}
           sourcePosition={sourcePosition}
           targetPosition={targetPosition}
-          markerEndId={markerEndId}
           sourceHandleId={sourceHandleId}
           targetHandleId={targetHandleId}
+          markerStart={markerStartUrl}
+          markerEnd={markerEndUrl}
         />
         {handleEdgeUpdate && (
           <g