# Context Menu
The context menu is displayed after right clicking on the viewer. It displays commands that may depends on the contexts and can be customized.
# Get the context menu
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 →