dockview-core 6.0.3 → 6.0.6

package/dist/cjs/dockview/components/titlebar/tabs.js

@@ -725,10 +725,12 @@ var Tabs = /** @class */ (function (_super) {
         var index = this.indexOf(id);
         var tabToRemove = this._tabs.splice(index, 1)[0];
         this._tabMap.delete(id);
-        var value = tabToRemove.value, disposable = tabToRemove.disposable;
-        disposable.dispose();
-        value.dispose();
-        value.element.remove();
+        if (tabToRemove) {
+            var value = tabToRemove.value, disposable = tabToRemove.disposable;
+            disposable.dispose();
+            value.dispose();
+            value.element.remove();
+        }
         // If a non-source tab was removed during active drag, refresh positions
         if (this._animState) {
             this._animState.tabPositions = this.snapshotTabPositions();
@@ -1605,6 +1607,14 @@ var Tabs = /** @class */ (function (_super) {
             // handles panel transfer and tab group recreation.
             // Use the REAL tab group ID from transfer data, not the
             // potentially stale one from _animState.
+            //
+            // Clear any inline gap margin / shifting class applied to
+            // destination tabs during dragover. Cross-group moves don't
+            // run the FLIP path, and `moveGroupOrPanel` only inserts new
+            // panels — it doesn't recreate existing destination tabs, so
+            // their inline `margin-left` would otherwise persist as a
+            // visible gap (issue #1243).
+            this.resetTabTransforms();
             this.accessor.moveGroupOrPanel({
                 from: {
                     groupId: data.groupId,

package/dist/cjs/dockview/dockviewComponent.js

@@ -1125,7 +1125,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         // Collapse when the group becomes empty
         var autoCollapseDisposable = group.model.onDidRemovePanel(function () {
             if (group.model.isEmpty) {
-                _this._shellManager.setEdgeGroupCollapsed(position, true);
+                _this.setEdgeGroupCollapsed(group, true);
             }
         });
         this._edgeGroupDisposables.set(position, autoCollapseDisposable);
@@ -1183,6 +1183,13 @@ var DockviewComponent = /** @class */ (function (_super) {
             for (var _b = __values(this._edgeGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var _d = __read(_c.value, 2), position = _d[0], edgeGroup = _d[1];
                 if (edgeGroup === group) {
+                    if (this._shellManager.isEdgeGroupCollapsed(position) ===
+                        collapsed) {
+                        // Skip the splitview resize on a no-op: with non-zero
+                        // theme gap, redundant resizeView calls accumulate
+                        // rounding drift that gradually shrinks the group.
+                        return;
+                    }
                     this._shellManager.setEdgeGroupCollapsed(position, collapsed);
                     edgeGroup.api._onDidCollapsedChange.fire({
                         isCollapsed: collapsed,
@@ -2360,7 +2367,14 @@ var DockviewComponent = /** @class */ (function (_super) {
         var label = tabGroup.label;
         var color = tabGroup.color;
         var collapsed = tabGroup.collapsed;
+        var componentParams = tabGroup.componentParams;
         var panelIds = __spreadArray([], __read(tabGroup.panelIds), false);
+        // Capture the destination's grid location BEFORE potentially
+        // removing the source group, in case source === destination and
+        // the source becomes empty after panel removal.
+        var referenceLocation = destinationTarget && destinationTarget !== 'center'
+            ? (0, gridview_1.getGridLocation)(destinationGroup.element)
+            : undefined;
         // Remove panels from the source group
         var removedPanels = this.movingLock(function () {
             return panelIds
@@ -2375,11 +2389,6 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (removedPanels.length === 0) {
             return;
         }
-        if (!options.keepEmptyGroups &&
-            sourceGroup.model.size === 0 &&
-            sourceGroup !== destinationGroup) {
-            this.doRemoveGroup(sourceGroup, { skipActive: true });
-        }
         var addPanelsToGroup = function (targetGroup) {
             var e_28, _a, e_29, _b;
             _this.movingLock(function () {
@@ -2407,6 +2416,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 label: label,
                 color: color,
                 collapsed: collapsed,
+                componentParams: componentParams,
             });
             try {
                 for (var removedPanels_1 = __values(removedPanels), removedPanels_1_1 = removedPanels_1.next(); !removedPanels_1_1.done; removedPanels_1_1 = removedPanels_1.next()) {
@@ -2441,17 +2451,30 @@ var DockviewComponent = /** @class */ (function (_super) {
                 finally { if (e_29) throw e_29.error; }
             }
         };
-        if (!destinationTarget || destinationTarget === 'center') {
-            addPanelsToGroup(destinationGroup);
+        var targetGroup;
+        if (!destinationTarget ||
+            destinationTarget === 'center' ||
+            !referenceLocation) {
+            targetGroup = destinationGroup;
         }
         else {
-            var referenceLocation = (0, gridview_1.getGridLocation)(destinationGroup.element);
             var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, destinationTarget);
-            var newGroup = this.createGroupAtLocation(dropLocation);
-            addPanelsToGroup(newGroup);
+            targetGroup = this.createGroupAtLocation(dropLocation);
         }
+        // Remove the source group if it became empty. We compare against
+        // the actual targetGroup (which is a freshly-created group for
+        // edge drops) rather than the originally-passed destinationGroup,
+        // so a tab-group drag onto its own group's edge still cleans up
+        // the now-empty source.
+        if (!options.keepEmptyGroups &&
+            sourceGroup.model.size === 0 &&
+            sourceGroup !== targetGroup) {
+            this.doRemoveGroup(sourceGroup, { skipActive: true });
+        }
+        addPanelsToGroup(targetGroup);
     };
     DockviewComponent.prototype.moveGroup = function (options) {
+        var e_31, _a, e_32, _b, e_33, _c, e_34, _d;
         var _this = this;
         var from = options.from.group;
         var to = options.to.group;
@@ -2462,6 +2485,16 @@ var DockviewComponent = /** @class */ (function (_super) {
         var source = from;
         if (target === 'center') {
             var activePanel_1 = from.activePanel;
+            // Snapshot tab group metadata before removing panels so we
+            // can recreate the tab groups in the destination after the
+            // panels are merged in.
+            var tabGroupSnapshots = from.model.getTabGroups().map(function (tg) { return ({
+                label: tg.label,
+                color: tg.color,
+                collapsed: tg.collapsed,
+                componentParams: tg.componentParams,
+                panelIds: __spreadArray([], __read(tg.panelIds), false),
+            }); });
             var panels_3 = this.movingLock(function () {
                 return __spreadArray([], __read(from.panels), false).map(function (p) {
                     return from.model.removePanel(p.id, {
@@ -2473,7 +2506,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(from, { skipActive: true });
             }
             this.movingLock(function () {
-                var e_31, _a;
+                var e_35, _a;
                 try {
                     for (var panels_4 = __values(panels_3), panels_4_1 = panels_4.next(); !panels_4_1.done; panels_4_1 = panels_4.next()) {
                         var panel = panels_4_1.value;
@@ -2483,14 +2516,45 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                catch (e_31_1) { e_31 = { error: e_31_1 }; }
+                catch (e_35_1) { e_35 = { error: e_35_1 }; }
                 finally {
                     try {
                         if (panels_4_1 && !panels_4_1.done && (_a = panels_4.return)) _a.call(panels_4);
                     }
-                    finally { if (e_31) throw e_31.error; }
+                    finally { if (e_35) throw e_35.error; }
                 }
             });
+            try {
+                for (var tabGroupSnapshots_1 = __values(tabGroupSnapshots), tabGroupSnapshots_1_1 = tabGroupSnapshots_1.next(); !tabGroupSnapshots_1_1.done; tabGroupSnapshots_1_1 = tabGroupSnapshots_1.next()) {
+                    var snapshot = tabGroupSnapshots_1_1.value;
+                    var newTabGroup = to.model.createTabGroup({
+                        label: snapshot.label,
+                        color: snapshot.color,
+                        collapsed: snapshot.collapsed,
+                        componentParams: snapshot.componentParams,
+                    });
+                    try {
+                        for (var _e = (e_32 = void 0, __values(snapshot.panelIds)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                            var panelId = _f.value;
+                            to.model.addPanelToTabGroup(newTabGroup.id, panelId);
+                        }
+                    }
+                    catch (e_32_1) { e_32 = { error: e_32_1 }; }
+                    finally {
+                        try {
+                            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                        }
+                        finally { if (e_32) throw e_32.error; }
+                    }
+                }
+            }
+            catch (e_31_1) { e_31 = { error: e_31_1 }; }
+            finally {
+                try {
+                    if (tabGroupSnapshots_1_1 && !tabGroupSnapshots_1_1.done && (_a = tabGroupSnapshots_1.return)) _a.call(tabGroupSnapshots_1);
+                }
+                finally { if (e_31) throw e_31.error; }
+            }
             // Ensure group becomes active after move
             if (options.skipSetActive !== true) {
                 // For center moves (merges), we need to ensure the target group is active
@@ -2514,6 +2578,17 @@ var DockviewComponent = /** @class */ (function (_super) {
                  * positions `source` like any other moved group.
                  */
                 var activePanel_2 = from.activePanel;
+                // Snapshot tab group metadata so the new group inherits
+                // the tab grouping from the edge slot.
+                var tabGroupSnapshots = from.model
+                    .getTabGroups()
+                    .map(function (tg) { return ({
+                    label: tg.label,
+                    color: tg.color,
+                    collapsed: tg.collapsed,
+                    componentParams: tg.componentParams,
+                    panelIds: __spreadArray([], __read(tg.panelIds), false),
+                }); });
                 var movedPanels_1 = this.movingLock(function () {
                     return __spreadArray([], __read(from.panels), false).map(function (p) {
                         return from.model.removePanel(p.id, { skipSetActive: true });
@@ -2521,7 +2596,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
                 source = this.createGroup();
                 this.movingLock(function () {
-                    var e_32, _a;
+                    var e_36, _a;
                     try {
                         for (var movedPanels_2 = __values(movedPanels_1), movedPanels_2_1 = movedPanels_2.next(); !movedPanels_2_1.done; movedPanels_2_1 = movedPanels_2.next()) {
                             var panel = movedPanels_2_1.value;
@@ -2531,14 +2606,45 @@ var DockviewComponent = /** @class */ (function (_super) {
                             });
                         }
                     }
-                    catch (e_32_1) { e_32 = { error: e_32_1 }; }
+                    catch (e_36_1) { e_36 = { error: e_36_1 }; }
                     finally {
                         try {
                             if (movedPanels_2_1 && !movedPanels_2_1.done && (_a = movedPanels_2.return)) _a.call(movedPanels_2);
                         }
-                        finally { if (e_32) throw e_32.error; }
+                        finally { if (e_36) throw e_36.error; }
                     }
                 });
+                try {
+                    for (var tabGroupSnapshots_2 = __values(tabGroupSnapshots), tabGroupSnapshots_2_1 = tabGroupSnapshots_2.next(); !tabGroupSnapshots_2_1.done; tabGroupSnapshots_2_1 = tabGroupSnapshots_2.next()) {
+                        var snapshot = tabGroupSnapshots_2_1.value;
+                        var newTabGroup = source.model.createTabGroup({
+                            label: snapshot.label,
+                            color: snapshot.color,
+                            collapsed: snapshot.collapsed,
+                            componentParams: snapshot.componentParams,
+                        });
+                        try {
+                            for (var _g = (e_34 = void 0, __values(snapshot.panelIds)), _h = _g.next(); !_h.done; _h = _g.next()) {
+                                var panelId = _h.value;
+                                source.model.addPanelToTabGroup(newTabGroup.id, panelId);
+                            }
+                        }
+                        catch (e_34_1) { e_34 = { error: e_34_1 }; }
+                        finally {
+                            try {
+                                if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
+                            }
+                            finally { if (e_34) throw e_34.error; }
+                        }
+                    }
+                }
+                catch (e_33_1) { e_33 = { error: e_33_1 }; }
+                finally {
+                    try {
+                        if (tabGroupSnapshots_2_1 && !tabGroupSnapshots_2_1.done && (_c = tabGroupSnapshots_2.return)) _c.call(tabGroupSnapshots_2);
+                    }
+                    finally { if (e_33) throw e_33.error; }
+                }
             }
             else {
                 switch (from.api.location.type) {
@@ -2841,7 +2947,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.updateTheme = function () {
-        var e_33, _a;
+        var e_37, _a;
         var _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var theme = (_b = this._options.theme) !== null && _b !== void 0 ? _b : theme_1.themeAbyss;
         // Apply the theme class only to the shell so edge groups and the
@@ -2882,12 +2988,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.updateTabGroups();
             }
         }
-        catch (e_33_1) { e_33 = { error: e_33_1 }; }
+        catch (e_37_1) { e_37 = { error: e_37_1 }; }
         finally {
             try {
                 if (_m && !_m.done && (_a = _l.return)) _a.call(_l);
             }
-            finally { if (e_33) throw e_33.error; }
+            finally { if (e_37) throw e_37.error; }
         }
     };
     return DockviewComponent;

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -1335,15 +1335,17 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                     if (position === 'center') {
                         return;
                     }
-                    if (data.panelId === null) {
-                        // don't allow group move to drop anywhere on self
+                    if (data.panelId === null && !data.tabGroupId) {
+                        // Full-group drops on self are a no-op.
+                        // Tab-group drags are partial moves: an edge drop
+                        // splits the layout and creates a new group.
                         return;
                     }
                 }
             }
             if (type === 'header') {
                 if (data.groupId === this.id) {
-                    if (data.panelId === null) {
+                    if (data.panelId === null && !data.tabGroupId) {
                         return;
                     }
                 }

package/dist/dockview-core.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.0.3
+ * @version 6.0.6
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -7235,10 +7235,12 @@
           const index = this.indexOf(id);
           const tabToRemove = this._tabs.splice(index, 1)[0];
           this._tabMap.delete(id);
-          const { value, disposable } = tabToRemove;
-          disposable.dispose();
-          value.dispose();
-          value.element.remove();
+          if (tabToRemove) {
+              const { value, disposable } = tabToRemove;
+              disposable.dispose();
+              value.dispose();
+              value.element.remove();
+          }
           // If a non-source tab was removed during active drag, refresh positions
           if (this._animState) {
               this._animState.tabPositions = this.snapshotTabPositions();
@@ -7910,6 +7912,14 @@
               // handles panel transfer and tab group recreation.
               // Use the REAL tab group ID from transfer data, not the
               // potentially stale one from _animState.
+              //
+              // Clear any inline gap margin / shifting class applied to
+              // destination tabs during dragover. Cross-group moves don't
+              // run the FLIP path, and `moveGroupOrPanel` only inserts new
+              // panels — it doesn't recreate existing destination tabs, so
+              // their inline `margin-left` would otherwise persist as a
+              // visible gap (issue #1243).
+              this.resetTabTransforms();
               this.accessor.moveGroupOrPanel({
                   from: {
                       groupId: data.groupId,
@@ -9690,15 +9700,17 @@
                       if (position === 'center') {
                           return;
                       }
-                      if (data.panelId === null) {
-                          // don't allow group move to drop anywhere on self
+                      if (data.panelId === null && !data.tabGroupId) {
+                          // Full-group drops on self are a no-op.
+                          // Tab-group drags are partial moves: an edge drop
+                          // splits the layout and creates a new group.
                           return;
                       }
                   }
               }
               if (type === 'header') {
                   if (data.groupId === this.id) {
-                      if (data.panelId === null) {
+                      if (data.panelId === null && !data.tabGroupId) {
                           return;
                       }
                   }
@@ -13566,7 +13578,7 @@
           // Collapse when the group becomes empty
           const autoCollapseDisposable = group.model.onDidRemovePanel(() => {
               if (group.model.isEmpty) {
-                  this._shellManager.setEdgeGroupCollapsed(position, true);
+                  this.setEdgeGroupCollapsed(group, true);
               }
           });
           this._edgeGroupDisposables.set(position, autoCollapseDisposable);
@@ -13610,6 +13622,13 @@
       setEdgeGroupCollapsed(group, collapsed) {
           for (const [position, edgeGroup] of this._edgeGroups) {
               if (edgeGroup === group) {
+                  if (this._shellManager.isEdgeGroupCollapsed(position) ===
+                      collapsed) {
+                      // Skip the splitview resize on a no-op: with non-zero
+                      // theme gap, redundant resizeView calls accumulate
+                      // rounding drift that gradually shrinks the group.
+                      return;
+                  }
                   this._shellManager.setEdgeGroupCollapsed(position, collapsed);
                   edgeGroup.api._onDidCollapsedChange.fire({
                       isCollapsed: collapsed,
@@ -14562,7 +14581,14 @@
           const label = tabGroup.label;
           const color = tabGroup.color;
           const collapsed = tabGroup.collapsed;
+          const componentParams = tabGroup.componentParams;
           const panelIds = [...tabGroup.panelIds];
+          // Capture the destination's grid location BEFORE potentially
+          // removing the source group, in case source === destination and
+          // the source becomes empty after panel removal.
+          const referenceLocation = destinationTarget && destinationTarget !== 'center'
+              ? getGridLocation(destinationGroup.element)
+              : undefined;
           // Remove panels from the source group
           const removedPanels = this.movingLock(() => panelIds
               .map((pid) => sourceGroup.model.removePanel(pid, {
@@ -14573,11 +14599,6 @@
           if (removedPanels.length === 0) {
               return;
           }
-          if (!options.keepEmptyGroups &&
-              sourceGroup.model.size === 0 &&
-              sourceGroup !== destinationGroup) {
-              this.doRemoveGroup(sourceGroup, { skipActive: true });
-          }
           const addPanelsToGroup = (targetGroup) => {
               this.movingLock(() => {
                   for (const panel of removedPanels) {
@@ -14593,6 +14614,7 @@
                   label,
                   color,
                   collapsed,
+                  componentParams,
               });
               for (const panel of removedPanels) {
                   targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
@@ -14607,15 +14629,27 @@
                   });
               }
           };
-          if (!destinationTarget || destinationTarget === 'center') {
-              addPanelsToGroup(destinationGroup);
+          let targetGroup;
+          if (!destinationTarget ||
+              destinationTarget === 'center' ||
+              !referenceLocation) {
+              targetGroup = destinationGroup;
           }
           else {
-              const referenceLocation = getGridLocation(destinationGroup.element);
               const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-              const newGroup = this.createGroupAtLocation(dropLocation);
-              addPanelsToGroup(newGroup);
+              targetGroup = this.createGroupAtLocation(dropLocation);
           }
+          // Remove the source group if it became empty. We compare against
+          // the actual targetGroup (which is a freshly-created group for
+          // edge drops) rather than the originally-passed destinationGroup,
+          // so a tab-group drag onto its own group's edge still cleans up
+          // the now-empty source.
+          if (!options.keepEmptyGroups &&
+              sourceGroup.model.size === 0 &&
+              sourceGroup !== targetGroup) {
+              this.doRemoveGroup(sourceGroup, { skipActive: true });
+          }
+          addPanelsToGroup(targetGroup);
       }
       moveGroup(options) {
           const from = options.from.group;
@@ -14627,6 +14661,16 @@
           let source = from;
           if (target === 'center') {
               const activePanel = from.activePanel;
+              // Snapshot tab group metadata before removing panels so we
+              // can recreate the tab groups in the destination after the
+              // panels are merged in.
+              const tabGroupSnapshots = from.model.getTabGroups().map((tg) => ({
+                  label: tg.label,
+                  color: tg.color,
+                  collapsed: tg.collapsed,
+                  componentParams: tg.componentParams,
+                  panelIds: [...tg.panelIds],
+              }));
               const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
                   skipSetActive: true,
               })));
@@ -14641,6 +14685,17 @@
                       });
                   }
               });
+              for (const snapshot of tabGroupSnapshots) {
+                  const newTabGroup = to.model.createTabGroup({
+                      label: snapshot.label,
+                      color: snapshot.color,
+                      collapsed: snapshot.collapsed,
+                      componentParams: snapshot.componentParams,
+                  });
+                  for (const panelId of snapshot.panelIds) {
+                      to.model.addPanelToTabGroup(newTabGroup.id, panelId);
+                  }
+              }
               // Ensure group becomes active after move
               if (options.skipSetActive !== true) {
                   // For center moves (merges), we need to ensure the target group is active
@@ -14664,6 +14719,17 @@
                    * positions `source` like any other moved group.
                    */
                   const activePanel = from.activePanel;
+                  // Snapshot tab group metadata so the new group inherits
+                  // the tab grouping from the edge slot.
+                  const tabGroupSnapshots = from.model
+                      .getTabGroups()
+                      .map((tg) => ({
+                      label: tg.label,
+                      color: tg.color,
+                      collapsed: tg.collapsed,
+                      componentParams: tg.componentParams,
+                      panelIds: [...tg.panelIds],
+                  }));
                   const movedPanels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, { skipSetActive: true })));
                   source = this.createGroup();
                   this.movingLock(() => {
@@ -14674,6 +14740,17 @@
                           });
                       }
                   });
+                  for (const snapshot of tabGroupSnapshots) {
+                      const newTabGroup = source.model.createTabGroup({
+                          label: snapshot.label,
+                          color: snapshot.color,
+                          collapsed: snapshot.collapsed,
+                          componentParams: snapshot.componentParams,
+                      });
+                      for (const panelId of snapshot.panelIds) {
+                          source.model.addPanelToTabGroup(newTabGroup.id, panelId);
+                      }
+                  }
               }
               else {
                   switch (from.api.location.type) {