Context Menu | Documentation

The context menu is displayed after right clicking on the viewer. It displays commands that may depends on the contexts and can be customized.

The context menu can be accessed on the $viewer object:

$viewer.contextMenu;

# Interface

Property	Description
`preventDefault(): void`	Do not display registered commands when context menu opens.
`registerContextCommand(command: ContextMenuCommand): number`	Add command for the openning context menu. Returns the command id.
`registerCommand(command: ContextMenuCommand): number`	Add command on context menu, displayed if the predicate exists and returns true. Returns the command id.
`unregisterCommand(commandId: number): boolean`	Remove the command corresponding to the given id. Returns `true` if a command was removed, `false` otherwise.
`groupPositions: Object`	An object with `select`, `visibility` and `color` properties that represent the group positions of corresponding default commands.

# Command Interface

Property	Description
`label: string`	The text displayed on the menu.
`picto: string`	Usually a letter to show the associated shortcut.
`execute()`	The function to execute when the command is clicked.
`predicate()?`	An optionnal predicate function that is run when the context menu opens. The command is displayed if the function returns `true`.
`group?: number`	The group the command belongs to. Default to 0.
`position?: number`	The position where to display the command in its group. Default to 0.

# Default commands

The context menu is shipped with native default commands but they can be removed from the context menu commands and then added one by one if needed.

To remove default commands, use the makeBIMDataViewer configuration object:

makeBIMDataViewer({
  ui: {
    contextMenu: {
      defaultCommands: false,
    },
  },
});

Default commands can be found in the contextMenu object:

$viewer.contextMenu.defaultCommands.get("selectAll");

Ths defaultCommands object is a javascript Map (opens new window).

Here is a list of all available default commands:

Name	Description	Display condition	Group	Position
selectAll	Select all objects.	At least one object is not selected.	`select`	1
deselectAll	Select all selected objects.	At least one object is selected.	`select`	2
selectSimilar	Select all objects that share a common `type` with the unique selected object.	Exactly one object is selected.	`select`	3
reverseSelection	Deselect all selected objects and select the others.	At least one object is selected.	`select`	4
showAll	Show all hidden objects.	At least one object is not visible.	`visibility`	1
hide	Hide the selected objects.	At least one object is selected.	`visibility`	2
hideAll	Hide all visible objects.	At least one object is visible.	`visibility`	3
isolate	Isolate the selected objects.	At least one object is selected and none are xrayed	`visibility`	4
reintegrate	Un-isolate all objects.	At least one object is xrayed.	`visibility`	5
colorize	Colorize the selected objects.	At least one object is selected.	`color`	1

The command groups are displayed in ascending order according to the command group property with a separator between them. The commands in a group are displayed in ascending order corresponding to their position property.

It is possible to change the default group positions:

// To display select group related commands at the end
$viewer.contextMenu.groupPositions.select = Infinity;

The default value of the contextMenu.groupPositions properties are the following:

Property	Value
`select`	10
`visibility`	20
`color`	30

This means that adding a command without adding a group property will display it at the top of the context menu as the default group value is 0. Because default group values are not contiguous, you can display you custom group between the default ones.

# Examples

This examples are plugins or plugin components.

# Command with predicate

Description: The following plugin register a command using the startupScript method. The command is displayed on the context menu only if at least one element is selected. Once clicked, the selected objects are logged.

const MyPlugin = {
  name: "selection-log",
  startupScript($viewer) {

    const myCommand = {
      label: "Log selection",
      execute: () => console.log($viewer.state.selectedObjects),
      predicate: () => $viewer.state.selectedObjects.length > 0,
    };

    $viewer.contextMenu.registerCommand(myCommand);
  },
});

# Context command

Description: Right clicking on the button element clear default commands and add a custom command to the context menu. The command is called "Yo" and log "Yo !" on the console.

{
  methods: {
    onContextMenu() {
      this.$viewer.contextMenu.preventDefault();
      this.$viewer.contextMenu.registerContextCommand({
        label: "Yo",
        execute: () => console.log("Yo !"),
      });
    },
  },
  template: `
    <div>
      <button type="button" @click="onClick" @contextmenu="onContextMenu">Click me!</button>
    </div>`,
}

# Change defaults commands

Description: If default commands are removed from the context menu using the makeBIMDataViewer configuration object, it is possible to retreive them using the defaultCommands object. The following example add the selectAll default command on the context menu while requesting the context menu on the button.

{
  methods: {
    onContextMenu() {
      this.$viewer.contextMenu.registerCommand(
        $viewer.contextMenu.defaultCommands.get("selectAll")
      );
    },
  },
  template: `
    <div>
      <button type="button" @click="onClick" @contextmenu="onContextMenu">Click me!</button>
    </div>`,
}

← State Offline mode →

# Context Menu