From 47f9118296b95ad519ead9c68d6753ecbc16cb95 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 30 Apr 2025 20:32:06 +0200
Subject: [PATCH] implement onSelectionChanged

---
 examples/svelte/src/routes/+layout.ts         |  2 +
 .../examples/overview/CustomNode.svelte       | 12 ++++-
 .../src/routes/examples/overview/Flow.svelte  |  5 +-
 examples/svelte/vite.config.ts                |  3 +-
 .../ViewportPortal/ViewportPortal.svelte      |  4 +-
 .../lib/components/ViewportPortal/types.ts    |  2 +-
 .../container/SvelteFlow/SvelteFlow.svelte    | 11 ++++-
 .../lib/container/SvelteFlow/Wrapper.svelte   |  1 +
 .../src/lib/container/SvelteFlow/types.ts     |  9 ++--
 .../lib/hooks/useSelectionChanged.svelte.ts   | 15 ++++++
 packages/svelte/src/lib/index.ts              |  1 +
 .../src/lib/store/initial-store.svelte.ts     | 49 ++++++++++++++++++-
 packages/svelte/src/lib/types/general.ts      |  5 ++
 13 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 examples/svelte/src/routes/+layout.ts
 create mode 100644 packages/svelte/src/lib/hooks/useSelectionChanged.svelte.ts

diff --git a/examples/svelte/src/routes/+layout.ts b/examples/svelte/src/routes/+layout.ts
new file mode 100644
index 00000000..83addb7e
--- /dev/null
+++ b/examples/svelte/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = false;
diff --git a/examples/svelte/src/routes/examples/overview/CustomNode.svelte b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
index 6eebee96..300a4e97 100644
--- a/examples/svelte/src/routes/examples/overview/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
@@ -1,11 +1,21 @@
 <script lang="ts">
-	import { Handle, Position, type BuiltInNode, type NodeProps } from '@xyflow/svelte';
+	import {
+		Handle,
+		Position,
+		useSelectionChanged,
+		type BuiltInNode,
+		type NodeProps
+	} from '@xyflow/svelte';
 
 	let {
 		data = { label: 'Node' },
 		positionAbsoluteX = 0,
 		positionAbsoluteY = 0
 	}: NodeProps<BuiltInNode> = $props();
+
+	useSelectionChanged(({ nodes, edges }) => {
+		console.log('on selection changed via hook', { nodes, edges });
+	});
 </script>
 
 <div class="custom">
diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte
index ae642925..fb809b81 100644
--- a/examples/svelte/src/routes/examples/overview/Flow.svelte
+++ b/examples/svelte/src/routes/examples/overview/Flow.svelte
@@ -216,6 +216,10 @@
 	connectionMode={ConnectionMode.Strict}
 	attributionPosition={'top-center'}
 	deleteKey={['Backspace', 'd']}
+	onselectionchanged={({ nodes, edges }) => {
+		console.log('on selection changed via prop', { nodes, edges });
+	}}
+	selectNodesOnDrag
 >
 	<Controls orientation="horizontal" {fitViewOptions}>
 		{#snippet before()}
@@ -240,7 +244,6 @@
 			}}>left-right</button
 		>
 	</Panel>
-
 	<InitTracker />
 </SvelteFlow>
 
diff --git a/examples/svelte/vite.config.ts b/examples/svelte/vite.config.ts
index e1aa83a9..6b35eada 100644
--- a/examples/svelte/vite.config.ts
+++ b/examples/svelte/vite.config.ts
@@ -4,7 +4,8 @@ import { defineConfig } from 'vite';
 export default defineConfig({
 	plugins: [sveltekit()],
 	build: {
-		sourcemap: true
+		sourcemap: true,
+		minify: false
 	},
 	server: {
 		fs: {
diff --git a/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte b/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
index f07d11a5..a8ce3cd4 100644
--- a/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
+++ b/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
@@ -2,9 +2,9 @@
   import { portal } from '$lib/actions/portal';
   import type { ViewportPortalProps } from './types';
 
-  let { moveTo = 'front', children, ...rest }: ViewportPortalProps = $props();
+  let { target = 'front', children, ...rest }: ViewportPortalProps = $props();
 </script>
 
-<div use:portal={`viewport-${moveTo}`} {...rest}>
+<div use:portal={`viewport-${target}`} {...rest}>
   {@render children?.()}
 </div>
diff --git a/packages/svelte/src/lib/components/ViewportPortal/types.ts b/packages/svelte/src/lib/components/ViewportPortal/types.ts
index 0d185bee..5b5f78b9 100644
--- a/packages/svelte/src/lib/components/ViewportPortal/types.ts
+++ b/packages/svelte/src/lib/components/ViewportPortal/types.ts
@@ -2,6 +2,6 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
 export type ViewportPortalProps = {
-  moveTo: 'front' | 'back';
+  target: 'front' | 'back';
   children?: Snippet;
 } & HTMLAttributes<HTMLDivElement>;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index b3051afb..e9658dae 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import type { Edge, Node } from '$lib/types';
-  import { getContext, setContext, onDestroy } from 'svelte';
+  import { getContext, setContext, onDestroy, untrack } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { ConnectionLineType, PanOnScrollMode } from '@xyflow/system';
 
@@ -110,6 +110,15 @@
     }
   } satisfies StoreContext<NodeType, EdgeType>);
 
+  // handle selection change
+  $effect(() => {
+    const params = { nodes: store.selectedNodes, edges: store.selectedEdges };
+    untrack(() => props.onselectionchanged)?.(params);
+    for (const handler of store.selectionChangedHandlers.values()) {
+      handler(params);
+    }
+  });
+
   onDestroy(() => {
     store.reset();
   });
diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index 531ee861..f839b923 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -52,6 +52,7 @@
     onclickconnectstart,
     onclickconnectend,
     oninit,
+    onselectionchanged,
     clickConnect,
     fitView,
     fitViewOptions,
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 53afe4c7..042bbc2f 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -36,7 +36,8 @@ import type {
   OnBeforeConnect,
   OnBeforeDelete,
   IsValidConnection,
-  OnBeforeReconnect
+  OnBeforeReconnect,
+  OnSelectionChanged
 } from '$lib/types';
 
 import type { Component } from 'svelte';
@@ -391,6 +392,8 @@ export type SvelteFlowProps<
      * If you have custom connection logic its preferred to use this callback over the
      * `isValidConnection` prop on the handle component for performance reasons.
      */
+    /** Toggles ability to make connections via clicking the handles */
+    clickConnect?: boolean;
     isValidConnection?: IsValidConnection;
     /** This event handler is called when the user begins to pan or zoom the viewport */
     onmovestart?: OnMoveStart;
@@ -434,8 +437,8 @@ export type SvelteFlowProps<
     onclickconnectstart?: OnConnectStart;
     /** A connection is finished by clicking on a handle */
     onclickconnectend?: OnConnectEnd;
-    /** Toggles ability to make connections via clicking the handles */
-    clickConnect?: boolean;
     /** 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>;
   };
diff --git a/packages/svelte/src/lib/hooks/useSelectionChanged.svelte.ts b/packages/svelte/src/lib/hooks/useSelectionChanged.svelte.ts
new file mode 100644
index 00000000..895b36f7
--- /dev/null
+++ b/packages/svelte/src/lib/hooks/useSelectionChanged.svelte.ts
@@ -0,0 +1,15 @@
+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 54853c97..60dc8cdd 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -39,6 +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';
 
 //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 25c055de..9a94d685 100644
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/packages/svelte/src/lib/store/initial-store.svelte.ts
@@ -59,7 +59,8 @@ import type {
   Node,
   EdgeLayouted,
   InternalNode,
-  OnBeforeReconnect
+  OnBeforeReconnect,
+  OnSelectionChanged
 } from '$lib/types';
 
 import type { StoreSignals } from './types';
@@ -138,6 +139,52 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
       signals.edges = edges;
     }
 
+    _prevSelectedNodes: NodeType[] = [];
+    _prevSelectedNodeIds = new Set<string>();
+    selectedNodes = $derived.by(() => {
+      const selectedNodesCount = this._prevSelectedNodeIds.size;
+      const selectedNodeIds = new Set<string>();
+      const selectedNodes = this.nodes.filter((node) => {
+        if (node.selected) {
+          selectedNodeIds.add(node.id);
+          this._prevSelectedNodeIds.delete(node.id);
+        }
+        return node.selected;
+      });
+
+      // Either the number of selected nodes has changed or two nodes changed their selection state
+      // at the same time. However then the previously selected node will be inside _prevSelectedNodeIds
+      if (selectedNodesCount !== selectedNodeIds.size || this._prevSelectedNodeIds.size > 0) {
+        this._prevSelectedNodes = selectedNodes;
+      }
+
+      this._prevSelectedNodeIds = selectedNodeIds;
+      return this._prevSelectedNodes;
+    });
+
+    _prevSelectedEdges: EdgeType[] = [];
+    _prevSelectedEdgeIds = new Set<string>();
+    selectedEdges = $derived.by(() => {
+      const selectedEdgesCount = this._prevSelectedEdgeIds.size;
+      const selectedEdgeIds = new Set<string>();
+      const selectedEdges = this.edges.filter((edge) => {
+        if (edge.selected) {
+          selectedEdgeIds.add(edge.id);
+          this._prevSelectedEdgeIds.delete(edge.id);
+        }
+        return edge.selected;
+      });
+      // Either the number of selected edges has changed or two edges changed their selection state
+      // at the same time. However then the previously selected edge will be inside _prevSelectedEdgeIds
+      if (selectedEdgesCount !== selectedEdgeIds.size || this._prevSelectedEdgeIds.size > 0) {
+        this._prevSelectedEdges = selectedEdges;
+      }
+      this._prevSelectedEdgeIds = selectedEdgeIds;
+      return this._prevSelectedEdges;
+    });
+
+    selectionChangedHandlers = new Map<symbol, OnSelectionChanged<NodeType, EdgeType>>();
+
     nodeLookup: NodeLookup<InternalNode<NodeType>> = new Map();
     parentLookup: ParentLookup<InternalNode<NodeType>> = new Map();
     connectionLookup: ConnectionLookup = new Map();
diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts
index 76a7afe5..f0882e31 100644
--- a/packages/svelte/src/lib/types/general.ts
+++ b/packages/svelte/src/lib/types/general.ts
@@ -43,3 +43,8 @@ export type OnBeforeDelete<
 export type IsValidConnection<EdgeType extends Edge = Edge> = (
   edge: EdgeType | Connection
 ) => boolean;
+
+export type OnSelectionChanged<
+  NodeType extends Node = Node,
+  EdgeType extends Edge = Edge
+> = (params: { nodes: NodeType[]; edges: EdgeType[] }) => void;