# Add plugins on windows
In this second tutorials, we will add 3 plugins to our custom windows layout.
TIP
This tutorial is the second step of the tutorials. The code to make the windows layout will not be described here. To learn how to create the windows layout, please go to the first step of the tutorials.
# Step by step
# Create components
We first create 3 simple Vuejs 2.x components (opens new window):
const component1 = {
name: "Component_1",
template: "<div>Component 1</div>",
};
const component2 = {
name: "Component_2",
template: "<div>Component 2</div>",
};
const component3 = {
name: "Component_3",
template: "<div>Component 3</div>",
};
These components have no logic for the moment, only a template indicating their names.
# Create and register plugins
Next, we need to register plugins with the previously created components.
const plugin1 = {
name: "plugin1",
component: component1,
};
const plugin2 = {
name: "plugin2",
component: component2,
};
const plugin3 = {
name: "plugin3",
component: component3,
};
viewer.registerPlugin(plugin1);
viewer.registerPlugin(plugin2);
viewer.registerPlugin(plugin3);
We want our plugins to be displayed differently on windows, so we will customise their configurations.
"plugin1" and "plugin2" will be displayed as window
main content. No need to add more plugin configuration but we will add just a little bit of style on their components to display the text at the center of the windows:
const component1 = {
name: "Component_1",
template: `
<div
style="height: 100%;
display: flex;
justify-content:center;
align-items:center;"
>
Component 1
</div>`,
};
// The same for component2
"plugin3" will be displayed as right window button. We need to update its configuration:
const plugin3 = {
name: "plugin3",
component: component3,
button: {
position: "right",
content: "simple",
keepOpen: true,
},
};
With this configuration, the plugin does not close if the user click away from it, and its style is a small rectangle that appear next to the button.
# Add plugins to windows
We finally add plugins to windows. Let's update the code of the previous tutorial to add our plugins into "window1" and "window2".
const window1 = {
name: "window1",
plugins: ["plugin1"],
};
const window2 = {
name: "window2",
plugins: ["plugin2", "plugin3"],
};
WARNING
This code must be placed after plugins registration.
TIP
It is also possible to add a button plugin into the "viewer3d" window.
To do so you can use the addToWindows
option when registering a plugin:
const viewer = makeBIMDataViewer({ /* viewer config */ });
viewer.registerPlugin({
name: "buttonPlugin",
component: {
name: "ButtonPluginComponent",
template: "<div>Hello World !</div>"
},
button: {
position: "right",
content: "simple",
},
addToWindows: [ "3d" ] // <-- Here is the trick
});
viewer.mount("#viewerId", "3d");
# Resulting viewer
# 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",
template: `
<div
style="height: 100%;
display: flex;
justify-content:center;
align-items:center;"
>
Component 1
</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);