dockview-core 6.3.0 → 6.5.0

package/dist/cjs/dnd/pointer/pointerDropTarget.js

@@ -0,0 +1,198 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointerDropTarget = void 0;
+var events_1 = require("../../events");
+var lifecycle_1 = require("../../lifecycle");
+var dropOverlay_1 = require("../dropOverlay");
+var droptarget_1 = require("../droptarget");
+var pointerDragController_1 = require("./pointerDragController");
+var DEFAULT_ACTIVATION_SIZE = {
+    value: 20,
+    type: 'percentage',
+};
+/** Pointer-driven counterpart to `Droptarget` with identical visual output. */
+var PointerDropTarget = /** @class */ (function (_super) {
+    __extends(PointerDropTarget, _super);
+    function PointerDropTarget(element, options) {
+        var _this = _super.call(this) || this;
+        _this.element = element;
+        _this.options = options;
+        _this._onDrop = new events_1.Emitter();
+        _this.onDrop = _this._onDrop.event;
+        _this._onWillShowOverlay = new events_1.Emitter();
+        _this.onWillShowOverlay = _this._onWillShowOverlay.event;
+        _this._disabled = false;
+        _this._acceptedTargetZonesSet = new Set(options.acceptedTargetZones);
+        var handle = {
+            element: _this.element,
+            handleDragOver: function (e) { return _this._onDragOver(e); },
+            handleDragLeave: function () { return _this._onDragLeave(); },
+            handleDrop: function (e) { return _this._onDropEvent(e); },
+        };
+        _this.addDisposables(_this._onDrop, _this._onWillShowOverlay, pointerDragController_1.PointerDragController.getInstance().registerTarget(handle));
+        return _this;
+    }
+    Object.defineProperty(PointerDropTarget.prototype, "disabled", {
+        get: function () {
+            return this._disabled;
+        },
+        set: function (value) {
+            this._disabled = value;
+            if (value) {
+                this._removeOverlay();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PointerDropTarget.prototype, "state", {
+        get: function () {
+            return this._state;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PointerDropTarget.prototype.setTargetZones = function (zones) {
+        this._acceptedTargetZonesSet = new Set(zones);
+    };
+    PointerDropTarget.prototype.setOverlayModel = function (model) {
+        this.options.overlayModel = model;
+    };
+    PointerDropTarget.prototype.dispose = function () {
+        this._removeOverlay();
+        _super.prototype.dispose.call(this);
+    };
+    PointerDropTarget.prototype._onDragOver = function (event) {
+        var _a, _b, _c, _d, _e;
+        if (this._disabled) {
+            this._removeOverlay();
+            return;
+        }
+        var overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (this._acceptedTargetZonesSet.size === 0) {
+            if (overrideTarget) {
+                return;
+            }
+            this._removeOverlay();
+            return;
+        }
+        var outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
+        var width = outlineEl.offsetWidth;
+        var height = outlineEl.offsetHeight;
+        if (width === 0 || height === 0) {
+            return;
+        }
+        var rect = outlineEl.getBoundingClientRect();
+        var x = event.clientX - rect.left;
+        var y = event.clientY - rect.top;
+        var quadrant = this._calculateQuadrant(x, y, width, height);
+        if (quadrant === null) {
+            this._removeOverlay();
+            return;
+        }
+        if (!this.options.canDisplayOverlay(event.pointerEvent, quadrant)) {
+            if (overrideTarget) {
+                return;
+            }
+            this._removeOverlay();
+            return;
+        }
+        var willShow = new droptarget_1.WillShowOverlayEvent({
+            nativeEvent: event.pointerEvent,
+            position: quadrant,
+        });
+        this._onWillShowOverlay.fire(willShow);
+        if (willShow.defaultPrevented) {
+            this._removeOverlay();
+            return;
+        }
+        if (overrideTarget) {
+            (0, dropOverlay_1.renderAnchoredOverlay)({
+                outlineElement: outlineEl,
+                targetModel: overrideTarget,
+                quadrant: quadrant,
+                width: width,
+                height: height,
+                overlayModel: this.options.overlayModel,
+                className: this.options.className,
+            });
+            this._state = quadrant;
+            return;
+        }
+        if (!this._targetElement) {
+            var els = (0, dropOverlay_1.createOverlayElements)();
+            this._targetElement = els.dropzone;
+            this._overlayElement = els.selection;
+            this._state = 'center';
+            this.element.classList.add('dv-drop-target');
+            this.element.append(this._targetElement);
+        }
+        if (this._overlayElement) {
+            (0, dropOverlay_1.renderInPlaceOverlay)(this._overlayElement, quadrant, width, height, this.options.overlayModel);
+        }
+        this._state = quadrant;
+    };
+    PointerDropTarget.prototype._onDragLeave = function () {
+        var _a, _b;
+        var overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+        // Anchor target owns its own lifecycle; just clear our latched
+        // state so a subsequent pointerup doesn't fire a stale drop.
+        if (overrideTarget) {
+            this._state = undefined;
+            overrideTarget.clear();
+            return;
+        }
+        this._removeOverlay();
+    };
+    PointerDropTarget.prototype._onDropEvent = function (event) {
+        var _a, _b;
+        var state = this._state;
+        var overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this._removeOverlay();
+        overrideTarget === null || overrideTarget === void 0 ? void 0 : overrideTarget.clear();
+        if (state) {
+            this._onDrop.fire({
+                position: state,
+                nativeEvent: event.pointerEvent,
+            });
+        }
+    };
+    PointerDropTarget.prototype._calculateQuadrant = function (x, y, width, height) {
+        var _a, _b;
+        var activation = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
+        if (activation.type === 'percentage') {
+            return (0, droptarget_1.calculateQuadrantAsPercentage)(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
+        }
+        return (0, droptarget_1.calculateQuadrantAsPixels)(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
+    };
+    PointerDropTarget.prototype._removeOverlay = function () {
+        var _a;
+        if (this._targetElement) {
+            this._state = undefined;
+            (_a = this._targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
+            this._targetElement.remove();
+            this._targetElement = undefined;
+            this._overlayElement = undefined;
+        }
+        else {
+            this._state = undefined;
+        }
+    };
+    return PointerDropTarget;
+}(lifecycle_1.CompositeDisposable));
+exports.PointerDropTarget = PointerDropTarget;

package/dist/cjs/dnd/pointer/pointerGhost.d.ts

@@ -0,0 +1,30 @@
+import { IDisposable } from '../../lifecycle';
+export interface PointerGhostOptions {
+    element: HTMLElement;
+    initialX: number;
+    initialY: number;
+    /** Pointer position within the ghost; default top-left. */
+    offsetX?: number;
+    offsetY?: number;
+    /** Default 0.8. */
+    opacity?: number;
+    /**
+     * Source element whose `ownerDocument.body` hosts the ghost — pass for
+     * popout-window drags so the ghost renders in the popout's document.
+     */
+    owner?: Element;
+}
+/**
+ * Floating clone that follows the pointer; appended to the owning
+ * document's body with `pointer-events: none` so it doesn't intercept
+ * hit-testing.
+ */
+export declare class PointerGhost implements IDisposable {
+    private readonly element;
+    private readonly offsetX;
+    private readonly offsetY;
+    private _disposed;
+    constructor(opts: PointerGhostOptions);
+    update(clientX: number, clientY: number): void;
+    dispose(): void;
+}

package/dist/cjs/dnd/pointer/pointerGhost.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointerGhost = void 0;
+/**
+ * Floating clone that follows the pointer; appended to the owning
+ * document's body with `pointer-events: none` so it doesn't intercept
+ * hit-testing.
+ */
+var PointerGhost = /** @class */ (function () {
+    function PointerGhost(opts) {
+        var _a, _b, _c, _d, _e;
+        this._disposed = false;
+        this.element = opts.element;
+        this.offsetX = (_a = opts.offsetX) !== null && _a !== void 0 ? _a : 0;
+        this.offsetY = (_b = opts.offsetY) !== null && _b !== void 0 ? _b : 0;
+        // Animate via transform (see update); position:fixed for scroll-independence.
+        this.element.style.position = 'fixed';
+        this.element.style.left = '0px';
+        this.element.style.top = '0px';
+        this.element.style.pointerEvents = 'none';
+        this.element.style.zIndex = '99999';
+        this.element.style.opacity = String((_c = opts.opacity) !== null && _c !== void 0 ? _c : 0.8);
+        this.element.style.willChange = 'transform';
+        this.element.style.transform = "translate3d(".concat(opts.initialX - this.offsetX, "px, ").concat(opts.initialY - this.offsetY, "px, 0)");
+        var ownerDocument = (_e = (_d = opts.owner) === null || _d === void 0 ? void 0 : _d.ownerDocument) !== null && _e !== void 0 ? _e : document;
+        ownerDocument.body.appendChild(this.element);
+    }
+    PointerGhost.prototype.update = function (clientX, clientY) {
+        if (this._disposed) {
+            return;
+        }
+        // translate3d composites on the GPU — no layout per pointermove.
+        this.element.style.transform = "translate3d(".concat(clientX - this.offsetX, "px, ").concat(clientY - this.offsetY, "px, 0)");
+    };
+    PointerGhost.prototype.dispose = function () {
+        if (this._disposed) {
+            return;
+        }
+        this._disposed = true;
+        this.element.remove();
+    };
+    return PointerGhost;
+}());
+exports.PointerGhost = PointerGhost;

package/dist/cjs/dnd/pointer/types.d.ts

@@ -0,0 +1,16 @@
+import { Position } from '../droptarget';
+export interface PointerDragEvent {
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly pointerEvent: PointerEvent;
+}
+export interface PointerDroptargetEvent {
+    readonly position: Position;
+    readonly nativeEvent: PointerEvent;
+}
+export interface IPointerDropTargetHandle {
+    readonly element: HTMLElement;
+    handleDragOver(event: PointerDragEvent): void;
+    handleDragLeave(): void;
+    handleDrop(event: PointerDragEvent): void;
+}

package/dist/cjs/dnd/pointer/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/dockview/components/panel/content.d.ts

@@ -2,10 +2,11 @@ import { CompositeDisposable, IDisposable } from '../../../lifecycle';
 import { Event } from '../../../events';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
-import { Droptarget } from '../../../dnd/droptarget';
+import { Droptarget, IDropTarget } from '../../../dnd/droptarget';
 import { DockviewGroupPanelModel } from '../../dockviewGroupPanelModel';
 export interface IContentContainer extends IDisposable {
     readonly dropTarget: Droptarget;
+    readonly pointerDropTarget: IDropTarget;
     onDidFocus: Event<void>;
     onDidBlur: Event<void>;
     element: HTMLElement;
@@ -32,6 +33,7 @@ export declare class ContentContainer extends CompositeDisposable implements ICo
     readonly onDidBlur: Event<void>;
     get element(): HTMLElement;
     readonly dropTarget: Droptarget;
+    readonly pointerDropTarget: IDropTarget;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanelModel);
     show(): void;
     hide(): void;

package/dist/cjs/dockview/components/panel/content.js

@@ -20,6 +20,7 @@ var lifecycle_1 = require("../../../lifecycle");
 var events_1 = require("../../../events");
 var dom_1 = require("../../../dom");
 var droptarget_1 = require("../../../dnd/droptarget");
+var backend_1 = require("../../../dnd/backend");
 var dataTransfer_1 = require("../../../dnd/dataTransfer");
 var ContentContainer = /** @class */ (function (_super) {
     __extends(ContentContainer, _super);
@@ -37,6 +38,25 @@ var ContentContainer = /** @class */ (function (_super) {
         _this._element.tabIndex = -1;
         _this.addDisposables(_this._onDidFocus, _this._onDidBlur);
         var target = group.dropTargetContainer;
+        var canDisplayOverlay = function (event, position) {
+            if (_this.group.locked === 'no-drop-target' ||
+                (_this.group.locked && position === 'center')) {
+                return false;
+            }
+            var data = (0, dataTransfer_1.getPanelData)();
+            if (!data &&
+                event.shiftKey &&
+                _this.group.location.type !== 'floating') {
+                return false;
+            }
+            if (data && data.viewId === _this.accessor.id) {
+                return true;
+            }
+            return _this.group.canDisplayOverlay(event, position, 'content');
+        };
+        // `dropTarget` stays the concrete `Droptarget` (not via the backend
+        // factory) because overlayRenderContainer forwards HTML5 drag events
+        // through `dropTarget.dnd` — that field is not part of `IDropTarget`.
         _this.dropTarget = new droptarget_1.Droptarget(_this.element, {
             getOverlayOutline: function () {
                 var _a;
@@ -46,25 +66,22 @@ var ContentContainer = /** @class */ (function (_super) {
             },
             className: 'dv-drop-target-content',
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            canDisplayOverlay: function (event, position) {
-                if (_this.group.locked === 'no-drop-target' ||
-                    (_this.group.locked && position === 'center')) {
-                    return false;
-                }
-                var data = (0, dataTransfer_1.getPanelData)();
-                if (!data &&
-                    event.shiftKey &&
-                    _this.group.location.type !== 'floating') {
-                    return false;
-                }
-                if (data && data.viewId === _this.accessor.id) {
-                    return true;
-                }
-                return _this.group.canDisplayOverlay(event, position, 'content');
+            canDisplayOverlay: canDisplayOverlay,
+            getOverrideTarget: target ? function () { return target.model; } : undefined,
+        });
+        _this.pointerDropTarget = backend_1.pointerBackend.createDropTarget(_this.element, {
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            canDisplayOverlay: canDisplayOverlay,
+            getOverlayOutline: function () {
+                var _a;
+                return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
+                    ? _this.element.parentElement
+                    : null;
             },
+            className: 'dv-drop-target-content',
             getOverrideTarget: target ? function () { return target.model; } : undefined,
         });
-        _this.addDisposables(_this.dropTarget);
+        _this.addDisposables(_this.dropTarget, _this.pointerDropTarget);
         return _this;
     }
     Object.defineProperty(ContentContainer.prototype, "element", {

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

@@ -19,6 +19,14 @@ exports.PopupService = void 0;
 var dom_1 = require("../../dom");
 var events_1 = require("../../events");
 var lifecycle_1 = require("../../lifecycle");
+function isCoarsePrimaryInput(win) {
+    if (!win.matchMedia) {
+        return false;
+    }
+    var coarse = win.matchMedia('(pointer: coarse)').matches;
+    var fine = win.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}
 var PopupService = /** @class */ (function (_super) {
     __extends(PopupService, _super);
     function PopupService(root, win) {
@@ -61,8 +69,22 @@ var PopupService = /** @class */ (function (_super) {
         wrapper.style.left = "".concat(position.x - offsetX, "px");
         this._element.appendChild(wrapper);
         this._active = wrapper;
+        // Outside-pointerdown dismissal is suppressed for a short grace
+        // window after opening. Touch long-press callers (chip / tab context
+        // menus) open the popover while the user's finger is still pressing
+        // the source element — Android Chrome can dispatch a follow-up
+        // synthetic pointerdown tied to the gesture, and the release-then-
+        // retap motion can land just outside the wrapper. Either would
+        // dismiss the popover before the user can see or interact with it.
+        // The grace window is short enough that intentional outside taps
+        // still feel responsive.
+        var openedAt = Date.now();
+        var POINTERDOWN_GRACE_MS = 200;
         this._activeDisposable.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(this._window, 'pointerdown', function (event) {
             var _a;
+            if (Date.now() - openedAt < POINTERDOWN_GRACE_MS) {
+                return;
+            }
             var target = event.target;
             if (!(target instanceof HTMLElement)) {
                 return;
@@ -80,6 +102,18 @@ var PopupService = /** @class */ (function (_super) {
                 _this.close();
             }
         }), (0, events_1.addDisposableListener)(this._window, 'resize', function () {
+            // On touch-primary devices, common interactions resize the
+            // window: on-screen keyboard pop, orientation change, browser
+            // address-bar collapse. None of these mean "the user wants
+            // the popover dismissed". Specifically, focusing the chip
+            // context menu's rename input pops the keyboard, which would
+            // otherwise close the menu the moment the user goes to edit
+            // it. Desktop / hybrid input keeps the existing behaviour —
+            // there a resize genuinely means the user has resized the
+            // window and the popover position is now stale.
+            if (isCoarsePrimaryInput(_this._window)) {
+                return;
+            }
             _this.close();
         }));
         this._window.requestAnimationFrame(function () {

package/dist/cjs/dockview/components/tab/tab.d.ts

@@ -12,8 +12,11 @@ export declare class Tab extends CompositeDisposable {
     private readonly group;
     private readonly _element;
     private readonly dropTarget;
+    private readonly pointerDropTarget;
     private content;
-    private readonly dragHandler;
+    private readonly html5DragSource;
+    private readonly pointerDragSource;
+    private readonly panelTransfer;
     private _direction;
     private readonly _onPointDown;
     readonly onPointerDown: Event<MouseEvent>;
@@ -22,9 +25,9 @@ export declare class Tab extends CompositeDisposable {
     private readonly _onDropped;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
-    readonly onDragStart: Event<DragEvent>;
+    readonly onDragStart: Event<PointerEvent | DragEvent>;
     private readonly _onDragEnd;
-    readonly onDragEnd: Event<DragEvent>;
+    readonly onDragEnd: Event<PointerEvent | DragEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
@@ -33,4 +36,9 @@ export declare class Tab extends CompositeDisposable {
     private _buildOverlayModel;
     setDirection(direction: DockviewHeaderDirection): void;
     updateDragAndDropState(): void;
+    /**
+     * Vertical tabs are flipped to horizontal so the ghost stays readable
+     * during the drag rather than appearing sideways-rotated.
+     */
+    private _buildGhostElement;
 }