[IMP] menu: more positioning options for Menu component

The `Menu` component was taking a `{x,y}` props for its positioning.
This is not enough to cover that cases when we want the menu to be
positioned around a rectangle when there is not enough space for the
menu to be displayed at the bottom left.

With this commit:
- the menu of `SelectMenu` is does not overlap anymore with the select
   when the menu is displayed upwards
- the menu of `Figure` is positioned right of the figure, and only flip
    to the left if there is not enough space
- the menu of `LinkEditor` is positioned right of the menu button, and
    not to a random position

Task: TODO

Author: hokolomopo

src/components/bottom_bar/bottom_bar.ts

@@ -124,7 +124,7 @@ export class BottomBar extends Component<Props, SpreadsheetChildEnv> {
   menuState: BottomBarMenuState = useState({
     isOpen: false,
     menuId: undefined,
-    position: null,
+    anchorRect: null,
     menuItems: [],
   });
 
@@ -192,7 +192,7 @@ export class BottomBar extends Component<Props, SpreadsheetChildEnv> {
     this.menuState.isOpen = true;
     this.menuState.menuId = menuId;
     this.menuState.menuItems = registry.getMenuItems();
-    this.menuState.position = { x, y };
+    this.menuState.anchorRect = { x, y, width: 0, height: 0 };
   }
 
   onSheetContextMenu(sheetId: UID, registry: MenuItemRegistry, ev: MenuMouseEvent) {
@@ -209,7 +209,7 @@ export class BottomBar extends Component<Props, SpreadsheetChildEnv> {
     this.menuState.isOpen = false;
     this.menuState.menuId = undefined;
     this.menuState.menuItems = [];
-    this.menuState.position = null;
+    this.menuState.anchorRect = null;
   }
 
   closeContextMenuWithId(menuId: UID) {

src/components/bottom_bar/bottom_bar.xml

@@ -88,7 +88,7 @@
 
       <Menu
         t-if="menuState.isOpen"
-        position="menuState.position"
+        anchorRect="menuState.anchorRect"
         menuItems="menuState.menuItems"
         maxHeight="menuMaxHeight"
         onClose="() => this.closeMenu()"

src/components/figures/figure/figure.ts

@@ -2,15 +2,14 @@ import { Component, onWillUnmount, useEffect, useRef, useState } from "@odoo/owl
 import {
   ComponentsImportance,
   FIGURE_BORDER_COLOR,
-  MENU_WIDTH,
   SELECTION_BORDER_COLOR,
 } from "../../../constants";
 import { figureRegistry } from "../../../registries/index";
 import {
   CSSProperties,
-  DOMCoordinates,
   Figure,
   Pixel,
+  Rect,
   ResizeDirection,
   SpreadsheetChildEnv,
   UID,
@@ -134,7 +133,7 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
     onClickAnchor: () => {},
   };
 
-  private menuState: MenuState = useState({ isOpen: false, position: null, menuItems: [] });
+  private menuState: MenuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
 
   private figureRef = useRef("figure");
   private menuButtonRef = useRef("menuButton");
@@ -281,25 +280,16 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
 
   onContextMenu(ev: MouseEvent) {
     if (this.env.isDashboard()) return;
-    const position = {
-      x: ev.clientX,
-      y: ev.clientY,
-    };
-    this.openContextMenu(position);
+    this.openContextMenu({ x: ev.clientX, y: ev.clientY, width: 0, height: 0 });
   }
 
   showMenu() {
-    const { x, y, width } = this.menuButtonRect;
-    const menuPosition = {
-      x: x >= MENU_WIDTH ? x - MENU_WIDTH : x + width,
-      y: y,
-    };
-    this.openContextMenu(menuPosition);
+    this.openContextMenu(this.menuButtonRect);
   }
 
-  private openContextMenu(position: DOMCoordinates) {
+  private openContextMenu(anchorRect: Rect) {
     this.menuState.isOpen = true;
-    this.menuState.position = position;
+    this.menuState.anchorRect = anchorRect;
     this.menuState.menuItems = figureRegistry
       .get(this.props.figure.tag)
       .menuBuilder(this.props.figure.id, this.props.onFigureDeleted, this.env);

src/components/figures/figure/figure.xml

@@ -28,7 +28,7 @@
           </div>
           <Menu
             t-if="menuState.isOpen"
-            position="menuState.position"
+            anchorRect="menuState.anchorRect"
             menuItems="menuState.menuItems"
             onClose="() => this.menuState.isOpen=false"
           />

src/components/grid/grid.ts

@@ -153,7 +153,7 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
     this.highlightStore = useStore(HighlightStore);
     this.menuState = useState({
       isOpen: false,
-      position: null,
+      anchorRect: null,
       menuItems: [],
     });
     this.gridRef = useRef("grid");
@@ -593,7 +593,7 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
       this.cellPopovers.close();
     }
     this.menuState.isOpen = true;
-    this.menuState.position = { x, y };
+    this.menuState.anchorRect = { x, y, width: 0, height: 0 };
     this.menuState.menuItems = registries[type].getMenuItems();
   }
 

src/components/grid/grid.xml

@@ -54,7 +54,7 @@
       <Menu
         t-if="menuState.isOpen"
         menuItems="menuState.menuItems"
-        position="menuState.position"
+        anchorRect="menuState.anchorRect"
         onClose="() => this.closeMenu()"
       />
       <t t-foreach="staticTables" t-as="table" t-key="table.id">

src/components/header_group/header_group_container.ts

@@ -44,7 +44,7 @@ export class HeaderGroupContainer extends Component<Props, SpreadsheetChildEnv>
   };
   static components = { RowGroup, ColGroup, Menu };
 
-  menu: MenuState = useState({ isOpen: false, position: null, menuItems: [] });
+  menu: MenuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
 
   getLayerOffset(layerIndex: number): number {
     return layerIndex * GROUP_LAYER_WIDTH;
@@ -59,13 +59,13 @@ export class HeaderGroupContainer extends Component<Props, SpreadsheetChildEnv>
 
   openContextMenu(position: DOMCoordinates, menuItems: Action[]) {
     this.menu.isOpen = true;
-    this.menu.position = position;
+    this.menu.anchorRect = { ...position, width: 0, height: 0 };
     this.menu.menuItems = menuItems;
   }
 
   closeMenu() {
     this.menu.isOpen = false;
-    this.menu.position = null;
+    this.menu.anchorRect = null;
     this.menu.menuItems = [];
   }
 

src/components/header_group/header_group_container.xml

@@ -61,7 +61,7 @@
       <Menu
         t-if="menu.isOpen"
         menuItems="menu.menuItems"
-        position="menu.position"
+        anchorRect="menu.anchorRect"
         onClose.bind="this.closeMenu"
       />
     </div>

src/components/link/link_editor/link_editor.ts

@@ -3,14 +3,12 @@ import { markdownLink } from "../../../helpers";
 import { detectLink, urlRepresentation } from "../../../helpers/links";
 import { canonicalizeNumberContent } from "../../../helpers/locale";
 import { linkMenuRegistry } from "../../../registries/menus/link_menu_registry";
-import { DOMCoordinates, Link, Position, SpreadsheetChildEnv } from "../../../types";
+import { Link, Position, SpreadsheetChildEnv } from "../../../types";
 import { CellPopoverComponent, PopoverBuilders } from "../../../types/cell_popovers";
 import { css } from "../../helpers/css";
 import { useAbsoluteBoundingRect } from "../../helpers/position_hook";
 import { Menu } from "../../menu/menu";
 
-const MENU_OFFSET_X = 320;
-const MENU_OFFSET_Y = 100;
 const PADDING = 12;
 const LINK_EDITOR_WIDTH = 340 + 2 * PADDING;
 
@@ -84,8 +82,8 @@ export class LinkEditor extends Component<LinkEditorProps, SpreadsheetChildEnv>
   private menu = useState({
     isOpen: false,
   });
-  private linkEditorRef = useRef("linkEditor");
-  private position: DOMCoordinates = useAbsoluteBoundingRect(this.linkEditorRef);
+  private linkEditorMenuButtonRef = useRef("linkEditorMenuButton");
+  menuButtonRect = useAbsoluteBoundingRect(this.linkEditorMenuButtonRef);
   urlInput = useRef("urlInput");
 
   setup() {
@@ -110,13 +108,6 @@ export class LinkEditor extends Component<LinkEditorProps, SpreadsheetChildEnv>
     };
   }
 
-  get menuPosition(): DOMCoordinates {
-    return {
-      x: this.position.x + MENU_OFFSET_X - PADDING - 2,
-      y: this.position.y + MENU_OFFSET_Y,
-    };
-  }
-
   onSpecialLink(ev: CustomEvent<string>) {
     const { detail: markdownLink } = ev;
     const link = detectLink(markdownLink);

src/components/link/link_editor/link_editor.xml

@@ -3,8 +3,7 @@
     <div
       class="o-link-editor"
       t-on-click.stop="() => this.menu.isOpen=false"
-      t-on-keydown="onKeyDown"
-      t-ref="linkEditor">
+      t-on-keydown="onKeyDown">
       <div class="o-section">
         <div class="o-section-title">Text</div>
         <div class="d-flex">
@@ -41,14 +40,18 @@
           <button t-if="link.url" t-on-click="removeLink" class="o-remove-url o-button-icon">
             ✖
           </button>
-          <button t-if="!link.url" t-on-click.stop="openMenu" class="o-special-link o-button-icon">
+          <button
+            t-if="!link.url"
+            t-on-click.stop="openMenu"
+            class="o-special-link o-button-icon"
+            t-ref="linkEditorMenuButton">
             <t t-call="o-spreadsheet-Icon.LIST"/>
           </button>
         </div>
       </div>
       <Menu
         t-if="menu.isOpen"
-        position="menuPosition"
+        anchorRect="menuButtonRect"
         menuItems="menuItems"
         onMenuClicked="(ev) => this.onSpecialLink(ev)"
         onClose="() => this.menu.isOpen=false"

src/components/menu/menu.ts

@@ -18,7 +18,8 @@ import {
   MENU_VERTICAL_PADDING,
   MENU_WIDTH,
 } from "../../constants";
-import { DOMCoordinates, MenuMouseEvent, Pixel, SpreadsheetChildEnv, UID } from "../../types";
+import { DOMCoordinates, MenuMouseEvent, Pixel, Rect, SpreadsheetChildEnv, UID } from "../../types";
+import { PopoverPropsPosition } from "../../types/cell_popovers";
 import { css, cssPropertiesToCss } from "../helpers/css";
 import { getOpenedMenus, isChildEvent, isMiddleClickOrCtrlClick } from "../helpers/dom_helpers";
 import { useAbsoluteBoundingRect } from "../helpers/position_hook";
@@ -81,7 +82,8 @@ type MenuItemOrSeparator = Action | "separator";
 const TIMEOUT_DELAY = 250;
 
 interface Props {
-  position: DOMCoordinates;
+  anchorRect: Rect;
+  popoverPositioning: PopoverPropsPosition;
   menuItems: Action[];
   depth: number;
   maxHeight?: Pixel;
@@ -95,7 +97,7 @@ interface Props {
 export interface MenuState {
   isOpen: boolean;
   parentMenu?: Action;
-  position: null | DOMCoordinates;
+  anchorRect: null | Rect;
   scrollOffset?: Pixel;
   menuItems: Action[];
   isHoveringChild?: boolean;
@@ -104,7 +106,8 @@ export interface MenuState {
 export class Menu extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-Menu";
   static props = {
-    position: Object,
+    anchorRect: Object,
+    popoverPositioning: { type: String, optional: true },
     menuItems: Array,
     depth: { type: Number, optional: true },
     maxHeight: { type: Number, optional: true },
@@ -118,10 +121,11 @@ export class Menu extends Component<Props, SpreadsheetChildEnv> {
   static components = { Menu, Popover };
   static defaultProps = {
     depth: 1,
+    popoverPositioning: "TopRight",
   };
   private subMenu: MenuState = useState({
     isOpen: false,
-    position: null,
+    anchorRect: null,
     scrollOffset: 0,
     menuItems: [],
     isHoveringChild: false,
@@ -170,22 +174,22 @@ export class Menu extends Component<Props, SpreadsheetChildEnv> {
     return menuItemsAndSeparators;
   }
 
-  get subMenuPosition(): DOMCoordinates {
-    const position = Object.assign({}, this.subMenu.position);
-    position.y -= this.subMenu.scrollOffset || 0;
-    return position;
+  get subMenuAnchorRect(): Rect {
+    const anchorRect = Object.assign({}, this.subMenu.anchorRect);
+    anchorRect.y -= this.subMenu.scrollOffset || 0;
+    return anchorRect;
   }
 
   get popoverProps(): PopoverProps {
     const isRoot = this.props.depth === 1;
     return {
       anchorRect: {
-        x: this.props.position.x,
-        y: this.props.position.y,
-        width: isRoot ? 0 : this.props.width || MENU_WIDTH,
-        height: isRoot ? 0 : MENU_ITEM_HEIGHT,
+        x: this.props.anchorRect.x,
+        y: this.props.anchorRect.y,
+        width: isRoot ? this.props.anchorRect.width : this.props.width || MENU_WIDTH,
+        height: isRoot ? this.props.anchorRect.height : MENU_ITEM_HEIGHT,
       },
-      positioning: "TopRight",
+      positioning: this.props.popoverPositioning,
       verticalOffset: isRoot ? 0 : MENU_VERTICAL_PADDING,
       onPopoverHidden: () => this.closeSubMenu(),
       onPopoverMoved: () => this.closeSubMenu(),
@@ -269,9 +273,11 @@ export class Menu extends Component<Props, SpreadsheetChildEnv> {
     }
     const y = parentMenuEl.getBoundingClientRect().top;
 
-    this.subMenu.position = {
+    this.subMenu.anchorRect = {
       x: this.position.x,
       y: y - (this.subMenu.scrollOffset || 0),
+      width: this.props.width || MENU_WIDTH,
+      height: MENU_ITEM_HEIGHT,
     };
     this.subMenu.menuItems = menu.children(this.env);
     this.subMenu.isOpen = true;

src/components/menu/menu.xml

@@ -60,7 +60,7 @@
       <Menu
         t-if="subMenu.isOpen"
         t-key="subMenu.parentMenu.id"
-        position="subMenuPosition"
+        anchorRect="subMenuAnchorRect"
         menuItems="subMenu.menuItems"
         depth="props.depth + 1"
         maxHeight="props.maxHeight"

src/components/side_panel/components/cog_wheel_menu/cog_wheel_menu.ts

@@ -2,6 +2,7 @@ import { Component, useRef, useState } from "@odoo/owl";
 import { ActionSpec, createActions } from "../../../../actions/action";
 import { MenuMouseEvent } from "../../../../types";
 import { SpreadsheetChildEnv } from "../../../../types/env";
+import { getBoundingRectAsPOJO } from "../../../helpers/dom_helpers";
 import { Menu, MenuState } from "../../../menu/menu";
 
 interface Props {
@@ -16,7 +17,7 @@ export class CogWheelMenu extends Component<Props, SpreadsheetChildEnv> {
   };
 
   private buttonRef = useRef("button");
-  private menuState: MenuState = useState({ isOpen: false, position: null, menuItems: [] });
+  private menuState: MenuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
 
   private menuId = this.env.model.uuidGenerator.uuidv4();
 
@@ -25,9 +26,8 @@ export class CogWheelMenu extends Component<Props, SpreadsheetChildEnv> {
       return;
     }
 
-    const { x, y } = this.buttonRef.el!.getBoundingClientRect();
     this.menuState.isOpen = !this.menuState.isOpen;
-    this.menuState.position = { x, y };
+    this.menuState.anchorRect = getBoundingRectAsPOJO(this.buttonRef.el!);
     this.menuState.menuItems = createActions(this.props.items);
   }
 }

src/components/side_panel/components/cog_wheel_menu/cog_wheel_menu.xml

@@ -8,7 +8,7 @@
     <Menu
       t-if="menuState.isOpen"
       menuId="menuId"
-      position="menuState.position"
+      anchorRect="menuState.anchorRect"
       menuItems="menuState.menuItems"
       onClose="() => this.menuState.isOpen=false"
       width="160"

src/components/side_panel/select_menu/select_menu.ts

@@ -1,7 +1,7 @@
 import { Component, useRef, useState } from "@odoo/owl";
 import { Action } from "../../../actions/action";
 import { UuidGenerator } from "../../../helpers";
-import { DOMCoordinates, MenuMouseEvent, SpreadsheetChildEnv } from "../../../types";
+import { MenuMouseEvent, Rect, SpreadsheetChildEnv } from "../../../types";
 import { useAbsoluteBoundingRect } from "../../helpers/position_hook";
 import { Menu } from "../../menu/menu";
 
@@ -45,10 +45,7 @@ export class SelectMenu extends Component<SelectMenuProps, SpreadsheetChildEnv>
     this.state.isMenuOpen = false;
   }
 
-  get menuPosition(): DOMCoordinates {
-    return {
-      x: this.selectRect.x,
-      y: this.selectRect.y + this.selectRect.height,
-    };
+  get menuAnchorRect(): Rect {
+    return this.selectRect;
   }
 }