allow null and correct behavior

examples/react/src/examples/Edges/index.tsx

@@ -82,6 +82,18 @@ const initialNodes: Node[] = [
     data: { label: 'Output 12' },
     position: { x: 825, y: 300 },
   },
+  {
+    id: '13',
+    type: 'output',
+    data: { label: 'Output 13' },
+    position: { x: 900, y: 200 },
+  },
+  {
+    id: '14',
+    type: 'output',
+    data: { label: 'Output 14' },
+    position: { x: 825, y: 100 },
+  },
 ];
 
 const initialEdges: Edge[] = [
@@ -211,7 +223,7 @@ const initialEdges: Edge[] = [
     id: 'e4-12',
     source: '4',
     target: '12',
-    label: 'Marker No Prop Color (should use CSS variable)',
+    label: 'Marker explicitly undefined Color (defaults to none)',
     className: 'css-variable-edge',
     markerEnd: {
       type: MarkerType.ArrowClosed,
@@ -220,6 +232,31 @@ const initialEdges: Edge[] = [
       height: 40,
     },
   },
+  {
+    id: 'e4-13',
+    source: '4',
+    target: '13',
+    label: 'Marker null Color (should use `--xy-edge-stroke` CSS variable)',
+    className: 'css-variable-edge',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: null,
+      width: 40,
+      height: 40,
+    },
+  },
+  {
+    id: 'e4-14',
+    source: '4',
+    target: '14',
+    label: 'Marker implicitly undefined Color (defaults to defaultMarkerColor)',
+    className: 'css-variable-edge',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 40,
+      height: 40,
+    },
+  },
 ];
 
 const edgeTypes: EdgeTypes = {
@@ -271,6 +308,7 @@ const EdgesFlow = () => {
         onEdgeMouseLeave={onEdgeMouseLeave}
         onDelete={console.log}
         defaultEdgeOptions={defaultEdgeOptions}
+        defaultMarkerColor={'purple'}
       >
         <MiniMap />
         <Controls />

packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -8,7 +8,7 @@ type SymbolProps = Omit<EdgeMarker, 'type'>;
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color && color !== 'none' && { stroke: color, fill: color }),
+    ...(color && { stroke: color }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
@@ -17,7 +17,7 @@ const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color && color !== 'none' && { stroke: color, fill: color }),
+    ...(color && { stroke: color, fill: color }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" points="-5,-4 0,0 -5,4 -5,-4" />;

packages/react/src/types/component-props.ts

@@ -139,7 +139,12 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * This event fires when the user releases the source or target of an editable edge. It is called
    * even if an edge update does not occur.
    */
-  onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType, connectionState: FinalConnectionState) => void;
+  onReconnectEnd?: (
+    event: MouseEvent | TouchEvent,
+    edge: EdgeType,
+    handleType: HandleType,
+    connectionState: FinalConnectionState
+  ) => void;
   /**
    * Use this event handler to add interactivity to a controlled flow.
    * It is called on node drag, select, and move.
@@ -494,9 +499,10 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   nodeExtent?: CoordinateExtent;
   /**
    * Color of edge markers.
+   * You can pass `null` to use the CSS variable `--xy-edge-stroke` for the marker color.
    * @default '#b1b1b7'
    */
-  defaultMarkerColor?: string;
+  defaultMarkerColor?: string | null;
   /**
    * Controls if the viewport should zoom by scrolling inside the container.
    * @default true

packages/system/src/types/edges.ts

@@ -91,7 +91,7 @@ export enum ConnectionLineType {
  */
 export type EdgeMarker = {
   type: MarkerType | `${MarkerType}`;
-  color?: string;
+  color?: string | null;
   width?: number;
   height?: number;
   markerUnits?: string;