import { type Ref } from 'vue';
import { Template } from '@bluepic/types';
import 'zoompinch/style.css';
export type Transform = {
    x: number;
    y: number;
    scale: number;
    rotate: number;
};
type __VLS_Props = {
    templateId: string;
    embedApiBaseUrl: string;
    env: 'prod' | 'dev';
    cloudflarePagesHostname: string;
    bxCoreVersion?: string;
    asyncSerial?: boolean;
    resolution?: number;
    webgl?: boolean;
    fonts?: {
        name: string;
        src: string;
    }[];
    zoomAndPan?: boolean;
    baseSerial?: Template.Serial;
    watermark?: string;
    scrollbars?: boolean;
    offset: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
};
declare function getTransformToFocusFrame(frameX: number, frameY: number): {
    rotate: number;
    scale: number;
    x: number;
    y: number;
} | undefined;
declare function calcCurrFocusedFrame(): number[] | undefined;
declare function applyTranformBasedOnFrame(frameX: number, frameY: number): void;
type __VLS_PublicProps = __VLS_Props & {
    'data': {
        [k: string]: unknown;
    };
    'serial'?: Template.Serial;
    'ready'?: boolean;
};
declare var __VLS_48: {
    composePoint: any;
};
type __VLS_Slots = {} & {
    matrix?: (props: typeof __VLS_48) => any;
};
declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
    aspectRatio: import("vue").ComputedRef<number | undefined>;
    aspectRatioSizingSide: import("vue").ComputedRef<"width" | "height" | undefined>;
    bluepicLiveTemplateRootWidth: import("vue").ShallowRef<number, number>;
    bluepicLiveTemplateRootHeight: import("vue").ShallowRef<number, number>;
    bluepicEmbeddedRef: Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
        templateId: string;
        embedApiBaseUrl: string;
        env: "prod" | "dev";
        cloudflarePagesHostname: string;
        bxCoreVersion?: string;
        data?: {
            [k: string]: any;
        };
        fonts?: {
            name: string;
            src: string;
        }[];
        webgl?: boolean;
        resolution?: number;
        asyncSerial?: boolean;
        baseSerial?: Template.Serial;
    }> & Readonly<{
        onError?: ((...args: any[]) => any) | undefined;
        "onUpdate:data"?: ((...args: any[]) => any) | undefined;
        "onUpdate:ready"?: ((...args: any[]) => any) | undefined;
        "onUpdate:serial"?: ((...args: any[]) => any) | undefined;
        "onUpdate:globalScope"?: ((...args: any[]) => any) | undefined;
    }>, {
        renderWebGL: (options: {
            type: "image/png" | "image/jpeg" | "image/jpge" | "image/webp";
            resolution?: number;
            quality?: number;
            area?: {
                x: number;
                y: number;
                width: number;
                height: number;
            };
        }) => Promise<Blob>;
        webglSupported: () => Promise<boolean>;
        resolveData: () => Promise<{
            [k: string]: any;
        } | undefined>;
        controller: Ref<import("../util/bluepicEmbed.js").default | undefined, import("../util/bluepicEmbed.js").default | undefined>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
        error: (...args: any[]) => void;
        "update:data": (...args: any[]) => void;
        "update:ready": (...args: any[]) => void;
        "update:serial": (...args: any[]) => void;
        "update:globalScope": (...args: any[]) => void;
    }, import("vue").PublicProps, {
        bxCoreVersion: string;
        data: {
            [k: string]: any;
        };
        fonts: {
            name: string;
            src: string;
        }[];
        webgl: boolean;
        resolution: number;
        asyncSerial: boolean;
    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly<{
        templateId: string;
        embedApiBaseUrl: string;
        env: "prod" | "dev";
        cloudflarePagesHostname: string;
        bxCoreVersion?: string;
        data?: {
            [k: string]: any;
        };
        fonts?: {
            name: string;
            src: string;
        }[];
        webgl?: boolean;
        resolution?: number;
        asyncSerial?: boolean;
        baseSerial?: Template.Serial;
    }> & Readonly<{
        onError?: ((...args: any[]) => any) | undefined;
        "onUpdate:data"?: ((...args: any[]) => any) | undefined;
        "onUpdate:ready"?: ((...args: any[]) => any) | undefined;
        "onUpdate:serial"?: ((...args: any[]) => any) | undefined;
        "onUpdate:globalScope"?: ((...args: any[]) => any) | undefined;
    }>, {
        renderWebGL: (options: {
            type: "image/png" | "image/jpeg" | "image/jpge" | "image/webp";
            resolution?: number;
            quality?: number;
            area?: {
                x: number;
                y: number;
                width: number;
                height: number;
            };
        }) => Promise<Blob>;
        webglSupported: () => Promise<boolean>;
        resolveData: () => Promise<{
            [k: string]: any;
        } | undefined>;
        controller: Ref<import("../util/bluepicEmbed.js").default | undefined, import("../util/bluepicEmbed.js").default | undefined>;
    }, {}, {}, {}, {
        bxCoreVersion: string;
        data: {
            [k: string]: any;
        };
        fonts: {
            name: string;
            src: string;
        }[];
        webgl: boolean;
        resolution: number;
        asyncSerial: boolean;
    }> | undefined, import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
        templateId: string;
        embedApiBaseUrl: string;
        env: "prod" | "dev";
        cloudflarePagesHostname: string;
        bxCoreVersion?: string;
        data?: {
            [k: string]: any;
        };
        fonts?: {
            name: string;
            src: string;
        }[];
        webgl?: boolean;
        resolution?: number;
        asyncSerial?: boolean;
        baseSerial?: Template.Serial;
    }> & Readonly<{
        onError?: ((...args: any[]) => any) | undefined;
        "onUpdate:data"?: ((...args: any[]) => any) | undefined;
        "onUpdate:ready"?: ((...args: any[]) => any) | undefined;
        "onUpdate:serial"?: ((...args: any[]) => any) | undefined;
        "onUpdate:globalScope"?: ((...args: any[]) => any) | undefined;
    }>, {
        renderWebGL: (options: {
            type: "image/png" | "image/jpeg" | "image/jpge" | "image/webp";
            resolution?: number;
            quality?: number;
            area?: {
                x: number;
                y: number;
                width: number;
                height: number;
            };
        }) => Promise<Blob>;
        webglSupported: () => Promise<boolean>;
        resolveData: () => Promise<{
            [k: string]: any;
        } | undefined>;
        controller: Ref<import("../util/bluepicEmbed.js").default | undefined, import("../util/bluepicEmbed.js").default | undefined>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
        error: (...args: any[]) => void;
        "update:data": (...args: any[]) => void;
        "update:ready": (...args: any[]) => void;
        "update:serial": (...args: any[]) => void;
        "update:globalScope": (...args: any[]) => void;
    }, import("vue").PublicProps, {
        bxCoreVersion: string;
        data: {
            [k: string]: any;
        };
        fonts: {
            name: string;
            src: string;
        }[];
        webgl: boolean;
        resolution: number;
        asyncSerial: boolean;
    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly<{
        templateId: string;
        embedApiBaseUrl: string;
        env: "prod" | "dev";
        cloudflarePagesHostname: string;
        bxCoreVersion?: string;
        data?: {
            [k: string]: any;
        };
        fonts?: {
            name: string;
            src: string;
        }[];
        webgl?: boolean;
        resolution?: number;
        asyncSerial?: boolean;
        baseSerial?: Template.Serial;
    }> & Readonly<{
        onError?: ((...args: any[]) => any) | undefined;
        "onUpdate:data"?: ((...args: any[]) => any) | undefined;
        "onUpdate:ready"?: ((...args: any[]) => any) | undefined;
        "onUpdate:serial"?: ((...args: any[]) => any) | undefined;
        "onUpdate:globalScope"?: ((...args: any[]) => any) | undefined;
    }>, {
        renderWebGL: (options: {
            type: "image/png" | "image/jpeg" | "image/jpge" | "image/webp";
            resolution?: number;
            quality?: number;
            area?: {
                x: number;
                y: number;
                width: number;
                height: number;
            };
        }) => Promise<Blob>;
        webglSupported: () => Promise<boolean>;
        resolveData: () => Promise<{
            [k: string]: any;
        } | undefined>;
        controller: Ref<import("../util/bluepicEmbed.js").default | undefined, import("../util/bluepicEmbed.js").default | undefined>;
    }, {}, {}, {}, {
        bxCoreVersion: string;
        data: {
            [k: string]: any;
        };
        fonts: {
            name: string;
            src: string;
        }[];
        webgl: boolean;
        resolution: number;
        asyncSerial: boolean;
    }> | undefined>;
    zoompinchRef: Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
        transform: {
            type: ObjectConstructor;
            required: false;
            default: () => {
                x: number;
                y: number;
                scale: number;
                rotate: number;
            };
        };
        width: {
            type: NumberConstructor;
            required: true;
        };
        height: {
            type: NumberConstructor;
            required: true;
        };
        offset: {
            type: ObjectConstructor;
            required: false;
            default: () => {
                left: number;
                top: number;
                right: number;
                bottom: number;
            };
        };
        maxScale: {
            type: NumberConstructor;
            required: false;
            default: number;
        };
        minScale: {
            type: NumberConstructor;
            required: false;
            default: number;
        };
        bounds: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        rotation: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        mouse: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        wheel: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        touch: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        gesture: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
    }>> & {
        "onUpdate:transform"?: ((...args: any[]) => any) | undefined;
        onDragGestureStart?: ((...args: any[]) => any) | undefined;
        onDragGestureEnd?: ((...args: any[]) => any) | undefined;
    }, {
        props: any;
        emit: (event: "update:transform" | "dragGestureStart" | "dragGestureEnd", ...args: any[]) => void;
        zoompinchRef: import("vue").Ref<HTMLElement | undefined>;
        canvasRef: import("vue").Ref<HTMLElement | undefined>;
        matrixRef: import("vue").Ref<HTMLElement | undefined>;
        canvasNaturalWidth: import("vue").Ref<any>;
        canvasNaturalHeight: import("vue").Ref<any>;
        offset: import("vue").Ref<any>;
        rotationEnabled: import("vue").ComputedRef<any>;
        renderingTranslate: import("vue").ComputedRef<number[]>;
        renderingRotate: import("vue").ComputedRef<number>;
        renderingScale: import("vue").ComputedRef<number>;
        composePoint: (x: number, y: number, currScale?: number | undefined, currTranslate?: [number, number] | undefined, currRotate?: number | undefined) => [number, number];
        handleWheel: (event: WheelEvent) => void;
        handleMousedown: (event: MouseEvent) => void;
        handleMousemove: (event: MouseEvent) => void;
        handleMouseup: (event: MouseEvent) => void;
        handleTouchstart: (event: TouchEvent) => void;
        handleTouchmove: (event: TouchEvent) => void;
        handleTouchend: (event: TouchEvent) => void;
        handleGesturestart: (event: UIEvent) => void;
        handleGesturechange: (event: any) => void;
        handleGestureend: (event: any) => void;
        applyTransform: (newScale: number, wrapperInnerCoords: [number, number], canvasAnchorCoords: [number, number], animate?: boolean) => void;
        rotateCanvas: (x: number, y: number, radians: number) => void;
        compose: (x: number, y: number) => [number, number];
        exposedTransform: import("vue").WritableComputedRef<{
            x: number;
            y: number;
            scale: number;
            rotate: number;
        }>;
        calcProjectionTranslate: (newScale: number, wrapperPosition: [number, number], canvasPosition: [number, number], virtualRotate?: number | undefined) => [number, number];
        clientCoordinatesToCanvasCoordinates: (clientX: number, clientY: number) => [number, number];
        normalizeMatrixCoordinates: (clientX: number, clientY: number) => [number, number];
        transitionEnabled: import("vue").Ref<boolean>;
        transitionDuration: import("vue").Ref<number>;
        wrapperX: import("vue").Ref<number>;
        wrapperY: import("vue").Ref<number>;
        wrapperWidth: import("vue").Ref<number>;
        wrapperHeight: import("vue").Ref<number>;
        wheelGestures: Readonly<{
            on: <EK extends "wheel">(type: EK, listener: import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").EventListener<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesEventMap[EK]>) => import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").Off;
            off: <EK_1 extends "wheel">(type: EK_1, listener: import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").EventListener<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesEventMap[EK_1]>) => void;
            observe: (target: EventTarget) => () => void;
            unobserve: (target: EventTarget) => void;
            disconnect: () => void;
            feedWheel: (wheelEvents: import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelEventData | import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelEventData[]) => void;
            updateOptions: (newOptions?: Partial<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesConfig>) => import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesConfig;
        }>;
        touchmoveSinceTouchstart: boolean;
        touchstartPoint: {
            x: number;
            y: number;
        } | null;
        touchmoveMinDistance: number;
        touchstartProxy: (event: TouchEvent) => void;
        touchmoveProxy: (event: TouchEvent) => void;
        touchendProxy: (event: TouchEvent) => void;
        mousemoveSinceMousedown: boolean;
        mousestartPoint: {
            x: number;
            y: number;
        } | null;
        mousemoveMinDistance: number;
        mousedownProxy: (event: MouseEvent) => void;
        mousemoveProxy: (event: MouseEvent) => void;
        mouseupProxy: (event: MouseEvent) => void;
        isTouchDevice: () => boolean;
        gestureEnabled: import("vue").ComputedRef<any>;
        gesturestartProxy: (event: any) => void;
        gesturechangeProxy: (event: any) => void;
        gestureendProxy: (event: any) => void;
        wrapperBounds: import("vue").ComputedRef<{
            x: number;
            y: number;
            width: number;
            height: number;
        }>;
        readonly radiansToDegrees: typeof import("node_modules/zoompinch/lib/controllers/helpers.js").radiansToDegrees;
    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:transform" | "dragGestureStart" | "dragGestureEnd")[], import("vue").PublicProps, {
        transform: Record<string, any>;
        offset: Record<string, any>;
        maxScale: number;
        minScale: number;
        bounds: boolean;
        rotation: boolean;
        mouse: boolean;
        wheel: boolean;
        touch: boolean;
        gesture: boolean;
    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly<import("vue").ExtractPropTypes<{
        transform: {
            type: ObjectConstructor;
            required: false;
            default: () => {
                x: number;
                y: number;
                scale: number;
                rotate: number;
            };
        };
        width: {
            type: NumberConstructor;
            required: true;
        };
        height: {
            type: NumberConstructor;
            required: true;
        };
        offset: {
            type: ObjectConstructor;
            required: false;
            default: () => {
                left: number;
                top: number;
                right: number;
                bottom: number;
            };
        };
        maxScale: {
            type: NumberConstructor;
            required: false;
            default: number;
        };
        minScale: {
            type: NumberConstructor;
            required: false;
            default: number;
        };
        bounds: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        rotation: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        mouse: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        wheel: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        touch: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        gesture: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
    }>> & {
        "onUpdate:transform"?: ((...args: any[]) => any) | undefined;
        onDragGestureStart?: ((...args: any[]) => any) | undefined;
        onDragGestureEnd?: ((...args: any[]) => any) | undefined;
    }, {
        props: any;
        emit: (event: "update:transform" | "dragGestureStart" | "dragGestureEnd", ...args: any[]) => void;
        zoompinchRef: import("vue").Ref<HTMLElement | undefined>;
        canvasRef: import("vue").Ref<HTMLElement | undefined>;
        matrixRef: import("vue").Ref<HTMLElement | undefined>;
        canvasNaturalWidth: import("vue").Ref<any>;
        canvasNaturalHeight: import("vue").Ref<any>;
        offset: import("vue").Ref<any>;
        rotationEnabled: import("vue").ComputedRef<any>;
        renderingTranslate: import("vue").ComputedRef<number[]>;
        renderingRotate: import("vue").ComputedRef<number>;
        renderingScale: import("vue").ComputedRef<number>;
        composePoint: (x: number, y: number, currScale?: number | undefined, currTranslate?: [number, number] | undefined, currRotate?: number | undefined) => [number, number];
        handleWheel: (event: WheelEvent) => void;
        handleMousedown: (event: MouseEvent) => void;
        handleMousemove: (event: MouseEvent) => void;
        handleMouseup: (event: MouseEvent) => void;
        handleTouchstart: (event: TouchEvent) => void;
        handleTouchmove: (event: TouchEvent) => void;
        handleTouchend: (event: TouchEvent) => void;
        handleGesturestart: (event: UIEvent) => void;
        handleGesturechange: (event: any) => void;
        handleGestureend: (event: any) => void;
        applyTransform: (newScale: number, wrapperInnerCoords: [number, number], canvasAnchorCoords: [number, number], animate?: boolean) => void;
        rotateCanvas: (x: number, y: number, radians: number) => void;
        compose: (x: number, y: number) => [number, number];
        exposedTransform: import("vue").WritableComputedRef<{
            x: number;
            y: number;
            scale: number;
            rotate: number;
        }>;
        calcProjectionTranslate: (newScale: number, wrapperPosition: [number, number], canvasPosition: [number, number], virtualRotate?: number | undefined) => [number, number];
        clientCoordinatesToCanvasCoordinates: (clientX: number, clientY: number) => [number, number];
        normalizeMatrixCoordinates: (clientX: number, clientY: number) => [number, number];
        transitionEnabled: import("vue").Ref<boolean>;
        transitionDuration: import("vue").Ref<number>;
        wrapperX: import("vue").Ref<number>;
        wrapperY: import("vue").Ref<number>;
        wrapperWidth: import("vue").Ref<number>;
        wrapperHeight: import("vue").Ref<number>;
        wheelGestures: Readonly<{
            on: <EK extends "wheel">(type: EK, listener: import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").EventListener<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesEventMap[EK]>) => import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").Off;
            off: <EK_1 extends "wheel">(type: EK_1, listener: import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").EventListener<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesEventMap[EK_1]>) => void;
            observe: (target: EventTarget) => () => void;
            unobserve: (target: EventTarget) => void;
            disconnect: () => void;
            feedWheel: (wheelEvents: import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelEventData | import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelEventData[]) => void;
            updateOptions: (newOptions?: Partial<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesConfig>) => import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesConfig;
        }>;
        touchmoveSinceTouchstart: boolean;
        touchstartPoint: {
            x: number;
            y: number;
        } | null;
        touchmoveMinDistance: number;
        touchstartProxy: (event: TouchEvent) => void;
        touchmoveProxy: (event: TouchEvent) => void;
        touchendProxy: (event: TouchEvent) => void;
        mousemoveSinceMousedown: boolean;
        mousestartPoint: {
            x: number;
            y: number;
        } | null;
        mousemoveMinDistance: number;
        mousedownProxy: (event: MouseEvent) => void;
        mousemoveProxy: (event: MouseEvent) => void;
        mouseupProxy: (event: MouseEvent) => void;
        isTouchDevice: () => boolean;
        gestureEnabled: import("vue").ComputedRef<any>;
        gesturestartProxy: (event: any) => void;
        gesturechangeProxy: (event: any) => void;
        gestureendProxy: (event: any) => void;
        wrapperBounds: import("vue").ComputedRef<{
            x: number;
            y: number;
            width: number;
            height: number;
        }>;
        readonly radiansToDegrees: typeof import("node_modules/zoompinch/lib/controllers/helpers.js").radiansToDegrees;
    }, {}, {}, {}, {
        transform: Record<string, any>;
        offset: Record<string, any>;
        maxScale: number;
        minScale: number;
        bounds: boolean;
        rotation: boolean;
        mouse: boolean;
        wheel: boolean;
        touch: boolean;
        gesture: boolean;
    }> | undefined, import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
        transform: {
            type: ObjectConstructor;
            required: false;
            default: () => {
                x: number;
                y: number;
                scale: number;
                rotate: number;
            };
        };
        width: {
            type: NumberConstructor;
            required: true;
        };
        height: {
            type: NumberConstructor;
            required: true;
        };
        offset: {
            type: ObjectConstructor;
            required: false;
            default: () => {
                left: number;
                top: number;
                right: number;
                bottom: number;
            };
        };
        maxScale: {
            type: NumberConstructor;
            required: false;
            default: number;
        };
        minScale: {
            type: NumberConstructor;
            required: false;
            default: number;
        };
        bounds: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        rotation: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        mouse: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        wheel: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        touch: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        gesture: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
    }>> & {
        "onUpdate:transform"?: ((...args: any[]) => any) | undefined;
        onDragGestureStart?: ((...args: any[]) => any) | undefined;
        onDragGestureEnd?: ((...args: any[]) => any) | undefined;
    }, {
        props: any;
        emit: (event: "update:transform" | "dragGestureStart" | "dragGestureEnd", ...args: any[]) => void;
        zoompinchRef: import("vue").Ref<HTMLElement | undefined>;
        canvasRef: import("vue").Ref<HTMLElement | undefined>;
        matrixRef: import("vue").Ref<HTMLElement | undefined>;
        canvasNaturalWidth: import("vue").Ref<any>;
        canvasNaturalHeight: import("vue").Ref<any>;
        offset: import("vue").Ref<any>;
        rotationEnabled: import("vue").ComputedRef<any>;
        renderingTranslate: import("vue").ComputedRef<number[]>;
        renderingRotate: import("vue").ComputedRef<number>;
        renderingScale: import("vue").ComputedRef<number>;
        composePoint: (x: number, y: number, currScale?: number | undefined, currTranslate?: [number, number] | undefined, currRotate?: number | undefined) => [number, number];
        handleWheel: (event: WheelEvent) => void;
        handleMousedown: (event: MouseEvent) => void;
        handleMousemove: (event: MouseEvent) => void;
        handleMouseup: (event: MouseEvent) => void;
        handleTouchstart: (event: TouchEvent) => void;
        handleTouchmove: (event: TouchEvent) => void;
        handleTouchend: (event: TouchEvent) => void;
        handleGesturestart: (event: UIEvent) => void;
        handleGesturechange: (event: any) => void;
        handleGestureend: (event: any) => void;
        applyTransform: (newScale: number, wrapperInnerCoords: [number, number], canvasAnchorCoords: [number, number], animate?: boolean) => void;
        rotateCanvas: (x: number, y: number, radians: number) => void;
        compose: (x: number, y: number) => [number, number];
        exposedTransform: import("vue").WritableComputedRef<{
            x: number;
            y: number;
            scale: number;
            rotate: number;
        }>;
        calcProjectionTranslate: (newScale: number, wrapperPosition: [number, number], canvasPosition: [number, number], virtualRotate?: number | undefined) => [number, number];
        clientCoordinatesToCanvasCoordinates: (clientX: number, clientY: number) => [number, number];
        normalizeMatrixCoordinates: (clientX: number, clientY: number) => [number, number];
        transitionEnabled: import("vue").Ref<boolean>;
        transitionDuration: import("vue").Ref<number>;
        wrapperX: import("vue").Ref<number>;
        wrapperY: import("vue").Ref<number>;
        wrapperWidth: import("vue").Ref<number>;
        wrapperHeight: import("vue").Ref<number>;
        wheelGestures: Readonly<{
            on: <EK extends "wheel">(type: EK, listener: import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").EventListener<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesEventMap[EK]>) => import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").Off;
            off: <EK_1 extends "wheel">(type: EK_1, listener: import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").EventListener<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesEventMap[EK_1]>) => void;
            observe: (target: EventTarget) => () => void;
            unobserve: (target: EventTarget) => void;
            disconnect: () => void;
            feedWheel: (wheelEvents: import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelEventData | import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelEventData[]) => void;
            updateOptions: (newOptions?: Partial<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesConfig>) => import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesConfig;
        }>;
        touchmoveSinceTouchstart: boolean;
        touchstartPoint: {
            x: number;
            y: number;
        } | null;
        touchmoveMinDistance: number;
        touchstartProxy: (event: TouchEvent) => void;
        touchmoveProxy: (event: TouchEvent) => void;
        touchendProxy: (event: TouchEvent) => void;
        mousemoveSinceMousedown: boolean;
        mousestartPoint: {
            x: number;
            y: number;
        } | null;
        mousemoveMinDistance: number;
        mousedownProxy: (event: MouseEvent) => void;
        mousemoveProxy: (event: MouseEvent) => void;
        mouseupProxy: (event: MouseEvent) => void;
        isTouchDevice: () => boolean;
        gestureEnabled: import("vue").ComputedRef<any>;
        gesturestartProxy: (event: any) => void;
        gesturechangeProxy: (event: any) => void;
        gestureendProxy: (event: any) => void;
        wrapperBounds: import("vue").ComputedRef<{
            x: number;
            y: number;
            width: number;
            height: number;
        }>;
        readonly radiansToDegrees: typeof import("node_modules/zoompinch/lib/controllers/helpers.js").radiansToDegrees;
    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:transform" | "dragGestureStart" | "dragGestureEnd")[], import("vue").PublicProps, {
        transform: Record<string, any>;
        offset: Record<string, any>;
        maxScale: number;
        minScale: number;
        bounds: boolean;
        rotation: boolean;
        mouse: boolean;
        wheel: boolean;
        touch: boolean;
        gesture: boolean;
    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly<import("vue").ExtractPropTypes<{
        transform: {
            type: ObjectConstructor;
            required: false;
            default: () => {
                x: number;
                y: number;
                scale: number;
                rotate: number;
            };
        };
        width: {
            type: NumberConstructor;
            required: true;
        };
        height: {
            type: NumberConstructor;
            required: true;
        };
        offset: {
            type: ObjectConstructor;
            required: false;
            default: () => {
                left: number;
                top: number;
                right: number;
                bottom: number;
            };
        };
        maxScale: {
            type: NumberConstructor;
            required: false;
            default: number;
        };
        minScale: {
            type: NumberConstructor;
            required: false;
            default: number;
        };
        bounds: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        rotation: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        mouse: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        wheel: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        touch: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
        gesture: {
            type: BooleanConstructor;
            required: false;
            default: boolean;
        };
    }>> & {
        "onUpdate:transform"?: ((...args: any[]) => any) | undefined;
        onDragGestureStart?: ((...args: any[]) => any) | undefined;
        onDragGestureEnd?: ((...args: any[]) => any) | undefined;
    }, {
        props: any;
        emit: (event: "update:transform" | "dragGestureStart" | "dragGestureEnd", ...args: any[]) => void;
        zoompinchRef: import("vue").Ref<HTMLElement | undefined>;
        canvasRef: import("vue").Ref<HTMLElement | undefined>;
        matrixRef: import("vue").Ref<HTMLElement | undefined>;
        canvasNaturalWidth: import("vue").Ref<any>;
        canvasNaturalHeight: import("vue").Ref<any>;
        offset: import("vue").Ref<any>;
        rotationEnabled: import("vue").ComputedRef<any>;
        renderingTranslate: import("vue").ComputedRef<number[]>;
        renderingRotate: import("vue").ComputedRef<number>;
        renderingScale: import("vue").ComputedRef<number>;
        composePoint: (x: number, y: number, currScale?: number | undefined, currTranslate?: [number, number] | undefined, currRotate?: number | undefined) => [number, number];
        handleWheel: (event: WheelEvent) => void;
        handleMousedown: (event: MouseEvent) => void;
        handleMousemove: (event: MouseEvent) => void;
        handleMouseup: (event: MouseEvent) => void;
        handleTouchstart: (event: TouchEvent) => void;
        handleTouchmove: (event: TouchEvent) => void;
        handleTouchend: (event: TouchEvent) => void;
        handleGesturestart: (event: UIEvent) => void;
        handleGesturechange: (event: any) => void;
        handleGestureend: (event: any) => void;
        applyTransform: (newScale: number, wrapperInnerCoords: [number, number], canvasAnchorCoords: [number, number], animate?: boolean) => void;
        rotateCanvas: (x: number, y: number, radians: number) => void;
        compose: (x: number, y: number) => [number, number];
        exposedTransform: import("vue").WritableComputedRef<{
            x: number;
            y: number;
            scale: number;
            rotate: number;
        }>;
        calcProjectionTranslate: (newScale: number, wrapperPosition: [number, number], canvasPosition: [number, number], virtualRotate?: number | undefined) => [number, number];
        clientCoordinatesToCanvasCoordinates: (clientX: number, clientY: number) => [number, number];
        normalizeMatrixCoordinates: (clientX: number, clientY: number) => [number, number];
        transitionEnabled: import("vue").Ref<boolean>;
        transitionDuration: import("vue").Ref<number>;
        wrapperX: import("vue").Ref<number>;
        wrapperY: import("vue").Ref<number>;
        wrapperWidth: import("vue").Ref<number>;
        wrapperHeight: import("vue").Ref<number>;
        wheelGestures: Readonly<{
            on: <EK extends "wheel">(type: EK, listener: import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").EventListener<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesEventMap[EK]>) => import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").Off;
            off: <EK_1 extends "wheel">(type: EK_1, listener: import("node_modules/zoompinch/lib/controllers/wheel-gestures/events/EventBus.js").EventListener<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesEventMap[EK_1]>) => void;
            observe: (target: EventTarget) => () => void;
            unobserve: (target: EventTarget) => void;
            disconnect: () => void;
            feedWheel: (wheelEvents: import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelEventData | import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelEventData[]) => void;
            updateOptions: (newOptions?: Partial<import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesConfig>) => import("node_modules/zoompinch/lib/controllers/wheel-gestures/index.js").WheelGesturesConfig;
        }>;
        touchmoveSinceTouchstart: boolean;
        touchstartPoint: {
            x: number;
            y: number;
        } | null;
        touchmoveMinDistance: number;
        touchstartProxy: (event: TouchEvent) => void;
        touchmoveProxy: (event: TouchEvent) => void;
        touchendProxy: (event: TouchEvent) => void;
        mousemoveSinceMousedown: boolean;
        mousestartPoint: {
            x: number;
            y: number;
        } | null;
        mousemoveMinDistance: number;
        mousedownProxy: (event: MouseEvent) => void;
        mousemoveProxy: (event: MouseEvent) => void;
        mouseupProxy: (event: MouseEvent) => void;
        isTouchDevice: () => boolean;
        gestureEnabled: import("vue").ComputedRef<any>;
        gesturestartProxy: (event: any) => void;
        gesturechangeProxy: (event: any) => void;
        gestureendProxy: (event: any) => void;
        wrapperBounds: import("vue").ComputedRef<{
            x: number;
            y: number;
            width: number;
            height: number;
        }>;
        readonly radiansToDegrees: typeof import("node_modules/zoompinch/lib/controllers/helpers.js").radiansToDegrees;
    }, {}, {}, {}, {
        transform: Record<string, any>;
        offset: Record<string, any>;
        maxScale: number;
        minScale: number;
        bounds: boolean;
        rotation: boolean;
        mouse: boolean;
        wheel: boolean;
        touch: boolean;
        gesture: boolean;
    }> | undefined>;
    isMultiFrame: import("vue").ComputedRef<boolean>;
    ready: import("vue").ModelRef<boolean | undefined, string, boolean | undefined, boolean | undefined>;
    transform: Ref<{
        x: number;
        y: number;
        scale: number;
        rotate: number;
    }, Transform | {
        x: number;
        y: number;
        scale: number;
        rotate: number;
    }>;
    innerScroll: import("vue").ComputedRef<[number, number] | undefined>;
    focusedFrame: Ref<[number, number] | undefined, [number, number] | undefined>;
    calcCurrFocusedFrame: typeof calcCurrFocusedFrame;
    getTransformToFocusFrame: typeof getTransformToFocusFrame;
    applyTranformBasedOnFrame: typeof applyTranformBasedOnFrame;
    closestFrame: import("vue").ComputedRef<{
        x: number;
        y: number;
    } | undefined>;
    globalScope: Ref<{
        [k: string]: unknown;
    } | undefined, {
        [k: string]: unknown;
    } | undefined>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
    "update:data": (value: {
        [k: string]: unknown;
    }) => any;
    "update:ready": (value: boolean | undefined) => any;
    "update:serial": (value: Template.Serial | undefined) => any;
    "matrix-click": (args_0: {
        x: number;
        y: number;
    }) => any;
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
    "onUpdate:data"?: ((value: {
        [k: string]: unknown;
    }) => any) | undefined;
    "onUpdate:ready"?: ((value: boolean | undefined) => any) | undefined;
    "onUpdate:serial"?: ((value: Template.Serial | undefined) => any) | undefined;
    "onMatrix-click"?: ((args_0: {
        x: number;
        y: number;
    }) => any) | undefined;
}>, {
    zoomAndPan: boolean;
    scrollbars: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
export default _default;
type __VLS_WithSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};
