lisn.js/dist/cjs/effects/transform.d.ts

Simply handle user gestures and actions. Includes widgets.

/**
 * @module Effects/Transform
 *
 * @since v1.3.0
 */
import { AtLeastOne, Axis, Origin } from "../globals/types.cjs";
import { Effect, EffectCallback, ScrollOffsets } from "../effects/effect.cjs";
/**
 * {@link Transform} controls an element's transform a 3D transform matrix.
 */
export declare class Transform implements Effect {
    /**
     * Returns a {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly | DOMMatrixReadOnly} representing the transform.
     *
     * @param relativeTo If given, then this matrix is first inverted and used as
     *                   a pre-multiplication
     */
    readonly toMatrix: (relativeTo?: Transform | DOMMatrix | Float32Array) => DOMMatrixReadOnly;
    /**
     * Returns a {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array | Float32Array} representing the transform.
     *
     * @param relativeTo See {@link toMatrix}
     */
    readonly toFloat32Array: (relativeTo?: Transform | DOMMatrix | Float32Array) => Float32Array;
    /**
     * Returns a `perspective(...) matrix3d(...)` string for use as a CSS property.
     *
     * If no perspective has been set, it's omitted from the string.
     *
     * @param relativeTo See {@link toMatrix}
     */
    readonly toString: (relativeTo?: Transform | DOMMatrix | Float32Array) => string;
    /**
     * Resets the transformation back to the default (identity) one.
     */
    readonly reset: () => Transform;
    /**
     * Sets the transform's perspective. Perspective applies at the start of
     * transforms and subsequent calls to this method always override previous
     * ones.
     *
     * @param callback The callback that returns the perspective as a number (in
     *                 pixels) or CSS perspective string
     *
     * @returns The same {@link Transform} instance.
     */
    readonly perspective: (callback: EffectCallback<number | string>) => Transform;
    /**
     * Translates the transform.
     *
     * @param callback The callback that returns one or more of:
     *                 - x The translation distance in pixels along the X-axis.
     *                 - y The translation distance in pixels along the Y-axis.
     *                 - z The translation distance in pixels along the Z-axis.
     *
     * @returns The same {@link Transform} instance.
     */
    readonly translate: (callback: EffectCallback<AtLeastOne<{
        x: number;
        y: number;
        z: number;
    }>>) => Transform;
    /**
     * Scales the transform.
     *
     * @param callback The callback that returns one or more of:
     *                 - s      The default scaling factor for any axis if not
     *                          overridden by sx, sy or sz.
     *                 - sx     The translation distance in pixels along the X-axis.
     *                 - sy     The translation distance in pixels along the Y-axis.
     *                 - sz     The translation distance in pixels along the Z-axis.
     *                 - origin The transform origin
     *
     * @returns The same {@link Transform} instance.
     */
    readonly scale: (callback: EffectCallback<AtLeastOne<{
        s: number;
        sx: number;
        sy: number;
        sz: number;
    }> & {
        origin?: Origin;
    }>) => Transform;
    /**
     * Skews the transform. If skewing along both axis (i.e. both `degX` and
     * `degY` given, or `deg` is given), then skewing is done first along X, then
     * along Y.
     *
     * @param callback The callback that returns one or more of:
     *                 - deg  The skewing angle in degrees for either axis if not
     *                        overridden by degX or degY.
     *                 - degX The skewing angle in degrees along the X-axis.
     *                 - degY The skewing angle in degrees along the Y-axis.
     *
     * @returns The same {@link Transform} instance.
     */
    readonly skew: (callback: EffectCallback<AtLeastOne<{
        deg: number;
        degX: number;
        degY: number;
    }>>) => Transform;
    /**
     * Rotates the transform around the given axis.
     *
     * @param callback The callback that returns one or more of:
     *                 - deg  The angle in degrees to rotate.
     *                 - axis The axis of rotation. Default is Z-axis.
     *
     * @returns The same {@link Transform} instance.
     */
    readonly rotate: (callback: EffectCallback<{
        deg: number;
        axis?: Axis;
    }>) => Transform;
    /**
     * Applies all transforms for the given scroll offsets.
     *
     * @throws {@link Errors.LisnUsageError | LisnUsageError}
     *                If any of the values returned by the {@link EffectCallback}
     *                s is invalid.
     *
     * @returns The same {@link Transform} instance.
     */
    readonly apply: (element: Element, offsets: ScrollOffsets) => Transform;
    constructor(init?: Transform | DOMMatrix | Float32Array);
}
//# sourceMappingURL=transform.d.ts.map