From eec8d91f95afff9136367e4d490be68a102570af Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Fri, 11 Apr 2025 16:05:20 +0200
Subject: [PATCH] simplify edgereconnectanchor

---
 .../routes/examples/edges/ButtonEdge.svelte   | 14 ++------
 .../EdgeReconnectAnchor.svelte                | 33 ++++---------------
 2 files changed, 9 insertions(+), 38 deletions(-)

diff --git a/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte b/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte
index c18cc65a..e02f25a4 100644
--- a/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte
+++ b/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte
@@ -75,18 +75,8 @@
 {/if}
 
 {#if selected}
-	<EdgeReconnectAnchor
-		bind:reconnecting
-		type="source"
-		position={{ x: sourceX, y: sourceY }}
-		asDomNode
-	/>
-	<EdgeReconnectAnchor
-		bind:reconnecting
-		type="target"
-		position={{ x: targetX, y: targetY }}
-		asDomNode
-	/>
+	<EdgeReconnectAnchor bind:reconnecting type="source" position={{ x: sourceX, y: sourceY }} />
+	<EdgeReconnectAnchor bind:reconnecting type="target" position={{ x: targetX, y: targetY }} />
 {/if}
 
 <style>
diff --git a/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte b/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte
index 0a01dad9..7ea58db5 100644
--- a/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte
+++ b/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte
@@ -13,15 +13,13 @@
     class: className,
     size = 25,
     style,
-    children,
-    asDomNode = false
+    children
   }: {
     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
-  this={asDomNode ? 'div' : 'g'}
-  use:portal={asDomNode ? 'edgelabel' : undefined}
-  xmlns={asDomNode ? undefined : 'http://www.w3.org/2000/svg'}
+<div
+  use:portal={'edgelabel'}
   class={['svelte-flow__edgeupdater nopan', `svelte-flow__edgeupdater-${type}`, className]}
   style:position="absolute"
   style:width={`${size}px`}
   style:height={`${size}px`}
-  style:transform={position
-    ? `translate(calc(${offset} + ${position.x}px), calc(${offset} + ${position.y}px))`
-    : `translate(${offset}, ${offset})`}
+  style:transform={`translate(-50%, -50%) ${position ? `translate(${position.x}px, ${position.y}px` : ''}`}
   {style}
   onpointerdown={onPointerDown}
 >
-  {#if !reconnecting}
-    {#if children}
-      {@render children()}
-    {:else if !asDomNode}
-      <rect
-        width={size}
-        height={size}
-        x={0}
-        fill="transparent"
-        stroke="transparent"
-        pointer-events="all"
-      />
-    {/if}
+  {#if !reconnecting && children}
+    {@render children()}
   {/if}
-</svelte:element>
+</div>