dockview-core 6.6.1 → 7.0.3

package/dist/esm/dockview/components/titlebar/tabGroupIndicator.d.ts

@@ -1,5 +1,5 @@
 import { IValueDisposable } from '../../../lifecycle';
-import { DockviewHeaderDirection } from '../../options';
+import { DockviewHeaderDirection, DockviewHeaderPosition } from '../../options';
 import { Tab } from '../tab/tab';
 import { ITabGroup } from '../../tabGroup';
 import { TabGroupColorPalette } from '../../tabGroupAccent';
@@ -10,6 +10,7 @@ export interface TabGroupIndicatorContext {
     getTabMap(): Map<string, IValueDisposable<Tab>>;
     getChipElement(groupId: string): HTMLElement | undefined;
     getDirection(): DockviewHeaderDirection;
+    getHeaderPosition(): DockviewHeaderPosition;
     getColorPalette(): TabGroupColorPalette | undefined;
 }
 export interface ITabGroupIndicator {

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

@@ -142,8 +142,7 @@ class BaseTabGroupIndicator {
             const isAnimating = tg.collapsed ||
                 tg.panelIds.some((pid) => {
                     const te = tabMap.get(pid);
-                    return (te &&
-                        te.value.element.classList.contains('dv-tab--group-expanding'));
+                    return te === null || te === void 0 ? void 0 : te.value.element.classList.contains('dv-tab--group-expanding');
                 });
             if (isAnimating && chipEl) {
                 const chipRect = chipEl.getBoundingClientRect();
@@ -240,7 +239,10 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
         // Ensure SVG + path child exists (created once, reused)
         let svg = underline.firstElementChild;
         let path;
-        if (!svg || svg.tagName !== 'svg') {
+        if ((svg === null || svg === void 0 ? void 0 : svg.tagName) === 'svg') {
+            path = svg.firstElementChild;
+        }
+        else {
             underline.replaceChildren();
             svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
             svg.style.display = 'block';
@@ -249,9 +251,6 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
             svg.appendChild(path);
             underline.appendChild(svg);
         }
-        else {
-            path = svg.firstElementChild;
-        }
         path.setAttribute('stroke', color);
         path.setAttribute('stroke-width', String(t));
         if (!activeTabEntry) {
@@ -276,6 +275,7 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
         }
         const r = 6; // corner radius
         const half = t / 2;
+        const headerPosition = this._ctx.getHeaderPosition();
         if (isVertical) {
             const svgW = crossSize;
             const svgH = mainSize;
@@ -283,19 +283,22 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
             svg.setAttribute('height', String(svgH));
             underline.style.width = `${svgW}px`;
             underline.style.height = `${svgH}px`;
-            const xLeft = half;
-            const xRight = svgW - half;
+            // right header: indicator on the left edge (invert x sides)
+            const isRightHeader = headerPosition === 'right';
+            const xNear = isRightHeader ? svgW - half : half;
+            const xFar = isRightHeader ? half : svgW - half;
+            const cd = isRightHeader ? -1 : 1; // curve direction
             const d = [
-                `M ${xLeft},0`,
-                `L ${xLeft},${aStart - r}`,
-                `Q ${xLeft},${aStart} ${xLeft + r},${aStart}`,
-                `L ${xRight - r},${aStart}`,
-                `Q ${xRight},${aStart} ${xRight},${aStart + r}`,
-                `L ${xRight},${aEnd - r}`,
-                `Q ${xRight},${aEnd} ${xRight - r},${aEnd}`,
-                `L ${xLeft + r},${aEnd}`,
-                `Q ${xLeft},${aEnd} ${xLeft},${aEnd + r}`,
-                `L ${xLeft},${svgH}`,
+                `M ${xNear},0`,
+                `L ${xNear},${aStart - r}`,
+                `Q ${xNear},${aStart} ${xNear + cd * r},${aStart}`,
+                `L ${xFar - cd * r},${aStart}`,
+                `Q ${xFar},${aStart} ${xFar},${aStart + r}`,
+                `L ${xFar},${aEnd - r}`,
+                `Q ${xFar},${aEnd} ${xFar - cd * r},${aEnd}`,
+                `L ${xNear + cd * r},${aEnd}`,
+                `Q ${xNear},${aEnd} ${xNear},${aEnd + r}`,
+                `L ${xNear},${svgH}`,
             ].join(' ');
             path.setAttribute('d', d);
         }
@@ -306,19 +309,22 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
             svg.setAttribute('height', String(svgH));
             underline.style.width = `${svgW}px`;
             underline.style.height = `${svgH}px`;
-            const yBot = svgH - half;
-            const yTop = half;
+            // bottom header: indicator on the top edge (invert y sides)
+            const isBottomHeader = headerPosition === 'bottom';
+            const yNear = isBottomHeader ? half : svgH - half;
+            const yFar = isBottomHeader ? svgH - half : half;
+            const cd = isBottomHeader ? 1 : -1; // curve direction
             const d = [
-                `M 0,${yBot}`,
-                `L ${aStart - r},${yBot}`,
-                `Q ${aStart},${yBot} ${aStart},${yBot - r}`,
-                `L ${aStart},${yTop + r}`,
-                `Q ${aStart},${yTop} ${aStart + r},${yTop}`,
-                `L ${aEnd - r},${yTop}`,
-                `Q ${aEnd},${yTop} ${aEnd},${yTop + r}`,
-                `L ${aEnd},${yBot - r}`,
-                `Q ${aEnd},${yBot} ${aEnd + r},${yBot}`,
-                `L ${svgW},${yBot}`,
+                `M 0,${yNear}`,
+                `L ${aStart - r},${yNear}`,
+                `Q ${aStart},${yNear} ${aStart},${yNear + cd * r}`,
+                `L ${aStart},${yFar - cd * r}`,
+                `Q ${aStart},${yFar} ${aStart + r},${yFar}`,
+                `L ${aEnd - r},${yFar}`,
+                `Q ${aEnd},${yFar} ${aEnd},${yFar - cd * r}`,
+                `L ${aEnd},${yNear + cd * r}`,
+                `Q ${aEnd},${yNear} ${aEnd + r},${yNear}`,
+                `L ${svgW},${yNear}`,
             ].join(' ');
             path.setAttribute('d', d);
         }

package/dist/esm/dockview/components/titlebar/tabGroups.d.ts

@@ -27,9 +27,17 @@ export interface TabGroupManagerCallbacks {
 }
 interface ChipRendererEntry {
     chip: ITabGroupChipRenderer;
-    /** Created by the manager so it can be toggled live on strategy changes. */
-    html5DragSource: IDragSource;
-    pointerDragSource: IDragSource;
+    /**
+     * Created by the manager so it can be toggled live on strategy changes.
+     * Undefined between an in-flight drag being torn down by
+     * `disposeChipDrag` and the following `update()` re-arming it — the chip
+     * element outlives a within-group move even though its drag sources do
+     * not. (#1410)
+     */
+    html5DragSource: IDragSource | undefined;
+    pointerDragSource: IDragSource | undefined;
+    /** Disposes the two drag sources + their shared dragend listener. */
+    dragSourcesDisposable: IDisposable | undefined;
     disposable: IDisposable;
     dropTarget: Droptarget;
 }
@@ -70,14 +78,28 @@ export declare class TabGroupManager {
      * iframe shield are released BEFORE the cross-group move detaches
      * the chip (chip dispose is scheduled on a microtask via
      * `_scheduleTabGroupUpdate`, which is too late for callers that read
-     * `getPanelData()` synchronously after the move). Idempotent — the
-     * subsequent `update()` will also dispose the sources.
+     * `getPanelData()` synchronously after the move).
+     *
+     * A cross-group move dissolves the source chip entirely, but a
+     * within-group reorder keeps the same chip element — so the sources are
+     * cleared to `undefined` here and the subsequent `update()` re-arms them
+     * via `_ensureChipForGroup`. Without that re-arm the chip would fire a
+     * native `dragstart` (the element keeps `draggable=true`) but never set
+     * a transfer payload, leaving the group permanently undraggable after
+     * its first move. (#1410)
      */
     disposeChipDrag(tabGroupId: string): void;
     /** Cloned chip rect used as the pointer follow-finger ghost. */
     private _buildChipGhostElement;
     disposeAll(): void;
     private _ensureIndicator;
+    /**
+     * Create the HTML5 + pointer drag sources for a chip (and the direct
+     * dragend listener that clears the transfer synchronously). Extracted so
+     * both the initial chip build and the post-move re-arm in
+     * `_ensureChipForGroup` share one wiring path. (#1410)
+     */
+    private _createChipDragSources;
     private _ensureChipForGroup;
     private _positionChipForGroup;
     private _updateTabGroupClasses;

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

@@ -1,6 +1,6 @@
 import { toggleClass } from '../../../dom';
 import { addDisposableListener } from '../../../events';
-import { LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
+import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
 import { html5Backend, pointerBackend, } from '../../../dnd/backend';
 import { LongPressDetector } from '../../../dnd/pointer/longPress';
 import { CompositeDisposable, } from '../../../lifecycle';
@@ -8,7 +8,6 @@ import { resolveDndCapabilities } from '../../dndCapabilities';
 import { applyTabGroupAccent } from '../../tabGroupAccent';
 import { TabGroupChip } from './tabGroupChip';
 import { Droptarget } from '../../../dnd/droptarget';
-import { getPanelData } from '../../../dnd/dataTransfer';
 import { NoneTabGroupIndicator, WrapTabGroupIndicator, } from './tabGroupIndicator';
 const EMPTY_MAP = new Map();
 export class TabGroupManager {
@@ -38,6 +37,7 @@ export class TabGroupManager {
      * in the parent group model. Call after any tab group mutation.
      */
     update() {
+        var _a;
         const model = this._ctx.group.model;
         const tabGroups = model.getTabGroups();
         // Track which group IDs are still active
@@ -52,6 +52,7 @@ export class TabGroupManager {
             if (!activeGroupIds.has(groupId)) {
                 entry.chip.element.remove();
                 entry.chip.dispose();
+                (_a = entry.dragSourcesDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
                 entry.disposable.dispose();
                 this._chipRenderers.delete(groupId);
             }
@@ -180,12 +181,13 @@ export class TabGroupManager {
         this._pendingTransitionCleanups.delete(panelId);
     }
     updateDragAndDropState() {
+        var _a, _b, _c;
         const caps = resolveDndCapabilities(this._ctx.accessor.options);
         for (const entry of this._chipRenderers.values()) {
             entry.chip.element.draggable = caps.html5;
-            entry.html5DragSource.setDisabled(!caps.html5);
-            entry.pointerDragSource.setDisabled(!caps.pointer);
-            entry.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+            (_a = entry.html5DragSource) === null || _a === void 0 ? void 0 : _a.setDisabled(!caps.html5);
+            (_b = entry.pointerDragSource) === null || _b === void 0 ? void 0 : _b.setDisabled(!caps.pointer);
+            (_c = entry.pointerDragSource) === null || _c === void 0 ? void 0 : _c.setTouchOnly(!caps.pointerHandlesMouse);
         }
     }
     /**
@@ -194,19 +196,28 @@ export class TabGroupManager {
      * iframe shield are released BEFORE the cross-group move detaches
      * the chip (chip dispose is scheduled on a microtask via
      * `_scheduleTabGroupUpdate`, which is too late for callers that read
-     * `getPanelData()` synchronously after the move). Idempotent — the
-     * subsequent `update()` will also dispose the sources.
+     * `getPanelData()` synchronously after the move).
+     *
+     * A cross-group move dissolves the source chip entirely, but a
+     * within-group reorder keeps the same chip element — so the sources are
+     * cleared to `undefined` here and the subsequent `update()` re-arms them
+     * via `_ensureChipForGroup`. Without that re-arm the chip would fire a
+     * native `dragstart` (the element keeps `draggable=true`) but never set
+     * a transfer payload, leaving the group permanently undraggable after
+     * its first move. (#1410)
      */
     disposeChipDrag(tabGroupId) {
-        var _a, _b;
+        var _a;
         const entry = this._chipRenderers.get(tabGroupId);
         if (!entry) {
             return;
         }
         // Optional-chained because tests may inject minimal entries
         // that skip the manager's normal `_ensureChipForGroup` flow.
-        (_a = entry.html5DragSource) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = entry.pointerDragSource) === null || _b === void 0 ? void 0 : _b.dispose();
+        (_a = entry.dragSourcesDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+        entry.html5DragSource = undefined;
+        entry.pointerDragSource = undefined;
+        entry.dragSourcesDisposable = undefined;
     }
     /** Cloned chip rect used as the pointer follow-finger ghost. */
     _buildChipGhostElement(chipEl) {
@@ -219,7 +230,7 @@ export class TabGroupManager {
         return clone;
     }
     disposeAll() {
-        var _a;
+        var _a, _b;
         (_a = this._indicator) === null || _a === void 0 ? void 0 : _a.dispose();
         this._indicator = null;
         for (const [, cleanup] of this._pendingTransitionCleanups) {
@@ -229,12 +240,13 @@ export class TabGroupManager {
         for (const [, entry] of this._chipRenderers) {
             entry.chip.element.remove();
             entry.chip.dispose();
+            (_b = entry.dragSourcesDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
             entry.disposable.dispose();
         }
         this._chipRenderers.clear();
     }
     _ensureIndicator() {
-        var _a, _b;
+        var _a, _b, _c;
         const mode = (_b = (_a = this._ctx.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabGroupIndicator) !== null && _b !== void 0 ? _b : 'wrap';
         const Ctor = mode === 'none' ? NoneTabGroupIndicator : WrapTabGroupIndicator;
         // Re-create if the indicator type changed (e.g. theme switch)
@@ -242,27 +254,24 @@ export class TabGroupManager {
             this._indicator.dispose();
             this._indicator = null;
         }
-        if (!this._indicator) {
-            this._indicator = new Ctor({
-                tabsList: this._ctx.tabsList,
-                getTabGroups: () => this._ctx.group.model.getTabGroups(),
-                getActivePanelId: () => { var _a; return (_a = this._ctx.group.activePanel) === null || _a === void 0 ? void 0 : _a.id; },
-                getTabMap: () => this._ctx.getTabMap(),
-                getChipElement: (id) => { var _a; return (_a = this._chipRenderers.get(id)) === null || _a === void 0 ? void 0 : _a.chip.element; },
-                getDirection: () => this._ctx.getDirection(),
-                getColorPalette: () => this._ctx.accessor.tabGroupColorPalette,
-            });
-        }
+        (_c = this._indicator) !== null && _c !== void 0 ? _c : (this._indicator = new Ctor({
+            tabsList: this._ctx.tabsList,
+            getTabGroups: () => this._ctx.group.model.getTabGroups(),
+            getActivePanelId: () => { var _a; return (_a = this._ctx.group.activePanel) === null || _a === void 0 ? void 0 : _a.id; },
+            getTabMap: () => this._ctx.getTabMap(),
+            getChipElement: (id) => { var _a; return (_a = this._chipRenderers.get(id)) === null || _a === void 0 ? void 0 : _a.chip.element; },
+            getDirection: () => this._ctx.getDirection(),
+            getHeaderPosition: () => this._ctx.group.model.headerPosition,
+            getColorPalette: () => this._ctx.accessor.tabGroupColorPalette,
+        }));
     }
-    _ensureChipForGroup(tabGroup) {
-        if (this._chipRenderers.has(tabGroup.id)) {
-            return;
-        }
-        const createChip = this._ctx.accessor.options.createTabGroupChipComponent;
-        const chip = createChip
-            ? createChip(tabGroup)
-            : new TabGroupChip(this._ctx.accessor.tabGroupColorPalette);
-        chip.init({ tabGroup, api: this._ctx.accessor.api });
+    /**
+     * Create the HTML5 + pointer drag sources for a chip (and the direct
+     * dragend listener that clears the transfer synchronously). Extracted so
+     * both the initial chip build and the post-move re-arm in
+     * `_ensureChipForGroup` share one wiring path. (#1410)
+     */
+    _createChipDragSources(chip, tabGroup) {
         const caps = resolveDndCapabilities(this._ctx.accessor.options);
         chip.element.draggable = caps.html5;
         const panelTransfer = LocalSelectionTransfer.getInstance();
@@ -314,9 +323,12 @@ export class TabGroupManager {
         // the listener survives chip disposal in the detach-then-dragend
         // cross-group path; `once: true` auto-removes after the single
         // dragend that we care about. (#1254)
-        chip.element.addEventListener('dragend', () => {
+        const onDragEndClear = () => {
             panelTransfer.clearData(PanelTransfer.prototype);
-        }, { once: true });
+        };
+        chip.element.addEventListener('dragend', onDragEndClear, {
+            once: true,
+        });
         const pointerDragSource = pointerBackend.createDragSource(chip.element, {
             getData,
             disabled: !caps.pointer,
@@ -331,6 +343,41 @@ export class TabGroupManager {
                 this._callbacks.onChipDragStart(tabGroup, chip, event);
             },
         });
+        return {
+            html5DragSource,
+            pointerDragSource,
+            disposable: {
+                dispose: () => {
+                    html5DragSource.dispose();
+                    pointerDragSource.dispose();
+                    chip.element.removeEventListener('dragend', onDragEndClear);
+                },
+            },
+        };
+    }
+    _ensureChipForGroup(tabGroup) {
+        const existing = this._chipRenderers.get(tabGroup.id);
+        if (existing) {
+            // A committed group move tears down the chip's drag sources via
+            // `disposeChipDrag`, but a within-group reorder keeps the same
+            // chip element alive. Re-arm the sources so the group stays
+            // draggable; without this the chip is stuck after its first
+            // move — `dragstart` still fires (the element keeps
+            // `draggable=true`) but no transfer payload is set. (#1410)
+            if (!existing.html5DragSource) {
+                const sources = this._createChipDragSources(existing.chip, tabGroup);
+                existing.html5DragSource = sources.html5DragSource;
+                existing.pointerDragSource = sources.pointerDragSource;
+                existing.dragSourcesDisposable = sources.disposable;
+            }
+            return;
+        }
+        const createChip = this._ctx.accessor.options.createTabGroupChipComponent;
+        const chip = createChip
+            ? createChip(tabGroup)
+            : new TabGroupChip(this._ctx.accessor.tabGroupColorPalette);
+        chip.init({ tabGroup, api: this._ctx.accessor.api });
+        const dragSources = this._createChipDragSources(chip, tabGroup);
         const disposables = [
             tabGroup.onDidChange(() => {
                 var _a;
@@ -344,17 +391,19 @@ export class TabGroupManager {
             tabGroup.onDidCollapseChange(() => {
                 this._updateTabGroupClasses();
             }),
-            html5DragSource,
-            pointerDragSource,
         ];
         // Context menu: built-in TabGroupChip already aggregates right-click
         // + touch long-press into `onContextMenu`. Custom chip renderers
         // don't, so attach a long-press detector and contextmenu listener
         // directly on their element.
         const onContextMenu = (event) => {
+            var _a, _b;
             // A long-press on a chip should preempt the in-flight pointer
-            // drag and open the menu instead.
-            pointerDragSource.cancelPending();
+            // drag and open the menu instead. Resolve the source from the
+            // entry so a post-move re-armed source is cancelled, not the
+            // stale one captured at build time. (#1410)
+            (_b = (_a = this._chipRenderers
+                .get(tabGroup.id)) === null || _a === void 0 ? void 0 : _a.pointerDragSource) === null || _b === void 0 ? void 0 : _b.cancelPending();
             this._callbacks.onChipContextMenu(tabGroup, event);
         };
         if (chip instanceof TabGroupChip) {
@@ -387,7 +436,7 @@ export class TabGroupManager {
                     return false;
                 }
                 const data = getPanelData();
-                if (data && this._ctx.accessor.id === data.viewId) {
+                if (this._ctx.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
                     if (((_a = this._ctx.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) ===
                         'smooth') {
                         return false;
@@ -403,8 +452,9 @@ export class TabGroupManager {
         const disposable = new CompositeDisposable(...disposables);
         this._chipRenderers.set(tabGroup.id, {
             chip,
-            html5DragSource,
-            pointerDragSource,
+            html5DragSource: dragSources.html5DragSource,
+            pointerDragSource: dragSources.pointerDragSource,
+            dragSourcesDisposable: dragSources.disposable,
             disposable,
             dropTarget,
         });

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

@@ -59,7 +59,19 @@ export declare class Tabs extends CompositeDisposable {
         showTabsOverflowControl: boolean;
     });
     indexOf(id: string): number;
+    /** DOM id of the tab element for a panel — for the tabpanel's `aria-labelledby`. */
+    getTabId(panelId: string): string | undefined;
     isActive(tab: Tab): boolean;
+    private _onKeyDown;
+    /**
+     * Close the tab at `index` and move roving focus to a neighbouring tab so
+     * keyboard focus stays in the tablist.
+     */
+    private _closeTab;
+    /** Move the roving focus to the tab at `index` (updates tabindex + DOM focus). */
+    private _focusTab;
+    /** Move DOM focus to the active tab — the entry point into the tablist. */
+    focusActiveTab(): void;
     setActivePanel(panel: IDockviewPanel): void;
     openPanel(panel: IDockviewPanel, index?: number): void;
     delete(id: string): void;