magnifuer/dist/composables/useMagnifuer.d.ts

Feature-rich Vue component and tooling for creating customizable magnifying-glass-style interfaces with ease.

import { MaybeRef, MaybeRefOrGetter, Reactive } from 'vue';
import { MagnifuerPosition, MagnifuerSize } from '../types';
export interface UseMagnifuerOptions {
    /**
     * Allow the magnifying area to overflow the container
     *
     * @default false
     */
    allowOverflow?: MaybeRefOrGetter<boolean>;
}
export interface MagnifuerPointer extends MagnifuerPosition {
    /**
     * Absolute position of the pointer in px
     */
    absolute: MagnifuerPosition;
    /**
     * Whether the pointer is inside the container
     */
    isInside: boolean;
}
export interface UseMagnifuerState {
    /**
     * Current scale value
     */
    scale: number;
    /**
     * Current position of the magnifier on X axis relative to container width as a fractional value (0-1)
     */
    x: number;
    /**
     * Current position of the magnifier on Y axis relative to container height as a fractional value (0-1)
     */
    y: number;
    /**
     * Absolute position of the magnifier relative to the container in px
     */
    absolute: MagnifuerPosition;
    /**
     * Pointer state relative to the container
     */
    pointer: MagnifuerPointer;
    /**
     * Size of the magnifier in px
     */
    size: MagnifuerSize;
    /**
     * Size of the container in px
     */
    containerSize: MagnifuerSize;
    /**
     * Size of the magnifying area in px
     */
    areaSize: MagnifuerSize;
}
/**
 * Utility composable for making custom magnifying-glass-style component.
 * Provides all the essential calculations updated in real-time for positioning the elements.
 *
 * @param container Reference to the container element whose content is to be magnified
 * @param scale Scale value
 * @param size Size of the magnifier in px
 * @param options Additional options
 */
declare function useMagnifuer(container: MaybeRef<HTMLElement | null | undefined>, scale: MaybeRefOrGetter<number>, size: MagnifuerSize<MaybeRefOrGetter<number>>, options?: UseMagnifuerOptions): Reactive<UseMagnifuerState>;
export default useMagnifuer;