diff --git a/src/components/generic/Flow/Edges/BiDirectionalEdge.tsx b/src/components/generic/Flow/Edges/BiDirectionalEdge.tsx index 7ba014f..3328124 100644 --- a/src/components/generic/Flow/Edges/BiDirectionalEdge.tsx +++ b/src/components/generic/Flow/Edges/BiDirectionalEdge.tsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import { getBezierPath, BaseEdge, useStore, EdgeProps, ReactFlowState, EdgeLabelRenderer, MarkerType } from 'reactflow'; +import { getBezierPath, BaseEdge, useStore, EdgeProps, ReactFlowState, EdgeLabelRenderer } from 'reactflow'; export type GetSpecialPathParams = { sourceX: number; @@ -30,6 +30,7 @@ export default memo(({ targetPosition, selected, data, + markerEnd, }: EdgeProps) => { const isBiDirectionEdge = useStore((s: ReactFlowState) => { const edgeExists = s.edges.some( @@ -61,7 +62,7 @@ export default memo(({ return ( <> - addEdge(newEdge, eds)); + setEdges((eds) => addEdge(addEndMarker(newEdge), eds)); setNodeDataValue({}); }, [setEdges], ); @@ -217,6 +218,15 @@ function Flow() { setThreatList(statementList); }, [setThreatList, statementList]); + const addEndMarker = (edge) => ({ + ...edge, + markerEnd: { + type: MarkerType.ArrowClosed, + width: 20, + height: 20, + color: '#b1b1b7', + }, + }); return (