refactor: use overlay-position-mixin with context-menu and menu-bar

packages/context-menu/src/vaadin-context-menu-overlay.js

@@ -5,6 +5,7 @@
  */
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
+import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
 
 registerStyles(
   'vaadin-context-menu-overlay',
@@ -36,7 +37,7 @@ registerStyles(
  * @extends OverlayElement
  * @protected
  */
-class ContextMenuOverlay extends OverlayElement {
+class ContextMenuOverlay extends PositionMixin(OverlayElement) {
   static get is() {
     return 'vaadin-context-menu-overlay';
   }
@@ -101,13 +102,36 @@ class ContextMenuOverlay extends OverlayElement {
     return {
       xMax: overlayRect.right - contentRect.width,
       xMin: overlayRect.left + contentRect.width,
-      yMax,
-      left: overlayRect.left,
-      right: overlayRect.right,
-      top: overlayRect.top,
-      width: contentRect.width
+      yMax
     };
   }
+
+  _updatePosition() {
+    super._updatePosition();
+
+    if (this.positionTarget && this.parentOverlay) {
+      // This overlay is positioned by a parent menu item,
+      // adjust the position by the overlay content paddings
+      const content = this.$.content;
+      const style = getComputedStyle(content);
+
+      // Horizontal adjustment
+      const isLeftAligned = !!this.style.left;
+      if (isLeftAligned) {
+        this.style.left = parseFloat(this.style.left) + parseFloat(style.paddingLeft) + 'px';
+      } else {
+        this.style.right = parseFloat(this.style.right) + parseFloat(style.paddingRight) + 'px';
+      }
+
+      // Vertical adjustment
+      const isBottomAligned = !!this.style.bottom;
+      if (isBottomAligned) {
+        this.style.bottom = parseFloat(this.style.bottom) - parseFloat(style.paddingBottom) + 'px';
+      } else {
+        this.style.top = parseFloat(this.style.top) - parseFloat(style.paddingTop) + 'px';
+      }
+    }
+  }
 }
 
 customElements.define(ContextMenuOverlay.is, ContextMenuOverlay);

packages/context-menu/src/vaadin-context-menu.js

@@ -552,96 +552,56 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEven
   /** @private */
   __alignOverlayPosition() {
     const overlay = this.$.overlay;
+
+    if (overlay.positionTarget) {
+      // The overlay is positioned relative to another node, for example, a
+      // menu item in a nested submenu structure where this overlay lists
+      // the items for another submenu.
+      // It means that the overlay positioning is controlled by
+      // vaadin-overlay-position-mixin so no manual alignment is needed.
+      return;
+    }
+
     const style = overlay.style;
 
     // Reset all properties before measuring
     ['top', 'right', 'bottom', 'left'].forEach((prop) => style.removeProperty(prop));
     ['right-aligned', 'end-aligned', 'bottom-aligned'].forEach((attr) => overlay.removeAttribute(attr));
 
     // Maximum x and y values are imposed by content size and overlay limits.
-    const { xMax, xMin, yMax, left, right, top, width } = overlay.getBoundaries();
+    const { xMax, xMin, yMax } = overlay.getBoundaries();
     // Reuse saved x and y event values, in order to this method be used async
-    // in the `vaadin-overlay-change` which guarantees that overlay is ready
-    let x = this.__x || (!this.__isRTL ? left : right);
-    const y = this.__y || top;
+    // in the `vaadin-overlay-change` which guarantees that overlay is ready.
+    // The valus represent an anchor position on the page where the contextmenu
+    // event took place.
+    let x = this.__x;
+    const y = this.__y;
 
     // Select one overlay corner and move to the event x/y position.
     // Then set styling attrs for flex-aligning the content appropriately.
     const wdthVport = document.documentElement.clientWidth;
     const hghtVport = document.documentElement.clientHeight;
 
-    // Align to the parent menu overlay, if any.
-    const parent = overlay.parentOverlay;
-    let alignedToParent = false;
-    let parentContentRect;
-    if (parent) {
-      parentContentRect = parent.$.overlay.getBoundingClientRect();
-      if (parent.hasAttribute('right-aligned') || parent.hasAttribute('end-aligned')) {
-        const parentStyle = getComputedStyle(parent);
-        const getPadding = (el, direction) => {
-          return parseFloat(getComputedStyle(el.$.content)['padding' + direction]);
-        };
-        const dimensionToSet = parseFloat(parentStyle[this.__isRTL ? 'left' : 'right']) + parentContentRect.width;
-        const padding = getPadding(parent, 'Left') + getPadding(overlay, 'Right');
-
-        // Preserve end-aligned, if possible.
-        if (wdthVport - (dimensionToSet - padding) > width) {
-          this._setEndAligned(overlay);
-          style[this.__isRTL ? 'left' : 'right'] = dimensionToSet + 'px';
-          alignedToParent = true;
-        }
-      } else if (x < parentContentRect.x) {
-        // Check if sub menu opens on the left side and the parent menu is not right aligned.
-        // If so, use actual width of the submenu content instead of the parent menu content.
-        x = x - (width - parentContentRect.width);
+    if (!this.__isRTL) {
+      if (x < wdthVport / 2 || x < xMax) {
+        // Menu is displayed in the right side of the anchor
+        style.left = x + 'px';
+      } else {
+        // Menu is displayed in the left side of the anchor
+        style.right = Math.max(0, wdthVport - x) + 'px';
+        this._setEndAligned(overlay);
       }
-    }
-
-    if (!alignedToParent) {
-      if (!this.__isRTL) {
-        // Sub-menu is displayed in the right side of root menu
-        if ((x < wdthVport / 2 || x < xMax) && !parent) {
-          style.left = x + 'px';
-        } else if (parent && wdthVport - parentContentRect.width - parentContentRect.left >= parentContentRect.width) {
-          // Sub-menu is displayed in the right side of root menu If it is nested menu
-          style.left = parentContentRect.left + parentContentRect.width + 'px';
-        } else if (parent) {
-          // Sub-menu is displayed in the left side of root menu If it is nested menu
-          style.right = 'auto';
-          style.left =
-            Math.max(
-              overlay.getBoundingClientRect().left,
-              parentContentRect.left - overlay.getBoundingClientRect().width
-            ) + 'px';
-          this._setEndAligned(overlay);
-        } else {
-          // Sub-menu is displayed in the left side of root menu
-          style.right = Math.max(0, wdthVport - x) + 'px';
-          this._setEndAligned(overlay);
-        }
+    } else {
+      // Menu is displayed in the left side of the anchor
+      if (x > wdthVport / 2 || x > xMin) {
+        style.right = Math.max(0, wdthVport - x) + 'px';
       } else {
-        // Sub-menu is displayed in the left side of root menu
-        if ((x > wdthVport / 2 || x > xMin) && !parent) {
-          style.right = Math.max(0, wdthVport - x) + 'px';
-        } else if (parent && parentContentRect.left >= parentContentRect.width) {
-          // Sub-menu is displayed in the left side of root menu If it is nested menu
-          style.right = wdthVport - parentContentRect.right + parentContentRect.width + 'px';
-        } else if (parent) {
-          // Sub-menu is displayed in the right side of root menu If it is nested menu
-          style.right = 'auto';
-          style.left =
-            Math.max(
-              overlay.getBoundingClientRect().left - overlay.getBoundingClientRect().width,
-              parentContentRect.right
-            ) + 'px';
-          this._setEndAligned(overlay);
-        } else {
-          // Sub-menu is displayed in the left side of root menu
-          style.left = x + 'px';
-          this._setEndAligned(overlay);
-        }
+        // Menu is displayed in the left side of the anchor
+        style.left = x + 'px';
+        this._setEndAligned(overlay);
       }
     }
+
     if (y < hghtVport / 2 || y < yMax) {
       style.top = y + 'px';
     } else {

packages/context-menu/src/vaadin-contextmenu-items-mixin.js

@@ -156,17 +156,13 @@ export const ItemsMixin = (superClass) =>
       subMenu.items = itemElement._item.children;
       subMenu.listenOn = itemElement;
 
-      const itemRect = itemElement.getBoundingClientRect();
-
-      const content = subMenu.$.overlay.$.content;
-      const style = getComputedStyle(content);
       const parent = this.$.overlay;
-      const y = parent.hasAttribute('bottom-aligned')
-        ? itemRect.bottom + parseFloat(style.paddingBottom)
-        : itemRect.top - parseFloat(style.paddingTop);
 
-      // Store the reference to align based on parent overlay coordinates
-      subMenu.$.overlay._setParentOverlay(parent);
+      const subMenuOverlay = subMenu.$.overlay;
+      subMenuOverlay.positionTarget = itemElement;
+      subMenuOverlay.noHorizontalOverlap = true;
+      // Store the reference parent overlay
+      subMenuOverlay._setParentOverlay(parent);
 
       // Set theme attribute from parent element
       if (parent.theme) {
@@ -175,24 +171,12 @@ export const ItemsMixin = (superClass) =>
         subMenu.removeAttribute('theme');
       }
 
-      let x;
+      const content = subMenu.$.overlay.$.content;
       content.style.minWidth = '';
-      if (document.documentElement.clientWidth - itemRect.right > itemRect.width) {
-        // There's room on the right side
-        x = itemRect.right;
-      } else {
-        // Open on the left side
-        x = itemRect.left - itemRect.width;
-        // Make sure there's no gaps between the menus
-        content.style.minWidth = parent.$.content.clientWidth + 'px';
-      }
-      x = Math.max(x, 0);
 
       itemElement.dispatchEvent(
         new CustomEvent('opensubmenu', {
           detail: {
-            x,
-            y,
             children: itemElement._item.children
           }
         })

packages/context-menu/test/items.test.js

@@ -33,7 +33,8 @@ describe('items', () => {
       const overlay = menu.$.overlay;
       overlay.__openingHandler && overlay.__openingHandler();
     }
-    fire(openTarget, 'mouseover', {});
+    const { right, bottom } = openTarget.getBoundingClientRect();
+    fire(openTarget, 'mouseover', { x: right, y: bottom });
   };
 
   const getSubMenu = (menu = rootMenu) => {
@@ -133,9 +134,8 @@ describe('items', () => {
 
     (isIOS ? it.skip : it)('should open the subMenu on the top if root menu is bottom-aligned', async () => {
       subMenu.close();
-      const rootItemRect = menuComponents()[0].getBoundingClientRect();
       rootMenu.$.overlay.style.removeProperty('top');
-      rootMenu.$.overlay.style.bottom = rootItemRect.height * 2 + 'px';
+      rootMenu.$.overlay.style.bottom = '0px';
       rootMenu.$.overlay.setAttribute('bottom-aligned', '');
       open(menuComponents()[0]);
       await nextRender(subMenu);

packages/menu-bar/src/vaadin-menu-bar-interactions-mixin.js

@@ -314,16 +314,16 @@ export const InteractionsMixin = (superClass) =>
 
       subMenu.items = items;
       subMenu.listenOn = button;
-      this._expandedButton = button;
+      const overlay = subMenu.$.overlay;
+      overlay.positionTarget = button;
+      overlay.noVerticalOverlap = true;
 
-      const rect = button.getBoundingClientRect();
+      this._expandedButton = button;
 
       requestAnimationFrame(() => {
         button.dispatchEvent(
           new CustomEvent('opensubmenu', {
             detail: {
-              x: this.__isRTL ? rect.right : rect.left,
-              y: rect.bottom,
               children: items
             }
           })
@@ -342,12 +342,13 @@ export const InteractionsMixin = (superClass) =>
         });
       }
 
-      // do not focus item when open not from keyboard
-      if (event.type !== 'keydown') {
-        this.__onceOpened(() => {
+      this.__onceOpened(() => {
+        // do not focus item when open not from keyboard
+        if (event.type !== 'keydown') {
           subMenu.$.overlay.$.overlay.focus();
-        });
-      }
+        }
+        overlay._updatePosition();
+      });
     }
 
     /** @private */