dockview-core 4.6.2 → 4.7.1

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;
@@ -1652,11 +1671,13 @@ var DockviewComponent = /** @class */ (function (_super) {
                 // remove the group and do not set a new group as active
                 this.doRemoveGroup(sourceGroup, { skipActive: true });
             }
+            // Check if destination group is empty - if so, force render the component
+            var isDestinationGroupEmpty_1 = destinationGroup.model.size === 0;
             this.movingLock(function () {
                 var _a;
                 return destinationGroup.model.openPanel(removedPanel_1, {
                     index: destinationIndex,
-                    skipSetActive: (_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false,
+                    skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) && !isDestinationGroupEmpty_1,
                     skipSetGroupActive: true,
                 });
             });
@@ -1775,8 +1796,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 +1808,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 +1865,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 +1952,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;

package/dist/cjs/overlay/overlayRenderContainer.js

@@ -30,6 +30,36 @@ exports.OverlayRenderContainer = void 0;
 var dnd_1 = require("../dnd/dnd");
 var dom_1 = require("../dom");
 var lifecycle_1 = require("../lifecycle");
+var PositionCache = /** @class */ (function () {
+    function PositionCache() {
+        this.cache = new Map();
+        this.currentFrameId = 0;
+        this.rafId = null;
+    }
+    PositionCache.prototype.getPosition = function (element) {
+        var cached = this.cache.get(element);
+        if (cached && cached.frameId === this.currentFrameId) {
+            return cached.rect;
+        }
+        this.scheduleFrameUpdate();
+        var rect = (0, dom_1.getDomNodePagePosition)(element);
+        this.cache.set(element, { rect: rect, frameId: this.currentFrameId });
+        return rect;
+    };
+    PositionCache.prototype.invalidate = function () {
+        this.currentFrameId++;
+    };
+    PositionCache.prototype.scheduleFrameUpdate = function () {
+        var _this = this;
+        if (this.rafId)
+            return;
+        this.rafId = requestAnimationFrame(function () {
+            _this.currentFrameId++;
+            _this.rafId = null;
+        });
+    };
+    return PositionCache;
+}());
 function createFocusableElement() {
     var element = document.createElement('div');
     element.tabIndex = -1;
@@ -43,6 +73,8 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
         _this.accessor = accessor;
         _this.map = {};
         _this._disposed = false;
+        _this.positionCache = new PositionCache();
+        _this.pendingUpdates = new Set();
         _this.addDisposables(lifecycle_1.Disposable.from(function () {
             var e_1, _a;
             try {
@@ -63,6 +95,30 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
         }));
         return _this;
     }
+    OverlayRenderContainer.prototype.updateAllPositions = function () {
+        var e_2, _a;
+        if (this._disposed) {
+            return;
+        }
+        // Invalidate position cache to force recalculation
+        this.positionCache.invalidate();
+        try {
+            // Call resize function directly for all visible panels
+            for (var _b = __values(Object.values(this.map)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var entry = _c.value;
+                if (entry.panel.api.isVisible && entry.resize) {
+                    entry.resize();
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    };
     OverlayRenderContainer.prototype.detatch = function (panel) {
         if (this.map[panel.api.id]) {
             var _a = this.map[panel.api.id], disposable = _a.disposable, destroy = _a.destroy;
@@ -94,17 +150,33 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
             this.element.appendChild(focusContainer);
         }
         var resize = function () {
-            // TODO propagate position to avoid getDomNodePagePosition calls, possible performance bottleneck?
-            var box = (0, dom_1.getDomNodePagePosition)(referenceContainer.element);
-            var box2 = (0, dom_1.getDomNodePagePosition)(_this.element);
-            focusContainer.style.left = "".concat(box.left - box2.left, "px");
-            focusContainer.style.top = "".concat(box.top - box2.top, "px");
-            focusContainer.style.width = "".concat(box.width, "px");
-            focusContainer.style.height = "".concat(box.height, "px");
-            (0, dom_1.toggleClass)(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
+            var panelId = panel.api.id;
+            if (_this.pendingUpdates.has(panelId)) {
+                return; // Update already scheduled
+            }
+            _this.pendingUpdates.add(panelId);
+            requestAnimationFrame(function () {
+                _this.pendingUpdates.delete(panelId);
+                if (_this.isDisposed || !_this.map[panelId]) {
+                    return;
+                }
+                var box = _this.positionCache.getPosition(referenceContainer.element);
+                var box2 = _this.positionCache.getPosition(_this.element);
+                // Use traditional positioning for overlay containers
+                var left = box.left - box2.left;
+                var top = box.top - box2.top;
+                var width = box.width;
+                var height = box.height;
+                focusContainer.style.left = "".concat(left, "px");
+                focusContainer.style.top = "".concat(top, "px");
+                focusContainer.style.width = "".concat(width, "px");
+                focusContainer.style.height = "".concat(height, "px");
+                (0, dom_1.toggleClass)(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
+            });
         };
         var visibilityChanged = function () {
             if (panel.api.isVisible) {
+                _this.positionCache.invalidate();
                 resize();
             }
             focusContainer.style.display = panel.api.isVisible ? '' : 'none';
@@ -201,6 +273,8 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
         this.map[panel.api.id].disposable.dispose();
         // and reset the disposable to the active reference-container
         this.map[panel.api.id].disposable = disposable;
+        // store the resize function for direct access
+        this.map[panel.api.id].resize = resize;
         return focusContainer;
     };
     return OverlayRenderContainer;