@tempots/dom/dom/pinch-zoom.d.ts

Fully-typed frontend framework alternative to React and Angular

import { Prop } from '@tempots/core';
/**
 * State for a pinch-zoom interaction.
 * @public
 */
export type PinchZoomState = {
    readonly scale: number;
    readonly panX: number;
    readonly panY: number;
};
/**
 * Configuration for the pinch-zoom handler.
 * @public
 */
export type PinchZoomConfig = {
    /** Minimum allowed scale. Default: 0.1. */
    readonly minScale?: number;
    /** Maximum allowed scale. Default: 5. */
    readonly maxScale?: number;
};
/**
 * Event handlers returned by {@link createPinchZoomHandler}.
 * @public
 */
export type PinchZoomHandler = {
    readonly onTouchStart: (e: TouchEvent) => void;
    readonly onTouchMove: (e: TouchEvent) => void;
    readonly onTouchEnd: (e: TouchEvent) => void;
};
/**
 * Creates event handlers for two-finger pinch-to-zoom with simultaneous pan.
 *
 * @param state - A `Prop` holding the current zoom/pan state. Updated on each touch move.
 * @param getContainerRect - Returns the bounding rect of the zoomable container.
 * @param config - Optional scale limits.
 * @returns Touch event handlers to attach to the target element.
 * @public
 */
export declare function createPinchZoomHandler(state: Prop<PinchZoomState>, getContainerRect: () => DOMRect, config?: PinchZoomConfig): PinchZoomHandler;