Construct a new UI component
Component configuration
Private OptionalunsubscribePrivatelastProtectedelementProtectedconfigProtectedgetGet the base CSS class name for this component. Used for BEM-style naming.
Base CSS class name (e.g., 'luxar-error-dialog')
ProtectedrenderRender the component DOM structure. Should return a root element with appropriate class names. NO INLINE STYLES - use CSS classes only!
Root element for this component
ProtectedattachAttach event listeners to the component. Use this.addEventListener() for automatic cleanup!
Called automatically after render().
Rebuild the legend entries. Only rebuilds DOM if the set of visible layers+colormaps has changed.
PrivatecreateForce a full update (call after show()).
ProtectedonCalled before disposal. Override for custom cleanup logic.
Called automatically by dispose().
ProtectedonCalled when theme changes. Override for theme-specific logic (e.g., canvas colors).
New theme
ProtectedaddAdd 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);
}
ProtectedaddAdd a generic event listener (for non-standard events)
Event target
Event type (string for custom events)
Event listener function
Optionaloptions: AddEventListenerOptions
Optional event listener options
ProtectedremoveRemove a specific event listener.
Event target
Event type
Hide the component (remove visible class, keep in DOM).
Toggle visibility.
Check if component is visible.
True if visible
Get the root element of this component.
Root element
Dispose the component - cleanup all resources. NO MORE MEMORY LEAKS!
Automatically:
Bottom-right overlay listing each visible layer's colormap gradient, name, and data range (toggled with the J key). Subscribes to the LayerStateManager and rebuilds its entries reactively, but only re-renders the DOM when the visible layers, their colormaps, or their data ranges (displayMin/displayMax) actually change (guarded by a cheap content hash over those fields).