IafViewer

IafViewer overview

The IafViewer is a React component which enables a user to interact with a digital twin model in 3D space using various tools.

This page describes how to install and import the IafViewer component and describes the range of React data props available.

Note: For a general introduction to the IafViewer, refer to the IafViewer page in the Concepts section.

Install

npm install @invicara/iaf-viewer

Import

import { IafViewer } from "@invicara/iaf-viewer";

Props

Data props

Prop	Type	Description	Default value	Required
toolbarSize	String	Sets the size of the toolbar. Pass small, medium, or large.	medium	No
showToolTip	Boolean	Enables or disables the tool tip hover-over descriptions. Pass true or false.	true	No
sidePanelColor	String	Sets the side panel color. You can pass a hex code, RGB value, or a color name.	"#1D1D1D"	No
onHoverIconColor	String	Sets the icon color during a mouse hover event. You can pass a hex code, RGB value, or a color name.	invert(40%) sepia(86%) saturate(6224%) hue-rotate(311deg) brightness(83%) contrast(101%)	No
onActiveIconColor	String	Sets the color of the active icon. You can pass a hex code, RGB value, or a color name.	invert(40%) sepia(86%) saturate(6224%) hue-rotate(311deg) brightness(83%) contrast(101%)	No
toolbarColor	String	Sets the toolbar color. You can pass a hex code, RGB value, or a color name.	"#333333"	No
isShowNavCube	Boolean	Shows or hides the navigation cube. Pass true or false.	true	No
modelVersionId	String	Pass the model's version number as a string.		No
showNotification	Boolean	Show or hide notifications	true	No
enableFocusMode	Boolean	Enable or disable focus mode	true	No
enable2DViewer	Boolean	Toggles the display of the 2D viewer	true	No
enableOptimizedSelection	Boolean	Enables a performance-optimized algorithm that improves 2D and 3D node selection speed and prevents unnecessary rerendering	false	No
Workflow	String	Supports multiple animations, including animated GIFS, offers properties such as scale, rotation, and opacity to bring dynamic visuals to the interface. Allows you to specify an animation script and set the duration of a looping animation.	list: [ { uuid: 1, timeInSeconds: 4.5, loop: true, script: [] } ], active: undefined // change to desired UUID	No
modelComposition	String	Sets default visibility for specific model disciplines, ensuring critical components are consistently displayed. Using a JSON object of Boolean values, this enables you to specify which components are displayed from the building model, from a selection of: structural, architectural, mechanical, electrical, plumbing, fire protection and infrastructure.	initial: { Structural: false, Architectural: true, Mechanical: false, Electrical: false, Plumbing: false, FireProtection: false, Infrastructural: false, default: false }	No
enablePersistence	Boolean	Enables saving the IafViewer's current state to the database server. The IafViewer state could be set to Annotations, GIS data etc.	true	No
gis	String	Enables GIS mode within the IafViewer, sets the Mapbox access token to use, and specifies a callback function which allows the application to interact with the map directly. If enabled, the viewer will overlay 3D models onto a Mapbox-powered GIS map at their configured geo-locations. It supports interactive GIS operations like pan, zoom, tilt, and orbit. Existing non-GIS features in earlier versions of IafViewer will continue to work as expected.	gis: { enabled: true, token: undefined, onIafMapReady: undefined}	No

Callback props

Prop	Event that triggers callback function	Returns
OnIsolateElementChangeCallback	The user isolates an element in the graphics viewer when they right-click the element, then click Isolate	The ID of the isolated element
OnSelectedElementChangeCallback	The user selects one or more elements in the graphics viewer	An updated array of the selected elements' IDs
OnResetCallback	The user clicks the Reset button	true
OnHiddenElementChangeCallback	The user hides one or more elements in the graphics viewer	An updated array of the hidden elements' IDs
saveSettings	The user clicks the Save & Close button in the Settings pane.	The IafViewer settings as a JSON object for your function to store in local storage.
OnNotificationCallback	An info, warning or error notification event occurs.	The notification as a JSON object

Example

import React, {useEffect} from "react";import { IafViewer } from "@invicara/iaf-viewer";
const ViewerPage = () => {
  const mySaveSettingsFunction = (settings) => {    //your function here  }
  return (    <PageTemplate>      <IafViewer         toolbarSize="large"         saveSettings={mySaveSettingsFunction}      />    </PageTemplate>  )}
export default ViewerPage;