dockview-core 5.1.0 → 6.0.0

package/README.md

@@ -16,7 +16,7 @@
 
 ##
 
-![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreen.gif?raw=true)
+![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreenv2.png?raw=true)
 
 Please see the website: https://dockview.dev
 
@@ -28,6 +28,8 @@ Please see the website: https://dockview.dev
 -   Tab and Group docking / Drag n' Drop
 -   Popout Windows
 -   Floating Groups
+-   Edge Groups
+-   Tab Groups
 -   Extensive API
 -   Supports Shadow DOMs
 -   High test coverage

package/dist/cjs/api/component.api.d.ts

@@ -16,10 +16,14 @@ import { PaneviewDidDropEvent } from '../paneview/draggablePaneviewPanel';
 import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 import { Box } from '../types';
 import { DockviewDidDropEvent, DockviewWillDropEvent } from '../dockview/dockviewGroupPanelModel';
-import { DockviewWillShowOverlayLocationEvent } from '../dockview/events';
+import { DockviewWillShowOverlayLocationEvent, DockviewTabGroupChangeEvent, DockviewTabGroupCollapsedChangeEvent, DockviewTabGroupPanelChangeEvent } from '../dockview/events';
+import { ITabGroup } from '../dockview/tabGroup';
+import { DockviewTabGroupColorEntry } from '../dockview/tabGroupAccent';
 import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from '../paneview/options';
 import { SplitviewComponentOptions } from '../splitview/options';
 import { GridviewComponentOptions } from '../gridview/options';
+import { EdgeGroupPosition, EdgeGroupOptions } from '../dockview/dockviewShell';
+import { DockviewGroupPanelApi } from './dockviewGroupPanelApi';
 export interface CommonApi<T = any> {
     readonly height: number;
     readonly width: number;
@@ -315,6 +319,9 @@ export declare class GridviewApi implements CommonApi<SerializedGridviewComponen
      */
     dispose(): void;
 }
+export interface DockviewGetTabGroupsOptions {
+    groupId: string;
+}
 export declare class DockviewApi implements CommonApi<SerializedDockview> {
     private readonly component;
     /**
@@ -349,6 +356,13 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Total number of groups.
      */
     get size(): number;
+    /**
+     * 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.
+     */
+    get tabGroupColors(): readonly DockviewTabGroupColorEntry[];
     /**
      * Total number of panels.
      */
@@ -421,6 +435,30 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
     get onDidPopoutGroupSizeChange(): Event<PopoutGroupChangeSizeEvent>;
     get onDidPopoutGroupPositionChange(): Event<PopoutGroupChangePositionEvent>;
     get onDidOpenPopoutWindowFail(): Event<void>;
+    /**
+     * Invoked when a tab group is created in any group.
+     */
+    get onDidCreateTabGroup(): Event<DockviewTabGroupChangeEvent>;
+    /**
+     * Invoked when a tab group is destroyed in any group.
+     */
+    get onDidDestroyTabGroup(): Event<DockviewTabGroupChangeEvent>;
+    /**
+     * Invoked when a panel is added to a tab group.
+     */
+    get onDidAddPanelToTabGroup(): Event<DockviewTabGroupPanelChangeEvent>;
+    /**
+     * Invoked when a panel is removed from a tab group.
+     */
+    get onDidRemovePanelFromTabGroup(): Event<DockviewTabGroupPanelChangeEvent>;
+    /**
+     * Invoked when a tab group's properties (label, color) change.
+     */
+    get onDidTabGroupChange(): Event<DockviewTabGroupChangeEvent>;
+    /**
+     * Invoked when a tab group is collapsed or expanded.
+     */
+    get onDidTabGroupCollapsedChange(): Event<DockviewTabGroupCollapsedChangeEvent>;
     /**
      * All panel objects.
      */
@@ -519,7 +557,61 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
             window: Window;
         }) => void;
     }): Promise<boolean>;
+    /**
+     * 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;
+    /**
+     * 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): DockviewGroupPanelApi | undefined;
+    /**
+     * Set the visibility of an edge group.
+     */
+    setEdgeGroupVisible(position: EdgeGroupPosition, visible: boolean): void;
+    /**
+     * Check whether an edge group is currently visible.
+     */
+    isEdgeGroupVisible(position: EdgeGroupPosition): boolean;
+    /**
+     * 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;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
+    private _getGroupModel;
+    createTabGroup(options: {
+        groupId: string;
+        label?: string;
+        color?: string;
+        componentParams?: Record<string, unknown>;
+    }): ITabGroup;
+    dissolveTabGroup(options: {
+        groupId: string;
+        tabGroupId: string;
+    }): void;
+    addPanelToTabGroup(options: {
+        groupId: string;
+        tabGroupId: string;
+        panelId: string;
+        index?: number;
+    }): void;
+    removePanelFromTabGroup(options: {
+        groupId: string;
+        panelId: string;
+    }): void;
+    getTabGroups(options: DockviewGetTabGroupsOptions): readonly ITabGroup[];
+    getTabGroupForPanel(options: {
+        groupId: string;
+        panelId: string;
+    }): ITabGroup | undefined;
+    moveTabGroup(options: {
+        groupId: string;
+        tabGroupId: string;
+        index: number;
+    }): void;
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.
      */

package/dist/cjs/api/component.api.js

@@ -652,6 +652,19 @@ var DockviewApi = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewApi.prototype, "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.
+         */
+        get: function () {
+            return this.component.tabGroupColorPalette.entries();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewApi.prototype, "totalPanels", {
         /**
          * Total number of panels.
@@ -838,6 +851,66 @@ var DockviewApi = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewApi.prototype, "onDidCreateTabGroup", {
+        /**
+         * Invoked when a tab group is created in any group.
+         */
+        get: function () {
+            return this.component.onDidCreateTabGroup;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewApi.prototype, "onDidDestroyTabGroup", {
+        /**
+         * Invoked when a tab group is destroyed in any group.
+         */
+        get: function () {
+            return this.component.onDidDestroyTabGroup;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewApi.prototype, "onDidAddPanelToTabGroup", {
+        /**
+         * Invoked when a panel is added to a tab group.
+         */
+        get: function () {
+            return this.component.onDidAddPanelToTabGroup;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewApi.prototype, "onDidRemovePanelFromTabGroup", {
+        /**
+         * Invoked when a panel is removed from a tab group.
+         */
+        get: function () {
+            return this.component.onDidRemovePanelFromTabGroup;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewApi.prototype, "onDidTabGroupChange", {
+        /**
+         * Invoked when a tab group's properties (label, color) change.
+         */
+        get: function () {
+            return this.component.onDidTabGroupChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewApi.prototype, "onDidTabGroupCollapsedChange", {
+        /**
+         * Invoked when a tab group is collapsed or expanded.
+         */
+        get: function () {
+            return this.component.onDidTabGroupCollapsedChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewApi.prototype, "panels", {
         /**
          * All panel objects.
@@ -991,9 +1064,82 @@ var DockviewApi = /** @class */ (function () {
     DockviewApi.prototype.addPopoutGroup = function (item, options) {
         return this.component.addPopoutGroup(item, options);
     };
+    /**
+     * 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.
+     */
+    DockviewApi.prototype.addEdgeGroup = function (position, options) {
+        return this.component.addEdgeGroup(position, options);
+    };
+    /**
+     * Get the group panel API for an edge group at the given position.
+     * Returns `undefined` if no edge group is configured at that position.
+     */
+    DockviewApi.prototype.getEdgeGroup = function (position) {
+        return this.component.getEdgeGroup(position);
+    };
+    /**
+     * Set the visibility of an edge group.
+     */
+    DockviewApi.prototype.setEdgeGroupVisible = function (position, visible) {
+        this.component.setEdgeGroupVisible(position, visible);
+    };
+    /**
+     * Check whether an edge group is currently visible.
+     */
+    DockviewApi.prototype.isEdgeGroupVisible = function (position) {
+        return this.component.isEdgeGroupVisible(position);
+    };
+    /**
+     * 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.
+     */
+    DockviewApi.prototype.removeEdgeGroup = function (position) {
+        this.component.removeEdgeGroup(position);
+    };
     DockviewApi.prototype.updateOptions = function (options) {
         this.component.updateOptions(options);
     };
+    // === Tab Group API ===
+    DockviewApi.prototype._getGroupModel = function (groupId) {
+        var group = this.component.getPanel(groupId);
+        if (!group) {
+            throw new Error("dockview: group '".concat(groupId, "' not found"));
+        }
+        return group.model;
+    };
+    DockviewApi.prototype.createTabGroup = function (options) {
+        var model = this._getGroupModel(options.groupId);
+        return model.createTabGroup({
+            label: options.label,
+            color: options.color,
+            componentParams: options.componentParams,
+        });
+    };
+    DockviewApi.prototype.dissolveTabGroup = function (options) {
+        var model = this._getGroupModel(options.groupId);
+        model.dissolveTabGroup(options.tabGroupId);
+    };
+    DockviewApi.prototype.addPanelToTabGroup = function (options) {
+        var model = this._getGroupModel(options.groupId);
+        model.addPanelToTabGroup(options.tabGroupId, options.panelId, options.index);
+    };
+    DockviewApi.prototype.removePanelFromTabGroup = function (options) {
+        var model = this._getGroupModel(options.groupId);
+        model.removePanelFromTabGroup(options.panelId);
+    };
+    DockviewApi.prototype.getTabGroups = function (options) {
+        var model = this._getGroupModel(options.groupId);
+        return model.getTabGroups();
+    };
+    DockviewApi.prototype.getTabGroupForPanel = function (options) {
+        var model = this._getGroupModel(options.groupId);
+        return model.getTabGroupForPanel(options.panelId);
+    };
+    DockviewApi.prototype.moveTabGroup = function (options) {
+        var model = this._getGroupModel(options.groupId);
+        model.moveTabGroup(options.tabGroupId, options.index);
+    };
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.
      */

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

@@ -17,9 +17,17 @@ export interface DockviewGroupMoveParams {
      */
     skipSetActive?: boolean;
 }
+export interface DockviewGroupPanelCollapsedChangeEvent {
+    readonly isCollapsed: boolean;
+}
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    /**
+     * Fired when an edge group's collapsed state changes.
+     * Never fires for non-edge groups.
+     */
+    readonly onDidCollapsedChange: Event<DockviewGroupPanelCollapsedChangeEvent>;
     readonly location: DockviewGroupLocation;
     /**
      * If you require the Window object
@@ -32,6 +40,19 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
     isMaximized(): boolean;
     exitMaximized(): void;
     close(): void;
+    /**
+     * Collapse this group (edge groups only). No-op for non-edge groups.
+     */
+    collapse(): void;
+    /**
+     * Expand this group (edge groups only). No-op for non-edge groups.
+     */
+    expand(): void;
+    /**
+     * Returns true if this edge group is currently collapsed.
+     * Always returns false for non-edge groups.
+     */
+    isCollapsed(): boolean;
 }
 export interface DockviewGroupPanelFloatingChangeEvent {
     readonly location: DockviewGroupLocation;
@@ -44,6 +65,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     readonly _onDidActivePanelChange: Emitter<DockviewGroupChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    readonly _onDidCollapsedChange: Emitter<DockviewGroupPanelCollapsedChangeEvent>;
+    readonly onDidCollapsedChange: Event<DockviewGroupPanelCollapsedChangeEvent>;
     get location(): DockviewGroupLocation;
     constructor(id: string, accessor: DockviewComponent);
     setSize(event: SizeEvent): void;
@@ -55,5 +78,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
+    collapse(): void;
+    expand(): void;
+    isCollapsed(): boolean;
     initialize(group: DockviewGroupPanel): void;
 }

package/dist/cjs/api/dockviewGroupPanelApi.js

@@ -40,7 +40,9 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
         _this.onDidLocationChange = _this._onDidLocationChange.event;
         _this._onDidActivePanelChange = new events_1.Emitter();
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
-        _this.addDisposables(_this._onDidLocationChange, _this._onDidActivePanelChange, _this._onDidVisibilityChange.event(function (event) {
+        _this._onDidCollapsedChange = new events_1.Emitter();
+        _this.onDidCollapsedChange = _this._onDidCollapsedChange.event;
+        _this.addDisposables(_this._onDidLocationChange, _this._onDidActivePanelChange, _this._onDidCollapsedChange, _this._onDidVisibilityChange.event(function (event) {
             // When becoming visible, apply any pending size change
             if (event.isVisible && _this._pendingSize) {
                 _super.prototype.setSize.call(_this, _this._pendingSize);
@@ -133,6 +135,24 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
             this.accessor.exitMaximizedGroup();
         }
     };
+    DockviewGroupPanelApiImpl.prototype.collapse = function () {
+        if (!this._group) {
+            return;
+        }
+        this.accessor.setEdgeGroupCollapsed(this._group, true);
+    };
+    DockviewGroupPanelApiImpl.prototype.expand = function () {
+        if (!this._group) {
+            return;
+        }
+        this.accessor.setEdgeGroupCollapsed(this._group, false);
+    };
+    DockviewGroupPanelApiImpl.prototype.isCollapsed = function () {
+        if (!this._group) {
+            return false;
+        }
+        return this.accessor.isEdgeGroupCollapsed(this._group);
+    };
     DockviewGroupPanelApiImpl.prototype.initialize = function (group) {
         this._group = group;
     };

package/dist/cjs/api/entryPoints.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPaneview = exports.createGridview = exports.createSplitview = exports.createDockview = void 0;
+exports.createDockview = createDockview;
+exports.createSplitview = createSplitview;
+exports.createGridview = createGridview;
+exports.createPaneview = createPaneview;
 var component_api_1 = require("../api/component.api");
 var dockviewComponent_1 = require("../dockview/dockviewComponent");
 var gridviewComponent_1 = require("../gridview/gridviewComponent");
@@ -10,19 +13,15 @@ function createDockview(element, options) {
     var component = new dockviewComponent_1.DockviewComponent(element, options);
     return component.api;
 }
-exports.createDockview = createDockview;
 function createSplitview(element, options) {
     var component = new splitviewComponent_1.SplitviewComponent(element, options);
     return new component_api_1.SplitviewApi(component);
 }
-exports.createSplitview = createSplitview;
 function createGridview(element, options) {
     var component = new gridviewComponent_1.GridviewComponent(element, options);
     return new component_api_1.GridviewApi(component);
 }
-exports.createGridview = createGridview;
 function createPaneview(element, options) {
     var component = new paneviewComponent_1.PaneviewComponent(element, options);
     return new component_api_1.PaneviewApi(component);
 }
-exports.createPaneview = createPaneview;

package/dist/cjs/array.js

@@ -1,17 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.remove = exports.firstIndex = exports.pushToEnd = exports.pushToStart = exports.sequenceEquals = exports.last = exports.tail = void 0;
+exports.tail = tail;
+exports.last = last;
+exports.sequenceEquals = sequenceEquals;
+exports.pushToStart = pushToStart;
+exports.pushToEnd = pushToEnd;
+exports.firstIndex = firstIndex;
+exports.remove = remove;
 function tail(arr) {
     if (arr.length === 0) {
         throw new Error('Invalid tail call');
     }
     return [arr.slice(0, arr.length - 1), arr[arr.length - 1]];
 }
-exports.tail = tail;
 function last(arr) {
     return arr.length > 0 ? arr[arr.length - 1] : undefined;
 }
-exports.last = last;
 function sequenceEquals(arr1, arr2) {
     if (arr1.length !== arr2.length) {
         return false;
@@ -23,7 +27,6 @@ function sequenceEquals(arr1, arr2) {
     }
     return true;
 }
-exports.sequenceEquals = sequenceEquals;
 /**
  * Pushes an element to the start of the array, if found.
  */
@@ -34,7 +37,6 @@ function pushToStart(arr, value) {
         arr.unshift(value);
     }
 }
-exports.pushToStart = pushToStart;
 /**
  * Pushes an element to the end of the array, if found.
  */
@@ -45,7 +47,6 @@ function pushToEnd(arr, value) {
         arr.push(value);
     }
 }
-exports.pushToEnd = pushToEnd;
 function firstIndex(array, fn) {
     for (var i = 0; i < array.length; i++) {
         var element = array[i];
@@ -55,7 +56,6 @@ function firstIndex(array, fn) {
     }
     return -1;
 }
-exports.firstIndex = firstIndex;
 function remove(array, value) {
     var index = array.findIndex(function (t) { return t === value; });
     if (index > -1) {
@@ -64,4 +64,3 @@ function remove(array, value) {
     }
     return false;
 }
-exports.remove = remove;

package/dist/cjs/dnd/dataTransfer.d.ts

@@ -4,7 +4,8 @@ export declare class PanelTransfer extends TransferObject {
     readonly viewId: string;
     readonly groupId: string;
     readonly panelId: string | null;
-    constructor(viewId: string, groupId: string, panelId: string | null);
+    readonly tabGroupId?: string | undefined;
+    constructor(viewId: string, groupId: string, panelId: string | null, tabGroupId?: string | undefined);
 }
 export declare class PaneTransfer extends TransferObject {
     readonly viewId: string;

package/dist/cjs/dnd/dataTransfer.js

@@ -15,7 +15,9 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPaneData = exports.getPanelData = exports.LocalSelectionTransfer = exports.PaneTransfer = exports.PanelTransfer = void 0;
+exports.LocalSelectionTransfer = exports.PaneTransfer = exports.PanelTransfer = void 0;
+exports.getPanelData = getPanelData;
+exports.getPaneData = getPaneData;
 var TransferObject = /** @class */ (function () {
     function TransferObject() {
     }
@@ -23,11 +25,12 @@ var TransferObject = /** @class */ (function () {
 }());
 var PanelTransfer = /** @class */ (function (_super) {
     __extends(PanelTransfer, _super);
-    function PanelTransfer(viewId, groupId, panelId) {
+    function PanelTransfer(viewId, groupId, panelId, tabGroupId) {
         var _this = _super.call(this) || this;
         _this.viewId = viewId;
         _this.groupId = groupId;
         _this.panelId = panelId;
+        _this.tabGroupId = tabGroupId;
         return _this;
     }
     return PanelTransfer;
@@ -87,7 +90,6 @@ function getPanelData() {
     }
     return panelTransfer.getData(PanelTransfer.prototype)[0];
 }
-exports.getPanelData = getPanelData;
 function getPaneData() {
     var paneTransfer = LocalSelectionTransfer.getInstance();
     var isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
@@ -96,4 +98,3 @@ function getPaneData() {
     }
     return paneTransfer.getData(PaneTransfer.prototype)[0];
 }
-exports.getPaneData = getPaneData;

package/dist/cjs/dnd/droptarget.d.ts

@@ -26,6 +26,18 @@ export type MeasuredValue = {
 export type DroptargetOverlayModel = {
     size?: MeasuredValue;
     activationSize?: MeasuredValue;
+    /**
+     * Override the width threshold (in pixels) below which the overlay switches
+     * to a thin-border indicator instead of a half-width highlight. Set to 0 to
+     * always show the half-width overlay regardless of element size.
+     */
+    smallWidthBoundary?: number;
+    /**
+     * Override the height threshold (in pixels) below which the overlay switches
+     * to a thin-border indicator instead of a half-height highlight. Set to 0 to
+     * always show the half-height overlay regardless of element size.
+     */
+    smallHeightBoundary?: number;
 };
 export interface DropTargetTargetModel {
     getElements(event?: DragEvent, outline?: HTMLElement): {