fix contextmenu wrapping and submenu displaying bugs

src/mapml.css

@@ -258,7 +258,8 @@
   background-color: #fff;
   cursor: default;
   position: absolute;
-  width: 160px;
+  width: fit-content;
+  display: inline-block;
   z-index: 10001;
 }
 
@@ -272,6 +273,7 @@
   border-bottom: 1px solid transparent;
   cursor: default;
   width: 100%;
+  display: block;
 }
 
 .mapml-contextmenu button.mapml-contextmenu-item.over {
@@ -288,6 +290,7 @@
 .mapml-contextmenu.mapml-submenu {
   width: 80px;
   margin-bottom: -2rem;
+  width: fit-content;
 }
 
 @supports (contain: layout) {

src/mapml/handlers/ContextMenu.js

@@ -119,22 +119,22 @@ export var ContextMenu = L.Handler.extend({
     for (let i = 0; i < 6; i++) {
       this._items[i].el = this._createItem(this._container, this._items[i]);
     }
-
+    
     this._coordMenu = L.DomUtil.create("div", "mapml-contextmenu mapml-submenu", this._container);
     this._coordMenu.id = "mapml-copy-submenu";
     this._coordMenu.setAttribute('hidden', '');
-
+    
     this._clickEvent = null;
-
+    
     for(let i =0;i<this._items[5].submenu.length;i++){
       this._createItem(this._coordMenu,this._items[5].submenu[i],i);
     }
-
+    
     this._items[6].el = this._createItem(this._container, this._items[6]);
     this._items[7].el = this._createItem(this._container, this._items[7]);
     this._items[8].el = this._createItem(this._container, this._items[8]);
     this._items[9].el = this._createItem(this._container, this._items[9]);
-
+    
     this._layerMenu = L.DomUtil.create("div", "mapml-contextmenu mapml-layer-menu", map._container);
     this._layerMenu.setAttribute('hidden', '');
     for (let i = 0; i < this._layerItems.length; i++) {
@@ -449,10 +449,13 @@ export var ContextMenu = L.Handler.extend({
       elem = (elem.className === "mapml-layer-extent") ? elem.closest("fieldset").parentNode.parentNode.parentNode.querySelector("span") : elem.querySelector("span");
       if(!elem.layer.validProjection) return;
       this._layerClicked = elem;
+      this._layerMenu.removeAttribute('hidden');
       this._showAtPoint(e.containerPoint, e, this._layerMenu);
     } else if(elem.classList.contains("leaflet-container") || elem.classList.contains("mapml-debug-extent") ||
-      elem.tagName === "path") {
+    elem.tagName === "path") {
       this._layerClicked = undefined;
+      // the 'hidden' attribute must be removed before any attempt to get the size of container
+      this._container.removeAttribute('hidden');
       this._showAtPoint(e.containerPoint, e, this._container);
     }
     if(e.originalEvent.button === 0 || e.originalEvent.button === -1){
@@ -646,17 +649,23 @@ export var ContextMenu = L.Handler.extend({
     copyEl.setAttribute("aria-expanded","true");
     menu.removeAttribute('hidden');
 
-    if (click.containerPoint.x + 160 + 80 > mapSize.x) {
+    const menuWidth = this._container.offsetWidth,
+          menuHeight = this._container.offsetHeight,
+          submenuWidth = menu.offsetWidth;
+    if (click.containerPoint.x + menuWidth + submenuWidth > mapSize.x) {
       menu.style.left = 'auto';
-      menu.style.right = 160 + 'px';
+      menu.style.right = menuWidth + 'px';
     } else {
-      menu.style.left = 160 + 'px';
+      menu.style.left = menuWidth + 'px';
       menu.style.right = 'auto';
     }
 
-    if (click.containerPoint.y + 160 > mapSize.y) {
+    // height difference between the main contextmenu and submenu
+    const heightDiff = 73;
+    if (click.containerPoint.y + menuHeight + heightDiff > mapSize.y) {
       menu.style.top = 'auto';
-      menu.style.bottom = 20 + 'px';
+      // to make submenu show completely when clicking at the bottom of the map
+      menu.style.bottom = 32 + 'px';
     } else {
       menu.style.top = 100 + 'px';
       menu.style.bottom = 'auto';
@@ -665,8 +674,9 @@ export var ContextMenu = L.Handler.extend({
   },
 
   _hideCoordMenu: function(e){
-    if(e.srcElement.parentElement.classList.contains("mapml-submenu") ||
-        e.srcElement.innerText === (M.options.locale.cmCopyCoords + " (C)"))return;
+    if(!e.relatedTarget || !e.relatedTarget.parentElement || 
+        e.relatedTarget.parentElement.classList.contains("mapml-submenu") ||
+        e.relatedTarget.classList.contains("mapml-submenu"))return;
     let menu = this._coordMenu, copyEl = this._items[5].el.el;
     copyEl.setAttribute("aria-expanded","false");
     menu.setAttribute('hidden', '');

test/e2e/core/mapContextMenu.test.js

@@ -305,4 +305,37 @@ test.describe("Playwright Map Context Menu Tests", () => {
     );
     expect(layerCount).toEqual(5);
   });
+
+  test("Context menu, click at margin and move mouse out when submenu is visible", async () => {
+    // click at the right-bottom margin of map
+    await page.mouse.wheel(0, 200);
+    await page.waitForTimeout(200);
+    await page.click("body > map", {
+      button: 'right',
+      position: {x: 495, y: 580}
+    });
+    const contextMenu = await page.locator('div > div.mapml-contextmenu').first();
+    expect(await contextMenu.isVisible()).toBeTruthy();
+    const mapSize = await page.$eval(
+      "body > map",
+      (map) => { return {x: map.width, y: map.height} }
+    );
+    const contextMenuSize = await page.$eval(
+      "div > div.mapml-contextmenu",
+      (menu) => {
+        return {
+          x: menu.offsetWidth + menu.getBoundingClientRect().left,
+          y: menu.offsetHeight + menu.getBoundingClientRect().top
+        }
+      }
+    );
+    expect(contextMenuSize.x <= mapSize.x && contextMenuSize.y <= mapSize.y).toBeTruthy();
+
+    // move the mouse from "copy" to another button in the main contextmenu
+    await contextMenu.hover();
+    const submenu = await page.locator('div > div#mapml-copy-submenu').first();
+    expect(await submenu.isVisible()).toBeTruthy();
+    await page.hover("div > div.mapml-contextmenu > button:nth-child(5)");
+    expect(await submenu.isHidden()).toBeTruthy();
+  });
 });