UNPKG

golden-layout

Version:

A multi-screen javascript Layout manager

1,495 lines (1,449 loc) 115 kB
/** @public */ export declare class ApiError extends ExternalError { /** @internal */ constructor(message: string); } /** @internal */ export declare interface AreaLinkedRect { x1: number; x2: number; y1: number; y2: number; } /** * Pops a content item out into a new browser window. * This is achieved by * * - Creating a new configuration with the content item as root element * - Serializing and minifying the configuration * - Opening the current window's URL with the configuration as a GET parameter * - GoldenLayout when opened in the new window will look for the GET parameter * and use it instead of the provided configuration * @public */ export declare class BrowserPopout extends EventEmitter { /** @internal */ private _config; /** @internal */ private _initialWindowSize; /** @internal */ private _layoutManager; /** @internal */ private _popoutWindow; /** @internal */ private _isInitialised; /** @internal */ private _checkReadyInterval; /** * @param _config - GoldenLayout item config * @param _initialWindowSize - A map with width, height, top and left * @internal */ constructor( /** @internal */ _config: ResolvedPopoutLayoutConfig, /** @internal */ _initialWindowSize: Rect, /** @internal */ _layoutManager: LayoutManager); toConfig(): ResolvedPopoutLayoutConfig; getGlInstance(): LayoutManager; /** @internal */ getWindow(): Window; close(): void; /** * Returns the popped out item to its original position. If the original * parent isn't available anymore it falls back to the layout's topmost element */ popIn(): void; /** * Creates the URL and window parameter * and opens a new window * @internal */ private createWindow; /** @internal */ private checkReady; /** * Serialises a map of key:values to a window options string * * @param windowOptions - * * @returns serialised window options * @internal */ private serializeWindowFeatures; /** * Creates the URL for the new window, including the * config GET parameter * * @returns URL * @internal */ private createUrl; /** * Move the newly created window roughly to * where the component used to be. * @internal */ private positionWindow; /** * Callback when the new window is opened and the GoldenLayout instance * within it is initialised * @internal */ private onInitialised; /** * Invoked 50ms after the window unload event * @internal */ private _onClose; } /** @public */ export declare class ComponentContainer extends EventEmitter { /** @internal */ private readonly _config; /** @internal */ private readonly _parent; /** @internal */ private readonly _layoutManager; /** @internal */ private readonly _element; /** @internal */ private readonly _updateItemConfigEvent; /** @internal */ private readonly _showEvent; /** @internal */ private readonly _hideEvent; /** @internal */ private readonly _focusEvent; /** @internal */ private readonly _blurEvent; /** @internal */ private _componentType; /** @internal */ private _component; /** @internal */ private _width; /** @internal */ private _height; /** @internal */ private _isClosable; /** @internal */ private _initialState; /** @internal */ private _state; /** @internal */ private _isHidden; /** @internal */ private _isShownWithZeroDimensions; /** @internal */ private _tab; stateRequestEvent: ComponentContainer.StateRequestEventHandler | undefined; get width(): number | null; get height(): number | null; get parent(): ComponentItem; /** @internal @deprecated use {@link (ComponentContainer:class).componentType} */ get componentName(): JsonValue; get componentType(): JsonValue; get component(): ComponentItem.Component; get tab(): Tab; get title(): string; get layoutManager(): LayoutManager; get isHidden(): boolean; get state(): JsonValue | undefined; /** Return the initial component state */ get initialState(): JsonValue | undefined; /** The inner DOM element where the container's content is intended to live in */ get element(): HTMLElement; /** @internal */ constructor( /** @internal */ _config: ResolvedComponentItemConfig, /** @internal */ _parent: ComponentItem, /** @internal */ _layoutManager: LayoutManager, /** @internal */ _element: HTMLElement, /** @internal */ _updateItemConfigEvent: ComponentContainer.UpdateItemConfigEventHandler, /** @internal */ _showEvent: ComponentContainer.ShowEventHandler, /** @internal */ _hideEvent: ComponentContainer.HideEventHandler, /** @internal */ _focusEvent: ComponentContainer.FocusEventHandler, /** @internal */ _blurEvent: ComponentContainer.BlurEventHandler); /** @internal */ destroy(): void; /** @deprecated use {@link (ComponentContainer:class).element } */ getElement(): HTMLElement; /** * Hides the container's component item (and hence, the container) if not already hidden. * Emits hide event prior to hiding the container. */ hide(): void; /** @internal */ checkEmitHide(): void; /** * Shows the container's component item (and hence, the container) if not visible. * Emits show event prior to hiding the container. */ show(): void; /** * Focus this component in Layout. */ focus(suppressEvent?: boolean): void; /** * Remove focus from this component in Layout. */ blur(suppressEvent?: boolean): void; /** @internal */ checkEmitShow(): void; /** * Set the size from within the container. Traverses up * the item tree until it finds a row or column element * and resizes its items accordingly. * * If this container isn't a descendant of a row or column * it returns false * @param width - The new width in pixel * @param height - The new height in pixel * * @returns resizeSuccesful */ setSize(width: number, height: number): boolean; /** * Closes the container if it is closable. Can be called by * both the component within at as well as the contentItem containing * it. Emits a close event before the container itself is closed. */ close(): void; /** Replaces component without affecting layout */ replaceComponent(itemConfig: ComponentItemConfig): void; /** * Returns the initial component state or the latest passed in setState() * @returns state * @deprecated Use {@link (ComponentContainer:class).initialState} */ getState(): JsonValue | undefined; /** * Merges the provided state into the current one * @deprecated Use {@link (ComponentContainer:class).stateRequestEvent} */ extendState(state: Record<string, unknown>): void; /** * Sets the component state * @deprecated Use {@link (ComponentContainer:class).stateRequestEvent} */ setState(state: JsonValue): void; /** * Set's the components title */ setTitle(title: string): void; /** @internal */ setTab(tab: Tab): void; /** @internal */ setDragSize(width: number, height: number): void; /** * Set's the containers size. Called by the container's component item. * To set the size programmatically from within the component itself, * use the public setSize method * @param width - in px * @param height - in px * @internal */ setSizeToNodeSize(width: number, height: number): void; /** @internal */ private releaseComponent; } /** @public */ export declare namespace ComponentContainer { export type StateRequestEventHandler = (this: void) => JsonValue | undefined; /** @internal */ export type ShowEventHandler = (this: void) => void; /** @internal */ export type HideEventHandler = (this: void) => void; /** @internal */ export type FocusEventHandler = (this: void, suppressEvent: boolean) => void; /** @internal */ export type BlurEventHandler = (this: void, suppressEvent: boolean) => void; /** @internal */ export type UpdateItemConfigEventHandler = (itemConfig: ResolvedComponentItemConfig) => void; } /** @public */ export declare class ComponentItem extends ContentItem { /** @internal */ private _parentItem; /** @internal */ private _reorderEnabled; /** @internal */ private _headerConfig; /** @internal */ private _title; /** @internal */ private readonly _initialWantMaximise; /** @internal */ private _container; /** @internal */ private _tab; /** @internal */ private _focused; /** @internal @deprecated use {@link (ComponentItem:class).componentType} */ get componentName(): JsonValue; get componentType(): JsonValue; get reorderEnabled(): boolean; /** @internal */ get initialWantMaximise(): boolean; get component(): ComponentItem.Component; get container(): ComponentContainer; get parentItem(): ComponentParentableItem; get headerConfig(): ResolvedHeaderedItemConfig.Header | undefined; get title(): string; get tab(): Tab; get focused(): boolean; /** @internal */ constructor(layoutManager: LayoutManager, config: ResolvedComponentItemConfig, /** @internal */ _parentItem: ComponentParentableItem); /** @internal */ destroy(): void; applyUpdatableConfig(config: ResolvedComponentItemConfig): void; toConfig(): ResolvedComponentItemConfig; close(): void; /** @internal */ setDragSize(width: number, height: number): void; /** @internal */ updateSize(): void; /** @internal */ init(): void; /** * Set this component's title * * @public * @param title - */ setTitle(title: string): void; setTab(tab: Tab): void; /** @internal */ hide(): void; /** @internal */ show(): void; /** * Focuses the item if it is not already focused */ focus(suppressEvent?: boolean): void; /** @internal */ setFocused(suppressEvent: boolean): void; /** * Blurs (defocuses) the item if it is focused */ blur(suppressEvent?: boolean): void; /** @internal */ setBlurred(suppressEvent: boolean): void; /** @internal */ protected setParent(parent: ContentItem): void; /** @internal */ private handleUpdateItemConfigEvent; /** @internal */ private updateNodeSize; } /** @public */ export declare namespace ComponentItem { export type Component = unknown; } /** @public */ export declare interface ComponentItemConfig extends HeaderedItemConfig { type: 'component'; readonly content?: []; /** * The type of the component. * @deprecated use {@link (ComponentItemConfig:interface).componentType} instead */ componentName?: string; /** * The type of the component. * `componentType` must be of type `string` if it is registered with any of the following functions: * * {@link (LayoutManager:class).registerComponent} (deprecated) * * {@link (LayoutManager:class).registerComponentConstructor} * * {@link (LayoutManager:class).registerComponentFactoryFunction} */ componentType: JsonValue; /** * The state information with which a component will be initialised with. * Will be passed to the component constructor function and will be the value returned by * container.initialState. */ componentState?: JsonValue; /** * Default: true */ reorderEnabled?: boolean; } /** @public */ export declare namespace ComponentItemConfig { export function resolve(itemConfig: ComponentItemConfig): ResolvedComponentItemConfig; export function componentTypeToTitle(componentType: JsonValue): string; } declare abstract class ComponentParentableItem extends ContentItem { /** @internal */ private _focused; get focused(): boolean; /** @internal */ setFocusedValue(value: boolean): void; abstract setActiveComponentItem(item: ComponentItem, focus: boolean, suppressFocusEvent: boolean): void; } /** @public @deprecated - use {@link (LayoutConfig:interface)} */ export declare type Config = LayoutConfig; /** @public */ export declare class ConfigurationError extends ExternalError { readonly node?: string | undefined; /** @internal */ constructor(message: string, node?: string | undefined); } /** * This is the baseclass that all content items inherit from. * Most methods provide a subset of what the sub-classes do. * * It also provides a number of functions for tree traversal * @public */ export declare abstract class ContentItem extends EventEmitter { readonly layoutManager: LayoutManager; /** @internal */ private _parent; /** @internal */ private readonly _element; /** @internal */ private _type; /** @internal */ private _id; /** @internal */ private _popInParentIds; /** @internal */ private _contentItems; /** @internal */ private _isClosable; /** @internal */ private _pendingEventPropagations; /** @internal */ private _throttledEvents; /** @internal */ private _isInitialised; /** @internal */ width: number; /** @internal */ minWidth: number; /** @internal */ height: number; /** @internal */ minHeight: number; isGround: boolean; isRow: boolean; isColumn: boolean; isStack: boolean; isComponent: boolean; get type(): ItemType; get id(): string; /** @internal */ get popInParentIds(): string[]; get parent(): ContentItem | null; get contentItems(): ContentItem[]; get isClosable(): boolean; get element(): HTMLElement; get isInitialised(): boolean; static isStack(item: ContentItem): item is Stack; static isComponentItem(item: ContentItem): item is ComponentItem; static isComponentParentableItem(item: ContentItem): item is ComponentParentableItem; /** @internal */ constructor(layoutManager: LayoutManager, config: ResolvedItemConfig, /** @internal */ _parent: ContentItem | null, /** @internal */ _element: HTMLElement); /** * Updaters the size of the component and its children, called recursively * @internal */ abstract updateSize(): void; /** * Removes a child node (and its children) from the tree */ removeChild(contentItem: ContentItem, keepChild?: boolean): void; /** * Sets up the tree structure for the newly added child * The responsibility for the actual DOM manipulations lies * with the concrete item * * @param contentItem - * @param index - If omitted item will be appended * @param suspendResize - Used by descendent implementations */ addChild(contentItem: ContentItem, index?: number | null, suspendResize?: boolean): number; /** * Replaces oldChild with newChild * @param oldChild - * @param newChild - * @internal */ replaceChild(oldChild: ContentItem, newChild: ContentItem, destroyOldChild?: boolean): void; /** * Convenience method. * Shorthand for this.parent.removeChild( this ) */ remove(): void; /** * Removes the component from the layout and creates a new * browser window with the component and its children inside */ popout(): BrowserPopout; abstract toConfig(): ResolvedItemConfig; /** @internal */ calculateConfigContent(): ResolvedItemConfig[]; /** @internal */ highlightDropZone(x: number, y: number, area: AreaLinkedRect): void; /** @internal */ onDrop(contentItem: ContentItem, area: ContentItem.Area): void; /** @internal */ show(): void; /** * Destroys this item ands its children * @internal */ destroy(): void; /** * Returns the area the component currently occupies * @internal */ getElementArea(element?: HTMLElement): ContentItem.Area | null; /** * The tree of content items is created in two steps: First all content items are instantiated, * then init is called recursively from top to bottem. This is the basic init function, * it can be used, extended or overwritten by the content items * * Its behaviour depends on the content item * @internal */ init(): void; /** @internal */ protected setParent(parent: ContentItem): void; /** @internal */ addPopInParentId(id: string): void; /** @internal */ protected initContentItems(): void; /** @internal */ protected hide(): void; /** @internal */ protected updateContentItemsSize(): void; /** * creates all content items for this node at initialisation time * PLEASE NOTE, please see addChild for adding contentItems at runtime * @internal */ private createContentItems; /** * Called for every event on the item tree. Decides whether the event is a bubbling * event and propagates it to its parent * * @param name - The name of the event * @param event - * @internal */ private propagateEvent; tryBubbleEvent(name: string, args: unknown[]): void; /** * All raw events bubble up to the Ground element. Some events that * are propagated to - and emitted by - the layoutManager however are * only string-based, batched and sanitized to make them more usable * * @param name - The name of the event * @internal */ private scheduleEventPropagationToLayoutManager; /** * Callback for events scheduled by _scheduleEventPropagationToLayoutManager * * @param name - The name of the event * @internal */ private propagateEventToLayoutManager; } /** @public */ export declare namespace ContentItem { /** @internal */ export interface Area extends AreaLinkedRect { surface: number; contentItem: ContentItem; } } /** @internal */ declare class DragListener extends EventEmitter { private _eElement; private _timeout; private _allowableTargets; private _oDocument; private _eBody; private _nDelay; private _nDistance; private _nX; private _nY; private _nOriginalX; private _nOriginalY; private _dragging; private _mouseTouchTracking; private _mouseDownEventListener; private _mouseMoveEventListener; private _mouseUpEventListener; private _touchStartEventListener; private _touchMoveEventListener; private _touchEndEventListener; constructor(_eElement: HTMLElement, extraAllowableChildTargets: HTMLElement[]); destroy(): void; cancelDrag(): void; private onMouseDown; private onTouchStart; private processMouseDownTouchStart; private onMouseMove; private onTouchMove; private processDragMove; private onMouseUp; private onTouchEnd; private processDragStop; private checkRemoveMouseTouchTrackingEventListeners; private startDrag; private getMouseCoordinates; private getTouchCoordinates; } /** @internal */ declare namespace DragListener { interface MouseTouchCoordinates { x: number; y: number; } } /** * Allows for any DOM item to create a component on drag * start to be dragged into the Layout * @public */ export declare class DragSource { /** @internal */ private _layoutManager; /** @internal */ private readonly _element; /** @internal */ private readonly _extraAllowableChildTargets; /** @internal */ private _componentTypeOrFtn; /** @internal */ private _componentState; /** @internal */ private _title; /** @internal */ private _dragListener; /** @internal */ private _dummyGroundContainer; /** @internal */ private _dummyGroundContentItem; /** @internal */ constructor( /** @internal */ _layoutManager: LayoutManager, /** @internal */ _element: HTMLElement, /** @internal */ _extraAllowableChildTargets: HTMLElement[], /** @internal */ _componentTypeOrFtn: JsonValue | (() => DragSource.ComponentItemConfig), /** @internal */ _componentState: JsonValue | undefined, /** @internal */ _title: string | undefined); /** * Disposes of the drag listeners so the drag source is not usable any more. * @internal */ destroy(): void; /** * Called initially and after every drag * @internal */ private createDragListener; /** * Callback for the DragListener's dragStart event * * @param x - The x position of the mouse on dragStart * @param y - The x position of the mouse on dragStart * @internal */ private onDragStart; /** @internal */ private onDragStop; /** * Called after every drag and when the drag source is being disposed of. * @internal */ private removeDragListener; } /** @public */ export declare namespace DragSource { export interface ComponentItemConfig { type: JsonValue; state?: JsonValue; title?: string; } } /** @internal */ declare class DropTargetIndicator { private _element; constructor(); destroy(): void; highlightArea(area: AreaLinkedRect): void; hide(): void; } /** * A generic and very fast EventEmitter implementation. On top of emitting the actual event it emits an * {@link (EventEmitter:namespace).ALL_EVENT} event for every event triggered. This allows to hook into it and proxy events forwards * @public */ export declare class EventEmitter { /** @internal */ private _allEventSubscriptions; /** @internal */ private _subscriptionsMap; tryBubbleEvent(name: string, args: unknown[]): void; /** * Emit an event and notify listeners * * @param eventName - The name of the event * @param args - Additional arguments that will be passed to the listener */ emit<K extends keyof EventEmitter.EventParamsMap>(eventName: K, ...args: EventEmitter.EventParamsMap[K]): void; /** @internal */ emitUnknown(eventName: string, ...args: EventEmitter.UnknownParams): void; emitBaseBubblingEvent<K extends keyof EventEmitter.EventParamsMap>(eventName: K): void; /** @internal */ emitUnknownBubblingEvent(eventName: string): void; /** * Removes a listener for an event, or all listeners if no callback and context is provided. * @param eventName - The name of the event * @param callback - The previously registered callback method (optional) */ removeEventListener<K extends keyof EventEmitter.EventParamsMap>(eventName: K, callback: EventEmitter.Callback<K>): void; off<K extends keyof EventEmitter.EventParamsMap>(eventName: K, callback: EventEmitter.Callback<K>): void; /** * Alias for off */ unbind: <K extends keyof EventEmitter.EventParamsMap>(eventName: K, callback: EventEmitter.Callback<K>) => void; /** * Alias for emit */ trigger: <K extends keyof EventEmitter.EventParamsMap>(eventName: K, ...args: EventEmitter.EventParamsMap[K]) => void; /** * Listen for events * * @param eventName - The name of the event to listen to * @param callback - The callback to execute when the event occurs */ addEventListener<K extends keyof EventEmitter.EventParamsMap>(eventName: K, callback: EventEmitter.Callback<K>): void; on<K extends keyof EventEmitter.EventParamsMap>(eventName: K, callback: EventEmitter.Callback<K>): void; /** @internal */ private addUnknownEventListener; /** @internal */ private removeUnknownEventListener; /** @internal */ private removeSubscription; /** @internal */ private emitAllEvent; } /** @public */ export declare namespace EventEmitter { /** * The name of the event that's triggered for every event */ const ALL_EVENT = "__all"; const headerClickEventName = "stackHeaderClick"; const headerTouchStartEventName = "stackHeaderTouchStart"; /** @internal */ export type UnknownCallback = (this: void, ...args: UnknownParams) => void; export type Callback<K extends keyof EventEmitter.EventParamsMap> = (this: void, ...args: EventParamsMap[K]) => void; export interface EventParamsMap { "__all": UnknownParams; "activeContentItemChanged": UnknownParam; "close": NoParams; "closed": NoParams; "destroy": NoParams; "drag": DragParams; "dragStart": DragStartParams; "dragStop": DragStopParams; "hide": NoParams; "initialised": NoParams; "itemDropped": UnknownParam; "maximised": NoParams; "minimised": NoParams; "open": NoParams; "popIn": NoParams; "resize": NoParams; "show": NoParams; /** @deprecated - use show instead */ "shown": NoParams; "stateChanged": NoParams; "tab": UnknownParam; "tabCreated": UnknownParam; "titleChanged": StringParam; "windowClosed": UnknownParam; "windowOpened": UnknownParam; "beforeComponentRelease": BeforeComponentReleaseParams; "beforeItemDestroyed": BubblingEventParam; "itemCreated": BubblingEventParam; "itemDestroyed": BubblingEventParam; "focus": BubblingEventParam; "blur": BubblingEventParam; "stackHeaderClick": ClickBubblingEventParam; "stackHeaderTouchStart": TouchStartBubblingEventParam; } export type UnknownParams = unknown[]; export type NoParams = []; export type UnknownParam = [unknown]; export type BubblingEventParam = [EventEmitter.BubblingEvent]; export type StringParam = [string]; export type DragStartParams = [originalX: number, originalY: number]; export type DragStopParams = [event: DragEvent]; export type DragParams = [offsetX: number, offsetY: number, event: DragEvent]; export type BeforeComponentReleaseParams = [component: unknown]; export type ClickBubblingEventParam = [ClickBubblingEvent]; export type TouchStartBubblingEventParam = [TouchStartBubblingEvent]; export class BubblingEvent { /** @internal */ private readonly _name; /** @internal */ private readonly _target; /** @internal */ private _isPropagationStopped; get name(): string; get target(): EventEmitter; /** @deprecated Use {@link (EventEmitter:namespace).(BubblingEvent:class).target} instead */ get origin(): EventEmitter; get isPropagationStopped(): boolean; /** @internal */ constructor( /** @internal */ _name: string, /** @internal */ _target: EventEmitter); stopPropagation(): void; } export class ClickBubblingEvent extends BubblingEvent { /** @internal */ private readonly _mouseEvent; get mouseEvent(): MouseEvent; /** @internal */ constructor(name: string, target: EventEmitter, /** @internal */ _mouseEvent: MouseEvent); } export class TouchStartBubblingEvent extends BubblingEvent { /** @internal */ private readonly _touchEvent; get touchEvent(): TouchEvent; /** @internal */ constructor(name: string, target: EventEmitter, /** @internal */ _touchEvent: TouchEvent); } export interface DragEvent { mouseEvent: MouseEvent | undefined; touchEvent: TouchEvent | undefined; pageX: number; pageY: number; } } /** @internal */ declare class EventHub extends EventEmitter { private _layoutManager; private _childEventSource; private _dontPropagateToParent; private _childEventListener; constructor(_layoutManager: LayoutManager); /** * Destroys the EventHub */ destroy(): void; /** * Called by the parent layout. */ onEventFromParent(eventName: string, ...args: unknown[]): void; /** * Called on every event emitted on this eventHub, regardles of origin. */ private onEventFromThis; /** * Callback for child events raised on the window */ private onEventFromChild; /** * Propagates the event to the parent by emitting * it on the parent's DOM window */ private propagateToParent; /** * Propagate events to children */ private propagateToChildren; } /** @internal */ declare namespace EventHub { const ChildEventName = "gl_child_event"; type ChildEventDetail = { layoutManager: LayoutManager; eventName: string; args: unknown[]; }; type ChildEventInit = CustomEventInit<ChildEventDetail>; } /** @public */ export declare abstract class ExternalError extends Error { readonly type: string; /** @internal */ constructor(type: string, message: string); } /** @public */ export declare class GoldenLayout extends LayoutManager { /** @internal */ private _subWindowsCreated; /** @internal */ private _creationTimeoutPassed; /** * @param container - A Dom HTML element. Defaults to body */ constructor(container?: HTMLElement); /** @deprecated specify layoutConfig in {@link (LayoutManager:class).loadLayout} */ constructor(config: LayoutConfig, container?: HTMLElement); /** * Creates the actual layout. Must be called after all initial components * are registered. Recurses through the configuration and sets up * the item tree. * * If called before the document is ready it adds itself as a listener * to the document.ready event * @deprecated LayoutConfig should not be loaded in {@link (LayoutManager:class)} constructor, but rather in a * {@link (LayoutManager:class).loadLayout} call. If LayoutConfig is not specified in {@link (LayoutManager:class)} constructor, * then init() will be automatically called internally and should not be called externally. */ init(): void; /** * Creates Subwindows (if there are any). Throws an error * if popouts are blocked. * @internal */ private createSubWindows; /** * This is executed when GoldenLayout detects that it is run * within a previously opened popout window. * @internal */ private adjustToWindowMode; } /** @public */ export declare namespace GoldenLayout { /** @internal */ export function createConfig(configOrOptionalContainer: LayoutConfig | HTMLElement | undefined, containerElement?: HTMLElement): LayoutManager.ConstructorParameters; } /** * GroundItem is the ContentItem whose one child is the root ContentItem (Root is planted in Ground). * (Previously it was called root however this was incorrect as its child is the root item) * There is only one instance of GroundItem and it is automatically created by the Layout Manager * @internal */ declare class GroundItem extends ComponentParentableItem { private readonly _childElementContainer; private readonly _containerElement; constructor(layoutManager: LayoutManager, rootItemConfig: ResolvedRootItemConfig | undefined, containerElement: HTMLElement); init(): void; /** * Loads a new Layout * Internal only. To load a new layout with API, use {@link (LayoutManager:class).loadLayout} */ loadRoot(rootItemConfig: ResolvedRootItemConfig | undefined): void; /** * Adds a ContentItem child to root ContentItem. * Internal only. To load a add with API, use {@link (LayoutManager:class).addItem} * @returns -1 if added as root otherwise index in root ContentItem's content */ addItem(itemConfig: RowOrColumnItemConfig | StackItemConfig | ComponentItemConfig, index?: number): number; loadComponentAsRoot(itemConfig: ComponentItemConfig): void; /** * Adds a Root ContentItem. * Internal only. To replace Root ContentItem with API, use {@link (LayoutManager:class).loadLayout} */ addChild(contentItem: ContentItem, index?: number): number; /** @internal */ calculateConfigContent(): ResolvedRootItemConfig[]; /** @internal */ setSize(width: number, height: number): void; /** * Adds a Root ContentItem. * Internal only. To replace Root ContentItem with API, use {@link (LayoutManager:class).updateRootSize} */ updateSize(): void; createSideAreas(): GroundItem.Area[]; highlightDropZone(x: number, y: number, area: AreaLinkedRect): void; onDrop(contentItem: ContentItem, area: GroundItem.Area): void; dock(): void; validateDocking(): void; getAllContentItems(): ContentItem[]; getConfigMaximisedItems(): ContentItem[]; getItemsByPopInParentId(popInParentId: string): ContentItem[]; toConfig(): ResolvedItemConfig; setActiveComponentItem(item: ComponentItem, focus: boolean, suppressFocusEvent: boolean): void; private updateNodeSize; private clearRoot; private deepGetAllContentItems; private deepFilterContentItems; } /** @internal */ declare namespace GroundItem { interface Area extends ContentItem.Area { side: keyof typeof Area.Side; } namespace Area { const enum Side { y2 = 0, x2 = 1, y1 = 2, x1 = 3 } type Sides = { [side in keyof typeof Side]: keyof typeof Side; }; const oppositeSides: Sides; } function createElement(document: Document): HTMLDivElement; } /** * This class represents a header above a Stack ContentItem. * @public */ export declare class Header extends EventEmitter { /** @internal */ private _layoutManager; /** @internal */ private _parent; /** @internal */ private readonly _configClosable; /** @internal */ private _getActiveComponentItemEvent; /** @internal */ private _dockEvent; /** @internal */ private _popoutEvent; /** @internal */ private _maximiseToggleEvent; /** @internal */ private _clickEvent; /** @internal */ private _touchStartEvent; /** @internal */ private _componentRemoveEvent; /** @internal */ private _componentFocusEvent; /** @internal */ private _componentDragStartEvent; /** @internal */ private readonly _tabsContainer; /** @internal */ private readonly _element; /** @internal */ private readonly _controlsContainerElement; /** @internal */ private readonly _show; /** @internal */ private readonly _popoutEnabled; /** @internal */ private readonly _popoutLabel; /** @internal */ private readonly _dockEnabled; /** @internal */ private readonly _dockLabel; /** @internal */ private readonly _maximiseEnabled; /** @internal */ private readonly _maximiseLabel; /** @internal */ private readonly _minimiseEnabled; /** @internal */ private readonly _minimiseLabel; /** @internal */ private readonly _closeEnabled; /** @internal */ private readonly _closeLabel; /** @internal */ private readonly _tabDropdownEnabled; /** @internal */ private readonly _tabDropdownLabel; /** @internal */ private readonly _tabControlOffset; /** @internal */ private readonly _clickListener; /** @internal */ private readonly _touchStartListener; /** @internal */ private readonly _documentMouseUpListener; /** @internal */ private _rowColumnClosable; /** @internal */ private _canRemoveComponent; /** @internal */ private _side; /** @internal */ private _leftRightSided; /** @internal */ private readonly _closeButton; /** @internal */ private readonly _dockButton; /** @internal */ private readonly _popoutButton; /** @internal */ private readonly _tabDropdownButton; /** @internal */ private readonly _maximiseButton; /** @internal */ get show(): boolean; /** @internal */ get side(): Side; /** @internal */ get leftRightSided(): boolean; /** @internal */ get dockEnabled(): boolean; get layoutManager(): LayoutManager; get parent(): Stack; get tabs(): Tab[]; /** * @deprecated use {@link (Stack:class).getActiveComponentItem} */ get activeContentItem(): ContentItem | null; get element(): HTMLElement; /** @deprecated use {@link (Header:class).tabsContainerElement} */ get tabsContainer(): HTMLElement; get tabsContainerElement(): HTMLElement; get controlsContainerElement(): HTMLElement; /** @deprecated use {@link (Header:class).controlsContainerElement} */ get controlsContainer(): HTMLElement; /** @internal */ constructor( /** @internal */ _layoutManager: LayoutManager, /** @internal */ _parent: Stack, settings: Header.Settings, /** @internal */ _configClosable: boolean, /** @internal */ _getActiveComponentItemEvent: Header.GetActiveComponentItemEvent, closeEvent: Header.CloseEvent, /** @internal */ _dockEvent: Header.DockEvent | undefined, /** @internal */ _popoutEvent: Header.PopoutEvent | undefined, /** @internal */ _maximiseToggleEvent: Header.MaximiseToggleEvent | undefined, /** @internal */ _clickEvent: Header.ClickEvent | undefined, /** @internal */ _touchStartEvent: Header.TouchStartEvent | undefined, /** @internal */ _componentRemoveEvent: Header.ComponentRemoveEvent | undefined, /** @internal */ _componentFocusEvent: Header.ComponentFocusEvent | undefined, /** @internal */ _componentDragStartEvent: Header.ComponentDragStartEvent | undefined); /** * Destroys the entire header * @internal */ destroy(): void; /** * Creates a new tab and associates it with a contentItem * @param index - The position of the tab * @internal */ createTab(componentItem: ComponentItem, index: number): void; /** * Finds a tab based on the contentItem its associated with and removes it. * Cannot remove tab if it has the active ComponentItem * @internal */ removeTab(componentItem: ComponentItem): void; /** @internal */ processActiveComponentChanged(newActiveComponentItem: ComponentItem): void; /** @internal */ setSide(value: Side): void; /** * Programmatically set closability. * @param value - Whether to enable/disable closability. * @returns Whether the action was successful * @internal */ setRowColumnClosable(value: boolean): void; /** * Updates the header's closability. If a stack/header is able * to close, but has a non closable component added to it, the stack is no * longer closable until all components are closable. * @internal */ updateClosability(): void; /** * Programmatically set ability to dock. * @param isDockable - Whether to enable/disable ability to dock. * @returns Whether the action was successful * @internal */ setDockable(isDockable: boolean): boolean; /** @internal */ applyFocusedValue(value: boolean): void; /** @internal */ processMaximised(): void; /** @internal */ processMinimised(): void; /** * Pushes the tabs to the tab dropdown if the available space is not sufficient * @internal */ updateTabSizes(): void; /** @internal */ private handleTabInitiatedComponentRemoveEvent; /** @internal */ private handleTabInitiatedComponentFocusEvent; /** @internal */ private handleTabInitiatedDragStartEvent; /** @internal */ private processTabDropdownActiveChanged; /** @internal */ private handleButtonDockEvent; /** @internal */ private handleButtonPopoutEvent; /** @internal */ private handleButtonMaximiseToggleEvent; /** * Invoked when the header's background is clicked (not it's tabs or controls) * @internal */ private onClick; /** * Invoked when the header's background is touched (not it's tabs or controls) * @internal */ private onTouchStart; /** @internal */ private notifyClick; /** @internal */ private notifyTouchStart; } /** @public */ export declare namespace Header { /** @internal */ export type GetActiveComponentItemEvent = (this: void) => ComponentItem; /** @internal */ export type CloseEvent = (this: void) => void; /** @internal */ export type DockEvent = (this: void) => void; /** @internal */ export type PopoutEvent = (this: void) => void; /** @internal */ export type MaximiseToggleEvent = (this: void) => void; /** @internal */ export type ClickEvent = (this: void, ev: MouseEvent) => void; /** @internal */ export type TouchStartEvent = (this: void, ev: TouchEvent) => void; /** @internal */ export type ComponentRemoveEvent = (this: void, componentItem: ComponentItem) => void; /** @internal */ export type ComponentFocusEvent = (this: void, componentItem: ComponentItem) => void; /** @internal */ export type ComponentDragStartEvent = (this: void, x: number, y: number, dragListener: DragListener, componentItem: ComponentItem) => void; /** @internal */ export type StateChangedEvent = (this: void) => void; /** @internal */ export interface Settings { show: boolean; side: Side; popoutEnabled: boolean; popoutLabel: string; dockEnabled: boolean; dockLabel: string; maximiseEnabled: boolean; maximiseLabel: string; minimiseEnabled: boolean; minimiseLabel: string; closeEnabled: boolean; closeLabel: string; tabDropdownEnabled: boolean; tabDropdownLabel: string; } } /** @public */ export declare interface HeaderedItemConfig extends ItemConfig { /** @deprecated use {@link (HeaderedItemConfig:namespace).(Header:interface).show} instead */ hasHeaders?: boolean; header?: HeaderedItemConfig.Header; maximised?: boolean; } /** @public */ export declare namespace HeaderedItemConfig { export interface Header { show?: false | Side; popout?: false | string; dock?: false | string; maximise?: false | string; close?: string; minimise?: string; tabDropdown?: false | string; } export namespace Header { export function resolve(header: Header | undefined, hasHeaders: boolean | undefined): ResolvedHeaderedItemConfig.Header | undefined; } export function resolveIdAndMaximised(config: HeaderedItemConfig): { id: string; maximised: boolean; }; } /** @public */ export declare const enum I18nStringId { PopoutCannotBeCreatedWithGroundItemConfig = 0, PleaseRegisterAConstructorFunction = 1, ComponentIsAlreadyRegistered = 2, ItemConfigIsNotTypeComponent = 3 } /** @public */ export declare namespace I18nStrings { const idCount: number; export function checkInitialise(): void; } /** @public */ export declare const i18nStrings: string[]; /** @public */ export declare interface ItemConfig { /** * The type of the item. Possible values are 'row', 'column', 'stack', 'component'. */ type: ItemType; /** * An array of configurations for items that will be created as children of this item. */ content?: ItemConfig[]; /** * The width of this item, relative to the other children of its parent in percent */ width?: number; /** * The minimum width of this item in pixels * CAUTION - Not tested - do not use */ minWidth?: number; /** * The height of this item, relative to the other children of its parent in percent */ height?: number; /** * The minimum height of this item in pixels * CAUTION - Not tested - do not use */ minHeight?: number; /** * A string that can be used to identify a ContentItem. * Do NOT assign an array. This only exists for legacy purposes. If an array is assigned, the first element * will become the id. */ id?: string; /** * Determines if the item is closable. If false, the x on the items tab will be hidden and container.close() * will return false * Default: true */ isClosable?: boolean; /** * The title of the item as displayed on its tab and on popout windows * Default: componentType.toString() or '' */ title?: string; } /** @public */ export declare namespace ItemConfig { export function resolve(itemConfig: ItemConfig): ResolvedItemConfig; export function resolveContent(content: ItemConfig[] | undefined): ResolvedItemConfig[]; export function resolveId(id: string | string[] | undefined): string; export function isGround(config: ItemConfig): config is ItemConfig; export function isRow(config: ItemConfig): config is ItemConfig; export function isColumn(config: ItemConfig): config is ItemConfig; export function isStack(config: ItemConfig): config is ItemConfig; export function isComponent(config: ItemConfig): config is ComponentItemConfig; } /** @public */ export declare type ItemType = 'ground' | 'row' | 'column' | 'stack' | 'component'; /** @public */ export declare namespace ItemType { const ground = "ground"; const row = "row"; const column = "column"; const stack = "stack"; const component = "component"; } /** @public */ export declare interface Json { [name: string]: JsonValue; } /** @public */ export declare type JsonValue = string | number | boolean | null | Json | object | JsonValueArray; /** @public */ export declare namespace JsonValue { export function isJson(value: JsonValue): value is Json; export function isJsonObject(value: JsonValue): value is Json | object; } /** @public */ export declare type JsonValueArray = Array<JsonValue>; /** @public */ export declare interface LayoutConfig { root: RootItemConfig; /** @deprecated Use {@link (LayoutConfig:interface).root} */ content?: (RowOrColumnItemConfig | StackItemConfig | ComponentItemConfig)[]; openPopouts?: PopoutLayoutConfig[]; dimensions?: LayoutConfig.Dimensions; settings?: LayoutConfig.Settings; /** @deprecated use {@link (LayoutConfig:interface).header} instead */ labels?: LayoutConfig.Labels; header?: LayoutConfig.Header; } /** Use to specify LayoutConfig with defaults or deserialise a LayoutConfig. * Deserialisation will handle backwards compatibility. * Note that LayoutConfig should be used for serialisation (not LayoutConfig) * @public */ export declare namespace LayoutConfig { export interface Settings { /** * @deprecated use ${@link (LayoutConfig:namespace).(Header:interface).show} instead */ hasHeaders?: boolean; /** * Constrains the area in which items can be dragged to the layout's container. Will be set to false * automatically when layout.createDragSource() is called. * Default: true */ constrainDragToContainer?: boolean; /** * If true, the user can re-arrange the layout by dragging items by their tabs to the desired location. * Can be overridden by ItemConfig.reorderEnabled for specific ItemConfigs * Default: true */ reorderEnabled?: boolean; /** * Decides what will be opened in a new window if the user clicks the popout icon. If true the entire stack will * be transferred to the new window, if false only the active component will be opened. * Default: false */ popoutWholeStack?: boolean; /** * Specifies if an error is thrown when a popout is blocked by the browser (e.g. by opening it programmatically). * If false, the popout call will fail silently. * Default: true */ blockedPopoutsThrowError?: boolean;