StrelitLayout (Main Class)

Properties

rootItem

The topmost ContentItem in the layout hierarchy (typically a RowOrColumn, Stack, or ComponentItem).

container

A reference to the native HTMLElement DOM container hosting the layout.

isInitialised

True once the layout instance has completed initialization and the initialised event has been emitted.

isDestroyed

True if the layout has been destroyed.

layoutConfig

A read-only reference to the current ResolvedLayoutConfig representing resolved settings, dimensions, and item tree.

To persist state or export configuration for restoration, call layout.saveLayout().

focusedComponentItem

The currently focused ComponentItem, or undefined if no component item is focused.

width

The current outer width of the layout in pixels (or null if not rendered).

height

The current outer height of the layout in pixels (or null if not rendered).

openPopouts

An array of active BrowserPopout window instances managed by this layout.

isSubWindow

True if this layout instance was spawned as a popout child window by another layout.

eventHub

An instance of EventHub enabling cross-window pub/sub communication across all popout windows and main layouts.

Events

initialised

Fired once the layout instance has finished initializing.

stateChanged

Fired whenever an operation alters the layout hierarchy or component state (matching what layout.saveLayout() serializes).

windowOpened

Fired when a new popout window (BrowserPopout) is successfully opened.

windowClosed

Fired when an existing popout window is closed or popped back in.

focus

Fired when a component item gains focus.

blur

Fired when a component item loses focus.

activeContentItemChanged

Fired on a Stack when its active tab changes.

beforeComponentRelease

Fired before a component container is destroyed or recycled, allowing frameworks to unmount safely.

itemCreated

Fired whenever any item node is added to the layout tree.

itemDestroyed

Fired whenever an item node is removed and destroyed.

componentCreated

Fired whenever a component item is instantiated.

rowCreated

Fired whenever a Row item is created.

columnCreated

Fired whenever a Column item is created.

stackCreated

Fired whenever a Stack item is created.

tabCreated

Fired whenever a Tab control is created in a header.

stackHeaderClick

Fired when a stack header bar is clicked.

StrelitLayout( container?, bindComponentEventHandler?, unbindComponentEventHandler? )

argument	type	optional	default	description
container	HTMLElement \| string	true	document.body	The target DOM element or CSS selector string (e.g. `‘#layoutRoot’`).
bindComponentEventHandler	Function	true	undefined	Optional event handler for virtual component binding (used in VirtualLayout integrations).
unbindComponentEventHandler	Function	true	undefined	Optional event handler for unbinding virtual components.

Instantiates a new layout engine. Initialization is automatic; load your configuration with loadLayout():

import { StrelitLayout, LayoutConfig } from 'strelit-ui-kit';

// 1. Instantiate on container
const layout = new StrelitLayout(document.getElementById('layoutRoot'));

// 2. Register component factory functions
layout.registerComponentFactoryFunction('greeting', (container, state) => {
  container.element.innerHTML = `<h3>Hello ${state?.name || 'World'}</h3>`;
});

// 3. Load layout structure
const config: LayoutConfig = {
  root: {
    type: 'row',
    content: [
      {
        type: 'component',
        componentType: 'greeting',
        componentState: { name: 'Joydeep' },
      },
    ],
  },
};
layout.loadLayout(config);

loadLayout( layoutConfig )

argument	type	optional	default	description
layoutConfig	LayoutConfig	false	-	The complete layout configuration object containing `root`,`settings`, `header`, and `dimensions`.

Clears the current item tree (if any) and renders the specified layout configuration.

saveLayout()

Returns the current layout structure, dimensions, and component states as a serializable ResolvedLayoutConfig object. (Legacy alias: toConfig()).

const state = layout.saveLayout();
localStorage.setItem('workspace-layout', JSON.stringify(state));

registerComponentFactoryFunction( typeName, componentFactoryFunction, virtual? )

argument	type	optional	default	description
typeName	string	false	-	The component type identifier matching `componentType` in the item config.
componentFactoryFunction	(container, state, virtual) => void \| object	false	-	Factory function invoked whenever a component container of this type is mounted.
virtual	boolean	true	false	Whether this component should be treated as a virtual portal component.

Registers a component factory function with the layout instance:

layout.registerComponentFactoryFunction('telemetry', (container, state) => {
  const chartEl = document.createElement('div');
  chartEl.className = 'telemetry-chart';
  container.element.appendChild(chartEl);

  container.on('resize', () => {
    // Resize chart to container.width, container.height
  });
});

registerComponentConstructor( typeName, componentConstructor, virtual? )

argument	type	optional	default	description
typeName	string	false	-	The component type identifier.
componentConstructor	Constructor class	false	-	A class constructor invoked with `new (container, state, virtual)`.
virtual	boolean	true	false	Whether this component should operate in virtual mode.

setSize( width, height )

argument	type	optional	default	description
width	number	false	-	The new outer layout width in pixels.
height	number	false	-	The new outer layout height in pixels.

Explicitly resizes the entire layout root and recomputes all splitters and panels.

updateRootSize( force? )

Re-measures the outer container’s bounding rectangle and automatically updates the layout dimensions. Useful after window resize events or parent container style transitions.

newComponent( componentType, componentState?, title? )

argument	type	optional	default	description
componentType	ComponentType	false	-	The registered component type identifier.
componentState	SerializableValue	true	undefined	Optional state object passed to the component container.
title	string	true	undefined	Initial title displayed on the panel’s tab.

Creates a new ComponentItem and places it into the layout hierarchy using default location selectors.

addComponent( componentType, componentState?, title? )

Adds a component to the layout and returns its placed LayoutManagerLocation (index and parent item).

newDragSource( element, itemConfigCallback )

argument	type	optional	default	description
element	HTMLElement	false	-	The DOM element outside the layout (e.g. sidebar menu item) that triggers dragging.
itemConfigCallback	() => ComponentItemConfig	false	-	A callback function returning the item configuration to inject upon drag drop.

Registers a DOM element as an external drag source that can be dragged into the layout workspace.

focusComponent( item, suppressEvent? )

argument	type	optional	default	description
item	ComponentItem	false	-	The ComponentItem instance to receive focus.
suppressEvent	boolean	true	false	Whether to suppress emitting the `focus` event.

Focuses the specified component item. Use layout.clearComponentFocus() to remove active focus.

createPopout( itemConfigOrContentItem, positionAndSize, parentId?, indexInParent? )

Detaches a content item or configuration into an independent browser window ( BrowserPopout).

closeAllOpenPopouts()

Closes all open auxiliary popout windows and reconciles their states back into the main layout.

clear()

Removes all content items and stacks from the layout tree, leaving an empty root container.

destroy()

Recursively destroys all content items, disposes open popouts, removes DOM elements, and detaches all event listeners.