dockview-core 6.0.5 → 6.0.7

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.0.5
+ * @version 6.0.7
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -7205,10 +7205,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();
@@ -7330,8 +7332,23 @@
                 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();
                 },
@@ -7880,6 +7897,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,
@@ -9660,15 +9685,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;
                         }
                     }
@@ -13536,7 +13563,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);
@@ -13580,6 +13607,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,
@@ -14532,7 +14566,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, {
@@ -14543,11 +14584,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) {
@@ -14563,6 +14599,7 @@
                     label,
                     color,
                     collapsed,
+                    componentParams,
                 });
                 for (const panel of removedPanels) {
                     targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
@@ -14577,15 +14614,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;
@@ -14597,6 +14646,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,
                 })));
@@ -14611,6 +14670,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
@@ -14634,6 +14704,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(() => {
@@ -14644,6 +14725,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) {

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

@@ -604,10 +604,12 @@ export 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();
@@ -729,8 +731,23 @@ export 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();
             },
@@ -1279,6 +1296,14 @@ export 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,

package/dist/esm/dockview/dockviewComponent.js

@@ -924,7 +924,7 @@ export 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);
@@ -968,6 +968,13 @@ export 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,
@@ -1920,7 +1927,14 @@ export 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, {
@@ -1931,11 +1945,6 @@ export 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) {
@@ -1951,6 +1960,7 @@ export class DockviewComponent extends BaseGrid {
                 label,
                 color,
                 collapsed,
+                componentParams,
             });
             for (const panel of removedPanels) {
                 targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
@@ -1965,15 +1975,27 @@ export 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;
@@ -1985,6 +2007,16 @@ export 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,
             })));
@@ -1999,6 +2031,17 @@ export 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
@@ -2022,6 +2065,17 @@ export 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(() => {
@@ -2032,6 +2086,17 @@ export 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/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -1061,15 +1061,17 @@ export 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;
                     }
                 }