dockview-core - npm Package Compare versions

Comparing version 0.0.0-experimental-3fb2800d-20230730 to 0.0.0-experimental-806ff2a9-20230927

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/api/dockviewGroupPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Position } from '../dnd/droptarget';

dist/cjs/api/dockviewGroupPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/dockviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/dockviewPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/gridviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/gridviewPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/panelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/panelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/paneviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/paneviewPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/splitviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/splitviewPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/array.d.ts

@@ -0,0 +0,0 @@ export declare function tail<T>(arr: T[]): [T[], T];

dist/cjs/array.js

@@ -0,0 +0,0 @@ "use strict";

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/dataTransfer.d.ts

@@ -0,0 +0,0 @@ declare class TransferObject {

dist/cjs/dnd/dataTransfer.js

@@ -51,3 +51,3 @@ "use strict";
  */
-var LocalSelectionTransfer = exports.LocalSelectionTransfer = /** @class */ (function () {
+var LocalSelectionTransfer = /** @class */ (function () {
     function LocalSelectionTransfer() {
@@ -83,2 +83,3 @@ // protect against external instantiation
 }());
+exports.LocalSelectionTransfer = LocalSelectionTransfer;
 function getPanelData() {
@@ -85,0 +86,0 @@ var panelTransfer = LocalSelectionTransfer.getInstance();

dist/cjs/dnd/dnd.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/cjs/dnd/dnd.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dnd/droptarget.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/cjs/dnd/droptarget.js

@@ -61,3 +61,3 @@ "use strict";
 exports.positionToDirection = positionToDirection;
-var Droptarget = exports.Droptarget = /** @class */ (function (_super) {
+var Droptarget = /** @class */ (function (_super) {
     __extends(Droptarget, _super);
@@ -265,2 +265,3 @@ function Droptarget(element, options) {
 }(lifecycle_1.CompositeDisposable));
+exports.Droptarget = Droptarget;
 function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
@@ -267,0 +268,0 @@ var xp = (100 * x) / width;

dist/cjs/dnd/ghost.d.ts

 export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;
 //# sourceMappingURL=ghost.d.ts.map

dist/cjs/dnd/ghost.js

@@ -0,0 +0,0 @@ "use strict";

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

@@ -70,3 +70,3 @@ "use strict";
 })();
-var Overlay = exports.Overlay = /** @class */ (function (_super) {
+var Overlay = /** @class */ (function (_super) {
     __extends(Overlay, _super);
@@ -102,2 +102,16 @@ function Overlay(options) {
     }
+    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) {
@@ -121,5 +135,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));
@@ -191,5 +207,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));
@@ -277,10 +294,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 +
@@ -293,17 +307,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 +
@@ -316,11 +332,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) {
@@ -380,2 +399,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 () {
@@ -389,2 +420,3 @@ this._element.remove();
 }(lifecycle_1.CompositeDisposable));
+exports.Overlay = Overlay;
 //# sourceMappingURL=overlay.js.map

dist/cjs/dockview/components/panel/content.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable, IDisposable } from '../../../lifecycle';

dist/cjs/dockview/components/panel/content.js

@@ -0,0 +0,0 @@ "use strict";

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

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../../../lifecycle';

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

@@ -0,0 +0,0 @@ "use strict";

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;
+    setPreActionsElement(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;
+    setPreActionsElement(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.setPreActionsElement = 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/components/watermark/watermark.d.ts

@@ -0,0 +0,0 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';

dist/cjs/dockview/components/watermark/watermark.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/deserializer.d.ts

@@ -0,0 +0,0 @@ import { GroupviewPanelState } from './types';

dist/cjs/dockview/deserializer.js

@@ -0,0 +0,0 @@ "use strict";

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'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | '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,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/dockviewFloatingGroupPanel.d.ts

@@ -0,0 +0,0 @@ import { Overlay } from '../dnd/overlay';

dist/cjs/dockview/dockviewFloatingGroupPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/dockviewGroupPanel.d.ts

@@ -0,0 +0,0 @@ import { IFrameworkPart } from '../panel/types';

dist/cjs/dockview/dockviewGroupPanel.js

@@ -0,0 +0,0 @@ "use strict";

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 _preHeaderActions;
     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.createPreHeaderActionsElement) {
+            this._preHeaderActions =
+                this.accessor.options.createPreHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._preHeaderActions);
+            this._preHeaderActions.init({
+                containerApi: new component_api_1.DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setPreActionsElement(this._preHeaderActions.element);
+        }
     };
@@ -268,0 +286,0 @@ DockviewGroupPanelModel.prototype.indexOf = function (panel) {

dist/cjs/dockview/dockviewPanel.d.ts

@@ -0,0 +0,0 @@ import { DockviewApi } from '../api/component.api';

dist/cjs/dockview/dockviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/dockviewPanelModel.d.ts

@@ -0,0 +0,0 @@ import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from './types';

dist/cjs/dockview/dockviewPanelModel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/options.d.ts

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

dist/cjs/dockview/options.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/types.d.ts

@@ -0,0 +0,0 @@ import { IDockviewComponent } from './dockviewComponent';

dist/cjs/dockview/types.js

@@ -10,3 +10,3 @@ "use strict";
     DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
-})(DockviewDropTargets || (exports.DockviewDropTargets = DockviewDropTargets = {}));
+})(DockviewDropTargets = exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
 //# sourceMappingURL=types.js.map

dist/cjs/dom.d.ts

@@ -0,0 +0,0 @@ import { Event as DockviewEvent } from './events';

dist/cjs/dom.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/events.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from './lifecycle';

dist/cjs/events.js

@@ -33,3 +33,3 @@ "use strict";
     };
-})(Event || (exports.Event = Event = {}));
+})(Event = exports.Event || (exports.Event = {}));
 var LeakageMonitor = /** @class */ (function () {
@@ -78,3 +78,3 @@ function LeakageMonitor() {
 // relatively simple event emitter taken from https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
-var Emitter = exports.Emitter = /** @class */ (function () {
+var Emitter = /** @class */ (function () {
     function Emitter(options) {
@@ -179,2 +179,3 @@ this.options = options;
 }());
+exports.Emitter = Emitter;
 function addDisposableWindowListener(element, type, listener, options) {
@@ -181,0 +182,0 @@ element.addEventListener(type, listener, options);

dist/cjs/gridview/baseComponentGridview.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event, TickDelayedEvent } from '../events';

dist/cjs/gridview/baseComponentGridview.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/basePanelView.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/cjs/gridview/basePanelView.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/branchNode.d.ts

@@ -0,0 +0,0 @@ import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview';

dist/cjs/gridview/branchNode.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/gridview.d.ts

@@ -0,0 +0,0 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';

dist/cjs/gridview/gridview.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/gridviewComponent.d.ts

@@ -0,0 +0,0 @@ import { SerializedGridview } from './gridview';

dist/cjs/gridview/gridviewComponent.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/gridviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PanelInitParameters } from '../panel/types';

dist/cjs/gridview/gridviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/leafNode.d.ts

@@ -0,0 +0,0 @@ import { IView, LayoutPriority, Orientation } from '../splitview/splitview';

dist/cjs/gridview/leafNode.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/options.d.ts

@@ -0,0 +0,0 @@ import { GridviewPanel } from './gridviewPanel';

dist/cjs/gridview/options.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=options.js.map

dist/cjs/gridview/types.d.ts

@@ -0,0 +0,0 @@ import { BranchNode } from './branchNode';

dist/cjs/gridview/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

dist/cjs/index.d.ts

@@ -0,0 +0,0 @@ export * from './dnd/dataTransfer';

dist/cjs/index.js

@@ -0,0 +0,0 @@ "use strict";

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 });
@@ -36,3 +11,3 @@ exports.MutableDisposable = exports.CompositeDisposable = exports.Disposable = void 0;
     };
-})(Disposable || (exports.Disposable = Disposable = {}));
+})(Disposable = exports.Disposable || (exports.Disposable = {}));
 var CompositeDisposable = /** @class */ (function () {
@@ -54,9 +29,2 @@ function CompositeDisposable() {
     });
-    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 () {
@@ -63,0 +31,0 @@ var _this = this;

dist/cjs/math.d.ts

@@ -0,0 +0,0 @@ export declare const clamp: (value: number, min: number, max: number) => number;

dist/cjs/math.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/panel/componentFactory.d.ts

@@ -0,0 +0,0 @@ export interface FrameworkFactory<T> {

dist/cjs/panel/componentFactory.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/panel/types.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/cjs/panel/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

dist/cjs/paneview/defaultPaneviewHeader.d.ts

@@ -0,0 +0,0 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';

dist/cjs/paneview/defaultPaneviewHeader.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/paneview/draggablePaneviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/cjs/paneview/draggablePaneviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/paneview/options.d.ts

@@ -0,0 +0,0 @@ import { FrameworkFactory } from '../panel/componentFactory';

dist/cjs/paneview/options.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=options.js.map

dist/cjs/paneview/paneview.d.ts

@@ -0,0 +0,0 @@ import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/splitview';

dist/cjs/paneview/paneview.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/paneview/paneviewComponent.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/cjs/paneview/paneviewComponent.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/paneview/paneviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/cjs/paneview/paneviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/resizable.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from './lifecycle';

dist/cjs/resizable.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/splitview/options.d.ts

@@ -0,0 +0,0 @@ import { IPanel, PanelInitParameters } from '../panel/types';

dist/cjs/splitview/options.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=options.js.map

dist/cjs/splitview/splitview.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/cjs/splitview/splitview.js

@@ -53,3 +53,3 @@ "use strict";
     Orientation["VERTICAL"] = "VERTICAL";
-})(Orientation || (exports.Orientation = Orientation = {}));
+})(Orientation = exports.Orientation || (exports.Orientation = {}));
 var SashState;
@@ -61,3 +61,3 @@ (function (SashState) {
     SashState[SashState["ENABLED"] = 3] = "ENABLED";
-})(SashState || (exports.SashState = SashState = {}));
+})(SashState = exports.SashState || (exports.SashState = {}));
 var LayoutPriority;
@@ -68,3 +68,3 @@ (function (LayoutPriority) {
     LayoutPriority["Normal"] = "normal";
-})(LayoutPriority || (exports.LayoutPriority = LayoutPriority = {}));
+})(LayoutPriority = exports.LayoutPriority || (exports.LayoutPriority = {}));
 var Sizing;
@@ -81,3 +81,3 @@ (function (Sizing) {
     Sizing.Invisible = Invisible;
-})(Sizing || (exports.Sizing = Sizing = {}));
+})(Sizing = exports.Sizing || (exports.Sizing = {}));
 var Splitview = /** @class */ (function () {
@@ -84,0 +84,0 @@ function Splitview(container, options) {

dist/cjs/splitview/splitviewComponent.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/cjs/splitview/splitviewComponent.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/splitview/splitviewPanel.d.ts

@@ -0,0 +0,0 @@ import { ISerializableView, PanelViewInitParameters } from './options';

dist/cjs/splitview/splitviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/splitview/viewItem.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/cjs/splitview/viewItem.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/svg.d.ts

@@ -0,0 +0,0 @@ export declare const createCloseButton: () => SVGSVGElement;

dist/cjs/svg.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/types.d.ts

 export type FunctionOrValue<T> = (() => T) | T;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 //# sourceMappingURL=types.d.ts.map

dist/cjs/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

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/api/dockviewGroupPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Position } from '../dnd/droptarget';

dist/esm/api/dockviewGroupPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/dockviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/dockviewPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/gridviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/gridviewPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/panelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/panelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/paneviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/paneviewPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/splitviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/splitviewPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/array.d.ts

@@ -0,0 +0,0 @@ export declare function tail<T>(arr: T[]): [T[], T];

dist/esm/array.js

@@ -0,0 +0,0 @@ export function tail(arr) {

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/dataTransfer.d.ts

@@ -0,0 +0,0 @@ declare class TransferObject {

dist/esm/dnd/dataTransfer.js

@@ -0,0 +0,0 @@ class TransferObject {

dist/esm/dnd/dnd.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/esm/dnd/dnd.js

@@ -0,0 +0,0 @@ import { addDisposableListener } from '../events';

dist/esm/dnd/droptarget.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/esm/dnd/droptarget.js

@@ -0,0 +0,0 @@ import { toggleClass } from '../dom';

dist/esm/dnd/ghost.d.ts

 export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;
 //# sourceMappingURL=ghost.d.ts.map

dist/esm/dnd/ghost.js

@@ -0,0 +0,0 @@ import { addClasses, removeClasses } from '../dom';

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/panel/content.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable, IDisposable } from '../../../lifecycle';

dist/esm/dockview/components/panel/content.js

@@ -0,0 +0,0 @@ import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';

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

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../../../lifecycle';

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

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../../../lifecycle';

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;
+    setPreActionsElement(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;
+    setPreActionsElement(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() {
     }
+    setPreActionsElement(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/components/watermark/watermark.d.ts

@@ -0,0 +0,0 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';

dist/esm/dockview/components/watermark/watermark.js

@@ -0,0 +0,0 @@ import { addDisposableListener } from '../../../events';

dist/esm/dockview/deserializer.d.ts

@@ -0,0 +0,0 @@ import { GroupviewPanelState } from './types';

dist/esm/dockview/deserializer.js

@@ -0,0 +0,0 @@ import { DockviewPanel } from './dockviewPanel';

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'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | '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,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/dockviewFloatingGroupPanel.d.ts

@@ -0,0 +0,0 @@ import { Overlay } from '../dnd/overlay';

dist/esm/dockview/dockviewFloatingGroupPanel.js

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/esm/dockview/dockviewGroupPanel.d.ts

@@ -0,0 +0,0 @@ import { IFrameworkPart } from '../panel/types';

dist/esm/dockview/dockviewGroupPanel.js

@@ -0,0 +0,0 @@ import { DockviewGroupPanelModel, } from './dockviewGroupPanelModel';

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 _preHeaderActions;
     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.createPreHeaderActionsElement) {
+            this._preHeaderActions =
+                this.accessor.options.createPreHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._preHeaderActions);
+            this._preHeaderActions.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setPreActionsElement(this._preHeaderActions.element);
+        }
     }
@@ -167,0 +185,0 @@ indexOf(panel) {

dist/esm/dockview/dockviewPanel.d.ts

@@ -0,0 +0,0 @@ import { DockviewApi } from '../api/component.api';

dist/esm/dockview/dockviewPanel.js

@@ -0,0 +0,0 @@ import { DockviewPanelApiImpl, } from '../api/dockviewPanelApi';

dist/esm/dockview/dockviewPanelModel.d.ts

@@ -0,0 +0,0 @@ import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from './types';

dist/esm/dockview/dockviewPanelModel.js

@@ -0,0 +0,0 @@ import { DefaultTab } from './components/tab/defaultTab';

dist/esm/dockview/options.d.ts

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

dist/esm/dockview/options.js

@@ -0,0 +0,0 @@ export function isPanelOptionsWithPanel(data) {

dist/esm/dockview/types.d.ts

@@ -0,0 +0,0 @@ import { IDockviewComponent } from './dockviewComponent';

dist/esm/dockview/types.js

@@ -0,0 +0,0 @@ export var DockviewDropTargets;

dist/esm/dom.d.ts

@@ -0,0 +0,0 @@ import { Event as DockviewEvent } from './events';

dist/esm/dom.js

@@ -0,0 +0,0 @@ import { Emitter, addDisposableListener, addDisposableWindowListener, } from './events';

dist/esm/events.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from './lifecycle';

dist/esm/events.js

@@ -0,0 +0,0 @@ export var Event;

dist/esm/gridview/baseComponentGridview.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event, TickDelayedEvent } from '../events';

dist/esm/gridview/baseComponentGridview.js

@@ -0,0 +0,0 @@ import { Emitter, Event, TickDelayedEvent } from '../events';

dist/esm/gridview/basePanelView.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/esm/gridview/basePanelView.js

@@ -0,0 +0,0 @@ import { trackFocus } from '../dom';

dist/esm/gridview/branchNode.d.ts

@@ -0,0 +0,0 @@ import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview';

dist/esm/gridview/branchNode.js

@@ -0,0 +0,0 @@ /*---------------------------------------------------------------------------------------------

dist/esm/gridview/gridview.d.ts

@@ -0,0 +0,0 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';

dist/esm/gridview/gridview.js

@@ -0,0 +0,0 @@ /*---------------------------------------------------------------------------------------------

dist/esm/gridview/gridviewComponent.d.ts

@@ -0,0 +0,0 @@ import { SerializedGridview } from './gridview';

dist/esm/gridview/gridviewComponent.js

@@ -0,0 +0,0 @@ import { getRelativeLocation, getGridLocation, } from './gridview';

dist/esm/gridview/gridviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PanelInitParameters } from '../panel/types';

dist/esm/gridview/gridviewPanel.js

@@ -0,0 +0,0 @@ import { BasePanelView, } from './basePanelView';

dist/esm/gridview/leafNode.d.ts

@@ -0,0 +0,0 @@ import { IView, LayoutPriority, Orientation } from '../splitview/splitview';

dist/esm/gridview/leafNode.js

@@ -0,0 +0,0 @@ /*---------------------------------------------------------------------------------------------

dist/esm/gridview/options.d.ts

@@ -0,0 +0,0 @@ import { GridviewPanel } from './gridviewPanel';

dist/esm/gridview/options.js

 export {};
 //# sourceMappingURL=options.js.map

dist/esm/gridview/types.d.ts

@@ -0,0 +0,0 @@ import { BranchNode } from './branchNode';

dist/esm/gridview/types.js

 export {};
 //# sourceMappingURL=types.js.map

dist/esm/index.d.ts

@@ -0,0 +0,0 @@ export * from './dnd/dataTransfer';

dist/esm/index.js

@@ -0,0 +0,0 @@ export * from './dnd/dataTransfer';

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/math.d.ts

@@ -0,0 +0,0 @@ export declare const clamp: (value: number, min: number, max: number) => number;

dist/esm/math.js

@@ -0,0 +0,0 @@ export const clamp = (value, min, max) => {

dist/esm/panel/componentFactory.d.ts

@@ -0,0 +0,0 @@ export interface FrameworkFactory<T> {

dist/esm/panel/componentFactory.js

@@ -0,0 +0,0 @@ export function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {

dist/esm/panel/types.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/esm/panel/types.js

 export {};
 //# sourceMappingURL=types.js.map

dist/esm/paneview/defaultPaneviewHeader.d.ts

@@ -0,0 +0,0 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';

dist/esm/paneview/defaultPaneviewHeader.js

@@ -0,0 +0,0 @@ import { addDisposableListener } from '../events';

dist/esm/paneview/draggablePaneviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/esm/paneview/draggablePaneviewPanel.js

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/esm/paneview/options.d.ts

@@ -0,0 +0,0 @@ import { FrameworkFactory } from '../panel/componentFactory';

dist/esm/paneview/options.js

 export {};
 //# sourceMappingURL=options.js.map

dist/esm/paneview/paneview.d.ts

@@ -0,0 +0,0 @@ import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/splitview';

dist/esm/paneview/paneview.js

@@ -0,0 +0,0 @@ import { Splitview, Orientation, } from '../splitview/splitview';

dist/esm/paneview/paneviewComponent.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/esm/paneview/paneviewComponent.js

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/esm/paneview/paneviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/esm/paneview/paneviewPanel.js

@@ -0,0 +0,0 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';

dist/esm/resizable.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from './lifecycle';

dist/esm/resizable.js

@@ -0,0 +0,0 @@ import { watchElementResize } from './dom';

dist/esm/splitview/options.d.ts

@@ -0,0 +0,0 @@ import { IPanel, PanelInitParameters } from '../panel/types';

dist/esm/splitview/options.js

 export {};
 //# sourceMappingURL=options.js.map

dist/esm/splitview/splitview.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/esm/splitview/splitview.js

@@ -0,0 +0,0 @@ /*---------------------------------------------------------------------------------------------

dist/esm/splitview/splitviewComponent.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/esm/splitview/splitviewComponent.js

@@ -0,0 +0,0 @@ import { CompositeDisposable, MutableDisposable, } from '../lifecycle';

dist/esm/splitview/splitviewPanel.d.ts

@@ -0,0 +0,0 @@ import { ISerializableView, PanelViewInitParameters } from './options';

dist/esm/splitview/splitviewPanel.js

@@ -0,0 +0,0 @@ import { BasePanelView, } from '../gridview/basePanelView';

dist/esm/splitview/viewItem.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/esm/splitview/viewItem.js

@@ -0,0 +0,0 @@ import { clamp } from '../math';

dist/esm/svg.d.ts

@@ -0,0 +0,0 @@ export declare const createCloseButton: () => SVGSVGElement;

dist/esm/svg.js

@@ -0,0 +0,0 @@ const createSvgElementFromPath = (params) => {

dist/esm/types.d.ts

 export type FunctionOrValue<T> = (() => T) | T;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 //# sourceMappingURL=types.d.ts.map

dist/esm/types.js

 export {};
 //# sourceMappingURL=types.js.map

package.json

 {
     "name": "dockview-core",
-    "version": "0.0.0-experimental-3fb2800d-20230730",
+    "version": "0.0.0-experimental-806ff2a9-20230927",
     "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
@@ -5,0 +5,0 @@ "main": "./dist/cjs/index.js",

README.md

@@ -0,0 +0,0 @@ <div align="center">

No alert changes

Improved metrics

Total package byte prevSize

6870331

increased by2.89%

Lines of code

71517

increased by1.59%

No dependency changes