Luxar Viewer API Documentation - v2026.9.22
    Preparing search index...

    Class UIComponent<TConfig>Abstract

    Abstract base class for UI components

    All UI components should extend this class to get automatic event listener cleanup and theme subscription.

    class MyComponent extends UIComponent<MyConfig> {
      protected getClassName(): string {
        return 'luxar-my-component';
      }

      protected render(): HTMLElement {
        const el = document.createElement('div');
        el.className = this.getClassName();
        return el;
      }

      protected attachEventListeners(): void {
        // Use this.addEventListener for automatic cleanup!
        this.addEventListener(this.element, 'click', this.handleClick);
      }

      private handleClick = (e: MouseEvent) => {
        // Event handler logic
      };
    }

    Type Parameters

    • TConfig = unknown

    Hierarchy (View Summary)

    Index
    constructor
    element config eventListeners themeUnsubscribe
    render getClassName attachEventListeners onThemeChange onDispose addEventListener addEventListenerGeneric removeEventListener subscribeToTheme show hide toggle isVisible getElement dispose
    element: HTMLElement
    config: TConfig
    eventListeners: Map<
        EventTarget,
        Map<string, EventListenerOrEventListenerObject>,
    > = ...
    themeUnsubscribe: (() => void) | null = null

    • Render the component DOM structure. Should return a root element with appropriate class names. NO INLINE STYLES - use CSS classes only!

      Returns HTMLElement

      Root element for this component

    • Get the base CSS class name for this component. Used for BEM-style naming.

      Returns string

      Base CSS class name (e.g., 'luxar-error-dialog')

    • Attach event listeners to the component. Use this.addEventListener() for automatic cleanup!

      Called automatically after render().

      Returns void

    • Add an event listener with automatic cleanup tracking. Prevents memory leaks - all listeners removed on dispose()!

      IMPORTANT: Use arrow functions for event handlers to maintain component context:

      private handleClick = (ev: MouseEvent) => {
        // 'this' refers to component instance
        this.someMethod();
      };

      protected attachEventListeners(): void {
        this.addEventListener(this.element, 'click', this.handleClick);
      }

      Type Parameters

      • K extends keyof HTMLElementEventMap

      Parameters

      • target: EventTarget

        Event target (element, window, document, etc.)

      • type: K

        Event type ('click', 'keydown', etc.)

      • listener: (ev: HTMLElementEventMap[K]) => void

        Event listener function (should be arrow function)

      • Optionaloptions: AddEventListenerOptions

        Optional event listener options

      Returns void

    • Add a generic event listener (for non-standard events)

      Parameters

      • target: EventTarget

        Event target

      • type: string

        Event type (string for custom events)

      • listener: EventListener

        Event listener function

      • Optionaloptions: AddEventListenerOptions

        Optional event listener options

      Returns void

    • Remove a specific event listener.

      Type Parameters

      • K extends keyof HTMLElementEventMap

      Parameters

      • target: EventTarget

        Event target

      • type: K

        Event type

      Returns void

    • Dispose the component - cleanup all resources. NO MORE MEMORY LEAKS!

      Automatically:

      • Removes all tracked event listeners
      • Unsubscribes from theme changes
      • Calls onDispose() for custom cleanup
      • Removes element from DOM

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Methods