From 38b5051179413d1a2439621aefb10143e9f61fba Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 23 Nov 2023 12:49:06 +0100
Subject: [PATCH] feat(svelte): add on:selectionclick and
 on:selectioncontextmenu closes #3646

---
 .../src/routes/examples/overview/+page.svelte   |  2 ++
 .../NodeSelection/NodeSelection.svelte          | 17 +++++++++++++++++
 .../lib/container/SvelteFlow/SvelteFlow.svelte  |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
index dddbf398..68fd4aaa 100644
--- a/examples/svelte/src/routes/examples/overview/+page.svelte
+++ b/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}
diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
index 98c48d8c..b314e2ad 100644
--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/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>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index dd72ec3b..59bff1f4 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/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>