dockview-core 4.4.0 → 4.5.0

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

@@ -11,6 +11,10 @@ export interface DockviewGroupMoveParams {
      * The index to place the panel within a group, only applicable if the placement is within an existing group
      */
     index?: number;
+    /**
+     * Whether to skip setting the group as active after moving
+     */
+    skipSetActive?: boolean;
 }
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;

package/dist/cjs/api/dockviewGroupPanelApi.js

@@ -54,23 +54,24 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
             : window;
     };
     DockviewGroupPanelApiImpl.prototype.moveTo = function (options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!this._group) {
             throw new Error(NOT_INITIALIZED_MESSAGE);
         }
         var group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
             direction: (0, droptarget_1.positionToDirection)((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
-            skipSetActive: true,
+            skipSetActive: (_c = options.skipSetActive) !== null && _c !== void 0 ? _c : false,
         });
         this.accessor.moveGroupOrPanel({
             from: { groupId: this._group.id },
             to: {
                 group: group,
                 position: options.group
-                    ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
+                    ? (_d = options.position) !== null && _d !== void 0 ? _d : 'center'
                     : 'center',
                 index: options.index,
             },
+            skipSetActive: options.skipSetActive,
         });
     };
     DockviewGroupPanelApiImpl.prototype.maximize = function () {

package/dist/cjs/api/dockviewPanelApi.js

@@ -110,6 +110,7 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
                     : 'center',
                 index: options.index,
             },
+            skipSetActive: options.skipSetActive,
         });
     };
     DockviewPanelApiImpl.prototype.setTitle = function (title) {

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

@@ -23,5 +23,6 @@ export declare class Tab extends CompositeDisposable {
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
     setContent(part: ITabRenderer): void;
+    updateDragAndDropState(): void;
     dispose(): void;
 }

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

@@ -61,7 +61,7 @@ var Tab = /** @class */ (function (_super) {
         _this._element = document.createElement('div');
         _this._element.className = 'dv-tab';
         _this._element.tabIndex = 0;
-        _this._element.draggable = true;
+        _this._element.draggable = !_this.accessor.options.disableDnd;
         (0, dom_1.toggleClass)(_this.element, 'dv-inactive-tab', true);
         var dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel);
         _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
@@ -119,6 +119,9 @@ var Tab = /** @class */ (function (_super) {
         this.content = part;
         this._element.appendChild(this.content.element);
     };
+    Tab.prototype.updateDragAndDropState = function () {
+        this._element.draggable = !this.accessor.options.disableDnd;
+    };
     Tab.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
     };

package/dist/cjs/dockview/components/titlebar/tabs.d.ts

@@ -42,4 +42,5 @@ export declare class Tabs extends CompositeDisposable {
     delete(id: string): void;
     private addTab;
     private toggleDropdown;
+    updateDragAndDropState(): void;
 }

package/dist/cjs/dockview/components/titlebar/tabs.js

@@ -289,6 +289,22 @@ var Tabs = /** @class */ (function (_super) {
                 .map(function (x) { return x.value.panel.id; });
         this._onOverflowTabsChange.fire({ tabs: tabs, reset: options.reset });
     };
+    Tabs.prototype.updateDragAndDropState = function () {
+        var e_3, _a;
+        try {
+            for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var tab = _c.value;
+                tab.value.updateDragAndDropState();
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+    };
     return Tabs;
 }(lifecycle_1.CompositeDisposable));
 exports.Tabs = Tabs;

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

@@ -38,6 +38,7 @@ export interface ITabsContainer extends IDisposable {
     setPrefixActionsElement(element: HTMLElement | undefined): void;
     show(): void;
     hide(): void;
+    updateDragAndDropState(): void;
 }
 export declare class TabsContainer extends CompositeDisposable implements ITabsContainer {
     private readonly accessor;
@@ -82,4 +83,5 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     closePanel(panel: IDockviewPanel): void;
     private updateClassnames;
     private toggleDropdown;
+    updateDragAndDropState(): void;
 }

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

@@ -297,6 +297,10 @@ var TabsContainer = /** @class */ (function (_super) {
             });
         }));
     };
+    TabsContainer.prototype.updateDragAndDropState = function () {
+        this.tabs.updateDragAndDropState();
+        this.voidContainer.updateDragAndDropState();
+    };
     return TabsContainer;
 }(lifecycle_1.CompositeDisposable));
 exports.TabsContainer = TabsContainer;

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

@@ -15,4 +15,5 @@ export declare class VoidContainer extends CompositeDisposable {
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
+    updateDragAndDropState(): void;
 }

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

@@ -33,7 +33,7 @@ var VoidContainer = /** @class */ (function (_super) {
         _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
         _this._element.className = 'dv-void-container';
-        _this._element.draggable = true;
+        _this._element.draggable = !_this.accessor.options.disableDnd;
         _this.addDisposables(_this._onDrop, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function () {
             _this.accessor.doSetGroupActive(_this.group);
         }));
@@ -64,6 +64,9 @@ var VoidContainer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    VoidContainer.prototype.updateDragAndDropState = function () {
+        this._element.draggable = !this.accessor.options.disableDnd;
+    };
     return VoidContainer;
 }(lifecycle_1.CompositeDisposable));
 exports.VoidContainer = VoidContainer;

package/dist/cjs/dockview/dockviewComponent.d.ts

@@ -80,6 +80,7 @@ type MoveGroupOptions = {
         group: DockviewGroupPanel;
         position: Position;
     };
+    skipSetActive?: boolean;
 };
 type MoveGroupOrPanelOptions = {
     from: {
@@ -91,6 +92,7 @@ type MoveGroupOrPanelOptions = {
         position: Position;
         index?: number;
     };
+    skipSetActive?: boolean;
 };
 export interface FloatingGroupOptions {
     x?: number;
@@ -239,6 +241,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private orthogonalize;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     layout(width: number, height: number, forceResize?: boolean | undefined): void;
+    private updateDragAndDropState;
     focus(): void;
     getGroupPanel(id: string): IDockviewPanel | undefined;
     setActivePanel(panel: IDockviewPanel): void;

package/dist/cjs/dockview/dockviewComponent.js

@@ -875,7 +875,12 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }
         this.updateDropTargetModel(options);
+        var oldDisableDnd = this.options.disableDnd;
         this._options = __assign(__assign({}, this.options), options);
+        var newDisableDnd = this.options.disableDnd;
+        if (oldDisableDnd !== newDisableDnd) {
+            this.updateDragAndDropState();
+        }
         if ('theme' in options) {
             this.updateTheme();
         }
@@ -901,6 +906,23 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }
     };
+    DockviewComponent.prototype.updateDragAndDropState = function () {
+        var e_5, _a;
+        try {
+            // Update draggable state for all tabs and void containers
+            for (var _b = __values(this.groups), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var group = _c.value;
+                group.model.updateDragAndDropState();
+            }
+        }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_5) throw e_5.error; }
+        }
+    };
     DockviewComponent.prototype.focus = function () {
         var _a;
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -995,7 +1017,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         return result;
     };
     DockviewComponent.prototype.fromJSON = function (data) {
-        var e_5, _a, e_6, _b, e_7, _c, e_8, _d, e_9, _e, e_10, _f, e_11, _g;
+        var e_6, _a, e_7, _b, e_8, _c, e_9, _d, e_10, _e, e_11, _f, e_12, _g;
         var _this = this;
         var _h, _j;
         this.clear();
@@ -1011,7 +1033,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             var width = this.width;
             var height = this.height;
             var createGroupFromSerializedState_1 = function (data) {
-                var e_12, _a;
+                var e_13, _a;
                 var id = data.id, locked = data.locked, hideHeader = data.hideHeader, views = data.views, activeView = data.activeView;
                 if (typeof id !== 'string') {
                     throw new Error('group id must be of type string');
@@ -1035,12 +1057,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         createdPanels.push(panel);
                     }
                 }
-                catch (e_12_1) { e_12 = { error: e_12_1 }; }
+                catch (e_13_1) { e_13 = { error: e_13_1 }; }
                 finally {
                     try {
                         if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
                     }
-                    finally { if (e_12) throw e_12.error; }
+                    finally { if (e_13) throw e_13.error; }
                 }
                 for (var i = 0; i < views.length; i++) {
                     var panel = createdPanels[i];
@@ -1079,12 +1101,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
             finally {
                 try {
                     if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_a = serializedFloatingGroups_1.return)) _a.call(serializedFloatingGroups_1);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_6) throw e_6.error; }
             }
             var serializedPopoutGroups = (_j = data.popoutGroups) !== null && _j !== void 0 ? _j : [];
             try {
@@ -1102,12 +1124,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
                     if (serializedPopoutGroups_1_1 && !serializedPopoutGroups_1_1.done && (_b = serializedPopoutGroups_1.return)) _b.call(serializedPopoutGroups_1);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_7) throw e_7.error; }
             }
             try {
                 for (var _k = __values(this._floatingGroups), _l = _k.next(); !_l.done; _l = _k.next()) {
@@ -1115,12 +1137,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floatingGroup.overlay.setBounds();
                 }
             }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
                     if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
                 }
-                finally { if (e_7) throw e_7.error; }
+                finally { if (e_8) throw e_8.error; }
             }
             if (typeof activeGroup === 'string') {
                 var panel = this.getPanel(activeGroup);
@@ -1138,7 +1160,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 for (var _m = __values(this.groups), _o = _m.next(); !_o.done; _o = _m.next()) {
                     var group = _o.value;
                     try {
-                        for (var _p = (e_9 = void 0, __values(group.panels)), _q = _p.next(); !_q.done; _q = _p.next()) {
+                        for (var _p = (e_10 = void 0, __values(group.panels)), _q = _p.next(); !_q.done; _q = _p.next()) {
                             var panel = _q.value;
                             this.removePanel(panel, {
                                 removeEmptyGroup: false,
@@ -1146,21 +1168,21 @@ var DockviewComponent = /** @class */ (function (_super) {
                             });
                         }
                     }
-                    catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                    catch (e_10_1) { e_10 = { error: e_10_1 }; }
                     finally {
                         try {
                             if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
                         }
-                        finally { if (e_9) throw e_9.error; }
+                        finally { if (e_10) throw e_10.error; }
                     }
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_9_1) { e_9 = { error: e_9_1 }; }
             finally {
                 try {
                     if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_9) throw e_9.error; }
             }
             try {
                 /**
@@ -1174,12 +1196,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     this._onDidRemoveGroup.fire(group);
                 }
             }
-            catch (e_10_1) { e_10 = { error: e_10_1 }; }
+            catch (e_11_1) { e_11 = { error: e_11_1 }; }
             finally {
                 try {
                     if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
                 }
-                finally { if (e_10) throw e_10.error; }
+                finally { if (e_11) throw e_11.error; }
             }
             try {
                 // iterate over a reassigned array since original array will be modified
@@ -1188,12 +1210,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floatingGroup.dispose();
                 }
             }
-            catch (e_11_1) { e_11 = { error: e_11_1 }; }
+            catch (e_12_1) { e_12 = { error: e_12_1 }; }
             finally {
                 try {
                     if (_u && !_u.done && (_g = _t.return)) _g.call(_t);
                 }
-                finally { if (e_11) throw e_11.error; }
+                finally { if (e_12) throw e_12.error; }
             }
             // fires clean-up events and clears the underlying HTML gridview.
             this.clear();
@@ -1208,7 +1230,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this._onDidLayoutFromJSON.fire();
     };
     DockviewComponent.prototype.clear = function () {
-        var e_13, _a;
+        var e_14, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
         try {
@@ -1218,12 +1240,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.removeGroup(group, { skipActive: true });
             }
         }
-        catch (e_13_1) { e_13 = { error: e_13_1 }; }
+        catch (e_14_1) { e_14 = { error: e_14_1 }; }
         finally {
             try {
                 if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
             }
-            finally { if (e_13) throw e_13.error; }
+            finally { if (e_14) throw e_14.error; }
         }
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
@@ -1231,7 +1253,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_14, _a;
+        var e_15, _a;
         try {
             for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var entry = _c.value;
@@ -1239,12 +1261,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.value.model.closeAllPanels();
             }
         }
-        catch (e_14_1) { e_14 = { error: e_14_1 }; }
+        catch (e_15_1) { e_15 = { error: e_15_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_14) throw e_14.error; }
+            finally { if (e_15) throw e_15.error; }
         }
     };
     DockviewComponent.prototype.addPanel = function (options) {
@@ -1495,7 +1517,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.doRemoveGroup(group, options);
     };
     DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        var e_15, _a;
+        var e_16, _a;
         var _b;
         var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
         if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
@@ -1508,12 +1530,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_15_1) { e_15 = { error: e_15_1 }; }
+            catch (e_16_1) { e_16 = { error: e_16_1 }; }
             finally {
                 try {
                     if (panels_1_1 && !panels_1_1.done && (_a = panels_1.return)) _a.call(panels_1);
                 }
-                finally { if (e_15) throw e_15.error; }
+                finally { if (e_16) throw e_16.error; }
             }
         }
         var activePanel = this.activePanel;
@@ -1608,6 +1630,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     group: destinationGroup,
                     position: destinationTarget,
                 },
+                skipSetActive: options.skipSetActive,
             });
             return;
         }
@@ -1629,12 +1652,16 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(sourceGroup, { skipActive: true });
             }
             this.movingLock(function () {
+                var _a;
                 return destinationGroup.model.openPanel(removedPanel_1, {
                     index: destinationIndex,
+                    skipSetActive: (_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false,
                     skipSetGroupActive: true,
                 });
             });
-            this.doSetGroupAndPanelActive(destinationGroup);
+            if (!options.skipSetActive) {
+                this.doSetGroupAndPanelActive(destinationGroup);
+            }
             this._onDidMovePanel.fire({
                 panel: removedPanel_1,
                 from: sourceGroup,
@@ -1747,7 +1774,8 @@ var DockviewComponent = /** @class */ (function (_super) {
         var to = options.to.group;
         var target = options.to.position;
         if (target === 'center') {
-            var activePanel_1 = from.activePanel;
+            var activePanel = from.activePanel;
+            var targetActivePanel = to.activePanel;
             var panels_2 = this.movingLock(function () {
                 return __spreadArray([], __read(from.panels), false).map(function (p) {
                     return from.model.removePanel(p.id, {
@@ -1759,25 +1787,36 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(from, { skipActive: true });
             }
             this.movingLock(function () {
-                var e_16, _a;
+                var e_17, _a;
                 try {
                     for (var panels_3 = __values(panels_2), panels_3_1 = panels_3.next(); !panels_3_1.done; panels_3_1 = panels_3.next()) {
                         var panel = panels_3_1.value;
                         to.model.openPanel(panel, {
-                            skipSetActive: panel !== activePanel_1,
+                            skipSetActive: true, // Always skip setting panels active during move
                             skipSetGroupActive: true,
                         });
                     }
                 }
-                catch (e_16_1) { e_16 = { error: e_16_1 }; }
+                catch (e_17_1) { e_17 = { error: e_17_1 }; }
                 finally {
                     try {
                         if (panels_3_1 && !panels_3_1.done && (_a = panels_3.return)) _a.call(panels_3);
                     }
-                    finally { if (e_16) throw e_16.error; }
+                    finally { if (e_17) throw e_17.error; }
                 }
             });
-            this.doSetGroupAndPanelActive(to);
+            if (!options.skipSetActive) {
+                // Make the moved panel (from the source group) active
+                if (activePanel) {
+                    this.doSetGroupAndPanelActive(to);
+                }
+            }
+            else if (targetActivePanel) {
+                // Ensure the target group's original active panel remains active
+                to.model.openPanel(targetActivePanel, {
+                    skipSetGroupActive: true
+                });
+            }
         }
         else {
             switch (from.api.location.type) {
@@ -1797,12 +1836,39 @@ var DockviewComponent = /** @class */ (function (_super) {
                     if (!selectedPopoutGroup) {
                         throw new Error('failed to find popout group');
                     }
-                    selectedPopoutGroup.disposable.dispose();
+                    // Remove from popout groups list to prevent automatic restoration
+                    var index = this._popoutGroups.indexOf(selectedPopoutGroup);
+                    if (index >= 0) {
+                        this._popoutGroups.splice(index, 1);
+                    }
+                    // Clean up the reference group (ghost) if it exists and is hidden
+                    if (selectedPopoutGroup.referenceGroup) {
+                        var referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
+                        if (referenceGroup && !referenceGroup.api.isVisible) {
+                            this.doRemoveGroup(referenceGroup, { skipActive: true });
+                        }
+                    }
+                    // Manually dispose the window without triggering restoration
+                    selectedPopoutGroup.window.dispose();
+                    // Update group's location and containers for target
+                    if (to.api.location.type === 'grid') {
+                        from.model.renderContainer = this.overlayRenderContainer;
+                        from.model.dropTargetContainer = this.rootDropTargetContainer;
+                        from.model.location = { type: 'grid' };
+                    }
+                    else if (to.api.location.type === 'floating') {
+                        from.model.renderContainer = this.overlayRenderContainer;
+                        from.model.dropTargetContainer = this.rootDropTargetContainer;
+                        from.model.location = { type: 'floating' };
+                    }
+                    break;
                 }
             }
-            if (from.api.location.type !== 'popout') {
+            // For moves to grid locations
+            if (to.api.location.type === 'grid') {
                 var referenceLocation = (0, gridview_1.getGridLocation)(to.element);
                 var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
+                // Add to grid for all moves targeting grid location
                 var size = void 0;
                 switch (this.gridview.orientation) {
                     case splitview_1.Orientation.VERTICAL:
@@ -1820,10 +1886,49 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
                 this.gridview.addView(from, size, dropLocation);
             }
+            else if (to.api.location.type === 'floating') {
+                // For moves to floating locations, add as floating group
+                // Get the position/size from the target floating group
+                var targetFloatingGroup = this._floatingGroups.find(function (x) { return x.group === to; });
+                if (targetFloatingGroup) {
+                    var box = targetFloatingGroup.overlay.toJSON();
+                    // Calculate position based on available properties
+                    var left = void 0, top_1;
+                    if ('left' in box) {
+                        left = box.left + 50;
+                    }
+                    else if ('right' in box) {
+                        left = Math.max(0, box.right - box.width - 50);
+                    }
+                    else {
+                        left = 50; // Default fallback
+                    }
+                    if ('top' in box) {
+                        top_1 = box.top + 50;
+                    }
+                    else if ('bottom' in box) {
+                        top_1 = Math.max(0, box.bottom - box.height - 50);
+                    }
+                    else {
+                        top_1 = 50; // Default fallback
+                    }
+                    this.addFloatingGroup(from, {
+                        height: box.height,
+                        width: box.width,
+                        position: {
+                            left: left,
+                            top: top_1,
+                        },
+                    });
+                }
+            }
         }
         from.panels.forEach(function (panel) {
             _this._onDidMovePanel.fire({ panel: panel, from: from });
         });
+        if (!options.skipSetActive) {
+            this.doSetGroupAndPanelActive(from);
+        }
     };
     DockviewComponent.prototype.doSetGroupActive = function (group) {
         _super.prototype.doSetGroupActive.call(this, group);

package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts

@@ -123,9 +123,16 @@ export type DockviewGroupLocation = {
     getWindow: () => Window;
     popoutUrl?: string;
 };
+export interface WillShowOverlayLocationEventOptions {
+    readonly kind: DockviewGroupDropLocation;
+    readonly panel: IDockviewPanel | undefined;
+    readonly api: DockviewApi;
+    readonly group: DockviewGroupPanel | undefined;
+    getData: () => PanelTransfer | undefined;
+}
 export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
     private readonly event;
-    private readonly options;
+    readonly options: WillShowOverlayLocationEventOptions;
     get kind(): DockviewGroupDropLocation;
     get nativeEvent(): DragEvent;
     get position(): Position;
@@ -135,13 +142,7 @@ export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
     get group(): DockviewGroupPanel | undefined;
     preventDefault(): void;
     getData(): PanelTransfer | undefined;
-    constructor(event: WillShowOverlayEvent, options: {
-        kind: DockviewGroupDropLocation;
-        panel: IDockviewPanel | undefined;
-        api: DockviewApi;
-        group: DockviewGroupPanel | undefined;
-        getData: () => PanelTransfer | undefined;
-    });
+    constructor(event: WillShowOverlayEvent, options: WillShowOverlayLocationEventOptions);
 }
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
     private readonly container;
@@ -252,6 +253,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private updateContainer;
     canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
     private handleDropEvent;
+    updateDragAndDropState(): void;
     dispose(): void;
 }
 export {};

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -842,6 +842,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             }));
         }
     };
+    DockviewGroupPanelModel.prototype.updateDragAndDropState = function () {
+        this.tabsContainer.updateDragAndDropState();
+    };
     DockviewGroupPanelModel.prototype.dispose = function () {
         var e_2, _a;
         var _b, _c, _d;