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

This commit is contained in:
Christopher Möller
2021-10-14 17:53:50 +02:00
parent eed5717821
commit d3b1148bca
18 changed files with 192 additions and 120 deletions
+10 -6
View File
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
import EdgeText from './EdgeText';
import { getMarkerEnd, getCenter } from './utils';
import { getCenter } from './utils';
import { EdgeProps, Position } from '../../types';
interface GetBezierPathParams {
@@ -60,8 +60,8 @@ export default memo(
labelBgPadding,
labelBgBorderRadius,
style,
arrowHeadType,
markerEndId,
markerEnd,
markerStart,
}: EdgeProps) => {
const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
const path = getBezierPath({
@@ -86,11 +86,15 @@ export default memo(
/>
) : null;
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
return (
<>
<path style={style} d={path} className="react-flow__edge-path" markerEnd={markerEnd} />
<path
style={style}
d={path}
className="react-flow__edge-path"
markerEnd={markerEnd}
markerStart={markerStart}
/>
{text}
</>
);