dockview-core 4.10.0 → 4.12.0

package/dist/cjs/dockview/dockviewGroupPanel.js

@@ -19,6 +19,7 @@ exports.DockviewGroupPanel = void 0;
 var dockviewGroupPanelModel_1 = require("./dockviewGroupPanelModel");
 var gridviewPanel_1 = require("../gridview/gridviewPanel");
 var dockviewGroupPanelApi_1 = require("../api/dockviewGroupPanelApi");
+// GridConstraintChangeEvent2 is not exported, so we'll type it manually
 var MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
 var MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
 var DockviewGroupPanel = /** @class */ (function (_super) {
@@ -27,20 +28,49 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
         var _a, _b, _c, _d, _e, _f;
         var _this = _super.call(this, 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 dockviewGroupPanelApi_1.DockviewGroupPanelApiImpl(id, accessor)) || this;
+        // 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_1.DockviewGroupPanelModel(_this.element, accessor, id, options, _this);
         _this.addDisposables(_this.model.onDidActivePanelChange(function (event) {
             _this.api._onDidActivePanelChange.fire(event);
+        }), _this.api.onDidConstraintsChangeInternal(function (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;
+            }
         }));
         return _this;
     }
     Object.defineProperty(DockviewGroupPanel.prototype, "minimumWidth", {
         get: function () {
             var _a;
+            // Check for explicitly set group constraint first
+            if (typeof this._explicitConstraints.minimumWidth === 'number') {
+                return this._explicitConstraints.minimumWidth;
+            }
             var activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
             if (typeof activePanelMinimumWidth === 'number') {
                 return activePanelMinimumWidth;
@@ -53,6 +83,10 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
     Object.defineProperty(DockviewGroupPanel.prototype, "minimumHeight", {
         get: function () {
             var _a;
+            // Check for explicitly set group constraint first
+            if (typeof this._explicitConstraints.minimumHeight === 'number') {
+                return this._explicitConstraints.minimumHeight;
+            }
             var activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
             if (typeof activePanelMinimumHeight === 'number') {
                 return activePanelMinimumHeight;
@@ -65,6 +99,10 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
     Object.defineProperty(DockviewGroupPanel.prototype, "maximumWidth", {
         get: function () {
             var _a;
+            // Check for explicitly set group constraint first
+            if (typeof this._explicitConstraints.maximumWidth === 'number') {
+                return this._explicitConstraints.maximumWidth;
+            }
             var activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
             if (typeof activePanelMaximumWidth === 'number') {
                 return activePanelMaximumWidth;
@@ -77,6 +115,10 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
     Object.defineProperty(DockviewGroupPanel.prototype, "maximumHeight", {
         get: function () {
             var _a;
+            // Check for explicitly set group constraint first
+            if (typeof this._explicitConstraints.maximumHeight === 'number') {
+                return this._explicitConstraints.maximumHeight;
+            }
             var activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
             if (typeof activePanelMaximumHeight === 'number') {
                 return activePanelMaximumHeight;

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -651,8 +651,11 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         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: panel,
             });

package/dist/cjs/dockview/dockviewPanel.d.ts

@@ -21,6 +21,7 @@ export interface IDockviewPanel extends IDisposable, IPanel {
     updateParentGroup(group: DockviewGroupPanel, options?: {
         skipSetActive?: boolean;
     }): void;
+    updateFromStateModel(state: GroupviewPanelState): void;
     init(params: IGroupPanelInitParameters): void;
     toJSON(): GroupviewPanelState;
     setTitle(title: string): void;
@@ -37,10 +38,10 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockv
     private _params?;
     private _title;
     private _renderer;
-    private readonly _minimumWidth;
-    private readonly _minimumHeight;
-    private readonly _maximumWidth;
-    private readonly _maximumHeight;
+    private _minimumWidth;
+    private _minimumHeight;
+    private _maximumWidth;
+    private _maximumHeight;
     get params(): Parameters | undefined;
     get title(): string | undefined;
     get group(): DockviewGroupPanel;
@@ -58,6 +59,7 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockv
     setTitle(title: string): void;
     setRenderer(renderer: DockviewPanelRenderer): void;
     update(event: PanelUpdateEvent): void;
+    updateFromStateModel(state: GroupviewPanelState): void;
     updateParentGroup(group: DockviewGroupPanel, options?: {
         skipSetActive?: boolean;
     }): void;

package/dist/cjs/dockview/dockviewPanel.js

@@ -200,6 +200,18 @@ var DockviewPanel = /** @class */ (function (_super) {
             params: this._params,
         });
     };
+    DockviewPanel.prototype.updateFromStateModel = function (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;
+    };
     DockviewPanel.prototype.updateParentGroup = function (group, options) {
         this._group = group;
         this.api.group = this._group;

package/dist/dockview-core.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 4.10.0
+ * @version 4.12.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -3781,8 +3781,8 @@ define(['exports'], (function (exports) { 'use strict';
       /**
        * 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.
@@ -5013,6 +5013,7 @@ define(['exports'], (function (exports) { 'use strict';
           }
           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;
@@ -5040,6 +5041,16 @@ define(['exports'], (function (exports) { 'use strict';
           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) {
@@ -6366,8 +6377,11 @@ define(['exports'], (function (exports) { 'use strict';
           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,
               });
@@ -6791,11 +6805,16 @@ define(['exports'], (function (exports) { 'use strict';
       }
   }
 
+  // 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;
@@ -6804,6 +6823,10 @@ define(['exports'], (function (exports) { 'use strict';
       }
       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;
@@ -6812,6 +6835,10 @@ define(['exports'], (function (exports) { 'use strict';
       }
       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;
@@ -6820,6 +6847,10 @@ define(['exports'], (function (exports) { 'use strict';
       }
       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;
@@ -6851,14 +6882,39 @@ define(['exports'], (function (exports) { 'use strict';
           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() {
@@ -7155,6 +7211,18 @@ define(['exports'], (function (exports) { 'use strict';
               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;
@@ -8941,7 +9009,7 @@ define(['exports'], (function (exports) { 'use strict';
                   : (_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'
@@ -9013,7 +9081,7 @@ define(['exports'], (function (exports) { 'use strict';
               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) {
@@ -9159,15 +9227,48 @@ define(['exports'], (function (exports) { 'use strict';
           }
           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
@@ -9176,7 +9277,7 @@ define(['exports'], (function (exports) { 'use strict';
               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,
@@ -9191,17 +9292,38 @@ define(['exports'], (function (exports) { 'use strict';
                        * 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], {
@@ -9240,7 +9362,9 @@ define(['exports'], (function (exports) { 'use strict';
                       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,
@@ -9326,11 +9450,11 @@ define(['exports'], (function (exports) { 'use strict';
       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,
@@ -9344,7 +9468,7 @@ define(['exports'], (function (exports) { 'use strict';
                       : 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);
               }
@@ -9355,7 +9479,7 @@ define(['exports'], (function (exports) { 'use strict';
                           : 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 {
@@ -9467,7 +9591,7 @@ define(['exports'], (function (exports) { 'use strict';
       }) {
           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,
@@ -9516,11 +9640,11 @@ define(['exports'], (function (exports) { 'use strict';
                       ? 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)) {
@@ -9529,7 +9653,7 @@ define(['exports'], (function (exports) { 'use strict';
                           ? (_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 {
@@ -9597,7 +9721,7 @@ define(['exports'], (function (exports) { 'use strict';
                   }
                   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);
@@ -9628,7 +9752,7 @@ define(['exports'], (function (exports) { 'use strict';
                   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)) {
@@ -9659,7 +9783,7 @@ define(['exports'], (function (exports) { 'use strict';
               ? (_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) {
               /**
@@ -9684,9 +9808,9 @@ define(['exports'], (function (exports) { 'use strict';
                   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 });
               }
@@ -9696,7 +9820,8 @@ define(['exports'], (function (exports) { 'use strict';
                   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,
                   });
               });
@@ -9751,7 +9876,9 @@ define(['exports'], (function (exports) { 'use strict';
                       }));
                       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),
@@ -9784,7 +9911,7 @@ define(['exports'], (function (exports) { 'use strict';
                       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);
@@ -9839,7 +9966,7 @@ define(['exports'], (function (exports) { 'use strict';
                   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;
@@ -9847,7 +9974,7 @@ define(['exports'], (function (exports) { 'use strict';
                   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);