dockview-core 6.3.0 → 6.5.0

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

@@ -7,16 +7,18 @@ import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { DockviewHeaderDirection } from '../../options';
 export interface TabDropIndexEvent {
-    readonly event: DragEvent;
+    readonly event: DragEvent | PointerEvent;
     readonly index: number;
     readonly targetTabGroupId?: string | null;
 }
 export interface TabDragEvent {
-    readonly nativeEvent: DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    readonly nativeEvent: DragEvent | PointerEvent;
     readonly panel: IDockviewPanel;
 }
 export interface GroupDragEvent {
-    readonly nativeEvent: DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    readonly nativeEvent: DragEvent | PointerEvent;
     readonly group: DockviewGroupPanel;
 }
 export interface ITabsContainer extends IDisposable {

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

@@ -8,13 +8,17 @@ export declare class VoidContainer extends CompositeDisposable {
     private readonly group;
     private readonly _element;
     private readonly dropTarget;
-    private readonly handler;
+    private readonly pointerDropTarget;
+    private readonly html5DragSource;
+    private readonly pointerDragSource;
+    private readonly panelTransfer;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
-    readonly onDragStart: Event<DragEvent>;
+    readonly onDragStart: Event<PointerEvent | DragEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     updateDragAndDropState(): void;
+    private getFloatingOverlay;
 }

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

@@ -14,55 +14,206 @@ 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.VoidContainer = void 0;
 var dataTransfer_1 = require("../../../dnd/dataTransfer");
-var droptarget_1 = require("../../../dnd/droptarget");
-var groupDragHandler_1 = require("../../../dnd/groupDragHandler");
+var backend_1 = require("../../../dnd/backend");
 var events_1 = require("../../../events");
 var lifecycle_1 = require("../../../lifecycle");
 var dom_1 = require("../../../dom");
+var dndCapabilities_1 = require("../../dndCapabilities");
+// Floating-group redock via touch: require a deliberate long press so the
+// "move the float around" gesture doesn't double-trigger the redock ghost.
+// Infinity pressTolerance disables the pre-arm flick override; any motion
+// during the wait is treated as drag-the-float, not redock intent.
+var FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
 var VoidContainer = /** @class */ (function (_super) {
     __extends(VoidContainer, _super);
     function VoidContainer(accessor, group) {
+        var _a, _b;
         var _this = _super.call(this) || this;
         _this.accessor = accessor;
         _this.group = group;
+        _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
         _this._onDrop = new events_1.Emitter();
         _this.onDrop = _this._onDrop.event;
         _this._onDragStart = new events_1.Emitter();
         _this.onDragStart = _this._onDragStart.event;
+        var caps = (0, dndCapabilities_1.resolveDndCapabilities)(_this.accessor.options);
         _this._element = document.createElement('div');
         _this._element.className = 'dv-void-container';
-        _this._element.draggable = !_this.accessor.options.disableDnd;
-        (0, dom_1.toggleClass)(_this._element, 'dv-draggable', !_this.accessor.options.disableDnd);
+        _this._element.draggable = caps.html5;
+        (0, dom_1.toggleClass)(_this._element, 'dv-draggable', caps.html5 || caps.pointer);
         _this.addDisposables(_this._onDrop, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function () {
             _this.accessor.doSetGroupActive(_this.group);
-        }));
-        _this.handler = new groupDragHandler_1.GroupDragHandler(_this._element, accessor, group, !!_this.accessor.options.disableDnd);
-        _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
+        }), 
+        // Shift+pointerdown marks the event so the group's overlay
+        // drag (move-by-floating) sees it was consumed and doesn't
+        // fire alongside the HTML5 drag. quasiPreventDefault sets the
+        // marker without calling preventDefault — that would also
+        // block dragstart, which we need to fire.
+        (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (e) {
+            if (e.shiftKey) {
+                (0, dom_1.quasiPreventDefault)(e);
+            }
+        }, true));
+        var canDisplayOverlay = function (event, position) {
+            if (_this.group.api.locked) {
+                // Dropping on the void/header space adds the panel
+                // to this group, which `locked` is meant to prevent
+                // (both `true` and `'no-drop-target'`).
+                return false;
+            }
+            var data = (0, dataTransfer_1.getPanelData)();
+            if (data && _this.accessor.id === data.viewId) {
+                return true;
+            }
+            return group.model.canDisplayOverlay(event, position, 'header_space');
+        };
+        _this.dropTarget = backend_1.html5Backend.createDropTarget(_this._element, {
             acceptedTargetZones: ['center'],
-            canDisplayOverlay: function (event, position) {
-                if (_this.group.api.locked) {
-                    // Dropping on the void/header space adds the panel
-                    // to this group, which `locked` is meant to prevent
-                    // (both `true` and `'no-drop-target'`).
-                    return false;
+            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: ['center'],
+            canDisplayOverlay: canDisplayOverlay,
+            getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        var buildMultiPanelsGhost = function () {
+            var ghostEl = document.createElement('div');
+            var style = window.getComputedStyle(_this._element);
+            var bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+            var color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
+            ghostEl.style.backgroundColor = bgColor;
+            ghostEl.style.color = color;
+            ghostEl.style.padding = '2px 8px';
+            ghostEl.style.height = '24px';
+            ghostEl.style.fontSize = '11px';
+            ghostEl.style.lineHeight = '20px';
+            ghostEl.style.borderRadius = '12px';
+            ghostEl.style.whiteSpace = 'nowrap';
+            ghostEl.style.boxSizing = 'border-box';
+            // HTML5 setDragImage snapshots the element as appended to the
+            // document; a default block-level div would stretch to the
+            // body's width and render as a viewport-wide bar.
+            ghostEl.style.display = 'inline-block';
+            ghostEl.textContent = "Multiple Panels (".concat(_this.group.size, ")");
+            return ghostEl;
+        };
+        var buildGhostSpec = function () {
+            var createGhost = _this.accessor.options.createGroupDragGhostComponent;
+            if (createGhost) {
+                var renderer_1 = createGhost(_this.group);
+                renderer_1.init({
+                    group: _this.group,
+                    api: _this.accessor.api,
+                });
+                return {
+                    element: renderer_1.element,
+                    offsetX: 30,
+                    offsetY: -10,
+                    dispose: renderer_1.dispose
+                        ? function () { var _a; return (_a = renderer_1.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer_1); }
+                        : undefined,
+                };
+            }
+            return {
+                element: buildMultiPanelsGhost(),
+                offsetX: 30,
+                offsetY: -10,
+            };
+        };
+        var sharedDragOptions = {
+            getData: function () {
+                _this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(_this.accessor.id, _this.group.id, null)], dataTransfer_1.PanelTransfer.prototype);
+                return {
+                    dispose: function () {
+                        _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
+                    },
+                };
+            },
+            createGhost: buildGhostSpec,
+            onDragStart: function (event) {
+                _this._onDragStart.fire(event);
+            },
+        };
+        _this.html5DragSource = backend_1.html5Backend.createDragSource(_this._element, __assign(__assign({}, sharedDragOptions), { disabled: !caps.html5, isCancelled: function (event) {
+                // HTML5: floating groups need shift+drag as the explicit
+                // detach gesture (otherwise click-and-drag conflicts with
+                // moving the floating group itself).
+                if (_this.group.api.location.type === 'floating' &&
+                    !event.shiftKey) {
+                    return true;
                 }
-                var data = (0, dataTransfer_1.getPanelData)();
-                if (data && _this.accessor.id === data.viewId) {
+                if (_this.group.api.location.type === 'edge' &&
+                    _this.group.size === 0) {
                     return true;
                 }
-                return group.model.canDisplayOverlay(event, position, 'header_space');
-            },
-            getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-        });
-        _this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay;
-        _this.addDisposables(_this.handler, _this.handler.onDragStart(function (event) {
-            _this._onDragStart.fire(event);
-        }), _this.dropTarget.onDrop(function (event) {
+                return false;
+            } }));
+        var isFloating = function () { var _a, _b, _c; return ((_c = (_b = (_a = _this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.type) === 'floating'; };
+        _this.pointerDragSource = backend_1.pointerBackend.createDragSource(_this._element, __assign(__assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, 
+            // Floating groups share this element with the overlay's
+            // move-the-float drag. Without a longer hold + tolerance
+            // override, both gestures commit simultaneously and the
+            // user sees the float follow their finger *and* a ghost.
+            touchInitiationDelay: function () {
+                return isFloating() ? FLOATING_REDOCK_INITIATION_DELAY_MS : 250;
+            }, pressTolerance: function () { return (isFloating() ? Infinity : 8); }, isCancelled: function () {
+                if (!(0, dndCapabilities_1.resolveDndCapabilities)(_this.accessor.options).pointer) {
+                    return true;
+                }
+                // Pointer: long-press IS the deliberate gesture, so
+                // floating groups don't need the shift gate.
+                if (_this.group.api.location.type === 'edge' &&
+                    _this.group.size === 0) {
+                    return true;
+                }
+                return false;
+            }, onDragStart: function (event) {
+                var _a;
+                // Redock just committed — abort any in-flight overlay
+                // move so the float stops following the finger while
+                // the ghost takes over.
+                (_a = _this.getFloatingOverlay()) === null || _a === void 0 ? void 0 : _a.cancelPendingDrag();
+                _this._onDragStart.fire(event);
+            } }));
+        // Mirror direction: once the overlay's move-the-float gesture has
+        // actually moved something, cancel the pending redock arm so the
+        // ghost doesn't appear mid-drag if the user holds past 500ms.
+        var overlayMoveSub = new lifecycle_1.MutableDisposable();
+        var refreshOverlayMoveSub = function () {
+            var overlay = _this.getFloatingOverlay();
+            overlayMoveSub.value = overlay
+                ? overlay.onDidStartMoving(function () {
+                    _this.pointerDragSource.cancelPending();
+                })
+                : lifecycle_1.Disposable.NONE;
+        };
+        refreshOverlayMoveSub();
+        _this.addDisposables(overlayMoveSub);
+        var locationChange = (_b = (_a = _this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.onDidLocationChange;
+        if (locationChange) {
+            _this.addDisposables(locationChange(refreshOverlayMoveSub));
+        }
+        _this.onWillShowOverlay = events_1.Event.any(_this.dropTarget.onWillShowOverlay, _this.pointerDropTarget.onWillShowOverlay);
+        _this.addDisposables(_this.html5DragSource, _this.dropTarget.onDrop(function (event) {
             _this._onDrop.fire(event);
-        }), _this.dropTarget);
+        }), _this.pointerDropTarget.onDrop(function (event) {
+            _this._onDrop.fire(event);
+        }), _this.dropTarget, _this.pointerDropTarget, _this.pointerDragSource);
         return _this;
     }
     Object.defineProperty(VoidContainer.prototype, "element", {
@@ -73,9 +224,20 @@ var VoidContainer = /** @class */ (function (_super) {
         configurable: true
     });
     VoidContainer.prototype.updateDragAndDropState = function () {
-        this._element.draggable = !this.accessor.options.disableDnd;
-        (0, dom_1.toggleClass)(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
-        this.handler.setDisabled(!!this.accessor.options.disableDnd);
+        var caps = (0, dndCapabilities_1.resolveDndCapabilities)(this.accessor.options);
+        this._element.draggable = caps.html5;
+        (0, dom_1.toggleClass)(this._element, 'dv-draggable', caps.html5 || caps.pointer);
+        this.html5DragSource.setDisabled(!caps.html5);
+        this.pointerDragSource.setDisabled(!caps.pointer);
+        this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+    };
+    VoidContainer.prototype.getFloatingOverlay = function () {
+        var _this = this;
+        var _a, _b;
+        if (!this.group) {
+            return undefined;
+        }
+        return (_b = (_a = this.accessor.floatingGroups) === null || _a === void 0 ? void 0 : _a.find(function (fg) { return fg.group === _this.group; })) === null || _b === void 0 ? void 0 : _b.overlay;
     };
     return VoidContainer;
 }(lifecycle_1.CompositeDisposable));

package/dist/cjs/dockview/contextMenu.js

@@ -79,6 +79,14 @@ function buildSeparator() {
     el.setAttribute('role', 'separator');
     return el;
 }
+function isCoarsePrimaryInput() {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return false;
+    }
+    var coarse = window.matchMedia('(pointer: coarse)').matches;
+    var fine = window.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}
 function buildRenameInput(tabGroup) {
     var wrapper = document.createElement('div');
     wrapper.className = 'dv-context-menu-rename';
@@ -99,10 +107,17 @@ function buildRenameInput(tabGroup) {
         e.stopPropagation();
     });
     wrapper.appendChild(input);
-    requestAnimationFrame(function () {
-        input.focus();
-        input.select();
-    });
+    // Skip auto-focus on touch-primary devices: focusing the input pops the
+    // on-screen keyboard, which fires `window resize`, which `PopupService`
+    // listens to and uses to dismiss the popover — so the menu opens, the
+    // keyboard appears, and the menu immediately closes before the user can
+    // type. The user can still tap the input to focus it intentionally.
+    if (!isCoarsePrimaryInput()) {
+        requestAnimationFrame(function () {
+            input.focus();
+            input.select();
+        });
+    }
     return wrapper;
 }
 function buildColorPicker(tabGroup, palette) {

package/dist/cjs/dockview/dndCapabilities.d.ts

@@ -0,0 +1,19 @@
+import { DockviewOptions } from './options';
+/**
+ * Internal mapping of the user-facing `dndStrategy` option into the
+ * per-backend capability flags consumed by drag-source / drop-target
+ * construction sites. Not part of the public API — consumers only see
+ * the `dndStrategy` option itself.
+ */
+export interface DndCapabilities {
+    /** HTML5 drag/drop wiring active (draggable attr, dragstart). */
+    readonly html5: boolean;
+    /** Pointer-event drag source active. */
+    readonly pointer: boolean;
+    /**
+     * When true, the pointer source handles mouse pointers too
+     * (`touchOnly: false`). Implies `pointer` is true.
+     */
+    readonly pointerHandlesMouse: boolean;
+}
+export declare function resolveDndCapabilities(options: Pick<DockviewOptions, 'dndStrategy' | 'disableDnd'>): DndCapabilities;

package/dist/cjs/dockview/dndCapabilities.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveDndCapabilities = resolveDndCapabilities;
+function resolveDndCapabilities(options) {
+    if (options.disableDnd) {
+        return { html5: false, pointer: false, pointerHandlesMouse: false };
+    }
+    switch (options.dndStrategy) {
+        case 'pointer':
+            return { html5: false, pointer: true, pointerHandlesMouse: true };
+        case 'html5':
+            return { html5: true, pointer: false, pointerHandlesMouse: false };
+        case 'auto':
+        case undefined:
+        default:
+            // On touch-primary devices (phones / basic tablets) HTML5 DnD's
+            // native long-press intercepts the gesture before our pointer
+            // backend can react — Android Chrome launches a system drag with
+            // its half-transparent thumbnail, and the long-press context menu
+            // never opens. Disable HTML5 there so the pointer backend owns
+            // every gesture. Hybrid devices (touchscreen laptops, Surface,
+            // iPad with mouse) keep both backends — mouse uses HTML5, touch
+            // falls back to whichever backend the underlying element wired.
+            return isCoarsePrimaryInput()
+                ? { html5: false, pointer: true, pointerHandlesMouse: true }
+                : { html5: true, pointer: true, pointerHandlesMouse: false };
+    }
+}
+function isCoarsePrimaryInput() {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return false;
+    }
+    // Coarse pointer without any fine pointer = phone-class device. A laptop
+    // touchscreen reports both, and we want HTML5 to remain available there
+    // because a real mouse is also plugged in.
+    var coarse = window.matchMedia('(pointer: coarse)').matches;
+    var fine = window.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}

package/dist/cjs/dockview/dockviewComponent.d.ts

@@ -261,6 +261,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
+    private readonly _rootPointerDropTarget;
     private _popoutRestorationPromise;
     private readonly _popoutRestorationCleanups;
     private readonly _onDidRemoveGroup;

package/dist/cjs/dockview/dockviewComponent.js

@@ -65,6 +65,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewComponent = void 0;
 var gridview_1 = require("../gridview/gridview");
 var droptarget_1 = require("../dnd/droptarget");
+var backend_1 = require("../dnd/backend");
 var array_1 = require("../array");
 var dockviewPanel_1 = require("./dockviewPanel");
 var lifecycle_1 = require("../lifecycle");
@@ -121,7 +122,7 @@ function moveGroupWithoutDestroying(options) {
 var DockviewComponent = /** @class */ (function (_super) {
     __extends(DockviewComponent, _super);
     function DockviewComponent(container, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         var _this = _super.call(this, container, {
             proportionalLayout: true,
             orientation: splitview_1.Orientation.HORIZONTAL,
@@ -220,37 +221,51 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this._floatingOverlayHost = document.createElement('div');
         _this._floatingOverlayHost.className = 'dv-floating-overlay-host';
         _this._shellManager.element.appendChild(_this._floatingOverlayHost);
-        _this._rootDropTarget = new droptarget_1.Droptarget(_this.element, {
-            className: 'dv-drop-target-edge',
-            canDisplayOverlay: function (event, position) {
-                var data = (0, dataTransfer_1.getPanelData)();
-                if (data) {
-                    if (data.viewId !== _this.id) {
-                        return false;
-                    }
-                    if (position === 'center') {
-                        // center drop target is only allowed if there are no panels in the grid
-                        // floating panels are allowed
-                        return _this.gridview.length === 0;
-                    }
-                    return true;
-                }
-                if (position === 'center' && _this.gridview.length !== 0) {
-                    /**
-                     * for external events only show the four-corner drag overlays, disable
-                     * the center position so that external drag events can fall through to the group
-                     * and panel drop target handlers
-                     */
+        var rootCanDisplayOverlay = function (event, position) {
+            var data = (0, dataTransfer_1.getPanelData)();
+            if (data) {
+                if (data.viewId !== _this.id) {
                     return false;
                 }
-                var firedEvent = new options_1.DockviewUnhandledDragOverEvent(event, 'edge', position, dataTransfer_1.getPanelData);
-                _this._onUnhandledDragOverEvent.fire(firedEvent);
-                return firedEvent.isAccepted;
-            },
+                if (position === 'center') {
+                    // center drop target is only allowed if there are no panels in the grid
+                    // floating panels are allowed
+                    return _this.gridview.length === 0;
+                }
+                return true;
+            }
+            if (position === 'center' && _this.gridview.length !== 0) {
+                /**
+                 * for external events only show the four-corner drag overlays, disable
+                 * the center position so that external drag events can fall through to the group
+                 * and panel drop target handlers
+                 */
+                return false;
+            }
+            var firedEvent = new options_1.DockviewUnhandledDragOverEvent(event, 'edge', position, dataTransfer_1.getPanelData);
+            _this._onUnhandledDragOverEvent.fire(firedEvent);
+            return firedEvent.isAccepted;
+        };
+        _this._rootDropTarget = backend_1.html5Backend.createDropTarget(_this.element, {
+            className: 'dv-drop-target-edge',
+            canDisplayOverlay: rootCanDisplayOverlay,
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: (_f = options.rootOverlayModel) !== null && _f !== void 0 ? _f : DEFAULT_ROOT_OVERLAY_MODEL,
             getOverrideTarget: function () { var _a; return (_a = _this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
+        _this._rootPointerDropTarget = backend_1.pointerBackend.createDropTarget(_this.element, {
+            className: 'dv-drop-target-edge',
+            canDisplayOverlay: rootCanDisplayOverlay,
+            acceptedTargetZones: [
+                'top',
+                'bottom',
+                'left',
+                'right',
+                'center',
+            ],
+            overlayModel: (_g = options.rootOverlayModel) !== null && _g !== void 0 ? _g : DEFAULT_ROOT_OVERLAY_MODEL,
+            getOverrideTarget: function () { var _a; return (_a = _this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
         _this.updateDropTargetModel(options);
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         (0, dom_1.toggleClass)(_this.element, 'dv-debug', !!options.debug);
@@ -353,7 +368,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 finally { if (e_4) throw e_4.error; }
             }
             _this._edgeGroupDisposables.clear();
-        }), _this._rootDropTarget, _this._rootDropTarget.onWillShowOverlay(function (event) {
+        }), _this._rootDropTarget, _this._rootPointerDropTarget, events_1.Event.any(_this._rootDropTarget.onWillShowOverlay, _this._rootPointerDropTarget.onWillShowOverlay)(function (event) {
             if (_this.gridview.length > 0 && event.position === 'center') {
                 // option only available when no panels in primary grid
                 return;
@@ -365,7 +380,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group: undefined,
                 getData: dataTransfer_1.getPanelData,
             }));
-        }), _this._rootDropTarget.onDrop(function (event) {
+        }), events_1.Event.any(_this._rootDropTarget.onDrop, _this._rootPointerDropTarget.onDrop)(function (event) {
             var _a;
             var willDropEvent = new dockviewGroupPanelModel_1.DockviewWillDropEvent({
                 nativeEvent: event.nativeEvent,
@@ -403,7 +418,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     getData: dataTransfer_1.getPanelData,
                 }));
             }
-        }), _this._rootDropTarget);
+        }));
         return _this;
     }
     Object.defineProperty(DockviewComponent.prototype, "orientation", {
@@ -1035,9 +1050,12 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         this.updateDropTargetModel(options);
         var oldDisableDnd = this.options.disableDnd;
+        var oldDndStrategy = this.options.dndStrategy;
         this._options = __assign(__assign({}, this.options), options);
         var newDisableDnd = this.options.disableDnd;
-        if (oldDisableDnd !== newDisableDnd) {
+        var newDndStrategy = this.options.dndStrategy;
+        if (oldDisableDnd !== newDisableDnd ||
+            oldDndStrategy !== newDndStrategy) {
             this.updateDragAndDropState();
         }
         if ('theme' in options) {
@@ -2993,15 +3011,18 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.updateDropTargetModel = function (options) {
         if ('dndEdges' in options) {
-            this._rootDropTarget.disabled =
-                typeof options.dndEdges === 'boolean' &&
-                    options.dndEdges === false;
+            var disabled = typeof options.dndEdges === 'boolean' &&
+                options.dndEdges === false;
+            this._rootDropTarget.disabled = disabled;
+            this._rootPointerDropTarget.disabled = disabled;
             if (typeof options.dndEdges === 'object' &&
                 options.dndEdges !== null) {
                 this._rootDropTarget.setOverlayModel(options.dndEdges);
+                this._rootPointerDropTarget.setOverlayModel(options.dndEdges);
             }
             else {
                 this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
+                this._rootPointerDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
             }
         }
         if ('rootOverlayModel' in options) {

package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts

@@ -52,13 +52,17 @@ export interface CreateTabGroupOptions extends TabGroupOptions {
 }
 export declare class DockviewDidDropEvent extends DockviewEvent {
     private readonly options;
-    get nativeEvent(): DragEvent;
+    /**
+     * `PointerEvent` for touch drags has no `dataTransfer`; use
+     * `getData()` for the dockview payload regardless of input method.
+     */
+    get nativeEvent(): DragEvent | PointerEvent;
     get position(): Position;
     get panel(): IDockviewPanel | undefined;
     get group(): DockviewGroupPanel | undefined;
     get api(): DockviewApi;
     constructor(options: {
-        readonly nativeEvent: DragEvent;
+        readonly nativeEvent: DragEvent | PointerEvent;
         readonly position: Position;
         readonly panel?: IDockviewPanel;
         getData(): PanelTransfer | undefined;
@@ -71,7 +75,7 @@ export declare class DockviewWillDropEvent extends DockviewDidDropEvent {
     private readonly _kind;
     get kind(): DockviewGroupDropLocation;
     constructor(options: {
-        readonly nativeEvent: DragEvent;
+        readonly nativeEvent: DragEvent | PointerEvent;
         readonly position: Position;
         readonly panel?: IDockviewPanel;
         getData(): PanelTransfer | undefined;
@@ -122,7 +126,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
         panel?: IDockviewPanel;
         suppressRoll?: boolean;
     }): void;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
+    canDisplayOverlay(event: DragEvent | PointerEvent, position: Position, target: DockviewGroupDropLocation): boolean;
 }
 export type DockviewGroupLocation = {
     type: 'grid';
@@ -324,7 +328,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private doSetActivePanel;
     private updateMru;
     private updateContainer;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
+    canDisplayOverlay(event: DragEvent | PointerEvent, position: Position, target: DockviewGroupDropLocation): boolean;
     private handleDropEvent;
     updateDragAndDropState(): void;
     dispose(): void;