import { ResizeDirection } from '../Types/ResizeDirection'; /** * Configuration options for the ResizeThumbController. * * @public */ export interface IResizeThumbControllerOptions { /** * The target element to resize. */ readonly target: HTMLElement; /** * The resize direction. * * @default 'south-east' */ readonly direction?: ResizeDirection; /** * Minimum width constraint. * * @default 0 */ readonly minWidth?: number; /** * Minimum height constraint. * * @default 0 */ readonly minHeight?: number; /** * Maximum width constraint. * * @default Number.MAX_SAFE_INTEGER */ readonly maxWidth?: number; /** * Maximum height constraint. * * @default Number.MAX_SAFE_INTEGER */ readonly maxHeight?: number; /** * Whether to automatically apply dimension changes to the target element. * * @default true */ readonly autoApply?: boolean; /** * Callback fired when resize starts. */ readonly onResizeStart?: (event: IResizeStartEvent) => void; /** * Callback fired during resize. */ readonly onResizing?: (event: IResizingEvent) => void; /** * Callback fired when resize ends. */ readonly onResizeEnd?: (event: IResizeEndEvent) => void; } /** * Event data for resize start. * * @public */ export interface IResizeStartEvent { readonly direction: ResizeDirection; readonly startX: number; readonly startY: number; readonly startWidth: number; readonly startHeight: number; } /** * Event data for resizing. * * @public */ export interface IResizingEvent { readonly direction: ResizeDirection; readonly deltaX: number; readonly deltaY: number; readonly currentX: number; readonly currentY: number; readonly newWidth: number; readonly newHeight: number; readonly newLeft: number; readonly newTop: number; } /** * Event data for resize end. * * @public */ export interface IResizeEndEvent { readonly direction: ResizeDirection; readonly totalDeltaX: number; readonly totalDeltaY: number; readonly finalWidth: number; readonly finalHeight: number; readonly finalLeft: number; readonly finalTop: number; } /** * Calculated dimensions result. * * @public */ export interface IResizeDimensions { readonly width: number; readonly height: number; readonly left: number; readonly top: number; } /** * ResizeThumbController - A standalone controller for programmatic resize operations. * * @description * This controller encapsulates all resize logic and can be used independently * of any visual component. It accepts any HTMLElement as target and provides * full control over the resize operation. * * Use this controller when: * - You need programmatic resize without a visual thumb element * - You want to use a custom visual for the resize handle * - You're working in a non-Web-Component context (Angular, React, vanilla JS) * - You need resize logic for Canvas, WebGL, or other rendering contexts * * @example * ```typescript * // Basic usage with custom handle * const controller = new ResizeThumbController({ * target: document.getElementById('my-box'), * direction: ResizeDirection.SouthEast, * minWidth: 100, * maxWidth: 500, * onResizing: (e) => console.log('New size:', e.newWidth, e.newHeight) * }); * * // Attach to your own handle element * myHandle.addEventListener('mousedown', (e) => { * controller.startResize(e.clientX, e.clientY); * }); * * // Or use the built-in handle attachment * controller.attachHandle(myHandle); * ``` * * @public */ export declare class ResizeThumbController { private _target; private _direction; private _minWidth; private _minHeight; private _maxWidth; private _maxHeight; private _autoApply; private readonly _onResizeStart?; private readonly _onResizing?; private readonly _onResizeEnd?; private _isResizing; private _startX; private _startY; private _startWidth; private _startHeight; private _startLeft; private _startTop; private readonly _attachedHandles; private readonly _handleListeners; private readonly _boundHandleMouseMove; private readonly _boundHandleMouseUp; private readonly _boundHandleTouchMove; private readonly _boundHandleTouchEnd; /** * Creates a new ResizeThumbController instance. * * @param options - Configuration options for the controller. * @public */ constructor(options: IResizeThumbControllerOptions); /** * Gets or sets the target element to resize. * * @public */ get target(): HTMLElement; set target(value: HTMLElement); /** * Gets or sets the resize direction. * * @public */ get direction(): ResizeDirection; set direction(value: ResizeDirection); /** * Gets or sets the minimum width constraint. * * @public */ get minWidth(): number; set minWidth(value: number); /** * Gets or sets the minimum height constraint. * * @public */ get minHeight(): number; set minHeight(value: number); /** * Gets or sets the maximum width constraint. * * @public */ get maxWidth(): number; set maxWidth(value: number); /** * Gets or sets the maximum height constraint. * * @public */ get maxHeight(): number; set maxHeight(value: number); /** * Gets or sets whether dimension changes are automatically applied. * * @public */ get autoApply(): boolean; set autoApply(value: boolean); /** * Gets whether a resize operation is currently in progress. * * @public * @readonly */ get isResizing(): boolean; /** * Attaches the controller to a handle element. * The handle will automatically trigger resize on mousedown/touchstart. * * @param handle - The element to use as resize handle. * @public */ attachHandle(handle: HTMLElement): void; /** * Detaches the controller from a handle element. * * @param handle - The handle element to detach. * @public */ detachHandle(handle: HTMLElement): void; /** * Detaches the controller from all handle elements. * * @public */ detachAllHandles(): void; /** * Starts a resize operation programmatically. * * @param clientX - The initial X coordinate. * @param clientY - The initial Y coordinate. * @public */ startResize(clientX: number, clientY: number): void; /** * Updates the resize operation with new coordinates. * Call this during mousemove/touchmove if not using attachHandle. * * @param clientX - The current X coordinate. * @param clientY - The current Y coordinate. * @public */ updateResize(clientX: number, clientY: number): void; /** * Ends the resize operation. * * @param clientX - The final X coordinate. * @param clientY - The final Y coordinate. * @public */ endResize(clientX: number, clientY: number): void; /** * Cancels the current resize operation without applying final changes. * * @public */ cancelResize(): void; /** * Calculates the new dimensions based on delta movement. * This method can be used externally to preview dimensions without applying. * * @param deltaX - The horizontal delta from start position. * @param deltaY - The vertical delta from start position. * @returns The calculated dimensions. * @public */ calculateDimensions(deltaX: number, deltaY: number): IResizeDimensions; /** * Applies dimensions to the target element. * * @param dimensions - The dimensions to apply. * @public */ applyDimensions(dimensions: IResizeDimensions): void; /** * Disposes the controller and cleans up all resources. * * @public */ dispose(): void; /** * Adds global listeners for mouse/touch events. * * @private */ private addGlobalListeners; /** * Removes global listeners for mouse/touch events. * * @private */ private removeGlobalListeners; /** * Handles mouse move events during resize. * * @private */ private handleMouseMove; /** * Handles mouse up events to end resize. * * @private */ private handleMouseUp; /** * Handles touch move events during resize. * * @private */ private handleTouchMove; /** * Handles touch end events to end resize. * * @private */ private handleTouchEnd; } //# sourceMappingURL=ResizeThumbController.d.ts.map