dockview-core 4.13.1 → 5.1.0

package/dist/esm/api/dockviewGroupPanelApi.d.ts

@@ -2,6 +2,7 @@ import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
+import { DockviewHeaderPosition } from '../dockview/options';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl, SizeEvent } from './gridviewPanelApi';
 export interface DockviewGroupMoveParams {
@@ -25,6 +26,8 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
      */
     getWindow(): Window;
     moveTo(options: DockviewGroupMoveParams): void;
+    setHeaderPosition(position: DockviewHeaderPosition): void;
+    getHeaderPosition(): DockviewHeaderPosition;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -46,6 +49,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     setSize(event: SizeEvent): void;
     close(): void;
     getWindow(): Window;
+    setHeaderPosition(position: DockviewHeaderPosition): void;
+    getHeaderPosition(): DockviewHeaderPosition;
     moveTo(options: DockviewGroupMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -1,6 +1,6 @@
 import { positionToDirection } from '../dnd/droptarget';
 import { Emitter } from '../events';
-import { GridviewPanelApiImpl } from './gridviewPanelApi';
+import { GridviewPanelApiImpl, } from './gridviewPanelApi';
 const NOT_INITIALIZED_MESSAGE = 'dockview: DockviewGroupPanelApiImpl not initialized';
 export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     get location() {
@@ -41,6 +41,18 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
             ? this.location.getWindow()
             : window;
     }
+    setHeaderPosition(position) {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        this._group.model.headerPosition = position;
+    }
+    getHeaderPosition() {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        return this._group.model.headerPosition;
+    }
     moveTo(options) {
         var _a, _b, _c, _d;
         if (!this._group) {
@@ -55,7 +67,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
             to: {
                 group,
                 position: options.group
-                    ? (_d = options.position) !== null && _d !== void 0 ? _d : 'center'
+                    ? ((_d = options.position) !== null && _d !== void 0 ? _d : 'center')
                     : 'center',
                 index: options.index,
             },

package/dist/esm/api/dockviewPanelApi.js

@@ -62,7 +62,7 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
             to: {
                 group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
                 position: options.group
-                    ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
+                    ? ((_b = options.position) !== null && _b !== void 0 ? _b : 'center')
                     : 'center',
                 index: options.index,
             },

package/dist/esm/constants.js

@@ -1,3 +1,8 @@
 export const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
-export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+export const DEFAULT_FLOATING_GROUP_POSITION = {
+    left: 100,
+    top: 100,
+    width: 300,
+    height: 300,
+};
 export const DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/esm/dnd/abstractDragHandler.js

@@ -21,7 +21,9 @@ export class DragHandler extends CompositeDisposable {
     }
     configure() {
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            if (event.defaultPrevented || this.isCancelled(event) || this.disabled) {
+            if (event.defaultPrevented ||
+                this.isCancelled(event) ||
+                this.disabled) {
                 event.preventDefault();
                 return;
             }

package/dist/esm/dnd/droptarget.js

@@ -40,10 +40,10 @@ function checkBoundsChanged(element, bounds) {
     const widthPx = `${Math.round(width)}px`;
     const heightPx = `${Math.round(height)}px`;
     // Check if position or size changed (back to traditional method)
-    return element.style.top !== topPx ||
+    return (element.style.top !== topPx ||
         element.style.left !== leftPx ||
         element.style.width !== widthPx ||
-        element.style.height !== heightPx;
+        element.style.height !== heightPx);
 }
 export class WillShowOverlayEvent extends DockviewEvent {
     get nativeEvent() {

package/dist/esm/dockview/components/popupService.js

@@ -43,6 +43,8 @@ export class PopupService extends CompositeDisposable {
                 return; // clicked within popover
             }
             this.close();
+        }), addDisposableListener(window, 'resize', () => {
+            this.close();
         }));
         requestAnimationFrame(() => {
             shiftAbsoluteElementIntoView(wrapper, this.root);

package/dist/esm/dockview/components/titlebar/tabs.d.ts

@@ -4,6 +4,7 @@ import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewHeaderDirection } from '../../options';
 import { Tab } from '../tab/tab';
 import { TabDragEvent, TabDropIndexEvent } from './tabsContainer';
 export declare class Tabs extends CompositeDisposable {
@@ -12,9 +13,11 @@ export declare class Tabs extends CompositeDisposable {
     private readonly _element;
     private readonly _tabsList;
     private readonly _observerDisposable;
+    private readonly _scrollbar;
     private _tabs;
     private selectedIndex;
     private _showTabsOverflowControl;
+    private _direction;
     private readonly _onTabDragStart;
     readonly onTabDragStart: Event<TabDragEvent>;
     private readonly _onDrop;
@@ -32,6 +35,8 @@ export declare class Tabs extends CompositeDisposable {
     get panels(): string[];
     get size(): number;
     get tabs(): Tab[];
+    get direction(): DockviewHeaderDirection;
+    set direction(value: DockviewHeaderDirection);
     constructor(group: DockviewGroupPanel, accessor: DockviewComponent, options: {
         showTabsOverflowControl: boolean;
     });

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -1,5 +1,5 @@
 import { getPanelData } from '../../../dnd/dataTransfer';
-import { isChildEntirelyVisibleWithinParent, OverflowObserver, } from '../../../dom';
+import { addClasses, isChildEntirelyVisibleWithinParent, OverflowObserver, removeClasses, } from '../../../dom';
 import { addDisposableListener, Emitter } from '../../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { Scrollbar } from '../../../scrollbar';
@@ -36,14 +36,36 @@ export class Tabs extends CompositeDisposable {
     get tabs() {
         return this._tabs.map((_) => _.value);
     }
+    get direction() {
+        return this._direction;
+    }
+    set direction(value) {
+        if (this._direction === value) {
+            return;
+        }
+        this._direction = value;
+        if (this._scrollbar) {
+            this._scrollbar.orientation = value;
+        }
+        removeClasses(this._tabsList, 'dv-horizontal', 'dv-vertical');
+        if (value === 'vertical') {
+            addClasses(this._tabsList, 'dv-tabs-container-vertical', 'dv-vertical');
+        }
+        else {
+            removeClasses(this._tabsList, 'dv-tabs-container-vertical');
+            addClasses(this._tabsList, 'dv-horizontal');
+        }
+    }
     constructor(group, accessor, options) {
         super();
         this.group = group;
         this.accessor = accessor;
         this._observerDisposable = new MutableDisposable();
+        this._scrollbar = null;
         this._tabs = [];
         this.selectedIndex = -1;
         this._showTabsOverflowControl = false;
+        this._direction = 'horizontal';
         this._onTabDragStart = new Emitter();
         this.onTabDragStart = this._onTabDragStart.event;
         this._onDrop = new Emitter();
@@ -53,15 +75,16 @@ export class Tabs extends CompositeDisposable {
         this._onOverflowTabsChange = new Emitter();
         this.onOverflowTabsChange = this._onOverflowTabsChange.event;
         this._tabsList = document.createElement('div');
-        this._tabsList.className = 'dv-tabs-container dv-horizontal';
+        this._tabsList.className = 'dv-tabs-container';
         this.showTabsOverflowControl = options.showTabsOverflowControl;
         if (accessor.options.scrollbars === 'native') {
             this._element = this._tabsList;
         }
         else {
-            const scrollbar = new Scrollbar(this._tabsList);
-            this._element = scrollbar.element;
-            this.addDisposables(scrollbar);
+            this._scrollbar = new Scrollbar(this._tabsList);
+            this._scrollbar.orientation = this.direction;
+            this._element = this._scrollbar.element;
+            this.addDisposables(this._scrollbar);
         }
         this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
             if (event.defaultPrevented) {

package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts

@@ -5,6 +5,7 @@ import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
+import { DockviewHeaderDirection } from '../../options';
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
     readonly index: number;
@@ -26,6 +27,7 @@ export interface ITabsContainer extends IDisposable {
     readonly onGroupDragStart: Event<GroupDragEvent>;
     readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     hidden: boolean;
+    direction: DockviewHeaderDirection;
     delete(id: string): void;
     indexOf(id: string): number;
     setActive(isGroupActive: boolean): void;
@@ -53,6 +55,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private leftActions;
     private preActions;
     private _hidden;
+    private _direction;
     private dropdownPart;
     private _overflowTabs;
     private readonly _dropdownDisposable;
@@ -67,6 +70,8 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     get size(): number;
     get hidden(): boolean;
     set hidden(value: boolean);
+    get direction(): DockviewHeaderDirection;
+    set direction(value: DockviewHeaderDirection);
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     show(): void;

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -1,7 +1,7 @@
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { addDisposableListener, Emitter } from '../../../events';
 import { VoidContainer } from './voidContainer';
-import { findRelativeZIndexParent, toggleClass } from '../../../dom';
+import { addClasses, findRelativeZIndexParent, removeClasses, toggleClass, } from '../../../dom';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { getPanelData } from '../../../dnd/dataTransfer';
 import { Tabs } from './tabs';
@@ -23,6 +23,22 @@ export class TabsContainer extends CompositeDisposable {
         this._hidden = value;
         this.element.style.display = value ? 'none' : '';
     }
+    get direction() {
+        return this._direction;
+    }
+    set direction(value) {
+        this._direction = value;
+        if (value === 'vertical') {
+            addClasses(this._element, 'dv-groupview-header-vertical');
+            addClasses(this.rightActionsContainer, 'dv-right-actions-container-vertical');
+            this.tabs.direction = value;
+        }
+        else {
+            removeClasses(this._element, 'dv-groupview-header-vertical');
+            removeClasses(this.rightActionsContainer, 'dv-right-actions-container-vertical');
+            this.tabs.direction = value;
+        }
+    }
     get element() {
         return this._element;
     }
@@ -31,6 +47,7 @@ export class TabsContainer extends CompositeDisposable {
         this.accessor = accessor;
         this.group = group;
         this._hidden = false;
+        this._direction = 'horizontal';
         this.dropdownPart = null;
         this._overflowTabs = [];
         this._dropdownDisposable = new MutableDisposable();

package/dist/esm/dockview/deserializer.js

@@ -13,7 +13,7 @@ export class DefaultDockviewDeserialzier {
         const viewData = panelData.view;
         const contentComponent = viewData
             ? viewData.content.id
-            : (_a = panelData.contentComponent) !== null && _a !== void 0 ? _a : 'unknown';
+            : ((_a = panelData.contentComponent) !== null && _a !== void 0 ? _a : 'unknown');
         const tabComponent = viewData
             ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
             : panelData.tabComponent;

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -3,7 +3,7 @@ import { Position } from '../dnd/droptarget';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { Event, Emitter } from '../events';
 import { IWatermarkRenderer, GroupviewPanelState } from './types';
-import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, DockviewOptions, MovementOptions } from './options';
+import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, DockviewOptions, MovementOptions, DockviewHeaderPosition } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
@@ -238,6 +238,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get options(): DockviewComponentOptions;
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
+    get defaultHeaderPosition(): DockviewHeaderPosition;
     get api(): DockviewApi;
     get floatingGroups(): DockviewFloatingGroupPanel[];
     /**

package/dist/esm/dockview/dockviewComponent.js

@@ -68,6 +68,10 @@ export class DockviewComponent extends BaseGrid {
         var _a;
         return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisible';
     }
+    get defaultHeaderPosition() {
+        var _a;
+        return (_a = this.options.defaultHeaderPosition) !== null && _a !== void 0 ? _a : 'top';
+    }
     get api() {
         return this._api;
     }
@@ -637,9 +641,9 @@ export class DockviewComponent extends BaseGrid {
         const anchoredBox = getAnchoredBox();
         const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                : ((_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
+                : ((_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE) }));
         const el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('dockview: failed to find drag handle');
@@ -754,6 +758,13 @@ export class DockviewComponent extends BaseGrid {
         if ('theme' in options) {
             this.updateTheme();
         }
+        if ('createRightHeaderActionComponent' in options ||
+            'createLeftHeaderActionComponent' in options ||
+            'createPrefixHeaderActionComponent' in options) {
+            for (const group of this.groups) {
+                group.model.updateHeaderActions();
+            }
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
     layout(width, height, forceResize) {
@@ -910,7 +921,7 @@ export class DockviewComponent extends BaseGrid {
             const width = this.width;
             const height = this.height;
             const createGroupFromSerializedState = (data) => {
-                const { id, locked, hideHeader, views, activeView } = data;
+                const { id, locked, hideHeader, headerPosition, views, activeView, } = data;
                 if (typeof id !== 'string') {
                     throw new Error('dockview: group id must be of type string');
                 }
@@ -918,6 +929,7 @@ export class DockviewComponent extends BaseGrid {
                     id,
                     locked: !!locked,
                     hideHeader: !!hideHeader,
+                    headerPosition,
                 });
                 this._onDidAddGroup.fire(group);
                 const createdPanels = [];

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -1,7 +1,6 @@
 import { DockviewGroupPanelModel, } from './dockviewGroupPanelModel';
-import { GridviewPanel } from '../gridview/gridviewPanel';
+import { GridviewPanel, } from '../gridview/gridviewPanel';
 import { DockviewGroupPanelApiImpl, } from '../api/dockviewGroupPanelApi';
-// GridConstraintChangeEvent2 is not exported, so we'll type it manually
 const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
 const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
 export class DockviewGroupPanel extends GridviewPanel {
@@ -92,24 +91,28 @@ export class DockviewGroupPanel extends GridviewPanel {
             // Track explicitly set constraints to override panel constraints
             // Extract numeric values from functions or values
             if (event.minimumWidth !== undefined) {
-                this._explicitConstraints.minimumWidth = typeof event.minimumWidth === 'function'
-                    ? event.minimumWidth()
-                    : event.minimumWidth;
+                this._explicitConstraints.minimumWidth =
+                    typeof event.minimumWidth === 'function'
+                        ? event.minimumWidth()
+                        : event.minimumWidth;
             }
             if (event.minimumHeight !== undefined) {
-                this._explicitConstraints.minimumHeight = typeof event.minimumHeight === 'function'
-                    ? event.minimumHeight()
-                    : event.minimumHeight;
+                this._explicitConstraints.minimumHeight =
+                    typeof event.minimumHeight === 'function'
+                        ? event.minimumHeight()
+                        : event.minimumHeight;
             }
             if (event.maximumWidth !== undefined) {
-                this._explicitConstraints.maximumWidth = typeof event.maximumWidth === 'function'
-                    ? event.maximumWidth()
-                    : event.maximumWidth;
+                this._explicitConstraints.maximumWidth =
+                    typeof event.maximumWidth === 'function'
+                        ? event.maximumWidth()
+                        : event.maximumWidth;
             }
             if (event.maximumHeight !== undefined) {
-                this._explicitConstraints.maximumHeight = typeof event.maximumHeight === 'function'
-                    ? event.maximumHeight()
-                    : event.maximumHeight;
+                this._explicitConstraints.maximumHeight =
+                    typeof event.maximumHeight === 'function'
+                        ? event.maximumHeight()
+                        : event.maximumHeight;
             }
         }));
     }

package/dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -10,7 +10,7 @@ import { IPanel, PanelInitParameters, PanelUpdateEvent, Parameters } from '../pa
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
-import { DockviewDndOverlayEvent } from './options';
+import { DockviewDndOverlayEvent, DockviewHeaderDirection, DockviewHeaderPosition } from './options';
 import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
 import { Contraints } from '../gridview/gridviewPanel';
@@ -24,6 +24,7 @@ interface GroupMoveEvent {
 interface CoreGroupOptions {
     locked?: DockviewGroupPanelLocked;
     hideHeader?: boolean;
+    headerPosition?: 'top' | 'bottom' | 'left' | 'right';
     skipSetActive?: boolean;
     constraints?: Partial<Contraints>;
     initialWidth?: number;
@@ -74,6 +75,7 @@ export declare class DockviewWillDropEvent extends DockviewDidDropEvent {
 }
 export interface IHeader {
     hidden: boolean;
+    direction: DockviewHeaderDirection;
 }
 export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
 export interface IDockviewGroupPanelModel extends IPanel {
@@ -90,6 +92,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     readonly onMove: Event<GroupMoveEvent>;
     locked: DockviewGroupPanelLocked;
+    headerPosition: DockviewHeaderPosition;
     setActive(isActive: boolean): void;
     initialize(): void;
     isPanelActive: (panel: IDockviewPanel) => boolean;
@@ -138,6 +141,10 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private _rightHeaderActions;
     private _leftHeaderActions;
     private _prefixHeaderActions;
+    private readonly _rightHeaderActionsDisposable;
+    private readonly _leftHeaderActionsDisposable;
+    private readonly _prefixHeaderActionsDisposable;
+    private _headerPosition;
     private _location;
     private mostRecentlyUsed;
     private _overwriteRenderContainer;
@@ -184,6 +191,8 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     get hasWatermark(): boolean;
     get header(): IHeader;
     get isContentFocused(): boolean;
+    get headerPosition(): DockviewHeaderPosition;
+    set headerPosition(value: DockviewHeaderPosition);
     get location(): DockviewGroupLocation;
     set location(value: DockviewGroupLocation);
     constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
@@ -193,6 +202,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     set dropTargetContainer(value: DropTargetAnchorContainer | null);
     get dropTargetContainer(): DropTargetAnchorContainer | null;
     initialize(): void;
+    updateHeaderActions(): void;
     rerender(panel: IDockviewPanel): void;
     indexOf(panel: IDockviewPanel): number;
     toJSON(): GroupPanelViewState;

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -1,9 +1,9 @@
 import { DockviewApi } from '../api/component.api';
 import { getPanelData } from '../dnd/dataTransfer';
-import { isAncestor, toggleClass } from '../dom';
+import { addClasses, isAncestor, removeClasses, toggleClass } from '../dom';
 import { addDisposableListener, DockviewEvent, Emitter, } from '../events';
-import { DockviewWillShowOverlayLocationEvent } from './events';
-import { CompositeDisposable } from '../lifecycle';
+import { DockviewWillShowOverlayLocationEvent, } from './events';
+import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 import { ContentContainer, } from './components/panel/content';
 import { TabsContainer, } from './components/titlebar/tabsContainer';
 import { DockviewUnhandledDragOverEvent, } from './options';
@@ -78,6 +78,29 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }
         return isAncestor(document.activeElement, this.contentContainer.element);
     }
+    get headerPosition() {
+        var _a;
+        return (_a = this._headerPosition) !== null && _a !== void 0 ? _a : 'top';
+    }
+    set headerPosition(value) {
+        var _a;
+        this._headerPosition = value;
+        removeClasses(this.container, 'dv-groupview-header-top', 'dv-groupview-header-bottom', 'dv-groupview-header-left', 'dv-groupview-header-right');
+        addClasses(this.container, `dv-groupview-header-${value}`);
+        const direction = value === 'top' || value === 'bottom' ? 'horizontal' : 'vertical';
+        this.tabsContainer.direction = direction;
+        this.header.direction = direction;
+        // resize the active panel to fit the new header direction
+        // if not, the panel will overflow the tabs container
+        if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
+            this._activePanel.layout(this._width, this._height);
+        }
+        if (this._leftHeaderActions ||
+            this._rightHeaderActions ||
+            this._prefixHeaderActions) {
+            this.updateHeaderActions();
+        }
+    }
     get location() {
         return this._location;
     }
@@ -112,7 +135,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         });
     }
     constructor(container, accessor, id, options, groupPanel) {
-        var _a;
+        var _a, _b;
         super();
         this.container = container;
         this.accessor = accessor;
@@ -121,6 +144,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.groupPanel = groupPanel;
         this._isGroupActive = false;
         this._locked = false;
+        this._rightHeaderActionsDisposable = new MutableDisposable();
+        this._leftHeaderActionsDisposable = new MutableDisposable();
+        this._prefixHeaderActionsDisposable = new MutableDisposable();
         this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
         this._overwriteRenderContainer = null;
@@ -162,7 +188,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
         this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
-        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
+        this.headerPosition =
+            (_b = options.headerPosition) !== null && _b !== void 0 ? _b : accessor.defaultHeaderPosition;
+        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this._rightHeaderActionsDisposable, this._leftHeaderActionsDisposable, this._prefixHeaderActionsDisposable, this.tabsContainer.onTabDragStart((event) => {
             this._onTabDragStart.fire(event);
         }), this.tabsContainer.onGroupDragStart((event) => {
             this._onGroupDragStart.fire(event);
@@ -222,10 +250,13 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         // correctly initialized
         this.setActive(this.isActive, true);
         this.updateContainer();
+        this.updateHeaderActions();
+    }
+    updateHeaderActions() {
         if (this.accessor.options.createRightHeaderActionComponent) {
             this._rightHeaderActions =
                 this.accessor.options.createRightHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._rightHeaderActions);
+            this._rightHeaderActionsDisposable.value = this._rightHeaderActions;
             this._rightHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -233,10 +264,15 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
             this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
         }
+        else {
+            this._rightHeaderActions = undefined;
+            this._rightHeaderActionsDisposable.dispose();
+            this.tabsContainer.setRightActionsElement(undefined);
+        }
         if (this.accessor.options.createLeftHeaderActionComponent) {
             this._leftHeaderActions =
                 this.accessor.options.createLeftHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._leftHeaderActions);
+            this._leftHeaderActionsDisposable.value = this._leftHeaderActions;
             this._leftHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -244,10 +280,16 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
             this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
         }
+        else {
+            this._leftHeaderActions = undefined;
+            this._leftHeaderActionsDisposable.dispose();
+            this.tabsContainer.setLeftActionsElement(undefined);
+        }
         if (this.accessor.options.createPrefixHeaderActionComponent) {
             this._prefixHeaderActions =
                 this.accessor.options.createPrefixHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._prefixHeaderActions);
+            this._prefixHeaderActionsDisposable.value =
+                this._prefixHeaderActions;
             this._prefixHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -255,6 +297,11 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
         }
+        else {
+            this._prefixHeaderActions = undefined;
+            this._prefixHeaderActionsDisposable.dispose();
+            this.tabsContainer.setPrefixActionsElement(undefined);
+        }
     }
     rerender(panel) {
         this.contentContainer.renderPanel(panel, { asActive: false });
@@ -275,6 +322,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         if (this.header.hidden) {
             result.hideHeader = true;
         }
+        if (this.headerPosition !== 'top') {
+            result.headerPosition = this.headerPosition;
+        }
         return result;
     }
     moveToNext(options) {
@@ -472,6 +522,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         if (!options.skipSetActive) {
             this.contentContainer.openPanel(panel);
         }
+        else if (panel.api.renderer === 'always') {
+            this.contentContainer.renderPanel(panel, { asActive: false });
+        }
         if (hasExistingPanel) {
             // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
             return;

package/dist/esm/dockview/framework.d.ts

@@ -4,6 +4,7 @@ import { DockviewPanelApi } from '../api/dockviewPanelApi';
 import { PanelParameters } from '../framwork';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
+import { DockviewHeaderPosition } from './options';
 export interface IGroupPanelBaseProps<T extends {
     [index: string]: any;
 } = any> extends PanelParameters<T> {
@@ -26,6 +27,7 @@ export interface IDockviewHeaderActionsProps {
     activePanel: IDockviewPanel | undefined;
     isGroupActive: boolean;
     group: DockviewGroupPanel;
+    headerPosition: DockviewHeaderPosition;
 }
 export interface IGroupHeaderProps {
     api: DockviewGroupPanelApi;