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 ?? ''}

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

@@ -1,42 +1,7 @@
-import type { Position, Align } from '@xyflow/system';
+import type { EdgeToolbarBaseProps } from '@xyflow/system';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
-export type EdgeToolbarProps = {
-  /**
-   * An edge toolbar must be attached to an edge.
-   */
-  edgeId: string;
-  /** If `true`, edge toolbar is visible even if edge is not selected. */
-  isVisible?: boolean;
-  /**
-   * TODO: What and how?? Needed?
-   * Position of the toolbar relative to the edge.
-   * @default Position.Top
-   * @example Position.TopLeft, Position.TopRight, Position.BottomLeft, Position.BottomRight
-   */
-  position?: Position;
-  /**
-   * Align the toolbar relative to the edge.
-   * @default "center"
-   * @example Align.Start, Align.Center, Align.End
-   */
-  align?: Align;
-  /**
-   * The `x` position of the edge label.
-   */
-  x: number;
-  /**
-   * The `y` position of the edge label.
-   */
-  y: number;
-  /**
-   * The `offsetX` position of the edge label relative to the edge in pixels.
-   */
-  offsetX?: number;
-  /**
-   * The `offsetY` position of the edge label relative to the edge in pixels.
-   */
-  offsetY?: number;
+export type EdgeToolbarProps = EdgeToolbarBaseProps & {
   children?: Snippet;
 } & HTMLAttributes<HTMLDivElement>;