import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
import type { ConnectionMode, ConnectionLineType, OnConnect, OnConnectStart, OnConnectEnd, CoordinateExtent, KeyCode, PanOnScrollMode, ProOptions, PanelPosition, OnMove, OnMoveStart, OnMoveEnd, Viewport, NodeOrigin, HandleType, SelectionMode, OnError, IsValidConnection, ColorMode, SnapGrid } from '@xyflow/system';
import type { OnSelectionChangeFunc, NodeTypes, EdgeTypes, Node, Edge, ConnectionLineComponent, OnEdgeUpdateFunc, OnInit, DefaultEdgeOptions, FitViewOptions, OnNodesDelete, OnEdgesDelete, OnDelete, OnNodesChange, OnEdgesChange, NodeMouseHandler, SelectionDragHandler, EdgeMouseHandler, OnNodeDrag, OnBeforeDelete } from '.';
/**
 * ReactFlow component props.
 * @public
 */
export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
    /** An array of nodes to render in a controlled flow.
     * @example
     * const nodes = [
     *  {
     *    id: 'node-1',
     *    type: 'input',
     *    data: { label: 'Node 1' },
     *    position: { x: 250, y: 50 }
     *  }
     * ];
     */
    nodes?: Node[];
    /** An array of edges to render in a controlled flow.
     * @example
     * const edges = [
     *  {
     *    id: 'edge-1-2',
     *    source: 'node-1',
     *    target: 'node-2',
     *  }
     * ];
     */
    edges?: Edge[];
    /** The initial nodes to render in an uncontrolled flow. */
    defaultNodes?: Node[];
    /** The initial edges to render in an uncontrolled flow. */
    defaultEdges?: Edge[];
    /** Defaults to be applied to all new edges that are added to the flow.
     *
     * Properties on a new edge will override these defaults if they exist.
     * @example
     * const defaultEdgeOptions = {
     *  type: 'customEdgeType',
     *  animated: true,
     *  interactionWidth: 10,
     *  data: { label: 'custom label' },
     *  hidden: false,
     *  deletable: true,
     *  selected: false,
     *  focusable: true,
     *  markerStart: EdgeMarker.ArrowClosed,
     *  markerEnd: EdgeMarker.ArrowClosed,
     *  zIndex: 12,
     *  ariaLabel: 'custom aria label'
     * }
     */
    defaultEdgeOptions?: DefaultEdgeOptions;
    /** This event handler is called when a user clicks on a node */
    onNodeClick?: NodeMouseHandler;
    /** This event handler is called when a user double clicks on a node */
    onNodeDoubleClick?: NodeMouseHandler;
    /** This event handler is called when mouse of a user enters a node */
    onNodeMouseEnter?: NodeMouseHandler;
    /** This event handler is called when mouse of a user moves over a node */
    onNodeMouseMove?: NodeMouseHandler;
    /** This event handler is called when mouse of a user leaves a node */
    onNodeMouseLeave?: NodeMouseHandler;
    /** This event handler is called when a user right clicks on a node */
    onNodeContextMenu?: NodeMouseHandler;
    /** This event handler is called when a user starts to drag a node */
    onNodeDragStart?: OnNodeDrag;
    /** This event handler is called when a user drags a node */
    onNodeDrag?: OnNodeDrag;
    /** This event handler is called when a user stops dragging a node */
    onNodeDragStop?: OnNodeDrag;
    /** This event handler is called when a user clicks on an edge */
    onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
    /** This event handler is called when a user right clicks on an edge */
    onEdgeContextMenu?: EdgeMouseHandler;
    /** This event handler is called when mouse of a user enters an edge */
    onEdgeMouseEnter?: EdgeMouseHandler;
    /** This event handler is called when mouse of a user moves over an edge */
    onEdgeMouseMove?: EdgeMouseHandler;
    /** This event handler is called when mouse of a user leaves an edge */
    onEdgeMouseLeave?: EdgeMouseHandler;
    /** This event handler is called when a user double clicks on an edge */
    onEdgeDoubleClick?: EdgeMouseHandler;
    onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
    onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
    onEdgeUpdate?: OnEdgeUpdateFunc;
    /** This event handler is called when a Node is updated
     * @example // Use NodesState hook to create edges and get onNodesChange handler
     * import ReactFlow, { useNodesState } from '@xyflow/react';
     * const [edges, setNodes, onNodesChange] = useNodesState(initialNodes);
     *
     * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
     * @example // Use helper function to update edge
     * import ReactFlow, { applyNodeChanges } from '@xyflow/react';
     *
     * const onNodeChange = useCallback(
     *  (changes) => setNode((eds) => applyNodeChanges(changes, eds)),
     *  [],
     * );
     *
     * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
     */
    onNodesChange?: OnNodesChange;
    /** This event handler is called when a Edge is updated
     * @example // Use EdgesState hook to create edges and get onEdgesChange handler
     * import ReactFlow, { useEdgesState } from '@xyflow/react';
     * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
     *
     * return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
     * @example // Use helper function to update edge
     * import ReactFlow, { applyEdgeChanges } from '@xyflow/react';
     *
     * const onEdgesChange = useCallback(
     *  (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
     *  [],
     * );
     *
     * return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
     */
    onEdgesChange?: OnEdgesChange;
    /** This event handler gets called when a Node is deleted */
    onNodesDelete?: OnNodesDelete;
    /** This event handler gets called when a Edge is deleted */
    onEdgesDelete?: OnEdgesDelete;
    /** This event handler gets called when a Node or Edge is deleted */
    onDelete?: OnDelete;
    /** This event handler gets called when a user starts to drag a selection box */
    onSelectionDragStart?: SelectionDragHandler;
    /** This event handler gets called when a user drags a selection box */
    onSelectionDrag?: SelectionDragHandler;
    /** This event handler gets called when a user stops dragging a selection box */
    onSelectionDragStop?: SelectionDragHandler;
    onSelectionStart?: (event: ReactMouseEvent) => void;
    onSelectionEnd?: (event: ReactMouseEvent) => void;
    onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
    /** When a connection line is completed and two nodes are connected by the user, this event fires with the new connection.
     *
     * You can use the addEdge utility to convert the connection to a complete edge.
     * @example // Use helper function to update edges onConnect
     * import ReactFlow, { addEdge } from '@xyflow/react';
     *
     * const onConnect = useCallback(
     *  (params) => setEdges((eds) => addEdge(params, eds)),
     *  [],
     * );
     *
     * return (<ReactFlow onConnect={onConnect} {...rest} />)
     */
    onConnect?: OnConnect;
    /** This event handler gets called when a user starts to drag a connection line */
    onConnectStart?: OnConnectStart;
    /** This event handler gets called when a user stops dragging a connection line */
    onConnectEnd?: OnConnectEnd;
    onClickConnectStart?: OnConnectStart;
    onClickConnectEnd?: OnConnectEnd;
    /** This event handler gets called when a flow has finished initializing */
    onInit?: OnInit;
    /** This event handler is called while the user is either panning or zooming the viewport. */
    onMove?: OnMove;
    /** This event handler gets called when a user starts to pan or zoom the viewport */
    onMoveStart?: OnMoveStart;
    /** This event handler gets called when a user stops panning or zooming the viewport */
    onMoveEnd?: OnMoveEnd;
    /** This event handler gets called when a user changes group of selected elements in the flow */
    onSelectionChange?: OnSelectionChangeFunc;
    /** This event handler gets called when user scroll inside the pane */
    onPaneScroll?: (event?: WheelEvent) => void;
    /** This event handler gets called when user clicks inside the pane */
    onPaneClick?: (event: ReactMouseEvent) => void;
    /** This event handler gets called when user right clicks inside the pane */
    onPaneContextMenu?: (event: ReactMouseEvent | MouseEvent) => void;
    /** This event handler gets called when mouse enters the pane */
    onPaneMouseEnter?: (event: ReactMouseEvent) => void;
    /** This event handler gets called when mouse moves over the pane */
    onPaneMouseMove?: (event: ReactMouseEvent) => void;
    /** This event handler gets called when mouse leaves the pane */
    onPaneMouseLeave?: (event: ReactMouseEvent) => void;
    /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
    onBeforeDelete?: OnBeforeDelete;
    /** Custom node types to be available in a flow.
     *
     * React Flow matches a node's type to a component in the nodeTypes object.
     * @example
     * import CustomNode from './CustomNode';
     *
     * const nodeTypes = { nameOfNodeType: CustomNode };
     */
    nodeTypes?: NodeTypes;
    /** Custom edge types to be available in a flow.
     *
     * React Flow matches an edge's type to a component in the edgeTypes object.
     * @example
     * import CustomEdge from './CustomEdge';
     *
     * const edgeTypes = { nameOfEdgeType: CustomEdge };
     */
    edgeTypes?: EdgeTypes;
    /** The type of edge path to use for connection lines.
     *
     * Although created edges can be of any type, React Flow needs to know what type of path to render for the connection line before the edge is created!
     */
    connectionLineType?: ConnectionLineType;
    /** Styles to be applied to the connection line */
    connectionLineStyle?: CSSProperties;
    /** React Component to be used as a connection line */
    connectionLineComponent?: ConnectionLineComponent;
    /** Styles to be applied to the container of the connection line */
    connectionLineContainerStyle?: CSSProperties;
    /** 'strict' connection mode will only allow you to connect source handles to target handles.
     *
     * 'loose' connection mode will allow you to connect handles of any type to one another.
     * @default 'strict'
     */
    connectionMode?: ConnectionMode;
    /** Pressing down this key deletes all selected nodes & edges.
     * @default 'Backspace'
     */
    deleteKeyCode?: KeyCode | null;
    /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
     *
     * By setting this prop to null you can disable this functionality.
     * @default 'Space'
     */
    selectionKeyCode?: KeyCode | null;
    /** Select multiple elements with a selection box, without pressing down selectionKey */
    selectionOnDrag?: boolean;
    /** When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.
     * @default 'full'
     */
    selectionMode?: SelectionMode;
    /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
     *
     * By setting this prop to null you can disable this functionality.
     * @default 'Space'
     */
    panActivationKeyCode?: KeyCode | null;
    /** Pressing down this key you can select multiple elements by clicking.
     * @default 'Meta' for macOS, "Ctrl" for other systems
     */
    multiSelectionKeyCode?: KeyCode | null;
    /** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
     *
     * By setting this prop to null you can disable this functionality.
     * @default 'Meta' for macOS, "Ctrl" for other systems
     * */
    zoomActivationKeyCode?: KeyCode | null;
    /** Set this prop to make the flow snap to the grid */
    snapToGrid?: boolean;
    /** Grid all nodes will snap to
     * @example [20, 20]
     */
    snapGrid?: SnapGrid;
    /** You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
     *
     * This might improve performance when you have a large number of nodes and edges but also adds an overhead.
     * @default false
     */
    onlyRenderVisibleElements?: boolean;
    /** Controls if all nodes should be draggable
     * @default true
     */
    nodesDraggable?: boolean;
    /** Controls if all nodes should be connectable to each other
     * @default true
     */
    nodesConnectable?: boolean;
    /** Controls if all nodes should be focusable
     * @default true
     */
    nodesFocusable?: boolean;
    /** Defines nodes relative position to its coordinates
     * @example
     * [0, 0] // default, top left
     * [0.5, 0.5] // center
     * [1, 1] // bottom right
     */
    nodeOrigin?: NodeOrigin;
    /** Controls if all edges should be focusable
     * @default true
     */
    edgesFocusable?: boolean;
    /** Controls if all edges should be updateable
     * @default true
     */
    edgesUpdatable?: boolean;
    /** Controls if all elements should (nodes & edges) be selectable
     * @default true
     */
    elementsSelectable?: boolean;
    /** If true, nodes get selected on drag
     * @default true
     */
    selectNodesOnDrag?: boolean;
    /** Enableing this prop allows users to pan the viewport by clicking and dragging.
     *
     * You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.
     * @example [0, 2] // allows panning with the left and right mouse buttons
     * [0, 1, 2, 3, 4] // allows panning with all mouse buttons
     */
    panOnDrag?: boolean | number[];
    /** Minimum zoom level
     * @default 0.1
     */
    minZoom?: number;
    /** Maximum zoom level
     * @default 1
     */
    maxZoom?: number;
    /** Controlled viewport to be used instead of internal one */
    viewport?: Viewport;
    /** Sets the initial position and zoom of the viewport.
     *
     * If a default viewport is provided but fitView is enabled, the default viewport will be ignored.
     * @example
     * const initialViewport = {
     *  zoom: 0.5,
     *  position: { x: 0, y: 0 }
     * };
     */
    defaultViewport?: Viewport;
    /**
     * Gets called when the viewport changes.
     */
    onViewportChange?: (viewport: Viewport) => void;
    /** By default the viewport extends infinitely. You can use this prop to set a boundary.
     *
     * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
     * @example [[-1000, -10000], [1000, 1000]]
     */
    translateExtent?: CoordinateExtent;
    /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
     * @default true
     */
    preventScrolling?: boolean;
    /** By default nodes can be placed on an infinite flow. You can use this prop to set a boundary.
     *
     * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
     * @example [[-1000, -10000], [1000, 1000]]
     */
    nodeExtent?: CoordinateExtent;
    /** Color of edge markers
     * @example "#b1b1b7"
     */
    defaultMarkerColor?: string;
    /** Controls if the viewport should zoom by scrolling inside the container */
    zoomOnScroll?: boolean;
    /** Controls if the viewport should zoom by pinching on a touch screen */
    zoomOnPinch?: boolean;
    /** Controls if the viewport should pan by scrolling inside the container
     *
     * Can be limited to a specific direction with panOnScrollMode
     */
    panOnScroll?: boolean;
    /** Controls how fast viewport should be panned on scroll.
     *
     * Use togther with panOnScroll prop.
     */
    panOnScrollSpeed?: number;
    /** This prop is used to limit the direction of panning when panOnScroll is enabled.
     *
     * The "free" option allows panning in any direction.
     * @default "free"
     * @example "horizontal" | "vertical"
     */
    panOnScrollMode?: PanOnScrollMode;
    /** Controls if the viewport should zoom by double clicking somewhere on the flow */
    zoomOnDoubleClick?: boolean;
    edgeUpdaterRadius?: number;
    noDragClassName?: string;
    noWheelClassName?: string;
    noPanClassName?: string;
    /** If set, initial viewport will show all nodes & edges */
    fitView?: boolean;
    /** Options to be used in combination with fitView
     * @example
     * const fitViewOptions = {
     *  padding: 0.1,
     *  includeHiddenNodes: false,
     *  minZoom: 0.1,
     *  maxZoom: 1,
     *  duration: 200,
     *  nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit
     * };
     */
    fitViewOptions?: FitViewOptions;
    /**The connectOnClick option lets you click or tap on a source handle to start a connection
     * and then click on a target handle to complete the connection.
     *
     * If you set this option to false, users will need to drag the connection line to the target
     * handle to create a connection.
     */
    connectOnClick?: boolean;
    /** Set position of the attribution
     * @default 'bottom-right'
     * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
     */
    attributionPosition?: PanelPosition;
    /** By default, we render a small attribution in the corner of your flows that links back to the project.
     *
     * Anyone is free to remove this attribution whether they're a Pro subscriber or not
     * but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide}
     * before doing so.
     */
    proOptions?: ProOptions;
    /** Enabling this option will raise the z-index of nodes when they are selected.
     * @default true
     */
    elevateNodesOnSelect?: boolean;
    /** Enabling this option will raise the z-index of edges when they are selected.
     * @default true
     */
    elevateEdgesOnSelect?: boolean;
    /**
     * Can be set true if built-in keyboard controls should be disabled.
     * @default false
     */
    disableKeyboardA11y?: boolean;
    /** You can enable this prop to automatically pan the viewport while dragging a node.
     * @default true
     */
    autoPanOnNodeDrag?: boolean;
    /** You can enable this prop to automatically pan the viewport while dragging a node.
     * @default true
     */
    autoPanOnConnect?: boolean;
    /** You can enable this prop to automatically pan the viewport while making a new connection.
     * @default true
     */
    connectionRadius?: number;
    /** Ocassionally something may happen that causes Svelte Flow to throw an error.
     *
     * Instead of exploding your application, we log a message to the console and then call this event handler.
     * You might use it for additional logging or to show a message to the user.
     */
    onError?: OnError;
    /** This callback can be used to validate a new connection
     *
     * If you return false, the edge will not be added to your flow.
     * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
     * @default (connection: Connection) => true
     */
    isValidConnection?: IsValidConnection;
    /** With a threshold greater than zero you can control the distinction between node drag and click events.
     *
     * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
     * @default 1
     */
    nodeDragThreshold?: number;
    /** Sets a fixed width for the flow */
    width?: number;
    /** Sets a fixed height for the flow */
    height?: number;
    /** Controls color scheme used for styling the flow
     * @default 'system'
     * @example 'system' | 'light' | 'dark'
     */
    colorMode?: ColorMode;
}
export type ReactFlowRefType = HTMLDivElement;
//# sourceMappingURL=component-props.d.ts.map