chore(react/svelte): cleanup edge creation

2023-11-29 16:33:57 +01:00
parent 1d7803aff7
commit 95acea54d1
3 changed files with 29 additions and 10 deletions
@@ -6,7 +6,8 @@
 		Background,
 		BackgroundVariant,
 		MiniMap,
-		MarkerType
+		MarkerType,
+		type Connection
 	} from '@xyflow/svelte';

 	import '@xyflow/svelte/dist/style.css';
@@ -143,6 +144,12 @@
 			}
 		}
 	]);
+
+	$: console.log('edges', $edges);
+
+	function getEdgeId(connection: Connection) {
+		return `edge-${connection.source}-${connection.target}}`;
+	}
 </script>

 <SvelteFlow
@@ -150,9 +157,13 @@
 	{edges}
 	fitView
 	nodeDragThreshold={2}
-	onedgecreate={(e) => {
-		console.log('on edge create', e);
-		return e;
+	onedgecreate={(connection) => {
+		console.log('on edge create', connection);
+
+		return {
+			...connection,
+			id: getEdgeId(connection)
+		};
 	}}
 >
 	<Controls />