dockview-core 4.6.2 → 4.7.1

package/dist/esm/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/esm/constants.js

@@ -1,2 +1,3 @@
 export const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+export const DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/esm/dnd/abstractDragHandler.d.ts

@@ -1,11 +1,13 @@
 import { CompositeDisposable, IDisposable } from '../lifecycle';
 export declare abstract class DragHandler extends CompositeDisposable {
     protected readonly el: HTMLElement;
+    private disabled?;
     private readonly dataDisposable;
     private readonly pointerEventsDisposable;
     private readonly _onDragStart;
     readonly onDragStart: import("../events").Event<DragEvent>;
-    constructor(el: HTMLElement);
+    constructor(el: HTMLElement, disabled?: boolean | undefined);
+    setDisabled(disabled: boolean): void;
     abstract getData(event: DragEvent): IDisposable;
     protected isCancelled(_event: DragEvent): boolean;
     private configure;

package/dist/esm/dnd/abstractDragHandler.js

@@ -2,9 +2,10 @@ import { disableIframePointEvents } from '../dom';
 import { addDisposableListener, Emitter } from '../events';
 import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 export class DragHandler extends CompositeDisposable {
-    constructor(el) {
+    constructor(el, disabled) {
         super();
         this.el = el;
+        this.disabled = disabled;
         this.dataDisposable = new MutableDisposable();
         this.pointerEventsDisposable = new MutableDisposable();
         this._onDragStart = new Emitter();
@@ -12,12 +13,15 @@ export class DragHandler extends CompositeDisposable {
         this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
         this.configure();
     }
+    setDisabled(disabled) {
+        this.disabled = disabled;
+    }
     isCancelled(_event) {
         return false;
     }
     configure() {
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            if (event.defaultPrevented || this.isCancelled(event)) {
+            if (event.defaultPrevented || this.isCancelled(event) || this.disabled) {
                 event.preventDefault();
                 return;
             }

package/dist/esm/dnd/droptarget.js

@@ -3,6 +3,48 @@ import { DockviewEvent, Emitter } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { clamp } from '../math';
+function setGPUOptimizedBounds(element, bounds) {
+    const { top, left, width, height } = bounds;
+    const topPx = `${Math.round(top)}px`;
+    const leftPx = `${Math.round(left)}px`;
+    const widthPx = `${Math.round(width)}px`;
+    const heightPx = `${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) {
+    const { top, left, width, height } = bounds;
+    // 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) {
+    const { top, left, width, height } = bounds;
+    const topPx = `${Math.round(top)}px`;
+    const leftPx = `${Math.round(left)}px`;
+    const widthPx = `${Math.round(width)}px`;
+    const heightPx = `${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;
+}
 export class WillShowOverlayEvent extends DockviewEvent {
     get nativeEvent() {
         return this.options.nativeEvent;
@@ -286,21 +328,11 @@ export class Droptarget extends CompositeDisposable {
                 box.left = rootLeft + width - 4;
                 box.width = 4;
             }
-            const topPx = `${Math.round(box.top)}px`;
-            const leftPx = `${Math.round(box.left)}px`;
-            const widthPx = `${Math.round(box.width)}px`;
-            const heightPx = `${Math.round(box.height)}px`;
-            if (overlay.style.top === topPx &&
-                overlay.style.left === leftPx &&
-                overlay.style.width === widthPx &&
-                overlay.style.height === heightPx) {
+            // Use GPU-optimized bounds checking and setting
+            if (!checkBoundsChanged(overlay, box)) {
                 return;
             }
-            overlay.style.top = topPx;
-            overlay.style.left = leftPx;
-            overlay.style.width = widthPx;
-            overlay.style.height = heightPx;
-            overlay.style.visibility = 'visible';
+            setGPUOptimizedBounds(overlay, box);
             overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
             toggleClass(overlay, 'dv-drop-target-left', isLeft);
             toggleClass(overlay, 'dv-drop-target-right', isRight);
@@ -352,10 +384,7 @@ export class Droptarget extends CompositeDisposable {
             box.top = `${100 * (1 - size)}%`;
             box.height = `${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);
         toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
         toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);

package/dist/esm/dnd/groupDragHandler.d.ts

@@ -6,7 +6,7 @@ export declare class GroupDragHandler extends DragHandler {
     private readonly accessor;
     private readonly group;
     private readonly panelTransfer;
-    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel);
+    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel, disabled?: boolean);
     isCancelled(_event: DragEvent): boolean;
     getData(dragEvent: DragEvent): IDisposable;
 }

package/dist/esm/dnd/groupDragHandler.js

@@ -4,8 +4,8 @@ import { DragHandler } from './abstractDragHandler';
 import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer';
 import { addGhostImage } from './ghost';
 export class GroupDragHandler extends DragHandler {
-    constructor(element, accessor, group) {
-        super(element);
+    constructor(element, accessor, group, disabled) {
+        super(element, disabled);
         this.accessor = accessor;
         this.group = group;
         this.panelTransfer = LocalSelectionTransfer.getInstance();

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

@@ -12,6 +12,7 @@ export declare class Tab extends CompositeDisposable {
     private readonly _element;
     private readonly dropTarget;
     private content;
+    private readonly dragHandler;
     private readonly _onPointDown;
     readonly onPointerDown: Event<MouseEvent>;
     private readonly _onDropped;

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

@@ -6,8 +6,8 @@ import { Droptarget, } from '../../../dnd/droptarget';
 import { DragHandler } from '../../../dnd/abstractDragHandler';
 import { addGhostImage } from '../../../dnd/ghost';
 class TabDragHandler extends DragHandler {
-    constructor(element, accessor, group, panel) {
-        super(element);
+    constructor(element, accessor, group, panel, disabled) {
+        super(element, disabled);
         this.accessor = accessor;
         this.group = group;
         this.panel = panel;
@@ -43,7 +43,7 @@ export class Tab extends CompositeDisposable {
         this._element.tabIndex = 0;
         this._element.draggable = !this.accessor.options.disableDnd;
         toggleClass(this.element, 'dv-inactive-tab', true);
-        const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
+        this.dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel, !!this.accessor.options.disableDnd);
         this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['left', 'right'],
             overlayModel: { activationSize: { value: 50, type: 'percentage' } },
@@ -60,7 +60,7 @@ export class Tab extends CompositeDisposable {
             getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
-        this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+        this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, this.dragHandler.onDragStart((event) => {
             if (event.dataTransfer) {
                 const style = getComputedStyle(this.element);
                 const newNode = this.element.cloneNode(true);
@@ -72,7 +72,7 @@ export class Tab extends CompositeDisposable {
                 });
             }
             this._onDragStart.fire(event);
-        }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
+        }), this.dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
             this._onPointDown.fire(event);
         }), this.dropTarget.onDrop((event) => {
             this._onDropped.fire(event);
@@ -91,6 +91,7 @@ export class Tab extends CompositeDisposable {
     }
     updateDragAndDropState() {
         this._element.draggable = !this.accessor.options.disableDnd;
+        this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
     }
     dispose() {
         super.dispose();

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

@@ -8,6 +8,7 @@ export declare class VoidContainer extends CompositeDisposable {
     private readonly group;
     private readonly _element;
     private readonly dropTarget;
+    private readonly handler;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;

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

@@ -23,7 +23,7 @@ export class VoidContainer extends CompositeDisposable {
         this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
             this.accessor.doSetGroupActive(this.group);
         }));
-        const handler = new GroupDragHandler(this._element, accessor, group);
+        this.handler = new GroupDragHandler(this._element, accessor, group, !!this.accessor.options.disableDnd);
         this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
@@ -36,7 +36,7 @@ export class VoidContainer extends CompositeDisposable {
             getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
-        this.addDisposables(handler, handler.onDragStart((event) => {
+        this.addDisposables(this.handler, this.handler.onDragStart((event) => {
             this._onDragStart.fire(event);
         }), this.dropTarget.onDrop((event) => {
             this._onDrop.fire(event);
@@ -45,5 +45,6 @@ export class VoidContainer extends CompositeDisposable {
     updateDragAndDropState() {
         this._element.draggable = !this.accessor.options.disableDnd;
         toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
+        this.handler.setDisabled(!!this.accessor.options.disableDnd);
     }
 }

package/dist/esm/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/esm/dockview/dockviewComponent.js

@@ -19,7 +19,7 @@ import { getPanelData } from '../dnd/dataTransfer';
 import { Overlay } from '../overlay/overlay';
 import { addTestId, Classnames, getDockviewTheme, onDidWindowResizeEnd, onDidWindowMoveEnd, toggleClass, watchElementResize, } from '../dom';
 import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
-import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
+import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, DESERIALIZATION_POPOUT_DELAY_MS, } from '../constants';
 import { OverlayRenderContainer, } from '../overlay/overlayRenderContainer';
 import { PopoutWindow } from '../popoutWindow';
 import { StrictEventsSequencing } from './strictEventsSequencing';
@@ -74,6 +74,13 @@ export class DockviewComponent extends BaseGrid {
     get floatingGroups() {
         return this._floatingGroups;
     }
+    /**
+     * 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() {
+        return this._popoutRestorationPromise;
+    }
     constructor(container, options) {
         var _a, _b, _c;
         super(container, {
@@ -122,6 +129,7 @@ export class DockviewComponent extends BaseGrid {
         this.onDidMaximizedGroupChange = this._onDidMaximizedGroupChange.event;
         this._floatingGroups = [];
         this._popoutGroups = [];
+        this._popoutRestorationPromise = Promise.resolve();
         this._onDidRemoveGroup = new Emitter();
         this.onDidRemoveGroup = this._onDidRemoveGroup.event;
         this._onDidAddGroup = new Emitter();
@@ -671,6 +679,7 @@ export class DockviewComponent extends BaseGrid {
         this.updateWatermark();
     }
     orthogonalize(position, options) {
+        this.gridview.normalize();
         switch (position) {
             case 'top':
             case 'bottom':
@@ -916,18 +925,30 @@ export class DockviewComponent extends BaseGrid {
                 });
             }
             const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
-            for (const serializedPopoutGroup of serializedPopoutGroups) {
+            // Create a promise that resolves when all popout groups are created
+            const popoutPromises = [];
+            // Queue popup group creation with delays to avoid browser blocking
+            serializedPopoutGroups.forEach((serializedPopoutGroup, index) => {
                 const { data, position, gridReferenceGroup, url } = serializedPopoutGroup;
                 const group = createGroupFromSerializedState(data);
-                this.addPopoutGroup(group, {
-                    position: position !== null && position !== void 0 ? position : undefined,
-                    overridePopoutGroup: gridReferenceGroup ? group : undefined,
-                    referenceGroup: gridReferenceGroup
-                        ? this.getPanel(gridReferenceGroup)
-                        : undefined,
-                    popoutUrl: url,
+                // Add a small delay for each popup after the first to avoid browser popup blocking
+                const popoutPromise = new Promise((resolve) => {
+                    setTimeout(() => {
+                        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 * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
                 });
-            }
+                popoutPromises.push(popoutPromise);
+            });
+            // Store the promise for tests to wait on
+            this._popoutRestorationPromise = Promise.all(popoutPromises).then(() => void 0);
             for (const floatingGroup of this._floatingGroups) {
                 floatingGroup.overlay.setBounds();
             }
@@ -974,6 +995,10 @@ export class DockviewComponent extends BaseGrid {
             throw err;
         }
         this.updateWatermark();
+        // Force position updates for always visible panels after DOM layout is complete
+        requestAnimationFrame(() => {
+            this.overlayRenderContainer.updateAllPositions();
+        });
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
@@ -1361,11 +1386,13 @@ export class DockviewComponent extends BaseGrid {
                 // 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
+            const isDestinationGroupEmpty = destinationGroup.model.size === 0;
             this.movingLock(() => {
                 var _a;
                 return destinationGroup.model.openPanel(removedPanel, {
                     index: destinationIndex,
-                    skipSetActive: (_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false,
+                    skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) && !isDestinationGroupEmpty,
                     skipSetGroupActive: true,
                 });
             });
@@ -1474,7 +1501,6 @@ export class DockviewComponent extends BaseGrid {
         const target = options.to.position;
         if (target === 'center') {
             const activePanel = from.activePanel;
-            const targetActivePanel = to.activePanel;
             const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
                 skipSetActive: true,
             })));
@@ -1484,22 +1510,21 @@ export class DockviewComponent extends BaseGrid {
             this.movingLock(() => {
                 for (const panel of panels) {
                     to.model.openPanel(panel, {
-                        skipSetActive: true, // Always skip setting panels active during move
+                        skipSetActive: panel !== activePanel,
                         skipSetGroupActive: true,
                     });
                 }
             });
-            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 {
@@ -1529,20 +1554,26 @@ export class DockviewComponent extends BaseGrid {
                     if (selectedPopoutGroup.referenceGroup) {
                         const 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;
@@ -1610,8 +1641,12 @@ export class DockviewComponent extends BaseGrid {
         from.panels.forEach((panel) => {
             this._onDidMovePanel.fire({ panel, 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
+            const targetGroup = to !== null && to !== void 0 ? to : from;
+            this.doSetGroupAndPanelActive(targetGroup);
         }
     }
     doSetGroupActive(group) {

package/dist/esm/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/esm/gridview/gridview.js

@@ -17,6 +17,19 @@ function findLeaf(candiateNode, last) {
     }
     throw new Error('invalid node');
 }
+function cloneNode(node, size, orthogonalSize) {
+    if (node instanceof BranchNode) {
+        const result = new BranchNode(node.orientation, node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
+        for (let i = node.children.length - 1; i >= 0; i--) {
+            const child = node.children[i];
+            result.addChild(cloneNode(child, child.size, child.orthogonalSize), child.size, 0, true);
+        }
+        return result;
+    }
+    else {
+        return new LeafNode(node.view, node.orientation, orthogonalSize);
+    }
+}
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof BranchNode) {
         const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
@@ -367,6 +380,29 @@ export class Gridview {
             this._onDidChange.fire(e);
         });
     }
+    normalize() {
+        if (!this._root) {
+            return;
+        }
+        if (this._root.children.length !== 1) {
+            return;
+        }
+        const oldRoot = this.root;
+        // can remove one level of redundant branching if there is only a single child
+        const childReference = oldRoot.children[0];
+        if (childReference instanceof LeafNode) {
+            return;
+        }
+        oldRoot.element.remove();
+        const 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((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/esm/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/esm/overlay/overlayRenderContainer.js

@@ -1,6 +1,34 @@
 import { DragAndDropObserver } from '../dnd/dnd';
 import { getDomNodePagePosition, toggleClass } from '../dom';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../lifecycle';
+class PositionCache {
+    constructor() {
+        this.cache = new Map();
+        this.currentFrameId = 0;
+        this.rafId = null;
+    }
+    getPosition(element) {
+        const cached = this.cache.get(element);
+        if (cached && cached.frameId === this.currentFrameId) {
+            return cached.rect;
+        }
+        this.scheduleFrameUpdate();
+        const rect = getDomNodePagePosition(element);
+        this.cache.set(element, { rect, frameId: this.currentFrameId });
+        return rect;
+    }
+    invalidate() {
+        this.currentFrameId++;
+    }
+    scheduleFrameUpdate() {
+        if (this.rafId)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            this.currentFrameId++;
+            this.rafId = null;
+        });
+    }
+}
 function createFocusableElement() {
     const element = document.createElement('div');
     element.tabIndex = -1;
@@ -13,6 +41,8 @@ export class OverlayRenderContainer extends CompositeDisposable {
         this.accessor = accessor;
         this.map = {};
         this._disposed = false;
+        this.positionCache = new PositionCache();
+        this.pendingUpdates = new Set();
         this.addDisposables(Disposable.from(() => {
             for (const value of Object.values(this.map)) {
                 value.disposable.dispose();
@@ -21,6 +51,19 @@ export class OverlayRenderContainer extends CompositeDisposable {
             this._disposed = true;
         }));
     }
+    updateAllPositions() {
+        if (this._disposed) {
+            return;
+        }
+        // Invalidate position cache to force recalculation
+        this.positionCache.invalidate();
+        // Call resize function directly for all visible panels
+        for (const entry of Object.values(this.map)) {
+            if (entry.panel.api.isVisible && entry.resize) {
+                entry.resize();
+            }
+        }
+    }
     detatch(panel) {
         if (this.map[panel.api.id]) {
             const { disposable, destroy } = this.map[panel.api.id];
@@ -51,17 +94,33 @@ export class OverlayRenderContainer extends CompositeDisposable {
             this.element.appendChild(focusContainer);
         }
         const resize = () => {
-            // TODO propagate position to avoid getDomNodePagePosition calls, possible performance bottleneck?
-            const box = getDomNodePagePosition(referenceContainer.element);
-            const box2 = getDomNodePagePosition(this.element);
-            focusContainer.style.left = `${box.left - box2.left}px`;
-            focusContainer.style.top = `${box.top - box2.top}px`;
-            focusContainer.style.width = `${box.width}px`;
-            focusContainer.style.height = `${box.height}px`;
-            toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
+            const panelId = panel.api.id;
+            if (this.pendingUpdates.has(panelId)) {
+                return; // Update already scheduled
+            }
+            this.pendingUpdates.add(panelId);
+            requestAnimationFrame(() => {
+                this.pendingUpdates.delete(panelId);
+                if (this.isDisposed || !this.map[panelId]) {
+                    return;
+                }
+                const box = this.positionCache.getPosition(referenceContainer.element);
+                const box2 = this.positionCache.getPosition(this.element);
+                // Use traditional positioning for overlay containers
+                const left = box.left - box2.left;
+                const top = box.top - box2.top;
+                const width = box.width;
+                const height = box.height;
+                focusContainer.style.left = `${left}px`;
+                focusContainer.style.top = `${top}px`;
+                focusContainer.style.width = `${width}px`;
+                focusContainer.style.height = `${height}px`;
+                toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
+            });
         };
         const visibilityChanged = () => {
             if (panel.api.isVisible) {
+                this.positionCache.invalidate();
                 resize();
             }
             focusContainer.style.display = panel.api.isVisible ? '' : 'none';
@@ -156,6 +215,8 @@ export class OverlayRenderContainer extends CompositeDisposable {
         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;
     }
 }