import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'; /** * The drag direction. * * @public */ export type DragDirection = 'start' | 'end' | 'bottom' | 'top'; /** * The drag mode. * * @public */ export type DragMode = 'immediate' | 'deferred'; /** * A position with x and y coordinates. * * @public */ export interface IPosition { x: number; y: number; } /** * The pointer tracking state. * * @public */ export interface IPointerState { previous: IPosition; current: IPosition; direction: DragDirection; } /** * The state tracked during a drag operation. * * @public */ export interface IDragState { /** * The initial bounding rect of the dragged element when the drag started. */ initial: DOMRect; /** * The current bounding rect of the dragged element. */ current: DOMRect; /** * The current position of the drag relative to the layer. */ position: IPosition; /** * The offset between the cursor position and the element's top-left corner. */ offset: IPosition; /** * The pointer state tracking direction. */ pointerState: IPointerState; /** * The ghost element used in deferred mode. */ ghost: HTMLElement | null; /** * The matched drop target element. */ element: Element | null; } /** * Parameters passed to drag callbacks. * * @public */ export interface IDragCallbackParameters { /** * The pointer event that triggered the callback. */ event: PointerEvent; /** * The current drag state. */ state: IDragState; } /** * Callback type for drag events. * * @public */ export type DragCallback = (parameters: IDragCallbackParameters) => unknown; /** * Callback type for drag cancel events. * * @public */ export type DragCancelCallback = (state: IDragState) => unknown; /** * Skip callback type. * * @public */ export type DragSkipCallback = (event: PointerEvent) => boolean; /** * Match target callback type. * * @public */ export type DragMatchTargetCallback = (target: Element) => boolean; /** * Trigger callback type. * * @public */ export type DragTriggerCallback = () => HTMLElement | null; /** * Layer callback type. * * @public */ export type DragLayerCallback = () => HTMLElement; /** * Ghost factory callback type. * * @public */ export type DragGhostCallback = () => HTMLElement; /** * Configuration options for the DragController. * * @public */ export interface IDragControllerConfiguration { /** * Whether the drag feature is enabled for the current host. * * @defaultValue true */ enabled?: boolean; /** * The mode of the drag operation. * - `immediate`: The element itself is moved during drag. * - `deferred`: A ghost element is created and moved; the original stays in place. * * @defaultValue 'deferred' */ mode?: DragMode; /** * Whether starting a drag operation should snap the dragged item's top-left corner * to the cursor position. * * @defaultValue false */ snapToCursor?: boolean; /** * Guard function invoked during the `start` callback. * Returning a truthy value will prevent the drag operation from starting. */ skip?: DragSkipCallback; /** * Function to match potential drop targets. * Called for elements under the cursor during drag. */ matchTarget?: DragMatchTargetCallback; /** * Function that returns the element to use as the drag trigger. * By default, the host element is used. */ trigger?: DragTriggerCallback; /** * Function that returns the container element for the ghost in deferred mode. */ layer?: DragLayerCallback; /** * Factory function to create a custom ghost element in deferred mode. */ ghost?: DragGhostCallback; /** * Callback invoked at the beginning of a drag operation. * Return `false` to cancel the drag. */ start?: DragCallback; /** * Callback invoked while dragging the target element. */ move?: DragCallback; /** * Callback invoked when entering a matched drop target. */ enter?: DragCallback; /** * Callback invoked when leaving a matched drop target. */ leave?: DragCallback; /** * Callback invoked while dragging over a matched drop target. */ over?: DragCallback; /** * Callback invoked when the drag operation completes. */ end?: DragCallback; /** * Callback invoked when a drag is cancelled (e.g., by pressing Escape). */ cancel?: DragCancelCallback; } /** * A drag and drop controller implementing the IgniteUI pattern. * * This controller manages pointer events to enable drag and drop functionality * on Lit elements. It supports both immediate and deferred drag modes. * * @example * ```typescript * class MyElement extends LitElement { * private readonly _dragController = addDragController(this, { * skip: (event) => this._shouldSkipDrag(event), * matchTarget: (element) => element.tagName === 'MY-DROP-TARGET', * ghost: () => this._createDragGhost(), * start: (params) => this._handleDragStart(params), * over: (params) => this._handleDragOver(params), * end: (params) => this._handleDragEnd(params), * cancel: (state) => this._handleDragCancel(state), * }); * } * ``` * * @public */ export declare class DragController implements ReactiveController { private readonly _host; private readonly _options; private _abortController; private _state; private _matchedElement; private _pointerId; private _hasPointerCapture; private _ghost; /** * Constructs a new instance of the `DragController` class. * * @param host - The host element. * @param options - The configuration options. * * @public */ constructor(host: ReactiveControllerHost & LitElement, options?: IDragControllerConfiguration); /** * Whether the drag controller is enabled. * * @public * @readonly */ get enabled(): boolean; /** * Whether `snapToCursor` is enabled for the controller. * * @private * @readonly */ private get _hasSnapping(); /** * Whether the current drag mode is deferred. * * @private * @readonly */ private get _isDeferred(); /** * The source element which will capture pointer events and initiate drag mode. * By default that will be the host element itself, unless `trigger` is passed in. * * @private * @readonly */ private get _element(); /** * The element being dragged. * When in deferred mode this returns a reference to the drag ghost element, * otherwise it is the host element. * * @private * @readonly */ private get _dragItem(); /** * The DOM element that will "host" the ghost drag element when the controller * is set to deferred. In immediate mode, this property is ignored. * * @private * @readonly */ private get _layer(); /** * The current state parameters for callbacks. * * @private * @readonly */ private get _stateParameters(); /** * Updates the drag controller configuration. * * @param options - The new configuration options. * * @public */ set(options?: IDragControllerConfiguration): void; /** * Stops any drag operation and cleans up state, event listeners, and elements. * * @public */ dispose(): void; /** * Handles pointer down events. * * @param event - The pointer event. * * @private */ private _handlePointerDown; /** * Handles pointer move events. * * @param event - The pointer event. * * @private */ private _handlePointerMove; /** * Handles pointer end events. * * @param event - The pointer event. * * @private */ private _handlePointerEnd; /** * Handles cancel events (Escape key). * * @param event - The keyboard event. * * @private */ private _handleCancel; /** * Sets up the cancel key listener. * * @param enabled - Whether to enable the listener. * * @private */ private _setDragCancelListener; /** * Sets the initial drag state. * * @param event - The pointer event. * * @private */ private _setInitialState; /** * Sets the drag state (captures pointer, applies styles). * * @param enabled - Whether drag is active. * * @private */ private _setDragState; /** * Updates the matched element based on current pointer position. * * @param event - The pointer event. * * @private */ private _updateMatcher; /** * Updates the position state based on the current pointer position. * * @param event - The pointer event. * * @private */ private _updatePosition; /** * Updates the pointer state for direction tracking. * * @param event - The pointer event. * * @private */ private _updatePointerState; /** * Assigns the position to the element via transform. * * @param element - The element to position. * * @private */ private _assignPosition; /** * Creates the drag ghost element. * * @private */ private _createDragGhost; /** * Removes the drag ghost element. * * @private */ private _removeGhost; /** * Checks whether the drag should be skipped. * * @param event - The pointer event. * @returns True if the drag should be skipped. * * @private */ private _shouldSkip; } /** * Adds a drag and drop controller to the given host. * * @param host - The host element. * @param options - The configuration options. * @returns The drag controller instance. * * @public */ export declare function addDragController(host: ReactiveControllerHost & LitElement, options?: IDragControllerConfiguration): DragController; //# sourceMappingURL=DragController.d.ts.map