# Shortcuts
In this third tutorial, we will update the component 1 of the precedent examples to show how to register a global shortcut and a local shortcut. The local shortcut is executed only if the mouse is hovering the window1
(top right), while the global is executed everywhere.
TIP
A local context shortcut has priority over a gobal context shortcut registered on the same key. If you press the registered key hovering the window1
, only the local context shortcut is executed. The global context shortcut is executed on the rest of the UI, even the header if present.
# Step by step
# Register shortcuts
The main element of the new component we will create is this:
created() {
this.$viewer.globalContext.registerShortcut({
name: "message",
key: "m",
execute: () =>
(this.globalMessage = `"m" key pressed GLOBALLY`),
});
this.$viewer.localContext.registerShortcut({
name: "message",
key: "m",
execute: () => (this.localMessage = `"m" key pressed LOCALLY`),
});
},
This means when the component is created, it register a global and a local shortcuts on the key m.
# Complete component1
The rest of the code is used to display message on the UI when m keys are pressed. You can find the code described previously on the created component life cycle hook. See Vuejs component (opens new window) for more informations.
const component1 = {
name: "Component_1",
data() {
return {
globalMessage: null,
localMessage: null,
};
},
watch: {
globalMessage(value) {
if (value) {
setTimeout(() => (this.globalMessage = null), 2000);
}
},
localMessage(value) {
if (value) {
setTimeout(() => (this.localMessage = null), 2000);
}
},
},
created() {
this.$viewer.globalContext.registerShortcut({
name: "message",
key: "m",
execute: () => (this.globalMessage = `"m" key pressed GLOBALLY`),
});
this.$viewer.localContext.registerShortcut({
name: "message",
key: "m",
execute: () => (this.localMessage = `"m" key pressed LOCALLY`),
});
},
template: ` <div style="height: 100%; display: flex; justify-content:center; align-items:center;">
<div>
<div style="text-align:center;">
<p><b>Listen to global context shortcuts :</b></p>
<p>{{ globalMessage || "..." }}</p>
</div>
<hr>
<div style="text-align:center;">
<p><b>Listen to local context shortcuts :</b></p>
<p>{{ localMessage || "..." }}</p>
</div>
</div>
</div>`,
};
# Resulting viewer
Press the key m hovering the viewer on different areas.
# Complete code example
// Configure the viewer
const viewer = makeBIMDataViewer({
api: {
modelIds: [15097],
cloudId: 10344,
projectId: 237466,
accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
},
ui: {
version: false,
bimdataLogo: false,
menuVisible: false,
},
plugins: {
bcf: false,
fullscreen: false,
measure3d: false,
projection: false,
search: false,
section: false,
"structure-properties": false,
viewer3d: {
navCube: false,
help: false,
modelLoader: "hidden",
},
"viewer3d-parameters": false,
"window-split": false,
}
});
// Create components
const component1 = {
name: "Component_1",
data() {
return {
globalMessage: null,
localMessage: null,
};
},
watch: {
globalMessage(value) {
if (value) {
setTimeout(() => (this.globalMessage = null), 2000);
}
},
localMessage(value) {
if (value) {
setTimeout(() => (this.localMessage = null), 2000);
}
},
},
created() {
this.$viewer.globalContext.registerShortcut({
name: "message",
key: "m",
execute: () => (this.globalMessage = `"m" key pressed GLOBALLY`),
});
this.$viewer.localContext.registerShortcut({
name: "message",
key: "m",
execute: () => (this.localMessage = `"m" key pressed LOCALLY`),
});
},
template: ` <div style="height: 100%; display: flex; justify-content:center; align-items:center;">
<div>
<div style="text-align:center;">
<p><b>Listen to global context shortcuts :</b></p>
<p>{{ globalMessage || "..." }}</p>
</div>
<hr>
<div style="text-align:center;">
<p><b>Listen to local context shortcuts :</b></p>
<p>{{ localMessage || "..." }}</p>
</div>
</div>
</div>`,
};
const component2 = {
name: "Component_2",
template: `
<div
style="height: 100%;
display: flex;
justify-content:center;
align-items:center;"
>
Component 2
</div>`,
};
const component3 = {
name: "Component_3",
template: "<div>Component 3</div>",
};
// Create and register plugins
const plugin1 = {
name: "plugin1",
component: component1,
};
const plugin2 = {
name: "plugin2",
component: component2,
};
const plugin3 = {
name: "plugin3",
component: component3,
button: {
position: "right",
content: "simple",
keepOpen: true,
},
};
viewer.registerPlugin(plugin1);
viewer.registerPlugin(plugin2);
viewer.registerPlugin(plugin3);
// Create and register windows
const window1 = {
name: "window1",
plugins: ["plugin1"],
};
const window2 = {
name: "window2",
plugins: ["plugin2", "plugin3"],
};
viewer.registerWindow(window1);
viewer.registerWindow(window2);
// Mount custom layout
const customLayout = {
ratios: [40, 60],
children: [
"3d",
{
ratios: [50, 50],
direction: "column",
children: ["window1", "window2"],
},
],
};
viewer.mount("#viewerId", customLayout);