chore(markers): cleanup marker api

example/src/Basic/index.tsx

@@ -13,6 +13,7 @@ import ReactFlow, {
   EdgeChange,
   OnLoadParams,
   Connection,
+  MarkerType,
 } from 'react-flow-renderer';
 import DebugNode from './DebugNode';
 
@@ -86,7 +87,12 @@ const initialNodes: Node[] = [
 ];
 
 const initialEdges: Edge[] = [
-  { id: 'e1-2', source: '1', target: '2', animated: true },
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    markerEnd: { type: MarkerType.Arrow, strokeWidth: 2, width: 15, height: 15, color: '#f00' },
+  },
   { id: 'e1-3', source: '1', target: '3' },
   { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
   { id: 'e3-4b', source: '3', target: '4b' },

example/src/FloatingEdges/utils.ts

@@ -1,4 +1,4 @@
-import { Position, ArrowHeadType, XYPosition, Node, Edge } from 'react-flow-renderer';
+import { Position, XYPosition, Node, Edge } from 'react-flow-renderer';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node

src/components/Edges/utils.ts

@@ -1,11 +1,11 @@
-import { ArrowHeadType, Position } from '../../types';
+import { MarkerType, Position } from '../../types';
 
-export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
+export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => {
   if (typeof markerEndId !== 'undefined' && markerEndId) {
     return `url(#${markerEndId})`;
   }
 
-  return typeof arrowHeadType !== 'undefined' ? `url(#react-flow__${arrowHeadType})` : 'none';
+  return typeof markerType !== 'undefined' ? `url(#react-flow__${markerType})` : 'none';
 };
 
 export interface GetCenterParams {

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 
 import { useStore } from '../../store';
-import { EdgeMarker, ArrowHeadType, ReactFlowState } from '../../types';
+import { EdgeMarker, ReactFlowState } from '../../types';
 import { getMarkerId } from '../../utils/graph';
+import { useMarkerSymbol } from './MarkerSymbols';
 interface MarkerProps extends EdgeMarker {
   id: string;
 }
@@ -10,59 +11,26 @@ interface MarkerDefinitionsProps {
   defaultColor: string;
 }
 
-type SymbolProps = Omit<MarkerProps, 'id' | 'type'>;
-
-const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
-  return (
-    <polyline
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={strokeWidth}
-      fill="none"
-      points="-5,-4 0,0 -5,4"
-    />
-  );
-};
-
-const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
-  return (
-    <polyline
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={strokeWidth}
-      fill={color}
-      points="-5,-4 0,0 -5,4 -5,-4"
-    />
-  );
-};
-
-const markerSymbols = {
-  [ArrowHeadType.Arrow]: ArrowSymbol,
-  [ArrowHeadType.ArrowClosed]: ArrowClosedSymbol,
-};
-
 const Marker = ({
   id,
   type,
   color,
   width = 12.5,
   height = 12.5,
-  units = 'strokeWidth',
+  markerUnits = 'strokeWidth',
   strokeWidth,
   orient = 'auto',
 }: MarkerProps) => {
-  const Symbol = markerSymbols[type];
+  const Symbol = useMarkerSymbol(type);
 
   return (
     <marker
       className="react-flow__arrowhead"
       id={id}
-      markerUnits={units}
       markerWidth={`${width}`}
       markerHeight={`${height}`}
       viewBox="-10 -10 20 20"
+      markerUnits={markerUnits}
       orient={orient}
       refX="0"
       refY="0"
@@ -103,7 +71,7 @@ const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => {
           color={marker.color}
           width={marker.width}
           height={marker.height}
-          units={marker.units}
+          markerUnits={marker.markerUnits}
           strokeWidth={marker.strokeWidth}
           orient={marker.orient}
         />

src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { MarkerType, EdgeMarker } from '../../types';
+
+type SymbolProps = Omit<EdgeMarker, 'type'>;
+
+const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <polyline
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      fill="none"
+      points="-5,-4 0,0 -5,4"
+    />
+  );
+};
+
+const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <polyline
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      fill={color}
+      points="-5,-4 0,0 -5,4 -5,-4"
+    />
+  );
+};
+
+export const MarkerSymbols = {
+  [MarkerType.Arrow]: ArrowSymbol,
+  [MarkerType.ArrowClosed]: ArrowClosedSymbol,
+};
+
+export function useMarkerSymbol(type: MarkerType) {
+  const symbol = useMemo(() => {
+    const symbolExists = MarkerSymbols.hasOwnProperty(type);
+
+    if (!symbolExists) {
+      console.warn(`marker type "${type}" doesn't exist.`);
+      return () => null;
+    }
+
+    return MarkerSymbols[type];
+  }, [type]);
+  return symbol;
+}
+
+export default MarkerSymbols;

src/types/edges.ts

@@ -142,18 +142,18 @@ export type ConnectionLineComponent = React.ComponentType<ConnectionLineComponen
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 
 export interface EdgeMarker {
-  type: ArrowHeadType;
+  type: MarkerType;
   color?: string;
   width?: number;
   height?: number;
-  units?: string;
+  markerUnits?: string;
   orient?: string;
   strokeWidth?: number;
 }
 
 export type EdgeMarkerType = string | EdgeMarker;
 
-export enum ArrowHeadType {
+export enum MarkerType {
   Arrow = 'arrow',
   ArrowClosed = 'arrowclosed',
 }