streamline onselectionchange

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<BuiltInNode> = $props();
 
-	useSelectionChanged(({ nodes, edges }) => {
+	useOnSelectionChange(({ nodes, edges }) => {
 		console.log('on selection changed via hook', { nodes, edges });
 	});
 </script>

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

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -69,7 +69,8 @@
     edges = $bindable([]),
     viewport = $bindable(undefined),
     ...props
-  }: SvelteFlowProps<NodeType, EdgeType> & HTMLAttributes<HTMLDivElement> = $props();
+  }: SvelteFlowProps<NodeType, EdgeType> &
+    Omit<HTMLAttributes<HTMLDivElement>, 'onselectionchange'> = $props();
 
   // svelte-ignore non_reactive_update
   let store = createStore<NodeType, EdgeType>({
@@ -113,8 +114,8 @@
   // handle selection change
   $effect(() => {
     const params = { nodes: store.selectedNodes, edges: store.selectedEdges };
-    untrack(() => props.onselectionchanged)?.(params);
+    untrack(() => props.onselectionchange)?.(params);
-    for (const handler of store.selectionChangedHandlers.values()) {
+    for (const handler of store.selectionChangeHandlers.values()) {
       handler(params);
     }
   });

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -22,7 +22,8 @@
     clientWidth?: number;
     clientHeight?: number;
     children?: Snippet;
-    rest: SvelteFlowRestProps<NodeType, EdgeType> & HTMLAttributes<HTMLDivElement>;
+    rest: SvelteFlowRestProps<NodeType, EdgeType> &
+      Omit<HTMLAttributes<HTMLDivElement>, 'onselectionchange'>;
   } = $props();
 
   // Unfortunately we have to destructure the props here this way,
@@ -52,7 +53,7 @@
     onclickconnectstart,
     onclickconnectend,
     oninit,
-    onselectionchanged,
+    onselectionchange,
     clickConnect,
     fitView,
     fitViewOptions,

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<NodeType, EdgeType>;
+    onselectionchange?: OnSelectionChange<NodeType, EdgeType>;
   };

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);
+    };
+  });
+}

packages/svelte/src/lib/hooks/useSelectionChanged.svelte.ts

@@ -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);
-    };
-  });
-}

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';

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<NodeType extends Node = Node, EdgeType extends E
       return this._prevSelectedEdges;
     });
 
-    selectionChangedHandlers = new Map<symbol, OnSelectionChanged<NodeType, EdgeType>>();
+    selectionChangeHandlers = new Map<symbol, OnSelectionChange<NodeType, EdgeType>>();
 
     nodeLookup: NodeLookup<InternalNode<NodeType>> = new Map();
     parentLookup: ParentLookup<InternalNode<NodeType>> = new Map();

packages/svelte/src/lib/types/general.ts

@@ -44,7 +44,7 @@ export type IsValidConnection<EdgeType extends Edge = Edge> = (
   edge: EdgeType | Connection
 ) => boolean;
 
-export type OnSelectionChanged<
+export type OnSelectionChange<
   NodeType extends Node = Node,
   EdgeType extends Edge = Edge
 > = (params: { nodes: NodeType[]; edges: EdgeType[] }) => void;