reaflow/dist/layout/useLayout.d.ts

Node-based Visualizations for React

import { RefObject } from 'react';
import { CanvasDirection, ElkCanvasLayoutOptions } from './elkLayout';
import { EdgeData, NodeData } from '../types';
export interface ElkRoot {
    x?: number;
    y?: number;
    width?: number;
    height?: number;
    children?: any[];
    edges?: any[];
    direction?: CanvasDirection;
}
export interface LayoutProps {
    maxHeight: number;
    maxWidth: number;
    nodes: NodeData[];
    edges: EdgeData[];
    pannable: boolean;
    center: boolean;
    fit: boolean;
    zoom: number;
    layoutOptions?: ElkCanvasLayoutOptions;
    direction: CanvasDirection;
    setZoom: (factor: number) => void;
    onLayoutChange: (layout: ElkRoot) => void;
}
export interface LayoutResult {
    /**
     * X/Y offset.
     */
    xy: [number, number];
    /**
     * Scroll offset.
     */
    scrollXY: [number, number];
    /**
     * ELK Layout object.
     */
    layout: ElkRoot;
    /**
     * Ref to container div.
     */
    containerRef: RefObject<HTMLDivElement | null>;
    /**
     * Height of the svg.
     */
    canvasHeight?: number;
    /**
     * Width of the svg.
     */
    canvasWidth?: number;
    /**
     * Width of the container div.
     */
    containerWidth?: number;
    /**
     * Height of the container div.
     */
    containerHeight?: number;
    /**
     * Center the canvas to the viewport.
     */
    centerCanvas?: () => void;
    /**
     * Fit the canvas to the viewport.
     */
    fitCanvas?: () => void;
    observe: (el: HTMLDivElement) => void;
}
export declare const useLayout: ({ maxWidth, maxHeight, nodes, edges, fit, pannable, center, direction, layoutOptions, zoom, setZoom, onLayoutChange }: LayoutProps) => LayoutResult;