dockview-core 6.0.5 → 6.0.7

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.0.5
+ * @version 6.0.7
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -7199,10 +7199,12 @@ class Tabs extends CompositeDisposable {
         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();
@@ -7324,8 +7326,23 @@ class Tabs extends CompositeDisposable {
             new PanelTransfer(this.accessor.id, this.group.id, null, tabGroup.id),
         ], PanelTransfer.prototype);
         const iframes = disableIframePointEvents();
+        // The dragend listener on `_tabsList` is unreachable for chip
+        // drags because cross-group drops detach the chip from the DOM
+        // before dragend fires (the source tab group becomes empty, so
+        // `_positionChipForGroup` removes the chip element). Without
+        // bubbling, the tabsList listener never runs and `_animState`,
+        // `_chipDragCleanup`, and the dragging CSS classes leak. Listen
+        // directly on the chip element so cleanup happens regardless of
+        // whether it's still attached.  (Issue #1254.)
+        const chipElement = chip.element;
+        const onChipDragEnd = () => {
+            chipElement.removeEventListener('dragend', onChipDragEnd);
+            this.resetDragAnimation();
+        };
+        chipElement.addEventListener('dragend', onChipDragEnd);
         this._chipDragCleanup = {
             dispose: () => {
+                chipElement.removeEventListener('dragend', onChipDragEnd);
                 panelTransfer.clearData(PanelTransfer.prototype);
                 iframes.release();
             },
@@ -7874,6 +7891,14 @@ class Tabs extends CompositeDisposable {
             // 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,
@@ -9654,15 +9679,17 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                     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;
                     }
                 }
@@ -13530,7 +13557,7 @@ class DockviewComponent extends BaseGrid {
         // 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);
@@ -13574,6 +13601,13 @@ class DockviewComponent extends BaseGrid {
     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,
@@ -14526,7 +14560,14 @@ class DockviewComponent extends BaseGrid {
         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, {
@@ -14537,11 +14578,6 @@ class DockviewComponent extends BaseGrid {
         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) {
@@ -14557,6 +14593,7 @@ class DockviewComponent extends BaseGrid {
                 label,
                 color,
                 collapsed,
+                componentParams,
             });
             for (const panel of removedPanels) {
                 targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
@@ -14571,15 +14608,27 @@ class DockviewComponent extends BaseGrid {
                 });
             }
         };
-        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;
@@ -14591,6 +14640,16 @@ class DockviewComponent extends BaseGrid {
         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,
             })));
@@ -14605,6 +14664,17 @@ class DockviewComponent extends BaseGrid {
                     });
                 }
             });
+            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
@@ -14628,6 +14698,17 @@ class DockviewComponent extends BaseGrid {
                  * 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(() => {
@@ -14638,6 +14719,17 @@ class DockviewComponent extends BaseGrid {
                         });
                     }
                 });
+                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) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-core",
-    "version": "6.0.5",
+    "version": "6.0.7",
     "description": "Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript",
     "keywords": [
         "splitview",