golden-layout
Version:
A multi-screen javascript Layout manager
1,495 lines (1,449 loc) • 115 kB
TypeScript
/** @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;