dockview-core 6.3.0 → 6.4.0

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -70,6 +70,10 @@ var DockviewDidDropEvent = /** @class */ (function (_super) {
         return _this;
     }
     Object.defineProperty(DockviewDidDropEvent.prototype, "nativeEvent", {
+        /**
+         * `PointerEvent` for touch drags has no `dataTransfer`; use
+         * `getData()` for the dockview payload regardless of input method.
+         */
         get: function () {
             return this.options.nativeEvent;
         },
@@ -261,6 +265,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             // noop
         }), _this.contentContainer.dropTarget.onDrop(function (event) {
             _this.handleDropEvent('content', event.nativeEvent, event.position);
+        }), _this.contentContainer.pointerDropTarget.onDrop(function (event) {
+            _this.handleDropEvent('content', event.nativeEvent, event.position);
         }), _this.tabsContainer.onWillShowOverlay(function (event) {
             _this._onWillShowOverlay.fire(event);
         }), _this.contentContainer.dropTarget.onWillShowOverlay(function (event) {
@@ -271,6 +277,14 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                 group: _this.groupPanel,
                 getData: dataTransfer_1.getPanelData,
             }));
+        }), _this.contentContainer.pointerDropTarget.onWillShowOverlay(function (event) {
+            _this._onWillShowOverlay.fire(new events_2.DockviewWillShowOverlayLocationEvent(event, {
+                kind: 'content',
+                panel: _this.activePanel,
+                api: _this._api,
+                group: _this.groupPanel,
+                getData: dataTransfer_1.getPanelData,
+            }));
         }), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onWillDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange, _this._onUnhandledDragOverEvent, _this._onDidPanelTitleChange, _this._onDidPanelParametersChange, _this._onDidCreateTabGroup, _this._onDidDestroyTabGroup, _this._onDidAddPanelToTabGroup, _this._onDidRemovePanelFromTabGroup, _this._onDidTabGroupChange, _this._onDidTabGroupCollapsedChange, _this._onDidCreateTabGroup.event(function () {
             _this._scheduleTabGroupUpdate();
         }), _this._onDidDestroyTabGroup.event(function () {
@@ -402,33 +416,33 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             return this._location;
         },
         set: function (value) {
+            var _this = this;
             this._location = value;
             (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', false);
             (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', false);
             (0, dom_1.toggleClass)(this.container, 'dv-groupview-edge', false);
+            // Mouse and touch drop targets must agree on accepted zones.
+            var applyZones = function (zones) {
+                _this.contentContainer.dropTarget.setTargetZones(zones);
+                _this.contentContainer.pointerDropTarget.setTargetZones(zones);
+            };
             switch (value.type) {
                 case 'grid':
-                    this.contentContainer.dropTarget.setTargetZones([
-                        'top',
-                        'bottom',
-                        'left',
-                        'right',
-                        'center',
-                    ]);
+                    applyZones(['top', 'bottom', 'left', 'right', 'center']);
                     break;
                 case 'floating':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
-                    this.contentContainer.dropTarget.setTargetZones(value
+                    applyZones(['center']);
+                    applyZones(value
                         ? ['center']
                         : ['top', 'bottom', 'left', 'right', 'center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', true);
                     break;
                 case 'popout':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    applyZones(['center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', true);
                     break;
                 case 'edge':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    applyZones(['center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-edge', true);
                     break;
             }

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

@@ -25,7 +25,8 @@ export declare class DockviewWillShowOverlayLocationEvent implements IDockviewEv
     private readonly event;
     readonly options: DockviewWillShowOverlayLocationEventOptions;
     get kind(): DockviewGroupDropLocation;
-    get nativeEvent(): DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    get nativeEvent(): DragEvent | PointerEvent;
     get position(): Position;
     get defaultPrevented(): boolean;
     get panel(): IDockviewPanel | undefined;

package/dist/cjs/dockview/events.js

@@ -14,6 +14,7 @@ var DockviewWillShowOverlayLocationEvent = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(DockviewWillShowOverlayLocationEvent.prototype, "nativeEvent", {
+        /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
         get: function () {
             return this.event.nativeEvent;
         },

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

@@ -77,6 +77,7 @@ export interface ViewFactoryData {
 }
 export type DockviewHeaderPosition = 'top' | 'bottom' | 'left' | 'right';
 export type DockviewHeaderDirection = 'horizontal' | 'vertical';
+export type DockviewDndStrategy = 'auto' | 'pointer' | 'html5';
 export interface DockviewOptions {
     /**
      * Disable the auto-resizing which is controlled through a `ResizeObserver`.
@@ -101,6 +102,19 @@ export interface DockviewOptions {
      * */
     rootOverlayModel?: DroptargetOverlayModel;
     disableDnd?: boolean;
+    /**
+     * Selects which drag-and-drop implementation is active.
+     *
+     * - `'auto'` (default): HTML5 drag-and-drop drives mouse drags; pointer
+     *   events drive touch and pen drags. Matches the historical behaviour.
+     * - `'pointer'`: pointer events drive every input type. Useful in
+     *   environments where HTML5 drag-and-drop is unreliable (some Linux
+     *   browsers, certain Safari versions, embedded webviews). Cross-window
+     *   HTML5 drag and the HTML5 native drag image are not available in this
+     *   mode.
+     * - `'html5'`: HTML5 drag-and-drop only — disables touch / pen drag.
+     */
+    dndStrategy?: DockviewDndStrategy;
     locked?: boolean;
     className?: string;
     /**
@@ -177,19 +191,20 @@ export interface DockviewOptions {
 }
 export type TabAnimation = 'smooth' | 'default';
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
-    nativeEvent: DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    nativeEvent: DragEvent | PointerEvent;
     target: DockviewGroupDropLocation;
     position: Position;
     group?: DockviewGroupPanel;
     getData: () => PanelTransfer | undefined;
 }
 export declare class DockviewUnhandledDragOverEvent extends AcceptableEvent implements DockviewDndOverlayEvent {
-    readonly nativeEvent: DragEvent;
+    readonly nativeEvent: DragEvent | PointerEvent;
     readonly target: DockviewGroupDropLocation;
     readonly position: Position;
     readonly getData: () => PanelTransfer | undefined;
     readonly group?: DockviewGroupPanel | undefined;
-    constructor(nativeEvent: DragEvent, target: DockviewGroupDropLocation, position: Position, getData: () => PanelTransfer | undefined, group?: DockviewGroupPanel | undefined);
+    constructor(nativeEvent: DragEvent | PointerEvent, target: DockviewGroupDropLocation, position: Position, getData: () => PanelTransfer | undefined, group?: DockviewGroupPanel | undefined);
 }
 export declare const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[];
 export interface CreateComponentOptions {

package/dist/cjs/dockview/options.js

@@ -54,6 +54,7 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
+        dndStrategy: undefined,
         className: undefined,
         noPanelsOverlay: undefined,
         dndEdges: undefined,

package/dist/cjs/dom.js

@@ -313,7 +313,7 @@ function addTestId(element, id) {
  * Should be more efficient than element.querySelectorAll("*") since there
  * is no need to store every element in-memory using this approach
  */
-function allTagsNamesInclusiveOfShadowDoms(tagNames) {
+function allTagsNamesInclusiveOfShadowDoms(tagNames, rootNode) {
     var iframes = [];
     function findIframesInNode(node) {
         var e_5, _a;
@@ -339,13 +339,17 @@ function allTagsNamesInclusiveOfShadowDoms(tagNames) {
             }
         }
     }
-    findIframesInNode(document.documentElement);
+    // Document → walk from its root element. Element → walk from itself.
+    var startEl = rootNode instanceof Document
+        ? rootNode.documentElement
+        : rootNode;
+    findIframesInNode(startEl);
     return iframes;
 }
 function disableIframePointEvents(rootNode) {
     var e_6, _a;
     if (rootNode === void 0) { rootNode = document; }
-    var iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
+    var iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW'], rootNode);
     var original = new WeakMap(); // don't hold onto HTMLElement references longer than required
     try {
         for (var iframes_1 = __values(iframes), iframes_1_1 = iframes_1.next(); !iframes_1_1.done; iframes_1_1 = iframes_1.next()) {

package/dist/cjs/overlay/overlay.d.ts

@@ -8,6 +8,11 @@ export declare class Overlay extends CompositeDisposable {
     readonly onDidChange: Event<void>;
     private readonly _onDidChangeEnd;
     readonly onDidChangeEnd: Event<void>;
+    private readonly _onDidStartMoving;
+    /** Fires once per drag, the first time the float actually moves. */
+    readonly onDidStartMoving: Event<void>;
+    private readonly _dragMove;
+    private _dragCancelled;
     private static readonly MINIMUM_HEIGHT;
     private static readonly MINIMUM_WIDTH;
     private verticalAlignment;
@@ -27,6 +32,13 @@ export declare class Overlay extends CompositeDisposable {
     bringToFront(): void;
     setBounds(bounds?: Partial<AnchoredBox>): void;
     toJSON(): AnchoredBox;
+    /**
+     * Abort an in-flight move-the-float drag. Used by the void container
+     * when a redock long-press fires after the move started, so the ghost
+     * gesture wins without the float continuing to follow the finger.
+     * Does not emit `onDidChangeEnd` because no change is being committed.
+     */
+    cancelPendingDrag(): void;
     setupDrag(dragTarget: HTMLElement, options?: {
         inDragMode: boolean;
     }): void;

package/dist/cjs/overlay/overlay.js

@@ -90,7 +90,12 @@ var Overlay = /** @class */ (function (_super) {
         _this.onDidChange = _this._onDidChange.event;
         _this._onDidChangeEnd = new events_1.Emitter();
         _this.onDidChangeEnd = _this._onDidChangeEnd.event;
-        _this.addDisposables(_this._onDidChange, _this._onDidChangeEnd);
+        _this._onDidStartMoving = new events_1.Emitter();
+        /** Fires once per drag, the first time the float actually moves. */
+        _this.onDidStartMoving = _this._onDidStartMoving.event;
+        _this._dragMove = new lifecycle_1.MutableDisposable();
+        _this._dragCancelled = false;
+        _this.addDisposables(_this._onDidChange, _this._onDidChangeEnd, _this._onDidStartMoving, _this._dragMove);
         _this._element.className = 'dv-resize-container';
         _this._isVisible = true;
         _this.setupResize('top');
@@ -229,18 +234,62 @@ var Overlay = /** @class */ (function (_super) {
         result.height = element.height;
         return result;
     };
+    /**
+     * Abort an in-flight move-the-float drag. Used by the void container
+     * when a redock long-press fires after the move started, so the ghost
+     * gesture wins without the float continuing to follow the finger.
+     * Does not emit `onDidChangeEnd` because no change is being committed.
+     */
+    Overlay.prototype.cancelPendingDrag = function () {
+        if (!this._dragMove.value) {
+            return;
+        }
+        this._dragCancelled = true;
+        (0, dom_1.toggleClass)(this._element, 'dv-resize-container-dragging', false);
+        this._dragMove.value = lifecycle_1.Disposable.NONE;
+    };
     Overlay.prototype.setupDrag = function (dragTarget, options) {
         var _this = this;
         if (options === void 0) { options = { inDragMode: false }; }
-        var move = new lifecycle_1.MutableDisposable();
-        var track = function () {
+        var track = function (captureTarget, pointerId) {
             var offset = null;
+            var hasMoved = false;
+            _this._dragCancelled = false;
             var iframes = (0, dom_1.disableIframePointEvents)();
-            move.value = new lifecycle_1.CompositeDisposable({
+            if (captureTarget &&
+                typeof pointerId === 'number' &&
+                typeof captureTarget.setPointerCapture === 'function') {
+                try {
+                    captureTarget.setPointerCapture(pointerId);
+                }
+                catch (_a) {
+                    // ignore – non-fatal if the browser refuses capture
+                }
+            }
+            var end = function () {
+                (0, dom_1.toggleClass)(_this._element, 'dv-resize-container-dragging', false);
+                _this._dragMove.value = lifecycle_1.Disposable.NONE;
+                _this._onDidChangeEnd.fire();
+            };
+            _this._dragMove.value = new lifecycle_1.CompositeDisposable({
                 dispose: function () {
                     iframes.release();
+                    if (captureTarget &&
+                        typeof pointerId === 'number' &&
+                        typeof captureTarget.releasePointerCapture ===
+                            'function') {
+                        try {
+                            captureTarget.releasePointerCapture(pointerId);
+                        }
+                        catch (_a) {
+                            // ignore – pointer may already be released
+                        }
+                    }
                 },
             }, (0, events_1.addDisposableListener)(window, 'pointermove', function (e) {
+                if (_this._dragCancelled) {
+                    return;
+                }
                 var containerRect = _this.options.container.getBoundingClientRect();
                 var x = e.clientX - containerRect.left;
                 var y = e.clientY - containerRect.top;
@@ -277,13 +326,13 @@ var Overlay = /** @class */ (function (_super) {
                     bounds.right = right;
                 }
                 _this.setBounds(bounds);
-            }), (0, events_1.addDisposableListener)(window, 'pointerup', function () {
-                (0, dom_1.toggleClass)(_this._element, 'dv-resize-container-dragging', false);
-                move.dispose();
-                _this._onDidChangeEnd.fire();
-            }));
+                if (!hasMoved) {
+                    hasMoved = true;
+                    _this._onDidStartMoving.fire();
+                }
+            }), (0, events_1.addDisposableListener)(window, 'pointerup', end), (0, events_1.addDisposableListener)(window, 'pointercancel', end));
         };
-        this.addDisposables(move, (0, events_1.addDisposableListener)(dragTarget, 'pointerdown', function (event) {
+        this.addDisposables((0, events_1.addDisposableListener)(dragTarget, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 event.preventDefault();
                 return;
@@ -293,7 +342,7 @@ var Overlay = /** @class */ (function (_super) {
             if ((0, dom_1.quasiDefaultPrevented)(event)) {
                 return;
             }
-            track();
+            track(dragTarget, event.pointerId);
         }), (0, events_1.addDisposableListener)(this.options.content, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 return;
@@ -304,7 +353,7 @@ var Overlay = /** @class */ (function (_super) {
                 return;
             }
             if (event.shiftKey) {
-                track();
+                track(_this.options.content, event.pointerId);
             }
         }), (0, events_1.addDisposableListener)(this.options.content, 'pointerdown', function () {
             arialLevelTracker.push(_this._element);
@@ -323,6 +372,19 @@ var Overlay = /** @class */ (function (_super) {
             e.preventDefault();
             var startPosition = null;
             var iframes = (0, dom_1.disableIframePointEvents)();
+            var pointerId = e.pointerId;
+            if (typeof resizeHandleElement.setPointerCapture === 'function') {
+                try {
+                    resizeHandleElement.setPointerCapture(pointerId);
+                }
+                catch (_a) {
+                    // ignore – non-fatal if the browser refuses capture
+                }
+            }
+            var end = function () {
+                move.dispose();
+                _this._onDidChangeEnd.fire();
+            };
             move.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(window, 'pointermove', function (e) {
                 var containerRect = _this.options.container.getBoundingClientRect();
                 var overlayRect = _this._element.getBoundingClientRect();
@@ -457,11 +519,17 @@ var Overlay = /** @class */ (function (_super) {
             }), {
                 dispose: function () {
                     iframes.release();
+                    if (typeof resizeHandleElement.releasePointerCapture ===
+                        'function') {
+                        try {
+                            resizeHandleElement.releasePointerCapture(pointerId);
+                        }
+                        catch (_a) {
+                            // ignore – pointer may already be released
+                        }
+                    }
                 },
-            }, (0, events_1.addDisposableListener)(window, 'pointerup', function () {
-                move.dispose();
-                _this._onDidChangeEnd.fire();
-            }));
+            }, (0, events_1.addDisposableListener)(window, 'pointerup', end), (0, events_1.addDisposableListener)(window, 'pointercancel', end));
         }));
     };
     Overlay.prototype.getMinimumWidth = function (width) {

package/dist/cjs/paneview/draggablePaneviewPanel.d.ts

@@ -12,8 +12,10 @@ export interface PaneviewDidDropEvent extends DroptargetEvent {
     api: PaneviewApi;
 }
 export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
-    private handler;
+    private html5DragSource;
+    private pointerDragSource;
     private target;
+    private pointerTarget;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<PaneviewDidDropEvent>;
     private readonly _onUnhandledDragOverEvent;

package/dist/cjs/paneview/draggablePaneviewPanel.js

@@ -28,9 +28,8 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DraggablePaneviewPanel = void 0;
 var component_api_1 = require("../api/component.api");
-var abstractDragHandler_1 = require("../dnd/abstractDragHandler");
+var backend_1 = require("../dnd/backend");
 var dataTransfer_1 = require("../dnd/dataTransfer");
-var droptarget_1 = require("../dnd/droptarget");
 var events_1 = require("../events");
 var options_1 = require("./options");
 var paneviewPanel_1 = require("./paneviewPanel");
@@ -67,40 +66,42 @@ var DraggablePaneviewPanel = /** @class */ (function (_super) {
         var id = this.id;
         var accessorId = this.accessor.id;
         this.header.draggable = true;
-        this.handler = new (/** @class */ (function (_super) {
-            __extends(PaneDragHandler, _super);
-            function PaneDragHandler() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            PaneDragHandler.prototype.getData = function () {
+        var sharedDragOptions = {
+            getData: function () {
                 dataTransfer_1.LocalSelectionTransfer.getInstance().setData([new dataTransfer_1.PaneTransfer(accessorId, id)], dataTransfer_1.PaneTransfer.prototype);
                 return {
                     dispose: function () {
                         dataTransfer_1.LocalSelectionTransfer.getInstance().clearData(dataTransfer_1.PaneTransfer.prototype);
                     },
                 };
-            };
-            return PaneDragHandler;
-        }(abstractDragHandler_1.DragHandler)))(this.header);
-        this.target = new droptarget_1.Droptarget(this.element, {
+            },
+        };
+        this.html5DragSource = backend_1.html5Backend.createDragSource(this.header, sharedDragOptions);
+        this.pointerDragSource = backend_1.pointerBackend.createDragSource(this.header, sharedDragOptions);
+        var canDisplayOverlay = function (event, position) {
+            var data = (0, dataTransfer_1.getPaneData)();
+            if (data) {
+                if (data.paneId !== _this.id &&
+                    data.viewId === _this.accessor.id) {
+                    return true;
+                }
+            }
+            var firedEvent = new options_1.PaneviewUnhandledDragOverEvent(event, position, dataTransfer_1.getPaneData, _this);
+            _this._onUnhandledDragOverEvent.fire(firedEvent);
+            return firedEvent.isAccepted;
+        };
+        var dropTargetOptions = {
             acceptedTargetZones: ['top', 'bottom'],
             overlayModel: {
                 activationSize: { type: 'percentage', value: 50 },
             },
-            canDisplayOverlay: function (event, position) {
-                var data = (0, dataTransfer_1.getPaneData)();
-                if (data) {
-                    if (data.paneId !== _this.id &&
-                        data.viewId === _this.accessor.id) {
-                        return true;
-                    }
-                }
-                var firedEvent = new options_1.PaneviewUnhandledDragOverEvent(event, position, dataTransfer_1.getPaneData, _this);
-                _this._onUnhandledDragOverEvent.fire(firedEvent);
-                return firedEvent.isAccepted;
-            },
-        });
-        this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop(function (event) {
+            canDisplayOverlay: canDisplayOverlay,
+        };
+        this.target = backend_1.html5Backend.createDropTarget(this.element, dropTargetOptions);
+        this.pointerTarget = backend_1.pointerBackend.createDropTarget(this.element, dropTargetOptions);
+        this.addDisposables(this._onDidDrop, this.html5DragSource, this.pointerDragSource, this.target, this.pointerTarget, this.target.onDrop(function (event) {
+            _this.onDrop(event);
+        }), this.pointerTarget.onDrop(function (event) {
             _this.onDrop(event);
         }));
     };

package/dist/cjs/paneview/options.d.ts

@@ -15,15 +15,16 @@ export interface PaneviewFrameworkOptions {
 export type PaneviewComponentOptions = PaneviewOptions & PaneviewFrameworkOptions;
 export declare const PROPERTY_KEYS_PANEVIEW: (keyof PaneviewOptions)[];
 export interface PaneviewDndOverlayEvent extends IAcceptableEvent {
-    nativeEvent: DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    nativeEvent: DragEvent | PointerEvent;
     position: Position;
     panel: IPaneviewPanel;
     getData: () => PaneTransfer | undefined;
 }
 export declare class PaneviewUnhandledDragOverEvent extends AcceptableEvent implements PaneviewDndOverlayEvent {
-    readonly nativeEvent: DragEvent;
+    readonly nativeEvent: DragEvent | PointerEvent;
     readonly position: Position;
     readonly getData: () => PaneTransfer | undefined;
     readonly panel: IPaneviewPanel;
-    constructor(nativeEvent: DragEvent, position: Position, getData: () => PaneTransfer | undefined, panel: IPaneviewPanel);
+    constructor(nativeEvent: DragEvent | PointerEvent, position: Position, getData: () => PaneTransfer | undefined, panel: IPaneviewPanel);
 }