fancyapps-ui/types/Panzoom/Panzoom.d.ts

import { Component } from "../shared/Base/Component";
import { PluginsType, EventsType, Bounds, MatrixValues, ZoomOptions } from "./types";
import { States } from "./consts";
import { OptionsType } from "./options";
export declare class Panzoom extends Component<OptionsType, EventsType> {
    static defaults: Partial<OptionsType>;
    static Plugins: PluginsType;
    private pointerTracker;
    private resizeObserver;
    private updateTimer;
    private clickTimer;
    private rAF;
    private isTicking;
    private friction;
    private ignoreBounds;
    private isBouncingX;
    private isBouncingY;
    private clicks;
    private trackingPoints;
    private pwt;
    private cwd;
    private pmme;
    /**
     * Current state of the instance
     */
    state: States;
    /**
     * True if the user is currently dragging
     */
    isDragging: boolean;
    /**
     * Reference to the container element
     */
    container: HTMLElement;
    /**
     * Reference to the content element
     */
    content: HTMLElement | HTMLImageElement | HTMLPictureElement;
    /**
     * Reference to the loading indicator element
     */
    spinner: HTMLElement | null;
    /**
     * Container dimensions.
     * `innerWidth` & `innerHeight` values are width/height without padding.
     */
    containerRect: {
        width: number;
        height: number;
        innerWidth: number;
        innerHeight: number;
    };
    /**
     * Content dimensions and position relative to parent.
     * `width` & `height` values are in current scale.
     */
    contentRect: {
        top: number;
        right: number;
        bottom: number;
        left: number;
        fullWidth: number;
        fullHeight: number;
        fitWidth: number;
        fitHeight: number;
        width: number;
        height: number;
    };
    /**
     * Initial position of the drag
     */
    dragStart: {
        x: number;
        y: number;
        top: number;
        left: number;
        time: number;
    };
    /**
     * Current position of the drag
     */
    dragOffset: {
        x: number;
        y: number;
        time: number;
    };
    /**
     * Transformation matrix values that define current x/y position and scale
     */
    current: MatrixValues;
    /**
     * Transformation matrix values that define the x/y position and scale of the end of the current animation
     */
    target: MatrixValues;
    /**
     * The velocity of each transformation matrix value
     */
    velocity: MatrixValues;
    /**
     * Axis that is currently locked
     */
    lockedAxis: false | "x" | "y";
    /**
     * True if the user is on a touch device
     */
    get isTouchDevice(): boolean;
    get isMobile(): boolean;
    /**
     * Current pan mode - `mousemove` or `drag`
     */
    get panMode(): "drag" | "mousemove";
    /**
     * If the content can be dragged when it fits into the container
     */
    get panOnlyZoomed(): boolean | ((...any: any) => boolean | "auto");
    /**
     * True if the content has any boundaries
     */
    get isInfinite(): boolean | "x" | "y";
    /**
     * At what angle the content is rotated
     */
    get angle(): number;
    /**
     * At what angle the content is rotated at the end of the current animation
     */
    get targetAngle(): number;
    /**
     * At what scale the content is scaled
     */
    get scale(): number;
    /**
     * At what scale the content is scaled at the end of the current animation
     */
    get targetScale(): number;
    /**
     * Minimum scale level
     */
    get minScale(): number;
    /**
     * At what scale the content will be at full width and height (1 to 1)
     */
    get fullScale(): number;
    /**
     * Maximum scale level given the `maxScale` option
     */
    get maxScale(): number;
    /**
     * At what scale the content will cover the container
     */
    get coverScale(): number;
    /**
     * True if the content is currently animated and the scale level is changing
     */
    get isScaling(): boolean;
    /**
     * True if the content (image) has not finished loading
     */
    get isContentLoading(): boolean;
    /**
     * True if the animation is complete and the content fits within the bounds
     */
    get isResting(): boolean;
    constructor(container: HTMLElement | null, userOptions?: Partial<OptionsType>, userPlugins?: PluginsType);
    private initContent;
    private onLoad;
    private onError;
    /**
     * Initialize the resize observer
     */
    attachObserver(): void;
    /**
     * Remove the resize observer
     */
    detachObserver(): void;
    /**
     * Enable click, wheel, mousemove and all touch events
     */
    attachEvents(): void;
    /**
     * Remove click, wheel, mouse movement and all touch events
     */
    detachEvents(): void;
    private animate;
    private setTargetForce;
    private checkBounds;
    private clampTargetBounds;
    private calculateContentDim;
    private setEdgeForce;
    private enable;
    private onClick;
    private addTrackingPoint;
    private onPointerDown;
    private onPointerMove;
    private onPointerUp;
    private startDecelAnim;
    private onWheel;
    private onMouseMove;
    private onKeydown;
    private onResize;
    private setTransform;
    /**
     * Calculate dimensions of contents and container
     */
    updateMetrics(silently?: boolean): void;
    /**
     * Get information about current content boundaries
     */
    getBounds(): Bounds;
    /**
     * Enable or disable controls depending on the current size of the content
     */
    updateControls(): void;
    /**
     * Pan content to selected position and scale, use `friction` to control duration
     */
    panTo({ x, y, scale, friction, angle, originX, originY, flipX, flipY, ignoreBounds, }: {
        x?: number;
        y?: number;
        scale?: number;
        friction?: number;
        angle?: number;
        originX?: number;
        originY?: number;
        flipX?: boolean;
        flipY?: boolean;
        ignoreBounds?: boolean;
    }): void;
    /**
     * Relatively change position, scale, or angle of content, and flip content horizontally or vertically
     */
    applyChange({ panX, panY, scale, angle, originX, originY, friction, flipX, flipY, ignoreBounds, bounce, }: {
        panX?: number;
        panY?: number;
        scale?: number;
        angle?: number;
        originX?: number;
        originY?: number;
        friction?: number;
        flipX?: boolean;
        flipY?: boolean;
        ignoreBounds?: boolean;
        bounce?: boolean;
    }): void;
    /**
     * Stop animation and optionally set target values to the current values (or vice versa)
     */
    stop(freeze?: "current" | "target" | false): void;
    /**
     * Request an animation frame to check if the content position or scale needs to be changed based on the target values or if the content is out of bounds
     */
    requestTick(): void;
    /**
     * Update the current position based on the mouse move event
     */
    panWithMouse(event: MouseEvent, friction?: number): void;
    /**
     * Update the current scale based on the mouse scroll event
     */
    zoomWithWheel(event: WheelEvent): void;
    /**
     * Check if the content can be scaled up
     */
    canZoomIn(): boolean;
    /**
     * Check if the content can be scaled down
     */
    canZoomOut(): boolean;
    /**
     * Increase scale level
     */
    zoomIn(scale?: number, opts?: ZoomOptions): void;
    /**
     * Reduce scale level
     */
    zoomOut(scale?: number, opts?: ZoomOptions): void;
    /**
     * Change the scale level so that the content fits inside the container
     */
    zoomToFit(opts?: ZoomOptions): void;
    /**
     * Change the scale level so that the content covers the container
     */
    zoomToCover(opts?: ZoomOptions): void;
    /**
     * Change the scale level so that the content has full width and height (e.g, on a 1-to-1 scale)
     */
    zoomToFull(opts?: ZoomOptions): void;
    /**
     * Change the scale level to maximum
     */
    zoomToMax(opts?: ZoomOptions): void;
    /**
     * Toggle `full` scale level: `fit` -> `full` -> `fit`
     */
    toggleZoom(opts?: ZoomOptions): void;
    /**
     * Toggle scale level: `fit` -> `max` -> `fit`
     */
    toggleMax(opts?: ZoomOptions): void;
    /**
     * Toggle scale level: `fit` -> `cover` -> `fit`
     */
    toggleCover(opts?: ZoomOptions): void;
    /**
     * Iterate scale level: `fit` -> `full` -> `max` -> `fit`
     */
    iterateZoom(opts?: ZoomOptions): void;
    /**
     * Scale the content to a specific step or level.
     * Note: Origin `[0,0]` is in the center, because content has CSS `transform-origin: center center;`
     */
    zoomTo(zoomLevel?: number | "fit" | "cover" | "full" | "max" | "next", { friction, originX, originY, event, }?: ZoomOptions): void;
    /**
     * Rotate the content counterclockwise
     */
    rotateCCW(): void;
    /**
     * Rotate the content clockwise
     */
    rotateCW(): void;
    /**
     * Flip content horizontally
     */
    flipX(): void;
    /**
     * Flip content vertically
     */
    flipY(): void;
    /**
     * Change the scale level so that the content fits the container horizontally
     */
    fitX(): void;
    /**
     * Change the scale level so that the content fits the container vertically
     */
    fitY(): void;
    /**
     * Toggle full screen mode
     */
    toggleFS(): void;
    /**
     * Get transformation matrix values
     */
    getMatrix(source?: MatrixValues): DOMMatrix;
    /**
     * Reset all transformations AND animate to the original position
     */
    reset(friction?: number): void;
    /**
     * Destroy the instance
     */
    destroy(): void;
}