Merge branch 'next' into fix/edge-props

examples/react/src/examples/ColorMode/index.tsx

@@ -15,6 +15,8 @@ import {
   Position,
 } from '@xyflow/react';
 
+import './style.css';
+
 const nodeDefaults = {
   sourcePosition: Position.Right,
   targetPosition: Position.Left,

examples/svelte/src/components/Header/Header.svelte

@@ -4,7 +4,7 @@
 
 	const routes = [
 		'add-node-on-drop',
-		'colormode',
+		'color-mode',
 		'custom-connection-line',
 		'customnode',
 		'dagre',

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

@@ -85,7 +85,7 @@
 	{nodes}
 	{edges}
 	{nodeTypes}
-	style="--background-color: {$bgColor}"
+	style="--xy-background-color: {$bgColor}"
 	fitView
 	on:connect={onConnect}
 >

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

@@ -6,7 +6,8 @@
 		Background,
 		BackgroundVariant,
 		MiniMap,
-		MarkerType
+		MarkerType,
+		type Connection
 	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
@@ -146,14 +147,34 @@
 			}
 		}
 	]);
-
+  
 	const edgeTypes = {
 		button: ButtonEdge,
 		customBezier: CustomBezierEdge
 	};
+  
+  function getEdgeId(connection: Connection) {
+		return `edge-${connection.source}-${connection.target}}`;
+	}
+  
+  $: console.log('edges', $edges);
 </script>
 
-<SvelteFlow {nodes} {edges} {edgeTypes} fitView nodeDragThreshold={2}>
+<SvelteFlow
+	{nodes}
+	{edges}
+  {edgeTypes}
+	fitView
+	nodeDragThreshold={2}
+	onedgecreate={(connection) => {
+		console.log('on edge create', connection);
+
+		return {
+			...connection,
+			id: getEdgeId(connection)
+		};
+	}}
+>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />