@itwin/desktop-viewer-react
v4.3.2
Published
Configurable iTwin.js viewer for desktop applications
Downloads
888
Readme
iTwin Viewer for Desktop
The iTwin Desktop Viewer is a configurable iTwin.js viewer that offers basic configuration out-of-the-box and can be further extended through the use of iTwin.js UI Providers. This package should be used for Electron-based desktop applications. For web applications, use @itwin/web-viewer-react.
Installation
yarn add @itwin/desktop-viewer-react
or
npm install @itwin/desktop-viewer-react
Dependencies
If you are creating a new application and are using React, it is advised that you use create-react-app with @bentley/react-scripts
. There is also a predefined template that includes the iTwin Viewer package:
npx create-react-app@latest my-app --scripts-version @bentley/react-scripts --template @itwin/desktop-viewer
React component
import React, { useState, useEffect } from "react";
import { Viewer } from "@itwin/desktop-viewer-react";
export const MyViewerComponent = () => {
const snapshotPath = "./samples/house_model.bim";
return (
<Viewer filePath={snapshotPath} enablePerformanceMonitors={true} />
);
};
Props
Required
enablePerformanceMonitors
- Enable reporting of data from timed events in the iTwin Viewer in order to aid in future performance optimizations. These are the metrics that will be collected and logged to the browser's performance timeline:- Duration of startup to the initialization of iTwin.js services
- Duration of startup to the establishment of a connection to the iModel
- Duration of startup to the creation of a view state for the iModel
- Duration of startup until the last tile is loaded and rendered for the initial iModel view
Local iModel
filePath
- path to a local Briefcase or Snapshot to load in the viewer. If provided, it will take precedence over any iTwinId/iModelId that may also be provided
Connected iModel
iTwinId
- GUID for the iTwin (project, asset, etc.) that contains the iModel that you wish to viewiModelId
- GUID for the iModel that you wish to view
Blank Connections
location
- The spatial location for the blank connection.extents
- The volume of interest, in meters, centered around location Note that this can't be used in conjunction with the iTwinId or iModelId prop.
Optional
changeSetId
- Changeset id to view if combined with the iTwinId and iModelId propsblankConnectionViewState
- Override options for the ViewState that is generated for the BlankConnectionbackend
- Backend connection info (defaults to the iTwin Platform's iModel Access Service)theme
- Override the default themedefaultUiConfig
- hide parts of the default frontstagehideNavigationAid
- hide the navigation aid cubehideStatusBar
- hide the status bar
onIModelConnected
- Callback function that executes after the iModel connection is successful and contains the iModel connection as a parameterfrontstages
- Provide additional frontstages for the viewer to renderbackstageItems
- Provide additional backstage items for the viewer's backstage composerviewportOptions
- Additional options for the default frontstage's IModelViewportControluiProviders
- Extend the viewer's default uiviewCreatorOptions
- Options for creating the default viewStateloadingComponent
- provide a custom React component to override the spinner when an iModel is loadingproductId
- application's GPRIDi18nUrlTemplate
- Override the default url template where i18n resource files are queriedonIModelAppInit
- Callback function that executes after IModelApp.startup completesadditionalI18nNamespaces
- Additional i18n namespaces to registerrpcInterfaces
- RPC interfaces to register (assumes that they are supported in your backend)extensions
- Provide extensions for the viewerhubAccess
- OptionalhubAccess
to override the Viewer's default hub accessmapLayerOptions
- Optional key value pair to provide map layerstoolAdmin
- OptionalToolAdmin
to override the Viewer's default tool admintileAdmin
- OptionaltileAdmin
to override the Viewer's default tile adminrenderSys
- OptionalrenderSys
to override the Viewer's default render systemrealityDataAccess
- OptionalrealityDataAccess
to override the Viewer's default reality data accesslocalization
- Optionallocalization
to provide your own Localization instance
Development
When making changes to the src, run npm start
in the package's root folder to enable source watching and rebuild, so the dev-server will have access to updated code on successful code compilation.