Merge pull request #4103 from xyflow/svelte-edge-type-change

fix(svelte): change edge type

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

@@ -51,7 +51,7 @@
     edgecontextmenu: { edge: Edge; event: MouseEvent };
   }>();
 
-  const edgeType = type || 'default';
+  $: edgeType = type || 'default';
   $: edgeComponent = $edgeTypes[edgeType] || BezierEdgeInternal;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -54,24 +54,26 @@
     handleNodeSelection,
     updateNodeDimensions
   } = store;
-  const nodeType = type || 'default';
 
   let nodeRef: HTMLDivElement;
   let prevNodeRef: HTMLDivElement | null = null;
 
-  const nodeTypeValid = !!$nodeTypes[nodeType];
-
-  if (!nodeTypeValid) {
-    console.warn('003', errorMessages['error003'](type!));
-  }
-
-  const nodeComponent = $nodeTypes[nodeType] || DefaultNode;
   const dispatchNodeEvent = createNodeEventDispatcher();
   const connectableStore = writable(connectable);
   let prevType: string | undefined = undefined;
   let prevSourcePosition: Position | undefined = undefined;
   let prevTargetPosition: Position | undefined = undefined;
 
+  $: nodeType = type || 'default';
+  $: nodeTypeValid = !!$nodeTypes[nodeType];
+  $: nodeComponent = $nodeTypes[nodeType] || DefaultNode;
+
+  $: {
+    if (!nodeTypeValid) {
+      console.warn('003', errorMessages['error003'](type!));
+    }
+  }
+
   $: inlineStyleDimensions = getNodeInlineStyleDimensions({
     width,
     height,