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

    Class ScaleBar

    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
      };
    }

    Hierarchy (View Summary)

    Index
    constructor
    element config lastBarWidthPx lastLabelText
    attachEventListeners onThemeChange onDispose addEventListener addEventListenerGeneric removeEventListener show hide toggle isVisible getElement dispose getClassName render update getDisplayUnit
    element: HTMLElement
    config: ScaleBarConfig
    lastBarWidthPx: number = 0
    lastLabelText: string = ''

    • 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

    • 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

    • 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')

    • 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

    • Update the scale bar based on current camera state. Called per-frame from the animation loop.

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Methods