diff --git a/examples/svelte/src/routes/examples/overview/CustomNode.svelte b/examples/svelte/src/routes/examples/overview/CustomNode.svelte index 300a4e97..867c3c9b 100644 --- a/examples/svelte/src/routes/examples/overview/CustomNode.svelte +++ b/examples/svelte/src/routes/examples/overview/CustomNode.svelte @@ -2,7 +2,7 @@ import { Handle, Position, - useSelectionChanged, + useOnSelectionChange, type BuiltInNode, type NodeProps } from '@xyflow/svelte'; @@ -13,7 +13,7 @@ positionAbsoluteY = 0 }: NodeProps = $props(); - useSelectionChanged(({ nodes, edges }) => { + useOnSelectionChange(({ nodes, edges }) => { console.log('on selection changed via hook', { nodes, edges }); }); diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte index fb809b81..0b6141fe 100644 --- a/examples/svelte/src/routes/examples/overview/Flow.svelte +++ b/examples/svelte/src/routes/examples/overview/Flow.svelte @@ -216,7 +216,7 @@ connectionMode={ConnectionMode.Strict} attributionPosition={'top-center'} deleteKey={['Backspace', 'd']} - onselectionchanged={({ nodes, edges }) => { + onselectionchange={({ nodes, edges }) => { console.log('on selection changed via prop', { nodes, edges }); }} selectNodesOnDrag diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index e9658dae..904c8ad1 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -69,7 +69,8 @@ edges = $bindable([]), viewport = $bindable(undefined), ...props - }: SvelteFlowProps & HTMLAttributes = $props(); + }: SvelteFlowProps & + Omit, 'onselectionchange'> = $props(); // svelte-ignore non_reactive_update let store = createStore({ @@ -113,8 +114,8 @@ // handle selection change $effect(() => { const params = { nodes: store.selectedNodes, edges: store.selectedEdges }; - untrack(() => props.onselectionchanged)?.(params); - for (const handler of store.selectionChangedHandlers.values()) { + untrack(() => props.onselectionchange)?.(params); + for (const handler of store.selectionChangeHandlers.values()) { handler(params); } }); diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte index f839b923..20b1dcc3 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte @@ -22,7 +22,8 @@ clientWidth?: number; clientHeight?: number; children?: Snippet; - rest: SvelteFlowRestProps & HTMLAttributes; + rest: SvelteFlowRestProps & + Omit, 'onselectionchange'>; } = $props(); // Unfortunately we have to destructure the props here this way, @@ -52,7 +53,7 @@ onclickconnectstart, onclickconnectend, oninit, - onselectionchanged, + onselectionchange, clickConnect, fitView, fitViewOptions, diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 52ab4caa..e7ea8208 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -36,7 +36,7 @@ import type { OnBeforeDelete, IsValidConnection, OnBeforeReconnect, - OnSelectionChanged + OnSelectionChange } from '$lib/types'; import type { Component } from 'svelte'; @@ -454,5 +454,5 @@ export type SvelteFlowProps< /** This handler gets called when the flow is finished initializing */ oninit?: () => void; /** This event handler gets called when the selected nodes & edges change */ - onselectionchanged?: OnSelectionChanged; + onselectionchange?: OnSelectionChange; }; diff --git a/packages/svelte/src/lib/hooks/useOnSelectionChange.svelte.ts b/packages/svelte/src/lib/hooks/useOnSelectionChange.svelte.ts new file mode 100644 index 00000000..f827ddcc --- /dev/null +++ b/packages/svelte/src/lib/hooks/useOnSelectionChange.svelte.ts @@ -0,0 +1,15 @@ +import type { OnSelectionChange } from '$lib/types'; +import { useStore } from '$lib/hooks/useStore'; + +export function useOnSelectionChange(onselectionchange: OnSelectionChange) { + const store = $derived(useStore()); + const symbol = Symbol(); + + $effect(() => { + store.selectionChangeHandlers.set(symbol, onselectionchange); + + return () => { + store.selectionChangeHandlers.delete(symbol); + }; + }); +} diff --git a/packages/svelte/src/lib/hooks/useSelectionChanged.svelte.ts b/packages/svelte/src/lib/hooks/useSelectionChanged.svelte.ts deleted file mode 100644 index 895b36f7..00000000 --- a/packages/svelte/src/lib/hooks/useSelectionChanged.svelte.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { OnSelectionChanged } from '$lib/types'; -import { useStore } from '$lib/hooks/useStore'; - -export function useSelectionChanged(onselectionchanged: OnSelectionChanged) { - const store = $derived(useStore()); - const symbol = Symbol(); - - $effect(() => { - store.selectionChangedHandlers.set(symbol, onselectionchanged); - - return () => { - store.selectionChangedHandlers.delete(symbol); - }; - }); -} diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index 60dc8cdd..158c78fd 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -39,7 +39,7 @@ export * from '$lib/hooks/useNodeConnections.svelte'; export * from '$lib/hooks/useNodesData.svelte'; export * from '$lib/hooks/useInternalNode.svelte'; export * from '$lib/hooks/useInitialized.svelte'; -export * from '$lib/hooks/useSelectionChanged.svelte'; +export * from '$lib/hooks/useOnSelectionChange.svelte'; //actions export * from '$lib/actions/portal'; diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts index 9a94d685..3f8ab896 100644 --- a/packages/svelte/src/lib/store/initial-store.svelte.ts +++ b/packages/svelte/src/lib/store/initial-store.svelte.ts @@ -60,7 +60,7 @@ import type { EdgeLayouted, InternalNode, OnBeforeReconnect, - OnSelectionChanged + OnSelectionChange } from '$lib/types'; import type { StoreSignals } from './types'; @@ -183,7 +183,7 @@ export function getInitialStore>(); + selectionChangeHandlers = new Map>(); nodeLookup: NodeLookup> = new Map(); parentLookup: ParentLookup> = new Map(); diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts index f0882e31..34474408 100644 --- a/packages/svelte/src/lib/types/general.ts +++ b/packages/svelte/src/lib/types/general.ts @@ -44,7 +44,7 @@ export type IsValidConnection = ( edge: EdgeType | Connection ) => boolean; -export type OnSelectionChanged< +export type OnSelectionChange< NodeType extends Node = Node, EdgeType extends Edge = Edge > = (params: { nodes: NodeType[]; edges: EdgeType[] }) => void;