Web Components Reference

Viewer and Utilities Tags

<hoops-web-viewer>

Encapsulated HOOPS Web Viewer component within an HTML tag. It provides a seamless way to integrate the viewer into your web application.

Attributes

All fields in the WebViewerConfig object can be set as attributes on the tag.

The complete list of attributes is as follows:

EndpointUri:string - Specifies the endpoint to be used by the viewer. This can be of type http, https or ws.
Model:string - Specifies the instance name to be loaded. This option is required if you specify an endpointUri of type ws:// or wss://.
SessionToken:string - An arbitrary value used for authentication. If used, it must match the token expected by the server for connection to proceed.
RendererType:string - Specifies the renderer type to be used. Default value is Client. Use “server” to use server conversion. Any other value will perform file conversion on the client.
Empty:boolean - Whether the viewer should be started without connecting to a server or loading a model.
UsePointerEvents:
 boolean - Specifies whether pointer events should be used when available. Setting this option to false can be useful when using web views in GUI toolkits that rely on Internet Explorer. Default value is true.
StreamingMode:string - Sets the streaming mode that the viewer will use. Default value is Interactive.
MemoryLimit:number - Controls the amount of mesh data present on the client machine at a given time. This value is expressed in Mebibytes (https://en.wikipedia.org/wiki/Mebibyte). Default value is 0 indicating no limit.
BoundingPreviewMode:
 string - Specifies what types of bounding previews should be rendered. Default value is All.
DefaultMeshLevel:
 number - Specifies which mesh detail level will be used to initially stream the model. The default value is 0.
StreamCutoffScale:
 number - Specifies a scale factor that will be applied to the streaming size cutoff. A value of 0 will disable the cutoff. The value should be in the interval of [0.0, 2.0]. If unspecified, this value will default to 1.0 for streaming sessions and 0.0 (disabled) for file based sessions.
DisableAutomaticBackgroundSheets:
 boolean - If true, then automatic generation of background sheets for drawings is not performed when the drawing is loaded.
DisableAutomaticFloorplanOverlay:
 boolean - If true, then the floorplan overlay capability will not be displayed automatically for BIM enabled models.
CalculateDefaultViewAxes:
 boolean - If true, the default view axes will be calculated from the initial camera unless explicitly set during authoring time. Default value is true.
DisableAutomaticFitWorld:
 boolean - If true, disable automatic fitworld on camera activation when there is no camera on view.
EnableShatteredModelUiViews:
 boolean - If true, then CAD views contained within external models will populate the model tree UI.
EnginePath:string - Path containing the graphics engine .wasm files. Follows the same rules as the src attribute of an HTML script tag.
DefaultMetallicFactor:
 number - Sets a default metallic factor that will be applied to ALL non-PBR materials in the scene. Acceptable value range is (0.0 - 1.0). If defaultRoughnessFactor is specified and this value is omitted, a value of 1.0 will be assumed.
DefaultRoughnessFactor:
 number - Sets a default roughness factor that will be applied to ALL non PBR materials in the scene. Acceptable value range is (0.0 - 1.0). If defaultMetallicFactor is specified and this value is omitted, a value of 1.0 will be assumed.

The following attributes aren’t exposed:

  • containerId
  • container
  • buffer

Events

All the callbacks available in the CallbackMap object used in WebViewer.setCallbacks are available as events in this component. They are prefixed with hwv, for example: hwvAssemblyTreeReady or hwvCamera.

In addition, the following events are available:

  • ‘hwvReady’: CustomEvent<WebViewer>: triggered when the internal WebViewer is created and ready to use.
Attribute:hwv - the Web Viewer object
<hoops-model-tree>

Displays the AssemblyTree structure. Can be bound to the WebViewer.model. Events are available for selection and visibility management, enhancing interaction with the model hierarchy.

../../../_images/model_tree.png

The component has no attributes, but the HoopsModelTreeElement class has the following properties to configure and interact with the tree:

  • selected: number[] - The list of selected node ids.
  • model: IModel - The model to be displayed in the tree. This is typically the WebViewer.model.

Events

  • ‘hoops-model-tree-node-click’: ModelTreeNodeClickEvent<{ nodeId: number; source: HTMLElement } & BaseMouseEvent>
  • ‘hoops-model-tree-node-visibility-change’: ModelTreeNodeVisibilityClickEvent<{ nodeId: number; visibility: boolean; source: HTMLElement } & BaseMouseEvent>
<hoops-layer-tree>

Displays the layers from the AssemblyTree with associated nodes. Can be bound to the WebViewer.model. Events are available for selection and visibility management, allowing for detailed layer control.

../../../_images/hoops-layer-tree.png

The component doesn’t have any attributes, but the HoopsLayerTreeElement class has the following properties to configure and interact with the tree:

  • layersContainer: ILayerContainer - The layers interface to display in the tree. This is typically the WebViewer.model.

Events

  • ‘hoops-layer-tree-element-click’: LayerTreeElementClickEvent<{ layerId: number; source: HTMLElement } & BaseMouseEvent>
  • ‘hoops-layer-tree-node-selected’: LayerTreeNodeSelectedEvent<{ layerId: number; source: HTMLElement } & BaseMouseEvent>
  • ‘hoops-layer-tree-visibility-changed’: LayerTreeVisibilityChanged<{ layerId: number; source: HTMLElement } & BaseMouseEvent>
<hoops-view-tree>

Displays the views from the AssemblyTree. Can be bound to the WebViewer.model. Events are available for selection, facilitating view management.

../../../_images/hoops-view-tree.png

The component has no attributes, but the HoopsViewTreeElement class has the following properties to configure and interact with the tree:

  • selected: number[]: The list of selected view ids.
  • model: IModel: The model interface where the views are queried to be displayed in the tree. This is typically the WebViewer.model.

Events

  • ‘hoops-view-tree-node-click’: ViewTreeNodeClickEvent<{ nodeId: number; source: HTMLElement } & BaseMouseEvent>
<hoops-web-viewer-context-manager>

The context manager is a logical component to synchronize UI web viewer components states around the web viewer.

../../../_images/hoops-web-viewer-context-manager.png

It is an internal component responsible of making changes in the web viewer and store states as a single source of truth. States are propagated using the Context Community Protocol (https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md) by the W3C’s Web Components Community Group.

The hoops-web-viewer-context-manager component must be an ancestor of a UI component to be able to propagate states to it.

<hoops-info-button>

A button component with default icon for “about” section.

../../../_images/hoops-info-button.png

Logic to toggle the visibility of any info panel must be handled by the application with the default ‘click’ event.

Attributes

  • tabindex: string - The tabindex of the button. Default is ‘0’.
  • role: string - The role of the button, e.g., ‘button’. Default is ‘button’.
  • size: string - The size of the icon. Default is ‘md’.
  • color: ‘default’ | ‘accent’ - The color state of the button. Default is ‘default’.
<hoops-cad-configuration-list>

A list component that displays the available CAD configurations for the model. It allows users to select a configuration and apply it to the model.

../../../_images/hoops-cad-configuration-list.png

Can be bound to the WebViewer.model. Event is available for configuration selection.

The component doesn’t have any attributes, but the ``HoopsCadConfigurationListElement``class has the following properties to configure the component:

  • model: IModel - The model interface where the configurations are queried to be displayed. This is typically the WebViewer.model.
  • active: number - The id of the active configuration. undefined if no configuration is active.

Events

  • ‘hoops-cad-configuration-list-click’: CadConfigurationListClickEvent
<hoops-context-menu>

A context menu component that displays a custom menu at the location of a right-click or context event. It can be used to provide contextual actions for elements in your application.

../../../_images/hoops-context-menu.png

The menu content should be defined in the default slot. The component manages its own visibility and positioning.

Attributes

  • x: number - The x-coordinate for the context menu position. Default is 0.
  • y: number - The y-coordinate for the context menu position. Default is 0.
  • isolateZoomHelper: IsolateZoomHelper - Helper object for isolate/zoom functionality.
  • activeItemId: string | null - The ID of the currently active item. Default is null.
  • activeLayerName: string | null - The name of the currently active layer. Default is null.
  • activeType: string | null - The type of the currently active item. Default is null.
  • color: string - The color used for the context menu. Default is ‘#ff0000’.
  • model: IContextMenuModel | undefined - The context menu model object. It’s a subset of the WebViewer.model.
  • webViewer: IContextMenuWebViewer | undefined - The web viewer instance associated with the context menu.
  • isUnsettingColor: boolean - Indicates if the color is being unset. Default is false.

Events

  • ‘context-menu-item-clicked’: ContextMenuItemClicked<{ source: HTMLElement } & MouseEvent>: Triggered when an item in the context menu is clicked.
<hoops-toolbar-cad-configuration>

A button component with default icon that represents CAD configurations.

../../../_images/hoops-toolbar-cad-configuration.png

Logic to toggle the visibility of the CAD configurations must be handled by the application with the default ‘click’ event.

Attributes

  • color: ‘default’ | ‘accent’ - Color state of the button. Default is ‘default’. It’s usually set to ‘accent’ when the CAD configurations panel is open.
<hoops-toolbar-camera-operator>

A button component that provides selection of the active camera operator through a dropdown menu.

../../../_images/camera_button.png

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

Attributes

  • dropDownPosition: ‘bottom’ | ‘top’ | ‘right’ | ‘left’ - Specifies the position of the dropdown menu relative to the button. Default is ‘right’.
<hoops-toolbar-camera>

A button component that provides basic camera operations such as projection modes and generic views through a dropdown menu.

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

Attributes

  • dropDownPosition: ‘bottom’ | ‘top’ | ‘right’ | ‘left’ - Specifies the position of the dropdown menu relative to the button. Default is ‘right’.
<hoops-toolbar-drawmode>

A button component that provides selection of the current draw mode such as “shaded” or “wireframe” through a dropdown menu.

../../../_images/draw_mode_button.png

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

Attributes

  • dropDownPosition: ‘bottom’ | ‘top’ | ‘right’ | ‘left’ - Specifies the position of the dropdown menu relative to the button. Default is ‘right’.
<hoops-toolbar-explode>

A button component that provides control over the explode state of the model through a dropdown menu and a slider.

../../../_images/explode_button.png

Link to the WebViewer must be established by passing the WebViewer instance to the hoops-toolbar-explode component.

Attributes

  • webViewer: WebViewer - The instance of the WebViewer to which the explode state will be applied.
  • dropDownPosition: ‘bottom’ | ‘top’ | ‘right’ | ‘left’ - Specifies the position of the dropdown menu relative to the button. Default is ‘right’.
<hoops-toolbar-home>

A button component that provides a basic home button functionality, allowing users to return to a default model state.

../../../_images/home_button.png

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

<hoops-toolbar-layers>

A button component with default icon that represent layers.

Logic to toggle the visibility of the layers must be handled by the application with the default ‘click’ event.

Attributes

  • color: ‘default’ | ‘accent’ - Color state of the button. Default is ‘default’. It’s usually set to ‘accent’ when the layer panel is open.
<hoops-toolbar-model-tree>

A button component with default icon that represents the model tree.

../../../_images/hoops-toolbar-model-tree.png

Logic to toggle the visibility of the model tree must be handled by the application with the default ‘click’ event.

Attributes

  • color: ‘default’ | ‘accent’ - Color state of the button. Default is ‘default’. It’s usually set to ‘accent’ when the model tree is open.
<hoops-toolbar-properties>

A button component with default icon that represents the properties panel.

../../../_images/hoops-toolbar-properties.png

Logic to toggle the visibility of the properties panel must be handled by the application with the default ‘click’ event.

Attributes

  • color: ‘default’ | ‘accent’ - Color state of the button. Default is ‘default’. It’s usually set to ‘accent’ when the properties panel is open.
<hoops-toolbar-snapshot>

A button component with default icon that represent the snapshot functionality.

../../../_images/snapshot_button.png

Logic to trigger the snapshot must be handled by the application with the default ‘click’ event.

<hoops-toolbar-redlines>

A button component that provides a minimal UI to select the redlines operators through a dropdown menu.

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

Pressing the Escape key will disable the redlines tool and go back to selection mode.

<hoops-toolbar-tools>

A button component with a default icon representing the tools panel.

../../../_images/hoops-toolbar-tools.png

Logic to toggle the visibility of the tools panel must be handled by the application with the default ‘click’ event.

Attributes

  • color: ‘default’ | ‘accent’ - Color state of the button. Default is ‘default’. It’s usually set to ‘accent’ when the tools panel is open.
<hoops-toolbar-views>

A button component with default icon that represents the views tree.

../../../_images/hoops-toolbar-views.png

Logic to toggle the visibility of the views tree must be handled by the application with the default ‘click’ event.

Attributes

  • color: ‘default’ | ‘accent’ - Color state of the button. Default is ‘default’. It’s usually set to ‘accent’ when the views tree is open.
<hoops-toolbar-settings>

A button component with default icon that represents the settings panel.

Logic to toggle the visibility of the settings panel must be handled by the application with the default ‘click’ event.

Attributes

  • color: ‘default’ | ‘accent’ - Color state of the button. Default is ‘default’. It’s usually set to ‘accent’ when the settings panel is open.
<hoops-toolbar-types>

A button component with default icon that represents the types panel. See hoops-types-tree component.

Logic to toggle the visibility of the types panel must be handled by the application with the default ‘click’ event.

Attributes

  • color: ‘default’ | ‘accent’ - Color state of the button. Default is ‘default’. It’s usually set to ‘accent’ when the types panel is open.
<hoops-tools-panel>

A panel that contains various sections for most of the operators management:

  • selection
  • measurements
  • redlines
  • markups
../../../_images/hoops-tools-panel.png

Each section can be instantiated separately, see:

  • <hoops-tools-select-group>
  • <hoops-tools-measurement-group>
  • <hoops-tools-redline-group>
  • <hoops-tools-markup-group>

More sections can be added as children of the hoops-tools-panel component.

<hoops-tools-select-group>

A section component for the tools panel that provides buttons to enable various selection modes.

../../../_images/hoops-tools-select-group.png

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

<hoops-tools-measurement-group>

A section component for the tools panel that provides buttons to enable the different measurements operators.

../../../_images/hoops-tools-measurement-group.png

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

<hoops-tools-redline-group>

A section component for the tools panel that provides buttons to enable the different redlines operators.

../../../_images/hoops-tools-redline-group.png

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

<hoops-tools-markup-group>

A section component for the tools panel that provides buttons to enable the different markup operators and display the markup list.

../../../_images/hoops-tools-markup-group.png

Link to the WebViewer is internally established through the hoops-web-viewer-context-manager.

<hoops-ifc-relationship>

A panel that displays the IFC relationships of the selected node.

Link to the WebViewer is internally established through the IIFCRelationshipsService.

<hoops-service-registry>

This component is used to ensure that the services are available throughout the application. It is an helper component, since the services can be registered manually as well.

The services can be overridden by passing a different service instance to the properties of the element.

The <hoops-service-registry> component must be an ancestor of the hoops-web-viewer-context-manager component and other UI components to ensure that the services are available to them.

<hoops-settings-panel>

A panel that provides various settings options for the viewer, including rendering, camera, and environment settings.

Link to the WebViewer is internally established through different services provided by the hoops-service-registry.

<hoops-types-tree>

Displays the generic types. Can be bound to the WebViewer.model. Events are available for selection and visibility management, enhancing interaction with the model hierarchy.

The component has no attributes, but the HoopsTypesTreeElement class has the following properties to configure and interact with the tree:

  • selected: number[] - The list of selected node ids.
  • model: IModel - The model to be displayed in the tree. This is typically the WebViewer.model.

Events

  • ‘hoops-types-tree-node-click’: TypesTreeNodeClickEvent
  • ‘hoops-types-tree-type-node-click’: TypesTreeTypeNodeClickEvent
  • ‘hoops-types-tree-node-visibility-change’: TypesTreeNodeVisibilityChangeEvent

UI Kit Tags

A modest yet essential UI kit has been created to support the development of the Web Components library and the demo app. This kit includes basic but necessary elements to ensure a cohesive and functional user interface. It provides simple UI elements that are more elaborate than a button, including a layout with menus and panels for containers, and a tree generic enough for all components to use.

<hoops-accordion>

A collapsible component that allows you to group content in a way that can be expanded or collapsed.

The following slots are available to customize the accordion:

  • ‘header’
  • ‘toolbar’
  • ‘icon’
  • ‘content’

Attributes

  • expanded: boolean - Indicates whether the accordion is expanded.
  • disabled: boolean - Indicates whether the accordion is disabled.
  • level: number - The aria-level attribute for the heading element.

Events

  • ‘change’: Triggered when the accordion is expanded or collapsed.
<hoops-layout>

A comprehensive layout manager featuring top, down, right, and left panels, toolbars, a menu bar, a status bar, and a central widget. It provides a structured and organized interface for your application.

../../../_images/hoops-layout.png

Use slot names to place the components in the desired location:

  • ‘menu-bar’
  • ‘status-bar’
  • ‘panel-left’
  • ‘panel-right’
  • ‘panel-top’
  • ‘panel-bottom’
  • ‘toolbar-left’
  • ‘toolbar-right’
  • ‘toolbar-top’
  • ‘toolbar-bottom’
  • ‘central-widget’

Attributes

  • floatingPanels: boolean - If true, the panels will be displayed on top of the central widget.
<hoops-button>

A customizable button component that can have an icon in the “icon” slot and anything in the default slot. It can be used to trigger actions or navigate within your application.

../../../_images/hoops-icon-button.png

Attributes

  • tabindex: number.
  • role: string - The role of the button, e.g., ‘button’, ‘menuitem’, etc.
  • iconSize: ‘sm’ | ‘md’ | ‘xl’ - Specifies the size of the icon. Default is ‘md’.
  • color: ‘default’ | ‘accent’ - Specifies the color state of the button. Default is ‘default’.
  • disabled: boolean - If true, the button will be disabled and not clickable. Default is false.
<hoops-dropdown>

A dropdown menu component that allows users to select from a list of options. It enhances the interactivity and usability of your application.

../../../_images/hoops-dropdown.png

The dropdown button must be defined in the default slot. The dropdown content is defined in the “dropdown-popup” slot.

Attributes

  • preventCloseOnClickInside: boolean - If true, prevents the dropdown from closing when clicking inside it.
  • position: ‘bottom’ | ‘top’ | ‘right’ | ‘left’ - Specifies the position of the dropdown relative to the host element. Default is ‘bottom’.
  • anchor: ‘bottom’ | ‘top’ | ‘right’ | ‘left’ - Specifies the edge the dropdown is aligning to. Default is ‘left’.
  • focusableSelector: string - CSS selector for focusable elements. Default is a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]).
  • disabled: boolean - If true, the dropdown is disabled. Default is false.
<hoops-icon>

A web component that stores and manages all the icons used in your application. It ensures consistency and easy access to icons.

The list of available icons can be found in icons.ts.

Attributes

  • icon: string - The name of the icon to be displayed.
<hoops-icon-button>

A button component that includes only an icon. It combines visual appeal with functionality, making it easy for users to understand its purpose.

../../../_images/hoops-icon-button.png

Icon is defined in the default slot.

Attributes

  • tabindex: string - The tabindex of the button. Default is ‘0’.
  • role: string - The role of the button, e.g., ‘button’. Default is ‘button’.
  • size: string - The size of the icon. Default is ‘md’.
  • color: ‘default’ | ‘accent’ - The color state of the button. Default is ‘default’.
  • disabled: boolean - If true, the button is disabled. Default is false.
<hoops-list>

The hoops-list component is a generalist list view, controlled by the ListContext. It is designed to display a list of items, allowing for selection and interaction.

Attributes

The list hasn’t any attributes, but the List class has the following properties to configure and interact with the list:

  • selected: number[] - The list of selected item ids.
  • list: ContextWrapper - The list context wrapper that provides the data for the list. See ListContext for the context.
<hoops-node-properties>

A panel designed to display properties in a key-value format. It is useful for showing detailed information about selected items in your application.

../../../_images/hoops-node-properties.png

Attributes

  • nodeId: number - The ID of the node whose properties will be displayed. This is typically the ID of the selected node.
  • node: INodePropertyAdapter - The node property adapter that provides the properties for the node. The INodePropertyAdapter has a model property to bind the WebViewer.model.
<hoops-toolbar>

A basic vertical toolbar that allows you to stack buttons. It provides a convenient way to group and organize tools and actions.

Content of the toolbar is defined in the default slot.

<hoops-tree>

The hoops-tree component is a generalist tree view, controlled by the TreeContext. It is designed to display elements as a tree, allowing for selection and interaction.

Attributes

  • selected: number[] - The list of selected item ids.
  • tree: ContextWrapper - The tree context wrapper that provides the data for the tree. See TreeContext for the context.
<hoops-separator>

A separator component used to visually divide groups or elements. It helps in organizing visual items. Can be used in the toolbar or the dropdown for example.

../../../_images/hoops-separator.png

Attributes

  • direction: ‘horizontal’ | ‘vertical’ - Specifies the orientation of the separator. Default is ‘horizontal’.
<hoops-switch>

A toggle switch component that allows users to switch between two states on/off.

../../../_images/hoops-switch.png

Attributes

  • checked: boolean - The switch state.
  • disabled: boolean - Whether or not the switch is disabled.
  • label: string - The switch label.

Events:

  • ‘change’: Triggered when the switch state changes.

React Adapters

The React adapters are designed to make possible the integration of our Web Components into React applications. They wrap the Web Components and handle event management, ensuring that the components work seamlessly within the React ecosystem.

UI kit-react: Will wrap components of the UI kit:

web-viewer-components-react: Will wrap components of the web-viewer-components:

Services

ICameraService

Service to manage camera operations in the Web Viewer.

Methods

  • getProjectionMode(): Projection
  • setProjectionMode(projectionMode: Projection): void
  • getOrbitFallbackMode(): OrbitFallbackMode
  • setOrbitFallbackMode(fallbackMode: OrbitFallbackMode): void
  • resetConfiguration(obj?: object): Promise<void>

Events

  • hoops-projection-mode-changed
  • hoops-orbit-fallback-mode-changed
  • hoops-camera-service-reset
ICuttingService

Service to manage cutting feature of the Web Viewer. Provides methods to interface the cutting manager for controlling cutting sections, planes and capping geometry settings.

Methods

  • getCappingGeometryVisibility(): boolean
  • setCappingGeometryVisibility(cappingGeometryVisibility: boolean): Promise<void>
  • getCappingFaceColor(): string | undefined
  • setCappingFaceColor(color?: string): Promise<void>
  • getCappingLineColor(): string | undefined
  • setCappingLineColor(color?: string): Promise<void>
  • resetConfiguration(obj?: object): Promise<void>

Events

  • hoops-cutting-service-reset
  • hoops-capping-geometry-visibility-changed
  • hoops-capping-face-color-changed
  • hoops-capping-line-color-changed
IExplodeService

Service to manage explode feature of the Web Viewer. Provides methods to interface with the explode manager for controlling part explosion effects.

Methods

  • reset(): void
  • start(nodeIds?: number[], explosionVector?: IPoint3): Promise<void>
  • setMagnitude(magnitude: number): Promise<void>
  • stop(): Promise<void>
  • getMagnitude(): number
  • getActive(): boolean

Events

  • hoops-explode-service-reset
  • hoops-explode-started
  • hoops-explode-magnitude-changed
  • hoops-explode-stopped
IFloorplanService

Service to manage floorplan feature of the Web Viewer. Provides methods to control the floorplan overlay functionality including camera tracking, orientation, and visual settings.

Methods

  • isActive(): boolean
  • setActive(active: boolean): Promise<void>
  • isTrackCameraEnabled(): boolean
  • setTrackCameraEnabled(enabled: boolean): Promise<void>
  • getOrientation(): OrientationName
  • setOrientation(orientation: OrientationName): Promise<void>
  • getAutoActivationMode(): AutoActivationModeName
  • setAutoActivationMode(mode: AutoActivationModeName): Promise<void>
  • getOverlayFeetPerPixel(): number
  • setOverlayFeetPerPixel(feetPerPixel: number): Promise<void>
  • getOverlayZoomLevel(): number
  • setOverlayZoomLevel(zoomLevel: number): Promise<void>
  • getOverlayBackgroundOpacity(): number
  • setOverlayBackgroundOpacity(opacity: number): Promise<void>
  • getOverlayBorderOpacity(): number
  • setOverlayBorderOpacity(opacity: number): Promise<void>
  • getOverlayAvatarOpacity(): number
  • setOverlayAvatarOpacity(opacity: number): Promise<void>
  • getFloorplanBackgroundColor(): string
  • setFloorplanBackgroundColor(color: string): Promise<void>
  • getFloorplanBorderColor(): string
  • setFloorplanBorderColor(color: string): Promise<void>
  • getFloorplanAvatarColor(): string
  • setFloorplanAvatarColor(color: string): Promise<void>
  • getFloorplanAvatarOutlineColor(): string
  • setFloorplanAvatarOutlineColor(color: string): Promise<void>
  • resetConfiguration(obj?: object): Promise<void>

Events

  • hoops-floorplan-manager-reset
  • hoops-floorplan-activation-changed
  • hoops-floorplan-track-camera-changed
  • hoops-floorplan-orientation-changed
  • hoops-floorplan-auto-activation-changed
  • hoops-floorplan-overlay-feet-per-pixel-changed
  • hoops-floorplan-overlay-zoom-level-changed
  • hoops-floorplan-overlay-background-opacity-changed
  • hoops-floorplan-overlay-border-opacity-changed
  • hoops-floorplan-overlay-avatar-opacity-changed
  • hoops-floorplan-background-color-changed
  • hoops-floorplan-border-color-changed
  • hoops-floorplan-avatar-color-changed
  • hoops-floorplan-avatar-outline-color-changed
IIFCRelationshipsService

Service to manage IFC relationships display in the Web Viewer. Provides methods to access relationship data for BIM models.

Properties

  • selectionRelationships: RelationshipData[] - Array of relationship data for the current selection

Methods

  • selectNode(nodeId: NodeId): void

Events

  • hoops-selection-ifc-relationships-changed
IMeasurementService

Service to manage measurements in the Web Viewer. Provides methods to control measurement markup display and styling.

Properties

  • measurements: MeasureMarkup[] - Array of current measurement markups

Methods

  • removeMeasurement(measurement: MeasureMarkup): void
  • getMeasurementColor(): string
  • setMeasurementColor(color: string): void
  • resetConfiguration(obj?: object): Promise<void>

Events

  • hoops-measurement-updated
  • hoops-measurement-color-changed
  • hoops-measurement-reset
INoteTextService

Service to manage note text markup in the Web Viewer. Provides methods to control note text display and management.

Methods

  • getNoteTexts(): NoteTextItemData[]
  • getNoteText(uniqueId: Uuid): NoteTextItemData | undefined
  • getNoteTextKeys(): Uuid[]
  • getActiveNoteTextKey(): Uuid | undefined
  • setActiveNoteText(uniqueId: Uuid): Promise<boolean>
  • getActiveNoteText(): NoteTextItemData | undefined
  • removeNoteText(item: NoteTextItemData): Promise<void>

Events

  • hoops-note-text-created
  • hoops-note-text-deleted
  • hoops-note-text-updated
  • hoops-note-text-hidden
  • hoops-note-text-shown
  • hoops-note-text-manager-reset
IPmiService

Service to manage PMI (Product Manufacturing Information) display in the Web Viewer. Provides methods to control PMI color and visibility settings.

Methods

  • getPmiColor(): string
  • setPmiColor(color: string): void
  • getPmiColorOverride(): boolean
  • setPmiColorOverride(enableOverride: boolean, rootId?: NodeId): Promise<void>
  • resetConfiguration(obj?: object): Promise<void>

Events

  • hoops-pmi-service-reset
  • hoops-pmi-color-changed
  • hoops-pmi-color-override-changed
IRedlineService

Service to manage redline markup in the Web Viewer. Provides methods to control redline views and markup items.

Methods

  • getRedlineViews(): RedlineViewData[]
  • getRedlineView(uniqueId: Uuid): RedlineViewData | undefined
  • getRedlineViewKeys(): Uuid[]
  • getActiveViewKey(): Uuid | undefined
  • setActiveView(uniqueId: Uuid): Promise<boolean>
  • getActiveView(): RedlineViewData | undefined
  • removeRedlineItem(viewId: Uuid, item: RedlineItemData): Promise<void>
  • removeRedlineView(uniqueId: Uuid): void

Events

  • hoops-redline-created
  • hoops-redline-deleted
  • hoops-redline-view-deleted
  • hoops-markup-view-activated
  • hoops-redline-service-reset
IRenderOptionsService

Service to manage rendering options in the Web Viewer. Provides comprehensive control over visual rendering settings including lighting, effects, and material properties.

Methods

  • getMinimumFramerate(): Promise<number>
  • setMinimumFramerate(value: number): Promise<void>
  • getHiddenLineOpacity(): number
  • setHiddenLineOpacity(opacity: number): void
  • getShowBackfaces(): boolean
  • setShowBackfaces(show: boolean): Promise<void>
  • getAmbientOcclusionEnabled(): boolean
  • setAmbientOcclusionEnabled(enabled: boolean): Promise<void>
  • getAmbientOcclusionRadius(): number
  • setAmbientOcclusionRadius(radius: number): Promise<void>
  • getAntiAliasingEnabled(): boolean
  • setAntiAliasingEnabled(enabled: boolean): Promise<void>
  • getBloomEnabled(): boolean
  • setBloomEnabled(enabled: boolean): void
  • getBloomIntensity(): number
  • setBloomIntensity(intensity: number): void
  • getBloomThreshold(): number
  • setBloomThreshold(threshold: number): void
  • getSilhouetteEnabled(): boolean
  • setSilhouetteEnabled(enabled: boolean): void
  • getReflectionEnabled(): boolean
  • setReflectionEnabled(enabled: boolean): void
  • getShadowEnabled(): boolean
  • setShadowEnabled(enabled: boolean): void
  • getShadowInteractive(): boolean
  • setShadowInteractive(interactive: boolean): void
  • getShadowBlurSamples(): number
  • setShadowBlurSamples(samples: number): void
  • getSplatRenderingEnabled(): boolean
  • setSplatRenderingEnabled(enabled: boolean): Promise<void>
  • getSplatRenderingSize(): number
  • setSplatRenderingSize(size: number): Promise<void>
  • getSplatRenderingPointSizeUnit(): PointSizeUnit
  • setSplatRenderingPointSizeUnit(unit: PointSizeUnit): Promise<void>
  • getEyeDomeLightingEnabled(): Promise<boolean>
  • setEyeDomeLightingEnabled(enabled: boolean): Promise<void>
  • getBackgroundColor(): VerticalGradient
  • setBackgroundColor(color: VerticalGradient): Promise<void>
  • resetConfiguration(obj?: object): Promise<void>

Events:

  • hoops-render-options-service-reset
  • hoops-minimum-framerate-changed
  • hoops-hidden-line-opacity-changed
  • hoops-show-backfaces-changed
  • hoops-ambient-occlusion-enabled-changed
  • hoops-ambient-occlusion-radius-changed
  • hoops-anti-aliasing-enabled-changed
  • hoops-bloom-enabled-changed
  • hoops-bloom-intensity-changed
  • hoops-bloom-threshold-changed
  • hoops-silhouette-enabled-changed
  • hoops-reflection-enabled-changed
  • hoops-shadow-enabled-changed
  • hoops-shadow-interactive-changed
  • hoops-shadow-blur-samples-changed
  • hoops-splat-rendering-enabled-changed
  • hoops-splat-rendering-size-changed
  • hoops-splat-rendering-point-size-unit-changed
  • hoops-eye-dome-lighting-enabled-changed
  • hoops-background-color-changed
ISelectionService

Service to manage selection behavior in the Web Viewer. Provides methods to control selection appearance and behavior settings.

Methods

  • getEnableFaceLineSelection(): boolean
  • setEnableFaceLineSelection(enableFaceLineSelection: boolean): Promise<void>
  • getHonorsSceneVisibility(): boolean
  • setHonorsSceneVisibility(honorsSceneVisibility: boolean): void
  • getBodyColor(): string
  • setBodyColor(color: string): Promise<void>
  • getFaceAndLineColor(): string
  • setFaceAndLineColor(color: string): Promise<void>
  • resetConfiguration(obj?: object): Promise<void>

Events

  • hoops-selection-service-reset
  • hoops-enable-face-line-selection-changed
  • hoops-honors-scene-visibility-changed
  • hoops-body-color-changed
  • hoops-face-and-line-color-changed
ISheetService

Service to manage sheet display in the Web Viewer. Provides methods to control sheet background, colors, and shadow settings for drawing sheets.

Methods

  • getSheetBackgroundColor(): string
  • getSheetColor(): string
  • getSheetShadowColor(): string
  • setSheetColors(backgroundColor: string, sheetColor: string, sheetShadowColor: string): Promise<void>
  • getBackgroundSheetEnabled(): boolean
  • setBackgroundSheetEnabled(enabled: boolean): Promise<void>
  • resetConfiguration(obj?: object): Promise<void>

Events

  • hoops-sheet-service-reset
  • hoops-sheet-colors-changed
  • hoops-background-sheet-enabled-changed
ISpaceMouseService

Service to manage Space Mouse integration in the Web Viewer. Provides methods to connect and control 3D navigation devices.

Methods

  • connect(): void - Connect to the space mouse. To be successful, the canvas where the mouse is to be used must have focus. Note: If this is called but the 3d connexion software is not running, a connection error will be shown in the console.

Events

  • hoops-spacemouse-connected
IViewService

Service to manage view controls in the Web Viewer. Provides methods to control navigation aids like axis triad and nav cube visibility.

Methods

  • isAxisTriadVisible(): boolean
  • setAxisTriadVisible(visible: boolean): void
  • isNavCubeVisible(): boolean
  • setNavCubeVisible(visible: boolean): void

Events

  • hoops-view-reset
  • hoops-view-axis-triad-visibility-changed
  • hoops-view-nav-cube-visibility-changed
  • hoops-view-service-reset
IWalkOperatorService

Service to manage walk navigation mode in the Web Viewer. Provides comprehensive control over walk mode settings including movement speeds, mouse look, and collision detection.

Methods

  • getWalkMode(): WalkModeName
  • setWalkMode(mode: WalkModeName): Promise<void>
  • getRotationSpeed(): number
  • setRotationSpeed(speed: number): void
  • getWalkSpeed(): number
  • setWalkSpeed(speed: number): void
  • getElevationSpeed(): number
  • setElevationSpeed(speed: number): void
  • getFieldOfView(): number
  • setFieldOfView(fov: number): void
  • isMouseLookEnabled(): boolean
  • setMouseLookEnabled(enabled: boolean): void
  • getMouseLookSpeed(): number
  • setMouseLookSpeed(speed: number): void
  • isCollisionDetectionEnabled(): boolean
  • setCollisionDetectionEnabled(enabled: boolean): Promise<void>
  • resetConfiguration(obj?: object): Promise<void>

Events

  • hoops-walk-mode-operator-reset
  • hoops-mouse-walk-operator-reset
  • hoops-keyboard-walk-operator-reset
  • hoops-operators-walk-mode-changed
  • hoops-operators-walk-rotation-speed-changed
  • hoops-operators-walk-speed-changed
  • hoops-operators-elevation-speed-changed
  • hoops-operators-field-of-view-changed
  • hoops-operators-mouse-look-enabled-changed
  • hoops-operators-mouse-look-speed-changed
  • hoops-operators-collision-detection-changed