dockview-core 6.3.0 → 6.4.0

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -9,6 +9,10 @@ import { TabsContainer, } from './components/titlebar/tabsContainer';
 import { DockviewUnhandledDragOverEvent, } from './options';
 import { TabGroup, } from './tabGroup';
 export class DockviewDidDropEvent extends DockviewEvent {
+    /**
+     * `PointerEvent` for touch drags has no `dataTransfer`; use
+     * `getData()` for the dockview payload regardless of input method.
+     */
     get nativeEvent() {
         return this.options.nativeEvent;
     }
@@ -113,29 +117,28 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         toggleClass(this.container, 'dv-groupview-floating', false);
         toggleClass(this.container, 'dv-groupview-popout', false);
         toggleClass(this.container, 'dv-groupview-edge', false);
+        // Mouse and touch drop targets must agree on accepted zones.
+        const applyZones = (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']);
                 toggleClass(this.container, 'dv-groupview-floating', true);
                 break;
             case 'popout':
-                this.contentContainer.dropTarget.setTargetZones(['center']);
+                applyZones(['center']);
                 toggleClass(this.container, 'dv-groupview-popout', true);
                 break;
             case 'edge':
-                this.contentContainer.dropTarget.setTargetZones(['center']);
+                applyZones(['center']);
                 toggleClass(this.container, 'dv-groupview-edge', true);
                 break;
         }
@@ -261,6 +264,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             // noop
         }), this.contentContainer.dropTarget.onDrop((event) => {
             this.handleDropEvent('content', event.nativeEvent, event.position);
+        }), this.contentContainer.pointerDropTarget.onDrop((event) => {
+            this.handleDropEvent('content', event.nativeEvent, event.position);
         }), this.tabsContainer.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(event);
         }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
@@ -271,6 +276,14 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 group: this.groupPanel,
                 getData: getPanelData,
             }));
+        }), this.contentContainer.pointerDropTarget.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
+                kind: 'content',
+                panel: this.activePanel,
+                api: this._api,
+                group: this.groupPanel,
+                getData: 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(() => {
             this._scheduleTabGroupUpdate();
         }), this._onDidDestroyTabGroup.event(() => {

package/dist/esm/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/esm/dockview/events.js

@@ -2,6 +2,7 @@ export class DockviewWillShowOverlayLocationEvent {
     get kind() {
         return this.options.kind;
     }
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
     get nativeEvent() {
         return this.event.nativeEvent;
     }

package/dist/esm/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/esm/dockview/options.js

@@ -28,6 +28,7 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
+        dndStrategy: undefined,
         className: undefined,
         noPanelsOverlay: undefined,
         dndEdges: undefined,

package/dist/esm/dom.js

@@ -205,7 +205,7 @@ export 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) {
     const iframes = [];
     function findIframesInNode(node) {
         if (node.nodeType === Node.ELEMENT_NODE) {
@@ -220,11 +220,15 @@ function allTagsNamesInclusiveOfShadowDoms(tagNames) {
             }
         }
     }
-    findIframesInNode(document.documentElement);
+    // Document → walk from its root element. Element → walk from itself.
+    const startEl = rootNode instanceof Document
+        ? rootNode.documentElement
+        : rootNode;
+    findIframesInNode(startEl);
     return iframes;
 }
 export function disableIframePointEvents(rootNode = document) {
-    const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
+    const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW'], rootNode);
     const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
     for (const iframe of iframes) {
         original.set(iframe, iframe.style.pointerEvents);

package/dist/esm/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/esm/overlay/overlay.js

@@ -1,6 +1,6 @@
 import { disableIframePointEvents, quasiDefaultPrevented, toggleClass, } from '../dom';
 import { Emitter, addDisposableListener } from '../events';
-import { CompositeDisposable, MutableDisposable } from '../lifecycle';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../lifecycle';
 import { clamp } from '../math';
 class AriaLevelTracker {
     constructor() {
@@ -47,7 +47,12 @@ export class Overlay extends CompositeDisposable {
         this.onDidChange = this._onDidChange.event;
         this._onDidChangeEnd = new Emitter();
         this.onDidChangeEnd = this._onDidChangeEnd.event;
-        this.addDisposables(this._onDidChange, this._onDidChangeEnd);
+        this._onDidStartMoving = new Emitter();
+        /** Fires once per drag, the first time the float actually moves. */
+        this.onDidStartMoving = this._onDidStartMoving.event;
+        this._dragMove = new 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');
@@ -156,16 +161,60 @@ export class Overlay extends CompositeDisposable {
         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.
+     */
+    cancelPendingDrag() {
+        if (!this._dragMove.value) {
+            return;
+        }
+        this._dragCancelled = true;
+        toggleClass(this._element, 'dv-resize-container-dragging', false);
+        this._dragMove.value = Disposable.NONE;
+    }
     setupDrag(dragTarget, options = { inDragMode: false }) {
-        const move = new MutableDisposable();
-        const track = () => {
+        const track = (captureTarget, pointerId) => {
             let offset = null;
+            let hasMoved = false;
+            this._dragCancelled = false;
             const iframes = disableIframePointEvents();
-            move.value = new CompositeDisposable({
+            if (captureTarget &&
+                typeof pointerId === 'number' &&
+                typeof captureTarget.setPointerCapture === 'function') {
+                try {
+                    captureTarget.setPointerCapture(pointerId);
+                }
+                catch (_a) {
+                    // ignore – non-fatal if the browser refuses capture
+                }
+            }
+            const end = () => {
+                toggleClass(this._element, 'dv-resize-container-dragging', false);
+                this._dragMove.value = Disposable.NONE;
+                this._onDidChangeEnd.fire();
+            };
+            this._dragMove.value = new CompositeDisposable({
                 dispose: () => {
                     iframes.release();
+                    if (captureTarget &&
+                        typeof pointerId === 'number' &&
+                        typeof captureTarget.releasePointerCapture ===
+                            'function') {
+                        try {
+                            captureTarget.releasePointerCapture(pointerId);
+                        }
+                        catch (_a) {
+                            // ignore – pointer may already be released
+                        }
+                    }
                 },
             }, addDisposableListener(window, 'pointermove', (e) => {
+                if (this._dragCancelled) {
+                    return;
+                }
                 const containerRect = this.options.container.getBoundingClientRect();
                 const x = e.clientX - containerRect.left;
                 const y = e.clientY - containerRect.top;
@@ -202,13 +251,13 @@ export class Overlay extends CompositeDisposable {
                     bounds.right = right;
                 }
                 this.setBounds(bounds);
-            }), addDisposableListener(window, 'pointerup', () => {
-                toggleClass(this._element, 'dv-resize-container-dragging', false);
-                move.dispose();
-                this._onDidChangeEnd.fire();
-            }));
+                if (!hasMoved) {
+                    hasMoved = true;
+                    this._onDidStartMoving.fire();
+                }
+            }), addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
         };
-        this.addDisposables(move, addDisposableListener(dragTarget, 'pointerdown', (event) => {
+        this.addDisposables(addDisposableListener(dragTarget, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 event.preventDefault();
                 return;
@@ -218,7 +267,7 @@ export class Overlay extends CompositeDisposable {
             if (quasiDefaultPrevented(event)) {
                 return;
             }
-            track();
+            track(dragTarget, event.pointerId);
         }), addDisposableListener(this.options.content, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
@@ -229,7 +278,7 @@ export class Overlay extends CompositeDisposable {
                 return;
             }
             if (event.shiftKey) {
-                track();
+                track(this.options.content, event.pointerId);
             }
         }), addDisposableListener(this.options.content, 'pointerdown', () => {
             arialLevelTracker.push(this._element);
@@ -247,6 +296,19 @@ export class Overlay extends CompositeDisposable {
             e.preventDefault();
             let startPosition = null;
             const iframes = disableIframePointEvents();
+            const pointerId = e.pointerId;
+            if (typeof resizeHandleElement.setPointerCapture === 'function') {
+                try {
+                    resizeHandleElement.setPointerCapture(pointerId);
+                }
+                catch (_a) {
+                    // ignore – non-fatal if the browser refuses capture
+                }
+            }
+            const end = () => {
+                move.dispose();
+                this._onDidChangeEnd.fire();
+            };
             move.value = new CompositeDisposable(addDisposableListener(window, 'pointermove', (e) => {
                 const containerRect = this.options.container.getBoundingClientRect();
                 const overlayRect = this._element.getBoundingClientRect();
@@ -381,11 +443,17 @@ export class Overlay extends CompositeDisposable {
             }), {
                 dispose: () => {
                     iframes.release();
+                    if (typeof resizeHandleElement.releasePointerCapture ===
+                        'function') {
+                        try {
+                            resizeHandleElement.releasePointerCapture(pointerId);
+                        }
+                        catch (_a) {
+                            // ignore – pointer may already be released
+                        }
+                    }
                 },
-            }, addDisposableListener(window, 'pointerup', () => {
-                move.dispose();
-                this._onDidChangeEnd.fire();
-            }));
+            }, addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
         }));
     }
     getMinimumWidth(width) {

package/dist/esm/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/esm/paneview/draggablePaneviewPanel.js

@@ -1,7 +1,6 @@
 import { PaneviewApi } from '../api/component.api';
-import { DragHandler } from '../dnd/abstractDragHandler';
+import { html5Backend, pointerBackend, } from '../dnd/backend';
 import { getPaneData, LocalSelectionTransfer, PaneTransfer, } from '../dnd/dataTransfer';
-import { Droptarget } from '../dnd/droptarget';
 import { Emitter } from '../events';
 import { PaneviewUnhandledDragOverEvent, } from './options';
 import { PaneviewPanel, } from './paneviewPanel';
@@ -35,35 +34,42 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
         const id = this.id;
         const accessorId = this.accessor.id;
         this.header.draggable = true;
-        this.handler = new (class PaneDragHandler extends DragHandler {
-            getData() {
+        const sharedDragOptions = {
+            getData: () => {
                 LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
                 return {
                     dispose: () => {
                         LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
                     },
                 };
+            },
+        };
+        this.html5DragSource = html5Backend.createDragSource(this.header, sharedDragOptions);
+        this.pointerDragSource = pointerBackend.createDragSource(this.header, sharedDragOptions);
+        const canDisplayOverlay = (event, position) => {
+            const data = getPaneData();
+            if (data) {
+                if (data.paneId !== this.id &&
+                    data.viewId === this.accessor.id) {
+                    return true;
+                }
             }
-        })(this.header);
-        this.target = new Droptarget(this.element, {
+            const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
+            this._onUnhandledDragOverEvent.fire(firedEvent);
+            return firedEvent.isAccepted;
+        };
+        const dropTargetOptions = {
             acceptedTargetZones: ['top', 'bottom'],
             overlayModel: {
                 activationSize: { type: 'percentage', value: 50 },
             },
-            canDisplayOverlay: (event, position) => {
-                const data = getPaneData();
-                if (data) {
-                    if (data.paneId !== this.id &&
-                        data.viewId === this.accessor.id) {
-                        return true;
-                    }
-                }
-                const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
-                this._onUnhandledDragOverEvent.fire(firedEvent);
-                return firedEvent.isAccepted;
-            },
-        });
-        this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+            canDisplayOverlay,
+        };
+        this.target = html5Backend.createDropTarget(this.element, dropTargetOptions);
+        this.pointerTarget = pointerBackend.createDropTarget(this.element, dropTargetOptions);
+        this.addDisposables(this._onDidDrop, this.html5DragSource, this.pointerDragSource, this.target, this.pointerTarget, this.target.onDrop((event) => {
+            this.onDrop(event);
+        }), this.pointerTarget.onDrop((event) => {
             this.onDrop(event);
         }));
     }

package/dist/esm/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);
 }