chore(react/svelte): cleanup edge creation

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';
@@ -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 />

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -80,17 +80,17 @@
         updateConnection,
         cancelConnection,
         panBy,
-        onConnect: (_connection) => {
-          let connection = $onedgecreate ? $onedgecreate(_connection) : _connection;
+        onConnect: (connection) => {
+          const edge = $onedgecreate ? $onedgecreate(connection) : connection;
 
-          if (!connection) {
+          if (!edge) {
             return;
           }
 
-          addEdge(connection);
+          addEdge(edge);
           // @todo: should we change/ improve the stuff we are passing here?
           // instead of source/target we could pass fromNodeId, fromHandleId, etc
-          dispatch('connect', { connection: _connection });
+          dispatch('connect', { connection });
         },
         onConnectStart: (event, startParams) => {
           dispatch('connectstart', {

packages/system/src/utils/edges/general.ts

@@ -112,7 +112,7 @@ export function isEdgeVisible({ sourceNode, targetNode, width, height, transform
 }
 
 const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string =>
-  `xyflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
+  `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
 
 const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
   return edges.some(
@@ -148,6 +148,14 @@ export const addEdgeBase = <EdgeType extends EdgeBase>(
     return edges;
   }
 
+  if (edge.sourceHandle === null) {
+    delete edge.sourceHandle;
+  }
+
+  if (edge.targetHandle === null) {
+    delete edge.targetHandle;
+  }
+
   return edges.concat(edge);
 };