@amit.rajput/react-infinite-canvas/dist/main.d.ts

An Infinite Canvas Component for React where you can place your component anywhere on the canvas with zoom in, zoom out and panning functionality. It also supports custom components to control the canvas.

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;
    zoomConfig?: {
        delta: number;
    };
}

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 { }