dockview-react 4.6.2 → 4.7.1

package/dist/dockview-react.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 4.6.2
+ * @version 4.7.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2139,6 +2139,19 @@
         }
         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);
@@ -2489,6 +2502,29 @@
                 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
@@ -3776,9 +3812,10 @@
     }
 
     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();
@@ -3786,12 +3823,15 @@
             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;
                 }
@@ -3880,6 +3920,48 @@
         }
     }
 
+    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;
+    }
     class WillShowOverlayEvent extends DockviewEvent {
         get nativeEvent() {
             return this.options.nativeEvent;
@@ -4161,21 +4243,11 @@
                     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);
@@ -4227,10 +4299,7 @@
                 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);
@@ -4962,8 +5031,8 @@
     }
 
     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;
@@ -4999,7 +5068,7 @@
             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' } },
@@ -5016,7 +5085,7 @@
                 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);
@@ -5028,7 +5097,7 @@
                     });
                 }
                 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);
@@ -5047,6 +5116,7 @@
         }
         updateDragAndDropState() {
             this._element.draggable = !this.accessor.options.disableDnd;
+            this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
         }
         dispose() {
             super.dispose();
@@ -5088,8 +5158,8 @@
     }
 
     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();
@@ -5158,7 +5228,7 @@
             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) => {
@@ -5171,7 +5241,7 @@
                 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);
@@ -5180,6 +5250,7 @@
         updateDragAndDropState() {
             this._element.draggable = !this.accessor.options.disableDnd;
             toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
+            this.handler.setDisabled(!!this.accessor.options.disableDnd);
         }
     }
 
@@ -7673,7 +7744,36 @@
 
     const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
     const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+    const DESERIALIZATION_POPOUT_DELAY_MS = 100;
 
+    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;
@@ -7686,6 +7786,8 @@
             this.accessor = accessor;
             this.map = {};
             this._disposed = false;
+            this.positionCache = new PositionCache();
+            this.pendingUpdates = new Set();
             this.addDisposables(exports.DockviewDisposable.from(() => {
                 for (const value of Object.values(this.map)) {
                     value.disposable.dispose();
@@ -7694,6 +7796,19 @@
                 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];
@@ -7724,17 +7839,33 @@
                 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';
@@ -7829,6 +7960,8 @@
             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;
         }
     }
@@ -8198,6 +8331,13 @@
         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, {
@@ -8246,6 +8386,7 @@
             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();
@@ -8795,6 +8936,7 @@
             this.updateWatermark();
         }
         orthogonalize(position, options) {
+            this.gridview.normalize();
             switch (position) {
                 case 'top':
                 case 'bottom':
@@ -9038,18 +9180,30 @@
                     });
                 }
                 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();
                 }
@@ -9096,6 +9250,10 @@
                 throw err;
             }
             this.updateWatermark();
+            // Force position updates for always visible panels after DOM layout is complete
+            requestAnimationFrame(() => {
+                this.overlayRenderContainer.updateAllPositions();
+            });
             this._onDidLayoutFromJSON.fire();
         }
         clear() {
@@ -9483,11 +9641,13 @@
                     // 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,
                     });
                 });
@@ -9596,7 +9756,6 @@
             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,
                 })));
@@ -9606,22 +9765,21 @@
                 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 {
@@ -9651,20 +9809,26 @@
                         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;
@@ -9732,8 +9896,12 @@
             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) {