dockview-core 6.3.0 → 6.4.0

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

@@ -0,0 +1,191 @@
+import { disableIframePointEvents } from '../../dom';
+import { addDisposableListener, Emitter } from '../../events';
+import { CompositeDisposable } from '../../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.
+ */
+export class PointerDragController extends CompositeDisposable {
+    static getInstance() {
+        if (!PointerDragController._instance) {
+            PointerDragController._instance = new PointerDragController();
+        }
+        return PointerDragController._instance;
+    }
+    constructor() {
+        super();
+        this._targets = new Set();
+        /** Kept in sync with `_targets` so hit-testing is allocation-free. */
+        this._targetByElement = new Map();
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
+        this._onDragMove = new Emitter();
+        this.onDragMove = this._onDragMove.event;
+        this._onDragEnd = new Emitter();
+        this.onDragEnd = this._onDragEnd.event;
+        this.addDisposables(this._onDragStart, this._onDragMove, this._onDragEnd);
+    }
+    get active() {
+        return this._active;
+    }
+    registerTarget(target) {
+        this._targets.add(target);
+        this._targetByElement.set(target.element, target);
+        return {
+            dispose: () => {
+                this._targets.delete(target);
+                if (this._targetByElement.get(target.element) === target) {
+                    this._targetByElement.delete(target.element);
+                }
+                if (this._currentTarget === target) {
+                    this._currentTarget = undefined;
+                }
+            },
+        };
+    }
+    beginDrag(args) {
+        var _a, _b, _c;
+        if (this._active) {
+            this.cancel();
+        }
+        const { pointerEvent, source } = args;
+        // Call `getData()` before mutating controller state — a throw
+        // here would otherwise leave `_active` populated with no window
+        // listeners installed, blocking every subsequent drag.
+        const dataDisposable = args.getData();
+        this._active = {
+            pointerId: pointerEvent.pointerId,
+            startX: pointerEvent.clientX,
+            startY: pointerEvent.clientY,
+            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 = disableIframePointEvents((_a = source.ownerDocument) !== null && _a !== void 0 ? _a : document);
+        const startEvent = {
+            clientX: pointerEvent.clientX,
+            clientY: pointerEvent.clientY,
+            pointerEvent,
+        };
+        this._onDragStart.fire(startEvent);
+        // Source's owning window — popout drags fire on their own window,
+        // not the main one.
+        const targetWindow = (_c = (_b = source.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView) !== null && _c !== void 0 ? _c : window;
+        this._moveListener = addDisposableListener(targetWindow, 'pointermove', (e) => {
+            if (!this._active || e.pointerId !== this._active.pointerId) {
+                return;
+            }
+            this._handleMove(e);
+        });
+        this._upListener = addDisposableListener(targetWindow, 'pointerup', (e) => {
+            if (!this._active || e.pointerId !== this._active.pointerId) {
+                return;
+            }
+            this._handleEnd(e, true);
+        });
+        this._cancelListener = addDisposableListener(targetWindow, 'pointercancel', (e) => {
+            if (!this._active || e.pointerId !== this._active.pointerId) {
+                return;
+            }
+            this._handleEnd(e, false);
+        });
+    }
+    cancel() {
+        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;
+    }
+    _findTargetUnder(x, y) {
+        var _a, _b;
+        // `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.
+        const sourceDoc = (_b = (_a = this._active) === null || _a === void 0 ? void 0 : _a.source.ownerDocument) !== null && _b !== void 0 ? _b : document;
+        const elements = sourceDoc.elementsFromPoint(x, y);
+        for (const el of elements) {
+            let current = el;
+            while (current) {
+                const target = this._targetByElement.get(current);
+                if (target) {
+                    return target;
+                }
+                current = current.parentElement;
+            }
+        }
+        return undefined;
+    }
+    _handleMove(e) {
+        var _a, _b, _c;
+        (_a = this._ghost) === null || _a === void 0 ? void 0 : _a.update(e.clientX, e.clientY);
+        const dragEvent = {
+            clientX: e.clientX,
+            clientY: e.clientY,
+            pointerEvent: e,
+        };
+        const 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);
+    }
+    _handleEnd(e, dropped) {
+        var _a;
+        const 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();
+        }
+        const onEnd = this._onDragEndCallback;
+        const dataDisposable = this._dataDisposable;
+        this._teardown();
+        this._dataDisposable = undefined;
+        // Defer disposal so drop handlers can still read the transfer data.
+        setTimeout(() => dataDisposable === null || dataDisposable === void 0 ? void 0 : dataDisposable.dispose(), 0);
+        onEnd === null || onEnd === void 0 ? void 0 : onEnd(dragEvent, dropped);
+        this._onDragEnd.fire(dragEvent);
+    }
+    _teardown() {
+        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;
+    }
+}

package/dist/esm/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/esm/dnd/pointer/pointerDragSource.js

@@ -0,0 +1,171 @@
+import { addDisposableListener } from '../../events';
+import { CompositeDisposable } from '../../lifecycle';
+import { PointerDragController } from './pointerDragController';
+const DEFAULT_THRESHOLD = 5;
+const DEFAULT_TOUCH_INITIATION_DELAY = 250;
+const 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.
+ */
+export class PointerDragSource extends CompositeDisposable {
+    constructor(element, options) {
+        var _a;
+        super();
+        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(addDisposableListener(this.element, 'pointerdown', (e) => {
+            this._onPointerDown(e);
+        }));
+    }
+    setDisabled(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.
+     */
+    setTouchOnly(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();
+        }
+    }
+    _shouldHandle(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;
+    }
+    _onPointerDown(event) {
+        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;
+        const 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.
+        const initiationDelayOpt = this.options.touchInitiationDelay;
+        const 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(() => {
+                this._armTimer = undefined;
+                this._armed = true;
+            }, initiationDelay);
+        }
+        const threshold = (_b = this.options.threshold) !== null && _b !== void 0 ? _b : DEFAULT_THRESHOLD;
+        const pressToleranceOpt = this.options.pressTolerance;
+        const 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.
+        const targetWindow = (_e = (_d = this.element.ownerDocument) === null || _d === void 0 ? void 0 : _d.defaultView) !== null && _e !== void 0 ? _e : window;
+        this._pendingMoveListener = addDisposableListener(targetWindow, 'pointermove', (moveEvent) => {
+            if (moveEvent.pointerId !== this._pendingPointerId) {
+                return;
+            }
+            const dx = moveEvent.clientX - this._startX;
+            const dy = moveEvent.clientY - this._startY;
+            const 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 = addDisposableListener(targetWindow, 'pointerup', (upEvent) => {
+            if (upEvent.pointerId !== this._pendingPointerId) {
+                return;
+            }
+            this._cancelPending();
+        });
+        this._pendingCancelListener = addDisposableListener(targetWindow, 'pointercancel', (cancelEvent) => {
+            if (cancelEvent.pointerId !== this._pendingPointerId) {
+                return;
+            }
+            this._cancelPending();
+        });
+    }
+    /** For sibling gesture detectors (e.g. LongPressDetector) to dismiss a pending drag. */
+    cancelPending() {
+        this._cancelPending();
+    }
+    _cancelPending() {
+        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;
+    }
+    _beginDrag(triggerEvent) {
+        var _a, _b, _c, _d, _e;
+        const 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);
+        const ghost = (_e = (_d = this.options).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, startEvent);
+        PointerDragController.getInstance().beginDrag({
+            pointerEvent: triggerEvent,
+            source: this.element,
+            getData: () => this.options.getData(startEvent),
+            ghost,
+            onDragMove: this.options.onDragMove,
+            onDragEnd: this.options.onDragEnd,
+        });
+    }
+    dispose() {
+        this._cancelPending();
+        super.dispose();
+    }
+}

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

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

@@ -0,0 +1,168 @@
+import { Emitter } from '../../events';
+import { CompositeDisposable } from '../../lifecycle';
+import { createOverlayElements, renderAnchoredOverlay, renderInPlaceOverlay, } from '../dropOverlay';
+import { calculateQuadrantAsPercentage, calculateQuadrantAsPixels, WillShowOverlayEvent, } from '../droptarget';
+import { PointerDragController } from './pointerDragController';
+const DEFAULT_ACTIVATION_SIZE = {
+    value: 20,
+    type: 'percentage',
+};
+/** Pointer-driven counterpart to `Droptarget` with identical visual output. */
+export class PointerDropTarget extends CompositeDisposable {
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (value) {
+            this._removeOverlay();
+        }
+    }
+    get state() {
+        return this._state;
+    }
+    constructor(element, options) {
+        super();
+        this.element = element;
+        this.options = options;
+        this._onDrop = new Emitter();
+        this.onDrop = this._onDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
+        this._disabled = false;
+        this._acceptedTargetZonesSet = new Set(options.acceptedTargetZones);
+        const handle = {
+            element: this.element,
+            handleDragOver: (e) => this._onDragOver(e),
+            handleDragLeave: () => this._onDragLeave(),
+            handleDrop: (e) => this._onDropEvent(e),
+        };
+        this.addDisposables(this._onDrop, this._onWillShowOverlay, PointerDragController.getInstance().registerTarget(handle));
+    }
+    setTargetZones(zones) {
+        this._acceptedTargetZonesSet = new Set(zones);
+    }
+    setOverlayModel(model) {
+        this.options.overlayModel = model;
+    }
+    dispose() {
+        this._removeOverlay();
+        super.dispose();
+    }
+    _onDragOver(event) {
+        var _a, _b, _c, _d, _e;
+        if (this._disabled) {
+            this._removeOverlay();
+            return;
+        }
+        const 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;
+        }
+        const outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
+        const width = outlineEl.offsetWidth;
+        const height = outlineEl.offsetHeight;
+        if (width === 0 || height === 0) {
+            return;
+        }
+        const rect = outlineEl.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const 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;
+        }
+        const willShow = new WillShowOverlayEvent({
+            nativeEvent: event.pointerEvent,
+            position: quadrant,
+        });
+        this._onWillShowOverlay.fire(willShow);
+        if (willShow.defaultPrevented) {
+            this._removeOverlay();
+            return;
+        }
+        if (overrideTarget) {
+            renderAnchoredOverlay({
+                outlineElement: outlineEl,
+                targetModel: overrideTarget,
+                quadrant,
+                width,
+                height,
+                overlayModel: this.options.overlayModel,
+                className: this.options.className,
+            });
+            this._state = quadrant;
+            return;
+        }
+        if (!this._targetElement) {
+            const els = 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) {
+            renderInPlaceOverlay(this._overlayElement, quadrant, width, height, this.options.overlayModel);
+        }
+        this._state = quadrant;
+    }
+    _onDragLeave() {
+        var _a, _b;
+        const 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();
+    }
+    _onDropEvent(event) {
+        var _a, _b;
+        const state = this._state;
+        const 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,
+            });
+        }
+    }
+    _calculateQuadrant(x, y, width, height) {
+        var _a, _b;
+        const 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 calculateQuadrantAsPercentage(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
+        }
+        return calculateQuadrantAsPixels(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
+    }
+    _removeOverlay() {
+        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;
+        }
+    }
+}

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