import { default as React, ReactNode } from 'react';
import { IGraphNode, IPoint, IViewport } from '../../lib/graph';

export interface GraphCanvasHandle {
    /** Current pan and zoom. */
    getViewport: () => IViewport;
    /** Jump to a viewport. */
    setViewport: (viewport: IViewport) => void;
    /** Frame the given nodes, or clear the viewport when the list is empty. */
    fitTo: (nodes: IGraphNode[], padding?: number) => void;
    /** Multiply the zoom about the centre of the element. */
    zoomBy: (factor: number) => void;
    /** Convert a client (page) point into graph space. */
    clientToGraph: (client: IPoint) => IPoint;
    /** The element's pixel size. A minimap needs this to draw its indicator. */
    getSize: () => {
        width: number;
        height: number;
    };
    /** Move keyboard focus to the canvas. */
    focus: () => void;
}
export interface GraphCanvasProps {
    /**
     * Content rendered in graph space. Position children with `GraphNode`, or
     * with your own absolutely-positioned elements in graph coordinates.
     */
    children?: ReactNode;
    /**
     * Content rendered in screen space, above the graph and unaffected by pan or
     * zoom — toolbars, a minimap, a legend.
     */
    overlay?: ReactNode;
    /**
     * Take control of pan and zoom. Omit it and the canvas manages its own,
     * which is what most callers want: you should not have to own a viewport
     * just to draw a graph.
     */
    viewport?: IViewport;
    /** Starting viewport when uncontrolled. Defaults to origin at 1× zoom. */
    defaultViewport?: IViewport;
    /** Called whenever pan or zoom changes, controlled or not. */
    onViewportChange?: (viewport: IViewport) => void;
    /**
     * Called on mount and whenever the element resizes, with its pixel size.
     *
     * Pass this to a {@link GraphMiniMap} as `canvasSize` — the indicator cannot
     * be drawn without knowing how much of the graph is on screen.
     */
    onSizeChange?: (size: {
        width: number;
        height: number;
    }) => void;
    /**
     * Called with a graph-space point when empty canvas is clicked. Use it to
     * clear selection, or to place a node at the click.
     */
    onCanvasClick?: (point: IPoint, event: React.MouseEvent) => void;
    /** Called with a graph-space point when empty canvas is double-clicked. */
    onCanvasDoubleClick?: (point: IPoint, event: React.MouseEvent) => void;
    /** Called with a graph-space point on right-click of empty canvas. */
    onCanvasContextMenu?: (point: IPoint, event: React.MouseEvent) => void;
    /**
     * Called when something is dropped on the canvas, with the graph-space point
     * under the cursor. Pair with `NodePalette` for drag-to-create.
     */
    onDrop?: (point: IPoint, event: React.DragEvent) => void;
    /** Show the dot grid. Defaults to `true`. */
    grid?: boolean;
    /** Grid spacing in graph units. Defaults to `24`. */
    gridSize?: number;
    /** Smallest allowed zoom. Defaults to `0.1`. */
    minScale?: number;
    /** Largest allowed zoom. Defaults to `4`. */
    maxScale?: number;
    /** Allow panning by dragging empty canvas. Defaults to `true`. */
    pannable?: boolean;
    /** Allow zooming with the wheel or trackpad pinch. Defaults to `true`. */
    zoomable?: boolean;
    /** Accessible label for the canvas region. Defaults to `"Graph canvas"`. */
    'aria-label'?: string;
    /** Extra classes merged onto the root element. */
    className?: string;
}
/**
 * An infinite, pannable, zoomable field to draw a graph on.
 *
 * The canvas owns exactly one thing: the mapping between screen pixels and
 * graph space. It knows nothing about nodes, edges, or what any of it means —
 * children are rendered inside a transformed layer, so anything positioned in
 * graph coordinates lands in the right place.
 *
 * Pan by dragging empty space or with the middle mouse button; zoom with the
 * wheel or a trackpad pinch, always anchored to the cursor. Space-drag pans
 * from anywhere, including over a node.
 *
 * Viewport state is internal by default. Pass `viewport` to take control.
 *
 * @example
 * ```tsx
 * <GraphCanvas onDrop={(point) => addNodeAt(point)}>
 *   {nodes.map((node) => (
 *     <GraphNode key={node.id} node={node} onMove={move}>
 *       {node.label}
 *     </GraphNode>
 *   ))}
 * </GraphCanvas>
 * ```
 */
export declare const GraphCanvas: React.ForwardRefExoticComponent<GraphCanvasProps & React.RefAttributes<GraphCanvasHandle>>;