diff --git a/.changeset/nasty-clouds-shake.md b/.changeset/nasty-clouds-shake.md new file mode 100644 index 00000000..6334f0d2 --- /dev/null +++ b/.changeset/nasty-clouds-shake.md @@ -0,0 +1,5 @@ +--- +'@xyflow/svelte': patch +--- + +Remove `edgeId` from `EdgeToolbar` props diff --git a/packages/react/src/additional-components/EdgeToolbar/types.ts b/packages/react/src/additional-components/EdgeToolbar/types.ts index fb7bdfae..9b9ec286 100644 --- a/packages/react/src/additional-components/EdgeToolbar/types.ts +++ b/packages/react/src/additional-components/EdgeToolbar/types.ts @@ -6,5 +6,9 @@ import type { EdgeToolbarBaseProps } from '@xyflow/system'; */ export type EdgeToolbarProps = EdgeToolbarBaseProps & HTMLAttributes & { + /** + * An edge toolbar must be attached to an edge. + */ + edgeId: string; children?: ReactNode; }; diff --git a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte index a1cce7f6..b01ce307 100644 --- a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte +++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte @@ -1,7 +1,7 @@
{ - if (selectEdgeOnClick && id) store.handleEdgeSelection(id); + if (selectEdgeOnClick) store.handleEdgeSelection(edgeId); }} {...rest} > diff --git a/packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte b/packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte index 290878a4..6a063acb 100644 --- a/packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte +++ b/packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte @@ -4,35 +4,42 @@ import { useStore } from '$lib/store'; import { EdgeLabel } from '$lib/components/EdgeLabel'; import type { EdgeToolbarProps } from './types'; + import { getContext } from 'svelte'; let { - edgeId, x, y, alignX = 'center', alignY = 'center', isVisible, + selectEdgeOnClick, + class: className, children, ...rest }: EdgeToolbarProps = $props(); const store = useStore(); - const edge = $derived(store.edgeLookup.get(edgeId)); - const isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected); + const edgeId = getContext('svelteflow__edge_id'); + + if (!edgeId) { + throw new Error('EdgeToolbar must be used within an edge'); + } + + const isActive = $derived( + typeof isVisible === 'boolean' ? isVisible : store.edgeLookup.get(edgeId)?.selected + ); const transform = $derived(getEdgeToolbarTransform(x, y, store.viewport.zoom, alignX, alignY)); - const zIndex = $derived((edge?.zIndex ?? 0) + 1); -{#if store.domNode && isActive} - +{#if isActive} +
{@render children?.()}
diff --git a/packages/svelte/src/lib/plugins/EdgeToolbar/types.ts b/packages/svelte/src/lib/plugins/EdgeToolbar/types.ts index b1a63938..12655490 100644 --- a/packages/svelte/src/lib/plugins/EdgeToolbar/types.ts +++ b/packages/svelte/src/lib/plugins/EdgeToolbar/types.ts @@ -2,6 +2,7 @@ import type { EdgeToolbarBaseProps } from '@xyflow/system'; import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; -export type EdgeToolbarProps = EdgeToolbarBaseProps & { +export type EdgeToolbarProps = Omit & { + selectEdgeOnClick?: boolean; children?: Snippet; } & HTMLAttributes; diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts index 20e43eda..e446f613 100644 --- a/packages/system/src/types/edges.ts +++ b/packages/system/src/types/edges.ts @@ -131,10 +131,6 @@ export type EdgePosition = { export type EdgeLookup = Map; export type EdgeToolbarBaseProps = { - /** - * An edge toolbar must be attached to an edge. - */ - edgeId: string; /** * The `x` position of the edge label. */