dockview-core 5.1.0 → 5.2.0

package/dist/cjs/dockview/components/tab/tab.d.ts

@@ -19,6 +19,8 @@ export declare class Tab extends CompositeDisposable {
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
     readonly onDragStart: Event<DragEvent>;
+    private readonly _onDragEnd;
+    readonly onDragEnd: Event<DragEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);

package/dist/cjs/dockview/components/tab/tab.js

@@ -58,6 +58,8 @@ var Tab = /** @class */ (function (_super) {
         _this.onDrop = _this._onDropped.event;
         _this._onDragStart = new events_1.Emitter();
         _this.onDragStart = _this._onDragStart.event;
+        _this._onDragEnd = new events_1.Emitter();
+        _this.onDragEnd = _this._onDragEnd.event;
         _this._element = document.createElement('div');
         _this._element.className = 'dv-tab';
         _this._element.tabIndex = 0;
@@ -73,6 +75,10 @@ var Tab = /** @class */ (function (_super) {
                 }
                 var data = (0, dataTransfer_1.getPanelData)();
                 if (data && _this.accessor.id === data.viewId) {
+                    if (_this.accessor.options.tabAnimation === 'smooth' &&
+                        data.groupId === _this.group.id) {
+                        return false;
+                    }
                     return true;
                 }
                 return _this.group.model.canDisplayOverlay(event, position, 'tab');
@@ -80,7 +86,7 @@ var Tab = /** @class */ (function (_super) {
             getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         _this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay;
-        _this.addDisposables(_this._onPointDown, _this._onDropped, _this._onDragStart, _this.dragHandler.onDragStart(function (event) {
+        _this.addDisposables(_this._onPointDown, _this._onDropped, _this._onDragStart, _this._onDragEnd, _this.dragHandler.onDragStart(function (event) {
             if (event.dataTransfer) {
                 var style_1 = getComputedStyle(_this.element);
                 var newNode_1 = _this.element.cloneNode(true);
@@ -94,6 +100,16 @@ var Tab = /** @class */ (function (_super) {
                 });
             }
             _this._onDragStart.fire(event);
+            if (_this.accessor.options.tabAnimation === 'smooth') {
+                // Delay collapse to next frame so the browser
+                // captures the full drag image first
+                requestAnimationFrame(function () {
+                    (0, dom_1.toggleClass)(_this.element, 'dv-tab--dragging', true);
+                });
+            }
+        }), (0, events_1.addDisposableListener)(_this._element, 'dragend', function (event) {
+            (0, dom_1.toggleClass)(_this.element, 'dv-tab--dragging', false);
+            _this._onDragEnd.fire(event);
         }), _this.dragHandler, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (event) {
             _this._onPointDown.fire(event);
         }), _this.dropTarget.onDrop(function (event) {

package/dist/cjs/dockview/components/titlebar/tabs.d.ts

@@ -18,6 +18,7 @@ export declare class Tabs extends CompositeDisposable {
     private selectedIndex;
     private _showTabsOverflowControl;
     private _direction;
+    private _animState;
     private readonly _onTabDragStart;
     readonly onTabDragStart: Event<TabDragEvent>;
     private readonly _onDrop;
@@ -48,4 +49,11 @@ export declare class Tabs extends CompositeDisposable {
     private addTab;
     private toggleDropdown;
     updateDragAndDropState(): void;
+    private snapshotTabPositions;
+    private getAverageTabWidth;
+    private handleDragOver;
+    private applyDragOverTransforms;
+    private resetTabTransforms;
+    private resetDragAnimation;
+    private runFlipAnimation;
 }

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

@@ -71,6 +71,7 @@ var Tabs = /** @class */ (function (_super) {
         _this.selectedIndex = -1;
         _this._showTabsOverflowControl = false;
         _this._direction = 'horizontal';
+        _this._animState = null;
         _this._onTabDragStart = new events_1.Emitter();
         _this.onTabDragStart = _this._onTabDragStart.event;
         _this._onDrop = new events_1.Emitter();
@@ -99,8 +100,89 @@ var Tabs = /** @class */ (function (_super) {
             if (isLeftClick) {
                 _this.accessor.doSetGroupActive(_this.group);
             }
-        }), lifecycle_1.Disposable.from(function () {
+        }), (0, events_1.addDisposableListener)(_this._tabsList, 'dragover', function (event) {
+            if (!_this._animState) {
+                // Check for external drag from another group
+                if (_this.accessor.options.tabAnimation !== 'smooth' ||
+                    _this.accessor.options.disableDnd) {
+                    return;
+                }
+                var data = (0, dataTransfer_1.getPanelData)();
+                if (data &&
+                    data.panelId &&
+                    data.groupId !== _this.group.id) {
+                    _this._animState = {
+                        sourceTabId: data.panelId,
+                        sourceIndex: -1,
+                        tabPositions: _this.snapshotTabPositions(),
+                        currentInsertionIndex: null,
+                    };
+                }
+                else {
+                    return;
+                }
+            }
+            _this.handleDragOver(event);
+        }, true), (0, events_1.addDisposableListener)(_this._tabsList, 'dragleave', function (event) {
+            if (!_this._animState) {
+                return;
+            }
+            // Only handle if leaving the container itself, not moving between children
+            if (event.relatedTarget &&
+                _this._tabsList.contains(event.relatedTarget)) {
+                return;
+            }
+            _this.resetTabTransforms();
+            if (_this._animState) {
+                if (_this._animState.sourceIndex === -1) {
+                    // External drag left — clear state entirely
+                    // (no dragend will fire on this tab list)
+                    _this._animState = null;
+                }
+                else {
+                    _this._animState.currentInsertionIndex = null;
+                }
+            }
+        }, true), (0, events_1.addDisposableListener)(_this._tabsList, 'dragend', function () {
+            // Only fires for cancel (not after successful drop, since
+            // source tab is removed from DOM and doesn't bubble)
+            _this.resetDragAnimation();
+        }), (0, events_1.addDisposableListener)(_this._tabsList, 'drop', function (event) {
+            if (_this.accessor.options.tabAnimation !== 'smooth' ||
+                !_this._animState ||
+                _this._animState.currentInsertionIndex === null) {
+                return;
+            }
+            event.stopPropagation();
+            event.preventDefault();
+            var animState = _this._animState;
+            _this._animState = null;
+            var insertionIndex = animState.currentInsertionIndex;
+            var sourceIndex = animState.sourceIndex;
+            // After the source tab is removed, indices after it shift
+            // down by one, so adjust the target index accordingly.
+            var adjustedIndex = insertionIndex -
+                (sourceIndex !== -1 && sourceIndex < insertionIndex
+                    ? 1
+                    : 0);
+            // No-op: drop at the same position, nothing to animate
+            if (adjustedIndex === sourceIndex) {
+                _this.resetTabTransforms();
+                return;
+            }
+            // Snapshot current visual positions (with margins still applied)
+            // before resetting transforms, so FLIP starts from what the
+            // user currently sees — not from a teleported state.
+            var firstPositions = _this.snapshotTabPositions();
+            _this.resetTabTransforms();
+            _this._onDrop.fire({ event: event, index: adjustedIndex });
+            _this.runFlipAnimation(firstPositions, animState.sourceTabId, animState.sourceIndex === -1, {
+                from: Math.min(sourceIndex, adjustedIndex),
+                to: Math.max(sourceIndex, adjustedIndex),
+            });
+        }, true), lifecycle_1.Disposable.from(function () {
             var e_1, _a;
+            _this.resetDragAnimation();
             try {
                 for (var _b = __values(_this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var _d = _c.value, value = _d.value, disposable = _d.disposable;
@@ -239,6 +321,14 @@ var Tabs = /** @class */ (function (_super) {
         tab.setContent(panel.view.tab);
         var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
             _this._onTabDragStart.fire({ nativeEvent: event, panel: panel });
+            if (_this.accessor.options.tabAnimation === 'smooth') {
+                _this._animState = {
+                    sourceTabId: panel.id,
+                    sourceIndex: _this._tabs.findIndex(function (x) { return x.value === tab; }),
+                    tabPositions: _this.snapshotTabPositions(),
+                    currentInsertionIndex: null,
+                };
+            }
         }), tab.onPointerDown(function (event) {
             if (event.defaultPrevented) {
                 return;
@@ -268,10 +358,29 @@ var Tabs = /** @class */ (function (_super) {
                     break;
             }
         }), tab.onDrop(function (event) {
-            _this._onDrop.fire({
-                event: event.nativeEvent,
-                index: _this._tabs.findIndex(function (x) { return x.value === tab; }),
-            });
+            var animState = _this._animState;
+            _this._animState = null;
+            var dropIndex = _this._tabs.findIndex(function (x) { return x.value === tab; });
+            if (animState) {
+                var firstPositions = _this.snapshotTabPositions();
+                _this.resetTabTransforms();
+                _this._onDrop.fire({
+                    event: event.nativeEvent,
+                    index: dropIndex,
+                });
+                _this.runFlipAnimation(firstPositions, animState.sourceTabId, animState.sourceIndex === -1, animState.sourceIndex !== -1
+                    ? {
+                        from: Math.min(animState.sourceIndex, dropIndex),
+                        to: Math.max(animState.sourceIndex, dropIndex),
+                    }
+                    : undefined);
+            }
+            else {
+                _this._onDrop.fire({
+                    event: event.nativeEvent,
+                    index: dropIndex,
+                });
+            }
         }), tab.onWillShowOverlay(function (event) {
             _this._onWillShowOverlay.fire(new events_2.DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'tab',
@@ -283,14 +392,29 @@ var Tabs = /** @class */ (function (_super) {
         }));
         var value = { value: tab, disposable: disposable };
         this.addTab(value, index);
+        // If a tab was added during active drag, refresh positions
+        if (this._animState) {
+            this._animState.tabPositions = this.snapshotTabPositions();
+            this.applyDragOverTransforms();
+        }
     };
     Tabs.prototype.delete = function (id) {
+        var _a;
+        if (((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabId) === id) {
+            this.resetTabTransforms();
+            this._animState = null;
+        }
         var index = this.indexOf(id);
         var tabToRemove = this._tabs.splice(index, 1)[0];
         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();
+            this.applyDragOverTransforms();
+        }
     };
     Tabs.prototype.addTab = function (tab, index) {
         if (index === void 0) { index = this._tabs.length; }
@@ -332,6 +456,229 @@ var Tabs = /** @class */ (function (_super) {
             finally { if (e_3) throw e_3.error; }
         }
     };
+    Tabs.prototype.snapshotTabPositions = function () {
+        var e_4, _a;
+        var positions = new Map();
+        try {
+            for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var tab = _c.value;
+                positions.set(tab.value.panel.id, tab.value.element.getBoundingClientRect());
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+        return positions;
+    };
+    Tabs.prototype.getAverageTabWidth = function () {
+        var e_5, _a;
+        if (this._tabs.length === 0) {
+            return 0;
+        }
+        var totalWidth = 0;
+        try {
+            for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var tab = _c.value;
+                totalWidth += tab.value.element.getBoundingClientRect().width;
+            }
+        }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_5) throw e_5.error; }
+        }
+        return totalWidth / this._tabs.length;
+    };
+    Tabs.prototype.handleDragOver = function (event) {
+        if (!this._animState) {
+            return;
+        }
+        var mouseX = event.clientX;
+        var insertionIndex = null;
+        for (var i = 0; i < this._tabs.length; i++) {
+            var tab = this._tabs[i].value;
+            if (tab.panel.id === this._animState.sourceTabId) {
+                continue;
+            }
+            var rect = tab.element.getBoundingClientRect();
+            var midpoint = rect.left + rect.width / 2;
+            if (mouseX < midpoint) {
+                insertionIndex = i;
+                break;
+            }
+            insertionIndex = i + 1;
+        }
+        if (insertionIndex === this._animState.currentInsertionIndex) {
+            return;
+        }
+        this._animState.currentInsertionIndex = insertionIndex;
+        this.applyDragOverTransforms();
+    };
+    Tabs.prototype.applyDragOverTransforms = function () {
+        if (!this._animState ||
+            this._animState.currentInsertionIndex === null) {
+            this.resetTabTransforms();
+            return;
+        }
+        var insertionIndex = this._animState.currentInsertionIndex;
+        var sourceRect = this._animState.tabPositions.get(this._animState.sourceTabId);
+        var gapWidth = sourceRect
+            ? sourceRect.width
+            : this.getAverageTabWidth();
+        // Find the first non-source tab at insertionIndex to receive the gap margin
+        var gapApplied = false;
+        var _loop_1 = function (i) {
+            var tab = this_1._tabs[i].value;
+            if (tab.panel.id === this_1._animState.sourceTabId) {
+                return "continue";
+            }
+            if (!gapApplied && i >= insertionIndex) {
+                tab.element.style.marginLeft = "".concat(gapWidth, "px");
+                (0, dom_1.toggleClass)(tab.element, 'dv-tab--shifting', true);
+                gapApplied = true;
+            }
+            else {
+                // Keep shifting class while margin animates back to 0,
+                // then remove both once the transition ends
+                if (tab.element.style.marginLeft) {
+                    tab.element.style.marginLeft = '0px';
+                    (0, dom_1.toggleClass)(tab.element, 'dv-tab--shifting', true);
+                    var onEnd_1 = function () {
+                        tab.element.style.removeProperty('margin-left');
+                        (0, dom_1.toggleClass)(tab.element, 'dv-tab--shifting', false);
+                        tab.element.removeEventListener('transitionend', onEnd_1);
+                    };
+                    tab.element.addEventListener('transitionend', onEnd_1);
+                }
+                else {
+                    (0, dom_1.toggleClass)(tab.element, 'dv-tab--shifting', false);
+                }
+            }
+        };
+        var this_1 = this;
+        for (var i = 0; i < this._tabs.length; i++) {
+            _loop_1(i);
+        }
+    };
+    Tabs.prototype.resetTabTransforms = function () {
+        var e_6, _a;
+        try {
+            for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var tab = _c.value;
+                tab.value.element.style.removeProperty('margin-left');
+                tab.value.element.style.removeProperty('transform');
+                (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--shifting', false);
+            }
+        }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_6) throw e_6.error; }
+        }
+    };
+    Tabs.prototype.resetDragAnimation = function () {
+        var e_7, _a;
+        this.resetTabTransforms();
+        this._animState = null;
+        try {
+            for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var tab = _c.value;
+                (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--dragging', false);
+            }
+        }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_7) throw e_7.error; }
+        }
+    };
+    Tabs.prototype.runFlipAnimation = function (firstPositions, sourceTabId, isCrossGroup, animRange) {
+        var _this = this;
+        if (isCrossGroup === void 0) { isCrossGroup = false; }
+        var hasAnimation = false;
+        for (var i = 0; i < this._tabs.length; i++) {
+            var tab = this._tabs[i];
+            var panelId = tab.value.panel.id;
+            if (panelId === sourceTabId) {
+                if (isCrossGroup) {
+                    // Newly inserted tab: slide in from the right
+                    var rect = tab.value.element.getBoundingClientRect();
+                    tab.value.element.style.transform = "translateX(".concat(rect.width, "px)");
+                    (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--shifting', true);
+                    hasAnimation = true;
+                }
+                continue;
+            }
+            // Skip tabs outside the affected range (they don't logically move)
+            if (animRange !== undefined &&
+                (i < animRange.from || i > animRange.to)) {
+                continue;
+            }
+            var firstRect = firstPositions.get(panelId);
+            if (!firstRect) {
+                continue;
+            }
+            var lastRect = tab.value.element.getBoundingClientRect();
+            var deltaX = firstRect.left - lastRect.left;
+            if (Math.abs(deltaX) < 1) {
+                continue;
+            }
+            tab.value.element.style.transform = "translateX(".concat(deltaX, "px)");
+            (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--shifting', true);
+            hasAnimation = true;
+        }
+        if (!hasAnimation) {
+            return;
+        }
+        requestAnimationFrame(function () {
+            var e_8, _a;
+            try {
+                for (var _b = __values(_this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var tab = _c.value;
+                    if (tab.value.element.style.transform) {
+                        tab.value.element.style.transform = '';
+                    }
+                }
+            }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_8) throw e_8.error; }
+            }
+            var onTransitionEnd = function (event) {
+                var e_9, _a;
+                if (event.propertyName === 'transform') {
+                    _this._tabsList.removeEventListener('transitionend', onTransitionEnd);
+                    try {
+                        for (var _b = __values(_this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var tab = _c.value;
+                            (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--shifting', false);
+                        }
+                    }
+                    catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                    finally {
+                        try {
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        }
+                        finally { if (e_9) throw e_9.error; }
+                    }
+                }
+            };
+            _this._tabsList.addEventListener('transitionend', onTransitionEnd);
+        });
+    };
     return Tabs;
 }(lifecycle_1.CompositeDisposable));
 exports.Tabs = Tabs;

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

@@ -69,7 +69,20 @@ export interface DockviewOptions {
      * This is only applied to the tab header section. Defaults to `custom`.
      */
     scrollbars?: 'native' | 'custom';
+    /**
+     * Controls tab drag-and-drop reorder animation style.
+     *
+     * - `"smooth"`: tabs animate smoothly during drag-and-drop reorder —
+     *   tabs slide apart to reveal the insertion gap, then animate to their
+     *   final positions on drop (Chrome-like behavior).
+     * - `"default"`: standard tab reorder behavior without animation.
+     *
+     * Defaults to `"default"`.
+     */
+    tabAnimation?: TabAnimation;
 }
+export type TabAnimation = 'smooth' | 'default';
+export declare const DEFAULT_TAB_ANIMATION: TabAnimation;
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;
     target: DockviewGroupDropLocation;

package/dist/cjs/dockview/options.js

@@ -15,8 +15,9 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isGroupOptionsWithGroup = exports.isGroupOptionsWithPanel = exports.isPanelOptionsWithGroup = exports.isPanelOptionsWithPanel = exports.PROPERTY_KEYS_DOCKVIEW = exports.DockviewUnhandledDragOverEvent = void 0;
+exports.isGroupOptionsWithGroup = exports.isGroupOptionsWithPanel = exports.isPanelOptionsWithGroup = exports.isPanelOptionsWithPanel = exports.PROPERTY_KEYS_DOCKVIEW = exports.DockviewUnhandledDragOverEvent = exports.DEFAULT_TAB_ANIMATION = void 0;
 var events_1 = require("../events");
+exports.DEFAULT_TAB_ANIMATION = 'default';
 var DockviewUnhandledDragOverEvent = /** @class */ (function (_super) {
     __extends(DockviewUnhandledDragOverEvent, _super);
     function DockviewUnhandledDragOverEvent(nativeEvent, target, position, getData, group) {
@@ -55,6 +56,7 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         theme: undefined,
         disableTabsOverflowList: undefined,
         scrollbars: undefined,
+        tabAnimation: undefined,
     };
     return Object.keys(properties);
 })();