fix(edges): make it possible to change edge type dynamically closes #3386

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

@@ -113,6 +113,21 @@
 		);
 	}
 
+	function updateEdge() {
+		edges.update((eds) =>
+			eds.map((edge) => {
+				if (edge.id === '1-2') {
+					return {
+						...edge,
+						type: edge.type === 'default' ? 'smoothstep' : 'default'
+					};
+				}
+
+				return edge;
+			})
+		);
+	}
+
 	$: {
 		console.log('nodes changed', $nodes);
 	}
@@ -147,6 +162,7 @@
 	<MiniMap />
 	<Panel position="top-right">
 		<button on:click={updateNode}>update node pos</button>
+		<button on:click={updateEdge}>update edge type</button>
 	</Panel>
 </SvelteFlow>
 

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, SvelteComponent, type ComponentType } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import { getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
@@ -36,8 +36,7 @@
   const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
   const dispatch = createEventDispatcher();
 
-  const edgeComponent: ComponentType<SvelteComponent<EdgeProps>> = $edgeTypes[type!] || BezierEdge;
-
+  $: edgeComponent = $edgeTypes[type!] || BezierEdge;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;