dockview-core 4.6.2 → 4.7.0

package/dist/cjs/constants.d.ts

@@ -5,3 +5,4 @@ export declare const DEFAULT_FLOATING_GROUP_POSITION: {
     width: number;
     height: number;
 };
+export declare const DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/cjs/constants.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_FLOATING_GROUP_POSITION = exports.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = void 0;
+exports.DESERIALIZATION_POPOUT_DELAY_MS = exports.DEFAULT_FLOATING_GROUP_POSITION = exports.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = void 0;
 exports.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 exports.DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+exports.DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/cjs/dnd/droptarget.js

@@ -21,6 +21,48 @@ var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var dnd_1 = require("./dnd");
 var math_1 = require("../math");
+function setGPUOptimizedBounds(element, bounds) {
+    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
+    var topPx = "".concat(Math.round(top), "px");
+    var leftPx = "".concat(Math.round(left), "px");
+    var widthPx = "".concat(Math.round(width), "px");
+    var heightPx = "".concat(Math.round(height), "px");
+    // Use traditional positioning but maintain GPU layer
+    element.style.top = topPx;
+    element.style.left = leftPx;
+    element.style.width = widthPx;
+    element.style.height = heightPx;
+    element.style.visibility = 'visible';
+    // Ensure GPU layer is maintained
+    if (!element.style.transform || element.style.transform === '') {
+        element.style.transform = 'translate3d(0, 0, 0)';
+    }
+}
+function setGPUOptimizedBoundsFromStrings(element, bounds) {
+    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
+    // Use traditional positioning but maintain GPU layer
+    element.style.top = top;
+    element.style.left = left;
+    element.style.width = width;
+    element.style.height = height;
+    element.style.visibility = 'visible';
+    // Ensure GPU layer is maintained
+    if (!element.style.transform || element.style.transform === '') {
+        element.style.transform = 'translate3d(0, 0, 0)';
+    }
+}
+function checkBoundsChanged(element, bounds) {
+    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
+    var topPx = "".concat(Math.round(top), "px");
+    var leftPx = "".concat(Math.round(left), "px");
+    var widthPx = "".concat(Math.round(width), "px");
+    var heightPx = "".concat(Math.round(height), "px");
+    // Check if position or size changed (back to traditional method)
+    return element.style.top !== topPx ||
+        element.style.left !== leftPx ||
+        element.style.width !== widthPx ||
+        element.style.height !== heightPx;
+}
 var WillShowOverlayEvent = /** @class */ (function (_super) {
     __extends(WillShowOverlayEvent, _super);
     function WillShowOverlayEvent(options) {
@@ -328,21 +370,11 @@ var Droptarget = /** @class */ (function (_super) {
                 box_1.left = rootLeft + width - 4;
                 box_1.width = 4;
             }
-            var topPx = "".concat(Math.round(box_1.top), "px");
-            var leftPx = "".concat(Math.round(box_1.left), "px");
-            var widthPx = "".concat(Math.round(box_1.width), "px");
-            var heightPx = "".concat(Math.round(box_1.height), "px");
-            if (overlay_1.style.top === topPx &&
-                overlay_1.style.left === leftPx &&
-                overlay_1.style.width === widthPx &&
-                overlay_1.style.height === heightPx) {
+            // Use GPU-optimized bounds checking and setting
+            if (!checkBoundsChanged(overlay_1, box_1)) {
                 return;
             }
-            overlay_1.style.top = topPx;
-            overlay_1.style.left = leftPx;
-            overlay_1.style.width = widthPx;
-            overlay_1.style.height = heightPx;
-            overlay_1.style.visibility = 'visible';
+            setGPUOptimizedBounds(overlay_1, box_1);
             overlay_1.className = "dv-drop-target-anchor".concat(this.options.className ? " ".concat(this.options.className) : '');
             (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-left', isLeft);
             (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-right', isRight);
@@ -394,10 +426,7 @@ var Droptarget = /** @class */ (function (_super) {
             box.top = "".concat(100 * (1 - size), "%");
             box.height = "".concat(100 * size, "%");
         }
-        this.overlayElement.style.top = box.top;
-        this.overlayElement.style.left = box.left;
-        this.overlayElement.style.width = box.width;
-        this.overlayElement.style.height = box.height;
+        setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-left', isLeft);

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

@@ -219,6 +219,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
+    private _popoutRestorationPromise;
     private readonly _onDidRemoveGroup;
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;
@@ -235,6 +236,11 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get renderer(): DockviewPanelRenderer;
     get api(): DockviewApi;
     get floatingGroups(): DockviewFloatingGroupPanel[];
+    /**
+     * Promise that resolves when all popout groups from the last fromJSON call are restored.
+     * Useful for tests that need to wait for delayed popout creation.
+     */
+    get popoutRestorationPromise(): Promise<void>;
     constructor(container: HTMLElement, options: DockviewComponentOptions);
     setVisible(panel: DockviewGroupPanel, visible: boolean): void;
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: DockviewPopoutGroupOptions): Promise<boolean>;

package/dist/cjs/dockview/dockviewComponent.js

@@ -159,6 +159,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidMaximizedGroupChange = _this._onDidMaximizedGroupChange.event;
         _this._floatingGroups = [];
         _this._popoutGroups = [];
+        _this._popoutRestorationPromise = Promise.resolve();
         _this._onDidRemoveGroup = new events_1.Emitter();
         _this.onDidRemoveGroup = _this._onDidRemoveGroup.event;
         _this._onDidAddGroup = new events_1.Emitter();
@@ -380,6 +381,17 @@ var DockviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewComponent.prototype, "popoutRestorationPromise", {
+        /**
+         * Promise that resolves when all popout groups from the last fromJSON call are restored.
+         * Useful for tests that need to wait for delayed popout creation.
+         */
+        get: function () {
+            return this._popoutRestorationPromise;
+        },
+        enumerable: false,
+        configurable: true
+    });
     DockviewComponent.prototype.setVisible = function (panel, visible) {
         switch (panel.api.location.type) {
             case 'grid':
@@ -807,6 +819,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.updateWatermark();
     };
     DockviewComponent.prototype.orthogonalize = function (position, options) {
+        this.gridview.normalize();
         switch (position) {
             case 'top':
             case 'bottom':
@@ -1018,9 +1031,9 @@ var DockviewComponent = /** @class */ (function (_super) {
         return result;
     };
     DockviewComponent.prototype.fromJSON = function (data) {
-        var e_6, _a, e_7, _b, e_8, _c, e_9, _d, e_10, _e, e_11, _f, e_12, _g;
+        var e_6, _a, e_7, _b, e_8, _c, e_9, _d, e_10, _e, e_11, _f;
         var _this = this;
-        var _h, _j;
+        var _g, _h;
         this.clear();
         if (typeof data !== 'object' || data === null) {
             throw new Error('serialized layout must be a non-null object');
@@ -1034,7 +1047,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             var width = this.width;
             var height = this.height;
             var createGroupFromSerializedState_1 = function (data) {
-                var e_13, _a;
+                var e_12, _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');
@@ -1058,12 +1071,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         createdPanels.push(panel);
                     }
                 }
-                catch (e_13_1) { e_13 = { error: e_13_1 }; }
+                catch (e_12_1) { e_12 = { error: e_12_1 }; }
                 finally {
                     try {
                         if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
                     }
-                    finally { if (e_13) throw e_13.error; }
+                    finally { if (e_12) throw e_12.error; }
                 }
                 for (var i = 0; i < views.length; i++) {
                     var panel = createdPanels[i];
@@ -1087,7 +1100,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 },
             });
             this.layout(width, height, true);
-            var serializedFloatingGroups = (_h = data.floatingGroups) !== null && _h !== void 0 ? _h : [];
+            var serializedFloatingGroups = (_g = data.floatingGroups) !== null && _g !== void 0 ? _g : [];
             try {
                 for (var serializedFloatingGroups_1 = __values(serializedFloatingGroups), serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next(); !serializedFloatingGroups_1_1.done; serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next()) {
                     var serializedFloatingGroup = serializedFloatingGroups_1_1.value;
@@ -1109,42 +1122,44 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
                 finally { if (e_6) throw e_6.error; }
             }
-            var serializedPopoutGroups = (_j = data.popoutGroups) !== null && _j !== void 0 ? _j : [];
+            var serializedPopoutGroups = (_h = data.popoutGroups) !== null && _h !== void 0 ? _h : [];
+            // Create a promise that resolves when all popout groups are created
+            var popoutPromises_1 = [];
+            // Queue popup group creation with delays to avoid browser blocking
+            serializedPopoutGroups.forEach(function (serializedPopoutGroup, index) {
+                var data = serializedPopoutGroup.data, position = serializedPopoutGroup.position, gridReferenceGroup = serializedPopoutGroup.gridReferenceGroup, url = serializedPopoutGroup.url;
+                var group = createGroupFromSerializedState_1(data);
+                // Add a small delay for each popup after the first to avoid browser popup blocking
+                var popoutPromise = new Promise(function (resolve) {
+                    setTimeout(function () {
+                        _this.addPopoutGroup(group, {
+                            position: position !== null && position !== void 0 ? position : undefined,
+                            overridePopoutGroup: gridReferenceGroup ? group : undefined,
+                            referenceGroup: gridReferenceGroup
+                                ? _this.getPanel(gridReferenceGroup)
+                                : undefined,
+                            popoutUrl: url,
+                        });
+                        resolve();
+                    }, index * constants_1.DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
+                });
+                popoutPromises_1.push(popoutPromise);
+            });
+            // Store the promise for tests to wait on
+            this._popoutRestorationPromise = Promise.all(popoutPromises_1).then(function () { return void 0; });
             try {
-                for (var serializedPopoutGroups_1 = __values(serializedPopoutGroups), serializedPopoutGroups_1_1 = serializedPopoutGroups_1.next(); !serializedPopoutGroups_1_1.done; serializedPopoutGroups_1_1 = serializedPopoutGroups_1.next()) {
-                    var serializedPopoutGroup = serializedPopoutGroups_1_1.value;
-                    var data_2 = serializedPopoutGroup.data, position = serializedPopoutGroup.position, gridReferenceGroup = serializedPopoutGroup.gridReferenceGroup, url = serializedPopoutGroup.url;
-                    var group = createGroupFromSerializedState_1(data_2);
-                    this.addPopoutGroup(group, {
-                        position: position !== null && position !== void 0 ? position : undefined,
-                        overridePopoutGroup: gridReferenceGroup ? group : undefined,
-                        referenceGroup: gridReferenceGroup
-                            ? this.getPanel(gridReferenceGroup)
-                            : undefined,
-                        popoutUrl: url,
-                    });
+                for (var _j = __values(this._floatingGroups), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var floatingGroup = _k.value;
+                    floatingGroup.overlay.setBounds();
                 }
             }
             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);
+                    if (_k && !_k.done && (_b = _j.return)) _b.call(_j);
                 }
                 finally { if (e_7) throw e_7.error; }
             }
-            try {
-                for (var _k = __values(this._floatingGroups), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var floatingGroup = _l.value;
-                    floatingGroup.overlay.setBounds();
-                }
-            }
-            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_8) throw e_8.error; }
-            }
             if (typeof activeGroup === 'string') {
                 var panel = this.getPanel(activeGroup);
                 if (panel) {
@@ -1158,65 +1173,65 @@ var DockviewComponent = /** @class */ (function (_super) {
                 /**
                  * Takes all the successfully created groups and remove all of their panels.
                  */
-                for (var _m = __values(this.groups), _o = _m.next(); !_o.done; _o = _m.next()) {
-                    var group = _o.value;
+                for (var _l = __values(this.groups), _m = _l.next(); !_m.done; _m = _l.next()) {
+                    var group = _m.value;
                     try {
-                        for (var _p = (e_10 = void 0, __values(group.panels)), _q = _p.next(); !_q.done; _q = _p.next()) {
-                            var panel = _q.value;
+                        for (var _o = (e_9 = void 0, __values(group.panels)), _p = _o.next(); !_p.done; _p = _o.next()) {
+                            var panel = _p.value;
                             this.removePanel(panel, {
                                 removeEmptyGroup: false,
                                 skipDispose: false,
                             });
                         }
                     }
-                    catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                    catch (e_9_1) { e_9 = { error: e_9_1 }; }
                     finally {
                         try {
-                            if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
+                            if (_p && !_p.done && (_d = _o.return)) _d.call(_o);
                         }
-                        finally { if (e_10) throw e_10.error; }
+                        finally { if (e_9) throw e_9.error; }
                     }
                 }
             }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
-                    if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
+                    if (_m && !_m.done && (_c = _l.return)) _c.call(_l);
                 }
-                finally { if (e_9) throw e_9.error; }
+                finally { if (e_8) throw e_8.error; }
             }
             try {
                 /**
                  * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
                  * the underlying HTMLElement existing in the Gridview.
                  */
-                for (var _r = __values(this.groups), _s = _r.next(); !_s.done; _s = _r.next()) {
-                    var group = _s.value;
+                for (var _q = __values(this.groups), _r = _q.next(); !_r.done; _r = _q.next()) {
+                    var group = _r.value;
                     group.dispose();
                     this._groups.delete(group.id);
                     this._onDidRemoveGroup.fire(group);
                 }
             }
-            catch (e_11_1) { e_11 = { error: e_11_1 }; }
+            catch (e_10_1) { e_10 = { error: e_10_1 }; }
             finally {
                 try {
-                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
+                    if (_r && !_r.done && (_e = _q.return)) _e.call(_q);
                 }
-                finally { if (e_11) throw e_11.error; }
+                finally { if (e_10) throw e_10.error; }
             }
             try {
                 // iterate over a reassigned array since original array will be modified
-                for (var _t = __values(__spreadArray([], __read(this._floatingGroups), false)), _u = _t.next(); !_u.done; _u = _t.next()) {
-                    var floatingGroup = _u.value;
+                for (var _s = __values(__spreadArray([], __read(this._floatingGroups), false)), _t = _s.next(); !_t.done; _t = _s.next()) {
+                    var floatingGroup = _t.value;
                     floatingGroup.dispose();
                 }
             }
-            catch (e_12_1) { e_12 = { error: e_12_1 }; }
+            catch (e_11_1) { e_11 = { error: e_11_1 }; }
             finally {
                 try {
-                    if (_u && !_u.done && (_g = _t.return)) _g.call(_t);
+                    if (_t && !_t.done && (_f = _s.return)) _f.call(_s);
                 }
-                finally { if (e_12) throw e_12.error; }
+                finally { if (e_11) throw e_11.error; }
             }
             // fires clean-up events and clears the underlying HTML gridview.
             this.clear();
@@ -1228,10 +1243,14 @@ var DockviewComponent = /** @class */ (function (_super) {
             throw err;
         }
         this.updateWatermark();
+        // Force position updates for always visible panels after DOM layout is complete
+        requestAnimationFrame(function () {
+            _this.overlayRenderContainer.updateAllPositions();
+        });
         this._onDidLayoutFromJSON.fire();
     };
     DockviewComponent.prototype.clear = function () {
-        var e_14, _a;
+        var e_13, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
         try {
@@ -1241,12 +1260,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.removeGroup(group, { skipActive: true });
             }
         }
-        catch (e_14_1) { e_14 = { error: e_14_1 }; }
+        catch (e_13_1) { e_13 = { error: e_13_1 }; }
         finally {
             try {
                 if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
             }
-            finally { if (e_14) throw e_14.error; }
+            finally { if (e_13) throw e_13.error; }
         }
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
@@ -1254,7 +1273,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_15, _a;
+        var e_14, _a;
         try {
             for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var entry = _c.value;
@@ -1262,12 +1281,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.value.model.closeAllPanels();
             }
         }
-        catch (e_15_1) { e_15 = { error: e_15_1 }; }
+        catch (e_14_1) { e_14 = { error: e_14_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_15) throw e_15.error; }
+            finally { if (e_14) throw e_14.error; }
         }
     };
     DockviewComponent.prototype.addPanel = function (options) {
@@ -1518,7 +1537,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.doRemoveGroup(group, options);
     };
     DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        var e_16, _a;
+        var e_15, _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)) {
@@ -1531,12 +1550,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_16_1) { e_16 = { error: e_16_1 }; }
+            catch (e_15_1) { e_15 = { error: e_15_1 }; }
             finally {
                 try {
                     if (panels_1_1 && !panels_1_1.done && (_a = panels_1.return)) _a.call(panels_1);
                 }
-                finally { if (e_16) throw e_16.error; }
+                finally { if (e_15) throw e_15.error; }
             }
         }
         var activePanel = this.activePanel;
@@ -1775,8 +1794,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         var to = options.to.group;
         var target = options.to.position;
         if (target === 'center') {
-            var activePanel = from.activePanel;
-            var targetActivePanel = to.activePanel;
+            var activePanel_1 = from.activePanel;
             var panels_2 = this.movingLock(function () {
                 return __spreadArray([], __read(from.panels), false).map(function (p) {
                     return from.model.removePanel(p.id, {
@@ -1788,35 +1806,34 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(from, { skipActive: true });
             }
             this.movingLock(function () {
-                var e_17, _a;
+                var e_16, _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: true, // Always skip setting panels active during move
+                            skipSetActive: panel !== activePanel_1,
                             skipSetGroupActive: true,
                         });
                     }
                 }
-                catch (e_17_1) { e_17 = { error: e_17_1 }; }
+                catch (e_16_1) { e_16 = { error: e_16_1 }; }
                 finally {
                     try {
                         if (panels_3_1 && !panels_3_1.done && (_a = panels_3.return)) _a.call(panels_3);
                     }
-                    finally { if (e_17) throw e_17.error; }
+                    finally { if (e_16) throw e_16.error; }
                 }
             });
-            if (!options.skipSetActive) {
-                // Make the moved panel (from the source group) active
-                if (activePanel) {
-                    this.doSetGroupAndPanelActive(to);
-                }
+            // Ensure group becomes active after move
+            if (options.skipSetActive !== true) {
+                // For center moves (merges), we need to ensure the target group is active
+                // unless explicitly told not to (skipSetActive: true)
+                this.doSetGroupAndPanelActive(to);
             }
-            else if (targetActivePanel) {
-                // Ensure the target group's original active panel remains active
-                to.model.openPanel(targetActivePanel, {
-                    skipSetGroupActive: true
-                });
+            else if (!this.activePanel) {
+                // Even with skipSetActive: true, ensure there's an active panel if none exists
+                // This maintains basic functionality while respecting skipSetActive
+                this.doSetGroupAndPanelActive(to);
             }
         }
         else {
@@ -1846,20 +1863,26 @@ var DockviewComponent = /** @class */ (function (_super) {
                     if (selectedPopoutGroup.referenceGroup) {
                         var referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
                         if (referenceGroup && !referenceGroup.api.isVisible) {
-                            this.doRemoveGroup(referenceGroup, { skipActive: true });
+                            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.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.renderContainer =
+                            this.overlayRenderContainer;
+                        from.model.dropTargetContainer =
+                            this.rootDropTargetContainer;
                         from.model.location = { type: 'floating' };
                     }
                     break;
@@ -1927,8 +1950,12 @@ var DockviewComponent = /** @class */ (function (_super) {
         from.panels.forEach(function (panel) {
             _this._onDidMovePanel.fire({ panel: panel, from: from });
         });
-        if (!options.skipSetActive) {
-            this.doSetGroupAndPanelActive(from);
+        // Ensure group becomes active after move
+        if (options.skipSetActive === false) {
+            // Only activate when explicitly requested (skipSetActive: false)
+            // Use 'to' group for non-center moves since 'from' may have been destroyed
+            var targetGroup = to !== null && to !== void 0 ? to : from;
+            this.doSetGroupAndPanelActive(targetGroup);
         }
     };
     DockviewComponent.prototype.doSetGroupActive = function (group) {

package/dist/cjs/gridview/gridview.d.ts

@@ -134,6 +134,7 @@ export declare class Gridview implements IDisposable {
     private _deserializeNode;
     private get root();
     private set root(value);
+    normalize(): void;
     /**
      * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
      * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node

package/dist/cjs/gridview/gridview.js

@@ -45,6 +45,19 @@ function findLeaf(candiateNode, last) {
     }
     throw new Error('invalid node');
 }
+function cloneNode(node, size, orthogonalSize) {
+    if (node instanceof branchNode_1.BranchNode) {
+        var result = new branchNode_1.BranchNode(node.orientation, node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
+        for (var i = node.children.length - 1; i >= 0; i--) {
+            var child = node.children[i];
+            result.addChild(cloneNode(child, child.size, child.orthogonalSize), child.size, 0, true);
+        }
+        return result;
+    }
+    else {
+        return new leafNode_1.LeafNode(node.view, node.orientation, orthogonalSize);
+    }
+}
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof branchNode_1.BranchNode) {
         var result = new branchNode_1.BranchNode((0, exports.orthogonal)(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
@@ -471,6 +484,30 @@ var Gridview = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Gridview.prototype.normalize = function () {
+        var _this = this;
+        if (!this._root) {
+            return;
+        }
+        if (this._root.children.length !== 1) {
+            return;
+        }
+        var oldRoot = this.root;
+        // can remove one level of redundant branching if there is only a single child
+        var childReference = oldRoot.children[0];
+        if (childReference instanceof leafNode_1.LeafNode) {
+            return;
+        }
+        oldRoot.element.remove();
+        var child = oldRoot.removeChild(0); // Remove child to prevent double disposal
+        oldRoot.dispose(); // Dispose old root (won't dispose removed child)
+        child.dispose(); // Dispose the removed child
+        this._root = cloneNode(childReference, childReference.size, childReference.orthogonalSize);
+        this.element.appendChild(this._root.element);
+        this.disposable.value = this._root.onDidChange(function (e) {
+            _this._onDidChange.fire(e);
+        });
+    };
     /**
      * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
      * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node

package/dist/cjs/overlay/overlayRenderContainer.d.ts

@@ -12,7 +12,10 @@ export declare class OverlayRenderContainer extends CompositeDisposable {
     readonly accessor: DockviewComponent;
     private readonly map;
     private _disposed;
+    private readonly positionCache;
+    private readonly pendingUpdates;
     constructor(element: HTMLElement, accessor: DockviewComponent);
+    updateAllPositions(): void;
     detatch(panel: IDockviewPanel): boolean;
     attach(options: {
         panel: IDockviewPanel;