dockview-core 6.3.0 → 6.5.0

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

@@ -39,9 +39,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabGroupManager = void 0;
 var dom_1 = require("../../../dom");
 var events_1 = require("../../../events");
+var dataTransfer_1 = require("../../../dnd/dataTransfer");
+var backend_1 = require("../../../dnd/backend");
+var longPress_1 = require("../../../dnd/pointer/longPress");
 var lifecycle_1 = require("../../../lifecycle");
+var dndCapabilities_1 = require("../../dndCapabilities");
 var tabGroupAccent_1 = require("../../tabGroupAccent");
 var tabGroupChip_1 = require("./tabGroupChip");
+var droptarget_1 = require("../../../dnd/droptarget");
+var dataTransfer_2 = require("../../../dnd/dataTransfer");
 var tabGroupIndicator_1 = require("./tabGroupIndicator");
 var EMPTY_MAP = new Map();
 var TabGroupManager = /** @class */ (function () {
@@ -168,8 +174,25 @@ var TabGroupManager = /** @class */ (function () {
             finally { if (e_4) throw e_4.error; }
         }
     };
-    TabGroupManager.prototype.snapshotChipWidths = function () {
+    TabGroupManager.prototype.updateDirection = function () {
         var e_5, _a;
+        var isVertical = this._ctx.getDirection() === 'vertical';
+        try {
+            for (var _b = __values(this._chipRenderers), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), entry = _d[1];
+                entry.dropTarget.setTargetZones(isVertical ? ['top'] : ['left']);
+            }
+        }
+        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; }
+        }
+    };
+    TabGroupManager.prototype.snapshotChipWidths = function () {
+        var e_6, _a;
         var widths = new Map();
         try {
             for (var _b = __values(this._chipRenderers), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -177,12 +200,12 @@ var TabGroupManager = /** @class */ (function () {
                 widths.set(groupId, entry.chip.element.getBoundingClientRect().width);
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        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_5) throw e_5.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         return widths;
     };
@@ -272,8 +295,58 @@ var TabGroupManager = /** @class */ (function () {
         (_a = this._pendingTransitionCleanups.get(panelId)) === null || _a === void 0 ? void 0 : _a();
         this._pendingTransitionCleanups.delete(panelId);
     };
+    TabGroupManager.prototype.updateDragAndDropState = function () {
+        var e_7, _a;
+        var caps = (0, dndCapabilities_1.resolveDndCapabilities)(this._ctx.accessor.options);
+        try {
+            for (var _b = __values(this._chipRenderers.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var entry = _c.value;
+                entry.chip.element.draggable = caps.html5;
+                entry.html5DragSource.setDisabled(!caps.html5);
+                entry.pointerDragSource.setDisabled(!caps.pointer);
+                entry.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+            }
+        }
+        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; }
+        }
+    };
+    /**
+     * 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.
+     */
+    TabGroupManager.prototype.disposeChipDrag = function (tabGroupId) {
+        var _a, _b;
+        var 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. */
+    TabGroupManager.prototype._buildChipGhostElement = function (chipEl) {
+        var style = getComputedStyle(chipEl);
+        var clone = chipEl.cloneNode(true);
+        Array.from(style).forEach(function (key) {
+            clone.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
+        });
+        clone.style.position = 'absolute';
+        return clone;
+    };
     TabGroupManager.prototype.disposeAll = function () {
-        var e_6, _a, e_7, _b;
+        var e_8, _a, e_9, _b;
         var _c;
         (_c = this._indicator) === null || _c === void 0 ? void 0 : _c.dispose();
         this._indicator = null;
@@ -283,12 +356,12 @@ var TabGroupManager = /** @class */ (function () {
                 cleanup();
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
         finally {
             try {
                 if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_8) throw e_8.error; }
         }
         this._pendingTransitionCleanups.clear();
         try {
@@ -299,12 +372,12 @@ var TabGroupManager = /** @class */ (function () {
                 entry.disposable.dispose();
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
         finally {
             try {
                 if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_9) throw e_9.error; }
         }
         this._chipRenderers.clear();
     };
@@ -340,6 +413,78 @@ var TabGroupManager = /** @class */ (function () {
             ? createChip(tabGroup)
             : new tabGroupChip_1.TabGroupChip(this._ctx.accessor.tabGroupColorPalette);
         chip.init({ tabGroup: tabGroup, api: this._ctx.accessor.api });
+        var caps = (0, dndCapabilities_1.resolveDndCapabilities)(this._ctx.accessor.options);
+        chip.element.draggable = caps.html5;
+        var panelTransfer = dataTransfer_1.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.
+        var getData = function () {
+            panelTransfer.setData([
+                new dataTransfer_1.PanelTransfer(_this._ctx.accessor.id, _this._ctx.group.id, null, tabGroup.id),
+            ], dataTransfer_1.PanelTransfer.prototype);
+            return {
+                dispose: function () {
+                    panelTransfer.clearData(dataTransfer_1.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`.
+        var html5DragSource = backend_1.html5Backend.createDragSource(chip.element, {
+            getData: getData,
+            disabled: !caps.html5,
+            isCancelled: function () {
+                return !(0, dndCapabilities_1.resolveDndCapabilities)(_this._ctx.accessor.options).html5;
+            },
+            onDragStart: function (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: function (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', function () {
+            panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
+        }, { once: true });
+        var pointerDragSource = backend_1.pointerBackend.createDragSource(chip.element, {
+            getData: getData,
+            disabled: !caps.pointer,
+            touchOnly: !caps.pointerHandlesMouse,
+            isCancelled: function () {
+                return !(0, dndCapabilities_1.resolveDndCapabilities)(_this._ctx.accessor.options).pointer;
+            },
+            createGhost: function () { return ({
+                element: _this._buildChipGhostElement(chip.element),
+                offsetX: 8,
+                offsetY: 8,
+            }); },
+            onDragStart: function (event) {
+                _this._callbacks.onChipDragStart(tabGroup, chip, event);
+            },
+        });
         var disposables = [
             tabGroup.onDidChange(function () {
                 var _a;
@@ -353,24 +498,70 @@ var TabGroupManager = /** @class */ (function () {
             tabGroup.onDidCollapseChange(function () {
                 _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.
+        var onContextMenu = function (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_1.TabGroupChip) {
-            disposables.push(chip.onContextMenu(function (event) {
-                _this._callbacks.onChipContextMenu(tabGroup, event);
-            }), chip.onDragStart(function (event) {
-                _this._callbacks.onChipDragStart(tabGroup, chip, event);
-            }));
+            disposables.push(chip.onContextMenu(onContextMenu));
         }
         else {
-            disposables.push((0, events_1.addDisposableListener)(chip.element, 'contextmenu', function (event) {
-                _this._callbacks.onChipContextMenu(tabGroup, event);
-            }), (0, events_1.addDisposableListener)(chip.element, 'dragstart', function (event) {
-                _this._callbacks.onChipDragStart(tabGroup, chip, event);
-            }));
-        }
+            disposables.push(new longPress_1.LongPressDetector(chip.element, {
+                onLongPress: onContextMenu,
+            }), (0, events_1.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.
+        var isVertical = this._ctx.getDirection() === 'vertical';
+        var dropTarget = new droptarget_1.Droptarget(chip.element, {
+            acceptedTargetZones: isVertical ? ['top'] : ['left'],
+            overlayModel: {
+                activationSize: { value: 100, type: 'percentage' },
+            },
+            canDisplayOverlay: function (event, position) {
+                var _a;
+                if (_this._ctx.group.locked) {
+                    return false;
+                }
+                if (_this._ctx.accessor.options.disableDnd) {
+                    return false;
+                }
+                var data = (0, dataTransfer_2.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(function (event) {
+            _this._callbacks.onChipDrop(tabGroup, event);
+        }));
         var disposable = new (lifecycle_1.CompositeDisposable.bind.apply(lifecycle_1.CompositeDisposable, __spreadArray([void 0], __read(disposables), false)))();
-        this._chipRenderers.set(tabGroup.id, { chip: chip, disposable: disposable });
+        this._chipRenderers.set(tabGroup.id, {
+            chip: chip,
+            html5DragSource: html5DragSource,
+            pointerDragSource: pointerDragSource,
+            disposable: disposable,
+            dropTarget: 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
@@ -404,7 +595,7 @@ var TabGroupManager = /** @class */ (function () {
         }
     };
     TabGroupManager.prototype._updateTabGroupClasses = function () {
-        var e_8, _a, e_9, _b, e_10, _c, e_11, _d, e_12, _e, e_13, _f, e_14, _g;
+        var e_10, _a, e_11, _b, e_12, _c, e_13, _d, e_14, _e, e_15, _f, e_16, _g;
         var _this = this;
         var _h;
         var model = this._ctx.group.model;
@@ -418,26 +609,26 @@ var TabGroupManager = /** @class */ (function () {
             for (var tabGroups_2 = __values(tabGroups), tabGroups_2_1 = tabGroups_2.next(); !tabGroups_2_1.done; tabGroups_2_1 = tabGroups_2.next()) {
                 var tg = tabGroups_2_1.value;
                 try {
-                    for (var _j = (e_9 = void 0, __values(tg.panelIds)), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    for (var _j = (e_11 = void 0, __values(tg.panelIds)), _k = _j.next(); !_k.done; _k = _j.next()) {
                         var pid = _k.value;
                         panelGroupMap.set(pid, tg);
                     }
                 }
-                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                catch (e_11_1) { e_11 = { error: e_11_1 }; }
                 finally {
                     try {
                         if (_k && !_k.done && (_b = _j.return)) _b.call(_j);
                     }
-                    finally { if (e_9) throw e_9.error; }
+                    finally { if (e_11) throw e_11.error; }
                 }
             }
         }
-        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (tabGroups_2_1 && !tabGroups_2_1.done && (_a = tabGroups_2.return)) _a.call(tabGroups_2);
             }
-            finally { if (e_8) throw e_8.error; }
+            finally { if (e_10) throw e_10.error; }
         }
         var _loop_1 = function (tabEntry) {
             var tab = tabEntry.value;
@@ -493,12 +684,12 @@ var TabGroupManager = /** @class */ (function () {
                 _loop_1(tabEntry);
             }
         }
-        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        catch (e_12_1) { e_12 = { error: e_12_1 }; }
         finally {
             try {
                 if (tabs_1_1 && !tabs_1_1.done && (_c = tabs_1.return)) _c.call(tabs_1);
             }
-            finally { if (e_10) throw e_10.error; }
+            finally { if (e_12) throw e_12.error; }
         }
         // Track active group IDs for underline/collapse handling
         var activeGroupIds = new Set();
@@ -521,7 +712,7 @@ var TabGroupManager = /** @class */ (function () {
                         // dv-tab--group-collapsed doesn't fire.
                         var affected = [];
                         try {
-                            for (var _l = (e_12 = void 0, __values(tg.panelIds)), _m = _l.next(); !_m.done; _m = _l.next()) {
+                            for (var _l = (e_14 = void 0, __values(tg.panelIds)), _m = _l.next(); !_m.done; _m = _l.next()) {
                                 var pid = _m.value;
                                 var te = tabMap.get(pid);
                                 if (te) {
@@ -531,27 +722,27 @@ var TabGroupManager = /** @class */ (function () {
                                 }
                             }
                         }
-                        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+                        catch (e_14_1) { e_14 = { error: e_14_1 }; }
                         finally {
                             try {
                                 if (_m && !_m.done && (_e = _l.return)) _e.call(_l);
                             }
-                            finally { if (e_12) throw e_12.error; }
+                            finally { if (e_14) throw e_14.error; }
                         }
                         if (affected.length > 0) {
                             void affected[0].offsetHeight; // single reflow
                             try {
-                                for (var affected_1 = (e_13 = void 0, __values(affected)), affected_1_1 = affected_1.next(); !affected_1_1.done; affected_1_1 = affected_1.next()) {
+                                for (var affected_1 = (e_15 = void 0, __values(affected)), affected_1_1 = affected_1.next(); !affected_1_1.done; affected_1_1 = affected_1.next()) {
                                     var el = affected_1_1.value;
                                     el.style.removeProperty('transition');
                                 }
                             }
-                            catch (e_13_1) { e_13 = { error: e_13_1 }; }
+                            catch (e_15_1) { e_15 = { error: e_15_1 }; }
                             finally {
                                 try {
                                     if (affected_1_1 && !affected_1_1.done && (_f = affected_1.return)) _f.call(affected_1);
                                 }
-                                finally { if (e_13) throw e_13.error; }
+                                finally { if (e_15) throw e_15.error; }
                             }
                         }
                     }
@@ -559,7 +750,7 @@ var TabGroupManager = /** @class */ (function () {
                         hasAnimation = true;
                         var isVert = this._ctx.getDirection() === 'vertical';
                         try {
-                            for (var _o = (e_14 = void 0, __values(tg.panelIds)), _p = _o.next(); !_p.done; _p = _o.next()) {
+                            for (var _o = (e_16 = void 0, __values(tg.panelIds)), _p = _o.next(); !_p.done; _p = _o.next()) {
                                 var pid = _p.value;
                                 var te = tabMap.get(pid);
                                 if (te &&
@@ -576,23 +767,23 @@ var TabGroupManager = /** @class */ (function () {
                                 }
                             }
                         }
-                        catch (e_14_1) { e_14 = { error: e_14_1 }; }
+                        catch (e_16_1) { e_16 = { error: e_16_1 }; }
                         finally {
                             try {
                                 if (_p && !_p.done && (_g = _o.return)) _g.call(_o);
                             }
-                            finally { if (e_14) throw e_14.error; }
+                            finally { if (e_16) throw e_16.error; }
                         }
                     }
                 }
             }
         }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        catch (e_13_1) { e_13 = { error: e_13_1 }; }
         finally {
             try {
                 if (tabGroups_3_1 && !tabGroups_3_1.done && (_d = tabGroups_3.return)) _d.call(tabGroups_3);
             }
-            finally { if (e_11) throw e_11.error; }
+            finally { if (e_13) throw e_13.error; }
         }
         this._skipNextCollapseAnimation = false;
         // Sync indicator underlines and position them

package/dist/cjs/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,