Skip to main content

ToolsComponent

🍱 Keeping things tidy​

BIM applications are complex and can have a lot of different functionalities. Of course, this means that they can have a lot of components. Keeping your project tidy and clean can be a challenge if you need certain components in different places of your app. Luckily, there's an easier way of handling this: the Tools Component! This component has two purposes:

  • Making your components available anywhere in your application.
  • Getting your tools from That Open Platform.

✨ Components anywhere​

First, we will create a very simple tool: a simple grid component. It's not very exciting, but we don't want to distract you with the fanciness of the component! This same workflow will work for any other component that you use. First, let's instantiate it:

const grid = new OBC.SimpleGrid(components);

Now, it is likely that your application will have many menus. What if you need access to this component In many places? For example, you may have a menu that controls the color and size of the grid, and other menus that goes into floor plan navigation mode and need to hide the grid. To solve this situation, you just need to add the SimpleGrid component to the ToolComponent. That's it!

components.tools.add(grid);

Now, getting the SimpleGrid component back is as easy as using the get() method and passing the name of the component as an argument. That's it! 👇

const savedGrid = components.tools.get("SimpleGrid");
Clean code, clean memory 🧹

The tools component also keeps track of the memory usage of the components and automatically cleans it for you when you call components.dispose(), so that you don't have to.

⛅ Components from the cloud​

Maybe you have uploaded some components to That Open Platform and want to easily share them with someone. Or maybe you have got some nice components in the Marketplace and want to use them in your app. Either way, using these components is a piece of cake with ToolComponent!

What's That Open Platform?

That Open Platform is a place where people can share, buy and sell their components for free. You can learn more about how to get started right here.

First, you will need a token to communicate with That Open Platform and the ID of the tool you want to 👇

const token =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1IjoiNjQzZmFiN2NkM2QwMmJhOWY1NjA5ZTVlIiwiYSI6IjY0M2ZhYzMwZDcyMDZiNTU2ZGU4YTA4OCJ9.TAyzrhqOfJ-UCy35T3w5-wInF4NQ9grOlSD1VKlg0tM";
const id = "643fe71a18ab56057501e8be";

Next, you can get the component with the use command. That will give you the class of the component, which you can easily instantiate like a normal class. That's all it takes!

What about types?

If you want to get all the types and intellisense docs for the component, check this out!

const CustomComponent = await components.tools.use(token, id);
const component = new CustomComponent();
component.greet();

Fantastic work! 🎉🎉🎉 Now you know how to keep your components tidy and how to get them from the cloud. Another step forward in your journey to build your own BIM software. 🥳 Don't forget to check out That Open Platform if you haven't already!