vevet/lib/types/components/Cursor/index.d.ts

Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.

import { Module, TModuleOnCallbacksProps } from '../../base/Module';
import { TRequiredProps } from '../../internal/requiredProps';
import { CursorHoverElement } from './HoverElement';
import { ICursorHoverElementProps } from './HoverElement/types';
import { ICursorCallbacksMap, ICursorFullCoords, ICursorMutableProps, ICursorStaticProps, ICursorType } from './types';
export * from './types';
export type { ICursorHoverElementProps };
type TC = ICursorCallbacksMap;
type TS = ICursorStaticProps;
type TM = ICursorMutableProps;
/**
 * A customizable custom cursor component with smooth animations and hover interactions.
 * Supports dynamic appearance changes and enhanced user interaction.
 *
 * [Documentation](https://vevetjs.com/docs/Cursor)
 *
 * @group Components
 */
export declare class Cursor extends Module<TC, TS, TM> {
    /** Get default static properties */
    _getStatic(): TRequiredProps<TS>;
    /** Get default mutable properties */
    _getMutable(): TRequiredProps<TM>;
    /** The outer element of the custom cursor */
    private _outer?;
    /** The inner element of the custom cursor. */
    private _inner?;
    /** Attached hover elements */
    private _elements;
    /** Active hovered element */
    private _activeElements;
    /** Request animation frame handler */
    private _raf?;
    /** The current coordinates */
    private _coords;
    /** Target coordinates of the cursor. Element dimensions are not considered here (in getter - yes). */
    private _rawTarget;
    /** Defines if the cursor has been moved after initialization */
    private _isFirstMove;
    /** Cursor types */
    private _types;
    /** Active cursor types */
    private _activeTypes;
    /** Cursor Path Instance */
    private _path;
    constructor(props?: TS & TM & TModuleOnCallbacksProps<TC, Cursor>, onCallbacks?: TModuleOnCallbacksProps<TC, Cursor>);
    /**
     * Classname prefix for styling elements.
     */
    get prefix(): string;
    /** The cursor container */
    get container(): Element | Window;
    /** Returns the DOM parent for the cursor element. */
    get domContainer(): HTMLElement;
    /**
     * The outer element of the custom cursor.
     * This is the visual element that represents the cursor on screen.
     */
    get outer(): HTMLElement;
    /**
     * The inner element of the custom cursor.
     * This element is nested inside the outer element and can provide additional styling.
     */
    get inner(): HTMLElement;
    /** Cursor initial width */
    get initialWidth(): number;
    /** Cursor initial width */
    get initialHeight(): number;
    /**
     * The current coordinates (x, y, width, height).
     * These are updated during cursor movement.
     */
    get coords(): ICursorFullCoords;
    /**
     * The currently hovered element.
     * Stores information about the element that the cursor is currently interacting with.
     */
    get hoveredElement(): CursorHoverElement | undefined;
    /** Target coordinates of the cursor (without smooth interpolation). */
    get targetCoords(): ICursorFullCoords;
    /** Returns an SVG path element which represents the cursor movement */
    get path(): SVGPathElement;
    /** Check if the cursor has a path */
    private get hasPath();
    /** Handles property mutations */
    protected _handleProps(props: Partial<TM>): void;
    /** Sets class names */
    private _setClassNames;
    /** Creates the custom cursor and appends it to the DOM. */
    private _createElements;
    /** Sets up the various event listeners for the cursor, such as mouse movements and clicks. */
    private _setEvents;
    /** Enables cursor animation. */
    private _toggle;
    /** Handles mouse enter events. */
    private _handleMouseEnter;
    /** Handles mouse leave events. */
    private _handleMouseLeave;
    /** Handles mouse move events. */
    private _handleMouseMove;
    /** Handles mouse down events. */
    private _handleMouseDown;
    /** Handles mouse up events. */
    private _handleMouseUp;
    /** Handles window blur events. */
    private _handleWindowBlur;
    /**
     * Registers an element to interact with the cursor, enabling dynamic size and position changes based on hover effects.
     * @returns Returns a destructor
     */
    attachHover(settings: ICursorHoverElementProps): () => void;
    /** Handle element mouse enter event */
    private _handleElementEnter;
    /** Handle element mouse leave event */
    private _handleElementLeave;
    /**
     * Registers a cursor type.
     */
    attachCursor({ element, type }: ICursorType): void;
    /** Enable or disable a cursor type */
    private _toggleType;
    /**
     * Checks if all coordinates are interpolated.
     * @returns {boolean} True if all coordinates are interpolated, false otherwise.
     */
    private get isInterpolated();
    /** Renders the cursor. */
    render(): void;
    /** Recalculates current coordinates. */
    private _calculate;
    /** Gets the interpolation factor. */
    private _getLerpFactor;
    /** Performs linear interpolation. */
    private _lerp;
    /** Renders the cursor elements. */
    private _renderElements;
}
//# sourceMappingURL=index.d.ts.map