Viewer Components and Utilities
<hoops-web-viewer>:
Encapsulated HoopsWebViewer within an HTML tag. It provides a seamless way to integrate the viewer into your web application. Corresponds to WebViewerConfig.
endpointUri: stringmodel: stringsessionToken: stringrendererType: string - “server” to use server conversion. Any other value will perform file conversion on the client<hoops-model-tree>: Displays the AssemblyTree structure. Can be bound to the Viewer for selection events and visibility management, enhancing interaction with the model hierarchy.
- ‘hoops-model-tree-node-click’: ModelTreeNodeClickEvent;
<hoops-layer-tree>: Displays the layers from the AssemblyTree with associated nodes. Can be bound to the Viewer for selection events and visibility management, allowing for detailed layer control.
- ‘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 with associated nodes. Can be bound to the Viewer for selection events and visibility management, facilitating view management.
<hoops-webviewer-context-manager>: A state manager for shared behavior between components. It is necessary for managing the state of toolbar buttons and other shared functionalities.
<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-views>:
react.ts: A React adapter that wraps all components for event handling. It is only needed for React projects and ensures seamless integration with React’s event system.
UI Kit
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-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.
- <hoops-button>: A customizable button component that includes text. It can be used to trigger actions or navigate within your application.
- <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.
- <hoops-icon>: A web component that stores and manages all the icons used in your application. It ensures consistency and easy access to icons.
- <hoops-icon-button>: A button component that includes an icon and text. It combines visual appeal with functionality, making it easy for users to understand its purpose.
- <hoops-info-button>: ??? Possibly related to hoops-icon-button, see C:Userslee.orsinodevcommunicatorapplicationshoopspackagesweb-viewer-componentssrclibhoops-info-button.ts
- <hoops-list>: This class implements a list view as an HTML custom element. You can integrate it into your application using the hoops–list tag. It provides a structured way to display a list of items.
- <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.
- <hoops-toolbar>: A basic vertical toolbar that allows you to stack buttons. It provides a convenient way to group and organize tools and actions.
- <hoops-tree>: This class implements a tree view as an HTML custom element. You can integrate it into your application using the hoops-tree tag. It is ideal for displaying hierarchical data.
- <hoops-separator>: A separator component used in toolbars to visually divide groups of buttons or tools. It helps in organizing the toolbar layout.
- react.ts: A React adapter that wraps all components for event handling. It is only needed for React projects and ensures seamless integration with React’s event system.