dockview-core 1.8.1 → 1.8.3

package/dist/dockview-core.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.8.1
+ * @version 1.8.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -240,9 +240,6 @@ define(['exports'], (function (exports) { 'use strict';
         get isDisposed() {
             return this._isDisposed;
         }
-        static from(...args) {
-            return new CompositeDisposable(...args);
-        }
         constructor(...args) {
             this._isDisposed = false;
             this._disposables = args;
@@ -2446,6 +2443,12 @@ define(['exports'], (function (exports) { 'use strict';
         get onDidDrop() {
             return this.component.onDidDrop;
         }
+        get onWillDragGroup() {
+            return this.component.onWillDragGroup;
+        }
+        get onWillDragPanel() {
+            return this.component.onWillDragPanel;
+        }
         get panels() {
             return this.component.panels;
         }
@@ -2908,7 +2911,7 @@ define(['exports'], (function (exports) { 'use strict';
         }
         configure() {
             this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-                if (this.isCancelled(event)) {
+                if (event.defaultPrevented || this.isCancelled(event)) {
                     event.preventDefault();
                     return;
                 }
@@ -2928,19 +2931,23 @@ define(['exports'], (function (exports) { 'use strict';
                 }
                 this.el.classList.add('dv-dragged');
                 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__');
+                    }
                 }
             }), addDisposableListener(this.el, 'dragend', () => {
                 this.pointerEventsDisposable.dispose();
@@ -2949,44 +2956,45 @@ define(['exports'], (function (exports) { 'use strict';
         }
     }
 
+    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);
+                },
+            };
+        }
+    }
     class Tab extends CompositeDisposable {
         get element() {
             return this._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();
             this.onChanged = this._onChanged.event;
             this._onDropped = new Emitter();
             this.onDrop = this._onDropped.event;
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
             this._element = document.createElement('div');
             this._element.className = 'tab';
             this._element.tabIndex = 0;
             this._element.draggable = true;
             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, {
                 acceptedTargetZones: ['center'],
                 canDisplayOverlay: (event, position) => {
@@ -3000,12 +3008,19 @@ define(['exports'], (function (exports) { 'use strict';
                             // don't allow group move to drop on self
                             return false;
                         }
-                        return this.panelId !== data.panelId;
+                        return this.panel.id !== data.panelId;
                     }
                     return this.group.model.canDisplayOverlay(event, position, exports.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);
             }), this.droptarget);
         }
@@ -3037,9 +3052,9 @@ define(['exports'], (function (exports) { 'use strict';
     }
 
     class GroupDragHandler extends DragHandler {
-        constructor(element, accessorId, group) {
+        constructor(element, accessor, group) {
             super(element);
-            this.accessorId = accessorId;
+            this.accessor = accessor;
             this.group = group;
             this.panelTransfer = LocalSelectionTransfer.getInstance();
             this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
@@ -3059,8 +3074,9 @@ define(['exports'], (function (exports) { 'use strict';
             }
             return false;
         }
-        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);
             const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
             const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
@@ -3095,14 +3111,16 @@ define(['exports'], (function (exports) { 'use strict';
             this.group = group;
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
             this._element = document.createElement('div');
             this._element.className = 'void-container';
             this._element.tabIndex = 0;
             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, {
                 acceptedTargetZones: ['center'],
                 canDisplayOverlay: (event, position) => {
@@ -3120,7 +3138,9 @@ define(['exports'], (function (exports) { 'use strict';
                     return group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
                 },
             });
-            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);
             }), this.voidDropTarget);
         }
@@ -3128,7 +3148,7 @@ define(['exports'], (function (exports) { 'use strict';
 
     class TabsContainer extends CompositeDisposable {
         get panels() {
-            return this.tabs.map((_) => _.value.panelId);
+            return this.tabs.map((_) => _.value.panel.id);
         }
         get size() {
             return this.tabs.length;
@@ -3182,7 +3202,7 @@ define(['exports'], (function (exports) { 'use strict';
                 this.tabs[this.selectedIndex].value === tab);
         }
         indexOf(id) {
-            return this.tabs.findIndex((tab) => tab.value.panelId === id);
+            return this.tabs.findIndex((tab) => tab.value.panel.id === id);
         }
         constructor(accessor, group) {
             super();
@@ -3193,7 +3213,11 @@ define(['exports'], (function (exports) { 'use strict';
             this._hidden = false;
             this._onDrop = new Emitter();
             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');
             this._element.className = 'tabs-and-actions-container';
             toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
@@ -3217,7 +3241,12 @@ define(['exports'], (function (exports) { 'use strict';
             this._element.appendChild(this.leftActionsContainer);
             this._element.appendChild(this.voidContainer.element);
             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({
                     event: event.nativeEvent,
                     index: this.tabs.length,
@@ -3263,7 +3292,7 @@ define(['exports'], (function (exports) { 'use strict';
             }
         }
         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];
             const { value, disposable } = tabToRemove;
             disposable.dispose();
@@ -3272,21 +3301,23 @@ define(['exports'], (function (exports) { 'use strict';
         }
         setActivePanel(panel) {
             this.tabs.forEach((tab) => {
-                const isActivePanel = panel.id === tab.value.panelId;
+                const isActivePanel = panel.id === tab.value.panel.id;
                 tab.value.setActive(isActivePanel);
             });
         }
         openPanel(panel, index = this.tabs.length) {
             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;
                 const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
                 const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
@@ -3294,8 +3325,8 @@ define(['exports'], (function (exports) { 'use strict';
                     !isFloatingWithOnePanel &&
                     event.shiftKey) {
                     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();
                     this.accessor.addFloatingGroup(panel, {
                         x: left - rootLeft,
@@ -3312,13 +3343,13 @@ define(['exports'], (function (exports) { 'use strict';
                 this.group.model.openPanel(panel, {
                     skipFocus: alreadyFocused,
                 });
-            }), 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);
         }
         closePanel(panel) {
@@ -3346,7 +3377,7 @@ define(['exports'], (function (exports) { 'use strict';
         }
         set locked(value) {
             this._locked = value;
-            toggleClass(this.container, 'locked-groupview', value);
+            toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
         }
         get isActive() {
             return this._isGroupActive;
@@ -3403,6 +3434,10 @@ define(['exports'], (function (exports) { 'use strict';
             this.onMove = this._onMove.event;
             this._onDidDrop = new Emitter();
             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();
             this.onDidAddPanel = this._onDidAddPanel.event;
             this._onDidRemovePanel = new Emitter();
@@ -3415,7 +3450,8 @@ define(['exports'], (function (exports) { 'use strict';
             this.dropTarget = new Droptarget(this.contentContainer.element, {
                 acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
                 canDisplayOverlay: (event, position) => {
-                    if (this.locked && position === 'center') {
+                    if (this.locked === 'no-drop-target' ||
+                        (this.locked && position === 'center')) {
                         return false;
                     }
                     const data = getPanelData();
@@ -3441,8 +3477,12 @@ define(['exports'], (function (exports) { 'use strict';
             });
             container.append(this.tabsContainer.element, this.contentContainer.element);
             this.header.hidden = !!options.hideHeader;
-            this.locked = !!options.locked;
-            this.addDisposables(this.tabsContainer.onDrop((event) => {
+            this.locked = options.locked || false;
+            this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+                this._onTabDragStart.fire(event);
+            }), this.tabsContainer.onGroupDragStart((event) => {
+                this._onGroupDragStart.fire(event);
+            }), this.tabsContainer.onDrop((event) => {
                 this.handleDropEvent(event.event, 'center', event.index);
             }), this.contentContainer.onDidFocus(() => {
                 this.accessor.doSetGroupActive(this.groupPanel, true);
@@ -3497,8 +3537,8 @@ define(['exports'], (function (exports) { 'use strict';
                 activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
                 id: this.id,
             };
-            if (this.locked) {
-                result.locked = true;
+            if (this.locked !== false) {
+                result.locked = this.locked;
             }
             if (this.header.hidden) {
                 result.hideHeader = true;
@@ -3748,6 +3788,9 @@ define(['exports'], (function (exports) { 'use strict';
             return false;
         }
         handleDropEvent(event, position, index) {
+            if (this.locked === 'no-drop-target') {
+                return;
+            }
             const data = getPanelData();
             if (data && data.viewId === this.accessor.id) {
                 if (data.panelId === null) {
@@ -5205,6 +5248,12 @@ define(['exports'], (function (exports) { 'use strict';
         return pushToTop;
     })();
     class Overlay extends CompositeDisposable {
+        set minimumInViewportWidth(value) {
+            this.options.minimumInViewportWidth = value;
+        }
+        set minimumInViewportHeight(value) {
+            this.options.minimumInViewportHeight = value;
+        }
         constructor(options) {
             super();
             this.options = options;
@@ -5250,9 +5299,11 @@ define(['exports'], (function (exports) { 'use strict';
             const overlayRect = this._element.getBoundingClientRect();
             // region: ensure bounds within allowable limits
             // 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));
             const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
             this._element.style.left = `${left}px`;
@@ -5298,9 +5349,10 @@ define(['exports'], (function (exports) { 'use strict';
                             y: e.clientY - overlayRect.top,
                         };
                     }
-                    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));
                     const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                     this.setBounds({ top, left });
@@ -5374,14 +5426,11 @@ define(['exports'], (function (exports) { 'use strict';
                     let height = undefined;
                     let left = undefined;
                     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 +
                                 startPosition.originalHeight -
                                 Overlay.MINIMUM_HEIGHT));
@@ -5389,21 +5438,23 @@ define(['exports'], (function (exports) { 'use strict';
                             startPosition.originalY +
                                 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 +
                                 startPosition.originalWidth -
                                 Overlay.MINIMUM_WIDTH));
@@ -5411,15 +5462,18 @@ define(['exports'], (function (exports) { 'use strict';
                             startPosition.originalX +
                                 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) {
                         case 'top':
                             moveTop();
@@ -5463,6 +5517,18 @@ define(['exports'], (function (exports) { 'use strict';
                 }));
             }));
         }
+        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() {
             this._element.remove();
             super.dispose();
@@ -5483,6 +5549,7 @@ define(['exports'], (function (exports) { 'use strict';
         }
     }
 
+    const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
     class DockviewComponent extends BaseGrid {
         get orientation() {
             return this.gridview.orientation;
@@ -5513,6 +5580,10 @@ define(['exports'], (function (exports) { 'use strict';
             this.nextGroupId = sequentialNumberGenerator();
             this._deserializer = new DefaultDockviewDeserialzier(this);
             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();
             this.onDidDrop = this._onDidDrop.event;
             this._onDidRemovePanel = new Emitter();
@@ -5525,7 +5596,7 @@ define(['exports'], (function (exports) { 'use strict';
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this.floatingGroups = [];
             toggleClass(this.gridview.element, 'dv-dockview', true);
-            this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+            this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
                 this.updateWatermark();
             }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
@@ -5562,7 +5633,7 @@ define(['exports'], (function (exports) { 'use strict';
                         return true;
                     }
                     if (this.options.showDndOverlay) {
-                        if (position === 'center') {
+                        if (position === 'center' && this.gridview.length !== 0) {
                             /**
                              * for external events only show the four-corner drag overlays, disable
                              * the center position so that external drag events can fall through to the group
@@ -5598,7 +5669,7 @@ define(['exports'], (function (exports) { 'use strict';
             this.updateWatermark();
         }
         addFloatingGroup(item, coord, options) {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             let group;
             if (item instanceof DockviewPanel) {
                 group = this.createGroup();
@@ -5626,8 +5697,12 @@ define(['exports'], (function (exports) { 'use strict';
                 width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
                 left: overlayLeft,
                 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,
             });
             const el = group.element.querySelector('.void-container');
             if (!el) {
@@ -5698,12 +5773,37 @@ define(['exports'], (function (exports) { 'use strict';
             }
         }
         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);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
             }
+            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);
         }
         layout(width, height, forceResize) {
@@ -6186,7 +6286,11 @@ define(['exports'], (function (exports) { 'use strict';
             const view = new DockviewGroupPanel(this, id, options);
             view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
             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;
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
                 }), view.model.onDidDrop((event) => {
@@ -6225,13 +6329,6 @@ define(['exports'], (function (exports) { 'use strict';
             var _a;
             return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
         }
-        dispose() {
-            this._onDidActivePanelChange.dispose();
-            this._onDidAddPanel.dispose();
-            this._onDidRemovePanel.dispose();
-            this._onDidLayoutFromJSON.dispose();
-            super.dispose();
-        }
     }
 
     class GridviewComponent extends BaseGrid {