From 6a701522202605366854c618f159fd79cb7ce084 Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Fri, 26 Sep 2025 04:51:24 +0100
Subject: [PATCH] Wheel Selection Toolbox and Popover (#5781)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This pull request updates event handling in the selection toolbox
components to ensure that mouse wheel events are properly forwarded to
the canvas, improving interaction consistency across the UI.

**Event handling improvements:**

* Changed the wheel event handler in `SelectionToolbox.vue` to use
`canvasInteractions.forwardEventToCanvas` instead of
`canvasInteractions.handleWheel`, ensuring wheel events are consistently
forwarded to the canvas.
* Added the wheel event handler to the `MoreOptions.vue` popover,
forwarding wheel events to the canvas for submenu interactions.

**Code organization updates:**

* Imported `useCanvasInteractions` in `MoreOptions.vue` to access the
new event forwarding method.
* Instantiated `canvasInteractions` in `MoreOptions.vue` for use in
event handling.## Summary


https://github.com/user-attachments/assets/46046086-35e8-4cd1-a11a-365705beb9cd

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5781-Wheel-Selection-Toolbox-and-Popover-27a6d73d3650812c9c4fe8440ff7dd1d)
by [Unito](https://www.unito.io)
---
 src/components/graph/SelectionToolbox.spec.ts         | 6 +++---
 src/components/graph/SelectionToolbox.vue             | 2 +-
 src/components/graph/selectionToolbox/MoreOptions.vue | 4 +++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/graph/SelectionToolbox.spec.ts b/src/components/graph/SelectionToolbox.spec.ts
index 85acaf6cf..00ce74a51 100644
--- a/src/components/graph/SelectionToolbox.spec.ts
+++ b/src/components/graph/SelectionToolbox.spec.ts
@@ -450,9 +450,9 @@ describe('SelectionToolbox', () => {
   describe('Event Handling', () => {
     it('should handle wheel events', async () => {
       const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
-      const handleWheelSpy = vi.fn()
+      const forwardEventToCanvasSpy = vi.fn()
       mockCanvasInteractions.mockReturnValue({
-        handleWheel: handleWheelSpy
+        forwardEventToCanvas: forwardEventToCanvasSpy
       } as any)
 
       const mockExtensionService = vi.mocked(useExtensionService)
@@ -467,7 +467,7 @@ describe('SelectionToolbox', () => {
       const panel = wrapper.find('.panel')
       await panel.trigger('wheel')
 
-      expect(handleWheelSpy).toHaveBeenCalled()
+      expect(forwardEventToCanvasSpy).toHaveBeenCalled()
     })
   })
 
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index f0a18ed3e..9970c0b47 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -13,7 +13,7 @@
           header: 'hidden',
           content: 'p-1 h-10 flex flex-row gap-1'
         }"
-        @wheel="canvasInteractions.handleWheel"
+        @wheel="canvasInteractions.forwardEventToCanvas"
       >
         <DeleteButton v-if="showDelete" />
         <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
diff --git a/src/components/graph/selectionToolbox/MoreOptions.vue b/src/components/graph/selectionToolbox/MoreOptions.vue
index 08d240dda..32729719c 100644
--- a/src/components/graph/selectionToolbox/MoreOptions.vue
+++ b/src/components/graph/selectionToolbox/MoreOptions.vue
@@ -26,6 +26,7 @@
       :pt="pt"
       @show="onPopoverShow"
       @hide="onPopoverHide"
+      @wheel="canvasInteractions.forwardEventToCanvas"
     >
       <div class="flex flex-col p-2 min-w-48">
         <MenuOptionItem
@@ -66,6 +67,7 @@ import {
   useMoreOptionsMenu
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 
 import MenuOptionItem from './MenuOptionItem.vue'
@@ -84,7 +86,7 @@ const currentSubmenu = ref<string | null>(null)
 
 const { menuOptions, menuOptionsWithSubmenu, bump } = useMoreOptionsMenu()
 const { toggleSubmenu, hideAllSubmenus } = useSubmenuPositioning()
-
+const canvasInteractions = useCanvasInteractions()
 const minimap = useMinimap()
 const containerStyles = minimap.containerStyles