Update ContextMenu to fire show and hide events

Author: aratcliffe

examples/basic/index.js

@@ -8,6 +8,14 @@ import {
 
 mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;
 
+const hint = document.getElementById("hint");
+
+function dismissHint() {
+  if (hint && !hint.classList.contains("hidden")) {
+    hint.classList.add("hidden");
+  }
+}
+
 const map = new mapboxgl.Map({
   container: "map",
   center: [-122.4194, 37.7749],
@@ -57,14 +65,6 @@ function createCommonItems() {
   ];
 }
 
-// Dismiss hint on first right-click
-const hint = document.getElementById("hint");
-map.on("contextmenu", () => {
-  if (hint && !hint.classList.contains("hidden")) {
-    hint.classList.add("hidden");
-  }
-});
-
 map.on("load", () => {
   // General context menu (anywhere on the map)
   const contextMenu = new MapboxContextMenu({ width: 200 });
@@ -73,6 +73,7 @@ map.on("load", () => {
     contextMenu.addItem(item);
   }
 
+  contextMenu.on("show", dismissHint);
   contextMenu.addTo(map);
 
   // Building-specific context menu
@@ -97,5 +98,6 @@ map.on("load", () => {
 
   buildingMenu.addItem(buildingInfoItem);
 
+  buildingMenu.on("show", dismissHint);
   buildingMenu.addTo(map, { featuresetId: "buildings", importId: "basemap" });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-contextmenu",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A contextmenu plugin for Mapbox GL JS",
   "type": "module",
   "main": "./dist/index.cjs",

src/components/ContextMenu/ContextMenu.ts

@@ -1,4 +1,5 @@
 import { ContextMenuContext, MenuItem } from "../../types";
+import { Evented } from "../../util/evented";
 import { isFocusable } from "../../util/focusable";
 import ContextMenuItem from "../ContextMenuItem/ContextMenuItem";
 import ContextMenuSubmenu from "../ContextMenuSubmenu/ContextMenuSubmenu";
@@ -16,7 +17,14 @@ export interface ContextMenuOptions {
   width?: string | number;
 }
 
-export default class ContextMenu {
+export type ContextMenuEvents = {
+  /** Fired when the context menu is shown. */
+  show: void;
+  /** Fired when the context menu is hidden. */
+  hide: void;
+};
+
+export default class ContextMenu extends Evented<ContextMenuEvents> {
   protected _items: MenuItem[] = [];
   protected _className: string;
   protected _theme: ContextMenuTheme;
@@ -31,6 +39,7 @@ export default class ContextMenu {
   private _onEscapeLeft: (() => void) | null = null;
 
   constructor(options?: ContextMenuOptions) {
+    super();
     this._className = options?.className
       ? `${styles.menu} ${options.className}`
       : styles.menu;
@@ -218,6 +227,8 @@ export default class ContextMenu {
       // Check if mouse is already over a menu item (menu appeared under cursor)
       this._focusItemUnderMouse();
     }
+
+    this.fire("show", undefined as void);
   }
 
   /**
@@ -248,6 +259,8 @@ export default class ContextMenu {
         item.closeSubmenu();
       }
     });
+
+    this.fire("hide", undefined as void);
   }
 
   private _focusItem(index: number): void {