Merge pull request #5419 from xyflow/arrow-heads-fallback-color

Style Arrow Heads Edge Markers with CSS Variables

.changeset/thirty-owls-float.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+Make arrow heads markers fallback to --xy-edge-stroke CSS variable when passing null as marker color

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

@@ -70,6 +70,30 @@ const initialNodes: Node[] = [
     data: { label: 'Output 10' },
     position: { x: 50, y: 400 },
   },
+  {
+    id: '11',
+    type: 'output',
+    data: { label: 'Output 11' },
+    position: { x: 825, y: 400 },
+  },
+  {
+    id: '12',
+    type: 'output',
+    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[] = [
@@ -182,6 +206,57 @@ const initialEdges: Edge[] = [
       height: 20,
     },
   },
+  {
+    id: 'e4-11',
+    source: '4',
+    target: '11',
+    label: 'Explicit Blue Prop Color (should override CSS)',
+    className: 'css-variable-edge',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#0000ff',
+      width: 40,
+      height: 40,
+    },
+  },
+  {
+    id: 'e4-12',
+    source: '4',
+    target: '12',
+    label: 'Marker explicitly undefined Color (defaults to none)',
+    className: 'css-variable-edge',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: undefined,
+      width: 40,
+      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 = {
@@ -205,28 +280,41 @@ const EdgesFlow = () => {
   const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
-    <ReactFlow
+    <>
-      nodes={nodes}
+      <style>
-      edges={edges}
+        {`
-      onNodesChange={onNodesChange}
+          /* Test CSS variables on specific edges */
-      onEdgesChange={onEdgesChange}
+          .react-flow {
-      onNodeClick={onNodeClick}
+            --xy-edge-stroke-width: 1;
-      onConnect={onConnect}
+            --xy-edge-stroke: #00ff00;
-      onNodeDragStop={onNodeDragStop}
+          }
-      snapToGrid={true}
+
-      edgeTypes={edgeTypes}
+        `}
-      onEdgeClick={onEdgeClick}
+      </style>
-      onEdgeDoubleClick={onEdgeDoubleClick}
+      <ReactFlow
-      onEdgeMouseEnter={onEdgeMouseEnter}
+        nodes={nodes}
-      onEdgeMouseMove={onEdgeMouseMove}
+        edges={edges}
-      onEdgeMouseLeave={onEdgeMouseLeave}
+        onNodesChange={onNodesChange}
-      onDelete={console.log}
+        onEdgesChange={onEdgesChange}
-      defaultEdgeOptions={defaultEdgeOptions}
+        onNodeClick={onNodeClick}
-    >
+        onConnect={onConnect}
-      <MiniMap />
+        onNodeDragStop={onNodeDragStop}
-      <Controls />
+        snapToGrid={true}
-      <Background />
+        edgeTypes={edgeTypes}
-    </ReactFlow>
+        onEdgeClick={onEdgeClick}
+        onEdgeDoubleClick={onEdgeDoubleClick}
+        onEdgeMouseEnter={onEdgeMouseEnter}
+        onEdgeMouseMove={onEdgeMouseMove}
+        onEdgeMouseLeave={onEdgeMouseLeave}
+        onDelete={console.log}
+        defaultEdgeOptions={defaultEdgeOptions}
+        defaultMarkerColor={'purple'}
+      >
+        <MiniMap />
+        <Controls />
+        <Background />
+      </ReactFlow>
+    </>
   );
 };
 

examples/svelte/src/routes/examples/edges/+page.svelte

@@ -51,6 +51,30 @@
 			type: 'output',
 			data: { label: 'Output 9' },
 			position: { x: 675, y: 500 }
+		},
+		{
+			id: '10',
+			type: 'output',
+			data: { label: 'Output 10' },
+			position: { x: 825, y: 400 }
+		},
+		{
+			id: '11',
+			type: 'output',
+			data: { label: 'Output 11' },
+			position: { x: 825, y: 300 }
+		},
+		{
+			id: '12',
+			type: 'output',
+			data: { label: 'Output 12' },
+			position: { x: 900, y: 200 }
+		},
+		{
+			id: '13',
+			type: 'output',
+			data: { label: 'Output 13' },
+			position: { x: 825, y: 100 }
 		}
 	]);
 
@@ -129,6 +153,55 @@
 			label: 'hi',
 			labelStyle: 'background: red; font-weight: 700; padding: 5px;',
 			style: 'stroke: #ffcc0'
+		},
+		{
+			id: 'e4-10',
+			source: '4',
+			target: '10',
+			label: 'Explicit Prop Blue Color (should override CSS)',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				color: '#0000ff',
+				width: 40,
+				height: 40
+			}
+		},
+		{
+			id: 'e4-11',
+			source: '4',
+			target: '11',
+			label: 'Marker explicitly undefined Color (defaults to none)',
+			className: 'css-variable-edge',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				color: undefined,
+				width: 40,
+				height: 40
+			}
+		},
+		{
+			id: 'e4-12',
+			source: '4',
+			target: '12',
+			label: 'Marker null Color (should use `--xy-edge-stroke` CSS variable)',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				color: null,
+				width: 40,
+				height: 40
+			}
+		},
+		{
+			id: 'e4-13',
+			source: '4',
+			target: '13',
+			label: 'Marker implicitly undefined Color (defaults to defaultMarkerColor)',
+			className: 'css-variable-edge',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				width: 40,
+				height: 40
+			}
 		}
 	]);
 
@@ -141,6 +214,15 @@
 		return `edge-${connection.source}-${connection.target}}`;
 	}
 
+	const defaultEdgeOptions = {
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+			color: 'red',
+			width: 20,
+			height: 20
+		}
+	};
+
 	$inspect(edges);
 </script>
 
@@ -149,6 +231,7 @@
 	bind:edges
 	{edgeTypes}
 	fitView
+	{defaultEdgeOptions}
 	nodeDragThreshold={2}
 	onbeforeconnect={(connection) => {
 		console.log('on edge create', connection);
@@ -158,8 +241,17 @@
 			id: getEdgeId(connection)
 		};
 	}}
+	defaultMarkerColor={'purple'}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
 </SvelteFlow>
+
+<style>
+	/* Test CSS variables on the marker SVG container */
+	:global(.svelte-flow) {
+		--xy-edge-stroke-width: 1;
+		--xy-edge-stroke: #00ff00;
+	}
+</style>

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

@@ -5,7 +5,7 @@ import { useStore } from '../../hooks/useStore';
 import { useMarkerSymbol } from './MarkerSymbols';
 
 type MarkerDefinitionsProps = {
-  defaultColor: string;
+  defaultColor: string | null;
   rfId?: string;
 };
 

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

@@ -6,33 +6,21 @@ import { useStoreApi } from '../../hooks/useStore';
 type SymbolProps = Omit<EdgeMarker, 'type'>;
 
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
-  return (
+  const style = {
-    <polyline
+    strokeWidth,
-      style={{
+    ...(color && { stroke: color }),
-        stroke: color,
+  };
-        strokeWidth,
+
-      }}
+  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      points="-5,-4 0,0 -5,4"
-    />
-  );
 };
 
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
-  return (
+  const style = {
-    <polyline
+    strokeWidth,
-      style={{
+    ...(color && { stroke: color, fill: color }),
-        stroke: color,
+  };
-        fill: color,
+
-        strokeWidth,
+  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" points="-5,-4 0,0 -5,4 -5,-4" />;
-      }}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      points="-5,-4 0,0 -5,4 -5,-4"
-    />
-  );
 };
 
 export const MarkerSymbols = {

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/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte

@@ -8,9 +8,12 @@
     height = 12.5,
     markerUnits = 'strokeWidth',
     orient = 'auto-start-reverse',
-    color,
+    color = 'none',
     strokeWidth
   }: MarkerProps = $props();
+
+  // Create inline styles when explicit color is provided
+  const polylineStyle = color ? `stroke: ${color}; fill: ${color};` : '';
 </script>
 
 <marker
@@ -26,7 +29,7 @@
 >
   {#if type === MarkerType.Arrow}
     <polyline
-      stroke={color}
+      style={polylineStyle}
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width={strokeWidth}
@@ -35,11 +38,10 @@
     />
   {:else if type === MarkerType.ArrowClosed}
     <polyline
-      stroke={color}
+      style={polylineStyle}
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width={strokeWidth}
-      fill={color}
       points="-5,-4 0,0 -5,4 -5,-4"
     />
   {/if}

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -230,9 +230,10 @@ export type SvelteFlowProps<
      */
     snapGrid?: SnapGrid;
     /** Color of edge markers
+     * You can pass `null` to use the CSS variable `--xy-edge-stroke` for the marker color.
      * @example "#b1b1b7"
      */
-    defaultMarkerColor?: string;
+    defaultMarkerColor?: string | null;
     /**
      * Controls if all nodes should be draggable
      * @default true

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -365,7 +365,9 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
 
     selectNodesOnDrag: boolean = $derived(signals.props.selectNodesOnDrag ?? true);
 
-    defaultMarkerColor: string = $derived(signals.props.defaultMarkerColor ?? '#b1b1b7');
+    defaultMarkerColor: string | null = $derived(
+      signals.props.defaultMarkerColor === undefined ? '#b1b1b7' : signals.props.defaultMarkerColor
+    );
     markers: MarkerProps[] = $derived.by(() => {
       return createMarkerIds(signals.edges, {
         defaultColor: this.defaultMarkerColor,

packages/system/src/styles/init.css

@@ -165,6 +165,13 @@
     user-select: none;
   }
 }
+
+/* Arrowhead marker styles - use CSS custom properties as default */
+.xy-flow__arrowhead polyline {
+  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+}
+
 .xy-flow__connection {
   pointer-events: none;
 

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;

packages/system/src/utils/marker.ts

@@ -26,7 +26,7 @@ export function createMarkerIds(
     defaultMarkerEnd,
   }: {
     id?: string | null;
-    defaultColor?: string;
+    defaultColor?: string | null;
     defaultMarkerStart?: EdgeMarkerType;
     defaultMarkerEnd?: EdgeMarkerType;
   }