@delove/reaflow/dist/Canvas.d.ts

Node-based Visualizations for React

import React, { FC, ReactElement, Ref } from 'react';
import { Node, NodeProps } from './symbols/Node';
import { Edge, EdgeProps } from './symbols/Edge';
import { ElkRoot, CanvasDirection, LayoutResult, ElkCanvasLayoutOptions } from './layout';
import { MarkerArrow, MarkerArrowProps } from './symbols/Arrow';
import { CanvasPosition, EdgeData, NodeData, PortData } from './types';
import { ZoomResult } from './utils/useZoom';
export interface CanvasContainerProps extends CanvasProps {
    /**
     * Nodes to render on the canvas.
     */
    nodes?: NodeData[];
    /**
     * Edges to render on the canvas.
     */
    edges?: EdgeData[];
    /**
     * Key of node/edge ids for selection.
     */
    selections?: string[];
    /**
     * Direction of the canvas layout.
     */
    direction?: CanvasDirection;
    /**
     * Whether the canvas is pannable or not.
     */
    pannable?: boolean;
    /**
     * Type of interaction to use for panning.
     */
    panType?: 'scroll' | 'drag';
    /**
     * Whether the canvas is zoomable or not.
     */
    zoomable?: boolean;
    /**
     * Where to position the canvas on load (if at all)
     */
    defaultPosition?: CanvasPosition;
    /**
     * Fit the canvas on load.
     */
    fit?: boolean;
    /**
     * Max height of the canvas scrollable area.
     */
    maxHeight?: number;
    /**
     * Max width of the canvas scrollable area.
     */
    maxWidth?: number;
    /**
     * Zoom factor.
     */
    zoom?: number;
    /**
     * Min zoom factor.
     */
    minZoom?: number;
    /**
     * Max zoom factor.
     */
    maxZoom?: number;
    /**
     * ELKJS Layout Options
     */
    layoutOptions?: ElkCanvasLayoutOptions;
    /**
     * Callback when a node is linked.
     */
    onNodeLink?: (event: any, fromNode: NodeData, toNode: NodeData, fromPort?: PortData) => void;
    /**
     * Callback to check if a node is linkable or not.
     */
    onNodeLinkCheck?: (event: any, fromNode: NodeData, toNode: NodeData, fromPort?: PortData) => undefined | boolean;
    /**
     * When the zoom changes.
     */
    onZoomChange?: (zoom: number) => void;
    /**
     * When the layout changes.
     */
    onLayoutChange?: (layout: ElkRoot) => void;
}
export interface CanvasProps {
    /**
     * CSS classname for the container.
     */
    className?: string;
    /**
     * Disable all events or not.
     */
    disabled?: boolean;
    /**
     * Whether the nodes / edges are animated or not.
     */
    animated?: boolean;
    /**
     * Static height of the canvas.
     */
    height?: number;
    /**
     * Static width of the canvas.
     */
    width?: number;
    /**
     * Whether you can drag connections or not.
     */
    readonly?: boolean;
    /**
     * Element of the drag edge.
     */
    dragEdge?: ReactElement<EdgeProps, typeof Edge> | ((edge: EdgeProps) => ReactElement<EdgeProps, typeof Edge>) | null;
    /**
     * Element of the drag node.
     */
    dragNode?: ReactElement<NodeProps, typeof Node> | ((node: NodeProps) => ReactElement<NodeProps, typeof Node>) | null;
    /**
     * Arrow shown on the edges.
     */
    arrow?: ReactElement<MarkerArrowProps, typeof MarkerArrow> | null;
    /**
     * Node or node callback to return element.
     */
    node?: ReactElement<NodeProps, typeof Node> | ((node: NodeProps) => ReactElement<NodeProps, typeof Node>);
    /**
     * Edge or edge callback to return element.
     */
    edge?: ReactElement<EdgeProps, typeof Edge> | ((edge: EdgeProps) => ReactElement<NodeProps, typeof Edge>);
    /**
     * When the canvas had a mouse enter.
     */
    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    /**
     * When the canvas had a mouse leave.
     */
    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    /**
     * When the canvas was clicked.
     */
    onCanvasClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
}
export type CanvasRef = LayoutResult & ZoomResult;
export declare const Canvas: FC<CanvasContainerProps & {
    ref?: Ref<CanvasRef>;
}>;