Documentation

# Overview

The main goal of the BIMData viewer is to display plugins that can interact with the state, the UI or other plugins. It is shipped with native ones like a 3d viewer, a 2d viewer, a spacial structure, a BCF manager and many others. These native plugins are designed to meet the basic needs of a user that want to interact with his models.

However, you may want to add your own features to the viewer. To do so, the BIMData viewer provides a rich API through plugins to let you implement your own ideas.

Here is a list of some addition you may want to do:

  • Develop a plugin that responds to state changes like selected objects, hidden objects...
  • Add context menu commands.
  • Add shortcuts.
  • Add a different viewer like a pdf one.
  • Add export to excel.
  • ... (let us know ! support@bimdata.io)

# How to develop a plugin

A plugin is mainly either a Vue component (opens new window) or/and a simple function that is run when the viewer is mounted into the DOM (opens new window).

TIP

To learn what is a Vue component, have a look at the Vue documentation (opens new window).

Both component and function have access to the $viewer object. It 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.

# Plugin as a function

To develop a plugin as a function, you must provide a function on the startupScript property of the configuration object of the registerPlugin() method. The first argument of this function is the $viewer object.

# Plugin as a component

To develop a plugin as a component, you must provide a Vue component on the component property of the configuration object of the registerPlugin() method.

TIP

Here are some usefull links you should need to develop your own plugin with a component:

# Function and Component registration example

See below a plugin registered with both a startup script function and a Vue component that can be displayed on the viewer windows.

The Vue component:

const myComponent = {
  name: "myPluginComponent",
  methods: {
    onClick() {
      const visibleObjects = this.$viewer.state.visibleObjects;
      console.log("These are the visible objects:", visibleObjects);
    },
  },
  template: `
    <div>
      <button type="button" @click="onClick">
        Click to log visible objects.
      </button>
    </div>`,
};

The startupScript function:

const myFunction = ($viewer) => {
  $viewer.state.hub.on("objects-selected", (objects) =>
    console.log("New objects are selected", objects)
  );
};

The registration:

import makeBIMDataViewer from "@bimdata/viewer";

const bimdataViewer = makeBIMDataViewer({
  /* ... */
});

bimdataViewer.registerPlugin({
  name: "myPlugin",
  component: myComponent,
  startupScript: myFunction,
  addToWindows: ["3d"]
});

← Plugin as button →