dockview-core 6.2.2 → 6.4.0

package/dist/esm/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/esm/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/esm/dockview/components/titlebar/voidContainer.js

@@ -1,50 +1,204 @@
-import { getPanelData } from '../../../dnd/dataTransfer';
-import { Droptarget, } from '../../../dnd/droptarget';
-import { GroupDragHandler } from '../../../dnd/groupDragHandler';
-import { addDisposableListener, Emitter } from '../../../events';
-import { CompositeDisposable } from '../../../lifecycle';
-import { toggleClass } from '../../../dom';
+import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
+import { html5Backend, pointerBackend, } from '../../../dnd/backend';
+import { addDisposableListener, Emitter, Event } from '../../../events';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
+import { quasiPreventDefault, toggleClass } from '../../../dom';
+import { resolveDndCapabilities } from '../../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.
+const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
 export class VoidContainer extends CompositeDisposable {
     get element() {
         return this._element;
     }
     constructor(accessor, group) {
+        var _a, _b;
         super();
         this.accessor = accessor;
         this.group = group;
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
+        const caps = resolveDndCapabilities(this.accessor.options);
         this._element = document.createElement('div');
         this._element.className = 'dv-void-container';
-        this._element.draggable = !this.accessor.options.disableDnd;
-        toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
+        this._element.draggable = caps.html5;
+        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
         this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
             this.accessor.doSetGroupActive(this.group);
-        }));
-        this.handler = new GroupDragHandler(this._element, accessor, group, !!this.accessor.options.disableDnd);
-        this.dropTarget = new 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.
+        addDisposableListener(this._element, 'pointerdown', (e) => {
+            if (e.shiftKey) {
+                quasiPreventDefault(e);
+            }
+        }, true));
+        const canDisplayOverlay = (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;
+            }
+            const data = getPanelData();
+            if (data && this.accessor.id === data.viewId) {
+                return true;
+            }
+            return group.model.canDisplayOverlay(event, position, 'header_space');
+        };
+        this.dropTarget = html5Backend.createDropTarget(this._element, {
             acceptedTargetZones: ['center'],
-            canDisplayOverlay: (event, position) => {
-                const data = getPanelData();
-                if (data && this.accessor.id === data.viewId) {
-                    return true;
-                }
-                return group.model.canDisplayOverlay(event, position, 'header_space');
-            },
+            canDisplayOverlay,
             getOverrideTarget: () => { 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((event) => {
-            this._onDragStart.fire(event);
-        }), this.dropTarget.onDrop((event) => {
+        this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
+            acceptedTargetZones: ['center'],
+            canDisplayOverlay,
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        const buildMultiPanelsGhost = () => {
+            const ghostEl = document.createElement('div');
+            const style = window.getComputedStyle(this._element);
+            const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+            const 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 (${this.group.size})`;
+            return ghostEl;
+        };
+        const buildGhostSpec = () => {
+            const createGhost = this.accessor.options.createGroupDragGhostComponent;
+            if (createGhost) {
+                const renderer = createGhost(this.group);
+                renderer.init({
+                    group: this.group,
+                    api: this.accessor.api,
+                });
+                return {
+                    element: renderer.element,
+                    offsetX: 30,
+                    offsetY: -10,
+                    dispose: renderer.dispose
+                        ? () => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }
+                        : undefined,
+                };
+            }
+            return {
+                element: buildMultiPanelsGhost(),
+                offsetX: 30,
+                offsetY: -10,
+            };
+        };
+        const sharedDragOptions = {
+            getData: () => {
+                this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        this.panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
+            },
+            createGhost: buildGhostSpec,
+            onDragStart: (event) => {
+                this._onDragStart.fire(event);
+            },
+        };
+        this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5, isCancelled: (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;
+                }
+                if (this.group.api.location.type === 'edge' &&
+                    this.group.size === 0) {
+                    return true;
+                }
+                return false;
+            } }));
+        const isFloating = () => { 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 = pointerBackend.createDragSource(this._element, Object.assign(Object.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: () => isFloating() ? FLOATING_REDOCK_INITIATION_DELAY_MS : 250, pressTolerance: () => (isFloating() ? Infinity : 8), isCancelled: () => {
+                if (!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: (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.
+        const overlayMoveSub = new MutableDisposable();
+        const refreshOverlayMoveSub = () => {
+            const overlay = this.getFloatingOverlay();
+            overlayMoveSub.value = overlay
+                ? overlay.onDidStartMoving(() => {
+                    this.pointerDragSource.cancelPending();
+                })
+                : Disposable.NONE;
+        };
+        refreshOverlayMoveSub();
+        this.addDisposables(overlayMoveSub);
+        const 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 = Event.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
+        this.addDisposables(this.html5DragSource, this.dropTarget.onDrop((event) => {
             this._onDrop.fire(event);
-        }), this.dropTarget);
+        }), this.pointerDropTarget.onDrop((event) => {
+            this._onDrop.fire(event);
+        }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
     }
     updateDragAndDropState() {
-        this._element.draggable = !this.accessor.options.disableDnd;
-        toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
-        this.handler.setDisabled(!!this.accessor.options.disableDnd);
+        const caps = resolveDndCapabilities(this.accessor.options);
+        this._element.draggable = caps.html5;
+        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
+        this.html5DragSource.setDisabled(!caps.html5);
+        this.pointerDragSource.setDisabled(!caps.pointer);
+        this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+    }
+    getFloatingOverlay() {
+        var _a, _b;
+        if (!this.group) {
+            return undefined;
+        }
+        return (_b = (_a = this.accessor.floatingGroups) === null || _a === void 0 ? void 0 : _a.find((fg) => fg.group === this.group)) === null || _b === void 0 ? void 0 : _b.overlay;
     }
 }

package/dist/esm/dockview/contextMenu.js

@@ -40,6 +40,14 @@ function buildSeparator() {
     el.setAttribute('role', 'separator');
     return el;
 }
+function isCoarsePrimaryInput() {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return false;
+    }
+    const coarse = window.matchMedia('(pointer: coarse)').matches;
+    const fine = window.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}
 function buildRenameInput(tabGroup) {
     const wrapper = document.createElement('div');
     wrapper.className = 'dv-context-menu-rename';
@@ -60,10 +68,17 @@ function buildRenameInput(tabGroup) {
         e.stopPropagation();
     });
     wrapper.appendChild(input);
-    requestAnimationFrame(() => {
-        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(() => {
+            input.focus();
+            input.select();
+        });
+    }
     return wrapper;
 }
 function buildColorPicker(tabGroup, palette) {

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

@@ -0,0 +1,36 @@
+export 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.
+    const coarse = window.matchMedia('(pointer: coarse)').matches;
+    const fine = window.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}

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

@@ -261,7 +261,9 @@ 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;
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;