dockview-react 4.11.0 → 4.13.0

package/dist/dockview-react.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 4.11.0
+ * @version 4.13.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -1268,11 +1268,13 @@
                         document.removeEventListener('pointermove', onPointerMove);
                         document.removeEventListener('pointerup', end);
                         document.removeEventListener('pointercancel', end);
+                        document.removeEventListener('contextmenu', end);
                         this._onDidSashEnd.fire(undefined);
                     };
                     document.addEventListener('pointermove', onPointerMove);
                     document.addEventListener('pointerup', end);
                     document.addEventListener('pointercancel', end);
+                    document.addEventListener('contextmenu', end);
                 };
                 sash.addEventListener('pointerdown', onPointerStart);
                 const sashItem = {
@@ -3755,8 +3757,8 @@
         /**
          * Create a component from a serialized object.
          */
-        fromJSON(data) {
-            this.component.fromJSON(data);
+        fromJSON(data, options) {
+            this.component.fromJSON(data, options);
         }
         /**
          * Create a serialized object of the current component.
@@ -4987,6 +4989,7 @@
             }
             if (doRender) {
                 const focusTracker = trackFocus(container);
+                this.focusTracker = focusTracker;
                 const disposable = new CompositeDisposable();
                 disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
                 this.disposable.value = disposable;
@@ -5014,6 +5017,16 @@
             this.disposable.dispose();
             super.dispose();
         }
+        /**
+         * Refresh the focus tracker state to handle cases where focus state
+         * gets out of sync due to programmatic panel activation
+         */
+        refreshFocusState() {
+            var _a;
+            if ((_a = this.focusTracker) === null || _a === void 0 ? void 0 : _a.refreshState) {
+                this.focusTracker.refreshState();
+            }
+        }
     }
 
     function addGhostImage(dataTransfer, ghostElement, options) {
@@ -5123,7 +5136,7 @@
         }
     }
 
-    class WillShowOverlayLocationEvent {
+    class DockviewWillShowOverlayLocationEvent {
         get kind() {
             return this.options.kind;
         }
@@ -5471,7 +5484,7 @@
                     index: this._tabs.findIndex((x) => x.value === tab),
                 });
             }), tab.onWillShowOverlay((event) => {
-                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                     kind: 'tab',
                     panel: this.group.activePanel,
                     api: this.accessor.api,
@@ -5635,7 +5648,7 @@
                     index: this.tabs.size,
                 });
             }), this.voidContainer.onWillShowOverlay((event) => {
-                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                     kind: 'header_space',
                     panel: this.group.activePanel,
                     api: this.accessor.api,
@@ -6029,7 +6042,7 @@
             }), this.tabsContainer.onWillShowOverlay((event) => {
                 this._onWillShowOverlay.fire(event);
             }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
-                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                     kind: 'content',
                     panel: this.activePanel,
                     api: this._api,
@@ -6340,8 +6353,11 @@
             this._activePanel = panel;
             if (panel) {
                 this.tabsContainer.setActivePanel(panel);
+                this.contentContainer.openPanel(panel);
                 panel.layout(this._width, this._height);
                 this.updateMru(panel);
+                // Refresh focus state to handle programmatic activation without DOM focus change
+                this.contentContainer.refreshFocusState();
                 this._onDidActivePanelChange.fire({
                     panel,
                 });
@@ -6702,7 +6718,19 @@
             this.onDidLocationChange = this._onDidLocationChange.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange);
+            this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._onDidVisibilityChange.event((event) => {
+                // When becoming visible, apply any pending size change
+                if (event.isVisible && this._pendingSize) {
+                    super.setSize(this._pendingSize);
+                    this._pendingSize = undefined;
+                }
+            }));
+        }
+        setSize(event) {
+            // Always store the requested size
+            this._pendingSize = Object.assign({}, event);
+            // Apply the size change immediately
+            super.setSize(event);
         }
         close() {
             if (!this._group) {
@@ -7171,6 +7199,18 @@
                 params: this._params,
             });
         }
+        updateFromStateModel(state) {
+            var _a, _b, _c;
+            this._maximumHeight = state.maximumHeight;
+            this._minimumHeight = state.minimumHeight;
+            this._maximumWidth = state.maximumWidth;
+            this._minimumWidth = state.minimumWidth;
+            this.update({ params: (_a = state.params) !== null && _a !== void 0 ? _a : {} });
+            this.setTitle((_b = state.title) !== null && _b !== void 0 ? _b : this.id);
+            this.setRenderer((_c = state.renderer) !== null && _c !== void 0 ? _c : this.accessor.renderer);
+            // state.contentComponent;
+            // state.tabComponent;
+        }
         updateParentGroup(group, options) {
             this._group = group;
             this.api.group = this._group;
@@ -7642,13 +7682,16 @@
                     let right = undefined;
                     let width = undefined;
                     const moveTop = () => {
-                        top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                        // When dragging top handle, constrain top position to prevent oversizing
+                        const maxTop = startPosition.originalY +
                             startPosition.originalHeight >
                             containerRect.height
-                            ? this.getMinimumHeight(containerRect.height)
+                            ? Math.max(0, containerRect.height -
+                                Overlay.MINIMUM_HEIGHT)
                             : Math.max(0, startPosition.originalY +
                                 startPosition.originalHeight -
-                                Overlay.MINIMUM_HEIGHT));
+                                Overlay.MINIMUM_HEIGHT);
+                        top = clamp(y, 0, maxTop);
                         height =
                             startPosition.originalY +
                                 startPosition.originalHeight -
@@ -7659,22 +7702,27 @@
                         top =
                             startPosition.originalY -
                                 startPosition.originalHeight;
-                        height = clamp(y - top, top < 0 &&
-                            typeof this.options
-                                .minimumInViewportHeight === 'number'
+                        // When dragging bottom handle, constrain height to container height
+                        const minHeight = top < 0 &&
+                            typeof this.options.minimumInViewportHeight ===
+                                'number'
                             ? -top +
                                 this.options.minimumInViewportHeight
-                            : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                            : Overlay.MINIMUM_HEIGHT;
+                        const maxHeight = containerRect.height - Math.max(0, top);
+                        height = clamp(y - top, minHeight, maxHeight);
                         bottom = containerRect.height - top - height;
                     };
                     const moveLeft = () => {
-                        left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                        const maxLeft = startPosition.originalX +
                             startPosition.originalWidth >
                             containerRect.width
-                            ? this.getMinimumWidth(containerRect.width)
+                            ? Math.max(0, containerRect.width -
+                                Overlay.MINIMUM_WIDTH) // Prevent extending beyong right edge
                             : Math.max(0, startPosition.originalX +
                                 startPosition.originalWidth -
-                                Overlay.MINIMUM_WIDTH));
+                                Overlay.MINIMUM_WIDTH);
+                        left = clamp(x, 0, maxLeft); // min is 0 (Not -Infinity) to prevent dragging beyond left edge
                         width =
                             startPosition.originalX +
                                 startPosition.originalWidth -
@@ -7685,12 +7733,15 @@
                         left =
                             startPosition.originalX -
                                 startPosition.originalWidth;
-                        width = clamp(x - left, left < 0 &&
-                            typeof this.options
-                                .minimumInViewportWidth === 'number'
+                        // When dragging right handle, constrain width to container width
+                        const minWidth = left < 0 &&
+                            typeof this.options.minimumInViewportWidth ===
+                                'number'
                             ? -left +
                                 this.options.minimumInViewportWidth
-                            : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                            : Overlay.MINIMUM_WIDTH;
+                        const maxWidth = containerRect.width - Math.max(0, left);
+                        width = clamp(x - left, minWidth, maxWidth);
                         right = containerRect.width - left - width;
                     };
                     switch (direction) {
@@ -8520,7 +8571,7 @@
                     // option only available when no panels in primary grid
                     return;
                 }
-                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                     kind: 'edge',
                     panel: undefined,
                     api: this._api,
@@ -8934,7 +8985,7 @@
                     : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
             const el = group.element.querySelector('.dv-void-container');
             if (!el) {
-                throw new Error('failed to find drag handle');
+                throw new Error('dockview: failed to find drag handle');
             }
             overlay.setupDrag(el, {
                 inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
@@ -9006,7 +9057,7 @@
                 case 'right':
                     return this.createGroupAtLocation([this.gridview.length], undefined, options); // insert into last position
                 default:
-                    throw new Error(`unsupported position ${position}`);
+                    throw new Error(`dockview: unsupported position ${position}`);
             }
         }
         updateOptions(options) {
@@ -9152,15 +9203,48 @@
             }
             return result;
         }
-        fromJSON(data) {
+        fromJSON(data, options) {
             var _a, _b;
+            const existingPanels = new Map();
+            let tempGroup;
+            if (options === null || options === void 0 ? void 0 : options.reuseExistingPanels) {
+                /**
+                 * What are we doing here?
+                 *
+                 * 1. Create a temporary group to hold any panels that currently exist and that also exist in the new layout
+                 * 2. Remove that temporary group from the group mapping so that it doesn't get cleared when we clear the layout
+                 */
+                tempGroup = this.createGroup();
+                this._groups.delete(tempGroup.api.id);
+                const newPanels = Object.keys(data.panels);
+                for (const panel of this.panels) {
+                    if (newPanels.includes(panel.api.id)) {
+                        existingPanels.set(panel.api.id, panel);
+                    }
+                }
+                this.movingLock(() => {
+                    Array.from(existingPanels.values()).forEach((panel) => {
+                        this.moveGroupOrPanel({
+                            from: {
+                                groupId: panel.api.group.api.id,
+                                panelId: panel.api.id,
+                            },
+                            to: {
+                                group: tempGroup,
+                                position: 'center',
+                            },
+                            keepEmptyGroups: true,
+                        });
+                    });
+                });
+            }
             this.clear();
             if (typeof data !== 'object' || data === null) {
-                throw new Error('serialized layout must be a non-null object');
+                throw new Error('dockview: serialized layout must be a non-null object');
             }
             const { grid, panels, activeGroup } = data;
             if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
-                throw new Error('root must be of type branch');
+                throw new Error('dockview: root must be of type branch');
             }
             try {
                 // take note of the existing dimensions
@@ -9169,7 +9253,7 @@
                 const createGroupFromSerializedState = (data) => {
                     const { id, locked, hideHeader, views, activeView } = data;
                     if (typeof id !== 'string') {
-                        throw new Error('group id must be of type string');
+                        throw new Error('dockview: group id must be of type string');
                     }
                     const group = this.createGroup({
                         id,
@@ -9184,17 +9268,38 @@
                          * In running this section first we avoid firing lots of 'add' events in the event of a failure
                          * due to a corruption of input data.
                          */
-                        const panel = this._deserializer.fromJSON(panels[child], group);
-                        createdPanels.push(panel);
+                        const existingPanel = existingPanels.get(child);
+                        if (tempGroup && existingPanel) {
+                            this.movingLock(() => {
+                                tempGroup.model.removePanel(existingPanel);
+                            });
+                            createdPanels.push(existingPanel);
+                            existingPanel.updateFromStateModel(panels[child]);
+                        }
+                        else {
+                            const panel = this._deserializer.fromJSON(panels[child], group);
+                            createdPanels.push(panel);
+                        }
                     }
                     for (let i = 0; i < views.length; i++) {
                         const panel = createdPanels[i];
                         const isActive = typeof activeView === 'string' &&
                             activeView === panel.id;
-                        group.model.openPanel(panel, {
-                            skipSetActive: !isActive,
-                            skipSetGroupActive: true,
-                        });
+                        const hasExisting = existingPanels.has(panel.api.id);
+                        if (hasExisting) {
+                            this.movingLock(() => {
+                                group.model.openPanel(panel, {
+                                    skipSetActive: !isActive,
+                                    skipSetGroupActive: true,
+                                });
+                            });
+                        }
+                        else {
+                            group.model.openPanel(panel, {
+                                skipSetActive: !isActive,
+                                skipSetGroupActive: true,
+                            });
+                        }
                     }
                     if (!group.activePanel && group.panels.length > 0) {
                         group.model.openPanel(group.panels[group.panels.length - 1], {
@@ -9233,7 +9338,9 @@
                         setTimeout(() => {
                             this.addPopoutGroup(group, {
                                 position: position !== null && position !== void 0 ? position : undefined,
-                                overridePopoutGroup: gridReferenceGroup ? group : undefined,
+                                overridePopoutGroup: gridReferenceGroup
+                                    ? group
+                                    : undefined,
                                 referenceGroup: gridReferenceGroup
                                     ? this.getPanel(gridReferenceGroup)
                                     : undefined,
@@ -9319,11 +9426,11 @@
         addPanel(options) {
             var _a, _b;
             if (this.panels.find((_) => _.id === options.id)) {
-                throw new Error(`panel with id ${options.id} already exists`);
+                throw new Error(`dockview: panel with id ${options.id} already exists`);
             }
             let referenceGroup;
             if (options.position && options.floating) {
-                throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+                throw new Error('dockview: you can only provide one of: position, floating as arguments to .addPanel(...)');
             }
             const initial = {
                 width: options.initialWidth,
@@ -9337,7 +9444,7 @@
                         : options.position.referencePanel;
                     index = options.position.index;
                     if (!referencePanel) {
-                        throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
+                        throw new Error(`dockview: referencePanel '${options.position.referencePanel}' does not exist`);
                     }
                     referenceGroup = this.findGroup(referencePanel);
                 }
@@ -9348,7 +9455,7 @@
                             : options.position.referenceGroup;
                     index = options.position.index;
                     if (!referenceGroup) {
-                        throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
+                        throw new Error(`dockview: referenceGroup '${options.position.referenceGroup}' does not exist`);
                     }
                 }
                 else {
@@ -9460,7 +9567,7 @@
         }) {
             const group = panel.group;
             if (!group) {
-                throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
+                throw new Error(`dockview: cannot remove panel ${panel.id}. it's missing a group.`);
             }
             group.model.removePanel(panel, {
                 skipSetActiveGroup: options.skipSetActiveGroup,
@@ -9509,11 +9616,11 @@
                         ? this.panels.find((panel) => panel.id === options.referencePanel)
                         : options.referencePanel;
                     if (!referencePanel) {
-                        throw new Error(`reference panel ${options.referencePanel} does not exist`);
+                        throw new Error(`dockview: reference panel ${options.referencePanel} does not exist`);
                     }
                     referenceGroup = this.findGroup(referencePanel);
                     if (!referenceGroup) {
-                        throw new Error(`reference group for reference panel ${options.referencePanel} does not exist`);
+                        throw new Error(`dockview: reference group for reference panel ${options.referencePanel} does not exist`);
                     }
                 }
                 else if (isGroupOptionsWithGroup(options)) {
@@ -9522,7 +9629,7 @@
                             ? (_a = this._groups.get(options.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                             : options.referenceGroup;
                     if (!referenceGroup) {
-                        throw new Error(`reference group ${options.referenceGroup} does not exist`);
+                        throw new Error(`dockview: reference group ${options.referenceGroup} does not exist`);
                     }
                 }
                 else {
@@ -9590,7 +9697,7 @@
                     }
                     return floatingGroup.group;
                 }
-                throw new Error('failed to find floating group');
+                throw new Error('dockview: failed to find floating group');
             }
             if (group.api.location.type === 'popout') {
                 const selectedGroup = this._popoutGroups.find((_) => _.popoutGroup === group);
@@ -9621,7 +9728,7 @@
                     this.updateWatermark();
                     return selectedGroup.popoutGroup;
                 }
-                throw new Error('failed to find popout group');
+                throw new Error('dockview: failed to find popout group');
             }
             const re = super.doRemoveGroup(group, options);
             if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
@@ -9652,7 +9759,7 @@
                 ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
                 : undefined;
             if (!sourceGroup) {
-                throw new Error(`Failed to find group id ${sourceGroupId}`);
+                throw new Error(`dockview: Failed to find group id ${sourceGroupId}`);
             }
             if (sourceItemId === undefined) {
                 /**
@@ -9677,9 +9784,9 @@
                     skipSetActiveGroup: true,
                 }));
                 if (!removedPanel) {
-                    throw new Error(`No panel with id ${sourceItemId}`);
+                    throw new Error(`dockview: No panel with id ${sourceItemId}`);
                 }
-                if (sourceGroup.model.size === 0) {
+                if (!options.keepEmptyGroups && sourceGroup.model.size === 0) {
                     // remove the group and do not set a new group as active
                     this.doRemoveGroup(sourceGroup, { skipActive: true });
                 }
@@ -9689,7 +9796,8 @@
                     var _a;
                     return destinationGroup.model.openPanel(removedPanel, {
                         index: destinationIndex,
-                        skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) && !isDestinationGroupEmpty,
+                        skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) &&
+                            !isDestinationGroupEmpty,
                         skipSetGroupActive: true,
                     });
                 });
@@ -9700,6 +9808,13 @@
                     panel: removedPanel,
                     from: sourceGroup,
                 });
+                /**
+                * Update overlay positions after DOM layout completes to prevent 0×0 dimensions.
+                * With defaultRenderer="always" this results in panel content not showing after move operations.
+                */
+                requestAnimationFrame(() => {
+                    this.overlayRenderContainer.updateAllPositions();
+                });
             }
             else {
                 /**
@@ -9744,7 +9859,9 @@
                         }));
                         this.doRemoveGroup(sourceGroup, { skipActive: true });
                         const newGroup = this.createGroupAtLocation(targetLocation);
-                        this.movingLock(() => newGroup.model.openPanel(removedPanel));
+                        this.movingLock(() => newGroup.model.openPanel(removedPanel, {
+                            skipSetActive: true,
+                        }));
                         this.doSetGroupAndPanelActive(newGroup);
                         this._onDidMovePanel.fire({
                             panel: this.getGroupPanel(sourceItemId),
@@ -9777,7 +9894,7 @@
                         skipSetActiveGroup: true,
                     }));
                     if (!removedPanel) {
-                        throw new Error(`No panel with id ${sourceItemId}`);
+                        throw new Error(`dockview: No panel with id ${sourceItemId}`);
                     }
                     const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                     const group = this.createGroupAtLocation(dropLocation);
@@ -9832,7 +9949,7 @@
                     case 'floating': {
                         const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
                         if (!selectedFloatingGroup) {
-                            throw new Error('failed to find floating group');
+                            throw new Error('dockview: failed to find floating group');
                         }
                         selectedFloatingGroup.dispose();
                         break;
@@ -9840,7 +9957,7 @@
                     case 'popout': {
                         const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
                         if (!selectedPopoutGroup) {
-                            throw new Error('failed to find popout group');
+                            throw new Error('dockview: failed to find popout group');
                         }
                         // Remove from popout groups list to prevent automatic restoration
                         const index = this._popoutGroups.indexOf(selectedPopoutGroup);
@@ -12009,6 +12126,7 @@
     exports.DockviewReact = DockviewReact;
     exports.DockviewUnhandledDragOverEvent = DockviewUnhandledDragOverEvent;
     exports.DockviewWillDropEvent = DockviewWillDropEvent;
+    exports.DockviewWillShowOverlayLocationEvent = DockviewWillShowOverlayLocationEvent;
     exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;