dockview-core 6.3.0 → 6.5.0

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

@@ -0,0 +1,241 @@
+"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 __());
+    };
+})();
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointerDragController = void 0;
+var dom_1 = require("../../dom");
+var events_1 = require("../../events");
+var lifecycle_1 = require("../../lifecycle");
+/**
+ * Singleton — only one pointer-driven drag active at a time.
+ *
+ * State is shared across every Dockview instance on the page. Targets
+ * from instance B receive hit-tests from drags originating in instance A;
+ * that's intentional for cross-instance drops since `LocalSelectionTransfer`
+ * is also process-wide. The corollary is that every Tabs subscriber to
+ * `onDragMove` fires for every pointer drag globally — each subscriber
+ * hit-tests against its own DOM, so this is O(N) per pointermove where N
+ * is the number of registered listeners across all instances.
+ */
+var PointerDragController = /** @class */ (function (_super) {
+    __extends(PointerDragController, _super);
+    function PointerDragController() {
+        var _this = _super.call(this) || this;
+        _this._targets = new Set();
+        /** Kept in sync with `_targets` so hit-testing is allocation-free. */
+        _this._targetByElement = new Map();
+        _this._onDragStart = new events_1.Emitter();
+        _this.onDragStart = _this._onDragStart.event;
+        _this._onDragMove = new events_1.Emitter();
+        _this.onDragMove = _this._onDragMove.event;
+        _this._onDragEnd = new events_1.Emitter();
+        _this.onDragEnd = _this._onDragEnd.event;
+        _this.addDisposables(_this._onDragStart, _this._onDragMove, _this._onDragEnd);
+        return _this;
+    }
+    PointerDragController.getInstance = function () {
+        if (!PointerDragController._instance) {
+            PointerDragController._instance = new PointerDragController();
+        }
+        return PointerDragController._instance;
+    };
+    Object.defineProperty(PointerDragController.prototype, "active", {
+        get: function () {
+            return this._active;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PointerDragController.prototype.registerTarget = function (target) {
+        var _this = this;
+        this._targets.add(target);
+        this._targetByElement.set(target.element, target);
+        return {
+            dispose: function () {
+                _this._targets.delete(target);
+                if (_this._targetByElement.get(target.element) === target) {
+                    _this._targetByElement.delete(target.element);
+                }
+                if (_this._currentTarget === target) {
+                    _this._currentTarget = undefined;
+                }
+            },
+        };
+    };
+    PointerDragController.prototype.beginDrag = function (args) {
+        var _this = this;
+        var _a, _b, _c;
+        if (this._active) {
+            this.cancel();
+        }
+        var pointerEvent = args.pointerEvent, source = args.source;
+        // Call `getData()` before mutating controller state — a throw
+        // here would otherwise leave `_active` populated with no window
+        // listeners installed, blocking every subsequent drag.
+        var dataDisposable = args.getData();
+        this._active = {
+            pointerId: pointerEvent.pointerId,
+            startX: pointerEvent.clientX,
+            startY: pointerEvent.clientY,
+            source: source,
+        };
+        this._onDragMoveCallback = args.onDragMove;
+        this._onDragEndCallback = args.onDragEnd;
+        this._dataDisposable = dataDisposable;
+        this._ghost = args.ghost;
+        // Iframes capture pointermove once the cursor crosses into them,
+        // which would freeze the drag from the parent window's POV.
+        this._iframeShield = (0, dom_1.disableIframePointEvents)((_a = source.ownerDocument) !== null && _a !== void 0 ? _a : document);
+        var startEvent = {
+            clientX: pointerEvent.clientX,
+            clientY: pointerEvent.clientY,
+            pointerEvent: pointerEvent,
+        };
+        this._onDragStart.fire(startEvent);
+        // Source's owning window — popout drags fire on their own window,
+        // not the main one.
+        var targetWindow = (_c = (_b = source.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView) !== null && _c !== void 0 ? _c : window;
+        this._moveListener = (0, events_1.addDisposableListener)(targetWindow, 'pointermove', function (e) {
+            if (!_this._active || e.pointerId !== _this._active.pointerId) {
+                return;
+            }
+            _this._handleMove(e);
+        });
+        this._upListener = (0, events_1.addDisposableListener)(targetWindow, 'pointerup', function (e) {
+            if (!_this._active || e.pointerId !== _this._active.pointerId) {
+                return;
+            }
+            _this._handleEnd(e, true);
+        });
+        this._cancelListener = (0, events_1.addDisposableListener)(targetWindow, 'pointercancel', function (e) {
+            if (!_this._active || e.pointerId !== _this._active.pointerId) {
+                return;
+            }
+            _this._handleEnd(e, false);
+        });
+    };
+    PointerDragController.prototype.cancel = function () {
+        var _a, _b;
+        if (!this._active) {
+            return;
+        }
+        (_a = this._currentTarget) === null || _a === void 0 ? void 0 : _a.handleDragLeave();
+        this._teardown();
+        (_b = this._dataDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+        this._dataDisposable = undefined;
+    };
+    PointerDragController.prototype._findTargetUnder = function (x, y) {
+        var e_1, _a;
+        var _b, _c;
+        // `elementsFromPoint` is topmost-first; walk up to find the closest
+        // registered ancestor (so a tab beats the layout-root that contains it).
+        // Use the source's owning document so popout drags hit their own targets.
+        var sourceDoc = (_c = (_b = this._active) === null || _b === void 0 ? void 0 : _b.source.ownerDocument) !== null && _c !== void 0 ? _c : document;
+        var elements = sourceDoc.elementsFromPoint(x, y);
+        try {
+            for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
+                var el = elements_1_1.value;
+                var current = el;
+                while (current) {
+                    var target = this._targetByElement.get(current);
+                    if (target) {
+                        return target;
+                    }
+                    current = current.parentElement;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (elements_1_1 && !elements_1_1.done && (_a = elements_1.return)) _a.call(elements_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return undefined;
+    };
+    PointerDragController.prototype._handleMove = function (e) {
+        var _a, _b, _c;
+        (_a = this._ghost) === null || _a === void 0 ? void 0 : _a.update(e.clientX, e.clientY);
+        var dragEvent = {
+            clientX: e.clientX,
+            clientY: e.clientY,
+            pointerEvent: e,
+        };
+        var newTarget = this._findTargetUnder(e.clientX, e.clientY);
+        if (newTarget !== this._currentTarget) {
+            (_b = this._currentTarget) === null || _b === void 0 ? void 0 : _b.handleDragLeave();
+            this._currentTarget = newTarget;
+        }
+        if (newTarget) {
+            newTarget.handleDragOver(dragEvent);
+        }
+        (_c = this._onDragMoveCallback) === null || _c === void 0 ? void 0 : _c.call(this, dragEvent);
+        this._onDragMove.fire(dragEvent);
+    };
+    PointerDragController.prototype._handleEnd = function (e, dropped) {
+        var _a;
+        var dragEvent = {
+            clientX: e.clientX,
+            clientY: e.clientY,
+            pointerEvent: e,
+        };
+        if (dropped && this._currentTarget) {
+            this._currentTarget.handleDrop(dragEvent);
+        }
+        else {
+            (_a = this._currentTarget) === null || _a === void 0 ? void 0 : _a.handleDragLeave();
+        }
+        var onEnd = this._onDragEndCallback;
+        var dataDisposable = this._dataDisposable;
+        this._teardown();
+        this._dataDisposable = undefined;
+        // Defer disposal so drop handlers can still read the transfer data.
+        setTimeout(function () { return dataDisposable === null || dataDisposable === void 0 ? void 0 : dataDisposable.dispose(); }, 0);
+        onEnd === null || onEnd === void 0 ? void 0 : onEnd(dragEvent, dropped);
+        this._onDragEnd.fire(dragEvent);
+    };
+    PointerDragController.prototype._teardown = function () {
+        var _a, _b, _c, _d, _e;
+        this._currentTarget = undefined;
+        this._active = undefined;
+        this._onDragMoveCallback = undefined;
+        this._onDragEndCallback = undefined;
+        (_a = this._ghost) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._ghost = undefined;
+        (_b = this._iframeShield) === null || _b === void 0 ? void 0 : _b.release();
+        this._iframeShield = undefined;
+        (_c = this._moveListener) === null || _c === void 0 ? void 0 : _c.dispose();
+        (_d = this._upListener) === null || _d === void 0 ? void 0 : _d.dispose();
+        (_e = this._cancelListener) === null || _e === void 0 ? void 0 : _e.dispose();
+        this._moveListener = undefined;
+        this._upListener = undefined;
+        this._cancelListener = undefined;
+    };
+    return PointerDragController;
+}(lifecycle_1.CompositeDisposable));
+exports.PointerDragController = PointerDragController;

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

@@ -0,0 +1,61 @@
+import { CompositeDisposable, IDisposable } from '../../lifecycle';
+import { PointerGhost } from './pointerGhost';
+import { PointerDragEvent } from './types';
+export interface PointerDragSourceOptions {
+    /** Populate transfer data; returned disposer clears it on drag end. */
+    getData: (event: PointerEvent) => IDisposable;
+    onDragStart?: (event: PointerEvent) => void;
+    onDragMove?: (event: PointerDragEvent) => void;
+    onDragEnd?: (event: PointerDragEvent, dropped: boolean) => void;
+    /** Cancels the drag at pointerdown time. */
+    isCancelled?: (event: PointerEvent) => boolean;
+    /** Default 5px. Touch pointers also need `touchInitiationDelay` to elapse. */
+    threshold?: number;
+    /**
+     * Touch-only long-press; movement past `pressTolerance` during the delay
+     * still arms the drag (any flick is drag intent). Default 250ms. May be
+     * a function so callers can vary it per gesture (e.g. require a longer
+     * hold for floating-group redock vs docked-group rearrange).
+     */
+    touchInitiationDelay?: number | (() => number);
+    /** Default 8px. May be a function — see `touchInitiationDelay`. */
+    pressTolerance?: number | (() => number);
+    /** Default true: mouse defers to HTML5; pointer path handles touch / pen only. */
+    touchOnly?: boolean;
+    /** Follow-finger ghost factory; if omitted the user only sees drop overlays. */
+    createGhost?: (event: PointerEvent) => PointerGhost | undefined;
+}
+/**
+ * Pointer-event drag source. Waits for movement past `threshold` (and
+ * touch-only `touchInitiationDelay`) before promoting to a drag so taps
+ * pass through unaffected.
+ */
+export declare class PointerDragSource extends CompositeDisposable {
+    private readonly element;
+    private readonly options;
+    private _disabled;
+    private _touchOnly;
+    private _pendingPointerId;
+    private _pendingMoveListener;
+    private _pendingUpListener;
+    private _pendingCancelListener;
+    private _armTimer;
+    private _armed;
+    private _startX;
+    private _startY;
+    private _startEvent;
+    constructor(element: HTMLElement, options: PointerDragSourceOptions);
+    setDisabled(value: boolean): void;
+    /**
+     * `false` lets the pointer source also handle mouse pointers; used when
+     * `dndStrategy: 'pointer'` to drive every input type through this path.
+     */
+    setTouchOnly(value: boolean): void;
+    private _shouldHandle;
+    private _onPointerDown;
+    /** For sibling gesture detectors (e.g. LongPressDetector) to dismiss a pending drag. */
+    cancelPending(): void;
+    private _cancelPending;
+    private _beginDrag;
+    dispose(): void;
+}

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

@@ -0,0 +1,195 @@
+"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.PointerDragSource = void 0;
+var events_1 = require("../../events");
+var lifecycle_1 = require("../../lifecycle");
+var pointerDragController_1 = require("./pointerDragController");
+var DEFAULT_THRESHOLD = 5;
+var DEFAULT_TOUCH_INITIATION_DELAY = 250;
+var DEFAULT_PRESS_TOLERANCE = 8;
+/**
+ * Pointer-event drag source. Waits for movement past `threshold` (and
+ * touch-only `touchInitiationDelay`) before promoting to a drag so taps
+ * pass through unaffected.
+ */
+var PointerDragSource = /** @class */ (function (_super) {
+    __extends(PointerDragSource, _super);
+    function PointerDragSource(element, options) {
+        var _a;
+        var _this = _super.call(this) || this;
+        _this.element = element;
+        _this.options = options;
+        _this._disabled = false;
+        _this._armed = false;
+        _this._startX = 0;
+        _this._startY = 0;
+        _this._touchOnly = (_a = options.touchOnly) !== null && _a !== void 0 ? _a : true;
+        _this.addDisposables((0, events_1.addDisposableListener)(_this.element, 'pointerdown', function (e) {
+            _this._onPointerDown(e);
+        }));
+        return _this;
+    }
+    PointerDragSource.prototype.setDisabled = function (value) {
+        this._disabled = value;
+        if (value) {
+            this._cancelPending();
+        }
+    };
+    /**
+     * `false` lets the pointer source also handle mouse pointers; used when
+     * `dndStrategy: 'pointer'` to drive every input type through this path.
+     */
+    PointerDragSource.prototype.setTouchOnly = function (value) {
+        if (this._touchOnly === value) {
+            return;
+        }
+        this._touchOnly = value;
+        // A pending mouse-tracked drag should be abandoned if we re-enable
+        // the touch-only filter mid-flight.
+        if (value) {
+            this._cancelPending();
+        }
+    };
+    PointerDragSource.prototype._shouldHandle = function (event) {
+        var _a, _b;
+        if (this._disabled) {
+            return false;
+        }
+        // Pointer-type filter runs before isCancelled — consumer state read
+        // by isCancelled may not be populated for events we'll never handle.
+        if (this._touchOnly &&
+            event.pointerType !== 'touch' &&
+            event.pointerType !== 'pen') {
+            return false;
+        }
+        if ((_b = (_a = this.options).isCancelled) === null || _b === void 0 ? void 0 : _b.call(_a, event)) {
+            return false;
+        }
+        return true;
+    };
+    PointerDragSource.prototype._onPointerDown = function (event) {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        if (!this._shouldHandle(event)) {
+            return;
+        }
+        // Defensive: a fresh pointerdown supersedes any in-flight tracking.
+        this._cancelPending();
+        this._pendingPointerId = event.pointerId;
+        this._startX = event.clientX;
+        this._startY = event.clientY;
+        this._startEvent = event;
+        var isTouch = event.pointerType === 'touch' || event.pointerType === 'pen';
+        // Touch waits a short window so a still finger can press-and-hold
+        // before drifting; once the timer fires, any motion past `threshold`
+        // begins the drag.
+        var initiationDelayOpt = this.options.touchInitiationDelay;
+        var initiationDelay = (_a = (typeof initiationDelayOpt === 'function'
+            ? initiationDelayOpt()
+            : initiationDelayOpt)) !== null && _a !== void 0 ? _a : DEFAULT_TOUCH_INITIATION_DELAY;
+        this._armed = !isTouch || initiationDelay <= 0;
+        if (isTouch && initiationDelay > 0 && isFinite(initiationDelay)) {
+            this._armTimer = setTimeout(function () {
+                _this._armTimer = undefined;
+                _this._armed = true;
+            }, initiationDelay);
+        }
+        var threshold = (_b = this.options.threshold) !== null && _b !== void 0 ? _b : DEFAULT_THRESHOLD;
+        var pressToleranceOpt = this.options.pressTolerance;
+        var pressTolerance = (_c = (typeof pressToleranceOpt === 'function'
+            ? pressToleranceOpt()
+            : pressToleranceOpt)) !== null && _c !== void 0 ? _c : DEFAULT_PRESS_TOLERANCE;
+        // Source's owning window — popout drags fire on their own window.
+        var targetWindow = (_e = (_d = this.element.ownerDocument) === null || _d === void 0 ? void 0 : _d.defaultView) !== null && _e !== void 0 ? _e : window;
+        this._pendingMoveListener = (0, events_1.addDisposableListener)(targetWindow, 'pointermove', function (moveEvent) {
+            if (moveEvent.pointerId !== _this._pendingPointerId) {
+                return;
+            }
+            var dx = moveEvent.clientX - _this._startX;
+            var dy = moveEvent.clientY - _this._startY;
+            var distance = Math.hypot(dx, dy);
+            if (_this._armed) {
+                if (distance >= threshold) {
+                    _this._beginDrag(moveEvent);
+                }
+                return;
+            }
+            // Pre-arm phase: a flick past `pressTolerance` in any
+            // direction is treated as drag intent. The element opts out
+            // of native scroll via `touch-action: none`; container-level
+            // scrolling lives on the surrounding strip's empty space.
+            if (distance > pressTolerance) {
+                _this._beginDrag(moveEvent);
+            }
+        });
+        this._pendingUpListener = (0, events_1.addDisposableListener)(targetWindow, 'pointerup', function (upEvent) {
+            if (upEvent.pointerId !== _this._pendingPointerId) {
+                return;
+            }
+            _this._cancelPending();
+        });
+        this._pendingCancelListener = (0, events_1.addDisposableListener)(targetWindow, 'pointercancel', function (cancelEvent) {
+            if (cancelEvent.pointerId !== _this._pendingPointerId) {
+                return;
+            }
+            _this._cancelPending();
+        });
+    };
+    /** For sibling gesture detectors (e.g. LongPressDetector) to dismiss a pending drag. */
+    PointerDragSource.prototype.cancelPending = function () {
+        this._cancelPending();
+    };
+    PointerDragSource.prototype._cancelPending = function () {
+        var _a, _b, _c;
+        this._pendingPointerId = undefined;
+        if (this._armTimer !== undefined) {
+            clearTimeout(this._armTimer);
+            this._armTimer = undefined;
+        }
+        this._armed = false;
+        (_a = this._pendingMoveListener) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this._pendingUpListener) === null || _b === void 0 ? void 0 : _b.dispose();
+        (_c = this._pendingCancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
+        this._pendingMoveListener = undefined;
+        this._pendingUpListener = undefined;
+        this._pendingCancelListener = undefined;
+        this._startEvent = undefined;
+    };
+    PointerDragSource.prototype._beginDrag = function (triggerEvent) {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        var startEvent = (_a = this._startEvent) !== null && _a !== void 0 ? _a : triggerEvent;
+        this._cancelPending();
+        (_c = (_b = this.options).onDragStart) === null || _c === void 0 ? void 0 : _c.call(_b, startEvent);
+        var ghost = (_e = (_d = this.options).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, startEvent);
+        pointerDragController_1.PointerDragController.getInstance().beginDrag({
+            pointerEvent: triggerEvent,
+            source: this.element,
+            getData: function () { return _this.options.getData(startEvent); },
+            ghost: ghost,
+            onDragMove: this.options.onDragMove,
+            onDragEnd: this.options.onDragEnd,
+        });
+    };
+    PointerDragSource.prototype.dispose = function () {
+        this._cancelPending();
+        _super.prototype.dispose.call(this);
+    };
+    return PointerDragSource;
+}(lifecycle_1.CompositeDisposable));
+exports.PointerDragSource = PointerDragSource;

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

@@ -0,0 +1,39 @@
+import { Event } from '../../events';
+import { CompositeDisposable } from '../../lifecycle';
+import { CanDisplayOverlay, DropTargetTargetModel, DroptargetEvent, DroptargetOverlayModel, IDropTarget, Position, WillShowOverlayEvent } from '../droptarget';
+export interface PointerDropTargetOptions {
+    canDisplayOverlay: CanDisplayOverlay;
+    acceptedTargetZones: Position[];
+    overlayModel?: DroptargetOverlayModel;
+    /** Render into an external anchor container (floating groups, layout root). */
+    getOverrideTarget?: () => DropTargetTargetModel | undefined;
+    /** Outline element for positioning; falls back to the drop element. */
+    getOverlayOutline?: () => HTMLElement | null;
+    className?: string;
+}
+/** Pointer-driven counterpart to `Droptarget` with identical visual output. */
+export declare class PointerDropTarget extends CompositeDisposable implements IDropTarget {
+    private readonly element;
+    private readonly options;
+    private _targetElement;
+    private _overlayElement;
+    private _state;
+    private _acceptedTargetZonesSet;
+    private readonly _onDrop;
+    readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onWillShowOverlay;
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
+    private _disabled;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get state(): Position | undefined;
+    constructor(element: HTMLElement, options: PointerDropTargetOptions);
+    setTargetZones(zones: Position[]): void;
+    setOverlayModel(model: DroptargetOverlayModel): void;
+    dispose(): void;
+    private _onDragOver;
+    private _onDragLeave;
+    private _onDropEvent;
+    private _calculateQuadrant;
+    private _removeOverlay;
+}