dockview-core 6.3.0 → 6.4.0

package/dist/cjs/dockview/components/tab/tab.js

@@ -14,36 +14,26 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tab = void 0;
 var events_1 = require("../../../events");
 var lifecycle_1 = require("../../../lifecycle");
 var dataTransfer_1 = require("../../../dnd/dataTransfer");
 var dom_1 = require("../../../dom");
-var droptarget_1 = require("../../../dnd/droptarget");
-var abstractDragHandler_1 = require("../../../dnd/abstractDragHandler");
-var ghost_1 = require("../../../dnd/ghost");
-var TabDragHandler = /** @class */ (function (_super) {
-    __extends(TabDragHandler, _super);
-    function TabDragHandler(element, accessor, group, panel, disabled) {
-        var _this = _super.call(this, element, disabled) || this;
-        _this.accessor = accessor;
-        _this.group = group;
-        _this.panel = panel;
-        _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
-        return _this;
-    }
-    TabDragHandler.prototype.getData = function (event) {
-        var _this = this;
-        this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], dataTransfer_1.PanelTransfer.prototype);
-        return {
-            dispose: function () {
-                _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
-            },
-        };
-    };
-    return TabDragHandler;
-}(abstractDragHandler_1.DragHandler));
+var backend_1 = require("../../../dnd/backend");
+var longPress_1 = require("../../../dnd/pointer/longPress");
+var dndCapabilities_1 = require("../../dndCapabilities");
 var Tab = /** @class */ (function (_super) {
     __extends(Tab, _super);
     function Tab(panel, accessor, group) {
@@ -52,6 +42,7 @@ var Tab = /** @class */ (function (_super) {
         _this.accessor = accessor;
         _this.group = group;
         _this.content = undefined;
+        _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
         _this._direction = 'horizontal';
         _this._onPointDown = new events_1.Emitter();
         _this.onPointerDown = _this._onPointDown.event;
@@ -63,114 +54,108 @@ var Tab = /** @class */ (function (_super) {
         _this.onDragStart = _this._onDragStart.event;
         _this._onDragEnd = new events_1.Emitter();
         _this.onDragEnd = _this._onDragEnd.event;
+        var caps = (0, dndCapabilities_1.resolveDndCapabilities)(_this.accessor.options);
         _this._element = document.createElement('div');
         _this._element.className = 'dv-tab';
         _this._element.tabIndex = 0;
-        _this._element.draggable = !_this.accessor.options.disableDnd;
+        _this._element.draggable = caps.html5;
         (0, dom_1.toggleClass)(_this.element, 'dv-inactive-tab', true);
-        _this.dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel, !!_this.accessor.options.disableDnd);
-        _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
+        var canDisplayOverlay = function (event, position) {
+            var _a;
+            if (_this.group.locked) {
+                return false;
+            }
+            var data = (0, dataTransfer_1.getPanelData)();
+            if (data && _this.accessor.id === data.viewId) {
+                // Smooth-reorder takes over the in-flight visual when active,
+                // so individual tab overlays are suppressed for internal drags.
+                if (((_a = _this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                    return false;
+                }
+                return true;
+            }
+            return _this.group.model.canDisplayOverlay(event, position, 'tab');
+        };
+        _this.dropTarget = backend_1.html5Backend.createDropTarget(_this._element, {
+            acceptedTargetZones: ['left', 'right'],
+            overlayModel: _this._buildOverlayModel(),
+            canDisplayOverlay: canDisplayOverlay,
+            getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        _this.pointerDropTarget = backend_1.pointerBackend.createDropTarget(_this._element, {
             acceptedTargetZones: ['left', 'right'],
             overlayModel: _this._buildOverlayModel(),
-            canDisplayOverlay: function (event, position) {
+            canDisplayOverlay: canDisplayOverlay,
+            getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        var sharedDragOptions = {
+            getData: function () {
+                _this.panelTransfer.setData([
+                    new dataTransfer_1.PanelTransfer(_this.accessor.id, _this.group.id, _this.panel.id),
+                ], dataTransfer_1.PanelTransfer.prototype);
+                return {
+                    dispose: function () {
+                        _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
+                    },
+                };
+            },
+            // 30/-10 matches the HTML5 setDragImage offset that has been
+            // shipped for years; pointer backend wraps in PointerGhost,
+            // HTML5 backend feeds into setDragImage.
+            createGhost: function () { return ({
+                element: _this._buildGhostElement(),
+                offsetX: 30,
+                offsetY: -10,
+            }); },
+            onDragStart: function (event) {
                 var _a;
-                if (_this.group.locked) {
-                    return false;
+                _this._onDragStart.fire(event);
+                if (!(event instanceof PointerEvent) &&
+                    ((_a = _this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                    // Delay collapse to next frame so the browser
+                    // captures the full drag image first.
+                    requestAnimationFrame(function () {
+                        (0, dom_1.toggleClass)(_this.element, 'dv-tab--dragging', true);
+                    });
                 }
-                var data = (0, dataTransfer_1.getPanelData)();
-                if (data && _this.accessor.id === data.viewId) {
-                    if (((_a = _this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                        // When smooth reorder is enabled, the Tabs
-                        // container handles all intra-accessor drops
-                        // (both same-group and cross-group) via
-                        // animation.  Suppress the per-tab overlay so
-                        // the tab is dropped *beside* rather than *on*.
-                        return false;
-                    }
-                    return true;
-                }
-                return _this.group.model.canDisplayOverlay(event, position, 'tab');
             },
-            getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-        });
-        _this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay;
+            onDragEnd: function (event) {
+                _this._onDragEnd.fire(event);
+            },
+        };
+        _this.html5DragSource = backend_1.html5Backend.createDragSource(_this._element, __assign(__assign({}, sharedDragOptions), { disabled: !caps.html5 }));
+        _this.pointerDragSource = backend_1.pointerBackend.createDragSource(_this._element, __assign(__assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, isCancelled: function () {
+                return !(0, dndCapabilities_1.resolveDndCapabilities)(_this.accessor.options).pointer;
+            } }));
+        // Both droptargets feed the same downstream stream; consumers don't
+        // need to know which path produced the overlay.
+        _this.onWillShowOverlay = events_1.Event.any(_this.dropTarget.onWillShowOverlay, _this.pointerDropTarget.onWillShowOverlay);
         _this.addDisposables(_this._onPointDown, _this._onTabClick, _this._onDropped, _this._onDragStart, _this._onDragEnd, _this.accessor.onDidOptionsChange(function () {
-            _this.dropTarget.setOverlayModel(_this._buildOverlayModel());
-        }), _this.dragHandler.onDragStart(function (event) {
-            var _a;
-            if (event.dataTransfer) {
-                var style_1 = getComputedStyle(_this.element);
-                var newNode_1 = _this.element.cloneNode(true);
-                var isVertical_1 = _this._direction === 'vertical';
-                /**
-                 * Properties to skip when copying computed styles for a
-                 * vertical tab ghost.  `writing-mode` is excluded so we
-                 * can force `horizontal-tb`.  Size and margin logical
-                 * properties are excluded because their physical meaning
-                 * flips when writing-mode changes, which would produce
-                 * incorrect dimensions.
-                 */
-                var verticalSkip_1 = new Set([
-                    'writing-mode',
-                    'inline-size',
-                    'block-size',
-                    'min-inline-size',
-                    'min-block-size',
-                    'max-inline-size',
-                    'max-block-size',
-                    'margin-inline',
-                    'margin-inline-start',
-                    'margin-inline-end',
-                    'margin-block',
-                    'margin-block-start',
-                    'margin-block-end',
-                    'padding-inline',
-                    'padding-inline-start',
-                    'padding-inline-end',
-                    'padding-block',
-                    'padding-block-start',
-                    'padding-block-end',
-                ]);
-                Array.from(style_1).forEach(function (key) {
-                    if (isVertical_1 && verticalSkip_1.has(key)) {
-                        return;
-                    }
-                    newNode_1.style.setProperty(key, style_1.getPropertyValue(key), style_1.getPropertyPriority(key));
-                });
-                if (isVertical_1) {
-                    // Force horizontal text flow and swap the physical
-                    // dimensions so the ghost appears as a horizontal tab.
-                    newNode_1.style.setProperty('writing-mode', 'horizontal-tb');
-                    newNode_1.style.setProperty('width', style_1.height);
-                    newNode_1.style.setProperty('height', style_1.width);
-                }
-                newNode_1.style.position = 'absolute';
-                newNode_1.classList.add('dv-tab-ghost-drag');
-                (0, ghost_1.addGhostImage)(event.dataTransfer, newNode_1, {
-                    y: -10,
-                    x: 30,
-                });
-            }
-            _this._onDragStart.fire(event);
-            if (((_a = _this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                // Delay collapse to next frame so the browser
-                // captures the full drag image first
-                requestAnimationFrame(function () {
-                    (0, dom_1.toggleClass)(_this.element, 'dv-tab--dragging', true);
-                });
-            }
-        }), (0, events_1.addDisposableListener)(_this._element, 'dragend', function (event) {
+            var model = _this._buildOverlayModel();
+            _this.dropTarget.setOverlayModel(model);
+            _this.pointerDropTarget.setOverlayModel(model);
+        }), (0, events_1.addDisposableListener)(_this._element, 'dragend', function () {
+            // The shared onDragEnd handler already fires _onDragEnd via
+            // the HTML5 backend; just strip the dragging class here.
             (0, dom_1.toggleClass)(_this.element, 'dv-tab--dragging', false);
-            _this._onDragEnd.fire(event);
-        }), _this.dragHandler, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (event) {
+        }), _this.html5DragSource, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (event) {
             _this._onPointDown.fire(event);
         }), (0, events_1.addDisposableListener)(_this._element, 'click', function (event) {
             _this._onTabClick.fire(event);
         }), (0, events_1.addDisposableListener)(_this._element, 'contextmenu', function (event) {
             _this.accessor.contextMenuController.show(_this.panel, _this.group, event);
+        }), new longPress_1.LongPressDetector(_this._element, {
+            onLongPress: function (event) {
+                // Don't let a subsequent finger move arm a drag on top
+                // of the just-opened menu.
+                _this.pointerDragSource.cancelPending();
+                _this.accessor.contextMenuController.show(_this.panel, _this.group, event);
+            },
         }), _this.dropTarget.onDrop(function (event) {
             _this._onDropped.fire(event);
-        }), _this.dropTarget);
+        }), _this.pointerDropTarget.onDrop(function (event) {
+            _this._onDropped.fire(event);
+        }), _this.dropTarget, _this.pointerDropTarget, _this.pointerDragSource);
         return _this;
     }
     Object.defineProperty(Tab.prototype, "element", {
@@ -208,11 +193,60 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.setDirection = function (direction) {
         this._direction = direction;
-        this.dropTarget.setTargetZones(direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']);
+        var zones = direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right'];
+        this.dropTarget.setTargetZones(zones);
+        this.pointerDropTarget.setTargetZones(zones);
     };
     Tab.prototype.updateDragAndDropState = function () {
-        this._element.draggable = !this.accessor.options.disableDnd;
-        this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
+        var caps = (0, dndCapabilities_1.resolveDndCapabilities)(this.accessor.options);
+        this._element.draggable = caps.html5;
+        this.html5DragSource.setDisabled(!caps.html5);
+        this.pointerDragSource.setDisabled(!caps.pointer);
+        this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+    };
+    /**
+     * Vertical tabs are flipped to horizontal so the ghost stays readable
+     * during the drag rather than appearing sideways-rotated.
+     */
+    Tab.prototype._buildGhostElement = function () {
+        var style = getComputedStyle(this.element);
+        var newNode = this.element.cloneNode(true);
+        var isVertical = this._direction === 'vertical';
+        var verticalSkip = new Set([
+            'writing-mode',
+            'inline-size',
+            'block-size',
+            'min-inline-size',
+            'min-block-size',
+            'max-inline-size',
+            'max-block-size',
+            'margin-inline',
+            'margin-inline-start',
+            'margin-inline-end',
+            'margin-block',
+            'margin-block-start',
+            'margin-block-end',
+            'padding-inline',
+            'padding-inline-start',
+            'padding-inline-end',
+            'padding-block',
+            'padding-block-start',
+            'padding-block-end',
+        ]);
+        Array.from(style).forEach(function (key) {
+            if (isVertical && verticalSkip.has(key)) {
+                return;
+            }
+            newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
+        });
+        if (isVertical) {
+            newNode.style.setProperty('writing-mode', 'horizontal-tb');
+            newNode.style.setProperty('width', style.height);
+            newNode.style.setProperty('height', style.width);
+        }
+        newNode.style.position = 'absolute';
+        newNode.classList.add('dv-tab-ghost-drag');
+        return newNode;
     };
     return Tab;
 }(lifecycle_1.CompositeDisposable));

package/dist/cjs/dockview/components/titlebar/tabGroupChip.d.ts

@@ -4,6 +4,14 @@ import { ITabGroup } from '../../tabGroup';
 import { TabGroupColorPalette } from '../../tabGroupAccent';
 import { ITabGroupChipRenderer } from '../../framework';
 import { DockviewApi } from '../../../api/component.api';
+/**
+ * Visual chip for a tab group. Owns the DOM element, label, click /
+ * context-menu interactions, and exposes a long-press gesture as a
+ * second `onContextMenu` source. Drag-and-drop wiring lives in
+ * `TabGroupManager` — the manager constructs the drag sources on this
+ * chip's element so it can include tabs-list context (custom group
+ * drag image, tab-group transfer payload).
+ */
 export declare class TabGroupChip extends CompositeDisposable implements ITabGroupChipRenderer {
     private readonly _palette?;
     private readonly _element;
@@ -12,9 +20,8 @@ export declare class TabGroupChip extends CompositeDisposable implements ITabGro
     private readonly _onClick;
     readonly onClick: Event<MouseEvent>;
     private readonly _onContextMenu;
+    /** Fires on right-click and on touch long-press. */
     readonly onContextMenu: Event<MouseEvent>;
-    private readonly _onDragStart;
-    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
     constructor(_palette?: TabGroupColorPalette | undefined);
     init(params: {

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

@@ -20,6 +20,15 @@ var events_1 = require("../../../events");
 var lifecycle_1 = require("../../../lifecycle");
 var dom_1 = require("../../../dom");
 var tabGroupAccent_1 = require("../../tabGroupAccent");
+var longPress_1 = require("../../../dnd/pointer/longPress");
+/**
+ * Visual chip for a tab group. Owns the DOM element, label, click /
+ * context-menu interactions, and exposes a long-press gesture as a
+ * second `onContextMenu` source. Drag-and-drop wiring lives in
+ * `TabGroupManager` — the manager constructs the drag sources on this
+ * chip's element so it can include tabs-list context (custom group
+ * drag image, tab-group transfer payload).
+ */
 var TabGroupChip = /** @class */ (function (_super) {
     __extends(TabGroupChip, _super);
     function TabGroupChip(_palette) {
@@ -28,22 +37,22 @@ var TabGroupChip = /** @class */ (function (_super) {
         _this._onClick = new events_1.Emitter();
         _this.onClick = _this._onClick.event;
         _this._onContextMenu = new events_1.Emitter();
+        /** Fires on right-click and on touch long-press. */
         _this.onContextMenu = _this._onContextMenu.event;
-        _this._onDragStart = new events_1.Emitter();
-        _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
         _this._element.className = 'dv-tab-group-chip';
         _this._element.tabIndex = 0;
-        _this._element.draggable = true;
         _this._label = document.createElement('span');
         _this._label.className = 'dv-tab-group-chip-label';
         _this._element.appendChild(_this._label);
-        _this.addDisposables(_this._onClick, _this._onContextMenu, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'click', function (event) {
+        _this.addDisposables(_this._onClick, _this._onContextMenu, new longPress_1.LongPressDetector(_this._element, {
+            onLongPress: function (event) {
+                _this._onContextMenu.fire(event);
+            },
+        }), (0, events_1.addDisposableListener)(_this._element, 'click', function (event) {
             _this._onClick.fire(event);
         }), (0, events_1.addDisposableListener)(_this._element, 'contextmenu', function (event) {
             _this._onContextMenu.fire(event);
-        }), (0, events_1.addDisposableListener)(_this._element, 'dragstart', function (event) {
-            _this._onDragStart.fire(event);
         }));
         return _this;
     }

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