feat(edges): add arrow head options

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -0,0 +1,56 @@
+import React, { ReactNode } from 'react';
+
+interface MarkerProps {
+  id: string;
+  children: ReactNode;
+}
+
+const Marker = ({ id, children }: MarkerProps) => (
+  <marker
+    className="react-flow__arrowhead"
+    id={id}
+    markerWidth="12.5"
+    markerHeight="12.5"
+    viewBox="-10 -10 20 20"
+    orient="auto"
+    refX="0"
+    refY="0"
+  >
+    {children}
+  </marker>
+);
+
+interface MarkerDefinitionsProps {
+  color: string;
+}
+
+const MarkerDefinitions = ({ color }: MarkerDefinitionsProps) => {
+  return (
+    <defs>
+      <Marker id="react-flow__arrowclosed">
+        <polyline
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1"
+          fill={color}
+          points="-5,-4 0,0 -5,4 -5,-4"
+        />
+      </Marker>
+      <Marker id="react-flow__arrow">
+        <polyline
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+          fill="none"
+          points="-5,-4 0,0 -5,4"
+        />
+      </Marker>
+    </defs>
+  );
+};
+
+MarkerDefinitions.displayName = 'MarkerDefinitions';
+
+export default MarkerDefinitions;

src/container/EdgeRenderer/index.tsx

@@ -3,6 +3,7 @@ import React, { memo, CSSProperties } from 'react';
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
+import MarkerDefinitions from './MarkerDefinitions';
 import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements, ConnectionLineType } from '../../types';
 
 interface EdgeRendererProps {
@@ -12,6 +13,8 @@ interface EdgeRendererProps {
   connectionLineType: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   onElementClick?: (element: Node | Edge) => void;
+  arrowHeadColor: string;
+  markerEndId?: string;
 }
 
 interface EdgePositions {
@@ -171,6 +174,7 @@ function renderEdge(
       labelShowBg={edge.labelShowBg}
       labelBgStyle={edge.labelBgStyle}
       style={edge.style}
+      arrowHeadType={edge.arrowHeadType}
       source={sourceId}
       target={targetId}
       sourceHandleId={sourceHandleId}
@@ -182,6 +186,7 @@ function renderEdge(
       sourcePosition={sourcePosition}
       targetPosition={targetPosition}
       elementsSelectable={elementsSelectable}
+      markerEndId={props.markerEndId}
     />
   );
 }
@@ -197,7 +202,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
   const nodesConnectable = useStoreState((s) => s.nodesConnectable);
   const elementsSelectable = useStoreState((s) => s.elementsSelectable);
 
-  const { width, height, connectionLineStyle, connectionLineType } = props;
+  const { width, height, connectionLineStyle, connectionLineType, arrowHeadColor } = props;
 
   if (!width) {
     return null;
@@ -208,6 +213,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
 
   return (
     <svg width={width} height={height} className="react-flow__edges">
+      <MarkerDefinitions color={arrowHeadColor} />
       <g transform={transformStyle}>
         {edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements, elementsSelectable))}
         {renderConnectionLine && (

src/container/GraphView/index.tsx

@@ -52,6 +52,8 @@ export interface GraphViewProps {
   minZoom: number;
   maxZoom: number;
   defaultZoom: number;
+  arrowHeadColor: string;
+  markerEndId?: string;
 }
 
 const GraphView = memo(
@@ -84,6 +86,8 @@ const GraphView = memo(
     minZoom,
     maxZoom,
     defaultZoom,
+    arrowHeadColor,
+    markerEndId,
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
@@ -212,6 +216,8 @@ const GraphView = memo(
           onElementClick={onElementClick}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
+          arrowHeadColor={arrowHeadColor}
+          markerEndId={markerEndId}
         />
         <UserSelection selectionKeyPressed={selectionKeyPressed} />
         {nodesSelectionActive && <NodesSelection />}

src/container/ReactFlow/index.tsx

@@ -60,6 +60,8 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   minZoom: number;
   maxZoom: number;
   defaultZoom: number;
+  arrowHeadColor: string;
+  markerEndId?: string;
 }
 
 const ReactFlow = ({
@@ -95,6 +97,8 @@ const ReactFlow = ({
   minZoom,
   maxZoom,
   defaultZoom,
+  arrowHeadColor,
+  markerEndId,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -132,6 +136,8 @@ const ReactFlow = ({
           minZoom={minZoom}
           maxZoom={maxZoom}
           defaultZoom={defaultZoom}
+          arrowHeadColor={arrowHeadColor}
+          markerEndId={markerEndId}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
@@ -167,6 +173,7 @@ ReactFlow.defaultProps = {
   minZoom: 0.5,
   maxZoom: 2,
   defaultZoom: 1,
+  arrowHeadColor: '#bbb',
 };
 
 export default ReactFlow;