import { CSSProperties } from 'react';
import { default as default_2 } from 'react';
import { JSX } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { Selection as Selection_2 } from 'd3-selection';
import { ZoomBehavior } from 'd3-zoom';

export declare const Background: ({ id, size, minSize, maxZoom, gap, zoomTransform, className, minOpacity, maxOpacity, elementColor, backgroundColor }: BackgroundProps) => JSX_2.Element;

export declare interface BackgroundProps {
    id?: string;
    disable?: boolean;
    size?: number;
    minSize?: number;
    maxZoom?: number;
    gap?: number;
    zoomTransform?: {
        scale: number;
        translateX: number;
        translateY: number;
    };
    className?: string;
    minOpacity?: number;
    maxOpacity?: number;
    elementColor?: string;
    backgroundColor?: CSSProperties["backgroundColor"];
}

declare interface CanvasState_2 {
    canvasNode: Selection_2<SVGSVGElement | HTMLDivElement | null, unknown, null, undefined>;
    zoomNode: Selection_2<SVGGElement | HTMLDivElement | null, unknown, null, undefined>;
    currentPosition: {
        k: number;
        x: number;
        y: number;
    };
    d3Zoom: ZoomBehavior<HTMLDivElement | SVGAElement, unknown>;
}
export { CanvasState_2 as CanvasState }

export declare const COMPONENT_POSITIONS: {
    TOP_LEFT: string;
    TOP_RIGHT: string;
    BOTTOM_LEFT: string;
    BOTTOM_CENTER: string;
};

export declare const EventBlocker: React.FC<EventBlockerProps>;

export declare interface EventBlockerProps {
    children: React.ReactNode;
    shouldBlockScroll?: boolean;
    shouldBlockZoom?: boolean;
    shouldBlockPan?: boolean;
}

export declare const ReactInfiniteCanvas: default_2.FC<ReactInfiniteCanvasProps>;

export declare type ReactInfiniteCanvasHandle = {
    scrollNodeToCenter: ({ nodeElement, offset, scale, shouldUpdateMaxScale, maxScale, transitionDuration }: {
        nodeElement?: HTMLElement;
        offset?: {
            x: number;
            y: number;
        };
        scale?: number;
        shouldUpdateMaxScale?: boolean;
        maxScale?: number;
        transitionDuration?: number;
    }) => void;
    scrollNodeHandler: ({ nodeElement, offset, scale, shouldUpdateMaxScale, maxScale, transitionDuration, position }: {
        nodeElement?: HTMLElement;
        offset?: {
            x: number;
            y: number;
        };
        scale?: number;
        shouldUpdateMaxScale?: boolean;
        maxScale?: number;
        transitionDuration?: number;
        position?: string;
    }) => void;
    scrollContentHorizontallyCenter: ({ offset, transitionDuration }: {
        offset?: number;
        transitionDuration?: number;
    }) => void;
    fitContentToView: ({ duration, offset, scale, maxZoomLimit }: {
        duration?: number;
        offset?: {
            x: number;
            y: number;
        };
        scale?: number;
        maxZoomLimit?: number;
    }) => void;
    getCanvasState: () => CanvasState_2;
};

export declare interface ReactInfiniteCanvasProps {
    children: JSX.Element;
    className?: string;
    ref?: default_2.ForwardedRef<ReactInfiniteCanvasHandle>;
    minZoom?: number;
    maxZoom?: number;
    panOnScroll?: boolean;
    scrollBarConfig?: {
        renderScrollBar?: boolean;
        startingPosition?: {
            x: number;
            y: number;
        };
        offset?: {
            x: number;
            y: number;
        };
        color?: string;
        thickness?: string;
        minSize?: string;
    };
    backgroundConfig?: BackgroundProps;
    customComponents?: Array<{
        component: JSX.Element;
        position?: string;
        offset?: {
            x: number;
            y: number;
        };
        overlap?: boolean;
        className?: string;
    }>;
    onCanvasMount?: (functions: ReactInfiniteCanvasHandle) => void;
    onZoom?: (event: Event) => void;
}

export declare const SCROLL_NODE_POSITIONS: {
    TOP_CENTER: string;
    BOTTOM_RIGHT: string;
    CENTER_LEFT: string;
    CENTER_RIGHT: string;
    CENTER_CENTER: string;
    TOP_LEFT: string;
    TOP_RIGHT: string;
    BOTTOM_LEFT: string;
    BOTTOM_CENTER: string;
};

export { }