@deephaven/golden-layout
Version:
A multi-screen javascript Layout manager
367 lines (366 loc) • 14.6 kB
TypeScript
import React from 'react';
import { ColumnItemConfig, DefaultItemConfig, RootItemConfig, RowItemConfig, StackItemConfig } from './config';
import type { ItemConfig, Config, PartialConfig, ComponentConfig, ReactComponentConfig } from './config';
import type { ItemContainer } from './container';
import { BrowserPopout, DragSource, DragSourceFromEvent, DropTargetIndicator } from './controls';
import { AbstractContentItem, ItemArea, Component, Root, RowOrColumn, Stack } from './items';
import { EventEmitter, EventHub } from './utils';
import { DragListenerEvent } from './utils/DragListener';
export type ComponentConstructor<C extends ComponentConfig | ReactComponentConfig = ComponentConfig> = {
new (container: ItemContainer<C>, state: unknown): unknown;
};
/**
* A simpler function type for components that don't use class constructors.
* This is commonly used in tests and legacy code.
*/
export type ComponentFunction = (container: ItemContainer, state?: unknown) => void;
/**
* Item configuration types that are supported inside of `createContentItem` to
* create content items. Note that `ReactComponentConfig` is a valid input type,
* but it gets converted to `ComponentConfig` inside the method before this
* constraint comes into play.
*/
type LayoutItemConfig = ColumnItemConfig | RowItemConfig | StackItemConfig | ComponentConfig;
/**
* The main class that will be exposed as GoldenLayout.
*
* @param config
* @param container Can be a jQuery selector string or a Dom element. Defaults to body
*/
export declare class LayoutManager extends EventEmitter {
/**
* Hook that allows to access private classes
*/
static __lm: {
config: typeof import("./config");
container: typeof import("./container");
controls: typeof import("./controls");
errors: typeof import("./errors");
items: typeof import("./items");
utils: typeof import("./utils");
};
/**
* Returns true if the given item config can be used to create a layout item.
* (Used internally by `createContentItem`).
*/
static isLayoutItemConfig(config: ItemConfig): config is LayoutItemConfig;
/**
* Takes a GoldenLayout configuration object and
* replaces its keys and values recursively with
* one letter codes
*
* @param config A GoldenLayout config object
* @returns minified config
*/
static minifyConfig(config: Config | PartialConfig): Record<string, unknown>;
/**
* Takes a configuration Object that was previously minified
* using minifyConfig and returns its original version
*
* @param minifiedConfig
* @returns the original configuration
*/
static unminifyConfig(config: Record<string, unknown>): Config;
isInitialised: boolean;
private _isFullPage;
private _resizeTimeoutId;
private _components;
private _fallbackComponent?;
private _itemAreas;
private _maximisedItem;
private _maximisePlaceholder;
private _creationTimeoutPassed;
private _subWindowsCreated;
private _dragSources;
private _updatingColumnsResponsive;
private _firstLoad;
private _reactChildMap;
private _reactChildren;
private _initialHeaderHeight;
width: number | null;
height: number | null;
root: Root;
openPopouts: BrowserPopout[];
selectedItem: AbstractContentItem | null;
isSubWindow: boolean;
eventHub: EventHub;
config: Config;
container: JQuery<HTMLElement>;
private _originalContainer;
dropTargetIndicator: DropTargetIndicator | null;
tabDropPlaceholder: JQuery<HTMLElement>;
constructor(config: PartialConfig, container: JQuery<HTMLElement> | HTMLElement | undefined);
/**
* Register a component with the layout manager. If a configuration node
* of type component is reached it will look up componentName and create the
* associated component
*
* {
* type: "component",
* componentName: "EquityNewsFeed",
* componentState: { "feedTopic": "us-bluechips" }
* }
*
* @param name
* @param constructor
* @returns cleanup function to deregister component
*/
registerComponent(name: string, constructor: ComponentConstructor | ComponentFunction | React.Component | React.ComponentType<any>): () => void;
/**
* Set a fallback component to be rendered in place of unregistered components
* @param constructor
*/
setFallbackComponent(constructor: ComponentConstructor | React.ForwardRefExoticComponent<any>): void;
/**
* Creates a layout configuration object based on the the current state
* @param root
* @returns GoldenLayout configuration
*/
toConfig(root?: AbstractContentItem): Config;
/**
* Returns a previously registered component
* @param name The name used
*/
getComponent(name: string): ComponentConstructor<ComponentConfig> | ComponentConstructor<ReactComponentConfig> | ComponentFunction | React.Component<{}, {}, any> | React.ComponentType<{}>;
/**
* Returns a fallback component to render in place of unregistered components
*
* @public
*
* @returns {Function}
*/
getFallbackComponent(): ComponentConstructor<ComponentConfig> | React.ForwardRefExoticComponent<any> | undefined;
/**
* 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
*/
init(): void;
/**
* Adds a react child to the layout manager
* @param id Unique panel id
* @param element The React element
*/
addReactChild(id: string, element: React.ReactNode): void;
/**
* Removes a react child from the layout manager
* Only removes if the elements for the panelId has not been replaced by a different element
* @param id Unique panel id
* @param element The React element
*/
removeReactChild(id: string, element: React.ReactNode): void;
/**
* Gets the react children in the layout
*
* Used in @deephaven/dashboard to mount the react elements
* inside the app's React tree
*
* @returns The react children to mount for this layout manager
*/
getReactChildren(): React.ReactNode;
enableHeaders(): void;
disableHeaders(): void;
/**
* Updates the layout managers size
* @param width width in pixels
* @param height height in pixels
*/
updateSize(width?: number, height?: number): void;
/**
* Destroys the LayoutManager instance itself as well as every ContentItem
* within it. After this is called nothing should be left of the LayoutManager.
*/
destroy(): void;
/**
* Recursively creates new item tree structures based on a provided
* ItemConfiguration object
*
* @public
* @param config ItemConfig
* @param parent The item the newly created item should be a child of
*
* @returns Created item
*/
createContentItem(config: StackItemConfig, parent: AbstractContentItem | null): Stack;
createContentItem(config: ColumnItemConfig | RowItemConfig, parent: AbstractContentItem | null): RowOrColumn;
createContentItem(config: ComponentConfig | ReactComponentConfig, parent: AbstractContentItem | null): Component | Stack;
createContentItem(config: DefaultItemConfig | RootItemConfig, parent: AbstractContentItem | null): never;
createContentItem(config: ItemConfig, parent: AbstractContentItem | null): Component | RowOrColumn | Stack;
/**
* Creates a popout window with the specified content and dimensions
*
* @param configOrContentItem
* @param dimensions A map with width, height, left and top
* @param parentId the id of the element this item will be appended to
* when popIn is called
* @param indexInParent The position of this item within its parent element
* @returns Created popout
*/
createPopout(configOrContentItem: ItemConfig | AbstractContentItem | ItemConfig[], dimensions?: {
width: number;
height: number;
left: number;
top: number;
}, parentId?: string, indexInParent?: number): BrowserPopout | undefined;
/**
* Attaches DragListener to any given DOM element
* and turns it into a way of creating new ContentItems
* by 'dragging' the DOM element into the layout
*
* @param element
* @param itemConfig for the new item to be created, or a function which will provide it
*/
createDragSource(element: JQuery<HTMLElement>, itemConfig: ComponentConfig | (() => ComponentConfig)): DragSource;
/**
* Create a new item in a dragging state, given a starting mouse event to act as the initial position
*
* @param itemConfig for the new item to be created, or a function which will provide it
* @param event used as the starting position for the dragProxy
*/
createDragSourceFromEvent(itemConfig: ItemConfig | (() => ItemConfig), event: DragListenerEvent): DragSourceFromEvent;
/**
* Programmatically selects an item. This deselects
* the currently selected item, selects the specified item
* and emits a selectionChanged event
*
* @param item
* @param _$silent Wheather to notify the item of its selection
*/
selectItem(item: AbstractContentItem, _$silent?: boolean): void;
/*************************
* PACKAGE PRIVATE
*************************/
_$maximiseItem(contentItem: AbstractContentItem): void;
_$minimiseItem(contentItem: AbstractContentItem): void;
/**
* This method is used to get around sandboxed iframe restrictions.
* If 'allow-top-navigation' is not specified in the iframe's 'sandbox' attribute
* (as is the case with codepens) the parent window is forbidden from calling certain
* methods on the child, such as window.close() or setting document.location.href.
*
* This prevented GoldenLayout popouts from popping in in codepens. The fix is to call
* _$closeWindow on the child window's gl instance which (after a timeout to disconnect
* the invoking method from the close call) closes itself.
*/
_$closeWindow(): void;
_$getArea(x: number, y: number): ItemArea | null;
/**
* Creates the drop zones at the edges of the screen
*/
_$createRootItemAreas(): void;
_$calculateItemAreas(): void;
/**
* Takes a contentItem or a configuration and optionally a parent
* item and returns an initialised instance of the contentItem.
* If the contentItem is a function, it is first called
*
* @param contentItemOrConfig
* @param parent Only necessary when passing in config
*/
_$normalizeContentItem(contentItemOrConfig: ItemConfig | AbstractContentItem | (() => AbstractContentItem), parent?: AbstractContentItem): AbstractContentItem | Component | RowOrColumn;
/**
* Iterates through the array of open popout windows and removes the ones
* that are effectively closed. This is necessary due to the lack of reliably
* listening for window.close / unload events in a cross browser compatible fashion.
*/
_$reconcilePopoutWindows(): void;
/***************************
* PRIVATE
***************************/
/**
* Returns a flattened array of all content items,
* regardles of level or type
* @return Flattened array of content items
*/
_getAllContentItems(): AbstractContentItem[];
/**
* Binds to DOM/BOM events on init
*/
_bindEvents(): void;
/**
* Handles setting a class based on window focus, useful for focus indicators
*/
_windowBlur(): void;
_windowFocus(): void;
/**
* Handles the escape key to close maximized items, as long as the focus isn't within an input.
* The escape key has local behaviors in inputs like the Monaco editor or search that we don't
* want to react to as they are not captured.
*
* @private
* @param e The keydown event
*/
_windowKeydown(e: JQuery.KeyDownEvent): void;
/**
* Debounces resize events
*/
_onResize(): void;
/**
* Extends the default config with the user specific settings and applies
* derivations. Please note that there's a seperate method (AbstractContentItem._extendItemNode)
* that deals with the extension of item configs
*
* @param config
* @returns config
*/
_createConfig(inputConfig: PartialConfig): Config;
/**
* This is executed when GoldenLayout detects that it is run
* within a previously opened popout window.
*/
_adjustToWindowMode(): void;
/**
* Creates Subwindows (if there are any). Throws an error
* if popouts are blocked.
*/
_createSubWindows(): void;
_getContainer(): JQuery<HTMLElement>;
/**
* Determines what element the layout will be created in
*/
_setContainer(): void;
/**
* Kicks of the initial, recursive creation chain
*
* @param config GoldenLayout Config
*/
_create(config: Config): void;
/**
* Called when the window is closed or the user navigates away
* from the page
*/
_onUnload(): void;
/**
* Adjusts the number of columns to be lower to fit the screen and still maintain minItemWidth.
*/
_adjustColumnsResponsive(): void;
/**
* Determines if responsive layout should be used.
*
* @returns True if responsive layout should be used; otherwise false.
*/
_useResponsiveLayout(): boolean;
/**
* Adds all children of a node to another container recursively.
* @param container - Container to add child content items to.
* @param node - Node to search for content items.
*/
_addChildContentItemsToContainer(container: AbstractContentItem, node: AbstractContentItem): void;
/**
* Finds all the stack containers.
* @returns The found stack containers.
*/
_findAllStackContainers(): Stack[];
/**
* Finds all the stack containers.
*
* @param stackContainers Set of containers to populate.
* @param node Current node to process.
*/
_findAllStackContainersRecursive(stackContainers: Stack[], node: AbstractContentItem): void;
}
export default LayoutManager;
//# sourceMappingURL=LayoutManager.d.ts.map