dockview-core 6.3.0 → 6.5.0

package/dist/cjs/dnd/droptarget.js

@@ -20,53 +20,10 @@ exports.directionToPosition = directionToPosition;
 exports.positionToDirection = positionToDirection;
 exports.calculateQuadrantAsPercentage = calculateQuadrantAsPercentage;
 exports.calculateQuadrantAsPixels = calculateQuadrantAsPixels;
-var dom_1 = require("../dom");
 var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var dnd_1 = require("./dnd");
-var math_1 = require("../math");
-function setGPUOptimizedBounds(element, bounds) {
-    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
-    var topPx = "".concat(Math.round(top), "px");
-    var leftPx = "".concat(Math.round(left), "px");
-    var widthPx = "".concat(Math.round(width), "px");
-    var heightPx = "".concat(Math.round(height), "px");
-    // Use traditional positioning but maintain GPU layer
-    element.style.top = topPx;
-    element.style.left = leftPx;
-    element.style.width = widthPx;
-    element.style.height = heightPx;
-    element.style.visibility = 'visible';
-    // Ensure GPU layer is maintained
-    if (!element.style.transform || element.style.transform === '') {
-        element.style.transform = 'translate3d(0, 0, 0)';
-    }
-}
-function setGPUOptimizedBoundsFromStrings(element, bounds) {
-    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
-    // Use traditional positioning but maintain GPU layer
-    element.style.top = top;
-    element.style.left = left;
-    element.style.width = width;
-    element.style.height = height;
-    element.style.visibility = 'visible';
-    // Ensure GPU layer is maintained
-    if (!element.style.transform || element.style.transform === '') {
-        element.style.transform = 'translate3d(0, 0, 0)';
-    }
-}
-function checkBoundsChanged(element, bounds) {
-    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
-    var topPx = "".concat(Math.round(top), "px");
-    var leftPx = "".concat(Math.round(left), "px");
-    var widthPx = "".concat(Math.round(width), "px");
-    var heightPx = "".concat(Math.round(height), "px");
-    // Check if position or size changed (back to traditional method)
-    return (element.style.top !== topPx ||
-        element.style.left !== leftPx ||
-        element.style.width !== widthPx ||
-        element.style.height !== heightPx);
-}
+var dropOverlay_1 = require("./dropOverlay");
 var WillShowOverlayEvent = /** @class */ (function (_super) {
     __extends(WillShowOverlayEvent, _super);
     function WillShowOverlayEvent(options) {
@@ -127,12 +84,6 @@ var DEFAULT_ACTIVATION_SIZE = {
     value: 20,
     type: 'percentage',
 };
-var DEFAULT_SIZE = {
-    value: 50,
-    type: 'percentage',
-};
-var SMALL_WIDTH_BOUNDARY = 100;
-var SMALL_HEIGHT_BOUNDARY = 100;
 var Droptarget = /** @class */ (function (_super) {
     __extends(Droptarget, _super);
     function Droptarget(element, options) {
@@ -207,20 +158,12 @@ var Droptarget = /** @class */ (function (_super) {
                     //
                 }
                 else if (!_this.targetElement) {
-                    _this.targetElement = document.createElement('div');
-                    _this.targetElement.className = 'dv-drop-target-dropzone';
-                    _this.overlayElement = document.createElement('div');
-                    _this.overlayElement.className = 'dv-drop-target-selection';
+                    var els = (0, dropOverlay_1.createOverlayElements)();
+                    _this.targetElement = els.dropzone;
+                    _this.overlayElement = els.selection;
                     _this._state = 'center';
-                    _this.targetElement.appendChild(_this.overlayElement);
                     target.classList.add('dv-drop-target');
                     target.append(_this.targetElement);
-                    // this.overlayElement.style.opacity = '0';
-                    // requestAnimationFrame(() => {
-                    //     if (this.overlayElement) {
-                    //         this.overlayElement.style.opacity = '';
-                    //     }
-                    // });
                 }
                 _this.toggleClasses(quadrant, width, height);
                 _this._state = quadrant;
@@ -308,162 +251,25 @@ var Droptarget = /** @class */ (function (_super) {
         return typeof value === 'boolean' && value;
     };
     Droptarget.prototype.toggleClasses = function (quadrant, width, height) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e;
         var target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
-        if (!target && !this.overlayElement) {
-            return;
-        }
-        var smallWidthBoundary = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.smallWidthBoundary) !== null && _d !== void 0 ? _d : SMALL_WIDTH_BOUNDARY;
-        var smallHeightBoundary = (_f = (_e = this.options.overlayModel) === null || _e === void 0 ? void 0 : _e.smallHeightBoundary) !== null && _f !== void 0 ? _f : SMALL_HEIGHT_BOUNDARY;
-        var isSmallX = width < smallWidthBoundary;
-        var isSmallY = height < smallHeightBoundary;
-        var isLeft = quadrant === 'left';
-        var isRight = quadrant === 'right';
-        var isTop = quadrant === 'top';
-        var isBottom = quadrant === 'bottom';
-        var rightClass = !isSmallX && isRight;
-        var leftClass = !isSmallX && isLeft;
-        var topClass = !isSmallY && isTop;
-        var bottomClass = !isSmallY && isBottom;
-        var size = 1;
-        var sizeOptions = (_h = (_g = this.options.overlayModel) === null || _g === void 0 ? void 0 : _g.size) !== null && _h !== void 0 ? _h : DEFAULT_SIZE;
-        if (sizeOptions.type === 'percentage') {
-            size = (0, math_1.clamp)(sizeOptions.value, 0, 100) / 100;
-        }
-        else {
-            if (rightClass || leftClass) {
-                size = (0, math_1.clamp)(0, sizeOptions.value, width) / width;
-            }
-            if (topClass || bottomClass) {
-                size = (0, math_1.clamp)(0, sizeOptions.value, height) / height;
-            }
-        }
         if (target) {
-            var outlineEl = (_l = (_k = (_j = this.options).getOverlayOutline) === null || _k === void 0 ? void 0 : _k.call(_j)) !== null && _l !== void 0 ? _l : this.element;
-            var elBox = outlineEl.getBoundingClientRect();
-            var ta = target.getElements(undefined, outlineEl);
-            var el = ta.root;
-            var overlay_1 = ta.overlay;
-            var bigbox = el.getBoundingClientRect();
-            var rootTop = elBox.top - bigbox.top;
-            var rootLeft = elBox.left - bigbox.left;
-            var box_1 = {
-                top: rootTop,
-                left: rootLeft,
+            var outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
+            (0, dropOverlay_1.renderAnchoredOverlay)({
+                outlineElement: outlineEl,
+                targetModel: target,
+                quadrant: quadrant,
                 width: width,
                 height: height,
-            };
-            if (rightClass) {
-                box_1.left = rootLeft + width * (1 - size);
-                box_1.width = width * size;
-            }
-            else if (leftClass) {
-                box_1.width = width * size;
-            }
-            else if (topClass) {
-                box_1.height = height * size;
-            }
-            else if (bottomClass) {
-                box_1.top = rootTop + height * (1 - size);
-                box_1.height = height * size;
-            }
-            if (isSmallX && isLeft) {
-                box_1.width = 4;
-            }
-            if (isSmallX && isRight) {
-                box_1.left = rootLeft + width - 4;
-                box_1.width = 4;
-            }
-            if (isSmallY && isTop) {
-                box_1.height = 4;
-            }
-            if (isSmallY && isBottom) {
-                box_1.top = rootTop + height - 4;
-                box_1.height = 4;
-            }
-            // Use GPU-optimized bounds checking and setting
-            if (!checkBoundsChanged(overlay_1, box_1)) {
-                return;
-            }
-            setGPUOptimizedBounds(overlay_1, box_1);
-            overlay_1.className = "dv-drop-target-anchor".concat(this.options.className ? " ".concat(this.options.className) : '');
-            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-left', isLeft);
-            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-right', isRight);
-            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-top', isTop);
-            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-bottom', isBottom);
-            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-anchor-line', (isSmallX && (isLeft || isRight)) ||
-                (isSmallY && (isTop || isBottom)));
-            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-center', quadrant === 'center');
-            if (ta.changed) {
-                (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-anchor-container-changed', true);
-                setTimeout(function () {
-                    (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-anchor-container-changed', false);
-                }, 10);
-            }
+                overlayModel: this.options.overlayModel,
+                className: this.options.className,
+            });
             return;
         }
         if (!this.overlayElement) {
             return;
         }
-        var box = { top: '0px', left: '0px', width: '100%', height: '100%' };
-        /**
-         * You can also achieve the overlay placement using the transform CSS property
-         * to translate and scale the element however this has the undesired effect of
-         * 'skewing' the element. Comment left here for anybody that ever revisits this.
-         *
-         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
-         *
-         * right
-         * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
-         *
-         * left
-         * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
-         *
-         * top
-         * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
-         *
-         * bottom
-         * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
-         */
-        if (rightClass) {
-            box.left = "".concat(100 * (1 - size), "%");
-            box.width = "".concat(100 * size, "%");
-        }
-        else if (leftClass) {
-            box.width = "".concat(100 * size, "%");
-        }
-        else if (topClass) {
-            box.height = "".concat(100 * size, "%");
-        }
-        else if (bottomClass) {
-            box.top = "".concat(100 * (1 - size), "%");
-            box.height = "".concat(100 * size, "%");
-        }
-        if (isSmallX && isLeft) {
-            box.width = '4px';
-        }
-        if (isSmallX && isRight) {
-            box.left = "".concat(width - 4, "px");
-            box.width = '4px';
-        }
-        if (isSmallY && isTop) {
-            box.height = '4px';
-        }
-        if (isSmallY && isBottom) {
-            box.top = "".concat(height - 4, "px");
-            box.height = '4px';
-        }
-        setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
-        var isLine = (isSmallX && (isLeft || isRight)) ||
-            (isSmallY && (isTop || isBottom));
-        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
-        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
-        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-selection-line', isLine);
-        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-left', isLeft);
-        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-right', isRight);
-        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-top', isTop);
-        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-bottom', isBottom);
-        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-center', quadrant === 'center');
+        (0, dropOverlay_1.renderInPlaceOverlay)(this.overlayElement, quadrant, width, height, this.options.overlayModel);
     };
     Droptarget.prototype.calculateQuadrant = function (overlayType, x, y, width, height) {
         var _a, _b;

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

@@ -0,0 +1,11 @@
+export { PointerDragController } from './pointerDragController';
+export type { ActiveDrag } from './pointerDragController';
+export { PointerDragSource } from './pointerDragSource';
+export type { PointerDragSourceOptions } from './pointerDragSource';
+export { PointerDropTarget } from './pointerDropTarget';
+export type { PointerDropTargetOptions } from './pointerDropTarget';
+export type { PointerDragEvent, PointerDroptargetEvent, IPointerDropTargetHandle, } from './types';
+export { LongPressDetector } from './longPress';
+export type { LongPressOptions } from './longPress';
+export { PointerGhost } from './pointerGhost';
+export type { PointerGhostOptions } from './pointerGhost';

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointerGhost = exports.LongPressDetector = exports.PointerDropTarget = exports.PointerDragSource = exports.PointerDragController = void 0;
+var pointerDragController_1 = require("./pointerDragController");
+Object.defineProperty(exports, "PointerDragController", { enumerable: true, get: function () { return pointerDragController_1.PointerDragController; } });
+var pointerDragSource_1 = require("./pointerDragSource");
+Object.defineProperty(exports, "PointerDragSource", { enumerable: true, get: function () { return pointerDragSource_1.PointerDragSource; } });
+var pointerDropTarget_1 = require("./pointerDropTarget");
+Object.defineProperty(exports, "PointerDropTarget", { enumerable: true, get: function () { return pointerDropTarget_1.PointerDropTarget; } });
+var longPress_1 = require("./longPress");
+Object.defineProperty(exports, "LongPressDetector", { enumerable: true, get: function () { return longPress_1.LongPressDetector; } });
+var pointerGhost_1 = require("./pointerGhost");
+Object.defineProperty(exports, "PointerGhost", { enumerable: true, get: function () { return pointerGhost_1.PointerGhost; } });

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

@@ -0,0 +1,32 @@
+import { CompositeDisposable } from '../../lifecycle';
+export interface LongPressOptions {
+    /** Default 500ms. */
+    delay?: number;
+    /** Default 8px. */
+    tolerance?: number;
+    /** Default true: mouse users have right-click and don't need this. */
+    touchOnly?: boolean;
+    /** Receives the `pointerdown` event so consumers can read `clientX/Y`. */
+    onLongPress: (event: PointerEvent) => void;
+}
+/**
+ * Passive — does not consume the pointer; movement past `tolerance`
+ * cancels silently so a sibling `PointerDragSource` can take over.
+ */
+export declare class LongPressDetector extends CompositeDisposable {
+    private readonly element;
+    private readonly options;
+    private _pointerId;
+    private _startX;
+    private _startY;
+    private _timer;
+    private _moveListener;
+    private _upListener;
+    private _cancelListener;
+    constructor(element: HTMLElement, options: LongPressOptions);
+    private _onPointerDown;
+    private _installContextMenuGuard;
+    private _installClickGuard;
+    private _cancelPending;
+    dispose(): void;
+}

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

@@ -0,0 +1,151 @@
+"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.LongPressDetector = void 0;
+var events_1 = require("../../events");
+var lifecycle_1 = require("../../lifecycle");
+var DEFAULT_DELAY = 500;
+var DEFAULT_TOLERANCE = 8;
+/**
+ * Passive — does not consume the pointer; movement past `tolerance`
+ * cancels silently so a sibling `PointerDragSource` can take over.
+ */
+var LongPressDetector = /** @class */ (function (_super) {
+    __extends(LongPressDetector, _super);
+    function LongPressDetector(element, options) {
+        var _this = _super.call(this) || this;
+        _this.element = element;
+        _this.options = options;
+        _this._startX = 0;
+        _this._startY = 0;
+        _this.addDisposables((0, events_1.addDisposableListener)(_this.element, 'pointerdown', function (e) {
+            _this._onPointerDown(e);
+        }));
+        return _this;
+    }
+    LongPressDetector.prototype._onPointerDown = function (event) {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        var touchOnly = (_a = this.options.touchOnly) !== null && _a !== void 0 ? _a : true;
+        if (touchOnly &&
+            event.pointerType !== 'touch' &&
+            event.pointerType !== 'pen') {
+            return;
+        }
+        // Defensive — supersede any in-flight press.
+        this._cancelPending();
+        this._pointerId = event.pointerId;
+        this._startX = event.clientX;
+        this._startY = event.clientY;
+        var delay = (_b = this.options.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY;
+        var tolerance = (_c = this.options.tolerance) !== null && _c !== void 0 ? _c : DEFAULT_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._timer = setTimeout(function () {
+            _this._timer = undefined;
+            _this._cancelPending();
+            // Touch browsers synthesize a compatibility `contextmenu` event
+            // for long-press. preventDefault on the original pointerdown is
+            // too late (already dispatched), so install a one-shot
+            // capture-phase guard for the next contextmenu. Without this,
+            // consumers that don't preventDefault inside their onLongPress
+            // (or that early-return before doing so) leak the browser's
+            // native menu on top of theirs.
+            _this._installContextMenuGuard(targetWindow);
+            // Same idea for `click`: when the user releases their finger
+            // after the long-press, touch browsers dispatch a `click` to
+            // the element the touch ended on (the source). Consumers
+            // typically wire click to a primary action (e.g. tab activate,
+            // tab-group chip collapse-toggle). Without this guard, the
+            // long-press immediately fires both the context menu AND the
+            // primary action — and the action's side effects (e.g. a chip
+            // collapse animation) read as a screen wobble while the menu
+            // is supposed to be open. Scoped to the source element so
+            // clicks on menu items elsewhere remain effective.
+            _this._installClickGuard(targetWindow);
+            _this.options.onLongPress(event);
+        }, delay);
+        this._moveListener = (0, events_1.addDisposableListener)(targetWindow, 'pointermove', function (moveEvent) {
+            if (moveEvent.pointerId !== _this._pointerId) {
+                return;
+            }
+            var dx = moveEvent.clientX - _this._startX;
+            var dy = moveEvent.clientY - _this._startY;
+            if (Math.hypot(dx, dy) > tolerance) {
+                _this._cancelPending();
+            }
+        });
+        this._upListener = (0, events_1.addDisposableListener)(targetWindow, 'pointerup', function (upEvent) {
+            if (upEvent.pointerId !== _this._pointerId) {
+                return;
+            }
+            _this._cancelPending();
+        });
+        this._cancelListener = (0, events_1.addDisposableListener)(targetWindow, 'pointercancel', function (cancelEvent) {
+            if (cancelEvent.pointerId !== _this._pointerId) {
+                return;
+            }
+            _this._cancelPending();
+        });
+    };
+    LongPressDetector.prototype._installContextMenuGuard = function (targetWindow) {
+        var guard;
+        var timeout = setTimeout(function () { return guard === null || guard === void 0 ? void 0 : guard.dispose(); }, 500);
+        guard = (0, events_1.addDisposableListener)(targetWindow, 'contextmenu', function (event) {
+            event.preventDefault();
+            clearTimeout(timeout);
+            guard === null || guard === void 0 ? void 0 : guard.dispose();
+        }, { capture: true });
+    };
+    LongPressDetector.prototype._installClickGuard = function (targetWindow) {
+        var _this = this;
+        var guard;
+        var timeout = setTimeout(function () { return guard === null || guard === void 0 ? void 0 : guard.dispose(); }, 500);
+        guard = (0, events_1.addDisposableListener)(targetWindow, 'click', function (event) {
+            // Only suppress clicks targeted at the long-pressed element
+            // or its descendants. A user tap on a context menu item (or
+            // anywhere else) still gets through unchanged.
+            var target = event.target;
+            if (target && _this.element.contains(target)) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            clearTimeout(timeout);
+            guard === null || guard === void 0 ? void 0 : guard.dispose();
+        }, { capture: true });
+    };
+    LongPressDetector.prototype._cancelPending = function () {
+        var _a, _b, _c;
+        if (this._timer !== undefined) {
+            clearTimeout(this._timer);
+            this._timer = undefined;
+        }
+        this._pointerId = undefined;
+        (_a = this._moveListener) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this._upListener) === null || _b === void 0 ? void 0 : _b.dispose();
+        (_c = this._cancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
+        this._moveListener = undefined;
+        this._upListener = undefined;
+        this._cancelListener = undefined;
+    };
+    LongPressDetector.prototype.dispose = function () {
+        this._cancelPending();
+        _super.prototype.dispose.call(this);
+    };
+    return LongPressDetector;
+}(lifecycle_1.CompositeDisposable));
+exports.LongPressDetector = LongPressDetector;

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

@@ -0,0 +1,60 @@
+import { Event } from '../../events';
+import { CompositeDisposable, IDisposable } from '../../lifecycle';
+import { PointerGhost } from './pointerGhost';
+import { IPointerDropTargetHandle, PointerDragEvent } from './types';
+export interface ActiveDrag {
+    readonly pointerId: number;
+    readonly startX: number;
+    readonly startY: number;
+    readonly source: HTMLElement;
+}
+/**
+ * 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 declare class PointerDragController extends CompositeDisposable {
+    private static _instance;
+    static getInstance(): PointerDragController;
+    private readonly _targets;
+    /** Kept in sync with `_targets` so hit-testing is allocation-free. */
+    private readonly _targetByElement;
+    private _active;
+    private _currentTarget;
+    private _dataDisposable;
+    private _ghost;
+    private _moveListener;
+    private _upListener;
+    private _cancelListener;
+    private _iframeShield;
+    private _onDragMoveCallback?;
+    private _onDragEndCallback?;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<PointerDragEvent>;
+    private readonly _onDragMove;
+    readonly onDragMove: Event<PointerDragEvent>;
+    private readonly _onDragEnd;
+    readonly onDragEnd: Event<PointerDragEvent>;
+    private constructor();
+    get active(): ActiveDrag | undefined;
+    registerTarget(target: IPointerDropTargetHandle): IDisposable;
+    beginDrag(args: {
+        pointerEvent: PointerEvent;
+        source: HTMLElement;
+        getData: () => IDisposable;
+        ghost?: PointerGhost;
+        onDragMove?: (e: PointerDragEvent) => void;
+        onDragEnd?: (e: PointerDragEvent, dropped: boolean) => void;
+    }): void;
+    cancel(): void;
+    private _findTargetUnder;
+    private _handleMove;
+    private _handleEnd;
+    private _teardown;
+}