import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'; /** * The resize handle direction. * * @public */ export type DragResizeHandle = 'side' | 'bottom' | 'corner' | null; /** * The resize mode. * * @public */ export type DragResizeMode = 'immediate' | 'deferred'; /** * A position with x and y coordinates. * * @public */ export interface IDragResizePosition { x: number; y: number; } /** * Dimensions with width and height. * * @public */ export interface IDragResizeDimensions { width: number; height: number; } /** * The state tracked during a resize operation. * * @public */ export interface IDragResizeState { /** * The initial bounding rect of the element when the resize started. */ initial: DOMRect; /** * The current bounding rect of the element. */ current: DOMRect; /** * The initial pointer position when resize started. */ startPointer: IDragResizePosition; /** * The current pointer position. */ currentPointer: IDragResizePosition; /** * The delta from start position. */ delta: IDragResizePosition; /** * The current dimensions of the resize. */ dimensions: IDragResizeDimensions; /** * The resize handle being used. */ handle: DragResizeHandle; /** * The ghost element used in deferred mode. */ ghost: HTMLElement | null; } /** * Parameters passed to resize callbacks. * * @public */ export interface IDragResizeCallbackParameters { /** * The pointer event that triggered the callback. */ event: PointerEvent; /** * The current resize state. */ state: IDragResizeState; } /** * Callback type for resize events. * * @public */ export type DragResizeCallback = (parameters: IDragResizeCallbackParameters) => unknown; /** * Callback type for resize cancel events. * * @public */ export type DragResizeCancelCallback = (state: IDragResizeState) => unknown; /** * Skip callback type. * * @public */ export type DragResizeSkipCallback = (event: PointerEvent) => boolean; /** * Handle match callback type. * * @public */ export type DragResizeHandleMatchCallback = (element: HTMLElement) => DragResizeHandle; /** * Ghost factory callback type. * * @public */ export type DragResizeGhostCallback = () => HTMLElement; /** * Snap calculation callback type. * * @public */ export type DragResizeSnapCallback = (dimensions: IDragResizeDimensions, delta: IDragResizePosition, handle: DragResizeHandle) => IDragResizeDimensions; /** * Configuration options for the DragResizeController. * * @public */ export interface IDragResizeControllerConfiguration { /** * Whether the resize feature is enabled. * * @defaultValue true */ enabled?: boolean; /** * The mode of the resize operation. * - `immediate`: The element itself is resized during the operation. * - `deferred`: A ghost element is created and resized; the original stays unchanged until completion. * * @defaultValue 'deferred' */ mode?: DragResizeMode; /** * Minimum width for the resize operation in pixels. * * @defaultValue 50 */ minWidth?: number; /** * Minimum height for the resize operation in pixels. * * @defaultValue 50 */ minHeight?: number; /** * Maximum width for the resize operation in pixels. * * @defaultValue Infinity */ maxWidth?: number; /** * Maximum height for the resize operation in pixels. * * @defaultValue Infinity */ maxHeight?: number; /** * Guard function invoked during the `start` callback. * Returning a truthy value will prevent the resize operation from starting. */ skip?: DragResizeSkipCallback; /** * Function to match resize handles. * Called for elements to determine which resize handle was activated. */ matchHandle?: DragResizeHandleMatchCallback; /** * Factory function to create a custom ghost element in deferred mode. */ ghost?: DragResizeGhostCallback; /** * Function to calculate snapped dimensions during resize. * Used for grid-based snapping or other custom dimension calculations. */ snap?: DragResizeSnapCallback; /** * Callback invoked at the beginning of a resize operation. * Return `false` to cancel the resize. */ start?: DragResizeCallback; /** * Callback invoked while resizing the element. */ resize?: DragResizeCallback; /** * Callback invoked when the resize operation completes. */ end?: DragResizeCallback; /** * Callback invoked when a resize is cancelled (e.g., by pressing Escape). */ cancel?: DragResizeCancelCallback; } /** * A drag-to-resize controller implementing a ReactiveController pattern. * * This controller manages pointer events to enable resize functionality * on Lit elements via drag handles. It supports both immediate and deferred resize modes. * * @example * ```typescript * class MyElement extends LitElement { * private readonly _dragResizeController = addDragResizeController(this, { * matchHandle: (element) => { * if (element.classList.contains('resize-side')) return 'side'; * if (element.classList.contains('resize-bottom')) return 'bottom'; * if (element.classList.contains('resize-corner')) return 'corner'; * return null; * }, * ghost: () => this._createResizeGhost(), * start: (params) => this._handleResizeStart(params), * resize: (params) => this._handleResize(params), * end: (params) => this._handleResizeEnd(params), * cancel: (state) => this._handleResizeCancel(state), * }); * } * ``` * * @public */ export declare class DragResizeController implements ReactiveController { private readonly _host; private readonly _options; private _abortController; private _state; private _pointerId; private _hasPointerCapture; private _ghost; private _captureElement; /** * Constructs a new instance of the `DragResizeController` class. * * @param host - The host element. * @param options - The configuration options. * * @public */ constructor(host: ReactiveControllerHost & LitElement, options?: IDragResizeControllerConfiguration); /** * Whether the resize controller is enabled. * * @public * @readonly */ get enabled(): boolean; /** * Whether a resize operation is currently in progress. * * @public * @readonly */ get isResizing(): boolean; /** * Whether the current resize mode is deferred. * * @private * @readonly */ private get _isDeferred(); /** * The element being resized. * When in deferred mode this returns a reference to the resize ghost element, * otherwise it is the host element. * * @private * @readonly */ private get _resizeItem(); /** * The current state parameters for callbacks. * * @private * @readonly */ private get _stateParameters(); /** * Updates the resize controller configuration. * * @param options - The new configuration options. * * @public */ set(options?: IDragResizeControllerConfiguration): void; /** * Stops any resize 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 _setResizeCancelListener; /** * Sets the initial resize state. * * @param event - The pointer event. * @param handle - The resize handle. * * @private */ private _setInitialState; /** * Sets the resize state (captures pointer, applies styles). * * @param enabled - Whether resize is active. * * @private */ private _setResizeState; /** * Updates the position state based on the current pointer position. * * @param event - The pointer event. * * @private */ private _updatePosition; /** * Updates the dimensions based on the current resize state. * * @private */ private _updateDimensions; /** * Applies the dimensions to the element. * * @param element - The element to resize. * * @private */ private _applyDimensions; /** * Matches the resize handle from the event. * * @param event - The pointer event. * @returns The matched handle or null. * * @private */ private _matchHandle; /** * Creates the resize ghost element. * * @private */ private _createResizeGhost; /** * Removes the resize ghost element. * * @private */ private _removeGhost; /** * Checks whether the resize should be skipped. * * @param event - The pointer event. * @returns True if the resize should be skipped. * * @private */ private _shouldSkip; } /** * Adds a drag-to-resize controller to the given host. * * @param host - The host element. * @param options - The configuration options. * @returns The drag resize controller instance. * * @public */ export declare function addDragResizeController(host: ReactiveControllerHost & LitElement, options?: IDragResizeControllerConfiguration): DragResizeController; //# sourceMappingURL=DragResizeController.d.ts.map