ContextMenuWidget (Experimental)
Displays a context menu on right-click events with customizable menu items based on picked objects.
import {Deck} from '@deck.gl/core';
import {_ContextMenuWidget as ContextMenuWidget} from '@deck.gl/widgets';
const deck = new Deck({
  widgets: [
    new ContextMenuWidget({
      getMenuItems: (info, widget) => {
        if (info.object) {
          const name = info.object.properties.name;
          return [
            {key: 'name', label: name},
            {key: 'delete', label: 'Delete'}
          ];
        }
        return [{label: 'Add Point', key: 'add'}];
      },
      onMenuItemSelected: (key, pickInfo) => {
        if (key === 'add') addPoint(pickInfo);
        if (key === 'delete') deletePoint(pickInfo);
      }
    })
  ]
});
Types
ContextMenuWidgetProps
The ContextMenuWidget accepts the generic WidgetProps and:
- getMenuItems(function) - Required. Function that returns menu items based on the picked object. Receives- PickingInfoand returns an array of- ContextWidgetMenuItemobjects or- null.
- onMenuItemSelected(function, optional) - Callback invoked when a menu item is selected. Receives the selected item key and- PickingInfo.
- visible(boolean, default- false) - Controls visibility of the context menu.
- position(object, default- {x: 0, y: 0}) - Screen position where the menu appears.
- menuItems(array, default- []) - Current menu items to display.
ContextWidgetMenuItem
Menu item definition:
- label(string) - Display text for the menu item
- key(string) - Unique identifier for the menu item
Behavior
- Right-click events trigger the context menu
- Menu items are dynamically generated based on what was clicked
- Click elsewhere to hide the menu
- Menu automatically positions itself at the cursor location