@studiometa/js-toolkit/services/DragService.d.ts

A set of useful little bits of JavaScript to boost your project! 🚀

import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
import { AbstractService } from './AbstractService.js';
export interface DragServiceProps {
    /**
     * The current mode of the dragging logic.
     */
    mode: 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
    /**
     * Available modes.
     */
    MODES: {
        START: 'start';
        DRAG: 'drag';
        DROP: 'drop';
        INERTIA: 'inertia';
        STOP: 'stop';
    };
    /**
     * The target element of the drag.
     */
    target: HTMLElement;
    /**
     * Whether the user is currently grabbing the targeted element or not.
     */
    isGrabbing: boolean;
    /**
     * Whether the drag currently has inertia or not.
     */
    hasInertia: boolean;
    /**
     * The current horizontal position in the viewport.
     */
    x: number;
    /**
     * The current vertical position in the viewport.
     */
    y: number;
    /**
     * The delta between the current position and the last.
     */
    delta: {
        x: number;
        y: number;
    };
    /**
     * The initial position where the dragging started.
     */
    origin: {
        x: number;
        y: number;
    };
    /**
     * The distance from the current position to the origin.
     */
    distance: {
        x: number;
        y: number;
    };
    /**
     * The final position that will be reached at the end of the inertia.
     */
    final: {
        x: number;
        y: number;
    };
}
export type DragServiceInterface = ServiceInterface<DragServiceProps>;
export interface DragServiceOptions {
    dampFactor?: number;
    dragTreshold?: number;
}
export declare class DragService extends AbstractService<DragServiceProps> {
    static MODES: {
        readonly START: "start";
        readonly DRAG: "drag";
        readonly DROP: "drop";
        readonly INERTIA: "inertia";
        readonly STOP: "stop";
    };
    static config: ServiceConfig;
    id: string;
    dampFactor: number;
    dragTreshold: number;
    previousEvent: TouchEvent | MouseEvent;
    props: DragServiceProps;
    /**
     * Test if we should allow click on links and buttons.
     */
    get shouldPreventClick(): boolean;
    constructor(target: HTMLElement, { dampFactor, dragTreshold }?: DragServiceOptions);
    /**
     * Get the client value for the given axis.
     */
    getEventPosition(event: MouseEvent | TouchEvent): {
        x: number;
        y: number;
    };
    /**
     * Start the drag.
     *
     * @param {number} x The initial horizontal position.
     * @param {number} y The initial vertical position.
     */
    start(x: number, y: number): void;
    /**
     * Stop the drag, or drop.
     */
    drop(): void;
    /**
     * Stop the drag.
     */
    stop(): void;
    /**
     * Raf service handler.
     */
    rafHandler(): void;
    /**
     * Pointer service handler.
     */
    drag(event: TouchEvent | MouseEvent): void;
    /**
     * Handle any event.
     */
    handleEvent(event: MouseEvent | PointerEvent | DragEvent): void;
}
/**
 * Use the drag service.
 *
 * ```js
 * import { useDrag } from '@studiometa/js-toolkit/services';
 * const element = document.querySelector('.draggable');
 * const { add, remove, props } = useDrag(element, { dampFactor: 0.5 });
 * add('key', (props) => console.log(props));
 * remove('key');
 * props();
 * ```
 */
export declare function useDrag(target: HTMLElement, options: DragServiceOptions): DragServiceInterface;