dockview-react 4.10.0 → 4.12.0

package/dist/dockview-react.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 4.10.0
+ * @version 4.12.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -3782,8 +3782,8 @@ class DockviewApi {
     /**
      * 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.
@@ -5014,6 +5014,7 @@ class ContentContainer extends CompositeDisposable {
         }
         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;
@@ -5041,6 +5042,16 @@ class ContentContainer extends CompositeDisposable {
         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) {
@@ -6367,8 +6378,11 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         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,
             });
@@ -6792,11 +6806,16 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     }
 }
 
+// GridConstraintChangeEvent2 is not exported, so we'll type it manually
 const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
 const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
 class DockviewGroupPanel extends GridviewPanel {
     get minimumWidth() {
         var _a;
+        // Check for explicitly set group constraint first
+        if (typeof this._explicitConstraints.minimumWidth === 'number') {
+            return this._explicitConstraints.minimumWidth;
+        }
         const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
         if (typeof activePanelMinimumWidth === 'number') {
             return activePanelMinimumWidth;
@@ -6805,6 +6824,10 @@ class DockviewGroupPanel extends GridviewPanel {
     }
     get minimumHeight() {
         var _a;
+        // Check for explicitly set group constraint first
+        if (typeof this._explicitConstraints.minimumHeight === 'number') {
+            return this._explicitConstraints.minimumHeight;
+        }
         const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
         if (typeof activePanelMinimumHeight === 'number') {
             return activePanelMinimumHeight;
@@ -6813,6 +6836,10 @@ class DockviewGroupPanel extends GridviewPanel {
     }
     get maximumWidth() {
         var _a;
+        // Check for explicitly set group constraint first
+        if (typeof this._explicitConstraints.maximumWidth === 'number') {
+            return this._explicitConstraints.maximumWidth;
+        }
         const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
         if (typeof activePanelMaximumWidth === 'number') {
             return activePanelMaximumWidth;
@@ -6821,6 +6848,10 @@ class DockviewGroupPanel extends GridviewPanel {
     }
     get maximumHeight() {
         var _a;
+        // Check for explicitly set group constraint first
+        if (typeof this._explicitConstraints.maximumHeight === 'number') {
+            return this._explicitConstraints.maximumHeight;
+        }
         const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
         if (typeof activePanelMaximumHeight === 'number') {
             return activePanelMaximumHeight;
@@ -6852,14 +6883,39 @@ class DockviewGroupPanel extends GridviewPanel {
         var _a, _b, _c, _d, _e, _f;
         super(id, 'groupview_default', {
             minimumHeight: (_b = (_a = options.constraints) === null || _a === void 0 ? void 0 : _a.minimumHeight) !== null && _b !== void 0 ? _b : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
-            minimumWidth: (_d = (_c = options.constraints) === null || _c === void 0 ? void 0 : _c.maximumHeight) !== null && _d !== void 0 ? _d : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
+            minimumWidth: (_d = (_c = options.constraints) === null || _c === void 0 ? void 0 : _c.minimumWidth) !== null && _d !== void 0 ? _d : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
             maximumHeight: (_e = options.constraints) === null || _e === void 0 ? void 0 : _e.maximumHeight,
             maximumWidth: (_f = options.constraints) === null || _f === void 0 ? void 0 : _f.maximumWidth,
         }, new DockviewGroupPanelApiImpl(id, accessor));
+        // Track explicitly set constraints to override panel constraints
+        this._explicitConstraints = {};
         this.api.initialize(this); // cannot use 'this' after after 'super' call
         this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
         this.addDisposables(this.model.onDidActivePanelChange((event) => {
             this.api._onDidActivePanelChange.fire(event);
+        }), this.api.onDidConstraintsChangeInternal((event) => {
+            // Track explicitly set constraints to override panel constraints
+            // Extract numeric values from functions or values
+            if (event.minimumWidth !== undefined) {
+                this._explicitConstraints.minimumWidth = typeof event.minimumWidth === 'function'
+                    ? event.minimumWidth()
+                    : event.minimumWidth;
+            }
+            if (event.minimumHeight !== undefined) {
+                this._explicitConstraints.minimumHeight = typeof event.minimumHeight === 'function'
+                    ? event.minimumHeight()
+                    : event.minimumHeight;
+            }
+            if (event.maximumWidth !== undefined) {
+                this._explicitConstraints.maximumWidth = typeof event.maximumWidth === 'function'
+                    ? event.maximumWidth()
+                    : event.maximumWidth;
+            }
+            if (event.maximumHeight !== undefined) {
+                this._explicitConstraints.maximumHeight = typeof event.maximumHeight === 'function'
+                    ? event.maximumHeight()
+                    : event.maximumHeight;
+            }
         }));
     }
     focus() {
@@ -7156,6 +7212,18 @@ class DockviewPanel extends CompositeDisposable {
             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;
@@ -8919,7 +8987,7 @@ class DockviewComponent extends BaseGrid {
                 : (_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'
@@ -8991,7 +9059,7 @@ class DockviewComponent extends BaseGrid {
             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) {
@@ -9137,15 +9205,48 @@ class DockviewComponent extends BaseGrid {
         }
         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
@@ -9154,7 +9255,7 @@ class DockviewComponent extends BaseGrid {
             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,
@@ -9169,17 +9270,38 @@ class DockviewComponent extends BaseGrid {
                      * 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], {
@@ -9218,7 +9340,9 @@ class DockviewComponent extends BaseGrid {
                     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,
@@ -9304,11 +9428,11 @@ class DockviewComponent extends BaseGrid {
     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,
@@ -9322,7 +9446,7 @@ class DockviewComponent extends BaseGrid {
                     : 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);
             }
@@ -9333,7 +9457,7 @@ class DockviewComponent extends BaseGrid {
                         : 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 {
@@ -9445,7 +9569,7 @@ class DockviewComponent extends BaseGrid {
     }) {
         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,
@@ -9494,11 +9618,11 @@ class DockviewComponent extends BaseGrid {
                     ? 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)) {
@@ -9507,7 +9631,7 @@ class DockviewComponent extends BaseGrid {
                         ? (_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 {
@@ -9575,7 +9699,7 @@ class DockviewComponent extends BaseGrid {
                 }
                 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);
@@ -9606,7 +9730,7 @@ class DockviewComponent extends BaseGrid {
                 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)) {
@@ -9637,7 +9761,7 @@ class DockviewComponent extends BaseGrid {
             ? (_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) {
             /**
@@ -9662,9 +9786,9 @@ class DockviewComponent extends BaseGrid {
                 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 });
             }
@@ -9674,7 +9798,8 @@ class DockviewComponent extends BaseGrid {
                 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,
                 });
             });
@@ -9729,7 +9854,9 @@ class DockviewComponent extends BaseGrid {
                     }));
                     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),
@@ -9762,7 +9889,7 @@ class DockviewComponent extends BaseGrid {
                     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);
@@ -9817,7 +9944,7 @@ class DockviewComponent extends BaseGrid {
                 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;
@@ -9825,7 +9952,7 @@ class DockviewComponent extends BaseGrid {
                 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);