chore(edge-toolbar): cleanup

packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte

@@ -1,38 +1,26 @@
 <script lang="ts">
-  import { Position, getEdgeToolbarTransform } from '@xyflow/system';
-  import { getContext } from 'svelte';
+  import { getEdgeToolbarTransform } from '@xyflow/system';
 
-  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
   import { useStore } from '$lib/store';
-
   import { EdgeLabel } from '$lib/components/EdgeLabel';
   import type { EdgeToolbarProps } from './types';
 
   let {
     edgeId,
-    position = Position.Top,
-    align = 'center',
     x,
     y,
-    offsetX = 0,
-    offsetY = 0,
+    alignX = 'center',
+    alignY = 'center',
     isVisible,
     children,
     ...rest
   }: EdgeToolbarProps = $props();
 
   const store = useStore();
-
-  const edge = store.edgeLookup.get(edgeId ?? '');
-
-  // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
-  let isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected);
-
-  let zIndex = (edge?.zIndex ?? 0) + 1;
-
-  const { zoom } = store.viewport;
-
-  const transform = getEdgeToolbarTransform(x, y, zoom, offsetX, offsetY);
+  const edge = store.edgeLookup.get(edgeId);
+  const isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected);
+  const transform = $derived(getEdgeToolbarTransform(x, y, store.viewport.zoom, alignX, alignY));
+  const zIndex = (edge?.zIndex ?? 0) + 1;
 </script>
 
 {#if store.domNode && isActive}
@@ -41,6 +29,7 @@
       style:position="absolute"
       style:transform
       style:z-index={zIndex}
+      style:transform-origin="0 0"
       {...rest}
       class="svelte-flow__edge-toolbar"
       data-id={edgeId ?? ''}