dockview-core 6.3.0 → 6.4.0

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

@@ -1,3 +1,4 @@
+import { IDragSource } from '../../../dnd/backend';
 import { IDisposable, IValueDisposable } from '../../../lifecycle';
 import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
@@ -5,6 +6,7 @@ import { DockviewHeaderDirection } from '../../options';
 import { Tab } from '../tab/tab';
 import { ITabGroup } from '../../tabGroup';
 import { ITabGroupChipRenderer } from '../../framework';
+import { Droptarget, DroptargetEvent } from '../../../dnd/droptarget';
 export interface TabGroupManagerContext {
     readonly group: DockviewGroupPanel;
     readonly accessor: DockviewComponent;
@@ -15,7 +17,21 @@ export interface TabGroupManagerContext {
 }
 export interface TabGroupManagerCallbacks {
     onChipContextMenu(tabGroup: ITabGroup, event: MouseEvent): void;
-    onChipDragStart(tabGroup: ITabGroup, chip: ITabGroupChipRenderer, event: DragEvent): void;
+    onChipDragStart(tabGroup: ITabGroup, chip: ITabGroupChipRenderer, event: DragEvent | PointerEvent): void;
+    /**
+     * HTML5 chip dragend only. Pointer dragend is handled centrally via
+     * `PointerDragController.onDragEnd` in `tabs.ts`.
+     */
+    onChipDragEnd?(tabGroup: ITabGroup, chip: ITabGroupChipRenderer, event: DragEvent | PointerEvent): void;
+    onChipDrop(tabGroup: ITabGroup, event: DroptargetEvent): void;
+}
+interface ChipRendererEntry {
+    chip: ITabGroupChipRenderer;
+    /** Created by the manager so it can be toggled live on strategy changes. */
+    html5DragSource: IDragSource;
+    pointerDragSource: IDragSource;
+    disposable: IDisposable;
+    dropTarget: Droptarget;
 }
 export declare class TabGroupManager {
     private readonly _ctx;
@@ -24,10 +40,7 @@ export declare class TabGroupManager {
     private _indicator;
     private _skipNextCollapseAnimation;
     private readonly _pendingTransitionCleanups;
-    get chipRenderers(): ReadonlyMap<string, {
-        chip: ITabGroupChipRenderer;
-        disposable: IDisposable;
-    }>;
+    get chipRenderers(): ReadonlyMap<string, ChipRendererEntry>;
     get groupUnderlines(): ReadonlyMap<string, HTMLElement>;
     get skipNextCollapseAnimation(): boolean;
     set skipNextCollapseAnimation(value: boolean);
@@ -44,14 +57,29 @@ export declare class TabGroupManager {
      */
     refreshAccents(): void;
     positionAllChips(): void;
+    updateDirection(): void;
     snapshotChipWidths(): Map<string, number>;
     positionUnderlines(): void;
     trackUnderlines(): void;
     setGroupDragImage(event: DragEvent, tabGroup: ITabGroup, chipEl: HTMLElement): void;
     cleanupTransition(panelId: string): void;
+    updateDragAndDropState(): void;
+    /**
+     * Synchronously dispose the chip drag sources for an in-flight chip
+     * drag. Called from `_commitGroupMove` so the transfer payload +
+     * 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.
+     */
+    disposeChipDrag(tabGroupId: string): void;
+    /** Cloned chip rect used as the pointer follow-finger ghost. */
+    private _buildChipGhostElement;
     disposeAll(): void;
     private _ensureIndicator;
     private _ensureChipForGroup;
     private _positionChipForGroup;
     private _updateTabGroupClasses;
 }
+export {};

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

@@ -1,8 +1,14 @@
 import { toggleClass } from '../../../dom';
 import { addDisposableListener } from '../../../events';
+import { LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
+import { html5Backend, pointerBackend, } from '../../../dnd/backend';
+import { LongPressDetector } from '../../../dnd/pointer/longPress';
 import { CompositeDisposable, } from '../../../lifecycle';
+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 {
@@ -74,6 +80,12 @@ export class TabGroupManager {
             this._positionChipForGroup(tabGroup);
         }
     }
+    updateDirection() {
+        const isVertical = this._ctx.getDirection() === 'vertical';
+        for (const [, entry] of this._chipRenderers) {
+            entry.dropTarget.setTargetZones(isVertical ? ['top'] : ['left']);
+        }
+    }
     snapshotChipWidths() {
         const widths = new Map();
         for (const [groupId, entry] of this._chipRenderers) {
@@ -167,6 +179,45 @@ export class TabGroupManager {
         (_a = this._pendingTransitionCleanups.get(panelId)) === null || _a === void 0 ? void 0 : _a();
         this._pendingTransitionCleanups.delete(panelId);
     }
+    updateDragAndDropState() {
+        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);
+        }
+    }
+    /**
+     * Synchronously dispose the chip drag sources for an in-flight chip
+     * drag. Called from `_commitGroupMove` so the transfer payload +
+     * 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.
+     */
+    disposeChipDrag(tabGroupId) {
+        var _a, _b;
+        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();
+    }
+    /** Cloned chip rect used as the pointer follow-finger ghost. */
+    _buildChipGhostElement(chipEl) {
+        const style = getComputedStyle(chipEl);
+        const clone = chipEl.cloneNode(true);
+        Array.from(style).forEach((key) => {
+            clone.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
+        });
+        clone.style.position = 'absolute';
+        return clone;
+    }
     disposeAll() {
         var _a;
         (_a = this._indicator) === null || _a === void 0 ? void 0 : _a.dispose();
@@ -212,6 +263,74 @@ export class TabGroupManager {
             ? createChip(tabGroup)
             : new TabGroupChip(this._ctx.accessor.tabGroupColorPalette);
         chip.init({ tabGroup, api: this._ctx.accessor.api });
+        const caps = resolveDndCapabilities(this._ctx.accessor.options);
+        chip.element.draggable = caps.html5;
+        const panelTransfer = LocalSelectionTransfer.getInstance();
+        // Shared `getData` for both backends. Sets a group-level
+        // PanelTransfer (panelId=null, tabGroupId identifies the group).
+        // The returned disposer clears it on drag end.
+        const getData = () => {
+            panelTransfer.setData([
+                new PanelTransfer(this._ctx.accessor.id, this._ctx.group.id, null, tabGroup.id),
+            ], PanelTransfer.prototype);
+            return {
+                dispose: () => {
+                    panelTransfer.clearData(PanelTransfer.prototype);
+                },
+            };
+        };
+        // The chip's HTML5 drag image is the cloned tabs list (chip only),
+        // mounted inside the dockview root for CSS-variable inheritance and
+        // positioned against the chip's in-place rect. Layout-dependent
+        // offset means we set the drag image directly in `onDragStart`
+        // (inside the dragstart handler) rather than via the generic
+        // `createGhost` factory, which only knows about ghost specs that
+        // can be appended to `document.body`.
+        const html5DragSource = html5Backend.createDragSource(chip.element, {
+            getData,
+            disabled: !caps.html5,
+            isCancelled: () => !resolveDndCapabilities(this._ctx.accessor.options).html5,
+            onDragStart: (event) => {
+                // Type guard via `dataTransfer` — `instanceof DragEvent`
+                // would throw in jsdom which doesn't ship a DragEvent
+                // constructor.
+                if ('dataTransfer' in event && event.dataTransfer) {
+                    this.setGroupDragImage(event, tabGroup, chip.element);
+                }
+                this._callbacks.onChipDragStart(tabGroup, chip, event);
+            },
+            onDragEnd: (event) => {
+                var _a, _b;
+                (_b = (_a = this._callbacks).onChipDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, tabGroup, chip, event);
+            },
+        });
+        // Synchronous panelTransfer cleanup directly on the chip element.
+        // `Html5DragSource`'s dragend defers data disposal via `setTimeout(0)`
+        // so drop handlers can read the payload — but a chip drag that
+        // ends via `moveGroupOrPanel` (no actual drop event) needs the
+        // singleton cleared immediately, otherwise a synchronous
+        // `getPanelData()` after the move still sees the stale chip
+        // payload. Attached directly (not via `addDisposableListener`) so
+        // 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', () => {
+            panelTransfer.clearData(PanelTransfer.prototype);
+        }, { once: true });
+        const pointerDragSource = pointerBackend.createDragSource(chip.element, {
+            getData,
+            disabled: !caps.pointer,
+            touchOnly: !caps.pointerHandlesMouse,
+            isCancelled: () => !resolveDndCapabilities(this._ctx.accessor.options).pointer,
+            createGhost: () => ({
+                element: this._buildChipGhostElement(chip.element),
+                offsetX: 8,
+                offsetY: 8,
+            }),
+            onDragStart: (event) => {
+                this._callbacks.onChipDragStart(tabGroup, chip, event);
+            },
+        });
         const disposables = [
             tabGroup.onDidChange(() => {
                 var _a;
@@ -225,24 +344,70 @@ export class TabGroupManager {
             tabGroup.onDidCollapseChange(() => {
                 this._updateTabGroupClasses();
             }),
+            html5DragSource,
+            pointerDragSource,
         ];
-        // Wire chip context menu and drag for all chip renderers
+        // 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) => {
+            // A long-press on a chip should preempt the in-flight pointer
+            // drag and open the menu instead.
+            pointerDragSource.cancelPending();
+            this._callbacks.onChipContextMenu(tabGroup, event);
+        };
         if (chip instanceof TabGroupChip) {
-            disposables.push(chip.onContextMenu((event) => {
-                this._callbacks.onChipContextMenu(tabGroup, event);
-            }), chip.onDragStart((event) => {
-                this._callbacks.onChipDragStart(tabGroup, chip, event);
-            }));
+            disposables.push(chip.onContextMenu(onContextMenu));
         }
         else {
-            disposables.push(addDisposableListener(chip.element, 'contextmenu', (event) => {
-                this._callbacks.onChipContextMenu(tabGroup, event);
-            }), addDisposableListener(chip.element, 'dragstart', (event) => {
-                this._callbacks.onChipDragStart(tabGroup, chip, event);
-            }));
+            disposables.push(new LongPressDetector(chip.element, {
+                onLongPress: onContextMenu,
+            }), addDisposableListener(chip.element, 'contextmenu', onContextMenu));
         }
+        // The chip sits before its group's first tab in the DOM, so it
+        // covers the "drop before the group" position. Without a drop
+        // target here, dropping a tab over the chip is a dead zone —
+        // particularly visible when the group is first in the tabs list
+        // and there's no preceding tab whose right zone covers position 0.
+        // The smooth animation path already shifts the chip's margin to
+        // open a gap, so suppress the overlay in that mode.
+        const isVertical = this._ctx.getDirection() === 'vertical';
+        const dropTarget = new Droptarget(chip.element, {
+            acceptedTargetZones: isVertical ? ['top'] : ['left'],
+            overlayModel: {
+                activationSize: { value: 100, type: 'percentage' },
+            },
+            canDisplayOverlay: (event, position) => {
+                var _a;
+                if (this._ctx.group.locked) {
+                    return false;
+                }
+                if (this._ctx.accessor.options.disableDnd) {
+                    return false;
+                }
+                const data = getPanelData();
+                if (data && this._ctx.accessor.id === data.viewId) {
+                    if (((_a = this._ctx.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) ===
+                        'smooth') {
+                        return false;
+                    }
+                    return true;
+                }
+                return this._ctx.group.model.canDisplayOverlay(event, position, 'tab');
+            },
+        });
+        disposables.push(dropTarget, dropTarget.onDrop((event) => {
+            this._callbacks.onChipDrop(tabGroup, event);
+        }));
         const disposable = new CompositeDisposable(...disposables);
-        this._chipRenderers.set(tabGroup.id, { chip, disposable });
+        this._chipRenderers.set(tabGroup.id, {
+            chip,
+            html5DragSource,
+            pointerDragSource,
+            disposable,
+            dropTarget,
+        });
         // Group is born collapsed (cross-group drop, layout restore, etc.):
         // its tabs are about to be added without the collapsed class. Skip
         // the animation in the upcoming _updateTabGroupClasses call so they

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

@@ -26,7 +26,7 @@ export declare class Tabs extends CompositeDisposable {
     private _voidContainer;
     private _voidContainerListeners;
     private _extendedDropZone;
-    private _chipDragCleanup;
+    private _pointerInsideTabsList;
     private readonly _tabGroupManager;
     private readonly _onTabDragStart;
     readonly onTabDragStart: Event<TabDragEvent>;
@@ -72,7 +72,22 @@ export declare class Tabs extends CompositeDisposable {
      */
     updateTabGroups(): void;
     refreshTabGroupAccent(): void;
+    /**
+     * Tabs-list-specific side effects of a chip drag start. The chip's
+     * drag sources (constructed by `TabGroupManager`) own the transfer
+     * payload, iframe shielding, dataTransfer setup, and the HTML5 drag
+     * image. This method just sets up the smooth-reorder anim state and
+     * collapses the source-group tabs in the tabs list.
+     */
     private _handleChipDragStart;
+    /**
+     * A drop on a tab group chip means "insert before this group". Resolve to
+     * the index of the group's first tab, adjusting for same-group removal
+     * (when the source tab is currently to the left of the target slot, its
+     * removal shifts the insertion index down by one). Always clears
+     * `targetTabGroupId` so the dropped tab lands outside the group.
+     */
+    private _handleChipDrop;
     /**
      * Sets the broader container that is part of the same logical drop surface
      * as this tab list (e.g. the full header element).  When a dragleave from
@@ -94,6 +109,28 @@ export declare class Tabs extends CompositeDisposable {
     clearExternalAnimState(): void;
     private snapshotTabPositions;
     private getAverageTabWidth;
+    /**
+     * Pointer-event entry point. The HTML5 path enters via the per-element
+     * `dragover` listener; this one hit-tests the global pointer-drag
+     * position against the tabs list and routes through the same shared
+     * `_processDragOver` / `_processDragLeave` helpers.
+     */
+    private _handlePointerDragMove;
+    /**
+     * Shared body of the dragover entry point. Refreshes stale anim state
+     * for a changed drag identity, initializes anim state for incoming
+     * cross-group drags, and dispatches to the gap-following math in
+     * `handleDragOver`. Returns true when this tabs list has taken
+     * ownership of the drag — HTML5 callers use this to gate
+     * `event.preventDefault()`.
+     */
+    private _processDragOver;
+    /**
+     * Shared body of the dragleave entry point. Preserves anim state when
+     * the drag moves between tabs-list children, into the extended drop
+     * zone, or into the void container; tears it down otherwise.
+     */
+    private _processDragLeave;
     private handleDragOver;
     /**
      * Batch-remove a CSS class from multiple elements instantly,