fix: position context menu at pointer

Author: cotedav

src/tests/views/TonalBuilderHomeView.spec.ts

@@ -95,12 +95,17 @@ describe('TonalBuilderHomeView', () => {
 
     const targetSwatch = swatches[1];
 
-    await targetSwatch.trigger('contextmenu');
+    const coords = { clientX: 150, clientY: 200 };
+
+    await targetSwatch.trigger('contextmenu', coords);
     await nextTick();
 
-    const contextMenu = document.querySelector('[data-cy="context-menu"]');
+    const contextMenu = document.querySelector('[data-cy="context-menu"]') as HTMLElement | null;
     expect(contextMenu).not.toBeNull();
 
+    expect(contextMenu?.style.left).toBe(`${coords.clientX}px`);
+    expect(contextMenu?.style.top).toBe(`${coords.clientY}px`);
+
     const menuItems = contextMenu?.querySelectorAll('[role="menuitem"]') ?? [];
     expect(menuItems.length).toBeGreaterThan(0);
 

src/views/tonal-builder/TonalBuilderHomeView.vue

@@ -234,7 +234,7 @@
   }) => {
     const origin = (() => {
       if (event instanceof MouseEvent) {
-        return { x: event.clientX + window.scrollX, y: event.clientY + window.scrollY };
+        return { x: event.clientX, y: event.clientY };
       }
 
       const rect = target?.getBoundingClientRect();