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 />