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

/**
 * How an edge gets from one node to the other.
 *
 * - `bezier` — a smooth curve. The default; reads well for dense graphs.
 * - `smoothstep` — right angles with rounded corners, for flowcharts.
 * - `straight` — a direct line.
 */
export type EdgeRouting = 'bezier' | 'smoothstep' | 'straight';
export interface GraphEdgeProps {
    /** The edge to render. */
    edge: IGraphEdge;
    /** The node the edge leaves. */
    source: IGraphNode;
    /** The node the edge enters. */
    target: IGraphNode;
    /** Path shape. Defaults to `"bezier"`. */
    routing?: EdgeRouting;
    /** Draw as selected. */
    selected?: boolean;
    /** Draw an arrowhead at the target end. Defaults to `true`. */
    arrow?: boolean;
    /** Called on click. The wide invisible hit area makes this practical. */
    onSelect?: (id: string, event: React.MouseEvent) => void;
    /** Called on right-click, with the client point for a context menu. */
    onContextMenu?: (id: string, point: IPoint, event: React.MouseEvent) => void;
    /** Extra classes merged onto the visible path. */
    className?: string;
}
/** The SVG path for a pair of points and the sides they leave from. */
export declare const edgePath: (from: IPoint, to: IPoint, fromPort: GraphPort, routing: EdgeRouting) => string;
/**
 * A directed edge between two nodes, rendered as an SVG path.
 *
 * Which sides the edge leaves and enters is worked out from the nodes'
 * relative positions, so a node needs no handle configuration to be
 * connectable — move a node and the attachment points follow.
 *
 * Render inside {@link GraphEdgeLayer}, which provides the SVG surface and the
 * arrowhead marker.
 *
 * @example
 * ```tsx
 * <GraphEdgeLayer>
 *   {edges.map((edge) => (
 *     <GraphEdge
 *       key={edge.id}
 *       edge={edge}
 *       source={byId[edge.source]}
 *       target={byId[edge.target]}
 *       onSelect={setSelectedEdge}
 *     />
 *   ))}
 * </GraphEdgeLayer>
 * ```
 */
export declare const GraphEdge: ({ edge, source, target, routing, selected, arrow, onSelect, onContextMenu, className, }: GraphEdgeProps) => import("react/jsx-runtime").JSX.Element;
export interface GraphEdgeLayerProps {
    /** The edges to draw. Anything SVG works — this is just the surface. */
    children?: React.ReactNode;
    /** Extra classes merged onto the `<svg>` element. */
    className?: string;
}
/**
 * The SVG surface edges are drawn on.
 *
 * Sits beneath the nodes inside a {@link GraphCanvas}, spanning an effectively
 * unbounded area so edges remain visible wherever the graph is panned. It also
 * defines the shared arrowhead marker.
 */
export declare const GraphEdgeLayer: ({ children, className }: GraphEdgeLayerProps) => import("react/jsx-runtime").JSX.Element;