# $viewer
The $viewer
object can be accessed using this
on a component, or as the first parameter of the startupScript method. This object allows to interact with the viewer core. Here is an overview of what it contains:
$viewer │ contextMenu │ state | getLocalContexts(windowName): LocalContext[]; │ └─── api │ │ apiUrl: string; │ │ cloudId: number; │ │ projectId: number; │ │ accessToken: string; │ │ apiClient: ApiClient; │ │ getRawElements(ifcId): RawElements; │ └─── localContext │ │ getPlugin(pluginName): Plugin; │ │ loading: boolean; │ │ incrementSpinnerProcesses(): void; │ │ decrementSpinnerProcesses(): void; │ │ registerShortcut(shortcut): void; │ │ unregisterShortcut(shortcutName): void; │ │ hub: Hub; │ │ modals: ModalManager; │ └─── globalContext │ │ getPlugins(pluginName): Plugin[]; │ │ loading: boolean; │ │ incrementSpinnerProcesses(): void; │ │ decrementSpinnerProcesses(): void; │ │ registerShortcut(shortcut): void; │ │ unregisterShortcut(shortcutName): void; │ │ hub: Hub; │ │ modals: ModalManager;
# api
The $viewer.api
object contains all informations needed to communicate with the BIMData API.
Example: How to get an element from the API
const ifcId = 4;
const uuid = "my element uuid";
const element = await new this.$viewer.api.apiClient.IfcApi().getElement(
this.$viewer.api.cloudId,
ifcId,
this.$viewer.api.projectId,
uuid
);
# getRawElements
getRawElement()
is a special method. It retrieves all objects, their properties, classifications, systems and layers.
For performance reasons, the API sends a formatted JSON that needs to be rebuilt in order to be used in javascript.
If you want to parse data to filter objects, you probably want to use this method.
const ifcId = 4;
const elements = await new this.$viewer.api.getRawElements(ifcId);
The result is an object where keys are uuids and value are the element data formatted like the API response (opens new window)
# global and local contexts
The globalContext
and the localContext
objects are related to windows and the viewer UI in general. The globalContext
is the whole UI while the localContext
is the window where the code is executed.
These two objects share a similar API except for the getPlugin(pluginName)
and getPlugins(pluginName)
methods. A plugin must have a unique name in a window, but many plugins with the same name can be instanciated in the viewer if they belong to different windows. That is why globalContext.getPlugins(pluginName)
returns an Array of plugins, while localContext.getPlugin(pluginName)
returns a simple plugin (if it exists).
# Spinners
You can start a spinner to indicate to the user that he needs to wait. You can choose to add a spinner on the whole UI or just the current window.
// A spinner on the whole UI
this.$viewer.localContext.incrementSpinnerProcesses();
// A spinner on the current window
this.$viewer.globalContext.incrementSpinnerProcesses();
Global context spinner
Local context spinner
To stop spinners:
this.$viewer.localContext.decrementSpinnerProcesses();
this.$viewer.globalContext.decrementSpinnerProcesses();
The loading
property on the globalContext
and the localContext
objects indicates if a spinner is running on the related context.
# Modals
In a similar way, you can choose to show a modal on the whole UI or just the current window using modal managers available on localContext.modals
and globalContext.modals
.
Modal managers allow to display modals. Modals are queue so if more than one modals are sent to the same modal manager, they will be displayed in order.
To open a modal, call pushModal
on a modal manager.
Property | Description |
---|---|
pushModal(component, props) | Add a modal to the queue. component is a valid vuejs component. props is the component props values. |
this.$viewer.localContext.modals.pushModal(MyModal);
To close a modal, click outside of its content or emit the "close" event inside the modal component.
this.$emit("close");
# Shortcuts
You can also register a shortcut that depends on the context. The current context is the window where the mouse is hover. If two shortcuts are registered on the same key, one on the localContext
, the other on the globalContext
, the localContext
shortcut will be executed on keystroke if the mouse is hovering the window, else, it will be the globalContext
one (the mouse is hovering another window or the header).
A shortcut object have the following interface:
Property | Type | Description |
---|---|---|
name | String | Required. A name to identify the shortcut. |
key | String | Required. Pressing this key will execute the shortcut (Case insensitive). key may be many things (opens new window). |
execute | Function | Required. The function that will be executed when the key is pressed. |
ctrlKey | Boolean | Default to false. A boolean indicating that the ctrl key must be pressed in addition to the key to trigger the shortcut. (ctrl and meta keys are treated as the same key) |
shiftKey | Boolean | Default to false. A boolean indicating that the shift key must be pressed in addition to the key to trigger the shortcut. |
altKey | Boolean | Default to false. A boolean indicating that the alt key must be pressed in addition to the key to trigger the shortcut. |
this.$viewer.localContext.registerShortcut({
name: "log",
key: "l",
ctrlKey: true,
execute: () => console.log("Log from local shortcut."),
});
this.$viewer.globalContext.registerShortcut({
name: "log",
key: "l",
ctrlKey: true,
execute: () => console.log("Log from global shortcut."),
});
Shortcuts can be unregistered calling the unregisterShortcut
with the shortcut name.
this.$viewer.globalContext.unregisterShortcut("log");
# Events
Some default events are sent to the local and global context.
Name | Payload | Description |
---|---|---|
plugin-created | { pluginName: string , plugin: Object } | Sent when a plugin is created. |
plugin-destroyed | { pluginName: string , plugin: Object } | Sent when a plugin is destroyed. |
plugin-menu-open | plugin: Object | Sent when a plugin as button is openned |
plugin-menu-close | plugin: Object | Sent when a plugin as button is closed. |
Global context only | ||
window-open | window: Object | Sent when a window is selected on the window selector, displayed when a window is splitted. |
window-close | window: Object | Sent when a window is closed. |
# utils
This objects is used to store utilities like the getRawElements(ifcId)
method.