update markers example with color changing on selection

apps/example-apps/react/examples/edges/markers/App.jsx → apps/example-apps/react/examples/edges/markers/App.tsx

@@ -1,7 +1,12 @@
-import React from 'react';
-import { ReactFlow, Background, MarkerType } from '@xyflow/react';
+import { ReactFlow, Background, MarkerType, BezierEdge } from '@xyflow/react';
 
 import '@xyflow/react/dist/style.css';
+import CustomEdge from './CustomEdge';
+
+const edgeTypes = {
+  default: BezierEdge,
+  custom: CustomEdge,
+};
 
 const defaultNodes = [
   {
@@ -39,6 +44,11 @@ const defaultNodes = [
     position: { x: 20, y: 450 },
     data: { label: 'G' },
   },
+  {
+    id: 'H',
+    position: { x: 500, y: 450 },
+    data: { label: 'H' },
+  },
 ];
 
 const defaultEdges = [
@@ -80,6 +90,18 @@ const defaultEdges = [
     markerEnd: 'logo',
     label: 'custom marker',
   },
+  {
+    id: 'E->H',
+    source: 'E',
+    target: 'H',
+    type: 'custom',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 20,
+      height: 20,
+    },
+    label: 'change color on selection',
+  },
   {
     id: 'B->G',
     source: 'B',
@@ -172,11 +194,7 @@ export default function MarkersExample() {
               fill="#1A192B"
             />
             <path opacity="0.35" d="M22 9.5H18V10.5H22V9.5Z" fill="#1A192B" />
-            <path
-              opacity="0.35"
-              d="M29.5 17.5V21.5H30.5V17.5H29.5Z"
-              fill="#1A192B"
-            />
+            <path opacity="0.35" d="M29.5 17.5V21.5H30.5V17.5H29.5Z" fill="#1A192B" />
             <path opacity="0.35" d="M22 29.5H18V30.5H22V29.5Z" fill="#1A192B" />
             <path
               d="M17 12C18.1046 12 19 11.1046 19 10C19 8.89543 18.1046 8 17 8C15.8954 8 15 8.89543 15 10C15 11.1046 15.8954 12 17 12Z"
@@ -197,6 +215,7 @@ export default function MarkersExample() {
         defaultNodes={defaultNodes}
         defaultEdges={defaultEdges}
         fitView
+        edgeTypes={edgeTypes}
       >
         <Background />
       </ReactFlow>

apps/example-apps/react/examples/edges/markers/CustomEdge.tsx

@@ -0,0 +1,80 @@
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeText,
+  getBezierPath,
+  type EdgeProps,
+} from '@xyflow/react';
+
+export default function CustomEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  label,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  selected,
+}: EdgeProps) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const activeMarkerEnd = selected ? 'url(#selected-marker)' : markerEnd;
+
+  const color = selected ? '#FFCC00' : style.stroke;
+
+  return (
+    <>
+      {/* You can also define a custom marker in your own Custom Edge component. 
+      This might be useful if you want to have a different marker, depending on the state of the edge.
+      Ideally, you would store the marker definition in a separate component, so you can reuse it in multiple edges.
+      If you defined it here, in your custom edge component, it will be re-rendered for every edge instance.
+      */}
+      <svg style={{ position: 'absolute', top: 0, left: 0 }}>
+        <defs>
+          <marker
+            className="react-flow__arrowhead"
+            id="selected-marker"
+            markerWidth="20"
+            markerHeight="20"
+            viewBox="-10 -10 20 20"
+            markerUnits="userSpaceOnUse"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="0"
+          >
+            <polyline
+              className="arrowclosed"
+              style={{
+                strokeWidth: 1,
+                stroke: '#FFCC00',
+                fill: '#FFCC00',
+              }}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              points="-5,-4 0,0 -5,4 -5,-4"
+            />
+          </marker>
+        </defs>
+      </svg>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        markerEnd={activeMarkerEnd}
+        style={{ stroke: color, ...style }}
+        label={label}
+      />
+
+      <EdgeText x={labelX} y={labelY} label={label} />
+    </>
+  );
+}

apps/example-apps/react/examples/edges/markers/README.mdx

@@ -3,6 +3,20 @@ title: Edge Markers
 description: Make your edges into arrows, add custom icons, or SVGs
 ---
 
-React Flow has built-in support for different marker types for your edges. It's possible to add your own [SVG markers](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker), too.
+React Flow has built-in support for different marker types for your edges. It's
+possible to add your own [SVG
+markers](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker), too.
+
+The markers are defined as SVG elements, so you can use any SVG you want.
+The React Flow edge renderer will expect the marker definition to be in a `<defs>` element. 
+
+If, for example, your custom edge is wrapping a built-in `<BaseEdge/>` component, 
+you can pass the `markerStart` and `markerEnd` props to the `<BaseEdge/>` component.
+The built-in React Flow edge components
+will expect the `markerStart` and `markerEnd` props to be in the format
+`"url(#markerId)"`, where `markerId` is the ID of your marker definition.
+
+This allows you to customize the marker for a specific edge, depending on the state of the edge.
+
 
 <RemoteCodeViewer route="examples/edges/markers" framework="react" />

apps/example-apps/react/examples/edges/markers/index.jsx → apps/example-apps/react/examples/edges/markers/index.tsx

@@ -4,6 +4,7 @@ import App from './App';
 import './index.css';
 
 const container = document.querySelector('#app');
-const root = createRoot(container);
-
-root.render(<App />);
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}