improve

src/plugins/ui_actions/public/context_menu/open_context_menu.test.ts

@@ -0,0 +1,84 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createInteractionPositionTracker } from './open_context_menu';
+import { fireEvent } from '@testing-library/dom';
+
+let targetEl: Element;
+const top = 100;
+const left = 100;
+const right = 200;
+const bottom = 200;
+beforeEach(() => {
+  targetEl = document.createElement('div');
+  jest.spyOn(targetEl, 'getBoundingClientRect').mockImplementation(() => ({
+    top,
+    left,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+    x: left,
+    y: top,
+    toJSON: () => {},
+  }));
+  document.body.append(targetEl);
+});
+afterEach(() => {
+  targetEl.remove();
+});
+
+test('should use last clicked element position if mouse position is outside target element', () => {
+  const { resolveLastPosition } = createInteractionPositionTracker();
+
+  fireEvent.click(targetEl, { clientX: 0, clientY: 0 });
+  const { x, y } = resolveLastPosition();
+
+  expect(y).toBe(bottom);
+  expect(x).toBe(left + (right - left) / 2);
+});
+
+test('should use mouse position if mouse inside clicked element', () => {
+  const { resolveLastPosition } = createInteractionPositionTracker();
+
+  const mouseX = 150;
+  const mouseY = 150;
+  fireEvent.click(targetEl, { clientX: mouseX, clientY: mouseY });
+
+  const { x, y } = resolveLastPosition();
+
+  expect(y).toBe(mouseX);
+  expect(x).toBe(mouseY);
+});
+
+test('should use position of previous element, if latest element is no longer in DOM', () => {
+  const { resolveLastPosition } = createInteractionPositionTracker();
+
+  const detachedElement = document.createElement('div');
+  const spy = jest.spyOn(detachedElement, 'getBoundingClientRect');
+
+  fireEvent.click(targetEl);
+  fireEvent.click(detachedElement);
+
+  const { x, y } = resolveLastPosition();
+
+  expect(y).toBe(bottom);
+  expect(x).toBe(left + (right - left) / 2);
+  expect(spy).not.toBeCalled();
+});

src/plugins/ui_actions/public/context_menu/open_context_menu.tsx

@@ -27,58 +27,51 @@ let activeSession: ContextMenuSession | null = null;
 
 const CONTAINER_ID = 'contextMenu-container';
 
-function createInteractionPositionTracker() {
+/**
+ * Tries to find best position for opening context menu using mousemove and click event
+ * Returned position is relative to document
+ */
+export function createInteractionPositionTracker() {
   let lastMouseX = 0;
   let lastMouseY = 0;
-  let lastClick: { el?: Element; pageX: number; pageY: number } | undefined;
+  const lastClicks: Array<{ el?: Element; mouseX: number; mouseY: number }> = [];
+  const MAX_LAST_CLICKS = 5;
 
   document.addEventListener('click', onClick, true);
   document.addEventListener('mousemove', onMouseUpdate, { passive: true });
   document.addEventListener('mouseenter', onMouseUpdate, { passive: true });
   function onClick(event: MouseEvent) {
-    lastClick = {
+    lastClicks.push({
       el: event.target as Element,
-      pageX: event.pageX,
-      pageY: event.pageY,
-    };
+      mouseX: event.clientX,
+      mouseY: event.clientY,
+    });
+    if (lastClicks.length > MAX_LAST_CLICKS) {
+      lastClicks.shift();
+    }
   }
   function onMouseUpdate(event: MouseEvent) {
-    lastMouseX = event.pageY;
-    lastMouseY = event.pageX;
+    lastMouseX = event.clientX;
+    lastMouseY = event.clientY;
   }
 
   return {
     resolveLastPosition: (): { x: number; y: number } => {
-      const scrollTop = document.body.scrollTop;
-      const scrollLeft = document.body.scrollLeft;
-
+      const lastClick = [...lastClicks]
+        .reverse()
+        .find(({ el }) => el && document.body.contains(el));
       if (!lastClick) {
         // fallback to last mouse position
         return {
-          x: lastMouseX + scrollLeft,
-          y: lastMouseY + scrollTop,
-        };
-      }
-
-      if (!lastClick.el) {
-        return {
-          x: lastClick.pageX + scrollLeft,
-          y: lastClick.pageY + scrollTop,
+          x: lastMouseX,
+          y: lastMouseY,
         };
       }
 
-      if (!document.body.contains(lastClick.el)) {
-        // target element no longer in DOM
-        // fallback to lastMouse position
-        return {
-          x: lastMouseX + scrollLeft,
-          y: lastMouseY + scrollTop,
-        };
-      }
+      const { top, left, bottom, right } = lastClick.el!.getBoundingClientRect();
 
-      const { top, left, bottom, right } = lastClick.el.getBoundingClientRect();
-      const mouseX = lastClick.pageX + scrollLeft;
-      const mouseY = lastClick.pageY + scrollTop;
+      const mouseX = lastClick.mouseX;
+      const mouseY = lastClick.mouseY;
 
       if (top <= mouseY && bottom >= mouseY && left <= mouseX && right >= mouseX) {
         // click was inside target element
@@ -93,19 +86,16 @@ function createInteractionPositionTracker() {
           y: bottom,
         };
       }
-
-      return {
-        x: window.innerWidth / 2 + scrollTop,
-        y: window.innerHeight / 2 + scrollLeft,
-      };
     },
   };
 }
 
 const { resolveLastPosition } = createInteractionPositionTracker();
 function getOrCreateContainerElement() {
   let container = document.getElementById(CONTAINER_ID);
-  const { x, y } = resolveLastPosition();
+  let { x, y } = resolveLastPosition();
+  y = y + window.scrollY;
+  x = x + window.scrollX;
 
   if (!container) {
     container = document.createElement('div');