dockview-core 5.0.0 → 5.2.0

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

@@ -1,5 +1,5 @@
 import { getPanelData } from '../../../dnd/dataTransfer';
-import { addClasses, isChildEntirelyVisibleWithinParent, OverflowObserver, removeClasses, } from '../../../dom';
+import { addClasses, isChildEntirelyVisibleWithinParent, OverflowObserver, removeClasses, toggleClass, } from '../../../dom';
 import { addDisposableListener, Emitter } from '../../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { Scrollbar } from '../../../scrollbar';
@@ -66,6 +66,7 @@ export class Tabs extends CompositeDisposable {
         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();
@@ -94,7 +95,88 @@ export class Tabs extends CompositeDisposable {
             if (isLeftClick) {
                 this.accessor.doSetGroupActive(this.group);
             }
-        }), Disposable.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), Disposable.from(() => {
+            this.resetDragAnimation();
             for (const { value, disposable } of this._tabs) {
                 disposable.dispose();
                 value.dispose();
@@ -134,6 +216,14 @@ export class Tabs extends CompositeDisposable {
         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;
@@ -163,10 +253,29 @@ export class Tabs extends CompositeDisposable {
                     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',
@@ -178,14 +287,29 @@ export class Tabs extends CompositeDisposable {
         }));
         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) {
@@ -214,4 +338,155 @@ export class Tabs extends CompositeDisposable {
             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);
+        });
+    }
 }

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

@@ -1,4 +1,5 @@
 import { AcceptableEvent } from '../events';
+export const DEFAULT_TAB_ANIMATION = 'default';
 export class DockviewUnhandledDragOverEvent extends AcceptableEvent {
     constructor(nativeEvent, target, position, getData, group) {
         super();
@@ -33,6 +34,7 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         theme: undefined,
         disableTabsOverflowList: undefined,
         scrollbars: undefined,
+        tabAnimation: undefined,
     };
     return Object.keys(properties);
 })();

package/dist/esm/overlay/overlayRenderContainer.js

@@ -79,6 +79,9 @@ export class OverlayRenderContainer extends CompositeDisposable {
         if (!this.map[panel.api.id]) {
             const element = createFocusableElement();
             element.className = 'dv-render-overlay';
+            // Hide until the first RAF-based position is applied to prevent a
+            // one-frame flash at position 0,0 when the element is first attached.
+            element.style.visibility = 'hidden';
             this.map[panel.api.id] = {
                 panel,
                 disposable: Disposable.NONE,
@@ -115,6 +118,11 @@ export class OverlayRenderContainer extends CompositeDisposable {
                 focusContainer.style.top = `${top}px`;
                 focusContainer.style.width = `${width}px`;
                 focusContainer.style.height = `${height}px`;
+                // Reveal after the first position is applied (was hidden to
+                // prevent a flash at 0,0 before the initial layout fires).
+                if (focusContainer.style.visibility === 'hidden') {
+                    focusContainer.style.visibility = '';
+                }
                 toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
             });
         };