fix(svelte): handle interactionWidth closes #3558

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -17,6 +17,9 @@
   export let interactionWidth: $$Props['interactionWidth'] = 20;
   let className: $$Props['class'] = undefined;
   export { className as class };
+
+  // @todo, why is interactionWidth undefined after first re-render?
+  let interactionWidthValue = interactionWidth === undefined ? 20 : interactionWidth;
 </script>
 
 <path
@@ -29,11 +32,11 @@
   {style}
 />
 
-{#if interactionWidth}
+{#if interactionWidthValue}
   <path
     d={path}
     stroke-opacity={0}
-    stroke-width={interactionWidth}
+    stroke-width={interactionWidthValue}
     fill="none"
     class="svelte-flow__edge-interaction"
   />

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

@@ -35,6 +35,8 @@
   export let sourcePosition: $$Props['sourcePosition'];
   export let targetPosition: $$Props['targetPosition'];
   export let ariaLabel: $$Props['ariaLabel'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
   // @ todo: support edge updates
   let className: string = '';
   export { className as class };
@@ -104,6 +106,7 @@
       {labelStyle}
       {data}
       {style}
+      {interactionWidth}
       sourceHandleId={sourceHandle}
       targetHandleId={targetHandle}
       markerStart={markerStartUrl}

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -51,6 +51,7 @@
           sourcePosition={edge.sourcePosition}
           targetPosition={edge.targetPosition}
           ariaLabel={edge.ariaLabel}
+          interactionWidth={edge.interactionWidth}
           class={edge.class}
           type={edgeType}
           {selectable}