From 8068a3ab713356a7f0fd957b8e863adba5178d78 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 20 Oct 2025 16:27:42 +0200 Subject: [PATCH 1/4] make edgeId optional, fix usage of edgeLabel --- .../lib/components/EdgeLabel/EdgeLabel.svelte | 9 ++++++--- .../plugins/EdgeToolbar/EdgeToolbar.svelte | 20 ++++++++++++------- .../src/lib/plugins/EdgeToolbar/types.ts | 3 ++- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte index a1cce7f6..109fd8ee 100644 --- a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte +++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte @@ -20,10 +20,13 @@ const store = useStore(); - const id = getContext('svelteflow__edge_id'); + const edgeId = getContext('svelteflow__edge_id'); + if (!edgeId) { + throw new Error('EdgeLabel must be used within an edge'); + } let z = $derived.by(() => { - return store.visible.edges.get(id)?.zIndex; + return store.visible.edges.get(edgeId)?.zIndex; }); @@ -39,7 +42,7 @@ style:z-index={z} tabindex="-1" onclick={() => { - 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..39668df9 100644 --- a/packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte +++ b/packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte @@ -4,35 +4,41 @@ 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 edgeId = getContext('svelteflow__edge_id'); + if (!edgeId) { + throw new Error('EdgeToolbar must be used within an edge'); + } + const edge = $derived(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 = $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; From dca0a30f273a05d592d8b89b3f0f30d829f5bbd0 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 20 Oct 2025 16:29:46 +0200 Subject: [PATCH 2/4] chore(changeset) --- .changeset/nasty-clouds-shake.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nasty-clouds-shake.md diff --git a/.changeset/nasty-clouds-shake.md b/.changeset/nasty-clouds-shake.md new file mode 100644 index 00000000..4a56d774 --- /dev/null +++ b/.changeset/nasty-clouds-shake.md @@ -0,0 +1,5 @@ +--- +'@xyflow/svelte': patch +--- + +Make edgeId optional for EdgeToolbar From e6b0d12f6fb441d64a931493d6564586851804f6 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 21 Oct 2025 12:16:54 +0200 Subject: [PATCH 3/4] chore(edge-toolbar): cleanup --- .../react/src/additional-components/EdgeToolbar/types.ts | 4 ++++ .../svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte | 8 +++----- .../svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte | 7 ++++--- packages/system/src/types/edges.ts | 4 ---- 4 files changed, 11 insertions(+), 12 deletions(-) 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 109fd8ee..b01ce307 100644 --- a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte +++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte @@ -1,7 +1,7 @@
('svelteflow__edge_id'); + if (!edgeId) { throw new Error('EdgeToolbar must be used within an edge'); } - const edge = $derived(store.edgeLookup.get(edgeId)); - const isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected); + const isActive = $derived( + typeof isVisible === 'boolean' ? isVisible : store.edgeLookup.get(edgeId)?.selected + ); const transform = $derived(getEdgeToolbarTransform(x, y, store.viewport.zoom, alignX, alignY)); 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. */ From 658a988ad205584c6734896ad6aeefa7b657b172 Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Tue, 21 Oct 2025 12:23:18 +0200 Subject: [PATCH 4/4] Remove edgeId from EdgeToolbar props --- .changeset/nasty-clouds-shake.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nasty-clouds-shake.md b/.changeset/nasty-clouds-shake.md index 4a56d774..6334f0d2 100644 --- a/.changeset/nasty-clouds-shake.md +++ b/.changeset/nasty-clouds-shake.md @@ -2,4 +2,4 @@ '@xyflow/svelte': patch --- -Make edgeId optional for EdgeToolbar +Remove `edgeId` from `EdgeToolbar` props