import { type dia } from '@joint/core';
import { type CSSProperties, type ReactNode } from 'react';
import type { GraphElement } from '../../types/element-types';
import { type GraphProps } from '../graph-provider/graph-provider';
import type { PaperEvents } from '../../types/event.types';
import { type ReactPaperOptions } from '../paper-provider/paper-provider';
import { PaperContext } from '../../context';
export interface OnLoadOptions {
    readonly paper: dia.Paper;
    readonly graph: dia.Graph;
}
export type RenderElement<ElementItem extends GraphElement = GraphElement> = (element: ElementItem) => ReactNode;
/**
 * The props for the Paper component. Extend the `dia.Paper.Options` interface.
 * For more information, see the JointJS documentation.
 * @see https://docs.jointjs.com/api/dia/Paper
 */
export interface PaperProps<ElementItem extends GraphElement = GraphElement> extends ReactPaperOptions, GraphProps, PaperEvents {
    /**
     * A function that renders the element.
     *
     * Note: Jointjs works by default with SVG's so by default renderElement is append inside the SVGElement node.
     * To use HTML elements, you need to use the `HTMLNode` component or `foreignObject` element.
     *
     * This is called when the data from `elementSelector` changes.
     * @example
     * Example with `global component`:
     * ```tsx
     * type BaseElementWithData = InferElement<typeof initialElements>
     * function RenderElement({ label }: BaseElementWithData) {
     *  return <HTMLElement className="node">{label}</HTMLElement>
     * }
     * ```
     * @example
     * Example with `local component`:
     * ```tsx
     *
    type BaseElementWithData = InferElement<typeof initialElements>
    const renderElement: RenderElement<BaseElementWithData> = useCallback(
        (element) => <HTMLElement className="node">{element.label}</HTMLElement>,
        []
    )
     * ```
     */
    readonly renderElement?: RenderElement<ElementItem>;
    /**
     * Event called when all elements are properly measured (has all elements width and height greater than 1 - default).
     * In react, we cannot detect jointjs paper render:done event properly, so we use this special event to check if all elements are measured.
     * It is useful for like onLoad event to do some layout or other operations with `graph` or `paper`.
     */
    readonly onElementsSizeReady?: (options: OnLoadOptions) => void;
    /**
     * Event called when the paper is resized.
     * It is useful for like onLoad event to do some layout or other operations with `graph` or `paper`.
     */
    readonly onElementsSizeChange?: (options: OnLoadOptions) => void;
    /**
     * The style of the paper element.
     */
    readonly style?: CSSProperties;
    /**
     * Class name of the paper element.
     */
    readonly className?: string;
    /**
     * A function that selects the elements to be rendered.
     * It defaults to the `GraphElement` elements because `dia.Element` is not a valid React element (it do not change reference after update).
     * @default (item: dia.Cell) => `BaseElement`
     * @see GraphElement
     */
    readonly elementSelector?: (item: GraphElement) => ElementItem;
    /**
     * The scale of the paper. It's useful to create for example a zoom feature or minimap Paper.
     */
    readonly scale?: number;
    /**
     * Children to render. Paper automatically wrap the children with the PaperContext, if there is no PaperContext in the parent tree.
     */
    readonly children?: ReactNode;
    /**
     * On load custom element.
     * If provided, it must return valid HTML or SVG element and it will be replaced with the default paper element.
     * So it overwrite default paper rendering.
     * It is used internally for example to render `PaperScroller` from [joint plus](https://www.jointjs.com/jointjs-plus) package.
     * @param paperCtx - The paper context
     * @returns
     */
    readonly overwriteDefaultPaperElement?: (paperCtx: PaperContext) => HTMLElement | SVGElement;
    /**
     * The threshold for click events in pixels.
     * If the mouse moves more than this distance, it will be considered a drag event.
     * @default 10
     */
    readonly clickThreshold?: number;
    /**
     * Enabled if renderElements is render to pure HTML elements.
     * By default, `joint/react` renderElements to SVG elements, so for using HTML elements without this prop, you need to use `foreignObject` element.
     * @default false
     */
    readonly useHTMLOverlay?: boolean;
}
declare function PaperWithProviders<ElementItem extends GraphElement = GraphElement>(props: Readonly<PaperProps<ElementItem>>): import("react/jsx-runtime").JSX.Element;
/**
 * Paper component that renders the JointJS paper elements inside HTML.
 * It uses `renderElement` to render the elements.
 * It must be used within a `GraphProvider` context.
 * @see GraphProvider
 * @see PaperProps
 *
 * Props also extends `dia.Paper.Options` interface.
 * @see dia.Paper.Options
 * @group Components
 * @example
 * Example with `global renderElement component`:
 * ```tsx
 * import { createElements, InferElement, GraphProvider, Paper } from '@joint/react'
 *
 * const initialElements = createElements([ { id: '1', label: 'Node 1' , x: 100, y: 0, width: 100, height: 50 } ])
 * type BaseElementWithData = InferElement<typeof initialElements>
 *
 * function RenderElement({ label }: BaseElementWithData) {
 *  return <HTMLElement className="node">{label}</HTMLElement>
 * }
 * function MyApp() {
 *  return <GraphProvider initialElements={initialElements}>
 *    <Paper renderElement={RenderElement} />
 *  </GraphProvider>
 * }
 * ```
 * @example
 * Example with `local renderElement component`:
 * ```tsx
  const initialElements = createElements([
    { id: '1', label: 'Node 1', x: 100, y: 0, width: 100, height: 50 },
  ])
  type BaseElementWithData = InferElement<typeof initialElements>
 
  function MyApp() {
    const renderElement: RenderElement<BaseElementWithData> = useCallback(
      (element) => <HTMLElement className="node">{element.label}</HTMLElement>,
      []
    )
 
    return (
      <GraphProvider initialElements={initialElements}>
        <Paper renderElement={renderElement} />
      </GraphProvider>
    )
  }
 * ```
 */
export declare const Paper: typeof PaperWithProviders;
export {};