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

Style Arrow Heads Edge Markers with CSS Variables
2025-08-11 21:44:55 +02:00
parent 195b4b4f76 cab6883492
commit c492d499c3
12 changed files with 250 additions and 57 deletions
--- a/.changeset/thirty-owls-float.md
+++ b/.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
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/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}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onNodeClick={onNodeClick}
-      onConnect={onConnect}
-      onNodeDragStop={onNodeDragStop}
-      snapToGrid={true}
-      edgeTypes={edgeTypes}
-      onEdgeClick={onEdgeClick}
-      onEdgeDoubleClick={onEdgeDoubleClick}
-      onEdgeMouseEnter={onEdgeMouseEnter}
-      onEdgeMouseMove={onEdgeMouseMove}
-      onEdgeMouseLeave={onEdgeMouseLeave}
-      onDelete={console.log}
-      defaultEdgeOptions={defaultEdgeOptions}
-    >
-      <MiniMap />
-      <Controls />
-      <Background />
-    </ReactFlow>
+    <>
+      <style>
+        {`
+          /* Test CSS variables on specific edges */
+          .react-flow {
+            --xy-edge-stroke-width: 1;
+            --xy-edge-stroke: #00ff00;
+          }
+
+        `}
+      </style>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onConnect={onConnect}
+        onNodeDragStop={onNodeDragStop}
+        snapToGrid={true}
+        edgeTypes={edgeTypes}
+        onEdgeClick={onEdgeClick}
+        onEdgeDoubleClick={onEdgeDoubleClick}
+        onEdgeMouseEnter={onEdgeMouseEnter}
+        onEdgeMouseMove={onEdgeMouseMove}
+        onEdgeMouseLeave={onEdgeMouseLeave}
+        onDelete={console.log}
+        defaultEdgeOptions={defaultEdgeOptions}
+        defaultMarkerColor={'purple'}
+      >
+        <MiniMap />
+        <Controls />
+        <Background />
+      </ReactFlow>
+    </>
  );
 };

--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/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>
--- a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
+++ b/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;
 };

--- a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/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 (
-    <polyline
-      style={{
-        stroke: color,
-        strokeWidth,
-      }}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      points="-5,-4 0,0 -5,4"
-    />
-  );
+  const style = {
+    strokeWidth,
+    ...(color && { stroke: color }),
+  };
+
+  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
 };

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

 export const MarkerSymbols = {
--- a/packages/react/src/types/component-props.ts
+++ b/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
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+++ b/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}
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/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
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/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,
--- a/packages/system/src/styles/init.css
+++ b/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;

--- a/packages/system/src/types/edges.ts
+++ b/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;
--- a/packages/system/src/utils/marker.ts
+++ b/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;
  }