makeBIMDataViewer

makeBIMDataViewer is the function that is available after importing the viewer.

import makeBIMDataViewer from "@bimdata/viewer";

const bimdataViewer = makeBIMDataViewer({
  /* configuration object */
});

It takes a configuration object that accept the following properties :

locale

• Type: String
• Details: A string to determine the locale of the viewer.

Available locales are:

• English: en (default)
• French: fr
• Spanish: es
• German: de
• Italian: it

api

• Type: Object
• Details: An object containing BIMData API connection config.

Example :

const bimdataViewer = makeBIMDataViewer({
  api: {
    modelIds: [15097],
    cloudId: 10344,
    projectId: 237466,
    accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
  },
});

The api properties are:

Name	Type	Description
apiUrl	string	(Optional) The BIMData API URL. Default to https://api.bimdata.io
archiveUrl	string	(Optional) The BIMData Archive backend URL. Default to https://archive.bimdata.io
pdfBackendUrl	string	(Optional) The BIMData API URL. Default to https://pdf-backend.bimdata.io
accessToken	string	The access token.
cloudId	number	The cloud id.
projectId	number	The project id.
modelIds	number[]	(Optional) An array of model ids to load on startup.
offline	object	Offline mode configuration.
onlyLoadUuids	object	A 'model id' to 'element uuids' mapping to filter elements (see example).

Here are the offline configuration options:

Name	Type	Description
enabled	boolean	Default to false. Enable/Disable offline mode.
data	`Blob	string`

You can refer to the dedicated page to learn more about offline mode.

ui

• Type: Object
• Details: An object to customize the global UI of the viewer.

Example :

const bimdataViewer = makeBIMDataViewer({
  ui: {
    style: {
      backgroundColor: "FFFFFF",
    },
    header: false,
    version: false,
    bimdataLogo: false,
    contextMenu: false,
    resizable: true,
    mobile: false,
  },
});

The ui properties are:

Name	Type	Description
style	object	An set of props to customize viewer colors.
header	boolean	Default to true. If false, the header is hidden.
version	boolean	Default to true. If false, the viewer version is hidden.
bimdataLogo	boolean	Default to true. If false, the BIMData logo is hidden.
contextMenu	boolean	Default to true. If false, the context menu is disabled.
resizable	boolean	Default to true. If false, the layout is not resizable from the UI.
mobile	boolean	Default to false. Enable / Disable mobile UI.

plugins

• Type: Object | boolean
• Details: An object to customize the BIMData viewer native plugins. If false, no native plugins are available.

Each property is a plugin name and the value is either a boolean or an object. An object is considered as true and the object content is provided to the plugin instance on this.$plugin.settings.

Some native plugins are enabled by default and others disabled. To enabled plugins that are disabled by default, you must provide their names with true or an object with plugin specific options.

Example :

const bimdataViewer = makeBIMDataViewer({
  plugins: {
    split: true,
    bcf: false,
    header: false,
    fullscreen: false,
    projection: false,
    search: false,
    section: false,
    windowSelector: false,
    "structure-properties": {
      merge: true,
      export: true,
      editProperties: true,
    },
    viewer3d: {
      pivotMarker: false,
      navCube: false,
      edges: false,
    },
    "window-manager": false,
  },
});

TIP

For more details about native plugins, see the native plugins reference.

The returned object of the makeBIMDataViewer function have the following interface:

Property	Description
`mount(containerElementOrSelector: HTMLElement	string, layout?: Object): Object`
setLocale(locale: string): void	Set the viewer locale.
registerPlugin(plugin: Object, cfg: Object): void	Register a plugin. See plugin registration.
registerWindow(window: Object): void	Register a window. See window registration.
unregisterWindow(windowName: string): void	Unregister the corresponding window.
setAccessToken(accessToken: string): void	Set API access token.
async loadModels(modelIds: number[]): Object[]	Load the corresponding models.
destroy(): void	Destroy the viewer. All the plugins will be destroyed and the DOM won't react anymore. Warning: If you remove the viewer's <div> without calling this method, there will be a huge memory leak