feat(svelte): add on:selectionclick and on:selectioncontextmenu closes #3646

examples/svelte/src/routes/examples/overview/+page.svelte

@@ -174,6 +174,8 @@
 		event.preventDefault();
 		console.log('on edge contextmenu', edge);
 	}}
+	on:selectionclick={(event) => console.log('on selection click', event)}
+	on:selectioncontextmenu={(event) => console.log('on selection contextmenu', event)}
 	autoPanOnConnect
 	autoPanOnNodeDrag
 	connectionMode={ConnectionMode.Strict}

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -1,15 +1,30 @@
 <script lang="ts">
   import { getNodesBounds } from '@xyflow/system';
+  import { createEventDispatcher } from 'svelte';
 
   import { useStore } from '$lib/store';
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
+  import type { Node } from '$lib/types';
 
   const store = useStore();
   const { selectionRectMode, nodes } = store;
 
+  const dispatch = createEventDispatcher<{
+    selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
+    selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
+  }>();
+
   $: selectedNodes = $nodes.filter((n) => n.selected);
   $: bounds = getNodesBounds(selectedNodes);
+
+  function onContextMenu(event: MouseEvent | TouchEvent) {
+    dispatch('selectioncontextmenu', { nodes: selectedNodes, event });
+  }
+
+  function onClick(event: MouseEvent | TouchEvent) {
+    dispatch('selectionclick', { nodes: selectedNodes, event });
+  }
 </script>
 
 {#if selectedNodes && $selectionRectMode === 'nodes'}
@@ -17,6 +32,8 @@
     class="selection-wrapper nopan"
     style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
     use:drag={{ disabled: false, store }}
+    on:contextmenu={onContextMenu}
+    on:click={onClick}
   >
     <Selection width="100%" height="100%" x={0} y={0} />
   </div>

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

@@ -223,7 +223,7 @@
           on:nodedragstop
           on:nodecontextmenu
         />
-        <NodeSelection />
+        <NodeSelection on:selectionclick on:selectioncontextmenu />
       </ViewportComponent>
       <UserSelection />
     </Pane>