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 following attributes aren’t exposed: * containerId * container * buffer

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.

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 started.

<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.

Attributes:

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
‘hoops-model-tree-node-visibility-change’: ModelTreeNodeVisibilityClickEvent

<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.

Attributes:

The component hasn’t 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
‘hoops-layer-tree-node-selected’: LayerTreeNodeSelectedEvent
‘hoops-layer-tree-visibility-changed’: LayerTreeVisibilityChanged

<hoops-view-tree>

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

Attributes:

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

<hoops-web-viewer-context-manager>

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

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.

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.

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

Attributes:

The component hasn’t 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.

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 - Triggered when an item in the context menu is clicked.

<hoops-tools-panel>

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

selection
measurements
redlines
markups

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.

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.

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.

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.

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

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.

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.

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-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.

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.

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-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.

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.

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:

Web Components Reference

Viewer and Utilities Tags

<hoops-web-viewer>

<hoops-model-tree>

<hoops-layer-tree>

<hoops-view-tree>

<hoops-web-viewer-context-manager>

<hoops-info-button>

<hoops-cad-configuration-list>

<hoops-context-menu>

<hoops-toolbar-cad-configuration>

<hoops-toolbar-camera-operator>

<hoops-toolbar-camera>

<hoops-toolbar-drawmode>

<hoops-toolbar-explode>

<hoops-toolbar-home>

<hoops-toolbar-layers>

<hoops-toolbar-model-tree>

<hoops-toolbar-properties>

<hoops-toolbar-snapshot>

<hoops-toolbar-redlines>

<hoops-toolbar-tools>

<hoops-toolbar-views>

<hoops-tools-panel>

<hoops-tools-select-group>

<hoops-tools-measurement-group>

<hoops-tools-redline-group>

<hoops-tools-markup-group>

UI Kit Tags

<hoops-accordion>

<hoops-layout>

<hoops-button>

<hoops-dropdown>

<hoops-icon>

<hoops-icon-button>

<hoops-list>

<hoops-node-properties>

<hoops-toolbar>

<hoops-tree>

<hoops-separator>

<hoops-switch>

React Adapters