dockview-core - npm Package Compare versions

Comparing version 1.8.2 to 1.8.3

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

 import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options';
+import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
@@ -15,2 +16,3 @@ import { AddComponentOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
 import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 export interface CommonApi<T = any> {
@@ -46,3 +48,3 @@ readonly height: number;
     layout(width: number, height: number): void;
-    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
+    addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
     movePanel(from: number, to: number): void;
@@ -71,3 +73,3 @@ fromJSON(data: SerializedSplitview): void;
     layout(width: number, height: number): void;
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
     fromJSON(data: SerializedPaneview): void;
@@ -96,3 +98,3 @@ toJSON(): SerializedPaneview;
     layout(width: number, height: number, force?: boolean): void;
-    addPanel(options: AddComponentOptions): IGridviewPanel;
+    addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
@@ -129,2 +131,4 @@ movePanel(panel: IGridviewPanel, options: {
     get onDidDrop(): Event<DockviewDropEvent>;
+    get onWillDragGroup(): Event<GroupDragEvent>;
+    get onWillDragPanel(): Event<TabDragEvent>;
     get panels(): IDockviewPanel[];
@@ -138,3 +142,3 @@ get groups(): DockviewGroupPanel[];
     layout(width: number, height: number, force?: boolean): void;
-    addPanel(options: AddPanelOptions): IDockviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel;
     removePanel(panel: IDockviewPanel): void;
@@ -141,0 +145,0 @@ addGroup(options?: AddGroupOptions): DockviewGroupPanel;

dist/cjs/api/component.api.js

@@ -502,2 +502,16 @@ "use strict";
     });
+    Object.defineProperty(DockviewApi.prototype, "onWillDragGroup", {
+        get: function () {
+            return this.component.onWillDragGroup;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewApi.prototype, "onWillDragPanel", {
+        get: function () {
+            return this.component.onWillDragPanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewApi.prototype, "panels", {
@@ -504,0 +518,0 @@ get: function () {

dist/cjs/dnd/abstractDragHandler.d.ts

@@ -7,5 +7,5 @@ import { CompositeDisposable, IDisposable } from '../lifecycle';
     private readonly _onDragStart;
-    readonly onDragStart: import("../events").Event<void>;
+    readonly onDragStart: import("../events").Event<DragEvent>;
     constructor(el: HTMLElement);
-    abstract getData(dataTransfer?: DataTransfer | null): IDisposable;
+    abstract getData(event: DragEvent): IDisposable;
     protected isCancelled(_event: DragEvent): boolean;
@@ -12,0 +12,0 @@ private configure;

dist/cjs/dnd/abstractDragHandler.js

@@ -78,3 +78,3 @@ "use strict";
             var e_1, _a;
-            if (_this.isCancelled(event)) {
+            if (event.defaultPrevented || _this.isCancelled(event)) {
                 event.preventDefault();
@@ -117,15 +117,19 @@ return;
             setTimeout(function () { return _this.el.classList.remove('dv-dragged'); }, 0);
-            _this.dataDisposable.value = _this.getData(event.dataTransfer);
+            _this.dataDisposable.value = _this.getData(event);
+            _this._onDragStart.fire(event);
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'move';
-                /**
-                 * Although this is not used by dockview many third party dnd libraries will check
-                 * dataTransfer.types to determine valid drag events.
-                 *
-                 * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                 * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                 * dnd logic. You can see the code at
-                 * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                 */
-                event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                var hasData = event.dataTransfer.items.length > 0;
+                if (!hasData) {
+                    /**
+                     * Although this is not used by dockview many third party dnd libraries will check
+                     * dataTransfer.types to determine valid drag events.
+                     *
+                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                     * dnd logic. You can see the code at
+                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                     */
+                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                }
             }
@@ -132,0 +136,0 @@ }), (0, events_1.addDisposableListener)(this.el, 'dragend', function () {

dist/cjs/dnd/groupDragHandler.d.ts

@@ -0,1 +1,2 @@
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
@@ -5,9 +6,9 @@ import { IDisposable } from '../lifecycle';
 export declare class GroupDragHandler extends DragHandler {
-    private readonly accessorId;
+    private readonly accessor;
     private readonly group;
     private readonly panelTransfer;
-    constructor(element: HTMLElement, accessorId: string, group: DockviewGroupPanel);
+    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel);
     isCancelled(_event: DragEvent): boolean;
-    getData(dataTransfer: DataTransfer | null): IDisposable;
+    getData(dragEvent: DragEvent): IDisposable;
 }
 //# sourceMappingURL=groupDragHandler.d.ts.map

dist/cjs/dnd/groupDragHandler.js

@@ -26,5 +26,5 @@ "use strict";
     __extends(GroupDragHandler, _super);
-    function GroupDragHandler(element, accessorId, group) {
+    function GroupDragHandler(element, accessor, group) {
         var _this = _super.call(this, element) || this;
-        _this.accessorId = accessorId;
+        _this.accessor = accessor;
         _this.group = group;
@@ -50,5 +50,6 @@ _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
     };
-    GroupDragHandler.prototype.getData = function (dataTransfer) {
+    GroupDragHandler.prototype.getData = function (dragEvent) {
         var _this = this;
-        this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(this.accessorId, this.group.id, null)], dataTransfer_1.PanelTransfer.prototype);
+        var dataTransfer = dragEvent.dataTransfer;
+        this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(this.accessor.id, this.group.id, null)], dataTransfer_1.PanelTransfer.prototype);
         var style = window.getComputedStyle(this.el);
@@ -55,0 +56,0 @@ var bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');

dist/cjs/dnd/overlay.d.ts

@@ -12,2 +12,4 @@ import { Event } from '../events';
     private static MINIMUM_WIDTH;
+    set minimumInViewportWidth(value: number | undefined);
+    set minimumInViewportHeight(value: number | undefined);
     constructor(options: {
@@ -20,4 +22,4 @@ height: number;
         content: HTMLElement;
-        minimumInViewportWidth: number;
-        minimumInViewportHeight: number;
+        minimumInViewportWidth?: number;
+        minimumInViewportHeight?: number;
     });
@@ -40,4 +42,6 @@ setBounds(bounds?: Partial<{
     private setupResize;
+    private getMinimumWidth;
+    private getMinimumHeight;
     dispose(): void;
 }
 //# sourceMappingURL=overlay.d.ts.map

dist/cjs/dnd/overlay.js

@@ -101,2 +101,16 @@ "use strict";
     }
+    Object.defineProperty(Overlay.prototype, "minimumInViewportWidth", {
+        set: function (value) {
+            this.options.minimumInViewportWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Overlay.prototype, "minimumInViewportHeight", {
+        set: function (value) {
+            this.options.minimumInViewportHeight = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Overlay.prototype.setBounds = function (bounds) {
@@ -120,5 +134,7 @@ if (bounds === void 0) { bounds = {}; }
         // a minimum width of minimumViewportWidth must be inside the viewport
-        var xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+        var xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
         // a minimum height of minimumViewportHeight must be inside the viewport
-        var yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+        var yOffset = typeof this.options.minimumInViewportHeight === 'number'
+            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
+            : 0;
         var left = (0, math_1.clamp)(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
@@ -190,5 +206,6 @@ var top = (0, math_1.clamp)(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                 }
-                var xOffset = Math.max(0, overlayRect.width - _this.options.minimumInViewportWidth);
-                var yOffset = Math.max(0, overlayRect.height -
-                    _this.options.minimumInViewportHeight);
+                var xOffset = Math.max(0, _this.getMinimumWidth(overlayRect.width));
+                var yOffset = Math.max(0, _this.options.minimumInViewportHeight
+                    ? _this.getMinimumHeight(overlayRect.height)
+                    : 0);
                 var left = (0, math_1.clamp)(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
@@ -276,10 +293,7 @@ var top = (0, math_1.clamp)(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                 var width = undefined;
-                var minimumInViewportHeight = _this.options.minimumInViewportHeight;
-                var minimumInViewportWidth = _this.options.minimumInViewportWidth;
-                function moveTop() {
+                var moveTop = function () {
                     top = (0, math_1.clamp)(y, -Number.MAX_VALUE, startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? containerRect.height -
-                            minimumInViewportHeight
+                        ? _this.getMinimumHeight(containerRect.height)
                         : Math.max(0, startPosition.originalY +
@@ -292,17 +306,19 @@ startPosition.originalHeight -
                             top;
-                }
-                function moveBottom() {
+                };
+                var moveBottom = function () {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = (0, math_1.clamp)(y - top, top < 0
-                        ? -top + minimumInViewportHeight
+                    height = (0, math_1.clamp)(y - top, top < 0 &&
+                        typeof _this.options
+                            .minimumInViewportHeight === 'number'
+                        ? -top +
+                            _this.options.minimumInViewportHeight
                         : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
-                }
-                function moveLeft() {
+                };
+                var moveLeft = function () {
                     left = (0, math_1.clamp)(x, -Number.MAX_VALUE, startPosition.originalX +
                         startPosition.originalWidth >
                         containerRect.width
-                        ? containerRect.width -
-                            minimumInViewportWidth
+                        ? _this.getMinimumWidth(containerRect.width)
                         : Math.max(0, startPosition.originalX +
@@ -315,11 +331,14 @@ startPosition.originalWidth -
                             left;
-                }
-                function moveRight() {
+                };
+                var moveRight = function () {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = (0, math_1.clamp)(x - left, left < 0
-                        ? -left + minimumInViewportWidth
+                    width = (0, math_1.clamp)(x - left, left < 0 &&
+                        typeof _this.options
+                            .minimumInViewportWidth === 'number'
+                        ? -left +
+                            _this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                }
+                };
                 switch (direction) {
@@ -379,2 +398,14 @@ case 'top':
     };
+    Overlay.prototype.getMinimumWidth = function (width) {
+        if (typeof this.options.minimumInViewportWidth === 'number') {
+            return width - this.options.minimumInViewportWidth;
+        }
+        return 0;
+    };
+    Overlay.prototype.getMinimumHeight = function (height) {
+        if (typeof this.options.minimumInViewportHeight === 'number') {
+            return height - this.options.minimumInViewportHeight;
+        }
+        return height;
+    };
     Overlay.prototype.dispose = function () {
@@ -381,0 +412,0 @@ this._element.remove();

dist/cjs/dockview/components/tab/tab.d.ts

@@ -7,4 +7,5 @@ import { Event } from '../../../events';
 import { DroptargetEvent } from '../../../dnd/droptarget';
+import { IDockviewPanel } from '../../dockviewPanel';
 export interface ITab extends IDisposable {
-    readonly panelId: string;
+    readonly panel: IDockviewPanel;
     readonly element: HTMLElement;
@@ -17,3 +18,3 @@ setContent: (element: ITabRenderer) => void;
 export declare class Tab extends CompositeDisposable implements ITab {
-    readonly panelId: string;
+    readonly panel: IDockviewPanel;
     private readonly accessor;
@@ -23,3 +24,3 @@ private readonly group;
     private readonly droptarget;
-    private content?;
+    private content;
     private readonly _onChanged;
@@ -29,4 +30,6 @@ readonly onChanged: Event<MouseEvent>;
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
-    constructor(panelId: string, accessor: DockviewComponent, group: DockviewGroupPanel);
+    constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
@@ -33,0 +36,0 @@ setContent(part: ITabRenderer): void;

dist/cjs/dockview/components/tab/tab.js

@@ -26,9 +26,31 @@ "use strict";
 var abstractDragHandler_1 = require("../../../dnd/abstractDragHandler");
+var TabDragHandler = /** @class */ (function (_super) {
+    __extends(TabDragHandler, _super);
+    function TabDragHandler(element, accessor, group, panel) {
+        var _this = _super.call(this, element) || this;
+        _this.accessor = accessor;
+        _this.group = group;
+        _this.panel = panel;
+        _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
+        return _this;
+    }
+    TabDragHandler.prototype.getData = function (event) {
+        var _this = this;
+        this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], dataTransfer_1.PanelTransfer.prototype);
+        return {
+            dispose: function () {
+                _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
+            },
+        };
+    };
+    return TabDragHandler;
+}(abstractDragHandler_1.DragHandler));
 var Tab = /** @class */ (function (_super) {
     __extends(Tab, _super);
-    function Tab(panelId, accessor, group) {
+    function Tab(panel, accessor, group) {
         var _this = _super.call(this) || this;
-        _this.panelId = panelId;
+        _this.panel = panel;
         _this.accessor = accessor;
         _this.group = group;
+        _this.content = undefined;
         _this._onChanged = new events_1.Emitter();
@@ -38,2 +60,4 @@ _this.onChanged = _this._onChanged.event;
         _this.onDrop = _this._onDropped.event;
+        _this._onDragStart = new events_1.Emitter();
+        _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
@@ -44,26 +68,3 @@ _this._element.className = 'tab';
         (0, dom_1.toggleClass)(_this.element, 'inactive-tab', true);
-        _this.addDisposables(_this._onChanged, _this._onDropped, new (/** @class */ (function (_super) {
-            __extends(Handler, _super);
-            function Handler() {
-                var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
-                return _this;
-            }
-            Handler.prototype.getData = function () {
-                var _this = this;
-                this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(accessor.id, group.id, panelId)], dataTransfer_1.PanelTransfer.prototype);
-                return {
-                    dispose: function () {
-                        _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
-                    },
-                };
-            };
-            return Handler;
-        }(abstractDragHandler_1.DragHandler)))(_this._element));
-        _this.addDisposables((0, events_1.addDisposableListener)(_this._element, 'mousedown', function (event) {
-            if (event.defaultPrevented) {
-                return;
-            }
-            _this._onChanged.fire(event);
-        }));
+        var dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel);
         _this.droptarget = new droptarget_1.Droptarget(_this._element, {
@@ -82,3 +83,3 @@ acceptedTargetZones: ['center'],
                     }
-                    return _this.panelId !== data.panelId;
+                    return _this.panel.id !== data.panelId;
                 }
@@ -88,3 +89,10 @@ return _this.group.model.canDisplayOverlay(event, position, types_1.DockviewDropTargets.Tab);
         });
-        _this.addDisposables(_this.droptarget.onDrop(function (event) {
+        _this.addDisposables(_this._onChanged, _this._onDropped, _this._onDragStart, dragHandler.onDragStart(function (event) {
+            _this._onDragStart.fire(event);
+        }), dragHandler, (0, events_1.addDisposableListener)(_this._element, 'mousedown', function (event) {
+            if (event.defaultPrevented) {
+                return;
+            }
+            _this._onChanged.fire(event);
+        }), _this.droptarget.onDrop(function (event) {
             _this._onDropped.fire(event);
@@ -91,0 +99,0 @@ }), _this.droptarget);

dist/cjs/dockview/components/titlebar/tabsContainer.d.ts

@@ -11,2 +11,10 @@ import { IDisposable, CompositeDisposable } from '../../../lifecycle';
 }
+export interface TabDragEvent {
+    readonly nativeEvent: DragEvent;
+    readonly panel: IDockviewPanel;
+}
+export interface GroupDragEvent {
+    readonly nativeEvent: DragEvent;
+    readonly group: DockviewGroupPanel;
+}
 export interface ITabsContainer extends IDisposable {
@@ -16,5 +24,8 @@ readonly element: HTMLElement;
     readonly size: number;
+    hidden: boolean;
     delete: (id: string) => void;
     indexOf: (id: string) => number;
     onDrop: Event<TabDropIndexEvent>;
+    onTabDragStart: Event<TabDragEvent>;
+    onGroupDragStart: Event<GroupDragEvent>;
     setActive: (isGroupActive: boolean) => void;
@@ -27,3 +38,2 @@ setActivePanel: (panel: IDockviewPanel) => void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
-    hidden: boolean;
     show(): void;
@@ -47,2 +57,6 @@ hide(): void;
     readonly onDrop: Event<TabDropIndexEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     get panels(): string[];
@@ -49,0 +63,0 @@ get size(): number;

dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -71,3 +71,7 @@ "use strict";
         _this.onDrop = _this._onDrop.event;
-        _this.addDisposables(_this._onDrop);
+        _this._onTabDragStart = new events_1.Emitter();
+        _this.onTabDragStart = _this._onTabDragStart.event;
+        _this._onGroupDragStart = new events_1.Emitter();
+        _this.onGroupDragStart = _this._onGroupDragStart.event;
+        _this.addDisposables(_this._onDrop, _this._onTabDragStart, _this._onGroupDragStart);
         _this._element = document.createElement('div');
@@ -96,3 +100,8 @@ _this._element.className = 'tabs-and-actions-container';
         _this._element.appendChild(_this.rightActionsContainer);
-        _this.addDisposables(_this.voidContainer, _this.voidContainer.onDrop(function (event) {
+        _this.addDisposables(_this.voidContainer, _this.voidContainer.onDragStart(function (event) {
+            _this._onGroupDragStart.fire({
+                nativeEvent: event,
+                group: _this.group,
+            });
+        }), _this.voidContainer.onDrop(function (event) {
             _this._onDrop.fire({
@@ -128,3 +137,3 @@ event: event.nativeEvent,
         get: function () {
-            return this.tabs.map(function (_) { return _.value.panelId; });
+            return this.tabs.map(function (_) { return _.value.panel.id; });
         },
@@ -198,3 +207,3 @@ enumerable: false,
     TabsContainer.prototype.indexOf = function (id) {
-        return this.tabs.findIndex(function (tab) { return tab.value.panelId === id; });
+        return this.tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
     };
@@ -218,3 +227,3 @@ TabsContainer.prototype.setActive = function (_isGroupActive) {
     TabsContainer.prototype.delete = function (id) {
-        var index = this.tabs.findIndex(function (tab) { return tab.value.panelId === id; });
+        var index = this.tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
         var tabToRemove = this.tabs.splice(index, 1)[0];
@@ -228,3 +237,3 @@ var value = tabToRemove.value, disposable = tabToRemove.disposable;
         this.tabs.forEach(function (tab) {
-            var isActivePanel = panel.id === tab.value.panelId;
+            var isActivePanel = panel.id === tab.value.panel.id;
             tab.value.setActive(isActivePanel);
@@ -237,11 +246,13 @@ });
         if (index === void 0) { index = this.tabs.length; }
-        if (this.tabs.find(function (tab) { return tab.value.panelId === panel.id; })) {
+        if (this.tabs.find(function (tab) { return tab.value.panel.id === panel.id; })) {
             return;
         }
-        var tabToAdd = new tab_1.Tab(panel.id, this.accessor, this.group);
+        var tab = new tab_1.Tab(panel, this.accessor, this.group);
         if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
             throw new Error('invalid header component');
         }
-        tabToAdd.setContent(panel.view.tab);
-        var disposable = lifecycle_1.CompositeDisposable.from(tabToAdd.onChanged(function (event) {
+        tab.setContent(panel.view.tab);
+        var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
+            _this._onTabDragStart.fire({ nativeEvent: event, panel: panel });
+        }), tab.onChanged(function (event) {
             var _a;
@@ -254,4 +265,4 @@ var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
                 event.preventDefault();
-                var panel_1 = _this.accessor.getGroupPanel(tabToAdd.panelId);
-                var _b = tabToAdd.element.getBoundingClientRect(), top_2 = _b.top, left = _b.left;
+                var panel_1 = _this.accessor.getGroupPanel(tab.panel.id);
+                var _b = tab.element.getBoundingClientRect(), top_2 = _b.top, left = _b.left;
                 var _c = _this.accessor.element.getBoundingClientRect(), rootTop = _c.top, rootLeft = _c.left;
@@ -273,9 +284,9 @@ _this.accessor.addFloatingGroup(panel_1, {
             });
-        }), tabToAdd.onDrop(function (event) {
+        }), tab.onDrop(function (event) {
             _this._onDrop.fire({
                 event: event.nativeEvent,
-                index: _this.tabs.findIndex(function (x) { return x.value === tabToAdd; }),
+                index: _this.tabs.findIndex(function (x) { return x.value === tab; }),
             });
         }));
-        var value = { value: tabToAdd, disposable: disposable };
+        var value = { value: tab, disposable: disposable };
         this.addTab(value, index);
@@ -282,0 +293,0 @@ };

dist/cjs/dockview/components/titlebar/voidContainer.d.ts

@@ -13,2 +13,4 @@ import { DroptargetEvent } from '../../../dnd/droptarget';
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
@@ -15,0 +17,0 @@ constructor(accessor: DockviewComponent, group: DockviewGroupPanel);

dist/cjs/dockview/components/titlebar/voidContainer.js

@@ -34,2 +34,4 @@ "use strict";
         _this.onDrop = _this._onDrop.event;
+        _this._onDragStart = new events_1.Emitter();
+        _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
@@ -39,6 +41,6 @@ _this._element.className = 'void-container';
         _this._element.draggable = true;
-        _this.addDisposables(_this._onDrop, (0, events_1.addDisposableListener)(_this._element, 'click', function () {
+        _this.addDisposables(_this._onDrop, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'click', function () {
             _this.accessor.doSetGroupActive(_this.group);
         }));
-        var handler = new groupDragHandler_1.GroupDragHandler(_this._element, accessor.id, group);
+        var handler = new groupDragHandler_1.GroupDragHandler(_this._element, accessor, group);
         _this.voidDropTarget = new droptarget_1.Droptarget(_this._element, {
@@ -61,3 +63,5 @@ acceptedTargetZones: ['center'],
         });
-        _this.addDisposables(handler, _this.voidDropTarget.onDrop(function (event) {
+        _this.addDisposables(handler, handler.onDragStart(function (event) {
+            _this._onDragStart.fire(event);
+        }), _this.voidDropTarget.onDrop(function (event) {
             _this._onDrop.fire(event);
@@ -64,0 +68,0 @@ }), _this.voidDropTarget);

dist/cjs/dockview/dockviewComponent.d.ts

@@ -12,3 +12,5 @@ import { SerializedGridObject } from '../gridview/gridview';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { Parameters } from '../panel/types';
 import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 export interface PanelReference {
@@ -42,3 +44,3 @@ update: (event: {
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
@@ -60,3 +62,3 @@ api: DockviewApi;
     options: DockviewComponentOptions;
-    addPanel(options: AddPanelOptions): IDockviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel;
     removePanel(panel: IDockviewPanel): void;
@@ -77,2 +79,4 @@ getGroupPanel: (id: string) => IDockviewPanel | undefined;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
@@ -89,2 +93,6 @@ x: number;
     private watermark;
+    private readonly _onWillDragPanel;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    private readonly _onWillDragGroup;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     private readonly _onDidDrop;
@@ -133,3 +141,3 @@ readonly onDidDrop: Event<DockviewDropEvent>;
     closeAllGroups(): void;
-    addPanel(options: AddPanelOptions): DockviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): DockviewPanel;
     removePanel(panel: IDockviewPanel, options?: {
@@ -157,4 +165,3 @@ removeEmptyGroup: boolean;
     private findGroup;
-    dispose(): void;
 }
 //# sourceMappingURL=dockviewComponent.d.ts.map

dist/cjs/dockview/dockviewComponent.js

@@ -87,2 +87,3 @@ "use strict";
 var dockviewFloatingGroupPanel_1 = require("./dockviewFloatingGroupPanel");
+var DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 var DockviewComponent = /** @class */ (function (_super) {
@@ -100,2 +101,6 @@ __extends(DockviewComponent, _super);
         _this.watermark = null;
+        _this._onWillDragPanel = new events_1.Emitter();
+        _this.onWillDragPanel = _this._onWillDragPanel.event;
+        _this._onWillDragGroup = new events_1.Emitter();
+        _this.onWillDragGroup = _this._onWillDragGroup.event;
         _this._onDidDrop = new events_1.Emitter();
@@ -113,3 +118,3 @@ _this.onDidDrop = _this._onDidDrop.event;
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
-        _this.addDisposables(_this._onDidDrop, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
+        _this.addDisposables(_this._onWillDragPanel, _this._onWillDragGroup, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
             _this.updateWatermark();
@@ -228,3 +233,3 @@ }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         var group;
@@ -257,4 +262,8 @@ if (item instanceof dockviewPanel_1.DockviewPanel) {
             top: overlayTop,
-            minimumInViewportWidth: 100,
-            minimumInViewportHeight: 100,
+            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                ? undefined
+                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+            minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                ? undefined
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
@@ -332,4 +341,8 @@ var el = group.element.querySelector('.void-container');
     DockviewComponent.prototype.updateOptions = function (options) {
+        var e_1, _a;
+        var _b, _c;
         var hasOrientationChanged = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
+        var hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            options.floatingGroupBounds !== this.options.floatingGroupBounds;
         this._options = __assign(__assign({}, this.options), options);
@@ -339,6 +352,38 @@ if (hasOrientationChanged) {
         }
+        if (hasFloatingGroupOptionsChanged) {
+            try {
+                for (var _d = __values(this.floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var group = _e.value;
+                    switch (this.options.floatingGroupBounds) {
+                        case 'boundedWithinViewport':
+                            group.overlay.minimumInViewportHeight = undefined;
+                            group.overlay.minimumInViewportWidth = undefined;
+                            break;
+                        case undefined:
+                            group.overlay.minimumInViewportHeight =
+                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                            group.overlay.minimumInViewportWidth =
+                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                            break;
+                        default:
+                            group.overlay.minimumInViewportHeight =
+                                (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumHeightWithinViewport;
+                            group.overlay.minimumInViewportWidth =
+                                (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
+                    }
+                    group.overlay.setBounds({});
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_1, _a;
+        var e_2, _a;
         _super.prototype.layout.call(this, width, height, forceResize);
@@ -353,3 +398,3 @@ if (this.floatingGroups) {
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
@@ -359,3 +404,3 @@ try {
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_2) throw e_2.error; }
             }
@@ -445,3 +490,3 @@ }
     DockviewComponent.prototype.fromJSON = function (data) {
-        var e_2, _a, e_3, _b;
+        var e_3, _a, e_4, _b;
         var _this = this;
@@ -458,3 +503,3 @@ var _c;
         var createGroupFromSerializedState = function (data) {
-            var e_4, _a;
+            var e_5, _a;
             var id = data.id, locked = data.locked, hideHeader = data.hideHeader, views = data.views, activeView = data.activeView;
@@ -478,3 +523,3 @@ var group = _this.createGroup({
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
@@ -484,3 +529,3 @@ try {
                 }
-                finally { if (e_4) throw e_4.error; }
+                finally { if (e_5) throw e_5.error; }
             }
@@ -514,3 +559,3 @@ if (!group.activePanel && group.panels.length > 0) {
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
         finally {
@@ -520,3 +565,3 @@ try {
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_3) throw e_3.error; }
         }
@@ -529,3 +574,3 @@ try {
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
@@ -535,3 +580,3 @@ try {
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_4) throw e_4.error; }
         }
@@ -547,3 +592,3 @@ if (typeof activeGroup === 'string') {
     DockviewComponent.prototype.clear = function () {
-        var e_5, _a;
+        var e_6, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
@@ -559,3 +604,3 @@ var hasActiveGroup = !!this.activeGroup;
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
@@ -565,3 +610,3 @@ try {
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_6) throw e_6.error; }
         }
@@ -577,3 +622,3 @@ if (hasActiveGroup) {
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_6, _a;
+        var e_7, _a;
         try {
@@ -586,3 +631,3 @@ for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
@@ -592,3 +637,3 @@ try {
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_7) throw e_7.error; }
         }
@@ -769,3 +814,3 @@ };
     DockviewComponent.prototype.removeGroup = function (group, options) {
-        var e_7, _a;
+        var e_8, _a;
         var _b;
@@ -782,3 +827,3 @@ var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
         finally {
@@ -788,3 +833,3 @@ try {
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_8) throw e_8.error; }
         }
@@ -868,3 +913,3 @@ this.doRemoveGroup(group, options);
     DockviewComponent.prototype.moveGroup = function (sourceGroup, referenceGroup, target) {
-        var e_8, _a;
+        var e_9, _a;
         if (sourceGroup) {
@@ -887,3 +932,3 @@ if (!target || target === 'center') {
                 }
-                catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                catch (e_9_1) { e_9 = { error: e_9_1 }; }
                 finally {
@@ -893,3 +938,3 @@ try {
                     }
-                    finally { if (e_8) throw e_8.error; }
+                    finally { if (e_9) throw e_9.error; }
                 }
@@ -938,3 +983,7 @@ }
         if (!this._groups.has(view.id)) {
-            var disposable = new lifecycle_1.CompositeDisposable(view.model.onMove(function (event) {
+            var disposable = new lifecycle_1.CompositeDisposable(view.model.onTabDragStart(function (event) {
+                _this._onWillDragPanel.fire(event);
+            }), view.model.onGroupDragStart(function (event) {
+                _this._onWillDragGroup.fire(event);
+            }), view.model.onMove(function (event) {
                 var groupId = event.groupId, itemId = event.itemId, target = event.target, index = event.index;
@@ -981,9 +1030,2 @@ _this.moveGroupOrPanel(view, groupId, itemId, target, index);
     };
-    DockviewComponent.prototype.dispose = function () {
-        this._onDidActivePanelChange.dispose();
-        this._onDidAddPanel.dispose();
-        this._onDidRemovePanel.dispose();
-        this._onDidLayoutFromJSON.dispose();
-        _super.prototype.dispose.call(this);
-    };
     return DockviewComponent;
@@ -990,0 +1032,0 @@ }(baseComponentGridview_1.BaseGrid));

dist/cjs/dockview/dockviewGroupPanel.d.ts

 import { IFrameworkPart } from '../panel/types';
 import { DockviewComponent } from '../dockview/dockviewComponent';
-import { DockviewGroupPanelModel, GroupOptions, IDockviewGroupPanelModel, IHeader } from './dockviewGroupPanelModel';
+import { DockviewGroupPanelModel, GroupOptions, IDockviewGroupPanelModel, IHeader, DockviewGroupPanelLocked } from './dockviewGroupPanelModel';
 import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
@@ -9,3 +9,3 @@ import { IDockviewPanel } from '../dockview/dockviewPanel';
     model: IDockviewGroupPanelModel;
-    locked: boolean;
+    locked: DockviewGroupPanelLocked;
     readonly size: number;
@@ -22,4 +22,4 @@ readonly panels: IDockviewPanel[];
     get model(): DockviewGroupPanelModel;
-    get locked(): boolean;
-    set locked(value: boolean);
+    get locked(): DockviewGroupPanelLocked;
+    set locked(value: DockviewGroupPanelLocked);
     get header(): IHeader;
@@ -26,0 +26,0 @@ constructor(accessor: DockviewComponent, id: string, options: GroupOptions);

dist/cjs/dockview/dockviewGroupPanelModel.d.ts

@@ -8,2 +8,3 @@ import { PanelTransfer } from '../dnd/dataTransfer';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { DockviewDropTargets } from './types';
@@ -32,3 +33,3 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 interface CoreGroupOptions {
-    locked?: boolean;
+    locked?: DockviewGroupPanelLocked;
     hideHeader?: boolean;
@@ -58,2 +59,3 @@ }
 }
+export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
 export interface IDockviewGroupPanelModel extends IPanel {
@@ -71,3 +73,3 @@ readonly isActive: boolean;
     readonly onMove: Event<GroupMoveEvent>;
-    locked: boolean;
+    locked: DockviewGroupPanelLocked;
     setActive(isActive: boolean): void;
@@ -123,2 +125,6 @@ initialize(): void;
     readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
@@ -132,4 +138,4 @@ readonly onDidAddPanel: Event<GroupviewChangeEvent>;
     get activePanel(): IDockviewPanel | undefined;
-    get locked(): boolean;
-    set locked(value: boolean);
+    get locked(): DockviewGroupPanelLocked;
+    set locked(value: DockviewGroupPanelLocked);
     get isActive(): boolean;
@@ -136,0 +142,0 @@ get panels(): IDockviewPanel[];

dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -86,2 +86,6 @@ "use strict";
         _this.onDidDrop = _this._onDidDrop.event;
+        _this._onTabDragStart = new events_1.Emitter();
+        _this.onTabDragStart = _this._onTabDragStart.event;
+        _this._onGroupDragStart = new events_1.Emitter();
+        _this.onGroupDragStart = _this._onGroupDragStart.event;
         _this._onDidAddPanel = new events_1.Emitter();
@@ -99,3 +103,4 @@ _this.onDidAddPanel = _this._onDidAddPanel.event;
             canDisplayOverlay: function (event, position) {
-                if (_this.locked && position === 'center') {
+                if (_this.locked === 'no-drop-target' ||
+                    (_this.locked && position === 'center')) {
                     return false;
@@ -126,4 +131,8 @@ }
         _this.header.hidden = !!options.hideHeader;
-        _this.locked = !!options.locked;
-        _this.addDisposables(_this.tabsContainer.onDrop(function (event) {
+        _this.locked = options.locked || false;
+        _this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this.tabsContainer.onTabDragStart(function (event) {
+            _this._onTabDragStart.fire(event);
+        }), _this.tabsContainer.onGroupDragStart(function (event) {
+            _this._onGroupDragStart.fire(event);
+        }), _this.tabsContainer.onDrop(function (event) {
             _this.handleDropEvent(event.event, 'center', event.index);
@@ -159,3 +168,3 @@ }), _this.contentContainer.onDidFocus(function () {
             this._locked = value;
-            (0, dom_1.toggleClass)(this.container, 'locked-groupview', value);
+            (0, dom_1.toggleClass)(this.container, 'locked-groupview', value === 'no-drop-target' || value);
         },
@@ -278,4 +287,4 @@ enumerable: false,
         };
-        if (this.locked) {
-            result.locked = true;
+        if (this.locked !== false) {
+            result.locked = this.locked;
         }
@@ -549,2 +558,5 @@ if (this.header.hidden) {
     DockviewGroupPanelModel.prototype.handleDropEvent = function (event, position, index) {
+        if (this.locked === 'no-drop-target') {
+            return;
+        }
         var data = (0, dataTransfer_1.getPanelData)();
@@ -551,0 +563,0 @@ if (data && data.viewId === this.accessor.id) {

dist/cjs/dockview/dockviewPanel.d.ts

@@ -14,3 +14,3 @@ import { DockviewApi } from '../api/component.api';
     readonly title: string | undefined;
-    readonly params: Record<string, any> | undefined;
+    readonly params: Parameters | undefined;
     updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void;
@@ -17,0 +17,0 @@ init(params: IGroupPanelInitParameters): void;

dist/cjs/dockview/options.d.ts

@@ -5,2 +5,3 @@ import { DockviewApi } from '../api/component.api';
 import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer, DockviewDropTargets } from './types';
+import { Parameters } from '../panel/types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
@@ -73,9 +74,11 @@ import { ISplitviewStyles, Orientation } from '../splitview/splitview';
     disableFloatingGroups?: boolean;
+    floatingGroupBounds?: 'boundedWithinViewport' | {
+        minimumHeightWithinViewport?: number;
+        minimumWidthWithinViewport?: number;
+    };
 }
-export interface PanelOptions {
+export interface PanelOptions<P extends object = Parameters> {
     component: string;
     tabComponent?: string;
-    params?: {
-        [key: string]: any;
-    };
+    params?: P;
     id: string;
@@ -112,3 +115,3 @@ title?: string;
 type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion;
-export type AddPanelOptions = Omit<PanelOptions, 'component' | 'tabComponent'> & {
+export type AddPanelOptions<P extends object = Parameters> = Omit<PanelOptions<P>, 'component' | 'tabComponent'> & {
     component: string;
@@ -115,0 +118,0 @@ tabComponent?: string;

dist/cjs/gridview/basePanelView.d.ts

 import { CompositeDisposable } from '../lifecycle';
-import { IFrameworkPart, PanelUpdateEvent, PanelInitParameters, IPanel } from '../panel/types';
+import { IFrameworkPart, PanelUpdateEvent, PanelInitParameters, IPanel, Parameters } from '../panel/types';
 import { PanelApi, PanelApiImpl } from '../api/panelApi';
@@ -7,3 +7,3 @@ export interface BasePanelViewState {
     readonly component: string;
-    readonly params?: Record<string, any>;
+    readonly params?: Parameters;
 }
@@ -15,3 +15,3 @@ export interface BasePanelViewExported<T extends PanelApi> {
     readonly height: number;
-    readonly params: Record<string, any> | undefined;
+    readonly params: Parameters | undefined;
     focus(): void;
@@ -34,3 +34,3 @@ toJSON(): object;
     get height(): number;
-    get params(): Record<string, any> | undefined;
+    get params(): Parameters | undefined;
     constructor(id: string, component: string, api: T);
@@ -37,0 +37,0 @@ focus(): void;

dist/cjs/gridview/gridviewComponent.d.ts

@@ -6,3 +6,3 @@ import { SerializedGridview } from './gridview';
 import { GridviewPanel, GridviewInitParameters, GridPanelViewState, IGridviewPanel } from './gridviewPanel';
-import { BaseComponentOptions } from '../panel/types';
+import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Orientation, Sizing } from '../splitview/splitview';
@@ -15,3 +15,3 @@ import { Event } from '../events';
 }
-export interface AddComponentOptions extends BaseComponentOptions {
+export interface AddComponentOptions<T extends object = Parameters> extends BaseComponentOptions<T> {
     minimumWidth?: number;
@@ -35,3 +35,3 @@ maximumWidth?: number;
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
-    addPanel(options: AddComponentOptions): IGridviewPanel;
+    addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
@@ -78,3 +78,3 @@ focus(): void;
     }): void;
-    addPanel(options: AddComponentOptions): IGridviewPanel;
+    addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
     private registerPanel;
@@ -81,0 +81,0 @@ moveGroup(referenceGroup: IGridPanelComponentView, groupId: string, target: Position): void;

dist/cjs/lifecycle.d.ts

@@ -15,3 +15,2 @@ export interface IDisposable {
     protected get isDisposed(): boolean;
-    static from(...args: IDisposable[]): CompositeDisposable;
     constructor(...args: IDisposable[]);
@@ -18,0 +17,0 @@ addDisposables(...args: IDisposable[]): void;

dist/cjs/lifecycle.js

 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -53,9 +28,2 @@ exports.MutableDisposable = exports.CompositeDisposable = exports.Disposable = void 0;
     });
-    CompositeDisposable.from = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return new (CompositeDisposable.bind.apply(CompositeDisposable, __spreadArray([void 0], __read(args), false)))();
-    };
     CompositeDisposable.prototype.addDisposables = function () {
@@ -62,0 +30,0 @@ var _this = this;

dist/cjs/panel/types.d.ts

@@ -26,6 +26,6 @@ import { IDisposable } from '../lifecycle';
 }
-export interface BaseComponentOptions {
+export interface BaseComponentOptions<T extends object = Parameters> {
     id: string;
     component: string;
-    params?: Parameters;
+    params?: T;
     snap?: boolean;
@@ -32,0 +32,0 @@ priority?: LayoutPriority;

dist/cjs/paneview/paneviewComponent.d.ts

@@ -10,2 +10,3 @@ import { Event } from '../events';
 import { Resizable } from '../resizable';
+import { Parameters } from '../panel/types';
 export interface PaneviewDndOverlayEvent {
@@ -53,9 +54,7 @@ nativeEvent: DragEvent;
 }
-export interface AddPaneviewComponentOptions {
+export interface AddPaneviewComponentOptions<T extends object = Parameters> {
     id: string;
     component: string;
     headerComponent?: string;
-    params?: {
-        [key: string]: any;
-    };
+    params?: T;
     minimumBodySize?: number;
@@ -81,3 +80,3 @@ maximumBodySize?: number;
     readonly onDidLayoutFromJSON: Event<void>;
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
     layout(width: number, height: number): void;
@@ -121,3 +120,3 @@ toJSON(): SerializedPaneview;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
     removePanel(panel: PaneviewPanel): void;
@@ -124,0 +123,0 @@ movePanel(from: number, to: number): void;

dist/cjs/splitview/splitviewComponent.d.ts

 import { IDisposable } from '../lifecycle';
 import { IView, LayoutPriority, Orientation, Sizing, Splitview } from './splitview';
 import { SplitviewComponentOptions } from './options';
-import { BaseComponentOptions } from '../panel/types';
+import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Event } from '../events';
@@ -29,3 +29,3 @@ import { SplitviewPanel, ISplitviewPanel } from './splitviewPanel';
 }
-export interface AddSplitviewComponentOptions extends BaseComponentOptions {
+export interface AddSplitviewComponentOptions<T extends Parameters = Parameters> extends BaseComponentOptions<T> {
     index?: number;
@@ -48,3 +48,3 @@ minimumSize?: number;
     updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
-    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
+    addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
     layout(width: number, height: number): void;
@@ -96,3 +96,3 @@ onDidLayoutChange: Event<void>;
     getPanel(id: string): SplitviewPanel | undefined;
-    addPanel(options: AddSplitviewComponentOptions): SplitviewPanel;
+    addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): SplitviewPanel;
     layout(width: number, height: number): void;
@@ -99,0 +99,0 @@ private doAddView;

dist/cjs/splitview/splitviewPanel.d.ts

@@ -42,3 +42,3 @@ import { ISerializableView, PanelViewInitParameters } from './options';
         component: string;
-        params?: Record<string, any> | undefined;
+        params?: import("..").Parameters | undefined;
     };
@@ -45,0 +45,0 @@ private updateConstraints;

dist/esm/api/component.api.d.ts

 import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options';
+import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
@@ -15,2 +16,3 @@ import { AddComponentOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
 import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 export interface CommonApi<T = any> {
@@ -46,3 +48,3 @@ readonly height: number;
     layout(width: number, height: number): void;
-    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
+    addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
     movePanel(from: number, to: number): void;
@@ -71,3 +73,3 @@ fromJSON(data: SerializedSplitview): void;
     layout(width: number, height: number): void;
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
     fromJSON(data: SerializedPaneview): void;
@@ -96,3 +98,3 @@ toJSON(): SerializedPaneview;
     layout(width: number, height: number, force?: boolean): void;
-    addPanel(options: AddComponentOptions): IGridviewPanel;
+    addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
@@ -129,2 +131,4 @@ movePanel(panel: IGridviewPanel, options: {
     get onDidDrop(): Event<DockviewDropEvent>;
+    get onWillDragGroup(): Event<GroupDragEvent>;
+    get onWillDragPanel(): Event<TabDragEvent>;
     get panels(): IDockviewPanel[];
@@ -138,3 +142,3 @@ get groups(): DockviewGroupPanel[];
     layout(width: number, height: number, force?: boolean): void;
-    addPanel(options: AddPanelOptions): IDockviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel;
     removePanel(panel: IDockviewPanel): void;
@@ -141,0 +145,0 @@ addGroup(options?: AddGroupOptions): DockviewGroupPanel;

dist/esm/api/component.api.js

@@ -269,2 +269,8 @@ import { Emitter } from '../events';
     }
+    get onWillDragGroup() {
+        return this.component.onWillDragGroup;
+    }
+    get onWillDragPanel() {
+        return this.component.onWillDragPanel;
+    }
     get panels() {
@@ -271,0 +277,0 @@ return this.component.panels;

dist/esm/dnd/abstractDragHandler.d.ts

@@ -7,5 +7,5 @@ import { CompositeDisposable, IDisposable } from '../lifecycle';
     private readonly _onDragStart;
-    readonly onDragStart: import("../events").Event<void>;
+    readonly onDragStart: import("../events").Event<DragEvent>;
     constructor(el: HTMLElement);
-    abstract getData(dataTransfer?: DataTransfer | null): IDisposable;
+    abstract getData(event: DragEvent): IDisposable;
     protected isCancelled(_event: DragEvent): boolean;
@@ -12,0 +12,0 @@ private configure;

dist/esm/dnd/abstractDragHandler.js

@@ -20,3 +20,3 @@ import { getElementsByTagName } from '../dom';
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            if (this.isCancelled(event)) {
+            if (event.defaultPrevented || this.isCancelled(event)) {
                 event.preventDefault();
@@ -41,15 +41,19 @@ return;
             setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-            this.dataDisposable.value = this.getData(event.dataTransfer);
+            this.dataDisposable.value = this.getData(event);
+            this._onDragStart.fire(event);
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'move';
-                /**
-                 * Although this is not used by dockview many third party dnd libraries will check
-                 * dataTransfer.types to determine valid drag events.
-                 *
-                 * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                 * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                 * dnd logic. You can see the code at
-                 * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                 */
-                event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                const hasData = event.dataTransfer.items.length > 0;
+                if (!hasData) {
+                    /**
+                     * Although this is not used by dockview many third party dnd libraries will check
+                     * dataTransfer.types to determine valid drag events.
+                     *
+                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                     * dnd logic. You can see the code at
+                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                     */
+                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                }
             }
@@ -56,0 +60,0 @@ }), addDisposableListener(this.el, 'dragend', () => {

dist/esm/dnd/groupDragHandler.d.ts

@@ -0,1 +1,2 @@
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
@@ -5,9 +6,9 @@ import { IDisposable } from '../lifecycle';
 export declare class GroupDragHandler extends DragHandler {
-    private readonly accessorId;
+    private readonly accessor;
     private readonly group;
     private readonly panelTransfer;
-    constructor(element: HTMLElement, accessorId: string, group: DockviewGroupPanel);
+    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel);
     isCancelled(_event: DragEvent): boolean;
-    getData(dataTransfer: DataTransfer | null): IDisposable;
+    getData(dragEvent: DragEvent): IDisposable;
 }
 //# sourceMappingURL=groupDragHandler.d.ts.map

dist/esm/dnd/groupDragHandler.js

@@ -7,5 +7,5 @@ import { quasiPreventDefault } from '../dom';
 export class GroupDragHandler extends DragHandler {
-    constructor(element, accessorId, group) {
+    constructor(element, accessor, group) {
         super(element);
-        this.accessorId = accessorId;
+        this.accessor = accessor;
         this.group = group;
@@ -30,4 +30,5 @@ this.panelTransfer = LocalSelectionTransfer.getInstance();
     }
-    getData(dataTransfer) {
-        this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
+    getData(dragEvent) {
+        const dataTransfer = dragEvent.dataTransfer;
+        this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
         const style = window.getComputedStyle(this.el);
@@ -34,0 +35,0 @@ const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');

dist/esm/dnd/overlay.d.ts

@@ -12,2 +12,4 @@ import { Event } from '../events';
     private static MINIMUM_WIDTH;
+    set minimumInViewportWidth(value: number | undefined);
+    set minimumInViewportHeight(value: number | undefined);
     constructor(options: {
@@ -20,4 +22,4 @@ height: number;
         content: HTMLElement;
-        minimumInViewportWidth: number;
-        minimumInViewportHeight: number;
+        minimumInViewportWidth?: number;
+        minimumInViewportHeight?: number;
     });
@@ -40,4 +42,6 @@ setBounds(bounds?: Partial<{
     private setupResize;
+    private getMinimumWidth;
+    private getMinimumHeight;
     dispose(): void;
 }
 //# sourceMappingURL=overlay.d.ts.map

dist/esm/dnd/overlay.js

@@ -17,2 +17,8 @@ import { getElementsByTagName, quasiDefaultPrevented, toggleClass, } from '../dom';
 export class Overlay extends CompositeDisposable {
+    set minimumInViewportWidth(value) {
+        this.options.minimumInViewportWidth = value;
+    }
+    set minimumInViewportHeight(value) {
+        this.options.minimumInViewportHeight = value;
+    }
     constructor(options) {
@@ -63,5 +69,7 @@ super();
         // a minimum width of minimumViewportWidth must be inside the viewport
-        const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+        const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
         // a minimum height of minimumViewportHeight must be inside the viewport
-        const yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+        const yOffset = typeof this.options.minimumInViewportHeight === 'number'
+            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
+            : 0;
         const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
@@ -112,5 +120,6 @@ const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                 }
-                const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
-                const yOffset = Math.max(0, overlayRect.height -
-                    this.options.minimumInViewportHeight);
+                const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
+                const yOffset = Math.max(0, this.options.minimumInViewportHeight
+                    ? this.getMinimumHeight(overlayRect.height)
+                    : 0);
                 const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
@@ -189,10 +198,7 @@ const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                 let width = undefined;
-                const minimumInViewportHeight = this.options.minimumInViewportHeight;
-                const minimumInViewportWidth = this.options.minimumInViewportWidth;
-                function moveTop() {
+                const moveTop = () => {
                     top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? containerRect.height -
-                            minimumInViewportHeight
+                        ? this.getMinimumHeight(containerRect.height)
                         : Math.max(0, startPosition.originalY +
@@ -205,17 +211,19 @@ startPosition.originalHeight -
                             top;
-                }
-                function moveBottom() {
+                };
+                const moveBottom = () => {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = clamp(y - top, top < 0
-                        ? -top + minimumInViewportHeight
+                    height = clamp(y - top, top < 0 &&
+                        typeof this.options
+                            .minimumInViewportHeight === 'number'
+                        ? -top +
+                            this.options.minimumInViewportHeight
                         : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
-                }
-                function moveLeft() {
+                };
+                const moveLeft = () => {
                     left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
                         startPosition.originalWidth >
                         containerRect.width
-                        ? containerRect.width -
-                            minimumInViewportWidth
+                        ? this.getMinimumWidth(containerRect.width)
                         : Math.max(0, startPosition.originalX +
@@ -228,11 +236,14 @@ startPosition.originalWidth -
                             left;
-                }
-                function moveRight() {
+                };
+                const moveRight = () => {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = clamp(x - left, left < 0
-                        ? -left + minimumInViewportWidth
+                    width = clamp(x - left, left < 0 &&
+                        typeof this.options
+                            .minimumInViewportWidth === 'number'
+                        ? -left +
+                            this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                }
+                };
                 switch (direction) {
@@ -281,2 +292,14 @@ case 'top':
     }
+    getMinimumWidth(width) {
+        if (typeof this.options.minimumInViewportWidth === 'number') {
+            return width - this.options.minimumInViewportWidth;
+        }
+        return 0;
+    }
+    getMinimumHeight(height) {
+        if (typeof this.options.minimumInViewportHeight === 'number') {
+            return height - this.options.minimumInViewportHeight;
+        }
+        return height;
+    }
     dispose() {
@@ -283,0 +306,0 @@ this._element.remove();

dist/esm/dockview/components/tab/tab.d.ts

@@ -7,4 +7,5 @@ import { Event } from '../../../events';
 import { DroptargetEvent } from '../../../dnd/droptarget';
+import { IDockviewPanel } from '../../dockviewPanel';
 export interface ITab extends IDisposable {
-    readonly panelId: string;
+    readonly panel: IDockviewPanel;
     readonly element: HTMLElement;
@@ -17,3 +18,3 @@ setContent: (element: ITabRenderer) => void;
 export declare class Tab extends CompositeDisposable implements ITab {
-    readonly panelId: string;
+    readonly panel: IDockviewPanel;
     private readonly accessor;
@@ -23,3 +24,3 @@ private readonly group;
     private readonly droptarget;
-    private content?;
+    private content;
     private readonly _onChanged;
@@ -29,4 +30,6 @@ readonly onChanged: Event<MouseEvent>;
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
-    constructor(panelId: string, accessor: DockviewComponent, group: DockviewGroupPanel);
+    constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
@@ -33,0 +36,0 @@ setContent(part: ITabRenderer): void;

dist/esm/dockview/components/tab/tab.js

@@ -8,2 +8,19 @@ import { addDisposableListener, Emitter } from '../../../events';
 import { DragHandler } from '../../../dnd/abstractDragHandler';
+class TabDragHandler extends DragHandler {
+    constructor(element, accessor, group, panel) {
+        super(element);
+        this.accessor = accessor;
+        this.group = group;
+        this.panel = panel;
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
+    }
+    getData(event) {
+        this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
+        return {
+            dispose: () => {
+                this.panelTransfer.clearData(PanelTransfer.prototype);
+            },
+        };
+    }
+}
 export class Tab extends CompositeDisposable {
@@ -13,7 +30,8 @@ get element() {
     }
-    constructor(panelId, accessor, group) {
+    constructor(panel, accessor, group) {
         super();
-        this.panelId = panelId;
+        this.panel = panel;
         this.accessor = accessor;
         this.group = group;
+        this.content = undefined;
         this._onChanged = new Emitter();
@@ -23,2 +41,4 @@ this.onChanged = this._onChanged.event;
         this.onDrop = this._onDropped.event;
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
@@ -29,22 +49,3 @@ this._element.className = 'tab';
         toggleClass(this.element, 'inactive-tab', true);
-        this.addDisposables(this._onChanged, this._onDropped, new (class Handler extends DragHandler {
-            constructor() {
-                super(...arguments);
-                this.panelTransfer = LocalSelectionTransfer.getInstance();
-            }
-            getData() {
-                this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
-                return {
-                    dispose: () => {
-                        this.panelTransfer.clearData(PanelTransfer.prototype);
-                    },
-                };
-            }
-        })(this._element));
-        this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            this._onChanged.fire(event);
-        }));
+        const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
         this.droptarget = new Droptarget(this._element, {
@@ -63,3 +64,3 @@ acceptedTargetZones: ['center'],
                     }
-                    return this.panelId !== data.panelId;
+                    return this.panel.id !== data.panelId;
                 }
@@ -69,3 +70,10 @@ return this.group.model.canDisplayOverlay(event, position, DockviewDropTargets.Tab);
         });
-        this.addDisposables(this.droptarget.onDrop((event) => {
+        this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            this._onChanged.fire(event);
+        }), this.droptarget.onDrop((event) => {
             this._onDropped.fire(event);
@@ -72,0 +80,0 @@ }), this.droptarget);

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

@@ -11,2 +11,10 @@ import { IDisposable, CompositeDisposable } from '../../../lifecycle';
 }
+export interface TabDragEvent {
+    readonly nativeEvent: DragEvent;
+    readonly panel: IDockviewPanel;
+}
+export interface GroupDragEvent {
+    readonly nativeEvent: DragEvent;
+    readonly group: DockviewGroupPanel;
+}
 export interface ITabsContainer extends IDisposable {
@@ -16,5 +24,8 @@ readonly element: HTMLElement;
     readonly size: number;
+    hidden: boolean;
     delete: (id: string) => void;
     indexOf: (id: string) => number;
     onDrop: Event<TabDropIndexEvent>;
+    onTabDragStart: Event<TabDragEvent>;
+    onGroupDragStart: Event<GroupDragEvent>;
     setActive: (isGroupActive: boolean) => void;
@@ -27,3 +38,2 @@ setActivePanel: (panel: IDockviewPanel) => void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
-    hidden: boolean;
     show(): void;
@@ -47,2 +57,6 @@ hide(): void;
     readonly onDrop: Event<TabDropIndexEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     get panels(): string[];
@@ -49,0 +63,0 @@ get size(): number;

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

@@ -8,3 +8,3 @@ import { CompositeDisposable, } from '../../../lifecycle';
     get panels() {
-        return this.tabs.map((_) => _.value.panelId);
+        return this.tabs.map((_) => _.value.panel.id);
     }
@@ -63,3 +63,3 @@ get size() {
     indexOf(id) {
-        return this.tabs.findIndex((tab) => tab.value.panelId === id);
+        return this.tabs.findIndex((tab) => tab.value.panel.id === id);
     }
@@ -75,3 +75,7 @@ constructor(accessor, group) {
         this.onDrop = this._onDrop.event;
-        this.addDisposables(this._onDrop);
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onGroupDragStart = new Emitter();
+        this.onGroupDragStart = this._onGroupDragStart.event;
+        this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart);
         this._element = document.createElement('div');
@@ -100,3 +104,8 @@ this._element.className = 'tabs-and-actions-container';
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
+        this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => {
+            this._onGroupDragStart.fire({
+                nativeEvent: event,
+                group: this.group,
+            });
+        }), this.voidContainer.onDrop((event) => {
             this._onDrop.fire({
@@ -147,3 +156,3 @@ event: event.nativeEvent,
     delete(id) {
-        const index = this.tabs.findIndex((tab) => tab.value.panelId === id);
+        const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
         const tabToRemove = this.tabs.splice(index, 1)[0];
@@ -157,3 +166,3 @@ const { value, disposable } = tabToRemove;
         this.tabs.forEach((tab) => {
-            const isActivePanel = panel.id === tab.value.panelId;
+            const isActivePanel = panel.id === tab.value.panel.id;
             tab.value.setActive(isActivePanel);
@@ -164,11 +173,13 @@ });
         var _a;
-        if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
+        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
             return;
         }
-        const tabToAdd = new Tab(panel.id, this.accessor, this.group);
+        const tab = new Tab(panel, this.accessor, this.group);
         if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
             throw new Error('invalid header component');
         }
-        tabToAdd.setContent(panel.view.tab);
-        const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
+        tab.setContent(panel.view.tab);
+        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+            this._onTabDragStart.fire({ nativeEvent: event, panel });
+        }), tab.onChanged((event) => {
             var _a;
@@ -181,4 +192,4 @@ const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
                 event.preventDefault();
-                const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
-                const { top, left } = tabToAdd.element.getBoundingClientRect();
+                const panel = this.accessor.getGroupPanel(tab.panel.id);
+                const { top, left } = tab.element.getBoundingClientRect();
                 const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
@@ -200,9 +211,9 @@ this.accessor.addFloatingGroup(panel, {
             });
-        }), tabToAdd.onDrop((event) => {
+        }), tab.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
-                index: this.tabs.findIndex((x) => x.value === tabToAdd),
+                index: this.tabs.findIndex((x) => x.value === tab),
             });
         }));
-        const value = { value: tabToAdd, disposable };
+        const value = { value: tab, disposable };
         this.addTab(value, index);
@@ -209,0 +220,0 @@ }

dist/esm/dockview/components/titlebar/voidContainer.d.ts

@@ -13,2 +13,4 @@ import { DroptargetEvent } from '../../../dnd/droptarget';
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
@@ -15,0 +17,0 @@ constructor(accessor: DockviewComponent, group: DockviewGroupPanel);

dist/esm/dockview/components/titlebar/voidContainer.js

@@ -18,2 +18,4 @@ import { last } from '../../../array';
         this.onDrop = this._onDrop.event;
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
@@ -23,6 +25,6 @@ this._element.className = 'void-container';
         this._element.draggable = true;
-        this.addDisposables(this._onDrop, addDisposableListener(this._element, 'click', () => {
+        this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
             this.accessor.doSetGroupActive(this.group);
         }));
-        const handler = new GroupDragHandler(this._element, accessor.id, group);
+        const handler = new GroupDragHandler(this._element, accessor, group);
         this.voidDropTarget = new Droptarget(this._element, {
@@ -45,3 +47,5 @@ acceptedTargetZones: ['center'],
         });
-        this.addDisposables(handler, this.voidDropTarget.onDrop((event) => {
+        this.addDisposables(handler, handler.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }), this.voidDropTarget.onDrop((event) => {
             this._onDrop.fire(event);
@@ -48,0 +52,0 @@ }), this.voidDropTarget);

dist/esm/dockview/dockviewComponent.d.ts

@@ -12,3 +12,5 @@ import { SerializedGridObject } from '../gridview/gridview';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { Parameters } from '../panel/types';
 import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 export interface PanelReference {
@@ -42,3 +44,3 @@ update: (event: {
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
@@ -60,3 +62,3 @@ api: DockviewApi;
     options: DockviewComponentOptions;
-    addPanel(options: AddPanelOptions): IDockviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel;
     removePanel(panel: IDockviewPanel): void;
@@ -77,2 +79,4 @@ getGroupPanel: (id: string) => IDockviewPanel | undefined;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
@@ -89,2 +93,6 @@ x: number;
     private watermark;
+    private readonly _onWillDragPanel;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    private readonly _onWillDragGroup;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     private readonly _onDidDrop;
@@ -133,3 +141,3 @@ readonly onDidDrop: Event<DockviewDropEvent>;
     closeAllGroups(): void;
-    addPanel(options: AddPanelOptions): DockviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): DockviewPanel;
     removePanel(panel: IDockviewPanel, options?: {
@@ -157,4 +165,3 @@ removeEmptyGroup: boolean;
     private findGroup;
-    dispose(): void;
 }
 //# sourceMappingURL=dockviewComponent.d.ts.map

dist/esm/dockview/dockviewComponent.js

@@ -22,2 +22,3 @@ import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
 import { DockviewFloatingGroupPanel, } from './dockviewFloatingGroupPanel';
+const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 export class DockviewComponent extends BaseGrid {
@@ -53,2 +54,6 @@ get orientation() {
         this.watermark = null;
+        this._onWillDragPanel = new Emitter();
+        this.onWillDragPanel = this._onWillDragPanel.event;
+        this._onWillDragGroup = new Emitter();
+        this.onWillDragGroup = this._onWillDragGroup.event;
         this._onDidDrop = new Emitter();
@@ -66,3 +71,3 @@ this.onDidDrop = this._onDidDrop.event;
         toggleClass(this.gridview.element, 'dv-dockview', true);
-        this.addDisposables(this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+        this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
@@ -140,3 +145,3 @@ }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
     addFloatingGroup(item, coord, options) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         let group;
@@ -169,4 +174,8 @@ if (item instanceof DockviewPanel) {
             top: overlayTop,
-            minimumInViewportWidth: 100,
-            minimumInViewportHeight: 100,
+            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                ? undefined
+                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+            minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                ? undefined
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
@@ -244,4 +253,7 @@ const el = group.element.querySelector('.void-container');
     updateOptions(options) {
+        var _a, _b;
         const hasOrientationChanged = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
+        const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            options.floatingGroupBounds !== this.options.floatingGroupBounds;
         this._options = Object.assign(Object.assign({}, this.options), options);
@@ -251,2 +263,24 @@ if (hasOrientationChanged) {
         }
+        if (hasFloatingGroupOptionsChanged) {
+            for (const group of this.floatingGroups) {
+                switch (this.options.floatingGroupBounds) {
+                    case 'boundedWithinViewport':
+                        group.overlay.minimumInViewportHeight = undefined;
+                        group.overlay.minimumInViewportWidth = undefined;
+                        break;
+                    case undefined:
+                        group.overlay.minimumInViewportHeight =
+                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                        group.overlay.minimumInViewportWidth =
+                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                        break;
+                    default:
+                        group.overlay.minimumInViewportHeight =
+                            (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                        group.overlay.minimumInViewportWidth =
+                            (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+                }
+                group.overlay.setBounds({});
+            }
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
@@ -734,3 +768,7 @@ }
         if (!this._groups.has(view.id)) {
-            const disposable = new CompositeDisposable(view.model.onMove((event) => {
+            const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
+                this._onWillDragPanel.fire(event);
+            }), view.model.onGroupDragStart((event) => {
+                this._onWillDragGroup.fire(event);
+            }), view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
@@ -774,10 +812,3 @@ this.moveGroupOrPanel(view, groupId, itemId, target, index);
     }
-    dispose() {
-        this._onDidActivePanelChange.dispose();
-        this._onDidAddPanel.dispose();
-        this._onDidRemovePanel.dispose();
-        this._onDidLayoutFromJSON.dispose();
-        super.dispose();
-    }
 }
 //# sourceMappingURL=dockviewComponent.js.map

dist/esm/dockview/dockviewGroupPanel.d.ts

 import { IFrameworkPart } from '../panel/types';
 import { DockviewComponent } from '../dockview/dockviewComponent';
-import { DockviewGroupPanelModel, GroupOptions, IDockviewGroupPanelModel, IHeader } from './dockviewGroupPanelModel';
+import { DockviewGroupPanelModel, GroupOptions, IDockviewGroupPanelModel, IHeader, DockviewGroupPanelLocked } from './dockviewGroupPanelModel';
 import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
@@ -9,3 +9,3 @@ import { IDockviewPanel } from '../dockview/dockviewPanel';
     model: IDockviewGroupPanelModel;
-    locked: boolean;
+    locked: DockviewGroupPanelLocked;
     readonly size: number;
@@ -22,4 +22,4 @@ readonly panels: IDockviewPanel[];
     get model(): DockviewGroupPanelModel;
-    get locked(): boolean;
-    set locked(value: boolean);
+    get locked(): DockviewGroupPanelLocked;
+    set locked(value: DockviewGroupPanelLocked);
     get header(): IHeader;
@@ -26,0 +26,0 @@ constructor(accessor: DockviewComponent, id: string, options: GroupOptions);

dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -8,2 +8,3 @@ import { PanelTransfer } from '../dnd/dataTransfer';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { DockviewDropTargets } from './types';
@@ -32,3 +33,3 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 interface CoreGroupOptions {
-    locked?: boolean;
+    locked?: DockviewGroupPanelLocked;
     hideHeader?: boolean;
@@ -58,2 +59,3 @@ }
 }
+export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
 export interface IDockviewGroupPanelModel extends IPanel {
@@ -71,3 +73,3 @@ readonly isActive: boolean;
     readonly onMove: Event<GroupMoveEvent>;
-    locked: boolean;
+    locked: DockviewGroupPanelLocked;
     setActive(isActive: boolean): void;
@@ -123,2 +125,6 @@ initialize(): void;
     readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
@@ -132,4 +138,4 @@ readonly onDidAddPanel: Event<GroupviewChangeEvent>;
     get activePanel(): IDockviewPanel | undefined;
-    get locked(): boolean;
-    set locked(value: boolean);
+    get locked(): DockviewGroupPanelLocked;
+    set locked(value: DockviewGroupPanelLocked);
     get isActive(): boolean;
@@ -136,0 +142,0 @@ get panels(): IDockviewPanel[];

dist/esm/dockview/dockviewGroupPanelModel.js

@@ -22,3 +22,3 @@ import { DockviewApi } from '../api/component.api';
         this._locked = value;
-        toggleClass(this.container, 'locked-groupview', value);
+        toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
     }
@@ -80,2 +80,6 @@ get isActive() {
         this.onDidDrop = this._onDidDrop.event;
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onGroupDragStart = new Emitter();
+        this.onGroupDragStart = this._onGroupDragStart.event;
         this._onDidAddPanel = new Emitter();
@@ -93,3 +97,4 @@ this.onDidAddPanel = this._onDidAddPanel.event;
             canDisplayOverlay: (event, position) => {
-                if (this.locked && position === 'center') {
+                if (this.locked === 'no-drop-target' ||
+                    (this.locked && position === 'center')) {
                     return false;
@@ -120,4 +125,8 @@ }
         this.header.hidden = !!options.hideHeader;
-        this.locked = !!options.locked;
-        this.addDisposables(this.tabsContainer.onDrop((event) => {
+        this.locked = options.locked || false;
+        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+            this._onTabDragStart.fire(event);
+        }), this.tabsContainer.onGroupDragStart((event) => {
+            this._onGroupDragStart.fire(event);
+        }), this.tabsContainer.onDrop((event) => {
             this.handleDropEvent(event.event, 'center', event.index);
@@ -177,4 +186,4 @@ }), this.contentContainer.onDidFocus(() => {
         };
-        if (this.locked) {
-            result.locked = true;
+        if (this.locked !== false) {
+            result.locked = this.locked;
         }
@@ -429,2 +438,5 @@ if (this.header.hidden) {
     handleDropEvent(event, position, index) {
+        if (this.locked === 'no-drop-target') {
+            return;
+        }
         const data = getPanelData();
@@ -431,0 +443,0 @@ if (data && data.viewId === this.accessor.id) {

dist/esm/dockview/dockviewPanel.d.ts

@@ -14,3 +14,3 @@ import { DockviewApi } from '../api/component.api';
     readonly title: string | undefined;
-    readonly params: Record<string, any> | undefined;
+    readonly params: Parameters | undefined;
     updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void;
@@ -17,0 +17,0 @@ init(params: IGroupPanelInitParameters): void;

dist/esm/dockview/options.d.ts

@@ -5,2 +5,3 @@ import { DockviewApi } from '../api/component.api';
 import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer, DockviewDropTargets } from './types';
+import { Parameters } from '../panel/types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
@@ -73,9 +74,11 @@ import { ISplitviewStyles, Orientation } from '../splitview/splitview';
     disableFloatingGroups?: boolean;
+    floatingGroupBounds?: 'boundedWithinViewport' | {
+        minimumHeightWithinViewport?: number;
+        minimumWidthWithinViewport?: number;
+    };
 }
-export interface PanelOptions {
+export interface PanelOptions<P extends object = Parameters> {
     component: string;
     tabComponent?: string;
-    params?: {
-        [key: string]: any;
-    };
+    params?: P;
     id: string;
@@ -112,3 +115,3 @@ title?: string;
 type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion;
-export type AddPanelOptions = Omit<PanelOptions, 'component' | 'tabComponent'> & {
+export type AddPanelOptions<P extends object = Parameters> = Omit<PanelOptions<P>, 'component' | 'tabComponent'> & {
     component: string;
@@ -115,0 +118,0 @@ tabComponent?: string;

dist/esm/gridview/basePanelView.d.ts

 import { CompositeDisposable } from '../lifecycle';
-import { IFrameworkPart, PanelUpdateEvent, PanelInitParameters, IPanel } from '../panel/types';
+import { IFrameworkPart, PanelUpdateEvent, PanelInitParameters, IPanel, Parameters } from '../panel/types';
 import { PanelApi, PanelApiImpl } from '../api/panelApi';
@@ -7,3 +7,3 @@ export interface BasePanelViewState {
     readonly component: string;
-    readonly params?: Record<string, any>;
+    readonly params?: Parameters;
 }
@@ -15,3 +15,3 @@ export interface BasePanelViewExported<T extends PanelApi> {
     readonly height: number;
-    readonly params: Record<string, any> | undefined;
+    readonly params: Parameters | undefined;
     focus(): void;
@@ -34,3 +34,3 @@ toJSON(): object;
     get height(): number;
-    get params(): Record<string, any> | undefined;
+    get params(): Parameters | undefined;
     constructor(id: string, component: string, api: T);
@@ -37,0 +37,0 @@ focus(): void;

dist/esm/gridview/gridviewComponent.d.ts

@@ -6,3 +6,3 @@ import { SerializedGridview } from './gridview';
 import { GridviewPanel, GridviewInitParameters, GridPanelViewState, IGridviewPanel } from './gridviewPanel';
-import { BaseComponentOptions } from '../panel/types';
+import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Orientation, Sizing } from '../splitview/splitview';
@@ -15,3 +15,3 @@ import { Event } from '../events';
 }
-export interface AddComponentOptions extends BaseComponentOptions {
+export interface AddComponentOptions<T extends object = Parameters> extends BaseComponentOptions<T> {
     minimumWidth?: number;
@@ -35,3 +35,3 @@ maximumWidth?: number;
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
-    addPanel(options: AddComponentOptions): IGridviewPanel;
+    addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
@@ -78,3 +78,3 @@ focus(): void;
     }): void;
-    addPanel(options: AddComponentOptions): IGridviewPanel;
+    addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
     private registerPanel;
@@ -81,0 +81,0 @@ moveGroup(referenceGroup: IGridPanelComponentView, groupId: string, target: Position): void;

dist/esm/lifecycle.d.ts

@@ -15,3 +15,2 @@ export interface IDisposable {
     protected get isDisposed(): boolean;
-    static from(...args: IDisposable[]): CompositeDisposable;
     constructor(...args: IDisposable[]);
@@ -18,0 +17,0 @@ addDisposables(...args: IDisposable[]): void;

dist/esm/lifecycle.js

@@ -13,5 +13,2 @@ export var Disposable;
     }
-    static from(...args) {
-        return new CompositeDisposable(...args);
-    }
     constructor(...args) {
@@ -18,0 +15,0 @@ this._isDisposed = false;

dist/esm/panel/types.d.ts

@@ -26,6 +26,6 @@ import { IDisposable } from '../lifecycle';
 }
-export interface BaseComponentOptions {
+export interface BaseComponentOptions<T extends object = Parameters> {
     id: string;
     component: string;
-    params?: Parameters;
+    params?: T;
     snap?: boolean;
@@ -32,0 +32,0 @@ priority?: LayoutPriority;

dist/esm/paneview/paneviewComponent.d.ts

@@ -10,2 +10,3 @@ import { Event } from '../events';
 import { Resizable } from '../resizable';
+import { Parameters } from '../panel/types';
 export interface PaneviewDndOverlayEvent {
@@ -53,9 +54,7 @@ nativeEvent: DragEvent;
 }
-export interface AddPaneviewComponentOptions {
+export interface AddPaneviewComponentOptions<T extends object = Parameters> {
     id: string;
     component: string;
     headerComponent?: string;
-    params?: {
-        [key: string]: any;
-    };
+    params?: T;
     minimumBodySize?: number;
@@ -81,3 +80,3 @@ maximumBodySize?: number;
     readonly onDidLayoutFromJSON: Event<void>;
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
     layout(width: number, height: number): void;
@@ -121,3 +120,3 @@ toJSON(): SerializedPaneview;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
     removePanel(panel: PaneviewPanel): void;
@@ -124,0 +123,0 @@ movePanel(from: number, to: number): void;

dist/esm/splitview/splitviewComponent.d.ts

 import { IDisposable } from '../lifecycle';
 import { IView, LayoutPriority, Orientation, Sizing, Splitview } from './splitview';
 import { SplitviewComponentOptions } from './options';
-import { BaseComponentOptions } from '../panel/types';
+import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Event } from '../events';
@@ -29,3 +29,3 @@ import { SplitviewPanel, ISplitviewPanel } from './splitviewPanel';
 }
-export interface AddSplitviewComponentOptions extends BaseComponentOptions {
+export interface AddSplitviewComponentOptions<T extends Parameters = Parameters> extends BaseComponentOptions<T> {
     index?: number;
@@ -48,3 +48,3 @@ minimumSize?: number;
     updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
-    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
+    addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
     layout(width: number, height: number): void;
@@ -96,3 +96,3 @@ onDidLayoutChange: Event<void>;
     getPanel(id: string): SplitviewPanel | undefined;
-    addPanel(options: AddSplitviewComponentOptions): SplitviewPanel;
+    addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): SplitviewPanel;
     layout(width: number, height: number): void;
@@ -99,0 +99,0 @@ private doAddView;

dist/esm/splitview/splitviewPanel.d.ts

@@ -42,3 +42,3 @@ import { ISerializableView, PanelViewInitParameters } from './options';
         component: string;
-        params?: Record<string, any> | undefined;
+        params?: import("..").Parameters | undefined;
     };
@@ -45,0 +45,0 @@ private updateConstraints;

package.json

 {
   "name": "dockview-core",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
@@ -68,3 +68,3 @@ "main": "./dist/cjs/index.js",
   },
-  "gitHead": "bae45867fa363ba583ea89afc3bd8bf7da78ae90"
+  "gitHead": "4ad5b0ffe46d7d7f17a6ed97eb5715c5e603962b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6851352

increased by1.87%

Lines of code

71346

increased by1.31%

No dependency changes