dockview-core 5.1.0 → 5.2.0

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 5.1.0
+ * @version 5.2.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -5089,6 +5089,8 @@
             this.onDrop = this._onDropped.event;
             this._onDragStart = new Emitter();
             this.onDragStart = this._onDragStart.event;
+            this._onDragEnd = new Emitter();
+            this.onDragEnd = this._onDragEnd.event;
             this._element = document.createElement('div');
             this._element.className = 'dv-tab';
             this._element.tabIndex = 0;
@@ -5104,6 +5106,10 @@
                     }
                     const data = 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');
@@ -5111,7 +5117,7 @@
                 getOverrideTarget: () => { 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((event) => {
+            this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, this._onDragEnd, this.dragHandler.onDragStart((event) => {
                 if (event.dataTransfer) {
                     const style = getComputedStyle(this.element);
                     const newNode = this.element.cloneNode(true);
@@ -5123,6 +5129,16 @@
                     });
                 }
                 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(() => {
+                        toggleClass(this.element, 'dv-tab--dragging', true);
+                    });
+                }
+            }), addDisposableListener(this._element, 'dragend', (event) => {
+                toggleClass(this.element, 'dv-tab--dragging', false);
+                this._onDragEnd.fire(event);
             }), this.dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
                 this._onPointDown.fire(event);
             }), this.dropTarget.onDrop((event) => {
@@ -5476,6 +5492,7 @@
             this.selectedIndex = -1;
             this._showTabsOverflowControl = false;
             this._direction = 'horizontal';
+            this._animState = null;
             this._onTabDragStart = new Emitter();
             this.onTabDragStart = this._onTabDragStart.event;
             this._onDrop = new Emitter();
@@ -5504,7 +5521,88 @@
                 if (isLeftClick) {
                     this.accessor.doSetGroupActive(this.group);
                 }
-            }), exports.DockviewDisposable.from(() => {
+            }), addDisposableListener(this._tabsList, 'dragover', (event) => {
+                if (!this._animState) {
+                    // Check for external drag from another group
+                    if (this.accessor.options.tabAnimation !== 'smooth' ||
+                        this.accessor.options.disableDnd) {
+                        return;
+                    }
+                    const data = 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), addDisposableListener(this._tabsList, 'dragleave', (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), addDisposableListener(this._tabsList, 'dragend', () => {
+                // Only fires for cancel (not after successful drop, since
+                // source tab is removed from DOM and doesn't bubble)
+                this.resetDragAnimation();
+            }), addDisposableListener(this._tabsList, 'drop', (event) => {
+                if (this.accessor.options.tabAnimation !== 'smooth' ||
+                    !this._animState ||
+                    this._animState.currentInsertionIndex === null) {
+                    return;
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                const animState = this._animState;
+                this._animState = null;
+                const insertionIndex = animState.currentInsertionIndex;
+                const sourceIndex = animState.sourceIndex;
+                // After the source tab is removed, indices after it shift
+                // down by one, so adjust the target index accordingly.
+                const 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.
+                const firstPositions = this.snapshotTabPositions();
+                this.resetTabTransforms();
+                this._onDrop.fire({ event, index: adjustedIndex });
+                this.runFlipAnimation(firstPositions, animState.sourceTabId, animState.sourceIndex === -1, {
+                    from: Math.min(sourceIndex, adjustedIndex),
+                    to: Math.max(sourceIndex, adjustedIndex),
+                });
+            }, true), exports.DockviewDisposable.from(() => {
+                this.resetDragAnimation();
                 for (const { value, disposable } of this._tabs) {
                     disposable.dispose();
                     value.dispose();
@@ -5544,6 +5642,14 @@
             tab.setContent(panel.view.tab);
             const disposable = new CompositeDisposable(tab.onDragStart((event) => {
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
+                if (this.accessor.options.tabAnimation === 'smooth') {
+                    this._animState = {
+                        sourceTabId: panel.id,
+                        sourceIndex: this._tabs.findIndex((x) => x.value === tab),
+                        tabPositions: this.snapshotTabPositions(),
+                        currentInsertionIndex: null,
+                    };
+                }
             }), tab.onPointerDown((event) => {
                 if (event.defaultPrevented) {
                     return;
@@ -5573,10 +5679,29 @@
                         break;
                 }
             }), tab.onDrop((event) => {
-                this._onDrop.fire({
-                    event: event.nativeEvent,
-                    index: this._tabs.findIndex((x) => x.value === tab),
-                });
+                const animState = this._animState;
+                this._animState = null;
+                const dropIndex = this._tabs.findIndex((x) => x.value === tab);
+                if (animState) {
+                    const 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((event) => {
                 this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                     kind: 'tab',
@@ -5588,14 +5713,29 @@
             }));
             const value = { value: tab, 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();
+            }
         }
         delete(id) {
+            var _a;
+            if (((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabId) === id) {
+                this.resetTabTransforms();
+                this._animState = null;
+            }
             const index = this.indexOf(id);
             const tabToRemove = this._tabs.splice(index, 1)[0];
             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();
+                this.applyDragOverTransforms();
+            }
         }
         addTab(tab, index = this._tabs.length) {
             if (index < 0 || index > this._tabs.length) {
@@ -5624,6 +5764,157 @@
                 tab.value.updateDragAndDropState();
             }
         }
+        snapshotTabPositions() {
+            const positions = new Map();
+            for (const tab of this._tabs) {
+                positions.set(tab.value.panel.id, tab.value.element.getBoundingClientRect());
+            }
+            return positions;
+        }
+        getAverageTabWidth() {
+            if (this._tabs.length === 0) {
+                return 0;
+            }
+            let totalWidth = 0;
+            for (const tab of this._tabs) {
+                totalWidth += tab.value.element.getBoundingClientRect().width;
+            }
+            return totalWidth / this._tabs.length;
+        }
+        handleDragOver(event) {
+            if (!this._animState) {
+                return;
+            }
+            const mouseX = event.clientX;
+            let insertionIndex = null;
+            for (let i = 0; i < this._tabs.length; i++) {
+                const tab = this._tabs[i].value;
+                if (tab.panel.id === this._animState.sourceTabId) {
+                    continue;
+                }
+                const rect = tab.element.getBoundingClientRect();
+                const 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();
+        }
+        applyDragOverTransforms() {
+            if (!this._animState ||
+                this._animState.currentInsertionIndex === null) {
+                this.resetTabTransforms();
+                return;
+            }
+            const insertionIndex = this._animState.currentInsertionIndex;
+            const sourceRect = this._animState.tabPositions.get(this._animState.sourceTabId);
+            const gapWidth = sourceRect
+                ? sourceRect.width
+                : this.getAverageTabWidth();
+            // Find the first non-source tab at insertionIndex to receive the gap margin
+            let gapApplied = false;
+            for (let i = 0; i < this._tabs.length; i++) {
+                const tab = this._tabs[i].value;
+                if (tab.panel.id === this._animState.sourceTabId) {
+                    continue;
+                }
+                if (!gapApplied && i >= insertionIndex) {
+                    tab.element.style.marginLeft = `${gapWidth}px`;
+                    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';
+                        toggleClass(tab.element, 'dv-tab--shifting', true);
+                        const onEnd = () => {
+                            tab.element.style.removeProperty('margin-left');
+                            toggleClass(tab.element, 'dv-tab--shifting', false);
+                            tab.element.removeEventListener('transitionend', onEnd);
+                        };
+                        tab.element.addEventListener('transitionend', onEnd);
+                    }
+                    else {
+                        toggleClass(tab.element, 'dv-tab--shifting', false);
+                    }
+                }
+            }
+        }
+        resetTabTransforms() {
+            for (const tab of this._tabs) {
+                tab.value.element.style.removeProperty('margin-left');
+                tab.value.element.style.removeProperty('transform');
+                toggleClass(tab.value.element, 'dv-tab--shifting', false);
+            }
+        }
+        resetDragAnimation() {
+            this.resetTabTransforms();
+            this._animState = null;
+            for (const tab of this._tabs) {
+                toggleClass(tab.value.element, 'dv-tab--dragging', false);
+            }
+        }
+        runFlipAnimation(firstPositions, sourceTabId, isCrossGroup = false, animRange) {
+            let hasAnimation = false;
+            for (let i = 0; i < this._tabs.length; i++) {
+                const tab = this._tabs[i];
+                const panelId = tab.value.panel.id;
+                if (panelId === sourceTabId) {
+                    if (isCrossGroup) {
+                        // Newly inserted tab: slide in from the right
+                        const rect = tab.value.element.getBoundingClientRect();
+                        tab.value.element.style.transform = `translateX(${rect.width}px)`;
+                        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;
+                }
+                const firstRect = firstPositions.get(panelId);
+                if (!firstRect) {
+                    continue;
+                }
+                const lastRect = tab.value.element.getBoundingClientRect();
+                const deltaX = firstRect.left - lastRect.left;
+                if (Math.abs(deltaX) < 1) {
+                    continue;
+                }
+                tab.value.element.style.transform = `translateX(${deltaX}px)`;
+                toggleClass(tab.value.element, 'dv-tab--shifting', true);
+                hasAnimation = true;
+            }
+            if (!hasAnimation) {
+                return;
+            }
+            requestAnimationFrame(() => {
+                for (const tab of this._tabs) {
+                    if (tab.value.element.style.transform) {
+                        tab.value.element.style.transform = '';
+                    }
+                }
+                const onTransitionEnd = (event) => {
+                    if (event.propertyName === 'transform') {
+                        this._tabsList.removeEventListener('transitionend', onTransitionEnd);
+                        for (const tab of this._tabs) {
+                            toggleClass(tab.value.element, 'dv-tab--shifting', false);
+                        }
+                    }
+                };
+                this._tabsList.addEventListener('transitionend', onTransitionEnd);
+            });
+        }
     }
 
     const createSvgElementFromPath = (params) => {
@@ -5922,6 +6213,7 @@
         }
     }
 
+    const DEFAULT_TAB_ANIMATION = 'default';
     class DockviewUnhandledDragOverEvent extends AcceptableEvent {
         constructor(nativeEvent, target, position, getData, group) {
             super();
@@ -5956,6 +6248,7 @@
             theme: undefined,
             disableTabsOverflowList: undefined,
             scrollbars: undefined,
+            tabAnimation: undefined,
         };
         return Object.keys(properties);
     })();
@@ -11486,6 +11779,7 @@
 
     exports.BaseGrid = BaseGrid;
     exports.ContentContainer = ContentContainer;
+    exports.DEFAULT_TAB_ANIMATION = DEFAULT_TAB_ANIMATION;
     exports.DefaultDockviewDeserialzier = DefaultDockviewDeserialzier;
     exports.DefaultTab = DefaultTab;
     exports.DockviewApi = DockviewApi;

package/dist/esm/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/esm/dockview/components/tab/tab.js

@@ -38,6 +38,8 @@ export class Tab extends CompositeDisposable {
         this.onDrop = this._onDropped.event;
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
+        this._onDragEnd = new Emitter();
+        this.onDragEnd = this._onDragEnd.event;
         this._element = document.createElement('div');
         this._element.className = 'dv-tab';
         this._element.tabIndex = 0;
@@ -53,6 +55,10 @@ export class Tab extends CompositeDisposable {
                 }
                 const data = 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');
@@ -60,7 +66,7 @@ export class Tab extends CompositeDisposable {
             getOverrideTarget: () => { 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((event) => {
+        this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, this._onDragEnd, this.dragHandler.onDragStart((event) => {
             if (event.dataTransfer) {
                 const style = getComputedStyle(this.element);
                 const newNode = this.element.cloneNode(true);
@@ -72,6 +78,16 @@ export class Tab extends CompositeDisposable {
                 });
             }
             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(() => {
+                    toggleClass(this.element, 'dv-tab--dragging', true);
+                });
+            }
+        }), addDisposableListener(this._element, 'dragend', (event) => {
+            toggleClass(this.element, 'dv-tab--dragging', false);
+            this._onDragEnd.fire(event);
         }), this.dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
             this._onPointDown.fire(event);
         }), this.dropTarget.onDrop((event) => {

package/dist/esm/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;
 }