From 0a0d171daa7654330235cdbb9f80fd7f7a9d11a8 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 28 Jul 2025 16:05:20 +0200
Subject: [PATCH] update examples

---
 examples/react/src/examples/Edges/index.tsx   | 14 ++++++++-----
 .../src/routes/examples/edges/+page.svelte    | 20 ++++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/examples/react/src/examples/Edges/index.tsx b/examples/react/src/examples/Edges/index.tsx
index 5ef76859..820a48c5 100644
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/examples/react/src/examples/Edges/index.tsx
@@ -198,20 +198,22 @@ const initialEdges: Edge[] = [
     id: 'e4-11',
     source: '4',
     target: '11',
-    label: 'Explicit Red Color (should override CSS)',
+    label: 'Explicit Blue Prop Color (should override CSS)',
+    className: 'css-variable-edge',
     markerEnd: {
       type: MarkerType.ArrowClosed,
-      color: '#ff0000',
+      color: '#0000ff',
     },
   },
   {
     id: 'e4-12',
     source: '4',
     target: '12',
-    label: 'No Explicit Color (should use CSS variable)',
+    label: 'Marker No Prop Color (should use CSS variable)',
+    className: 'css-variable-edge',
     markerEnd: {
       type: MarkerType.ArrowClosed,
-      color: null,
+      color: undefined,
     },
   },
 ];
@@ -240,10 +242,12 @@ const EdgesFlow = () => {
     <div style={{ height: '100vh' }}>
       <style>
         {`
+          /* Test CSS variables on specific edges */
           .react-flow {
-            --xy-edge-stroke-width: 4;
+            --xy-edge-stroke-width: 1;
             --xy-edge-stroke: #00ff00;
           }
+
         `}
       </style>
       <ReactFlow
diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 7649d63e..6ec6a70d 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -146,20 +146,19 @@
 			id: 'e4-10',
 			source: '4',
 			target: '10',
-			label: 'Explicit Red Color (should override CSS)',
+			label: 'Explicit Prop Blue Color (should override CSS)',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
-				color: '#ff0000'
+				color: '#0000ff'
 			}
 		},
 		{
 			id: 'e4-11',
 			source: '4',
 			target: '11',
-			label: 'No Explicit Color (should use CSS variable)',
+			label: 'Marker No Prop Color (should use CSS variable)',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
-				// To use CSS variable, set color to null
 				color: null
 			}
 		}
@@ -174,6 +173,15 @@
 		return `edge-${connection.source}-${connection.target}}`;
 	}
 
+	const defaultEdgeOptions = {
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+			color: 'red',
+			width: 20,
+			height: 20
+		}
+	};
+
 	$inspect(edges);
 </script>
 
@@ -182,6 +190,7 @@
 	bind:edges
 	{edgeTypes}
 	fitView
+	{defaultEdgeOptions}
 	nodeDragThreshold={2}
 	onbeforeconnect={(connection) => {
 		console.log('on edge create', connection);
@@ -198,8 +207,9 @@
 </SvelteFlow>
 
 <style>
+	/* Test CSS variables on the marker SVG container */
 	:global(.svelte-flow) {
-		--xy-edge-stroke-width: 4;
+		--xy-edge-stroke-width: 1;
 		--xy-edge-stroke: #00ff00;
 	}
 </style>