dockview-core - npm Package Compare versions

Comparing version 0.0.0-experimental-91e4e321-20230827 to 0.0.0-experimental-faeb8241-20231002

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

@@ -16,2 +16,3 @@ import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 export interface CommonApi<T = any> {
@@ -127,2 +128,4 @@ readonly height: number;
     get onDidDrop(): Event<DockviewDropEvent>;
+    get onWillDragGroup(): Event<GroupDragEvent>;
+    get onWillDragPanel(): Event<TabDragEvent>;
     get panels(): IDockviewPanel[];
@@ -129,0 +132,0 @@ get groups(): 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: {
@@ -14,0 +16,0 @@ height: number;

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) {
@@ -122,3 +136,5 @@ if (bounds === void 0) { bounds = {}; }
         // a minimum height of minimumViewportHeight must be inside the viewport
-        var yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
+        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));
@@ -276,8 +292,7 @@ var top = (0, math_1.clamp)(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                 var width = undefined;
-                var that = _this;
-                function moveTop() {
+                var moveTop = function () {
                     top = (0, math_1.clamp)(y, -Number.MAX_VALUE, startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? that.getMinimumHeight(containerRect.height)
+                        ? _this.getMinimumHeight(containerRect.height)
                         : Math.max(0, startPosition.originalY +
@@ -290,17 +305,19 @@ startPosition.originalHeight -
                             top;
-                }
-                function moveBottom() {
+                };
+                var moveBottom = function () {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = (0, math_1.clamp)(y - top, top < 0 && that.options.minimumInViewportHeight
+                    height = (0, math_1.clamp)(y - top, top < 0 &&
+                        typeof _this.options
+                            .minimumInViewportHeight === 'number'
                         ? -top +
-                            that.options.minimumInViewportHeight
+                            _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
-                        ? that.getMinimumWidth(containerRect.width)
+                        ? _this.getMinimumWidth(containerRect.width)
                         : Math.max(0, startPosition.originalX +
@@ -313,12 +330,14 @@ startPosition.originalWidth -
                             left;
-                }
-                function moveRight() {
+                };
+                var moveRight = function () {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = (0, math_1.clamp)(x - left, left < 0 && that.options.minimumInViewportWidth
+                    width = (0, math_1.clamp)(x - left, left < 0 &&
+                        typeof _this.options
+                            .minimumInViewportWidth === 'number'
                         ? -left +
-                            that.options.minimumInViewportWidth
+                            _this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                }
+                };
                 switch (direction) {
@@ -325,0 +344,0 @@ case 'top':

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,3 @@ setActivePanel: (panel: IDockviewPanel) => void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
-    hidden: boolean;
+    setPrefixActionsElement(element: HTMLElement | undefined): void;
     show(): void;
@@ -39,2 +50,3 @@ hide(): void;
     private readonly leftActionsContainer;
+    private readonly preActionsContainer;
     private readonly voidContainer;
@@ -45,5 +57,10 @@ private tabs;
     private leftActions;
+    private preActions;
     private _hidden;
     private readonly _onDrop;
     readonly onDrop: Event<TabDropIndexEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     get panels(): string[];
@@ -57,2 +74,3 @@ get size(): number;
     setLeftActionsElement(element: HTMLElement | undefined): void;
+    setPrefixActionsElement(element: HTMLElement | undefined): void;
     get element(): HTMLElement;
@@ -59,0 +77,0 @@ isActive(tab: ITab): boolean;

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');
@@ -89,5 +93,8 @@ _this._element.className = 'tabs-and-actions-container';
         _this.leftActionsContainer.className = 'left-actions-container';
+        _this.preActionsContainer = document.createElement('div');
+        _this.preActionsContainer.className = 'pre-actions-container';
         _this.tabContainer = document.createElement('div');
         _this.tabContainer.className = 'tabs-container';
         _this.voidContainer = new voidContainer_1.VoidContainer(_this.accessor, _this.group);
+        _this._element.appendChild(_this.preActionsContainer);
         _this._element.appendChild(_this.tabContainer);
@@ -97,3 +104,8 @@ _this._element.appendChild(_this.leftActionsContainer);
         _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({
@@ -129,3 +141,3 @@ event: event.nativeEvent,
         get: function () {
-            return this.tabs.map(function (_) { return _.value.panelId; });
+            return this.tabs.map(function (_) { return _.value.panel.id; });
         },
@@ -187,2 +199,15 @@ enumerable: false,
     };
+    TabsContainer.prototype.setPrefixActionsElement = function (element) {
+        if (this.preActions === element) {
+            return;
+        }
+        if (this.preActions) {
+            this.preActions.remove();
+            this.preActions = undefined;
+        }
+        if (element) {
+            this.preActionsContainer.appendChild(element);
+            this.preActions = element;
+        }
+    };
     Object.defineProperty(TabsContainer.prototype, "element", {
@@ -200,3 +225,3 @@ get: function () {
     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; });
     };
@@ -220,3 +245,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];
@@ -230,3 +255,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);
@@ -239,11 +264,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;
@@ -256,4 +283,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;
@@ -275,9 +302,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);
@@ -284,0 +311,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

@@ -14,2 +14,3 @@ import { SerializedGridObject } from '../gridview/gridview';
 import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 export interface PanelReference {
@@ -43,3 +44,3 @@ update: (event: {
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupsAlwaysWithinViewport'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
@@ -77,2 +78,4 @@ api: DockviewApi;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
@@ -89,2 +92,6 @@ x: number;
     private watermark;
+    private readonly _onWillDragPanel;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    private readonly _onWillDragGroup;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     private readonly _onDidDrop;
@@ -156,4 +163,3 @@ readonly onDidDrop: Event<DockviewDropEvent>;
     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,10 +262,8 @@ if (item instanceof dockviewPanel_1.DockviewPanel) {
             top: overlayTop,
-            minimumInViewportWidth: this.options
-                .floatingGroupsAlwaysWithinViewport
+            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : 100,
-            minimumInViewportHeight: this.options
-                .floatingGroupsAlwaysWithinViewport
+                : (_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
-                : 100,
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
@@ -338,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);
@@ -345,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);
@@ -359,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 {
@@ -365,3 +404,3 @@ try {
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_2) throw e_2.error; }
             }
@@ -451,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;
@@ -464,34 +503,58 @@ 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;
-            var group = _this.createGroup({
-                id: id,
-                locked: !!locked,
-                hideHeader: !!hideHeader,
-            });
-            _this._onDidAddGroup.fire(group);
+            if (typeof id !== 'string') {
+                throw new Error('group id must be of type string');
+            }
+            var group;
             try {
-                for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
-                    var child = views_1_1.value;
-                    var panel = _this._deserializer.fromJSON(panels[child], group);
-                    var isActive = typeof activeView === 'string' && activeView === panel.id;
-                    group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
+                group = _this.createGroup({
+                    id: id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                _this._onDidAddGroup.fire(group);
+                try {
+                    for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
+                        var child = views_1_1.value;
+                        var panel = _this._deserializer.fromJSON(panels[child], group);
+                        var isActive = typeof activeView === 'string' &&
+                            activeView === panel.id;
+                        group.model.openPanel(panel, {
+                            skipSetPanelActive: !isActive,
+                            skipSetGroupActive: true,
+                        });
+                    }
+                }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                finally {
+                    try {
+                        if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
+                    }
+                    finally { if (e_5) throw e_5.error; }
+                }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
                         skipSetGroupActive: true,
                     });
                 }
+                return group;
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
-                try {
-                    if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
+            catch (err) {
+                /**
+                 * This is an odd case... we have failed to deserialize a view but we have already created a group,
+                 * but we havn't registered that group with the gridview.
+                 * We cannot use the removeGroup method because the group has only been partially added, we must
+                 * manually dipose() of the view and remove it from being stored in the map.
+                 */
+                if (group) {
+                    group.dispose();
+                    _this._groups.delete(group.id);
                 }
-                finally { if (e_4) throw e_4.error; }
+                /**
+                 * re-throw the error becasue we don't actually want to catch it, we just
+                 * needed to do some clean-up before continuing.
+                 */
+                throw err;
             }
-            if (!group.activePanel && group.panels.length > 0) {
-                group.model.openPanel(group.panels[group.panels.length - 1], {
-                    skipSetGroupActive: true,
-                });
-            }
-            return group;
         };
@@ -518,3 +581,3 @@ this.gridview.deserialize(grid, {
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
         finally {
@@ -524,3 +587,3 @@ try {
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_3) throw e_3.error; }
         }
@@ -533,3 +596,3 @@ try {
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
@@ -539,3 +602,3 @@ try {
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_4) throw e_4.error; }
         }
@@ -551,3 +614,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; });
@@ -563,3 +626,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 {
@@ -569,3 +632,3 @@ try {
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_6) throw e_6.error; }
         }
@@ -581,3 +644,3 @@ if (hasActiveGroup) {
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_6, _a;
+        var e_7, _a;
         try {
@@ -590,3 +653,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 {
@@ -596,3 +659,3 @@ try {
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_7) throw e_7.error; }
         }
@@ -773,3 +836,3 @@ };
     DockviewComponent.prototype.removeGroup = function (group, options) {
-        var e_7, _a;
+        var e_8, _a;
         var _b;
@@ -786,3 +849,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 {
@@ -792,3 +855,3 @@ try {
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_8) throw e_8.error; }
         }
@@ -872,3 +935,3 @@ this.doRemoveGroup(group, options);
     DockviewComponent.prototype.moveGroup = function (sourceGroup, referenceGroup, target) {
-        var e_8, _a;
+        var e_9, _a;
         if (sourceGroup) {
@@ -891,3 +954,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 {
@@ -897,3 +960,3 @@ try {
                     }
-                    finally { if (e_8) throw e_8.error; }
+                    finally { if (e_9) throw e_9.error; }
                 }
@@ -942,3 +1005,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;
@@ -985,9 +1052,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;
@@ -994,0 +1054,0 @@ }(baseComponentGridview_1.BaseGrid));

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';
@@ -111,2 +112,3 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
     private _leftHeaderActions;
+    private _prefixHeaderActions;
     private mostRecentlyUsed;
@@ -122,2 +124,6 @@ private readonly _onDidChange;
     readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
@@ -124,0 +130,0 @@ readonly onDidAddPanel: Event<GroupviewChangeEvent>;

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();
@@ -127,3 +131,7 @@ _this.onDidAddPanel = _this._onDidAddPanel.event;
         _this.locked = options.locked || false;
-        _this.addDisposables(_this.tabsContainer.onDrop(function (event) {
+        _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);
@@ -266,2 +274,12 @@ }), _this.contentContainer.onDidFocus(function () {
         }
+        if (this.accessor.options.createPrefixHeaderActionsElement) {
+            this._prefixHeaderActions =
+                this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._prefixHeaderActions);
+            this._prefixHeaderActions.init({
+                containerApi: new component_api_1.DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
+        }
     };
@@ -268,0 +286,0 @@ DockviewGroupPanelModel.prototype.indexOf = function (panel) {

dist/cjs/dockview/options.d.ts

@@ -70,6 +70,10 @@ import { DockviewApi } from '../api/component.api';
     createLeftHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
+    createPrefixHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
     singleTabMode?: 'fullwidth' | 'default';
     parentElement?: HTMLElement;
     disableFloatingGroups?: boolean;
-    floatingGroupsAlwaysWithinViewport?: boolean;
+    floatingGroupBounds?: 'boundedWithinViewport' | {
+        minimumHeightWithinViewport?: number;
+        minimumWidthWithinViewport?: number;
+    };
 }
@@ -76,0 +80,0 @@ export interface PanelOptions<P extends object = Parameters> {

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/resizable.js

@@ -42,2 +42,10 @@ "use strict";
             }
+            if (!document.body.contains(_this._element)) {
+                /**
+                 * since the event is dispatched through requestAnimationFrame there is a small chance
+                 * the component is no longer attached to the DOM, if that is the case the dimensions
+                 * are mostly likely all zero and meaningless. we should skip this case.
+                 */
+                return;
+            }
             var _a = entry.contentRect, width = _a.width, height = _a.height;
@@ -44,0 +52,0 @@ _this.layout(width, height);

dist/cjs/splitview/splitview.js

@@ -386,2 +386,3 @@ "use strict";
     Splitview.prototype.onDidChange = function (item, size) {
+        var _this = this;
         var index = this.viewItems.indexOf(item);
@@ -394,3 +395,12 @@ if (index < 0 || index >= this.viewItems.length) {
         item.size = size;
-        this.relayout([index]);
+        var indexes = (0, math_1.range)(this.viewItems.length).filter(function (i) { return i !== index; });
+        var lowPriorityIndexes = __spreadArray(__spreadArray([], __read(indexes.filter(function (i) { return _this.viewItems[i].priority === LayoutPriority.Low; })), false), [
+            index,
+        ], false);
+        var highPriorityIndexes = indexes.filter(function (i) { return _this.viewItems[i].priority === LayoutPriority.High; });
+        /**
+         * add this view we are changing to the low-index list since we have determined the size
+         * here and don't want it changed
+         */
+        this.relayout(__spreadArray(__spreadArray([], __read(lowPriorityIndexes), false), [index], false), highPriorityIndexes);
     };
@@ -397,0 +407,0 @@ Splitview.prototype.addView = function (view, size, index, skipLayout) {

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

@@ -16,2 +16,3 @@ import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 export interface CommonApi<T = any> {
@@ -127,2 +128,4 @@ readonly height: number;
     get onDidDrop(): Event<DockviewDropEvent>;
+    get onWillDragGroup(): Event<GroupDragEvent>;
+    get onWillDragPanel(): Event<TabDragEvent>;
     get panels(): IDockviewPanel[];
@@ -129,0 +132,0 @@ get groups(): 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: {
@@ -14,0 +16,0 @@ height: number;

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) {
@@ -65,3 +71,5 @@ super();
         // a minimum height of minimumViewportHeight must be inside the viewport
-        const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
+        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));
@@ -189,8 +197,7 @@ const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                 let width = undefined;
-                const that = this;
-                function moveTop() {
+                const moveTop = () => {
                     top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? that.getMinimumHeight(containerRect.height)
+                        ? this.getMinimumHeight(containerRect.height)
                         : Math.max(0, startPosition.originalY +
@@ -203,17 +210,19 @@ startPosition.originalHeight -
                             top;
-                }
-                function moveBottom() {
+                };
+                const moveBottom = () => {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = clamp(y - top, top < 0 && that.options.minimumInViewportHeight
+                    height = clamp(y - top, top < 0 &&
+                        typeof this.options
+                            .minimumInViewportHeight === 'number'
                         ? -top +
-                            that.options.minimumInViewportHeight
+                            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
-                        ? that.getMinimumWidth(containerRect.width)
+                        ? this.getMinimumWidth(containerRect.width)
                         : Math.max(0, startPosition.originalX +
@@ -226,12 +235,14 @@ startPosition.originalWidth -
                             left;
-                }
-                function moveRight() {
+                };
+                const moveRight = () => {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = clamp(x - left, left < 0 && that.options.minimumInViewportWidth
+                    width = clamp(x - left, left < 0 &&
+                        typeof this.options
+                            .minimumInViewportWidth === 'number'
                         ? -left +
-                            that.options.minimumInViewportWidth
+                            this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                }
+                };
                 switch (direction) {
@@ -238,0 +249,0 @@ case 'top':

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,3 @@ setActivePanel: (panel: IDockviewPanel) => void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
-    hidden: boolean;
+    setPrefixActionsElement(element: HTMLElement | undefined): void;
     show(): void;
@@ -39,2 +50,3 @@ hide(): void;
     private readonly leftActionsContainer;
+    private readonly preActionsContainer;
     private readonly voidContainer;
@@ -45,5 +57,10 @@ private tabs;
     private leftActions;
+    private preActions;
     private _hidden;
     private readonly _onDrop;
     readonly onDrop: Event<TabDropIndexEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     get panels(): string[];
@@ -57,2 +74,3 @@ get size(): number;
     setLeftActionsElement(element: HTMLElement | undefined): void;
+    setPrefixActionsElement(element: HTMLElement | undefined): void;
     get element(): HTMLElement;
@@ -59,0 +77,0 @@ isActive(tab: ITab): boolean;

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);
     }
@@ -55,2 +55,15 @@ get size() {
     }
+    setPrefixActionsElement(element) {
+        if (this.preActions === element) {
+            return;
+        }
+        if (this.preActions) {
+            this.preActions.remove();
+            this.preActions = undefined;
+        }
+        if (element) {
+            this.preActionsContainer.appendChild(element);
+            this.preActions = element;
+        }
+    }
     get element() {
@@ -64,3 +77,3 @@ return this._element;
     indexOf(id) {
-        return this.tabs.findIndex((tab) => tab.value.panelId === id);
+        return this.tabs.findIndex((tab) => tab.value.panel.id === id);
     }
@@ -76,3 +89,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');
@@ -94,5 +111,8 @@ this._element.className = 'tabs-and-actions-container';
         this.leftActionsContainer.className = 'left-actions-container';
+        this.preActionsContainer = document.createElement('div');
+        this.preActionsContainer.className = 'pre-actions-container';
         this.tabContainer = document.createElement('div');
         this.tabContainer.className = 'tabs-container';
         this.voidContainer = new VoidContainer(this.accessor, this.group);
+        this._element.appendChild(this.preActionsContainer);
         this._element.appendChild(this.tabContainer);
@@ -102,3 +122,8 @@ this._element.appendChild(this.leftActionsContainer);
         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({
@@ -149,3 +174,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];
@@ -159,3 +184,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);
@@ -166,11 +191,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;
@@ -183,4 +210,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();
@@ -202,9 +229,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);
@@ -211,0 +238,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

@@ -14,2 +14,3 @@ import { SerializedGridObject } from '../gridview/gridview';
 import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 export interface PanelReference {
@@ -43,3 +44,3 @@ update: (event: {
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupsAlwaysWithinViewport'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
@@ -77,2 +78,4 @@ api: DockviewApi;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
@@ -89,2 +92,6 @@ x: number;
     private watermark;
+    private readonly _onWillDragPanel;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    private readonly _onWillDragGroup;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     private readonly _onDidDrop;
@@ -156,4 +163,3 @@ readonly onDidDrop: Event<DockviewDropEvent>;
     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,10 +174,8 @@ if (item instanceof DockviewPanel) {
             top: overlayTop,
-            minimumInViewportWidth: this.options
-                .floatingGroupsAlwaysWithinViewport
+            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : 100,
-            minimumInViewportHeight: this.options
-                .floatingGroupsAlwaysWithinViewport
+                : (_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
-                : 100,
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
@@ -250,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);
@@ -257,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);
@@ -359,22 +387,46 @@ }
             const { id, locked, hideHeader, views, activeView } = data;
-            const group = this.createGroup({
-                id,
-                locked: !!locked,
-                hideHeader: !!hideHeader,
-            });
-            this._onDidAddGroup.fire(group);
-            for (const child of views) {
-                const panel = this._deserializer.fromJSON(panels[child], group);
-                const isActive = typeof activeView === 'string' && activeView === panel.id;
-                group.model.openPanel(panel, {
-                    skipSetPanelActive: !isActive,
-                    skipSetGroupActive: true,
-                });
+            if (typeof id !== 'string') {
+                throw new Error('group id must be of type string');
             }
-            if (!group.activePanel && group.panels.length > 0) {
-                group.model.openPanel(group.panels[group.panels.length - 1], {
-                    skipSetGroupActive: true,
+            let group;
+            try {
+                group = this.createGroup({
+                    id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
                 });
+                this._onDidAddGroup.fire(group);
+                for (const child of views) {
+                    const panel = this._deserializer.fromJSON(panels[child], group);
+                    const isActive = typeof activeView === 'string' &&
+                        activeView === panel.id;
+                    group.model.openPanel(panel, {
+                        skipSetPanelActive: !isActive,
+                        skipSetGroupActive: true,
+                    });
+                }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
+                        skipSetGroupActive: true,
+                    });
+                }
+                return group;
             }
-            return group;
+            catch (err) {
+                /**
+                 * This is an odd case... we have failed to deserialize a view but we have already created a group,
+                 * but we havn't registered that group with the gridview.
+                 * We cannot use the removeGroup method because the group has only been partially added, we must
+                 * manually dipose() of the view and remove it from being stored in the map.
+                 */
+                if (group) {
+                    group.dispose();
+                    this._groups.delete(group.id);
+                }
+                /**
+                 * re-throw the error becasue we don't actually want to catch it, we just
+                 * needed to do some clean-up before continuing.
+                 */
+                throw err;
+            }
         };
@@ -741,3 +793,7 @@ this.gridview.deserialize(grid, {
         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;
@@ -781,10 +837,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/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';
@@ -111,2 +112,3 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
     private _leftHeaderActions;
+    private _prefixHeaderActions;
     private mostRecentlyUsed;
@@ -122,2 +124,6 @@ private readonly _onDidChange;
     readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
@@ -124,0 +130,0 @@ readonly onDidAddPanel: Event<GroupviewChangeEvent>;

dist/esm/dockview/dockviewGroupPanelModel.js

@@ -79,2 +79,6 @@ import { DockviewApi } from '../api/component.api';
         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();
@@ -120,3 +124,7 @@ this.onDidAddPanel = this._onDidAddPanel.event;
         this.locked = options.locked || false;
-        this.addDisposables(this.tabsContainer.onDrop((event) => {
+        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);
@@ -165,2 +173,12 @@ }), this.contentContainer.onDidFocus(() => {
         }
+        if (this.accessor.options.createPrefixHeaderActionsElement) {
+            this._prefixHeaderActions =
+                this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._prefixHeaderActions);
+            this._prefixHeaderActions.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
+        }
     }
@@ -167,0 +185,0 @@ indexOf(panel) {

dist/esm/dockview/options.d.ts

@@ -70,6 +70,10 @@ import { DockviewApi } from '../api/component.api';
     createLeftHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
+    createPrefixHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
     singleTabMode?: 'fullwidth' | 'default';
     parentElement?: HTMLElement;
     disableFloatingGroups?: boolean;
-    floatingGroupsAlwaysWithinViewport?: boolean;
+    floatingGroupBounds?: 'boundedWithinViewport' | {
+        minimumHeightWithinViewport?: number;
+        minimumWidthWithinViewport?: number;
+    };
 }
@@ -76,0 +80,0 @@ export interface PanelOptions<P extends object = Parameters> {

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/resizable.js

@@ -26,2 +26,10 @@ import { watchElementResize } from './dom';
             }
+            if (!document.body.contains(this._element)) {
+                /**
+                 * since the event is dispatched through requestAnimationFrame there is a small chance
+                 * the component is no longer attached to the DOM, if that is the case the dimensions
+                 * are mostly likely all zero and meaningless. we should skip this case.
+                 */
+                return;
+            }
             const { width, height } = entry.contentRect;
@@ -28,0 +36,0 @@ this.layout(width, height);

dist/esm/splitview/splitview.js

@@ -293,3 +293,13 @@ /*---------------------------------------------------------------------------------------------
         item.size = size;
-        this.relayout([index]);
+        const indexes = range(this.viewItems.length).filter((i) => i !== index);
+        const lowPriorityIndexes = [
+            ...indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.Low),
+            index,
+        ];
+        const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.High);
+        /**
+         * add this view we are changing to the low-index list since we have determined the size
+         * here and don't want it changed
+         */
+        this.relayout([...lowPriorityIndexes, index], highPriorityIndexes);
     }
@@ -296,0 +306,0 @@ addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {

package.json

 {
     "name": "dockview-core",
-    "version": "0.0.0-experimental-91e4e321-20230827",
+    "version": "0.0.0-experimental-faeb8241-20231002",
     "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
@@ -5,0 +5,0 @@ "main": "./dist/cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

6917100

increased by2.61%

Lines of code

71861

increased by1.85%

No dependency changes