API

This section describes the api object.

constructor
activeGroup	Active group object. activeGroup: undefined | DockviewGroupPanel
activePanel	Active panel object. activePanel: undefined | IDockviewPanel
groups	All group objects. groups: DockviewGroupPanel[]
height	Height of the component. height: number
id	The unique identifier for this instance. Used to manage scope of Drag'n'Drop events. id: string
maximumHeight	Maximum height of the component. maximumHeight: number
maximumWidth	Maximum width of the component. maximumWidth: number
minimumHeight	Minimum height of the component. minimumHeight: number
minimumWidth	Minimum width of the component. minimumWidth: number
onDidActiveGroupChange	Invoked when the active group changes. May be undefined if no group is active. onDidActiveGroupChange: Event<undefined | DockviewGroupPanel>
onDidActivePanelChange	Invoked when the active panel changes. The event carries the active panel (may be undefined if no panel is active) and the DockviewOrigin ('user' vs 'api') of the change. onDidActivePanelChange: Event<DockviewActivePanelChangeEvent>
onDidAddGroup	Invoked when a group is added. May be called multiple times when moving groups. onDidAddGroup: Event<DockviewGroupPanel>
onDidAddPanel	Invoked when a panel is added. May be called multiple times when moving panels. onDidAddPanel: Event<IDockviewPanel>
onDidAddPanelToTabGroup	Invoked when a panel is added to a tab group. onDidAddPanelToTabGroup: Event<DockviewTabGroupPanelChangeEvent>
onDidAddPopoutGroup	Fires when a popout group successfully opens in its own window, carrying the live Window handle. Use it to route focus or attach per-document listeners. Enumerate the current popouts at any time with getPopouts(). onDidAddPopoutGroup: Event<PopoutGroup>
onDidCreateTabGroup	Invoked when a tab group is created in any group. onDidCreateTabGroup: Event<DockviewTabGroupChangeEvent>
onDidDestroyTabGroup	Invoked when a tab group is destroyed in any group. onDidDestroyTabGroup: Event<DockviewTabGroupChangeEvent>
onDidDrop	Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality. onDidDrop: Event<DockviewDidDropEvent>
onDidLayoutChange	Invoked when any layout change occures, an aggregation of many events. onDidLayoutChange: Event<void>
onDidLayoutFromJSON	Invoked after a layout is deserialzied using the fromJSON method. onDidLayoutFromJSON: Event<void>
onDidMaximizedGroupChange	onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>
onDidMovePanel	onDidMovePanel: Event<MovePanelEvent>
onDidMutateLayout	Fires after each top-level structural layout mutation. See onWillMutateLayout. onDidMutateLayout: Event<DockviewLayoutMutationEvent>
onDidOpenPopoutWindowFail	onDidOpenPopoutWindowFail: Event<void>
onDidPopoutGroupPositionChange	onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent>
onDidPopoutGroupSizeChange	onDidPopoutGroupSizeChange: Event<PopoutGroupChangeSizeEvent>
onDidRemoveGroup	Invoked when a group is removed. May be called multiple times when moving groups. onDidRemoveGroup: Event<DockviewGroupPanel>
onDidRemovePanel	Invoked when a panel is removed. May be called multiple times when moving panels. onDidRemovePanel: Event<IDockviewPanel>
onDidRemovePanelFromTabGroup	Invoked when a panel is removed from a tab group. onDidRemovePanelFromTabGroup: Event<DockviewTabGroupPanelChangeEvent>
onDidRemovePopoutGroup	Fires when a popout group is removed — whether the user closed its window or it was docked back programmatically. Symmetric with onDidAddPopoutGroup; not fired during component disposal. onDidRemovePopoutGroup: Event<PopoutGroup>
onDidTabGroupChange	Invoked when a tab group's properties (label, color) change. onDidTabGroupChange: Event<DockviewTabGroupChangeEvent>
onDidTabGroupCollapsedChange	Invoked when a tab group is collapsed or expanded. onDidTabGroupCollapsedChange: Event<DockviewTabGroupChangeEvent>
onUnhandledDragOverEvent	onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>
onWillDragGroup	Invoked before a group is dragged. Calling event.nativeEvent.preventDefault() will prevent the group drag starting. onWillDragGroup: Event<GroupDragEvent>
onWillDragPanel	Invoked before a panel is dragged. Calling event.nativeEvent.preventDefault() will prevent the panel drag starting. onWillDragPanel: Event<TabDragEvent>
onWillDrop	Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and prevent the event from occuring using the standard preventDefault() syntax. Preventing certain events may causes unexpected behaviours, use carefully. onWillDrop: Event<DockviewWillDropEvent>
onWillMutateLayout	Fires before each top-level structural layout mutation (add / remove / move / float / popout / maximize / load / clear). Compound operations (e.g. a drag) fire once. Pair with onDidMutateLayout to bracket a change — useful for undo/redo, autosave and dirty-tracking. onWillMutateLayout: Event<DockviewLayoutMutationEvent>
onWillShowOverlay	Invoked before an overlay is shown indicating a drop target. Calling event.preventDefault() will prevent the overlay being shown and prevent the any subsequent drop event. onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>
panels	All panel objects. panels: IDockviewPanel[]
size	Total number of groups. size: number
tabGroupColors	The active tab-group color palette. Reflects the configured tabGroupColors option, or the built-in defaults when unset. Useful for custom chip renderers that want to roll their own picker UI. tabGroupColors: readonly DockviewTabGroupColorEntry[]
totalPanels	Total number of panels. totalPanels: number
width	Width of the component. width: number
addEdgeGroup	Add an edge group at the given position. Returns the group panel API for the newly created group. Throws if a group already exists there. addEdgeGroup(position: EdgeGroupPosition, options: EdgeGroupOptions): DockviewGroupPanelApi
addFloatingGroup	Add a floating group addFloatingGroup(item: DockviewGroupPanel | IDockviewPanel, options: FloatingGroupOptions): void
addGroup	Add a group and return the created object. addGroup(options: AddGroupOptions): DockviewGroupPanel
addPanel	Add a panel and return the created object. addPanel(options: AddPanelOptions<T>): IDockviewPanel
addPanelToTabGroup	addPanelToTabGroup(options: { groupId: string, index?: number, panelId: string, tabGroupId: string }): void
addPopoutGroup	Add a popout group in a new Window addPopoutGroup(item: DockviewGroupPanel | IDockviewPanel, options: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>
adjacentGroupInDirection	The nearest grid group in a spatial direction from group, comparing group centre points — e.g. the group visually to the left. Floating and popout groups are ignored. Returns undefined when there is no group in that direction. Pair with group.api.boundingBox to build your own spatial navigation. adjacentGroupInDirection(group: IDockviewGroupPanel, direction: GroupNavigationDirection): undefined | IDockviewGroupPanel
clear	Reset the component back to an empty and default state. clear(): void
closeAllGroups	Close all groups and panels. closeAllGroups(): void
createTabGroup	createTabGroup(options: { color?: string, componentParams?: Record<string,unknown>, groupId: string, label?: string }): ITabGroup
dispose	Release resources and teardown component. Do not call when using framework versions of dockview. dispose(): void
dissolveTabGroup	dissolveTabGroup(options: { groupId: string, tabGroupId: string }): void
exitMaximizedGroup	exitMaximizedGroup(): void
focus	Focus the component. Will try to focus an active panel if one exists. focus(): void
fromJSON	Create a component from a serialized object. fromJSON(data: SerializedDockview, options: { reuseExistingPanels: boolean }): void
getEdgeGroup	Get the group panel API for an edge group at the given position. Returns undefined if no edge group is configured at that position. getEdgeGroup(position: EdgeGroupPosition): undefined | DockviewGroupPanelApi
getGroup	Get a group object given a string id. May return undefined. getGroup(id: string): undefined | IDockviewGroupPanel
getPanel	Get a panel object given a string id. May return undefined. getPanel(id: string): undefined | IDockviewPanel
getPopouts	Enumerate the popout groups currently open in their own windows. getPopouts(): PopoutGroup[]
getTabGroupForPanel	getTabGroupForPanel(options: { groupId: string, panelId: string }): undefined | ITabGroup
getTabGroups	getTabGroups(options: DockviewGetTabGroupsOptions): readonly ITabGroup[]
hasMaximizedGroup	hasMaximizedGroup(): boolean
isEdgeGroupVisible	Check whether an edge group is currently visible. isEdgeGroupVisible(position: EdgeGroupPosition): boolean
layout	Force resize the component to an exact width and height. Read about auto-resizing before using. layout(width: number, height: number, force: boolean): void
maximizeGroup	maximizeGroup(panel: IDockviewPanel): void
moveTabGroup	moveTabGroup(options: { groupId: string, index: number, tabGroupId: string }): void
moveToNext	Move the focus progmatically to the next panel or group. moveToNext(options: MovementOptions): void
moveToPrevious	Move the focus progmatically to the previous panel or group. moveToPrevious(options: MovementOptions): void
removeEdgeGroup	Remove an edge group and reclaim its slot in the layout. All panels inside the group are disposed. Throws if no group exists at position. removeEdgeGroup(position: EdgeGroupPosition): void
removeGroup	Remove a group and any panels within the group. removeGroup(group: IDockviewGroupPanel): void
removePanel	Remove a panel given the panel object. removePanel(panel: IDockviewPanel): void
removePanelFromTabGroup	removePanelFromTabGroup(options: { groupId: string, panelId: string }): void
setEdgeGroupVisible	Set the visibility of an edge group. setEdgeGroupVisible(position: EdgeGroupPosition, visible: boolean): void
toJSON	Create a serialized object of the current component. toJSON(): SerializedDockview
updateOptions	updateOptions(options: Partial<DockviewComponentOptions>): void