# 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
`modelIds`	`number[]`	(Optional) An array of model ids to load on startup.
`cloudId`	`number`	The cloud id.
`projectId`	`number`	The project id.
`accessToken`	`string`	The access token.
`archiveUrl`	`string`	The BIMData Archive backend URL. Default to `https://archive.bimdata.io`
`apiUrl`	`string`	The BIMData API URL. Default to `https://api.bimdata.io`
`offline`	`object`	Offline mode configuration.

Here are the offline configuration options:

Name	Type	Description
`enabled`	`boolean`	Default to `false`. Enable/Disable offline mode.
`data`	`Blob \| string`	A Blob or URL of the offline-package

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,
  },
});

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.

# 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`	Mount the viewer on the corresponding DOM element with the specified layout. See `mount`
`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

← Plugin mount →