import { VegaSlimmer } from '../../vega-slimmer/vega-slimmer-core'; import { Nullable } from '../../types/general'; import { DragDropEventPayload } from '../../types/ui.type'; export declare type DraggableElementEntry = { /** * Returns the container element whose direct children are the sortable items. * Can be an HTMLElement or a Vega component's shadow-root child. */ container: () => Nullable; /** * CSS selector that identifies each draggable item within the container. * * Example: `vega-table-row` */ itemSelector: string; /** * CSS selector that identifies the element that starts dragging. * The selector is matched against the event composed path. * * Example: While item is a container, the trigger is a specific handle element inside it, e.g. `td.vega-table-draggable-column` */ triggerElementSelector?: string; /** * CSS selector for the element that should receive drag-related styles. * The selector is resolved relative to each item. Shadow-root content is checked first. * If omitted, the item element itself receives the styles. * * Example: `tr.vega-table-row` */ visualElementSelector?: string; /** * Full lifecycle callbacks for drag drop progress. * The callback receives the current drag state and relevant item details, and is responsible for emitting corresponding events. * * @param {DragDropEventPayload} detail - An object containing details about the drag event. */ onDragDrop?: (detail: DragDropEventPayload) => void; }; /** * Makes the direct children of a container element sortable via pointer events. * This works across shadow DOM boundaries because pointer events are composed. */ export declare class DraggableElementSlimmer extends VegaSlimmer { private static readonly DRAG_THRESHOLD; isDraggable: boolean; private entry; private activePointerId; private activeItem; private isDragging; private startX; private startY; private dragFromIndex; private dragToIndex; private currentOverItem; private currentOverIndex; private activeItemHeight; private cachedItems; private cachedItemDraggableMap; /** * Re-registers pointer event listeners when the host component is re-attached to the DOM after a prior disconnection. */ connectedCallback(): void; /** * Removes all pointer event listeners and clears drag state when the host component is detached from the DOM. */ disconnectedCallback(): void; /** * Registers pointer event listeners once the host component has finished its initial render. */ componentDidLoad(): void; constructor(entry: DraggableElementEntry); /** * Updates the slimmer's draggable state in response to changes in the host component's `rowDraggable` property. */ watchIsDraggable(): void; /** * Initializes the slimmer by attaching pointer event listeners if `isDraggable` is true. */ private init; /** * Cleans up the slimmer by removing pointer event listeners and resetting all drag state. */ private destroy; /** * Attaches `pointerdown` on the container and `pointermove` / `pointerup` / `pointercancel` on the window. */ private listenPointerEvents; /** * Removes all pointer event listeners that were registered by {@link listenPointerEvents}. */ private removePointerListeners; /** * Handles the `pointerdown` event. Validates that the event originated from the trigger element * and initiates a drag session for the matched item. * * @param {PointerEvent} e - The pointer event fired on the container. */ private onPointerDown; /** * Handles the `pointermove` event. Once the drag threshold is crossed, updates the dragged * element's visual position and recalculates the current drop target. * * @param {PointerEvent} e - The pointer event fired on the window. */ private onPointerMove; /** * Handles the `pointerup` event. Finalizes the drag and fires the reorder callback * if the item was released at a different position. * * @param {PointerEvent} e - The pointer event fired on the window. */ private onPointerUp; /** * Handles the `pointercancel` event. Aborts the active drag session and restores all * inline styles to their pre-drag state. Only responds to the active pointer. * * @param {PointerEvent} e - The pointer event fired on the window. */ private onPointerCancel; /** * Initializes all drag state for the given item. Caches the current item list, * records the pointer origin, and captures the item height used for sibling offset calculations. * * @param {HTMLElement} item - The draggable item element that was grabbed. * @param {PointerEvent} e - The originating `pointerdown` event. */ private startDrag; /** * Marks the interaction as an active drag after threshold crossing. */ private beginDragging; /** * Translates the dragged item's visual element to follow the pointer and lifts it * above sibling items by applying `zIndex` and disabling its pointer events. * * @param {PointerEvent} e - The current `pointermove` event. */ private syncActiveVisual; /** * Resolves the item currently under the pointer and updates `dragToIndex`, * then applies slot-shift transforms to all sibling items. * * @param {PointerEvent} e - The current `pointermove` event. */ private updateDropTarget; /** * Completes the drag session. Captures the final `fromIndex` and `toIndex` before * resetting state, then fires `onReorder` if the item was moved to a new position. */ private finishDrag; /** * Clears all inline drag styles applied to cached items and resets every * drag-related state field to its initial value. */ private resetDragState; /** * Invokes the container factory function to retrieve the current container element. * * @returns {Nullable} The resolved container element, or `null` if the factory throws. */ private getContainer; /** * Performs a live DOM query for all elements matching `itemSelector` within the container. * * @returns {HTMLElement[]} An array of matched item elements, or an empty array if the container is unavailable. */ private queryItems; /** * Returns the cached item list during an active drag session. * Falls back to a live DOM query when no drag is in progress. * * @returns {HTMLElement[]} The current list of draggable item elements. */ private getItems; /** * Returns the zero-based index of the given element within the current item list. * * @param {HTMLElement} target - The element to locate. * @returns {number} The index of the element, or `-1` if it is not found. */ private getItemIndex; /** * Resolves the element that should receive drag-related inline styles for a given item. * Checks the item's shadow root first, then its light DOM children, then falls back to the item itself. * * @param {HTMLElement} item - The draggable item element. * @returns {HTMLElement} The visual target element for style application. */ private getVisualElement; /** * Resolves the element that should receive drag-related inline styles for a given item. * Checks the item's shadow root first, then its light DOM children, then falls back to the item itself. * * @param {HTMLElement} item - The draggable item element. * @returns {HTMLElement} The visual target element for style application. */ private resolveVisualElement; /** * Caches each draggable item using the item as the map key and stores its resolved visual element * together with the visual element's original inline style for precise restoration after dragging. */ private cacheItems; /** * Walks the event's composed path to find the matching item element. * When `requireTriggerMatch` is `true`, also verifies that the event originated * inside the configured trigger element; returns `null` if either condition fails. * * @param {Event} e - The event whose composed path is inspected. * @param {boolean} requireTriggerMatch - When `true`, the item is only returned if the trigger element was also matched. * @returns {Nullable} The matched item element, or `null` if not found or trigger requirement not met. */ private getItemFromComposedPath; /** * Translates sibling items up or down to visually make space for the dragged item at its current drop target. * Items within the affected index range shift by one item height; all others are reset to their natural position. */ private applyLayoutTransforms; /** * Calculates the resolved drop index based on whether the pointer is above or below * the midpoint of the hovered item. The slot only switches after crossing the 50% mark, * preventing index jitter at slot boundaries. * * @param {HTMLElement} overItem - The item element currently under the pointer. * @param {number} pointerClientY - The vertical client coordinate of the pointer. * @returns {number} The resolved zero-based index where the dragged item would be inserted. */ private getResolvedDropIndex; /** * Checks whether the given pointer event belongs to the pointer that started the current drag session. * * @param {PointerEvent} e - The pointer event to test. * @returns {boolean} `true` if the event's `pointerId` matches the active drag pointer. */ private isCurrentPointEvent; /** * Checks whether the pointer has moved at least `DRAG_THRESHOLD` pixels (combined X + Y delta) * from its origin, or whether a drag is already in progress. * * @param {PointerEvent} e - The current `pointermove` event. * @returns {boolean} `true` if the drag threshold has been crossed or dragging is already active. */ private hasCrossedDragThreshold; /** * Emits the drag lifecycle callback while the pointer is moving. */ private emitDrag; /** * Emits a drag-leave lifecycle callback when the pointer exits a hovered item. * * @param {Nullable} toIndex - Index of the item being left. * @param {Nullable} toItem - Item element being left. */ private emitDragLeave; /** * Emits a drag lifecycle payload to consumers. * * @param {DragDropEventStatus} status - Current lifecycle phase. */ private onDragDrop; }