simplify edgereconnectanchor

examples/svelte/src/routes/examples/edges/ButtonEdge.svelte

@@ -75,18 +75,8 @@
 {/if}
 
 {#if selected}
-	<EdgeReconnectAnchor
+	<EdgeReconnectAnchor bind:reconnecting type="source" position={{ x: sourceX, y: sourceY }} />
-		bind:reconnecting
+	<EdgeReconnectAnchor bind:reconnecting type="target" position={{ x: targetX, y: targetY }} />
-		type="source"
-		position={{ x: sourceX, y: sourceY }}
-		asDomNode
-	/>
-	<EdgeReconnectAnchor
-		bind:reconnecting
-		type="target"
-		position={{ x: targetX, y: targetY }}
-		asDomNode
-	/>
 {/if}
 
 <style>

packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte

@@ -13,15 +13,13 @@
     class: className,
     size = 25,
     style,
-    children,
+    children
-    asDomNode = false
   }: {
     type: HandleType;
     reconnecting?: boolean;
     style?: string;
     class?: ClassValue;
     position?: XYPosition;
-    asDomNode?: boolean;
     size?: number;
     children?: Snippet;
   } = $props();
@@ -110,36 +108,19 @@
       getFromHandle: () => store.connection.fromHandle
     });
   };
-
-  let offset = $derived(asDomNode ? '-50%' : `-${size * 0.5}px`);
 </script>
 
-<svelte:element
+<div
-  this={asDomNode ? 'div' : 'g'}
+  use:portal={'edgelabel'}
-  use:portal={asDomNode ? 'edgelabel' : undefined}
-  xmlns={asDomNode ? undefined : 'http://www.w3.org/2000/svg'}
   class={['svelte-flow__edgeupdater nopan', `svelte-flow__edgeupdater-${type}`, className]}
   style:position="absolute"
   style:width={`${size}px`}
   style:height={`${size}px`}
-  style:transform={position
+  style:transform={`translate(-50%, -50%) ${position ? `translate(${position.x}px, ${position.y}px` : ''}`}
-    ? `translate(calc(${offset} + ${position.x}px), calc(${offset} + ${position.y}px))`
-    : `translate(${offset}, ${offset})`}
   {style}
   onpointerdown={onPointerDown}
 >
-  {#if !reconnecting}
+  {#if !reconnecting && children}
-    {#if children}
+    {@render children()}
-      {@render children()}
-    {:else if !asDomNode}
-      <rect
-        width={size}
-        height={size}
-        x={0}
-        fill="transparent"
-        stroke="transparent"
-        pointer-events="all"
-      />
-    {/if}
   {/if}
-</svelte:element>
+</div>